@charset "utf-8";
*{
	margin:0;
	padding:0;

}

body {
	font-family: sans-serif;
	font-size:16px;
	}

a img { /* este selector elimina el borde azul predeterminado que se muestra en algunos navegadores alrededor de una imagen cuando está rodeada por un vínculo */
	border: none;
}


/* ~~ este contenedor de anchura fija rodea a las demás divs ~~ */
.contenedor {
	width: 100%;
	max-width:100%;
	margin: 0 auto; /* el valor automático de los lados, unido a la anchura, centra el diseño */
	background-color: #FFFFFF;
	color:#333333;
	overflow:hidden; /* elimina los excedentes que puedan quedar afuera del contenedor */
	
	}
	.contenedor	 p{
  line-height: 1.5em; /* Aumenta la altura de la línea a 1.5 veces el tamaño de la fuente */
  margin: 10px; /* Añade un margen de 20px alrededor de todos los párrafos */
  padding: 10px; /* Añade un padding de 10px dentro de todos los párrafos */
  }

/* lista de menu header */
.header{
	padding-top: 0px;

		}
		
		
	/* En la version PC Ocultar el Nav de moviles*/
navMovil{
display:none;
}
	/* FIN En la version PC Ocultar el Nav de moviles*/
	
	/*logo*/
.logo{
width:20%;
display:inline-block;

} 
.logo img{
width:100%;
display:inline-block;
padding:2%;
}
/*FIN logo*/

	/*logo2*/
.logoRedes{
	width:8%;
	display:inline-block;
	text-align:center;
	padding-left: 3%;
  justify-content: center; /* Centra los items horizontalmente */
	
} 
.logoRedes img{
width:95%;
display:inline-block;
padding:2%;

}
/*FIN logo*/






	
/*lista de menu header 
Nav NAV nav Nav NAV nav Nav NAV nav Nav NAV nav Nav NAV nav Nav NAV nav Nav NAV nav Nav NAV nav Nav NAV nav Nav NAV nav Nav nav */	


nav{
	width: 100%;
	height: 40px;
	display:block;
	color:#fff;
	

        
}

#menu{
width: 100%;
height: 40px;
background: #333333;
float: left;
position: inherit;

} 

#menu .menup{
width: 100%;
height: 40px;
margin: 0 auto;
padding: 0px;
color:#ffffff;

}

#menu li{
float:left;
position:relative;
padding: 10px 0;
margin: 0;
list-style: none;
float: right;
} 

#menu li a{
color:#ffffff;
font-size:16px;
padding: 5px 5px;
/* text-shadow: 0px -1px 0px #000; */
text-decoration: none;

} 

/*ocultamos el dropdown*/    
#menu li > ul{
display:none;
position:absolute;
background: #424242;
padding: 0;
z-index: 2;
float: left;
}

#menu li > ul li{
padding:0;
margin:1px 0;
list-style: none;

} 

#menu li > ul li:first-child, #menu li:hover > ul li:last-child{
padding:0;
margin:0 0;
}

/*le damos el color blanco al enlance del submenu y el background negro */    
#menu li:hover > a{
color:#fff;
background-color: #424242;
width: 240px; 
} 

#menu li > ul li a{
width: 250px;
margin: 0 0  5px;
display:block;
color: #fff;
} 

/* Con esto mantenemos el codigo submenu activo */
#menu li:hover > ul{
display:block;
width: 250px;
top: 34px;
color:#FFFFFF;
padding: 15px;


 }

#menu .divider{
border-right: 0px solid #BCBCBC;
height: 18px;

}


#menu li:hover::after{
border-color: #fff transparent transparent transparent;
}

hr{
margin: 5%
padding: 0;
width: 80%;
position: relative;
border-color: rgba(189, 189, 189, 0.6);
left: 10px;
}

#menu .dropdown span{
height: 15px;
width: 3px;
position: absolute;
top: 6px;
left: 5px;


}

	       
		   </nav>



/* FIN lista de menu header 
Nav NAV nav Nav NAV nav Nav NAV nav Nav NAV nav Nav NAV nav Nav NAV nav Nav NAV nav Nav NAV nav Nav NAV nav Nav NAV nav Nav NAV nav*/




	
.alertaOk a{
font-size: 14px;
color: #FFFFFF;
}

.sidebar {
	width: 25%;
	margin:2%;
	padding:5px 5px 5px 5px;
	display:inline-block;
	text-align:center;
	color:#CCCCCC;
	box-sizing:border-box;
	border-right-width: thin;
	border-right-style: solid;
	border-right-color: #FFFFFF;  /*Pone linea y color linea derecia*/
	background:	#FFFFFF;
}
.sidebar a{
	padding:5px 10px;
	display:block;
	color:#333333;
	text-decoration:none;
	font-size: 18px;
	box-sizing:border-box;	
}
.sidebar a:hover{
	text-decoration:none;
	color:#333333;
	/*para Firefox*/
-moz-border-radius: 2px 2px 2px 2px;
	/*para Safari y Chrome*/
-webkit-border-radius: 2px 2px 2px 2px;
	/* para Opera */
border-radius: 2px 2px 2px 2px;
	background-color: #CCCCCC;
}

	
.social{
	background: #C09F80
	width: 90%;
	padding:2%;
	display:block;
	box-sizing:border-box;
}




