@charset "utf-8";







/* Reseteo Universal */

*{

	

	

	border:0px;

	margin:0px;

	

	padding:0px;

}



article,figcaption,figure,footer,header,hgroup,nav,section, {

	display:block;

	

}

/* estilos del sitio */







body{



	/*background:#212121 url(../img/fondonsl.jpg);*/

	color:#F7F7F7;

	font-family:"Poppins";
	

	font-size:1em;

	text-align:justify;

	



}







a{

	color:#FFF;

	font-weight:bold;

	text-decoration:none;

}



a:hover {

	color:#9F0;

}



/*tener iamgenes y videos sensibles */











iframe,img{

Max-width:100%;




}

/* fieldset es como la caja contenedora que contiene el formulario*/

fieldset{

	border: .1em solid #F60;

	border-radius: .5em;

	padding: 0.1px 0px 0px 0px;

	background:#ffffff;

}





h4{

	color:#ffff;

	/*text-shadow: 0 -1px 0 hsla(0,0%,0%,.3); */

	cursor:pointer;

font-family:"Poppins";

	font-size: 17px;

	line-height: 22px;

	font-weight: normal;

	text-align:justify;

	padding-left: 0.4em;

	padding-right:0.05em;
	padding-top: 0.05em;

	background:#ffffff;

}

form{

	width: 100%;


}



form div{

	margin: .4em;

	

}



h3{

	background :#E2E7F1;

	border-radius: 1em;

	box-shadow:.25em .25em .25em rgba(255,153, 0,.5); /* con box-shadowcontenedores le da cierta sombra a la caja, primero a la distancia de la sombre con respecto la x, .25 y de la Y, y la intensidad del blue o del de desemfoque y el rgba quien maneja transferencia alfa          */

	margin-bottom: .5em;

	padding-left: .5em;

	

	

	

}







iframe {

	border-radius: .5em;

}





input[type="email"], input[type="text"], textarea{

	background:#F7F7F7;
	 
	border-top: 1px solid #09347E;
	border-bottom: 1px solid #09347E;
	 
	border-left: 1px solid #09347E;
	border-right: 1px solid #09347E;
	margin-top:8px;
	
	
	

	border-radius: 0.0em;
	

	color: #000000;
	
	

	font-size: 1em;

	padding: .25em;

	width: 95%;
	font-family:"Poppins";

}



input[type="email"]:focus, input[type="text"]:focus, textarea:focus{

	background:#fff;





}





input[type="submit"]{

	background:#C42720;

	border-radius: 0px 0px 0px 0px ;

	color: #ffffff;
	font-weight:bold;

	
	font-family:"Poppins";

	font-size: 14px;

	padding: .25em;
	



	

	

	#094D88



	

	font-weight:normal;

	letter-spacing: 0.0em;

	text-align: center;

	width:150px;
	height:38px;
	margin-top:8px;

}

input[type="submit"]:hover{

	background:#D54A40;

	border-radius:..0em .0em .0em .0em;



border-top: 1px solid #C42720;
	border-bottom: 1px solid #C42720;
	 
	border-left: 1px solid #C42720;
	border-right: 1px solid #C42720;
	margin-top:8px;

	

}




.caja {
   margin:5px 1px 1px 8px;	
   border:1px solid #008145;
   height:30px;
   overflow: hidden;
   width: 350px;
   position:relative;
}
select {
   background: transparent;
   border: none;
   font-size: 16px;
   height: 30px;
   padding: 5px;
   width: 350px;
   font-family:"arial", Gothic;
   color: #000000;
}
select:focus{ outline: none;}

.caja::after{
	content:"\025be";
	display:table-cell;
	padding-top:7px;
	text-align:center;
	width:30px;
	height:30px;
	background-color:#008145;
	position:absolute;
	top:0;
	right:0px;	
	pointer-events: none;
	font-family:"arial", Gothic;
}







label{

	cursor:pointer;

}



legend{

	color:#F90;

	font-size: 1.2em;

	font-weight:bold;

}



/* lista ordenada con ol con 0 arriba abajo y 2em a ambos lados */

ol{

	padding: 0 .5em;

}



