@charset "UTF-8";
/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,200,300);
@import url(http://fonts.googleapis.com/css?family=Varela+Round);



body {background-color:#000 ; font-family: 'Yanone Kaffeesatz', sans-serif;}
#pagina {margin:auto;width:960px;}


#banner {
	position:absolute;
	width:100%;
	margin:0px;
	padding:0px;
	top: 15px;
}







/* HEADER */


header{height:330px;}

#usuario {width:280px; height:25px; margin-left:660px;  z-index:2; position:absolute; margin-top:150px;}

form#usuario h2 {color: #FFF; margin-top: 6px; margin-bottom: 5px; font-size: 16px; font-family:  'Yanone Kaffeesatz', sans-serif; text-decoration: none;width:280px; height:25px; margin-left:1px;  z-index:2; position:absolute; margin-top:2px;}

form#usuario input.usuario { font-family:  'Yanone Kaffeesatz', sans-serif; font-size: 15px; width: 100px; margin-bottom:auto;margin-top: 25px;}

form#usuario input.password { font-family:  'Yanone Kaffeesatz', sans-serif; font-size: 15px; width: 100px; margin-left:7px;
margin-bottom: 8px;}

form#usuario input.submit {background-image: url(images/icono-registrarse.jpg); background-repeat: no-repeat; background-size: 100%; margin-left:6px;; width: 20px; height: auto;}

form#usuario { position: absolute; right: -17px; bottom: 15px; background-color: #999; height: 85px; width: 260px; color: #FFF; font-size: 13px; font-family:  'Yanone Kaffeesatz', sans-serif; padding-left: 15px; box-shadow: 3px 3px 6px rgba(153, 153, 153, 0.6); padding-top: 8px;}

form#usuario a { color: #140066; text-decoration: none;}


