@import url(http://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,400,400italic,500,500italic,700,700italic,900,900italic);

/* hoja de estilos */
*{margin:0; padding:0;}

body {
    width: 100%;
    height: 100%;
    margin: 0%;
    padding: 0%;
    font-family: 'Roboto', sans-serif;
    background: #58c4bb;
    background-image:url(img/animalitos_fondo.png)
}
div#pagina {
    width: 960px;
    margin:0 auto;
    background-color: rgba(147, 28, 34, 0.88);
}
header {background: #e00c0c}
div#puntos {height: 230px; 
    background-repeat: no-repeat;
    background: #58c4bb}
div#logo {
    margin-left: 10px;
    margin-top: 74px;
    float: left;
}
.titulo1 {
    height: 70px;
    width: 200px;
    float: left;
    display: block;
    font-size: 58px;
    color: #d6244b;
    margin-left: 16px;
    margin-top: 60px;
    font-weight:700;
    padding: 0px;
}
.titulo2 {
    width: 220px;
    height: 70px;
    float: left;
    display: block;
    font-size: 53px;
    color: #d6244b;
    margin-left: -200px;
    margin-top: 93px;
    font-weight: 700;
}
.bajada{
    width: 200px;
    display: block;
    font-size: 16px;
    color: rgb(48, 54, 69);
    margin-left: 123px;
    font-weight: 300;
}


header nav {width: 620px; height: 20px;}   
header nav ul {list-style: none; z-index:10; margin: 0px; padding: 0px;}
header nav ul li {
    border-left: 1px solid #58c4bb;
    float: left;
}
header nav ul li a {
    text-decoration: none;
    display: block;
    width: 100%;
    font-size: 12pt;
    color: rgb(48, 54, 69);
    font-weight: 500;
    text-align: center;
}
header nav ul li a:hover{color: #e2834d;}
header nav ul li ul li {border-left: none; background-color: #58c4bb; }
header nav ul li ul{
    display: none;
    z-index: 10;
}
header nav ul li ul a{ font-weight:300; text-align: center;}
header nav li:hover >ul {display: block;}
article {overflow: hidden;}
h0 {
    width: 700px;
    display: block;
    float: left;
    border-top: 1px dashed #fff;
    margin-top: -35px;
    margin-left: 10px;
}
.bienvenidos {
   margin-left: 10px;
   margin-top: 50px;
   display: block;
   font-weight: 500;
   font-size: 23px;
   color: #fff;
}
article div#clases {
    width: 700px;
    height: 370px;
    float: left;
    margin-left: 10px;
    margin-top: 10px;
}
article div#bloquecostado {
    width: 220px;
    height: 390px;
    float: left;
    margin-left: 20px;
    margin-top: -38px;
    background-color: rgba(226, 131, 77, 0.79);
}
.minititulo {
    display: block;
    font-size: 16px; 
    font-weight: 500; 
    color: #931c22;
    margin-left: 10px;
    margin-top: 10px;
}
h1 {
    border-top: 1px solid;
    color: #931c22;
    margin-left: 10px;
    margin-right: 10px;
}
h2{
    border-top: 1px dashed rgba(255, 255, 255, 0.53);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 15px;
}
.turno {
    display: block;
    font-size: 16px; 
    font-weight: 500; 
    color: #fff;
    margin-left: 10px;
    margin-top: 10px;
}
.clase {
    display: block;
    font-size: 14px; 
    font-weight: 300; 
    color: #fff;
    margin-left: 10px;
    margin-top: 10px;
}
.minimini {
    display: block;
    font-size: 16px; 
    font-weight: 300; 
    color: #fff;
    margin-left: 10px;
    margin-top: 10px;
}
.ver {
    display: block;
    font-size: 14px; 
    font-weight: 300; 
    color: #35CED6;
    margin-left: 10px;
    margin-top: 0px;
}

div#navegador nav{ 
    float: left;
    width: 30px;
margin-top:330px;
margin-right: 325px}
div#navegador nav ul {
list-style: none}
div#navegador nav ul li {width: 300px;text-decoration: none;}

div#navegador nav ul li a {   
    display: block;
    font-size: 14px; 
    font-weight: 300; 
    color: #35CED6;
    margin-left: 10px;
    margin-top: 0px;
    text-decoration: none
}
div#navegador2 nav{ 
    float: left;
    width: 30px;
margin-top:400px;
margin-right: 325px}
div#navegador2 nav ul {
list-style: none}
div#navegador2 nav ul li {width: 300px;text-decoration: none;}