.main {
	width: 70%;
	padding:2%;
	float:right;
	display:inline-block;
	box-sizing:border-box;
	
	
}

.main .articles {
	whidt:68%;
	margin-right:1%;
	float:left;
}


.main .articles .article{
	padding:2% 2% 2% 2%;
	margin:2% 2% 2% 2%;
	background:#fff;
	margin-bottom:2%;
	text-align:inherit;
	line-height:150%;
	page-break-before: auto;
	page-break-after: always;
}

.main .articles p{
  line-height: 1.5em; /* Aumenta la altura de la línea a 1.5 veces el tamaño de la fuente */
  margin: 10px; /* Añade un margen de 20px alrededor de todos los párrafos */
  padding: 10px; /* Añade un padding de 10px dentro de todos los párrafos */
/*   text-indent: 2em; Indenta la primera línea de cada párrafo 2 unidades em */
 /* letter-spacing: 0.1em;  Aumenta el espacio entre letras en 0.1 unidades em */
 /* text-transform: capitalize;  Capitaliza la primera letra de cada palabra en los párrafos */
}



.article_imagen{
padding:2%;
float:left;
}

.article_encabezado{
padding:2%;
float: right;
}

.article_encabezado img{
padding:10px 10px 10px 10px;
float: right;
width:80%

}
                                /* Aqui comienza configuracion del sitio PC */
	  /* #############################################################################################################################################################################################################################################################################################################################################################################################################*/
	                                     

/* Aqui comienzan los efectos del sitio */


.brillo{
	
}
.brillo:hover{
color: #660000;
}

		
.brilloFondo{
padding:3px 3px;
}
.brilloFondo:hover{
background-color: #FFFFCC; 
}

.fondoSeparador{
background:#333333;
color:#CCCCCC;
margin: 3px 3px; 
padding: 3px 3px;
}

.galeriaFotos{
width:47%;
margin: 3px 3px; 
padding: 3px 3px;
display: inline-block;
box-sizing:border-box;
}
.galeriaFotos img {
margin: 3px 3px; 
padding: 3px 3px;
display: inline-block;
box-sizing:border-box;
width:100%;
}
.galeriaFotos a {
	text-decoration: none;
	color: #FFFFFF;
}

		.egresados {
	width:40%;
	display:inline-block;
	text-align: justify;
	padding:10px;
	margin: 10px;
	position: relative;
	text-align:inherit;
	border-left-width: 0px;
	border-left-style: solid;
	border-left-color: #C09F80;
	background-color: #FFFFFF;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #C09F80;
}


.CentroIntro {
	width:100%;
	float: left;
	background-color: #FFFFFF;
	display:inline-block;
	color: #666666;
	padding:1%;
	box-sizing:border-box;
	text-align:inherit;
}
.CentroIntro img {
	width:40%;
	float: right;
	background-color: #FFFFFF;
	display:inline-block;
	color: #666666;
	padding:3%;
	box-sizing:border-box;
	text-align:inherit;
}
.CentroCuerpo {
	width:100%;
	float: left;
	background-color: #FFFFFF;
	display:inline-block;
	color: #666666;
	padding:1%;
	box-sizing:border-box;
	text-align:inherit;
}
.CentroCuerpo img {
	width:40%;
	float: right;
	background-color: #FFFFFF;
	display:inline-block;
	color: #666666;
	padding:3%;
	box-sizing:border-box;
	text-align:inherit;
}
.CentroCuerpo p{
  line-height: 1.5em; /* Aumenta la altura de la línea a 1.5 veces el tamaño de la fuente */
  margin: 10px; /* Añade un margen de 20px alrededor de todos los párrafos */
  padding: 10px; /* Añade un padding de 10px dentro de todos los párrafos */
  }
.youtube{
	width:560px;
	height:315px;
	float: left;
 	background-color: #FFFFFF;
	display:inline-block;
	color: #666666;
	padding:1%;
	box-sizing:border-box;
	text-align:inherit;
}
.youtube iframe{
	width:100%;
	height:100%;
	float: left;
	background-color: #FFFFFF;
	display:inline-block;
	color: #666666;
	padding:3%;
	box-sizing:border-box;
	text-align:inherit;
}


.egresadosImagen {
	width:40%;
	background-color: #FFFFFF;
	display:inline-block;
	vertical-align: super;
	float: left;
	font-size: 12px;
	color: #666666;
	padding:2% 2% 2% 2%;
	text-align: center;
	line-height:100%;
}
.egresadosImagen img {
width:90% 80%;
/*para Firefox*/
-moz-border-radius: 50% ;
/*para Safari y Chrome*/
-webkit-border-radius:50%;
/* para Opera */
border-radius: 50%;
/* para IE */
behavior: 50%;
background-color: #FFFFFF;
margin: 2% 2% 2% 2%;
padding: 2% 2% 2% 2%;
}