/* menu de la lista ordenada con ol li, 1 em de arriba abajo y 0 a ambos lados*/



ol li{

	padding: .3em 0;

	List-style:none;

	

	

}





textarea{

	resize:none;

}







header{

	/*margin-top:.4em;*/

	

	/*background-image:url(../img/fondoheader.png);*/

	



	background:#2698DE;

	border-radius: 0 0 0 0;

	text-align:justify;

	

}











/*Para quitar las viñetas */

nav ul{

List-style:none;



}





/*-----------------cambiocolor del formulario-------*/

article#info-contacto, article#contactanos {

	/*border: .1em solid #1E6381;*/

	border-radius: .5em;

	margin: .2em;

	min-height: 144px;

	padding: .1em;

	text-align:left;

	background:#ffffff;

	text-align:justify;

}





footer{

	

	background-image:url(../img/pie.jpg);

	color:#ffffff;

	text-shadow: 0 -1px 0 hsla(0,0%,0%,.3);

	/*margin-left:9.2em;*/

	

	text-align:justify;



	padding-bottom:.9em;

	font-family: sans-serif;

	font-size: 12px;

	line-height: 16px;

	font-weight: normal;

	/*margin:0 auto;*/

	border-radius: 0 0 0 0;

	/*margin-bottom:1em;*/

	

	

	

	



	

	

}



.fade{

	opacity: 1; /*opacidad 1 equivale al 100% cuando la clase face esta normal, es para que internet explore interprete bien la propiedad de opacity,la funcion alpha filter es la funcion de opacity y trabaja de 0 a 10 que es 100%  */	

	filter:alpha(opacity=10);

	-ms-transition: all 0.5s ease-in; 

	-moz-transition: all 0.5s ease-in;

	-o-transition: all 0.5s ease-in;

	-webkit-transition: all 0.5s ease-in;

	transition: all 0.5s ease-in;

	

	

}



.fade:hover {

	opacity:0.7;/*opacidad bajar al 70% y el filter al 0.7*/	

	filter:alpha(opacity=7);

	-ms-transition: all 0.5s ease-out;

	-moz-transition: all 0.5s ease-out;

	-o-transition: all 0.5s ease-out;

	-webkit-transition: all 0.5s ease-out;

	transition: all 0.5s ease-out;



}



.redonda{

border-radius: 0.5em; /* 5ppx/16px*/

border:solid 1px #83BFD6;

box-shadow: 5px 5px 10px rgba(204, 204, 204, .3);



}



.redonda01{

border-radius: 0.5em; /* 5ppx/16px*/

border:solid 1px #cccccc;

box-shadow: 5px 5px 10px rgba(204, 204, 204, .3);



}

.redonda1{

/*border-radius: 0.4em; /* 5ppx/16px*/

/*border:solid 1px #cccccc;

box-shadow: 5px 5px 10px rgba(204, 204, 204, .2);*/



}



.titulocuerpo{





	color:#000000;

	/*text-shadow: 0 -1px 0 hsla(0,0%,0%,.3); */

	padding-left:.1em;

	

	text-align:left;

	font-family: "Poppins";

	font-size: 17px;

	

	font-weight: bold;	

	

}



.tituloservicio{





	color:#000000;

	/*text-shadow: 0 -1px 0 hsla(0,0%,0%,.3); */

	padding-left:.1em;

	

	text-align:left;

	font-family: sans-serif;

	font-size: 21px;

	

	font-weight: bold;	

	

}

.titulo{
	font-family: sans-serif;
	font-size: 25px;
	font-weight: bold;
	text-align: left;
	color: #333;

	}

	

.subtitulo{
	font-family: "Poppins";
	font-size: 15px;
	font-weight: normal;
	text-align: left;
	color: #333;
	display: block;
	padding-top: 0px;
	padding-right: 8px;
	padding-bottom: 0px;
	padding-left: 8px;
	line-height: 20px;

	}	

	.center{



	text-align: center;

	

	}

.titulocaudex{
	color:#534E48;
	/*text-shadow: 0 -1px 0 hsla(0,0%,0%,.3); */

	padding-left:0.5em;
	text-align:left;
	font-family: "arial", Gothic;
	font-size: 16px;
	

	/*font-weight: bold;	*/

	

}
	