div#navegador2 nav ul li a {   
    display: block;
    font-size: 14px; 
    font-weight: 300; 
    color: #35CED6;
    margin-left: 10px;
    margin-top: 0px;
    text-decoration: none
}
section {overflow:hidden;}
.titulosection {
    display: block;
    font-size: 16px; 
    font-weight: 500; 
    color: #fff;
    margin-left: 10px;
    margin-top: 20px;
}
h3 {
    width: 460px;
    border-top: 2px solid;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 10px;
}
.añosanteriores {
    display: block;
    font-size: 16px; 
    font-weight: 300; 
    color: #f3b481;
    margin-left: 10px;
    margin-top: 10px;    
}
h4 {
    width: 460px;
    border-top: 1px solid;
    color: #e2834d;
    margin-left: 10px;
}
.destacados2014 {
    display: block;
    font-size: 16px; 
    font-weight: 300; 
    color: #f3b481;
    margin-left: 490px;
    margin-top: -20px;    
}
h5 {
    width: 460px;
    border-top: 1px solid;
    color: #e2834d;
    margin-left: 490px;
    margin-right: 10px;
}
section div {
    width: 460px; 
    height: 192px; 
    float: left; 
    margin-left: 10px;
    margin-top: 20px;
    margin-bottom: 0px;
}
div#fotostp2 {margin-left: 20px;}
aside {overflow:hidden;}
.agenda {
    display: block;
    font-size: 18px; 
    font-weight: 500; 
    color: #fff;
    margin-left: 10px;
    margin-top: 20px;
}
aside div {width: 220px; height: 230px; float:left; margin-top: 20px; margin-bottom: 60px;}
aside div#agenda1 {margin-left: 10px; background-image: url(img/sanabria1.png); background-repeat: no-repeat; clear: both; }
aside div#agenda2 {margin-left: 20px; background-image:url(img/lau.png); background-repeat: no-repeat;}
aside div#agenda3 {margin-left: 20px;background-image:url(img/alemanes.png); background-repeat: no-repeat;}
aside div#agenda4 {margin-left: 20px;background-image:url(img/muestra2014.png) ; background-repeat: no-repeat;}
.tituloagenda {
    width: 220px;
    margin-top: 160px;
    font-size: 16px;
    color: #f3b481;
    font-weight: 500;
    float: left;
    clear: both;
}
h6 {
    border-top: 1px solid;
    color: #f3b481;
    margin-top: 160px;
}
.notaagenda {
    width: 220px;
    margin-top: 10px;
    font-size: 12px;
    color: #fff;
    font-weight: 100;
    float: left;
    
}
h7 {
    width: 960px;
    height: 2px;
    border-top: 1px dashed rgba(167, 163, 163, 0.5);
}
footer {overflow:hidden;
        height: 100px;
        width: 100%;
        background: rgba(78, 112, 96, 0.76);}

div#puntosfooter {
     height: 196px; 
}

div#textofooter {
    width:900px;
    float: left;
    margin-top: 20px;
    margin-left: 0px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 10px;
    color: #FFF;
    font-weight: 100;
    border-top: #fff;
    text-align: center;
}





	/*hoja de estilos de propuesta*/


section {
	overflow:hidden;
}

div#propuesta{
    width: 620px;
    height: 1230px;
    float: left;
    margin-left: 10px;
    margin-top: 20px;
	
}

div#propuesta h1{
	margin-left: 0px;
    margin-top: 17px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 23.3333px;
    color: #fff;
    border-bottom: #fff solid 1px;
}

.introduccion{
	display: block;
	margin-left: 0px;
    margin-top: 26px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #f3b481;
    border-bottom: #f3b481 solid 1px;
}

div#propuesta p{
	margin-left: 0px;
    margin-top: 15px;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    font-size: 14px;
    color: #fff;
}

div#fotoderecha{
	display: block;
	width: 300px;
    height: 1200px;
    float: right;
    margin-right: 10px;
    margin-top: 20px;
	background: url(imagenes/fotopropuesta.jpg) ;
}