.zoomImagen{
        /* Aumentamos la anchura y altura durante 2 segundos */
        transition: width 2s, height 2s, transform 2s;
        -moz-transition: width 2s, height 2s, -moz-transform 2s;
        -webkit-transition: width 2s, height 2s, -webkit-transform 1s;
        -o-transition: width 2s, height 2s,-o-transform 1s;
			/*para Firefox*/
-moz-border-radius: 15px 15px 15px 15px;
	/*para Safari y Chrome*/
-webkit-border-radius: 15px 15px 15px 15px;
	/* para Opera */
border-radius: 15px 15px 15px 15px;
	/* para IE */
	background-color: #ffffff;

		
    }
    .zoomImagen:hover{
        /* tranformamos el elemento al pasar el mouse por encima al doble de
           su tamaño con scale(2). */
        transform : scale(1);
        -moz-transform : scale(1);      /* Firefox */
        -webkit-transform : scale(4);   /* Chrome - Safari */
        -o-transform : scale(4);        /* Opera */
    }



/* ~~ El pie de página ~~ */

.footer {
	width: 100%;
	padding:0%;
	line-height:100%;
	max-width:100%; /* el valor automático de los lados, unido a la anchura, centra el diseño */
	background-color:#333333;
	color:#fff;
	text-align:center;
	overflow:hidden; /* elimina los excedentes que puedan quedar afuera del contenedor */
	margin: auto;
	display:block;
	box-sizing:border-box;
}
.footer hr{
	width: 90%;

	text-align:center;

}



.footerTelefono {
	width: 30%;
	padding:2% 2% 2% 2%;
	margin: 3px;
	line-height:150%;
	max-width:98%; /* el valor automático de los lados, unido a la anchura, centra el diseño */
	background-color:#333333;
	color:#fff;
	text-align:center;
	overflow:hidden; /* elimina los excedentes que puedan quedar afuera del contenedor */
	display: inline-block;
	box-sizing:border-box;
	vertical-align: middle;
}

.footerTelefono a {
	color:#fff;	
}

.footerDomicilio {
	width: 100%;
	padding:2% 2% 2% 2%;
	line-height:150%;
	max-width:98%; /* el valor automático de los lados, unido a la anchura, centra el diseño */
	background-color:#333333;
	color:#fff;
	text-align:center;
	overflow:hidden; /* elimina los excedentes que puedan quedar afuera del contenedor */
	margin: auto;
	display:block;
	box-sizing:border-box;	
}
.footerCopyRicth {
	width: 100%;
	padding:2% 2% 2% 2%;
	line-height:auto;
	max-width:98%; /* el valor automático de los lados, unido a la anchura, centra el diseño */
	background-color:#333333;
	color:#fff;
	text-align:center;
	overflow:hidden; /* elimina los excedentes que puedan quedar afuera del contenedor */
	margin: auto;
	display:block;
	box-sizing:border-box;	
}



	.campoRedondo {
	font-size: 16px;
	-moz-border-radius: 2px 2px 2px 2px;
	/*para Safari y Chrome*/
-webkit-border-radius:2px 2px 2px 2px;
	/* para Opera */
border-radius: 2px 2px 2px 2px;
	margin: 1px 10px;
	padding: 10px;
	width: 90%;
	vertical-align: middle;
	}
	


	
	

	
	                                  /* Aqui comienza configuracion del sitio PC */
	  /* #############################################################################################################################################################################################################################################################################################################################################################################################################*/
	                                     

/* Aqui comienzan los efectos del sitio */


.brillo{
	
}
.brillo:hover{
color: #660000;
}

		
.brilloFondo{
padding:3px 3px;
}
.brilloFondo:hover{
background-color: #FFFFCC; 
}

.fondoSeparador{
background:#333333;
color:#CCCCCC;
margin: 3px 3px; 
padding: 3px 3px;
}

.galeriaFotos{
	width:45%;
	text-align:center;
	margin:10px 10px;
	padding: 0px 0px;
	display: inline-block;
	box-sizing:border-box;
	-moz-border-radius: 25px 25px 25px 25px;
	/*para Safari y Chrome*/
-webkit-border-radius: 25px 25px 25px 25px;
	/* para Opera */
border-radius: 25px 25px 25px 25px;
	background-color:#333333;
	color: #FFFFFF;	
}



		.egresados {
	width:40%;
	display:inline-block;
	text-align: justify;
	padding:10px;
	margin: 10px;
	position: relative;
	text-align:inherit;
	border-left-width: 0px;
	border-left-style: solid;
	border-left-color: #C09F80;
	background-color: #FFFFFF;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #C09F80;
}


		


