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

*{margin: 0;
padding: 0;
border: none;
outline: none;}

body{
	background: black;
		font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	overflow-x: hidden;
}

#containter{
	width: 100%;
	overflow-x: hidden;
}


#header{
	background: url("../img/bg_header.jpg");
	background-repeat: no-repeat;
	background-position: center;
	min-height: 1000px;
	background-attachment: fixed;
}

#l_escuela{

	width: 232px;
	margin: 0 auto;
	padding: 90px 0;
}


#l_evento{
	width: 50%;
	min-height: 412px;
	margin: 0 auto;
}

#l_evento img{display: block;
	width: 100%;
	height: auto;
margin: 0 auto;}

#frase{
	background: url("../img/textura2.jpg");
	width: 100%;
	min-height: 660px;
	background-repeat: repeat-y;
	background-position: center;
	background-attachment: fixed;
	background-color: #ECE6D8;
}


#w_frase{
	width: 926px;
	height: 515px;
	margin: 0 auto;
	position: relative;
}

#w_frase img{
	position: absolute;
	top: -100px;
}




#sec3{
	background: url("../img/bg_cuerpo.jpg");
	width: 100%;
	min-height: 1000px;
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center;
}


#datos, #video{
	background: white;
}

#info_datos{
width: 60%;
margin: 0 auto;
}

#datos img{display: block;
margin: 0 auto;
padding: 50px 0;
width: 100%;
height: auto;}



#mapa{
	background: #004923;
	width: 100%;
	min-height: 20vh;
	height: 600px;
}


#w_mapa{
	width: 90%;
	margin: 0 auto;
	padding: 20px;
}

#map{
	width: 100%;
	height: 100px;
	}

#w_mapa_l{
	width: 50%;
	
}

#w_mapa_l #map{
	height: 560px;
}

#w_mapa_r{
	width: 48%;
	background-color: #ECE6D8;
	height: 560px;
	position: relative;
	background: url("../img/bg_map.jpg");
	background-repeat: no-repeat;
	background-position: center;
}

#w_mapa #mapa_info{
	width: 80%;
	margin: 0 auto;
	padding: 3vh 0;
}


#w_mapa #mapa_info img{
	width:100%;
	height: auto;
}


#mapa_redes{
width: 90%;
margin: 0 auto;
position: absolute;
bottom: 10px;
right: 10px;}



#m_1{
	width: 60%;
	height: 20px;
	float: left
}

#m_2{
	float: left
}


#m_3{
	float: right;
}

#m_2, #m_3{
	width: 18%;
	padding-left: 2%
}

#m_2 a img, #m_3 a img{
	display: block;
	margin: 0 auto;
	width: 100%;
	height: auto;
}

#mapa_redes div a img{
	transition: all ease .6s;
}

#mapa_redes div a img:hover{
	opacity: 0.5;
}




#que_hacer{
	background: url("../img/textura2.jpg");
	width: 100%;
	min-height: 500px;
	background-repeat: repeat-y;
	background-position: bottom;
	background-attachment: fixed;
	background-color: #ECE6D8;
	padding: 150px 0;
}

#que_txt{
	width: 85%;
	margin: 0 auto;
	padding: 40px 0;
}



#que_txt img{
	width: 100%;
	height: auto;
}



#w_que{
	width: 900px;
	height: 220px;
	margin: 0 auto;
}

#w_que div.icono, #w_que div.pleca{
	height: 200px;
}




#w_que div.icono{
	width: 25%;
	height: 220px;
}


#w_que div.icono a{
	position: relative;
}

#w_que div.icono a img{
	display: block;
	 margin: 0 auto;
	width: 80%;
	height: auto;
	transition:  all ease 200ms;
	opacity: 1;
}



#w_que div.icono a:hover img{
	opacity: .5;
	width: 90%;
}



#w_que div.w_pleca{
	width: 10.5%;
		background-image: url("../img/pleca.png");
	background-repeat: repeat-x;
	background-position: center;
	margin: 0 1%;
	height: 210px;
}









#egresados{
	background-color:#e6decb; 
}



	
#egresados div#w_egresados{
		width: 50%;
		margin: 0 auto;
		border-bottom: 2px solid #dfd5be;
	}

#egresados div#w_egresados img{
	width: 100%;
	height: auto;
}




#w_slider1{
	width: 60%;
	margin: 0 auto;
	padding: 100px 0;
	
}