.tituloservicios{
	color:#222222;
	/*text-shadow: 0 -1px 0 hsla(0,0%,0%,.3); */

	padding-left:0.5em;
	
	text-align:left;
	font-family: "arial", Gothic;
	font-size: 20px;

	

	/*font-weight: bold;	*/

	

}

article#titulovineta{

	color:#000000;

	/*text-shadow: 0 -1px 0 hsla(0,0%,0%,.3); */

	padding-left:.2em;

	text-align:justify;

	font-family: sans-serif;

	font-size: 13px;

	font-weight: normal;

	line-height: 25px;

	max-width:30%;

	

	

	

		

	

}



.titulovineta{

	color:#000000;

	/*text-shadow: 0 -1px 0 hsla(0,0%,0%,.3); */

	padding-left:.2em;

	text-align:justify;

	font-family: sans-serif;

	font-size: 13px;

	font-weight: normal;

	line-height: 25px;

	max-width:30%;

	

	

	

		

	

}



article#parrafo,article#parrafo1{

	display:inline-block; /*Pone a los dos etiquetas a la misma altura */

	max-width:95%;

	vertical-align:middle;

	



}



article#titulovineta,article#imagencenter{

	display:inline-block; /*Pone a los dos etiquetas a la misma altura */

	max-width:95%;

	vertical-align:middle;

	



}



article#parrafo{

	

	padding-left:2em;

	

}



article#parrafo1{

	padding-left:.1em;

	padding: 0 auto;

	max-width:95%;

	

}



.imagencentrada{

	text-align:center;

	position: fixed;





	

}



#galeriatitulo{

	padding-left:2.5em;

	color:#333;

	/*text-shadow: 0 -1px 0 hsla(0,0%,0%,.3);*/

	/*text-transform: uppercase;*/

	text-align:left;

	font-family: sans-serif;

	font-size: 18px;

	line-height: 16px;

	font-weight: normal;

	width:95%;

}

.titulotab{

	color: #CCFF00!important;

	text-align: center;

	text-decoration: none !important;

	text-shadow: 0 -1px 0 hsla(0,0%,0%,.3);

	text-transform: uppercase;

	cursor:pointer;

	font-family: sans-serif;

	font-size: 11px;

	line-height: 16px;

	font-weight: normal;

}



.titulotab1{

	color: #CCFF00!important;

	text-align: center;

	text-decoration: none !important;

	text-shadow: 0 -1px 0 hsla(0,0%,0%,.3);

	text-transform: uppercase;

	cursor:pointer;

	font-family: sans-serif;

	font-size: 11px;

	line-height: 16px;

	font-weight: normal;

}





.enlacepagina{

	font-family: sans-serif;

	font-size: 12px;

	color: #9f0;

	text-decoration: underline;

}



#botonsilabus

{

	background-image:url(../img/botonverde.jpg);

	border: 1px solid #467d16;

	border-bottom-color: #467d16;

	/*Background

	background: #447e12; /*Fallback*/

	/*

	background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #71b02f), color-stop(1, #447e12));

	background: -moz-linear-gradient( center top, #71b02f 20%, #447e12 100% );

	

	*/



	color: #fff;

	text-align: center;

	text-decoration: none;

	text-shadow: 0 -1px 0 hsla(0,0%,0%,.3);

	text-transform: uppercase;

	cursor:pointer;

	font-family: sans-serif;

	font-size: 11px;

	line-height: 16px;

	font-weight: normal;

}

/*mejor presentacion a nuestros elementos,van a condicionar el ancho de nuestra pagina, altos y anchos

disposicionhorizontal script

vericial port 3, es un trabajo de prueba, error

cuando el ancho es de 1081 es decir cuando el ancho del navegador sea 1081 para arriba ejecutar estos estilos, entra el condicional de la mediquery.

cuando el ancho maximo sea 1080 px, es decir de 1080 hacia abajo

cuando el ancho max sea de 800

No hay una medida fija para cada pantalla es hacerlo a prueba y ensayo*/	