.buscador{width:280px; height:25px; margin-left:680px;  z-index:2; position:absolute; margin-top:20px;}
.buscar{background-color: rgba(0, 0, 0, 0.55); color:#FFF; font-family: 'Yanone Kaffeesatz', sans-serif; font-size: 20px; width:250px; height:17px; padding:4px 0px 4px 5px; float:left; border:0px;}
.lupa{background-color:rgba(93, 93, 93, 0.6); float:left; width:25px; height:25px;}



/* CONTENIDO */
#contenido{background-image: url(images/texturasection.jpg); background-repeat:no-repeat; background-size: 960px 870px;background-position: bottom;}

.frase{width:600px; height:30px; margin-left:350px; padding-top:25px; font-family: 'Yanone Kaffeesatz', sans-serif; font-style:italic; text-align:center; font-size:38px; color:#140066; text-shadow: 2px 2px 5px #FFF; z-index:1; position:absolute;margin-top: auto;margin-bottom:auto;}
.masInfo{width:50px; color:#FFF; font-size:12px; text-align:center; top:30px; left:0px; 
/*margin:0px 20px 0px 200px; */}
.masInfo:hover{width:50px; background-color:#140066;}

.masInfoalumnos{width:50px; color:#140066; text-decoration-color: #fff; font-size:12px; text-align:center; top:30px; left:0px; 
/*margin:0px 20px 0px 200px; */}
.masInfoalumnos:hover{width:50px; background-color:#ff59cd;color:#fff;}

.masInfoserigrafia{width:50px; color:#140066; text-decoration-color: #999; font-size:12px; text-align:center; top:30px; left:0px; 
/*margin:0px 20px 0px 200px; */}
.masInfoserigrafia:hover{width:50px; background-color:rgba(245, 245, 0, 0.8);color:#000;}


#contenido{background-color:rgba(255, 255, 255, 0.51); height:964px; width:960px; position:absolute; z-index:1; border-bottom-left-radius:20px;border-bottom-right-radius:20px;margin-top: -74px; }
 

#contenido{background-color:rgba(255, 255, 255, 0.51); height:964px; width:960px; position:absolute; z-index:1; border-bottom-left-radius:20px;border-bottom-right-radius:20px;margin-top: -74px; }

#contenido{background-color:rgba(255, 255, 255, 0.51); height:964px; width:960px; position:absolute; z-index:1; border-bottom-left-radius:20px;border-bottom-right-radius:20px;margin-top: -74px; }



#izquierda{width:270px; height:1010px; background-color: rgba(0, 0, 0, 0.64); border-radius:10px; float:left; position:absolute; z-index:2; left:40px; top:-229px;} 


#izquierdaniveluno{width:270px; height:1170px; background-color: rgba(0, 0, 0, 0.64); border-radius:10px; float:left; position:absolute; z-index:2; left:40px; top:-229px;} 

#izquierdaiveldos{width:270px; height:1170px; background-color: rgba(0, 0, 0, 0.64); border-radius:10px; float:left; position:absolute; z-index:2; left:40px; top:-229px;} 

#izquierdaalumnos{width:270px; height:1180px; background-color: rgba(0, 0, 0, 0.64); border-radius:10px; float:left; position:absolute; z-index:2; left:40px; top:-229px;} 


#izquierdamcreativo{width:270px; height:1190px; background-color: rgba(0, 0, 0, 0.64); border-radius:10px; float:left; position:absolute; z-index:2; left:40px; top:-229px;} 


#izquierdaserigrafia{width:270px; height:1150px; background-color: rgba(0, 0, 0, 0.64); border-radius:10px; float:left; position:absolute; z-index:2; left:40px; top:-229px;} 




.col1{width:300px; height:200px; position:absolute; left:325px; top:100px; border-left:solid #000 3px; background-color:#FFF;}
.col1 h2{font-family: 'Yanone Kaffeesatz', sans-serif; color:#140066; margin-left:20px; margin-top:15px; margin-bottom:0px; font-size:30px; line-height:22px; font-weight:bold;}
.col1 span {font-size:20px; margin-top:0px; font-weight:400;}
.col1 p{font-family: 'Varela Round', sans-serif; padding: 0px 20px 10px 20px; font-size:12px; text-align:left;}
.col1 .masInfo{width:50px; background-color:none; color:#000; font-size:14px; font-weight: 700; margin-top:0px; margin-left:220px; text-align:center; position:absolute; top:160px;}
.col1 .masInfo:hover{ background-color:#000;color:#FFF;}


.col2{width:300px; height:200px; position:absolute; left:645px; top:100px; border-left:solid #000 3px;background-color:#FFF;}
.col2 h2{font-family: 'Yanone Kaffeesatz', sans-serif; color:#140066; margin-left:20px; margin-top:15px; margin-bottom:0px; font-size:30px; line-height:22px; font-weight:bold;}
.col2 span {font-size:20px; margin-top:0px; font-weight:400;}
.col2 p{font-family: 'Varela Round', sans-serif; padding: 0px 20px 10px 20px; font-size:12px; text-align:left;}
.col2 .masInfo{width:50px; background-color:none; color:#000; font-size:14px; font-weight: 700;  margin-top:0px; margin-left:220px; text-align:center; position:absolute; top:160px;}
.col2 .masInfo:hover{ background-color:#000;color:#FFF;}

.col3{ width:610px; height:190px; position:absolute; left:325px; top: 320px; border-radius:10px;background-color:#FFF; }
.col3 img{float:left;}
.col3 img:hover {background-image:url(imagenes/bicic.hover.png); background-repeat:no-repeat;}
.col3 .logoNuevo{position:absolute; left:530px; top:-7px;}
.col3 h2{font-family: 'Yanone Kaffeesatz', sans-serif; font-size:30px; width: 700; margin:0px 0px 0px 10px; color:#140066;}
.col3 h3 {font-family: 'Yanone Kaffeesatz', sans-serif; font-size:20px; margin:0px 0px 10px 200px; color:#140066;}
/*.col3:hover {background-color:#999999;} */
.col3 span {font-weight:300;}
.col3 p{ font-family: 'Varela Round', sans-serif;top:60px; font-size:12px; padding-right:20px; color:#140066; margin:0px 0px 0px 10px;}
.co13 .masInfo {width:50px; background-color:#408393; color:#FFF; font-size:12px; margin:600px 0px 0px 0px;}




.col5 { width:610px; height:230px;  float:left; margin:535px 0px 0px 325px; padding:10px 0px 0px 10px; border-top:solid 0px #000000; border-bottom: solid 3px #000000;background-color:#FFF;border-top: solid #000;}
.col5 h2{font-family: 'Yanone Kaffeesatz', sans-serif; font-size:30px; margin:0px 0px 10px 10px; color:#140066;}
.col5 h3 {font-family: 'Yanone Kaffeesatz', sans-serif; font-size:30px; margin:0px 0px 10px 10px; color:#140066;}
.col5 span {font-family: 'Varela Round', sans-serif;font-size: 16px; font-weight:300;}
.col5 p{font-family: 'Varela Round', sans-serif; padding: 0px 20px 10px 0px; font-size:15px; text-align:left;}












.col6{background-color:#0C6; width:610px; height:190px; position:absolute; left:325px; top: 240px; background-color: rgba(91, 98, 125, 0.4); border-radius:10px;}
.col6 img{float:left;}
.col6 .logoNuevo{position:absolute; left:540px; top:-9px;}
.col6 h2{font-family: 'Yanone Kaffeesatz', sans-serif; font-size:20px; position:absolute; left:200px;}
.col6 span {font-weight:300;}
.col6 p{position:absolute; left:200px; top:60px; font-size:12px; padding-right:20px; color:#FFF;}

.col7{background-color:#0C6; width:610px; height:190px; position:absolute; left:325px; top: 240px; background-color: rgba(91, 98, 125, 0.4); border-radius:10px;}
.col7 img{float:left;}
.col7 .logoNuevo{position:absolute; left:540px; top:-9px;}
.col7 h2{font-family: 'Yanone Kaffeesatz', sans-serif; font-size:20px; position:absolute; left:200px;}
.col7 span {font-weight:300;}
.col7 p{position:absolute; left:200px; top:60px; font-size:12px; padding-right:20px; color:#FFF;}


.col4{width:900px; height:190px; position:absolute; left:37px; top: 430px; margin:350px auto;}
.col4 h2{font-family: 'Yanone Kaffeesatz', sans-serif; font-size:20px; position:absolute; border-bottom:solid #140066 2px; width:875px; padding:0px 0px 10px 25px; color:#140066;}
.col4 span {font-weight:300;}
.col4 .alumno {background-color: rgba(91, 98, 125, 0.3); width:200px; height:70px; float:left; margin:70px 20px 7px 5px;}
.col4 .alumno img{background-color:#666; width:50px; height:50px; margin:10px 0px 10px 10px; float:left;}
.col4 .alumno h3{font-size:16px;font-weight: 700; margin-left: 70px; margin-top:10px; position:absolute; color:#FFF;}
.col4 .alumno p{font-family: 'Varela Round', sans-serif;  font-size:11px; font-weight: 500; color:#000;margin-left: 70px; margin-top:30px; position:absolute; width:175px;}



/* NAV */

#izquierda nav ul {padding:0px; font-family: 'Yanone Kaffeesatz', sans-serif; font-size:21px; font-weight:700; }
#izquierda nav ul li{list-style-type:none;}
#izquierda nav ul li a{text-decoration:none;}
#izquierda nav ul li a div{color:#FFF; text-decoration:none; border-bottom:dotted #BDC5D9 1px; padding:6px 25px 6px 25px;}
#izquierda nav ul li a div:hover{color:#FFF; text-decoration:none; border-bottom: dotted #FFF 1px; background-color: rgba(0, 216, 255, 0.5); font-style:italic;text-shadow: 2px 2px 5px #000;}



#izquierdamcreativo nav ul {padding:0px; font-family: 'Yanone Kaffeesatz', sans-serif; font-size:21px; font-weight:700; }
#izquierdamcreativo nav ul li{list-style-type:none;}
#izquierdamcreativo nav ul li a{text-decoration:none;}
#izquierdamcreativo nav ul li a div{color:#FFF; text-decoration:none; border-bottom:dotted #BDC5D9 1px; padding:6px 25px 6px 25px;}
#izquierdamcreativo nav ul li a div:hover{color:#FFF; text-decoration:none; border-bottom: dotted #FFF 1px; background-color: rgba(0, 216, 255, 0.5); font-style:italic;text-shadow: 2px 2px 5px #000;}



#izquierdaalumnos nav ul {padding:0px; font-family: 'Yanone Kaffeesatz', sans-serif; font-size:21px; font-weight:700; }
#izquierdaalumnos nav ul li{list-style-type:none;}
#izquierdaalumnos nav ul li a{text-decoration:none;}
#izquierdaalumnos nav ul li a div{color:#FFF; text-decoration:none; border-bottom:dotted #BDC5D9 1px; padding:6px 25px 6px 25px;}
#izquierdaalumnos nav ul li a div:hover{color:#FFF; text-decoration:none; border-bottom: dotted #FFF 1px; background-color: rgba(0, 216, 255, 0.5); font-style:italic;text-shadow: 2px 2px 5px #000;}

#izquierdaniveluno nav ul {padding:0px; font-family: 'Yanone Kaffeesatz', sans-serif; font-size:21px; font-weight:700; }
#izquierdaniveluno nav ul li{list-style-type:none;}
#izquierdaniveluno nav ul li a{text-decoration:none;}
#izquierdaniveluno nav ul li a div{color:#FFF; text-decoration:none; border-bottom:dotted #BDC5D9 1px; padding:6px 25px 6px 25px;}
#izquierdaniveluno nav ul li a div:hover{color:#FFF; text-decoration:none; border-bottom: dotted #FFF 1px; background-color: rgba(0, 216, 255, 0.5); font-style:italic;text-shadow: 2px 2px 5px #000;}

#izquierdaiveldos nav ul {padding:0px; font-family: 'Yanone Kaffeesatz', sans-serif; font-size:21px; font-weight:700; }
#izquierdaiveldos nav ul li{list-style-type:none;}
#izquierdaiveldos nav ul li a{text-decoration:none;}
#izquierdaiveldos nav ul li a div{color:#FFF; text-decoration:none; border-bottom:dotted #BDC5D9 1px; padding:6px 25px 6px 25px;}
#izquierdaiveldos nav ul li a div:hover{color:#FFF; text-decoration:none; border-bottom: dotted #FFF 1px; background-color: rgba(0, 216, 255, 0.5); font-style:italic;text-shadow: 2px 2px 5px #000;}


#izquierdaserigrafia nav ul {padding:0px; font-family: 'Yanone Kaffeesatz', sans-serif; font-size:21px; font-weight:700; }
#izquierdaserigrafia nav ul li{list-style-type:none;}
#izquierdaserigrafia nav ul li a{text-decoration:none;}
#izquierdaserigrafia nav ul li a div{color:#FFF; text-decoration:none; border-bottom:dotted #BDC5D9 1px; padding:6px 25px 6px 25px;}
#izquierdaserigrafia nav ul li a div:hover{color:#FFF; text-decoration:none; border-bottom: dotted #FFF 1px; background-color: rgba(0, 216, 255, 0.5); font-style:italic;text-shadow: 2px 2px 5px #000;}


/*REDES SOCIALES*/
#redesSociales{position:relative; left:-20px; top:30px;background-image: url(images/bg_body.jpg); background-color:rgba(0, 16, 102, 0.77); width:280px; height:560px; border-radius:10px; box-shadow: -3px -3px  8px rgba(10, 10, 10, 0.3); border-radius:10px; box-shadow: -3px -3px  8px rgba(10, 10, 10, 0.3); }

#materialcreativo {position:relative; margin-top:50px; background-color:rgba(245, 0, 172, 0.8); width:270px; height:650px; border-radius:10px; box-shadow:  -3px -3px  8px rgba(10, 10, 10, 0.3); }


#serigrafiapastilla{position:relative; margin-top:50px; background-color:rgba(245, 245, 0, 0.8); width:270px; height:630px; border-radius:10px; box-shadow:  -3px -3px  8px rgba(10, 10, 10, 0.3); }

#lacursadapastilla{position:relative; margin-top:50px; background-color:rgba(245, 245, 0, 0.8); width:270px; height:440px; border-radius:10px; box-shadow:  -3px -3px  8px rgba(10, 10, 10, 0.3); }


#haciendocamino {position:relative; margin-top:50px; background-color:rgba(245, 245, 0, 0.8); width:270px; height:630px; border-radius:10px; box-shadow:  -3px -3px  8px rgba(10, 10, 10, 0.3); }

#niveldos {position:relative; margin-top:50px; background-color:rgba(245, 0, 172, 0.8); width:270px; height:630px; border-radius:10px; box-shadow:  -3px -3px  8px rgba(10, 10, 10, 0.3); }

#niveluno {position:relative; margin-top:50px; background-color:rgba(245, 0, 172, 0.8); width:270px; height:625px; border-radius:10px; box-shadow:  -3px -3px  8px rgba(10, 10, 10, 0.3); }

#alumnos {position:relative; margin-top:50px; background-color:rgba(245, 0, 172, 0.8); width:270px; height:650px; border-radius:10px; box-shadow:  -3px -3px  8px rgba(10, 10, 10, 0.3); }


.logozachin{width:50px; height:50px; position:absolute; left:170px; top:-8px; background-image:url(images/registrozachin.png); border:0px;}
.logosiu{width:50px; height:50px; position:absolute; left:220px; top:-8px; background-image:url(images/registrisiu.png); border:0px;}
.logozachin:hover{opacity:1; background-image:url(images/regitrozachinHover.png);height:64px; border:0px;}
.logosiu:hover{opacity:1; background-image:url(images/registrosuiHover.png);height:64px; border:0px;}

.tituloRedes{height:70px;}
.tituloRedes h2{padding:5px 0px 5px 30px; font-family: 'Yanone Kaffeesatz', sans-serif; font-size:30px; font-weight:bold; color:#000;}
.tituloRedes span{font-family:'Yanone Kaffeesatz', sans-serif; font-size:18px; color:#000; }

.pastilla {height:70px;}
.pastilla h2{padding:5px 0px 5px 30px; font-family: 'Yanone Kaffeesatz', sans-serif; font-size:28px; font-weight:700; color:#FFF;}
.pastilla span{font-family: 'Yanone Kaffeesatz', sans-serif; font-size:18px; font-weight:300; color:#FFF;}
.pastilla2 {margin-top: -15px;}





.fan{background-color:rgba(255, 255, 255, 0.2); width:235px; height:70px; margin-left:30px; margin-bottom:7px;}
.fan img{background-color:#666; width:50px; height:50px; margin:10px 0px 10px 10px; float:left;}
.fan h3{font-size:16px; margin-left: 70px; margin-top:10px; position:absolute;}
.fan p{font-size:14px; font-weight: 300; margin-left: 70px; margin-top:25px; position:absolute; width:175px;}

.fan1{background-color:rgba(255, 255, 255, 0.2); width:235px; height:73px; margin-left:30px; margin-bottom:7px;}
.fan1 img{background-color:#666; width:50px; height:50px; margin:10px 0px 10px 10px; float:left;}
.fan1 h3{font-size:16px; margin-left: 70px; margin-top:10px; position:absolute;}
.fan1 p{font-family: 'Varela Round', sans-serif; font-size:11px; font-weight: 300; margin-left: 70px; margin-top:32px; position:absolute; width:175px;}

.formulario {width:440px; position:absolute; left:430px; top:90px; height:350px; border-radius:10px; border:dashed #CCCCCC 1px;}
.formualrio .caja {width:400px; height:300px; margin:20px auto;}
.formulario .texto {margin-top:20px; height:25px;}
.formulario .texto p {width:150px; float:left; margin:auto; text-align:right; padding-right:10px; padding-top:7px; font-size:13px; height:24px;}
.formulario .complete {background-color:#408393; color:#FFF; margin:auto; height:20px; width:230px; border-radius:5px; border:0px; opacity:0.5;}
.formulario textarea {background-color:#408393; color:#FFF; margin:auto; height:20px; width:230px; height:150px; border-radius:5px; border:0px; opacity:0.5;}

.formulario2 {width:200px; position:absolute; left:0px; top:65px; height:220px; border-radius:10px; border:dashed #CCCCCC 1px; margin:0px 0px 0px 30px; padding:0px 0px 0px 10px;}
.formualrio2 .caja {width:400px; height:300px; margin:20px auto;}
.formulario2 .texto {margin-top:20px; height:25px;}
.formulario2 .texto p {width:150px; float:left; margin:auto; text-align:right; padding-right:10px; padding-top:7px; font-size:13px; height:24px;}
.formulario2 .complete {background-color:#408393; color:#FFF; margin:auto; height:20px; width:230px; border-radius:5px; border:0px; opacity:0.5;}
.formulario2 textarea {background-color:#408393; color:#FFF; margin:auto; height:20px; width:230px; height:150px; border-radius:5px; border:0px; opacity:0.5;}


/* footer de todas las paginas */
footer {height:130px; left:0px; top:1250px; position:absolute; width:100%; color:#999;}
footer ul li a {text-decoration:none; color:#999;}
footer ul li a:hover {color:#fff;}
footer .footerInside {height:120px; width:960px; margin:auto;}
footer .footerInside ul {float:left; height:140px; width:200px; margin:0px; list-style-type:none; padding:20px; text-align:left; font-size:16px;}
footer .footerInside ul h2 {border-bottom:1px #999 solid; font-size:16px; line-height:15px; margin-top:0px; color:#999;  }
footer .footerInside .form {float:left; height:140px; width:200px; margin:0px; list-style-type:none; padding:20px; text-align:left; }
footer .footerInside .form h2 {border-bottom:1px #999 solid; font-size:16px; line-height:15px; margin-top:0px;}
footer .footerInside .form input {background-color:#999; border:0px; height:5px; margin:2px; padding:8px; color:#140066; font-family: 'Varela Round', sans-serif;font-size: 12px;}
footer .footerInside .form .btn {background-color:#CCC; border:0px; height:25px; margin:2px; padding:5px; margin-left:135px;}
footer .footerInside .form .btn:hover {background-color:#FFF;}



/*fin del footer */







#sideLog{
	display: block;
	clear: both;
	padding: 65px 10px 10px 10px;
	margin: 0 0 10px 0;
	width: 160px;
	min-height: 228px;
	height: auto !important;
	height: 228px;
	background: #FFF url(../images/bg_sidelog.gif) no-repeat center top;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	/*behavior: url(ie-css3.htc);*/
}




@media screen
and (max-width : 600px) {
	.wrapper{display:block;}
	#izquierda {width:400px;}
	.frase {display:none;}
	.col1, .col2, .col3 {display:none;}
    .buscador {display:none;}
	#redesSociales {width:300px; left:40px;margin-top: -20px;}
	
	.fan{width:250px;}
	.col5{display:none;}
	.col4 {display:none;}
	#contenido{ height:800px;width: 500px;}
	.form { display: none;}
	footer {display:none;}
}

@media all and (min-width : 600px)
and (max-width : 860px) {
	.wrapper{display:block;}
	#izquierda {width:270px;}
	.frase {display:flex; width: 350px;background-origin: padding-box;position:absolute;float: left; margin-left:320px;}
	.col1  {display:inline;position: relative;float: left;margin-top: 70px;margin-left: 30px;}
    .col2 {display:inline;position:absolute;margin-top: 320px;margin-left: -290px; float:left;}
    .col3 {display:none;}
    .buscador {float: left; position: fixed;margin-left: 350px;}
    .fan{width:250px;}
	.col5{display:none;}
	.col4 {display:none;}
	#contenido{ height:800px;width:960px;}
    #usuario{ position: fixed;margin-left: 330px;}
	.form { display: none;}
	footer {display:none;}
}