.alertasError{
	font-size: 14px;
	color: #990000;
	font-weight: bold;
	width: 95%;
}
.alertasError2{
	font-size: 14px;
	margin:3px 3px 3px 3px;
	padding:3px 3px 3px 3px;
	color: #990000;
	font-weight: bold;
	background-color: #C09F80;
	margin-left: 12px;
	width: 90%;
}
	
.alertasError2 a{
font-size: 14px;
color: #990000;
}

.alertaOk{
	font-size: 14px;
	margin:3px 3px 3px 3px;
	padding:3px 3px 3px 3px;
	color: #FFFFFF;
	font-weight: bold;
	background-color: #C09F80;
	margin-left: 12px;
	width: 90%;
}
	
.alertaOka a{
font-size: 14px;
color: #FFFFFF;
}
	


                                         /* FIN Aqui comienzan los efectos del sitio */
/* #############################################################################################################################################################################################################################################################################################################################################################################################################*/

/*Estados del aula virtual*/





  /*FIN Estados del aula virtual*/

/* #############################################################################################################################################################################################################################################################################################################################################################################################################*/


                                 
								 
								 
								 
								 
								 
								 
								  /* Aqui comienzan adaptacion a diferentes pantallas */
/* #############################################################################################################################################################################################################################################################################################################################################################################################################*/	

/* Tamaño WEB*/
@media screen and (max-width:1000px) {
/* Tamaño 4 Movil*/
.contenedor{
width:100%;
padding:2%;
marging:2%;
box-sizing:border-box;
}

.sidebar {
	width: 40%;
	margin:2%;
	padding:5px 5px 5px 5px;
	display:none;
	text-align:center;
	color:#CCCCCC;
	box-sizing:border-box;
	border-right-width: thin;
	border-right-style: solid;
	border-right-color: #FFFFFF;  /*Pone linea y color linea derecia*/
	background:	#FFFFFF;
}
		

		

.main{
width:100%;
background-color:#fffff;
float: right;
box-sizing:border-box;
display:inline-block;
margin:2px
padding:2px;
}
.contenedor{
width:100%;
padding:2%;
marging:2%;
box-sizing:border-box;
}

	/*logo*/
.logo{
width:20%;
display:inline-block;

} 
.logo img{
width:100%;
display:inline-block;
padding:2%;
}
/*FIN logo*/




.header{
width:100%;
float:none;
box-sizing:border-box;

}

.header navMovil{
padding:2px 2px 2px 2px;
color:#fff;
margin:auto;
text-decoration:none;
box-sizing:border-box;
text-align:left;
font-size: 16px;
display: block; 
}

 
                                       /*  Lista Menu móvides
								   ####################################
								   ####################################
								   ###################################*/

nav{
display:none; 
}

navMovil{
width: 100%;
height: 40px;
display:inline-block;
}

#menu{
width: 100%;
height: 40px;
background: #333333;
float: left;
position: relative;
float: left;
} 

#menu .menup{
width: 100%;
height: 40px;
margin: 0 auto;
padding: 0px;
color:#ffffff;

}

#menu li{
position:relative;
padding: 2px 0;
margin: 0;
list-style: none;
float: left;
} 

#menu li a{
color:#ffffff;
font-size:16px;
padding: 10px 10px;
/* text-shadow: 0px -1px 0px #000; */
text-decoration: none;

} 

/*ocultamos el dropdown*/    
#menu li > ul{
display:none;
position:absolute;
background: #424242;
padding: 0;
z-index: 2;
float: right;
}

#menu li > ul li{
padding:0;
margin:1px 0;
list-style: none;

} 

#menu li > ul li:first-child, #menu li:hover > ul li:last-child{
padding:0;
margin:0 0;
}

/*le damos el color blanco al enlance del submenu y el background negro */    
#menu li:hover > a{
color:#fff;
background-color: #424242;
width: 240px; 
} 

#menu li > ul li a{
width: 250px;
margin: 0 0  5px;
display:block;
color: #fff;
} 

/* Con esto mantenemos el codigo submenu activo */
#menu li:hover > ul{
display:block;
width: 250px;
top: 34px;
color:#FFFFFF;
padding: 25px;


 }

#menu .divider{
border-right: 0px solid #BCBCBC;
height: 23px;

}


#menu li:hover::after{
border-color: #fff transparent transparent transparent;
}

hr{
margin: 0;
padding: 0;
width: 90%;
position: relative;
border-color: rgba(189, 189, 189, 0.6);
left: 10px;
}

.dropdown{
width: 40%;
}

#menu .dropdown span{
height: 15px;
width: 3px;
position: absolute;
top: 6px;
left: 5px;
}


                                   /*  FIN Lista Menu móvides
								   ####################################
								   ####################################
								   ###################################*/



                                                           /* hasta 880px */