@media screen and(min-width:1281px){

	

	header h{

		text-align:left;

		width:35%;

	}

	

	

	

	

	

	

	

	

	nav{

		text-align:right;

		width:60%

		

	}

	

	

	

	

	

	

	

	

	article#descripcion-acerca, article#multimedia-acerca{

	

		min-height: 590px;

		

     }

	 

	 

	 

}



@media (max-width:1280px){

	

	

	

	nav li{

		font-size:0.9em;

	}

	

	

	

	

	header h1,nav{

	display:inline-block; /*Pone a los dos etiquetas a la misma altura */

	max-width:95%;

	vertical-align:middle;

	

	



}



h1{

	text-align:left;

	

	

}



h2{

	margin-left:4em;

	

	

}



article#imagencenter{

	

	border-radius: .5em ;

	padding: 0 auto;

	max-width:100%;

	

	

	

}



article#parrafo, article#parrafo1{

	display:inline-block; /*Pone a los dos etiquetas a la misma altura */

	max-width:95%;

	vertical-align:middle;

	

	



}



article#parrafo{

	

	padding-left:2em;

	

	

	

}



article#parrafo1{

	padding-left:3em;

	padding: 0 auto;

	max-width:90%;

	

}



div.portafolio2 article {

		display: inline;

		padding: 1em;

		margin-left:0.5em;

		

		max-width:100%;

		

		

	}





article#titulovineta{

	width:80%;

	

}



h1{

	width:40%;

}

	

	

	

	

	section#principal, article#galeria-inicio{

		

		width:100%;

		text-align:center;

		padding: 0em .1em;

		/*padding-top:.5em;*/

		

	

		

	}

	

	



	

	

	

	

	

	section#redessociales{

	

	width:90%;

	

	padding-left:1em;

	

	

	

	

	

	}

	

	section#principal, aside{

		width:65%;

		margin-bottom: .5em;

		display:inline-block;

		min-height:300px;

		

	}

	

	aside{

		width:30%;

	}

	

	



	article#descripcion-acerca, article#multimedia-acerca, #img-servicios, article#nuestros-servicios{

		width:45%;

		/* min-height: 800px; */

		

		

	}





	artice#servicio1, artice#servicio2, artice#servicio3{

		width: 30%;

		

	}

	

	section#trabajos{

		max-width:90%;

	}

	

	div.portafolio article {

		/*padding: 1em;*/

		display:none;

	}

	

	div.portafolio1 article {

		display: inline;

		padding: 1.7em;

		margin-left:0em;

		

	

		

	}

	

	form{

		width:95%;

	}



}

@media (max-width:1024px){

	

	

	

	nav li{

		font-size:0.9em;

	}

	

	

	

	

	header h1,nav{

	display:inline-block; /*Pone a los dos etiquetas a la misma altura */

	max-width:95%;

	vertical-align:middle;



}

h1{

	width:40%;

	

}



h2{

	margin-left:1.8em;

	

	

}

	

	article#imagencenter{

	

	border-radius: .5em ;

	padding: 0 auto;

	max-width:100%;

	

	

}

	

	article#parrafo,article#parrafo1{

	display:inline-block; /*Pone a los dos etiquetas a la misma altura */

	max-width:95%;

	vertical-align:middle;

	



}

article#parrafo{

	

	padding-left:2em;

	

	

}



