@import url(http://fonts.googleapis.com/css?family=Abel);
@import url(http://fonts.googleapis.com/css?family=Josefin+Sans:400,700);
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic);

header { width: 100%;  background: #FBF7D7; float:center; margin: 0%; }
body { background: #FBF7D7; font-size:16px; width: 100%;}
main { width: 100%;  background: #FBF7D7; margin: 0% auto;}
aside { width: 100%;  background: #FBF7D7; margin: 0% auto; }
section { width: 100%; height: 1240px; background-image: url("../tp/img/galeria.png") ; margin: 0% ; }


.logo {width: 7%; margin-left: 0%; margin-top: 15px; margin-left: 1%; position: absolute; list-style-type: none;}

/*apuntes*/
.Apu1con { width: 50%; background: #FBF7D7; margin: 0%;  float: left; }

/* archivo historico de ilustracion argentina*/
.link{color: #fda11d;  text-decoration:none;}
.ILUSTRADORES { width: 55%; background: #FBF7D7; margin-bottom: 30px; }
.ilus{ width: 25%; background: #FBF7D7; float: left; }
.ilus2{ width: 70%; background: #FBF7D7; margin: 1% 0% 0% 2%;  float: left; }
.ilus03 {width: 100%;   }

/*  trimarchi */
.simple { width: 25%; height: 310PX; background: #FBF7D7; margin: 0% 0% 0% 0%;  float: left; padding: 0px;}
.doble { width: 50%; height: 310PX; background: #FBF7D7; margin: 1% 0%; float:right; }
.triplevacio { width: 75%; background-image: url(img/trimarchi1.jpg);  float: left; padding: 0px;}
.doblevacio { width: 50%; background-image: url(img/trimarchi2.jpg);; margin: 1% 0%; float:left; }

/*  TEORICAS*/
.TEORICAANTERIOR{ width: 100%; background: #FBF7D7; margin: 2% 0% 2% 2%;  float: right; padding: 0px;}
.imagenesteoricas{width: 100%; height: 320px;  position: relative; align-content: center}
.imgteorica2{ width: 49%; background: #FBF7D7; margin: 2% 0% 2% 2%;float:right; }

.imgteorica1{ width: 49%; background: #FBF7D7; margin: 2% 0% 2% 0%;float:left; }

/* beca */
.becatexto { width: 50%; background: #FBF7D7; margin: 0%;  float: left; }
.becatexto h5 {font-family: 'Droid Serif', serif; color: #ED706E; font-weight: 700;
font-size: 0.8rem; text-align: left; margin: 0.5rem; line-height: 1.5rem; }
.becatexto h3 {font-family: 'Josefin Sans', sans-serif; font-weight: 700; color:  rgba(120, 21, 126, 0.98); font-size: 1.2rem; text-align: left; margin: 0.5rem; line-height: 1.2rem;}
.becaimg { width: 50%; background: #FBF7D7; margin: 0%;  float: left; }
.imgcons {width: 100%; align-content: right; margin-top: 0px;}

/*  CONSIGNAS*/
.tp1con { width: 50%; background: #FBF7D7; margin: 0%;  float: left; }
.tp1img { width: 50%;  background: #FBF7D7; margin: 0%;  float: left; }
.boton { width: 23%; height: 80PX; background: #f53a89; margin: 1%;  float: left; }
.boton1 { width: 23%; height: 80PX; background: #21f8bf; margin: 1%;  float: left; }
.boton2 { width: 23%; height: 80PX; background: rgba(120, 21, 126, 0.98); margin: 1% ;  float: left; }
.boton3{ width: 23%; height: 80PX; background: #ED706E; margin: 1% 0% 1% 0%;  float: right; }
.boton4 { width: 49.7%; height: 80PX; background: #21f8bf; margin: 1% 0.3% 1% 0% ;  float: left; }
.boton5 { width: 49.7%; height: 80PX; background: #f88726; margin: 1% 0% 1% 0.3%;  float: left; }
.VACIOCON{ width: 100%; height: 60PX; background: #FBF7D7; margin: 0%;  float: left; }

.imgcons {width: 100%; align-content: right; margin-top: 0px;}

/*  PROGRAMA*/
.tpprog { width: 98%; margin: 1%; }

/*  PRESENTACION*/
.PRESENTACIONpres { width: 100%; background: #FBF7D7; margin: 2% 1% 2% 0%;  float: left; padding: 0px;}
.TP1 { width: 49%; background: #FBF7D7; margin: 2% 1%; float:left; }
.TP2 { width: 49%; background: #FBF7D7; margin: 2% 0% 2% 1%;float:right; }

.art1 { width: 23%; height: 910PX; background: #FBF7D7; margin: 2% 0%; float:left; }
.art2 { width: 23%; height: 910PX; background: #FBF7D7; margin: 2% 0% 2% 0%;float:right; }
.imgart1{width: 50%; height: 150px; position: relative; align-content: center}
.imgart2{width: 50%; height: 150px; position: relative; align-content: right}

.tp2{width: 100%; height: 320px;  position: relative; align-content: center}

/*  referencias*/
.PRESENTACIONpres { width: 100%; background: #FBF7D7; margin: 2% 1% 2% 0%;  float: left; padding: 0px;}
.TP1 { width: 49%; background: #FBF7D7; margin: 2% 1%; float:left; }
.TP2 { width: 49%; background: #FBF7D7; margin: 2% 0% 2% 1%;float:right; }
.imgfull {width: 100%;  position: relative; align-content: center}
.art1 { width: 23%; height: 910PX; background: #FBF7D7; margin: 2% 0%; float:left; }
.art2 { width: 23%; height: 910PX; background: #FBF7D7; margin: 2% 0% 2% 0%;float:right; }
.imgart1{width: 50%; height: 150px; position: relative; align-content: center}
.imgart2{width: 50%; height: 150px; position: relative; align-content: right}

.tp2{width: 100%; height: 320px;  position: relative; align-content: center}


/*  agenda*/
.tp1ag { width: 50%; height: 600PX; background: #FBF7D7; margin: 0%;  float: left; }
.imgag { width: 50%; height: 600PX; background: #FBF7D7; margin: 0%;  float: left; }
.botonag { width: 24%; height: 200px; background: #f53a89; margin: 1% 0.5% 1% 0%;  float: left; }
.boton1ag { width: 24.25%; height: 200PX; background: #21f8bf; margin: 1% 0.5% 1% 0.75%;  float: left; }
.boton3ag { width: 24.25%; height: 200PX; background: rgba(120, 21, 126, 0.98); margin: 1% 0.75% 1% 0.5% ;  float: right; }
.boton2ag { width: 24%; height: 200PX; background: #ED706E; margin: 1% 0% 1% 0.5%;  float: right; }
.boton4ag { width: 49.5%; height: 200PX; background: #21f8bf; margin: 1% 0% ;  float: left; }
.boton5ag { width: 49.5%; height: 200PX; background: #f88726; margin: 1% 0% 1% 0%;  float: right; }
.boton6ag { width: 24.25%; height: 200PX; background: #0067fc; margin: 1% 0.5% 1% 0.75%;  float: left; }
.boton7ag { width: 24%; height: 200px; background: rgba(120, 21, 126, 0.98); margin: 1% 0.5% 1% 0%;  float: left; }
.VACIOAG{ width: 100%; height: 200PX; background: #FBF7D7; margin: 0%;  float: left; }

.imgag{width: 100%; height: 100%; position: relative; align-content: center}

/*  contacto*/
.art4 { width: 46%; background: #FBF7D7; margin: 0%; float:left; }

/** estilos formulario de contacto **/

div#contacto {
	width: 100%;
	background-color: #FBF7D7;
	margin: auto;
	position: relative;
	}

div#formulario_contacto {
	width: 50%;
	background-color:#21f8bf;
	margin: auto;
	margin-top: 0px;
	margin-bottom: 20px;
	padding: 10px;
	float: right;
}

div#formulario_contacto label {
	font-family: 'Josefin Sans', sans-serif;
	font-size: 14px;
	width:80%;
	display:block;
	margin-top: 10px;
	
}

div#formulario_contacto input#enviar {
	width: 20%;
	background-color: rgba(120, 21, 126, 0.98);
	display:block;
	cursor: pointer;
	margin: auto;
	margin-top: 20px;
    color: #FBF7D7;
}

div#formulario_contacto input#email, div#formulario_contacto textarea {
	width: 340px;
	
	}

div#formulario_contacto h1 {

	margin: auto;
	font-size: 16px;
	font-family: 'Josefin Sans', sans-serif;
	color: #030303;
	display:block;
	
}
/** fin de estilos de formulario de contacto**/

/** estilos "gracias" **/

div#gracias {
	width: 100%;
	margin: auto;
	position: relative;
	}
	
	
div#texto_gracias {
	width: 50%;
	background-color:#FBF7D7;
	margin: auto;
	padding: 10px;
	
}

div#texto_gracias h1 {
	margin: auto;
	font-size: 21px;
	font-family: 'Josefin Sans', sans-serif;
	color: rgba(120, 21, 126, 0.98);;
	display:block;
	}
	
div#texto_gracias h2 {
	margin: auto;
	font-size: 16px;
	font-family: 'Josefin Sans', sans-serif;
	color: #000;;
	display:block;
	}
	
	
div#texto_gracias p {
	margin: auto;
	margin-top: 40px;
	font-size: 14px;
	font-family: 'Josefin Sans', sans-serif;
	color: #000;;
	display:block;
	}
	


/*  docentes*/
.DOCENTES { width: 25%; background: #FBF7D7; float: left; }
.VACIODOC { width: 70%; background: #FBF7D7; margin: 1% 0% 0% 2%;  float: left; }
/*.PRESENTACIONDOC { width: 100%;  background: #000;  }*/
.trabajosdoc  { width: 70%; background: #FBF7D7; margin: 2% 0% 0% 2%; float: right; }
.oliver2 {width: 100%;   }


/*  index*/

.TP3 { width: 50%;  background: #FBF7D7; margin: 2% 1% 2% 0%;  float: left; padding: 0px; }
.CLASE { width: 23%; background: #21f8bf; margin: 2% 1%; float:left; }
.GALERIA { width: 23%; background: #fda11d; margin: 2% 0% 2% 1%;float:left; }

/*  galeria*/
.simple { width: 25%; height: 310PX; background: #FBF7D7; margin: 0% 0% 0% 0%;  float: left; padding: 0px;}
.doble { width: 50%; height: 310PX; background: #FBF7D7; margin: 1% 0%; float:right; }
.triplevacio { width: 75%; height: 310PX; background: rgba(145, 48, 119, 0); margin: 0% 0% 0% 0%;  float: left; padding: 0px;}
.doblevacio { width: 50%; height: 310PX; background: rgba(145, 48, 119, 0); margin: 1% 0%; float:left; }

/* eventos */

.eventoshoy { width: 25%; height: 420px; background: rgb(198, 252, 189); margin: 0% 2% 0% 2%;  float: left; }
.VACIO { width: 75%; height: 420px; background:rgb(198, 252, 189) ; margin:  0% 0% 0% 2%;  float: right; }
.evenpasado { width: 25%; height: 50PX; background: #FBF7D7; margin: 2% 1% 2% 2%;  float: left; }
.nada  { width: 65%; height: 80PX; background: #FBF7D7; margin: 2% 1% 2% 2%; float:left; }
.PRESENTACION { width: 25%; height: 450PX; background: #FBF7D7; margin: 2% 0% 0% 2%;  float: left; }
.trabajos  { width: 70%; height: 450PX; background: #FBF7D7; margin: 2% 0% 0% 2%; float:left; }


/* FOOTER H3 { position: absolute; text-align: right; margin-top: 1%; right: 26%; }*/

/*
header p {   font-family: 'Abel', sans-serif; position: absolute; text-align: right; margin-top: 8%; right: 2%; }*/

.banner { position: relative;}
.epigrafe { position: absolute; right: 80%; bottom: 90%; top: 4%; }


    
h1 {font-family: 'Josefin Sans', sans-serif;
    font-weight: 400;
    color:  #3d3535;
    font-size: 1rem;
    text-align: left;
    margin: 0.5rem}

h2 {font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    color:  #f53a89;
    padding: 9px 0 0px 5px;
    font-size: 2.5rem;
    text-align: left;
    margin: 0rem 0 0 0;
line-height: 2.6REM;}

h3 {font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    color:  #3d3535;
    font-size: 1.2rem;
    text-align: left;
    margin: 0.5rem;
    line-height: 1.2rem;
   }

h4 {font-family: 'Josefin Sans', sans-serif;
    font-weight: 400;
    color:  #FBF7D7;
    font-size: 1rem;
    text-align: left;
    margin: 0.5rem}

h5 {font-family: 'Droid Serif', serif;
    color: #3d3535;
    font-weight: 700;
    font-size: 0.8rem;
    text-align: left;
    margin: 0.5rem;
    line-height: 1.5rem;}

H6 {font-family: 'Droid Serif', serif;
    color: rgba(120, 21, 126, 0.98);
    font-size: 0.8rem;
    text-align: left;
    margin: 0.5rem;
    line-height: 1.5rem;}

p {font-family: 'Droid Serif', serif;
    color: #3d3535;
    font-size: 0.8rem;
    text-align: left;
    margin: 0.5rem;
    line-height: 1.5rem;}

footer p {font-family: 'Abel', sans-serif;
    text-decoration:none;
    color: #3d3535;
    font-size: 0.9rem;
    text-align: left;
    margin: 0rem;}
/*
header nav{ width: 90%; font-family: 'Abel', sans-serif; font-size: 1rem; float:right; margin:5px 0 0 0; list-style-type:none; background:#FBF7D7}
header nav ul li{ float: right; list-style-type:none; background:#FBF7D7 }
header nav ul li a{ color:#3d3535; text-decoration:none; padding:8px; margin:8px;  display:block;}*/

#contentheader{
		background-color:#FBF7D7;
		width:100%;
		margin:0PX;
        height: 200px;
        float: inherit;}
    
header p {font-family: 'Abel', sans-serif;
    text-decoration:none;
    color: #3d3535;
    font-size: 0.9rem;
    text-align: right;
    margin: 0rem;}

header nav ul{
            text-decoration:none;
            width: 91%;
			color:#3d3535;;
			font-size:0.7rem;
			margin:auto;
			padding:0;
			height:20px;
            list-style-type: none;
            float: right;
		}	
		
header nav ul li{
			margin:0 0 10px 0;
			padding:50px 0px ;
			list-style-type:none;
			width:10%;
			float:right;
            color:#3d3535;
            text-decoration:none;

		}

header nav ul li a{
			text-decoration:none;
			color:#3d3535;
			font-size:0.7rem;
			display:inline-block;
    float: right;
			width:100%;
			height:0.8rem;
			text-align:right;
			line-height:10px;
            font-family: 'Abel', sans-serif;
            margin-right: 8px;
				}
.pagina{
    max-width: 960px;
    margin: 0 auto; }

/* --
.footer {
	font-family: Helvetica, sans-serif; font-size:0.5rem; color:#999999; height:30px; margin:auto; padding:0px;}
	
	footer{
		background-color:#333333;
		width:100%;
		height:180px;
		float:left;
		margin:auto;
		}
		
borrado anterior

footer { width: 100%; height: 100px; background: #ED706E; margin: 0% auto; }
		----*/


.destacado {
background:#ffec08;
	}
		
	
.footer p{
	font-family: 'Abel', sans-serif;
	font-size:1rem;
	color:#3d3535;
	text-align:left;
    line-height:15px;
    padding: 7px;
    text-decoration:none;
    margin-left: 2px;
	}
	
#contentfooter{
		background-color:#FBF7D7;
		width:100%;
        
		margin:0;
        margin-left: 0px;
        clear: both;
        margin-top: 10px;

		}		
						
			
footer nav{
            text-decoration:none;
            width: 100%;
			color:#3d3535;;
			font-size:1rem;
			margin:auto;
			padding:0;
			height:70px;
		}	
		
footer nav ul {
			margin:0 0 10px 0;
			padding:10px 0 10px 0 ;
			list-style-type:none;
			width:25%;
			float:left;
            color:#3d3535;
            text-decoration:none;

		}
		

/* -- opciones - botones nav 		--*/
footer nav ul li a{
			text-decoration:none;
			color:#3d3535;
			font-size:0.9rem;
			display:block;
			width:100%;
			height:1rem;
			text-align:left;
			line-height:30px;
            font-family: 'Abel', sans-serif;
            margin-left: 8px;
				}

#legales p{
            font-family: 'Abel', sans-serif;        
			color:#FBF7D7;
			font-size:0.8rem;
			width:100%;
			text-align: center;
			line-height:15px;
            font-family: 'Abel', sans-serif;
            padding-top: 10px;
            padding-bottom: 10px;
            float: center;
				}

#legales {background-color:rgba(88, 49, 92, 0.83);
		width:100%;
		margin:0;
        margin-left: 0px;
        clear: both;
}
		
.activo{
			color:#7403f7;
		}

header nav ul li a:hover{
			color:#e903f7;
		}
		
header nav ul li a:active{
			color:#7403f7;
		}
		


footer nav ul li a:hover{
			color:#e903f7;
		}
		
footer nav ul li a:active{
			color:#7403f7;
		}

/* empieza el menu */

* {
    margin: 0;
    padding: 0;
}

body {
    color: #333333;
    font-family: 'Abel', sans-serif;
	font-size:0.8rem;
	color:#3d3535;
	text-align:left;
    line-height:15px;
}
.container {
    margin-top: 30px;
    float: right;
    width: 58%;
    clear: both;
}

/* common and top level styles */
#nav span {
    display: none;
}
#nav, #nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    background-color: #FBF7D7;
    float: left;
    margin-left: 1%;
    margin-right: 1%;
    position: relative;
    width: 98%;
}
#nav ul.subs {
    background-color: #FBF7D7;
    color: #333333;
    display: none;
    left: 0;
    padding: 2%;
    position: absolute;
    top: 54px;
    width: 96%;
}
#nav > li {
    border-bottom: 5px solid transparent;
    float: right;
    margin-bottom: -5px;
    text-align: right;
    -moz-transition: all 300ms ease-in-out 0s;
    -ms-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
}
#nav li a {
    display: block;
    text-decoration: none;
    -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    white-space: normal;
    color: #3d3535;
}
#nav > li > a {
    color: #333333;
    display: block;
    font-size: 1.3em;
    line-height: 49px;
    padding: 0 15px;
    text-transform: uppercase;
}
#nav > li:hover > a, #nav > a:hover {
    background-color: #21f8bf;
    color: #FFFFFF;
}
#nav li.active > a {
    background-color: #333333;
    color: #FFFFFF;
}

/* submenu */
#nav li:hover ul.subs {
    display: block;
}
#nav ul.subs > li {
    display: inline-block;
    float: none;
    padding: 10px 1%;
    vertical-align: top;
    width: 33%;
}
#nav ul.subs > li a {
    color: #777777;
    line-height: 20px;
    color: #3d3535;
}
#nav ul li a:hover {
    color: #21f8bf;
}
#nav ul.subs > li > a {
    font-size: 1.3em;
    margin-bottom: 10px;
    text-transform: uppercase;
}
#nav ul.subs > li li {
    float: none;
    padding-left: 8px;
    -moz-transition: padding 150ms ease-out 0s;
    -ms-transition: padding 150ms ease-out 0s;
    -o-transition: padding 150ms ease-out 0s;
    -webkit-transition: padding 150ms ease-out 0s;
    transition: padding 150ms ease-out 0s;
}
#nav ul.subs > li li:hover {
    padding-left: 15px;
}

/* responsive rules menu */
@media all and (max-width : 960px) {
    #nav > li {
        float: none;
        border-bottom: 0;
        margin-bottom: 0;
    }
    #nav ul.subs {
        position: relative;
        top: 0;
    }
    #nav li:hover ul.subs {
        display: none;
    }
    #nav li #s1:target + ul.subs,
    #nav li #s2:target + ul.subs {
        display: block;
    }

    #nav ul.subs > li {
        display: block;
        width: auto;
    }
}

/* responsive rules  */
@media screen and (max-width:768px){
    main {max-width: 100%; background: #FBF7D7; margin: 1%; height: 400px;}
    header { width: 100%;  height: 300px;  background: #FBF7D7; float:center; margin: 0%; }
    aside { max-width: 100%; color: #000; height: 200px;}
    section {max-width: 100%; margin: 1%;}
    footer {max-width: 100%; }

     #contentheader{
		background-color:#FBF7D7;
		width:100%;
		margin:0;
        height: 350px;
        float:right; }
    

    /*  CONSIGNAS*/
.tp1con { width: 50%; background: #FBF7D7; margin: 0%;  float: left; }
.tp1img { width: 50%;  background: #FBF7D7; margin: 0%;  float: left; }
.boton { width: 23%; height: 80PX; background: #f53a89; margin: 1%;  float: left; }
.boton1 { width: 23%; height: 80PX; background: #21f8bf; margin: 1%;  float: left; }
.boton2 { width: 23%; height: 80PX; background: rgba(120, 21, 126, 0.98); margin: 1% ;  float: left; }
.boton3{ width: 23%; height: 80PX; background: #ED706E; margin: 1% 0% 1% 0%;  float: right; }
.boton4 { width: 49.7%; height: 80PX; background: #21f8bf; margin: 1% 0.3% 1% 0% ;  float: left; }
.boton5 { width: 49.7%; height: 80PX; background: #f88726; margin: 1% 0% 1% 0.3%;  float: left; }
.VACIOCON{ width: 100%; height: 60PX; background: #FBF7D7; margin: 0%;  float: left; }
    
    /* responsive rules tp */
    .TP3 { width: 100%; background: #FBF7D7; margin: 2% 1%; float:left; }
    .CLASE { width: 46%; background: #21f8bf; margin: 2% 1% 2% 1%; float:left; }
    .GALERIA { width: 46%; background: #fda11d; margin: 2% 1% 2% 1%;float:left; }
    .logo {width: 15%; margin-left: 5%; margin-top: 45px; position: absolute; list-style-type: none;}
    
    /* responsive rules presentacion */
    
.PRESENTACIONpres { width: 100%; background: #FBF7D7; margin: 2% 1% 2% 0%;  float: left; padding: 0px;}
.TP2 { width: 100%; background: #FBF7D7; margin: 2% 0% 2% 1%;float:right; }
.tp2{width: 33%; height: 220px; position: relative; align-content: center}
    }

@media screen and (max-width:320px){
    main {max-width: 100%; background: #FBF7D7; margin: 1%; height: 400px;}
    header { width: 100%;  height: 400px;  background: #FBF7D7; float:center; margin: 0%; }
    aside { max-width: 100%; color: #000; height: 200px;}
    section {max-width: 100%; margin: 1%;}
    footer {max-width: 100%; }
    
    #contentheader{
		background-color:#FBF7D7;
		width:50%;
		margin:0;
        height: 200px;
        float:right; }
    
/* responsive rules tp */
    .TP3 { width: 100%;  background: #FBF7D7; height: 600px;  margin: 2% 1%; float:left; }
    .CLASE { display: none;}
    .GALERIA { display: none; }
  
/* responsive rules presentacion */
    
.PRESENTACIONpres { width: 100%; background: #FBF7D7; margin: 2% 1% 2% 0%;  float: left; padding: 0px; clear: both;}
.TP2 { width: 100%; background: #FBF7D7; margin: 2% 0% 2% 1%;float:right; clear: both;}
.tp2 {display: none;}
    
    /*  CONSIGNAS*/
.tp1con { width: 100%; background: #FBF7D7; margin: 0%;  float: left; clear: both; }
.tp1img { display: none; }
.boton { display: none; }
.boton1 { display: none; }
.boton2 { display: none; }
.boton3 { display: none; }
.boton4 { display: none; }
.boton5 { display: none; }
.VACIOCON{ width: 100%; height: 60PX; background: #FBF7D7; margin: 0%;  float: left; clear: both;}
    
.logo {width: 25%; margin-left: 10%; margin-top: 15%; position: absolute; list-style-type: none;}


    
    /*  MENU*/
.container {
        display: block;
        width: auto; }
    
#nav > li {
        float: none;
        border-bottom: 0;
        margin-bottom: 0;
        width: 75%;
    }
    #nav ul.subs {
        display: none;
        top: 0;
    }
    #nav li:hover ul.subs {
        display: none;
    }
    #nav li #s1:target + ul.subs,
    #nav li #s2:target + ul.subs {
        display: block;
    }

    #nav ul.subs > li {
        display: block;
        width: auto;
    }
}