/* ##################################################################################################################################*/
/* Tamaño 1*/
@media screen and (max-width:880px) {

.contenedor{
width:100%;
padding:2%;
marging:2%;
box-sizing:border-box;
}

.sidebar {
	width: 40%;
	margin:2%;
	padding:5px 5px 5px 5px;
	display:none;
	text-align:center;
	color:#CCCCCC;
	box-sizing:border-box;
	border-right-width: thin;
	border-right-style: solid;
	border-right-color: #FFFFFF;  /*Pone linea y color linea derecia*/
	background:	#FFFFFF;
}

	
.main{
width:100%;
background-color:#fffff;
float:none;
box-sizing:border-box;
display:inline-block;
margin:5px
padding:5px;
}

	/*logo*/
.logo{
width:30%;
display:inline-block;

} 
.logo img{
width:100%;
display:inline-block;
padding:2%;
}
/*FIN logo*/



.social{
display:none;
}

.header{
width:100%;
float:none;
box-sizing:border-box;

}


.header navMovil{
padding:2px 2px 2px 2px;
color:#fff;
margin:auto;
text-decoration:none;
box-sizing:border-box;
text-align:center;
font-size: 16px;
display: block; 
}


                                   
                                       /*  Lista Menu móvides
								   ####################################
								   ####################################
								   ###################################*/

nav{
display:none; 
}

navMovil{
width: 100%;
height: 40px;
display:inline-block;
}

#menu{
width: 100%;
height: 40px;
background: #333333;
float: left;
position: relative;
float: left;
} 

#menu .menup{
width: 100%;
height: 40px;
margin: 0 auto;
padding: 0px;
color:#ffffff;

}

#menu li{
position:relative;
padding: 2px 0;
margin: 0;
list-style: none;
float: left;
} 

#menu li a{
color:#ffffff;
font-size:16px;
padding: 10px 10px;
/* text-shadow: 0px -1px 0px #000; */
text-decoration: none;

} 

/*ocultamos el dropdown*/    
#menu li > ul{
display:none;
position:absolute;
background: #424242;
padding: 0;
z-index: 2;
float: right;
}

#menu li > ul li{
padding:0;
margin:1px 0;
list-style: none;

} 

#menu li > ul li:first-child, #menu li:hover > ul li:last-child{
padding:0;
margin:0 0;
}

/*le damos el color blanco al enlance del submenu y el background negro */    
#menu li:hover > a{
color:#fff;
background-color: #424242;
width: 240px; 
} 

#menu li > ul li a{
width: 250px;
margin: 0 0  5px;
display:block;
color: #fff;
} 

/* Con esto mantenemos el codigo submenu activo */
#menu li:hover > ul{
display:block;
width: 250px;
top: 34px;
color:#FFFFFF;
padding: 25px;


 }

#menu .divider{
border-right: 0px solid #BCBCBC;
height: 23px;

}


#menu li:hover::after{
border-color: #fff transparent transparent transparent;
}

hr{
margin: 0;
padding: 0;
width: 90%;
position: relative;
border-color: rgba(189, 189, 189, 0.6);
left: 10px;
}

.dropdown{
width: 40%;
}

#menu .dropdown span{
height: 15px;
width: 3px;
position: absolute;
top: 6px;
left: 5px;
}


                                   /*  FIN Lista Menu móvides
								   ####################################
								   ####################################
								   ###################################*/


.footerTelefono {
	width: 45%;
	padding:2;
	margin: auto;
	line-height:100%;
	max-width:98%; /* el valor automático de los lados, unido a la anchura, centra el diseño */
	background-color:#333333;
	color:#fff;
	text-align:center;
	overflow:hidden; /* elimina los excedentes que puedan quedar afuera del contenedor */
	display:inline-block;
	box-sizing:border-box;	
}

	
 .formularios {
	/*para Firefox*/
-moz-border-radius: 5px 5px 5px 5px;
	/*para Safari y Chrome*/
-webkit-border-radius: 5px 5px 5px 5px;
	/* para Opera */
border-radius: 5px 5px 5px 5px;
	color: #333333;
	width: 90%;
	font-size: 16px;
	margin-top: 1%;
	margin-right: 1%;
	margin-bottom: 10px;
	margin-left: 2%;
	padding-bottom: 50px;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #C09F80;
	border-left-color: #C09F80;
	padding-right: 5px;
	padding-left: 5px;
		}
		



/* FIN Tamaño 1*/
      

                                                           /* hasta 768px */
/* ##################################################################################################################################*/
/* Tamaño 2 ipad*/
@media screen and (max-width:768px) {


.contenedor{
width:100%;
padding:2%;
marging:2%;
box-sizing:border-box;
}



.main{
width:100%;
background-color:#fffff;
float:none;
box-sizing:border-box;
display:inline-block;
margin:5px
padding:5px;
}

	/*logo*/
.logo{
width:30%;
display:inline-block;

} 
.logo img{
width:100%;
display:inline-block;
padding:2%;
}
/*FIN logo*/




.social{
display:none;
}

.header navMovil{
padding:2px 2px 2px 2px;
color:#fff;
margin:auto;
text-decoration:none;
box-sizing:border-box;
text-align:center;
font-size: 16px;
display: block; 
}

                                     
                                        /*  Lista Menu móvides
								   ####################################
								   ####################################
								   ###################################*/

  nav{
display:none; 
}


navMovil{
width: 100%;
height: 40px;
display:inline-block;
}

#menu{
width: 100%;
height: 40px;
background: #333333;
float: left;
position: relative;
float: left;
} 

