* {margin:0;padding:0}
html, input, textarea {font-family: Tahoma, sans-serif; font-size:100%}
body {font-size:70%; background:#1a171b; color:#92999f} 
a {color:#fff; text-decoration:none}
a:hover {text-decoration:underline}
ul {list-style:none}

#general {
	width: 828px;
	margin: 0 auto;
	background: url(img/raya_side.gif) no-repeat;
	display: grid;
	grid-template-columns: 248px 3fr 1fr;
	grid-template-rows: 168px 407px 1fr;
	grid-template-areas: 
		"header aside aside"
		"nav article ."
		". article .";
	grid-gap: 18px
	}
#portada #general {
		grid-template-areas: 
		"header aside aside"
		"nav article article"
		". article article";
	}
header {grid-area: header;background: url(img/logo_zersetzer.gif) bottom left no-repeat}
header.es {background:url(img/logo_zersetzer_es.gif) bottom left no-repeat}
header.en {background:url(img/logo_zersetzer_en.gif) bottom left no-repeat}
aside {grid-area: aside;background: url(img/fondo_aside.gif) no-repeat}
article {grid-area:article}
nav {grid-area: nav;align-self: end}

header h1 a {display:block;text-indent: -5000px;width:80%;height: 165px;margin: 0 0 0 auto}

nav .lang {text-align: right;padding-right: 125px}
nav .main {padding-left: 153px}

aside {padding-top: 26px}
aside ul {display: flex;flex-flow: column wrap;height: 6.5em;align-content: space-between;grid-gap: 5px}
aside li {width: 20%;padding: 0 9px}
aside li.separar {margin-bottom: 1em}

article {min-height: 390px}
article h2 {color:#52656F; font-weight:normal}
article p, article ul {margin: 1em 0; line-height:1.6em}

table {margin: 2em 0}
table th {width:20%; text-align: right;}
table td,
table th {vertical-align:top;padding: 0 .2em .6em 0;line-height:1.6em;padding-right:10px}

fieldset {border:0}
input.text, textarea {background:#D1C9D3;border:0;font-size:1.1em;padding:2px;margin-top:.5em;width:100%}
legend {display:none}
form div {margin: 1em 0; list-style-type:none}
label {display:block}
fieldset.previsu  {border: 1px dotted #44525a;padding: 0 1em;margin: 2em 0 }
.boutons input {padding: .3em .5em;cursor:pointer}

#galeria {display: grid;grid-template-columns: 20px 1fr 20px;
	grid-template-rows: 1fr 50px;
	grid-template-areas: "prev galeria next" ". caption .";
	}
#galeria .cycle-slideshow {grid-area: galeria;background:#52656f;width:100%;border-radius: 10px 10px 10px 0}
#galeria img {border: 3px solid #fff;width:97.5%;height:auto;box-sizing: border-box;margin:7px}
.nav a {color:#a3acb2;padding:4px;background:#52656f; font-size:1.4em}
.nav a:hover {color:#fff; text-decoration:none}
.next {grid-area: next;align-self: center;text-align: left}
.prev {grid-area: prev;align-self: center;text-align: right}
#next {border-radius: 0 15px 15px 0}
#prev {border-radius: 15px 0 0 15px}
.caption {grid-area: caption}
#caption {margin:0;background:#52656f;padding: 0 10px 5px 10px;color:#fff;border-radius: 0 0 15px 15px;display:inline-block;max-width:80%}


@media only screen and (max-width: 776px) {
	body {font-size: 92%}
	#general,
	#portada #general
		 {
			width: 100%;
			background: none;
			grid-template-columns: 1fr;
			grid-template-rows: 90px 1.6em 1fr 20em;
			grid-template-areas: 
				"header"
				"nav"
				"article"
				"aside";
			}
	header {background: url(img/logo_zersetzer.gif) -40px -80px no-repeat}
	nav {padding: 0 16px}
	nav .lang {text-align: left;padding:0;position:absolute;top:8px;right:0;width:8em}
	nav .lang li {display:inline;padding:.3em;font-size: 105%}
	nav .lang a {padding:.3em .4em;background-color:#000}
	nav .main {padding-left: 0;display:flex;flex-flow: row wrap;height:3em;justify-content: space-between;align-content: end;font-size: 120%}
	nav .main li {width:auto}
	article {padding: 2em 16px;min-height: auto}
	#portada article {padding: 1em 0}
	article p, article ul {max-width: 100%}
	aside {background:none}
	aside ul {height:17.5em;align-content:center}
	aside li {width: 44%;margin-bottom: .6em;box-sizing: border-box}
	aside li.separar {margin-bottom: .6em}
	#galeria {display: grid;grid-template-columns: 23px 1fr 23px}
	}
@media only screen and (max-width: 460px) {
	#galeria .cycle-slideshow {border-radius: 10px 10px 0 0}
	#galeria img {border: 2px solid #fff;width:95.3%}
	#caption {display:block;font-size: .9em;max-width:100%}
	.nav a {font-size: 1em}

	}
@media only screen and (min-width: 1200px) {
	body {font-size: 95%}
	#general {width:1094px;grid-template-rows: 180px 420px 1fr;grid-gap: 24px}
	#portada #general {
		grid-template-areas: 
		"header aside aside"
		"nav article ."
		". article .";
		}
	aside {grid-area: aside;background: url(img/fondo_asidewide.gif) no-repeat}
	.nav a {font-size: 1em}
	
	}