article#parrafo1{

	padding-left:.1em;

	padding: 0 auto;

	max-width:50%;

	

}



	

	

	section#principal, article#galeria-inicio{

		

		width:100%;

		text-align:center;

		padding: 0.2em .1em;

		

	

		

	}

	

	

	

	

	

	

	

	

	

	#redessociales{

	

	width:92%;

	

	padding-left:2.1em;

	

	

	

	

	

	}

	

	section#principal, aside{

		width:65%;

		margin-bottom: .5em;

		display:inline-block;

		min-height:200px;

		

	}

	

	aside{

		width:30%;

	}

	

	#galeriatitulo{

	padding-left:2.1em;

	color:#333;

	text-shadow: 0 -1px 0 hsla(0,0%,0%,.3);

	text-transform: uppercase;

	text-align:left;

	font-family: sans-serif;

	font-size: 16px;

	line-height: 16px;

	font-weight: normal;

	width:95%;

}

	

	section#flexslidergaleria{	

	

	border-radius: 0.5em;

	display:block;

	margin: 0 auto;

	max-width:100%;

	padding:0.1em;

	margin-left:2.1em;

	

	

	width:92%;

	

}



	article#descripcion-acerca, article#multimedia-acerca, #img-servicios, article#nuestros-servicios{

		width:45%;

		/* min-height: 800px; */

		

		

	}





	artice#servicio1, artice#servicio2, artice#servicio3{

		width: 30%;

		

	}

	

	section#trabajos{

		max-width:90%;

	}

	

	div.portafolio article {

		display: none

		

	}

	

		

	div.portafolio1 article {

		display: inline;

		padding: .2em;

	}

	

	div.portafolio2 article {

		display: inline;

		padding: 0.15em;

		margin-left:1em;

		

		max-width:100%;

		

		

	}

	

	.redonda1{



max-width:21.7%;



}

	

	

	form{

		width:95%;

	}



}

@media (max-width:800px){

	nav li{

		font-size:0.95em; /*aca baja el tamaño de la fuente del menu*/

	}

	

	

	h1{

	width:80%;

	text-align:center;

}





article#imagencenter{

	

	border-radius: .5em ;

	padding: 0 auto;

	max-width:100%;

	

	

}

	

	article#parrafo,article#parrafo1{

	display:inline-block; /*Pone a los dos etiquetas a la misma altura */

	max-width:95%;

	vertical-align:middle;

	



}

article#parrafo{

	

	padding-left:2em;

	

}



article#parrafo1{

	padding-left:.1em;

	padding: 0 auto;

	max-width:80%;

	

}





#redessociales{

	

	width:92%;

	

	padding-left:1em;

	

	

	

	

	

	}



section#principal, article#galeria-inicio{

		

		width:98%;

		text-align:center;

		padding: 0.2em 0.1em;

		

	

		

	}

	article#galeria-inicio{

		

		width:95%;

		

	}

	

	section#principal{

		max-width:800px;

		margin-bottom: .5em;

		display:block;

		min-height:210px;

		

	}

	

	#galeriatitulo{

	padding-left:1.8em;

	color:#333;

	text-shadow: 0 -1px 0 hsla(0,0%,0%,.3);

	text-transform: uppercase;

	text-align:left;

	font-family: sans-serif;

	font-size: 16px;

	line-height: 16px;

	font-weight: normal;

	width:95%;

}

	

	section#flexslidergaleria{	

	

	border-radius: 0.5em;

	display:block;

	margin: 0 auto;

	max-width:100%;

	padding:0.1em;

	margin-left:1.8em;

	

	width:90.5%;

	

}









section#serv1, section#serv2, section#serv3{

	width: 65%;

	display: block;

	vertical-align:top;

	margin: auto;

	padding: 0;

	text-align:center;

	

	

	padding: .3em;

	font-family: sans-serif;

	font-size: 12px;

	line-height: 21px;

	font-weight: normal;

	text-align: left;

	background-image:url(../img/fondoserv.jpg);

	margin-bottom:.5em;

	

	

	

	

	

	border-radius: 0.4em; /* 5ppx/16px*/

border:solid 1px #cccccc;

box-shadow: 5px 5px 10px rgba(204, 204, 204, .2);*/

margin-bottom:.5em;

height:160px;

	

	

}

	

	aside, article#descripcion-acerca, article#multimedia-acerca, article#servicio2, article#servicio3 {

		display:block;

		width:97%;

	}

	

	

	

	

	

	

	

	#img-servicios, article#nuestros-servicios, article#servicio1{

		display: block;

		margin: 0 0 .25em 0;

		width:95%;

	

	}

	

	#img-servicios{

		width:98%;

	}

	article#servicio2, article#servicio3 {

		width: 45%;	

	}

	

	

	section#trabajos{

		max-width:95%;

	}

	

	

	

	

	

	div.portafolio1 article {

		display: inline;

		padding: .8em;

		

	}

	

		

	

	div.portafolio2 article {

		display: inline;

		padding: 0.01em;

		margin-left:1em;

		

		max-width:100%;

		

		

	}

	

	.redonda1{



max-width:21.7%;



}

	

	

	

	section#consultasnsl {

		margin-bottom: .2em;

	}

	

	section#contacto, section#mapa, section#consultasnsl {

		display: block;

		width: 95%;

	}

	section#contacto {

		margin-bottom: .2em;

	}

	form{

		width: 100%;

	}

	

	

}