#menu .menup{
width: 100%;
height: 40px;
margin: 0 auto;
padding: 0px;
color:#ffffff;

}

#menu li{
position:relative;
padding: 2px 0;
margin: 0;
list-style: none;
float: left;
} 

#menu li a{
color:#ffffff;
font-size:16px;
padding: 10px 10px;
/* text-shadow: 0px -1px 0px #000; */
text-decoration: none;

} 

/*ocultamos el dropdown*/    
#menu li > ul{
display:none;
position:absolute;
background: #424242;
padding: 0;
z-index: 2;
float: right;
}

#menu li > ul li{
padding:0;
margin:1px 0;
list-style: none;

} 

#menu li > ul li:first-child, #menu li:hover > ul li:last-child{
padding:0;
margin:0 0;
}

/*le damos el color blanco al enlance del submenu y el background negro */    
#menu li:hover > a{
color:#fff;
background-color: #424242;
width: 240px; 
} 

#menu li > ul li a{
width: 250px;
margin: 0 0  5px;
display:block;
color: #fff;
} 

/* Con esto mantenemos el codigo submenu activo */
#menu li:hover > ul{
display:block;
width: 250px;
top: 34px;
color:#FFFFFF;
padding: 25px;


 }

#menu .divider{
border-right: 0px solid #BCBCBC;
height: 23px;

}


#menu li:hover::after{
border-color: #fff transparent transparent transparent;
}

hr{
margin: 0;
padding: 0;
width: 90%;
position: relative;
border-color: rgba(189, 189, 189, 0.6);
left: 10px;
}

.dropdown{
width: 40%;
}

#menu .dropdown span{
height: 15px;
width: 3px;
position: absolute;
top: 6px;
left: 5px;
}
                           /*  FIN Lista Menu móvides
								   ####################################
								   ####################################
								   ###################################*/





.footerTelefono {
	width: 45%;
	padding:2;
	margin: auto;
	line-height:100%;
	max-width:98%; /* el valor automático de los lados, unido a la anchura, centra el diseño */
	background-color:#333333;
	color:#fff;
	text-align:center;
	overflow:hidden; /* elimina los excedentes que puedan quedar afuera del contenedor */
	display:inline-block;
	box-sizing:border-box;	
}

	
 .formularios {
	/*para Firefox*/
-moz-border-radius: 5px 5px 5px 5px;
	/*para Safari y Chrome*/
-webkit-border-radius: 5px 5px 5px 5px;
	/* para Opera */
border-radius: 5px 5px 5px 5px;
	color: #333333;
	width: 95%;
	font-size: 16px;
	margin-top: 1%;
	margin-right: 1%;
	margin-bottom: 10px;
	margin-left: 2%;
	padding-bottom: 50px;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #C09F80;
	border-left-color: #C09F80;
	padding-right: 5px;
	padding-left: 5px;
		}

.youtube{
	width:448px;
	height:252px;
	float: left;
 	background-color: #FFFFFF;
	display:inline-block;
	color: #666666;
	padding:1%;
	box-sizing:border-box;
	text-align:inherit;
}
.youtube iframe{
	width:100%;
	height:100%;
	float: left;
	background-color: #FFFFFF;
	display:inline-block;
	color: #666666;
	padding:3%;
	box-sizing:border-box;
	text-align:inherit;
}

.CentroCuerpo{
	width:100%;
	float: left;
 	background-color: #FFFFFF;
	display:inline-block;
	color: #666666;
	padding:1%;
	box-sizing:border-box;
	text-align:inherit;
}
.CentroCuerpo img{
	width:95%;
	float: left;
 	background-color: #FFFFFF;
	display:inline-block;
	color: #666666;
	padding:3%;
	box-sizing:border-box;
	text-align:inherit;
}


}
/* FIN Tamaño 2*/
                                                           /* hasta 641px */