/*Media Queries*/
/********Codigo para celulares*********/
@media all and (max-width: 360px){
	header {width: 360px; position: inherit !important;}
	.mov {width:360px;}
	.noMov{ display:none;}
	#pagina { height: auto; width: 360px!important;}
	
	nav {width: 360px; height: 100px; margin-top: 50px;}  
	nav ul {list-style: none; width: 360px; height: 150px;}
	nav ul li { float: none; width:360px; height:60px; background:none; border-left: none !important; border-bottom:1px solid #02FCF3;}
	nav ul li:first-child { border-top:1px solid #02FCF3;}
	nav ul li a { text-decoration: none; display: block; font-size: .8em; color: rgb(48,54,69); font-weight: 500; text-align: center; width:360px; height:20px; padding:15px 0px; }

	nav ul li:hover { background:#02FCF3;}
	nav ul li:nth-child(1):hover { height:160px;}
	nav ul li:nth-child(2):hover { height:130px;}
	nav ul li:nth-child(3):hover { height:130px;}
	nav ul li:nth-child(4):hover { height:60px;}
	nav ul li a:hover{ color:rgb(48,54,69) !important;}	
	
	nav ul li ul {display: block;}
	nav ul li ul li { height: 40px; border-left: none; background: #02FCF3 !important; }
	nav ul li ul li { background: #02FCF3 !important; margin:0px; }
	nav ul li ul li a{ text-align: center; color:rgb(48,54,69); padding: 10px 0px 0px 0px;}

	nav ul li:nth-child(1):hover >ul { height:auto;}
	nav ul li:nth-child(2):hover >ul { height:auto;}
	nav ul li:nth-child(3):hover >ul { height:auto;}
	
	nav ul li ul:hover { background:#02FCF3;}
	nav ul li ul li:hover {height: 40px !important ; }
	nav ul li ul li a:hover{ color:rgb(48,54,69); }
	
	footer { margin-top: 10px; display:block; width:360px; float: none !important; clear:both;}
	#prop{ display:block; clear:both; width:300px !important; padding: 20px;}

}
	
@media all and (min-width: 361px) and (max-width: 640px){
	header {width: 640px; position: inherit !important; }
	.noMov{ display:none;}
	.mov {width:640px;}
	#pagina { height: auto; width:640px !important;}
	
	nav {width:640px; height: 100px; margin-top: 50px;}  
	nav ul {list-style: none; width:640px; height: 150px;}
	nav ul li { float: none; width:640px; height:60px; background:none; border-left: none !important; border-bottom:1px solid #02FCF3;}
	nav ul li:first-child { border-top:1px solid #02FCF3;}
	nav ul li a { text-decoration: none; display: block; font-size: .8em; color: rgb(48,54,69); font-weight: 500; text-align: center;width:640px; height:20px; padding:15px 0px; }

	nav ul li:hover { background:#02FCF3;}
	nav ul li:nth-child(1):hover { height:160px;}
	nav ul li:nth-child(2):hover { height:130px;}
	nav ul li:nth-child(3):hover { height:130px;}
	nav ul li:nth-child(4):hover { height:60px;}
	nav ul li a:hover{ color:rgb(48,54,69) !important;}	
	
	nav ul li ul {display: block;}
	nav ul li ul li { height: 40px; border-left: none; background: #02FCF3 !important; }
	nav ul li ul li { background: #02FCF3 !important; margin:0px; }
	nav ul li ul li a{ text-align: center; color:rgb(48,54,69); padding: 10px 0px 0px 0px;}

	nav ul li:nth-child(1):hover >ul { height:auto;}
	nav ul li:nth-child(2):hover >ul { height:auto;}
	nav ul li:nth-child(3):hover >ul { height:auto;}
	
	nav ul li ul:hover { background:#02FCF3;}
	nav ul li ul li:hover {height: 40px !important ; }
	nav ul li ul li a:hover{ color:rgb(48,54,69); }
	
	footer { margin-top: 10px; display:block; width:640px; float: none !important; }
	div#textofooter {width: 300px; float:left; margin: 15px 0px 0px 20px ; padding: auto; font-size: .6em; color: #FFF; font-weight: 100;}

	
	
		/****Propuesta****/
	div#propuesta{ width: 600px; height: auto; float: none !important; margin: 50px 0px; border-top: rgb(160, 160, 160) dashed 1px; display:block !important;}
	div#propuesta h1{ text-align:center; margin:auto; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 1.2em; color: #fff; border-bottom: #fff solid 1px; }
	
	.introduccion{width: 600px; display: block; margin: 20px 0px 10px 0px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 1em; color: rgb(235, 204, 80); border-bottom: rgb(235, 204, 80) solid 1px;}
	div#propuesta p{ margin: 10px 0px; font-family: 'Roboto', sans-serif; font-weight: 100; font-size: .8em; color: #fff;}
	#prop{ display:block; clear:both;width: 600px; padding: 20px;}
	aside { display:none;}
}


@media all and (min-width: 641px){
    header {position: relative;}
    .contacto {position: absolute; top: 138px; right: 10px;}
    nav {position: absolute; top: 200px; right: 0px;}
    nav ul li {width: 154px; float: left;}

    
    footer {position: relative;}