@media (max-width:600px){

	

	





	nav li{

		display:inline-block;

		margin:0;

		width:98%;

		

	}

	h1{

	width:98%;

	text-align:center;

}



h2{

	margin-left:0.5em;

	

	

}

	

	

	#redessociales{

	

	width:92%;

	

	padding-left:1em;

	

	

	

	

	

	}

	

	section#principal, article#galeria-inicio{

		

		width:98%;

		text-align:left;

		padding: 0.1em .0001em;

	

		

	}

	

	article#galeria-inicio{

		

		width:97%;

		

	}

	

	section#principal, aside{

		width:65%;

		margin-bottom: .5em;

		display:inline-block;

		min-height:150px;

		

	}

	

	nav2 a{

	

	

	

	/*Background*/





	

	



	color: #fff!important;

	text-align: center;

	text-decoration: none !important;

	text-shadow: 0 -1px 0 hsla(0,0%,0%,.3);

	text-transform: uppercase;

	font: bold 10px/16px sans-serif;

	cursor:pointer;

}



nav2 a:hover{

	

	

	

	/*Background* color de los enlaces del tab/ */





	

	



	color: #CCFF00!important;

	text-align: center;

	text-decoration: none !important;

	text-shadow: 0 -1px 0 hsla(0,0%,0%,.3);

	text-transform: uppercase;

	font: bold 10px/16px sans-serif;

	cursor:pointer;

}

	article#Tabpanels{

	border-radius:0.7em;

	color:#FFF;

	margin:0.5em;

	padding-left:0.1em;

	

	

	text-align:left;

	width:100%;  /*este ancho es del 95 del padre quiere decir 95% del 65% de sectin#principal */

	

	

	

}

	

	

	

	section#flexslidergaleria{

	

	

	

	

	border-radius: 0.5em;

	display:block;

	margin: 0 auto;

	max-width:98%;

	padding:0.25em;

	

	

	

	width:80.9%;

	

}

	

	

	aside{

		max-width:93%;

}

	

	

	

	section#serv1, section#serv2, section#serv3{

	width: 65%;

	display: block;

	vertical-align:top;

	margin: auto;

	padding: 0;

	text-align:center;

	

	

	padding: .3em;

	font-family: sans-serif;

	font-size: 12px;

	line-height: 21px;

	font-weight: normal;

	text-align: left;

	background-image:url(../img/fondoserv.jpg);

	margin-bottom:.5em;

	

	

	

	

	

	border-radius: 0.4em; /* 5ppx/16px*/

border:solid 1px #cccccc;

box-shadow: 5px 5px 10px rgba(204, 204, 204, .2);*/

margin-bottom:.5em;

height:160px;

	

	

}



	

	

	

	

	section#principal, article#descripcion-acerca, article#servicio2{

		

	margin-bottom:0.2em;

		

	}

	

	/*block se comporta en un solo bloque*/

	 section#principal, aside, article#descripcion-acerca, article#multimedia-acerca, article#servicio2, article#servicio3 {

		display:block;

		width:95%;

	}

	

	#img-servicios{

	

	display: none;

	

	}



	

	

	div.portafolio1 article {

		display:block;

		margin: auto;

		padding: 0;

		text-align:center;

	}

	

	div.portafolio2 article {

		display:block;

		margin: auto;

		padding: 0;

		text-align:center;

		

		

	}

	.redonda1{



max-width:100%;



}

	

	footer{

	background-color:#333;

	color:#FFFFFF;

	text-shadow: 0 -1px 0 hsla(0,0%,0%,.3);

	margin-left:9.2em;

	text-align:center;

	padding-top:.5em;

	padding-bottom:.5em;

	font-family: sans-serif;

	font-size: 11px;

	line-height: 16px;

	font-weight: normal;

	margin:0 auto;

	

	

	



	

	

}







	

	

}

	

}