/* ##################################################################################################################################*/
/* Tamaño 3*/
@media screen and (max-width:641px) {

/* Tamaño 4 Movil*/
.contenedor{
width:100%;
padding:2%;
marging:2%;
box-sizing:border-box;
}


.sidebar {
	width: 40%;
	margin:2%;
	padding:5px 5px 5px 5px;
	display:none;
	text-align:center;
	color:#CCCCCC;
	box-sizing:border-box;
	border-right-width: thin;
	border-right-style: solid;
	border-right-color: #FFFFFF;  /*Pone linea y color linea derecia*/
	background:	#FFFFFF;
}

.main{
width:100%;
background-color:#fffff;
float:none;
box-sizing:border-box;
display:inline-block;
margin:5px
padding:5px;
}


	/*logo*/
.logo{
width:30%;
display:inline-block;

} 
.logo img{
width:100%;
display:inline-block;
padding:2%;
}
/*FIN logo*/



.social{
display:none;
}



.header navMovil{
padding:2px 2px 2px 2px;
color:#fff;
margin:auto;
text-decoration:none;
box-sizing:border-box;
text-align:center;
font-size: 16px;
display: block; 
}


                                      
                                        /*  Lista Menu móvides
								   ####################################
								   ####################################
								   ###################################*/

nav{
display:none; 
}

navMovil{
width: 100%;
height: 40px;
display:inline-block;
}

#menu{
width: 100%;
height: 40px;
background: #333333;
float: left;
position: relative;
float: left;
} 

#menu .menup{
width: 100%;
height: 40px;
margin: 0 auto;
padding: 0px;
color:#ffffff;

}

#menu li{
position:relative;
padding: 2px 0;
margin: 0;
list-style: none;
float: left;
} 

#menu li a{
color:#ffffff;
font-size:16px;
padding: 10px 10px;
/* text-shadow: 0px -1px 0px #000; */
text-decoration: none;

} 

/*ocultamos el dropdown*/    
#menu li > ul{
display:none;
position:absolute;
background: #424242;
padding: 0;
z-index: 2;
float: right;
}

#menu li > ul li{
padding:0;
margin:1px 0;
list-style: none;

} 

#menu li > ul li:first-child, #menu li:hover > ul li:last-child{
padding:0;
margin:0 0;
}

/*le damos el color blanco al enlance del submenu y el background negro */    
#menu li:hover > a{
color:#fff;
background-color: #424242;
width: 240px; 
} 

#menu li > ul li a{
width: 250px;
margin: 0 0  5px;
display:block;
color: #fff;
} 

/* Con esto mantenemos el codigo submenu activo */
#menu li:hover > ul{
display:block;
width: 250px;
top: 34px;
color:#FFFFFF;
padding: 25px;


 }

#menu .divider{
border-right: 0px solid #BCBCBC;
height: 23px;

}


#menu li:hover::after{
border-color: #fff transparent transparent transparent;
}

hr{
margin: 0;
padding: 0;
width: 90%;
position: relative;
border-color: rgba(189, 189, 189, 0.6);
left: 10px;
}

.dropdown{
width: 40%;
}

#menu .dropdown span{
height: 15px;
width: 3px;
position: absolute;
top: 6px;
left: 5px;
}

                                   /*  FIN Lista Menu móvides
								   ####################################
								   ####################################
								   ###################################*/



.footerTelefono {
	width: 45%;
	padding:2;
	margin: auto;
	line-height:100%;
	max-width:98%; /* el valor automático de los lados, unido a la anchura, centra el diseño */
	background-color:#333333;
	color:#fff;
	text-align:center;
	overflow:hidden; /* elimina los excedentes que puedan quedar afuera del contenedor */
	display:inline-block;
	box-sizing:border-box;	
}

	
 .formularios {
	/*para Firefox*/
-moz-border-radius: 5px 5px 5px 5px;
	/*para Safari y Chrome*/
-webkit-border-radius: 5px 5px 5px 5px;
	/* para Opera */
border-radius: 5px 5px 5px 5px;
	color: #333333;
	width: 95%;
	font-size: 16px;
	margin-top: 1%;
	margin-right: 1%;
	margin-bottom: 10px;
	margin-left: 2%;
	padding-bottom: 50px;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #C09F80;
	border-left-color: #C09F80;
	padding-right: 5px;
	padding-left: 5px;
		}

.youtube{
	width:380px;
	height:214px;
	float: left;
 	background-color: #FFFFFF;
	display:inline-block;
	color: #666666;
	padding:1%;
	box-sizing:border-box;
	text-align:inherit;
}
.youtube iframe{
	width:100%;
	height:100%;
	float: left;
	background-color: #FFFFFF;
	display:inline-block;
	color: #666666;
	padding:3%;
	box-sizing:border-box;
	text-align:inherit;
}
.CentroCuerpo{
	width:100%;
	float: left;
 	background-color: #FFFFFF;
	display:inline-block;
	color: #666666;
	padding:1%;
	box-sizing:border-box;
	text-align:inherit;
}
.CentroCuerpo img{
	width:95%;
	float: left;
 	background-color: #FFFFFF;
	display:inline-block;
	color: #666666;
	padding:3%;
	box-sizing:border-box;
	text-align:inherit;
}



/* FIN Tamaño 3*/


                                                           /* hasta 340px */
/* ##################################################################################################################################*/
/* Tamaño 4 Movil*/