#w_slider1 .slider{
	width: 100%;
	height: 900px;
	
}


#w_slider1 .slider img{
	width: 100%;
	height: auto;
}


#w_video01{
	width: 80%;
	margin: 0 auto;
	padding: 70px 0;
}


#video1{
	border: 17px solid #004923;
	background-color: #004923;

}

video{
	width: 100%;
	height: auto;
	margin: 0 auto;
}


/*footer*/

footer{
	width: 100%;
	background-color: #ECE6D8;
	overflow-x: hidden;
}


#w_footer{
	width: 90%;
	min-height: 150px;
	margin: 0 auto;
	padding: 60px 30px;
}

#f1, #f2, #f3{
	width: 33.333%;
	min-height: 150px;
}


#w_logo_f{
	width: 20%;
	margin: 0 auto;
}

#w_logo_f a img{
	width: 100%;
	height: auto;
	padding: 20px 0;
}

#w_f2 a{
	display: block;
	text-decoration:  none;
	color: #004923;
	font-size: .9em;
	height: 50px;
	line-height: 50px;
	margin-bottom: 5px;
	border-bottom: 1px solid #dfd5be;
	text-indent: 33px;
	background-repeat: no-repeat;
	background-position: left center;
	transition: all ease .3s;
}


#f2 a:hover{
	color: #00843f;
}


#f2 a:visited{
	color: #004923;
}








#e01{
	background: url("../img/footer/imail.png");
}

#e02{
	background: url("../img/footer/iweb.png");
}

#e03{
	background: url("../img/footer/itel.png");
}





#f3 div#w_rrss{
	width: 60%;
	margin: 0 auto;
	min-width: 200px;
	height: 50px;
}

#f3 div#w_rrss a{
	padding: 10px;
}



	
#f3 div#w_rrss a img{
		transition: all ease .3s;
		opacity: 1;
	}


#f3 div#w_rrss a img:hover{
		opacity: 0.7;
	}




/*footer*/


.clear{
	width: 100%;
	clear: both;
}

.left{float: left;}

.right{float: right;}



.desktop{
	display:block;
}

.mobile{
	display: none;
}



@media only screen and (min-width: 10px) and (max-width: 899px) {

body{
	overflow-x: hidden;

}
	
#container{
	overflow: hidden;
}
	
#header{
	min-height: 800px;
	background-size:auto;
	background-position: bottom;
}
	
#l_evento{
	width: 80%;
}

#frase{
	min-height: 20vh;
}
	
#w_frase{
	width: 95%;
	height: auto;
}

	

#w_frase img{
	position: absolute;
	top: -150px;
	width: 100%;
	height: auto;
}

	
	
#sec3{

	min-height: 300px;
}
	
#datos{
	width: 100%;
	}
	
	
#mapa{
	height: auto;
}
	
	
#w_mapa_l{
	width: 100%;
}

	

#w_mapa_r{
	width: 100%;
	height: auto;
}	

	

#map{
	width: 100%;
	height: 100px;
	}

	#mapa_redes{
		position: relative;
	}

#que_txt{
	width: 99%;
}
	
	
	


	
#w_que{
	width: 100%;
	height: 660px;
}



#w_que div.icono{
	width: 210px;
	height: 220px;
	margin: 0 auto;
}


#w_que div.w_pleca{
	display: none;
}
	



	
	
#egresados div#w_egresados{
		width: 90%;
	
	}
	
	
#w_slider1{

	width: 98%;
	padding: 50px 0;

}
	
	
	#w_video01{
		width: 100%;
		background: #004923;
		border: none;
	}

	
	
	
	video{
	width: 93%;

}
	

/*footer*/



#w_footer{
	width: 90%;
	padding: 0;
	padding-top: 30px;
}

#f1, #f2{
	width: 100%;
}
	
#f3{
width: 440px;
	margin: 0 auto;
	padding: 0;
	padding-top: 20px;
	}


#w_logo_f{
	width: 25%;
}



#f3 div#w_rrss{
	width: 70%;
	margin: 0  !important;
}

#f3 div#w_rrss a{
	padding: 5px;
	height: 70px;

}


	


/*footer*/
	
	
	
	
	
	
.desktop{
	display:none;
}

.mobile{
	display: block;
}

	
	

	
.left, .right{float: none;}
	
	
}