@media screen and (max-width:340px) {

/* Tamaño 4 Movil*/
.contenedor{
width:100%;
padding:2%;
marging:2%;
box-sizing:border-box;
}


.main{
width:100%;
background-color:#fffff;
float:none;
box-sizing:border-box;
display:inline-block;
margin:5px
padding:5px;
}



	/*logo*/
.logo{
width:30%;
display:inline-block;

} 
.logo img{
width:100%;
display:inline-block;
padding:2%;
}
/*FIN logo*/



.social{
display:none;
}
.header{
width:100%;
float:none;
box-sizing:border-box;

}


.header navMovil{
padding:2px 2px 2px 2px;
color:#fff;
margin:auto;
text-decoration:none;
box-sizing:border-box;
text-align:center;
font-size: 16px;
display: block; 
}


                                    
                                      /*  Lista Menu móvides
								   ####################################
								   ####################################
								   ###################################*/

nav{
display:none; 
}


navMovil{
width: 100%;
height: 40px;
display:inline-block;
}

#menu{
width: 100%;
height: 40px;
background: #333333;
float: left;
position: relative;
float: left;
} 

#menu .menup{
width: 100%;
height: 40px;
margin: 0 auto;
padding: 0px;
color:#ffffff;

}

#menu li{
position:relative;
padding: 2px 0;
margin: 0;
list-style: none;
float: left;
} 

#menu li a{
color:#ffffff;
font-size:16px;
padding: 10px 10px;
/* text-shadow: 0px -1px 0px #000; */
text-decoration: none;

} 

/*ocultamos el dropdown*/    
#menu li > ul{
display:none;
position:absolute;
background: #424242;
padding: 0;
z-index: 2;
float: right;
}

#menu li > ul li{
padding:0;
margin:1px 0;
list-style: none;

} 

#menu li > ul li:first-child, #menu li:hover > ul li:last-child{
padding:0;
margin:0 0;
}

/*le damos el color blanco al enlance del submenu y el background negro */    
#menu li:hover > a{
color:#fff;
background-color: #424242;
width: 240px; 
} 

#menu li > ul li a{
width: 250px;
margin: 0 0  5px;
display:block;
color: #fff;
} 

/* Con esto mantenemos el codigo submenu activo */
#menu li:hover > ul{
display:block;
width: 250px;
top: 34px;
color:#FFFFFF;
padding: 25px;


 }

#menu .divider{
border-right: 0px solid #BCBCBC;
height: 23px;

}


#menu li:hover::after{
border-color: #fff transparent transparent transparent;
}

hr{
margin: 0;
padding: 0;
width: 90%;
position: relative;
border-color: rgba(189, 189, 189, 0.6);
left: 10px;
}

.dropdown{
width: 40%;
}

#menu .dropdown span{
height: 15px;
width: 3px;
position: absolute;
top: 6px;
left: 5px;
}

                                   /*  FIN Lista Menu móvides
								   ####################################
								   ####################################
								   ###################################*/



.footerTelefono {
	width: 45%;
	padding:2;
	margin: auto;
	line-height:100%;
	max-width:98%; /* el valor automático de los lados, unido a la anchura, centra el diseño */
	background-color:#333333;
	color:#fff;
	text-align:center;
	overflow:hidden; /* elimina los excedentes que puedan quedar afuera del contenedor */
	display:inline-block;
	box-sizing:border-box;	
}

	
 .formularios {
	/*para Firefox*/
-moz-border-radius: 5px 5px 5px 5px;
	/*para Safari y Chrome*/
-webkit-border-radius: 5px 5px 5px 5px;
	/* para Opera */
border-radius: 5px 5px 5px 5px;
	color: #333333;
	width: 95%;
	font-size: 16px;
	margin-top: 1%;
	margin-right: 1%;
	margin-bottom: 10px;
	margin-left: 2%;
	padding-bottom: 50px;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #C09F80;
	border-left-color: #C09F80;
	padding-right: 5px;
	padding-left: 5px;
		}

.youtube{
	width:380px;
	height:214px;
	float: left;
 	background-color: #FFFFFF;
	display:inline-block;
	color: #666666;
	padding:1%;
	box-sizing:border-box;
	text-align:inherit;
}
.youtube iframe{
	width:100%;
	height:100%;
	float: left;
	background-color: #FFFFFF;
	display:inline-block;
	color: #666666;
	padding:3%;
	box-sizing:border-box;
	text-align:inherit;
}

.CentroCuerpo{
	width:95%;
	float: left;
 	background-color: #FFFFFF;
	 display: flex;
	color: #666666;
	padding:1%;
	box-sizing:border-box;
	text-align:inherit;
}
.CentroCuerpo img{
	width:95%;
	float: left;
 	background-color: #FFFFFF;
	display:inline-block;
	color: #666666;
	padding:3%;
	box-sizing:border-box;
	text-align:inherit;
}

------------
/* FIN Tamaño 4 Movil*/
                                                          /* FIN  Aqui comienzan adaptador moviles