@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

body{
	font-size: 16px;
	line-height:22px;
	font-family: 'Roboto', sans-serif;
	}

.cleare{
	display: block;
	clear:both;
	}

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 87.36%;
	padding-left: 1.82%;
	padding-right: 1.82%;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#w_menu{
	display: none;
	background: #fff;
	border-top: 3px solid #000;
	width: 100%;
	position: fixed;
	z-index: 999;
	padding: 0 0 20px 0;
	box-shadow: 0 0 15px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 0 15px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.2);
	}

#logo{
	width: 50%;
	float: left;
	}

#botones{
	float: right;
	width: 50%;
	text-align: right;
	color: #496ab2;
	font-size: 12px;
	padding: 1% 0 0 0;
	}

#nav li{
	display: inline;
	*display: inline-block;
	zoom: 1;
	}

#nav li a{
	color: #496ab2;
	text-transform: uppercase;
	letter-spacing: 2px;
	font: 14px;
	display: inline-block;
	padding: 3% 2% 2.5% 2%;
	font-weight: 700;
	position: relative;
	   
	-webkit-transition: all .3s ease-in 0s;
	-moz-transition: all .3s ease-in 0s;
	-ms-transition: all .3s ease-in 0s;
	-o-transition: all .3s ease-in 0s;
	transition: all .3s ease-in 0s;
	}

#nav li a:before, #nav li a:after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0px;
  
}
#nav li a:after {
  right: 0px;
  height: 3px;
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#fff), to(#fff));
  background-image: -webkit-linear-gradient(left, #fff, #fff);
  background-image: -moz-linear-gradient(left, #fff, #fff);
  background-image: -o-linear-gradient(left, #fff, #fff);
}

#nav li a:hover:after {
  right: 0px;
  height: 3px;
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#496ab2), to(#ec008b));
  background-image: -webkit-linear-gradient(left, #496ab2, #ec008b);
  background-image: -moz-linear-gradient(left, #496ab2, #ec008b);
  background-image: -o-linear-gradient(left, #496ab2, #ec008b);
}

#nav li a:hover{
	color: #000;
	}

#nav li a.activo{
	color: #000;
	}

#nav li a.activo:after {
  right: 0px;
  height: 3px;
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#496ab2), to(#ec008b));
  background-image: -webkit-linear-gradient(left, #496ab2, #ec008b);
  background-image: -moz-linear-gradient(left, #496ab2, #ec008b);
  background-image: -o-linear-gradient(left, #496ab2, #ec008b);
}

.caption{
	font-size: 21px;
	line-height: normal;
	position: absolute;
	width: 100%;
	margin: auto;
	left: 0;
	right: 0;
	z-index: 10;
	color: #fff;
	top: 12%;
	text-align: center;
	font-weight: 700;
	}

.caption span{
	font-weight: 300;
	}

.azul{
	text-align: center;
	color: #00adef;
	font-size: 25px;
	line-height: 32px;
	font-weight: 300;
	padding: 8% 0;
	}

.circulo{
	width: 90%;
	float: left;
	margin: 1%;
	text-align: center;
	color: #7a7c7e;
	}

.circulo h2{
	color: #062f67;
	font-size: 18px;
	}

#w_contacto{
	background: #f1f1f2;
	padding: 4% 0;
	}

.flotante_contacto{
	float: left;
	width: 100%;
	text-align:center;
	color: #7a7c7e;
	}

.titulo_azul{
	color: #002053;
	line-height: 38px;
	}

.input{
	border: 0;
	padding: 15px 20px;
	margin: 3px 0;
	color: #999;
	width: 88%;
	}

#send{
	background: #000; color: #fff; width: 100px; font-size: 10px; letter-spacing: 5px;
	
	-webkit-transition: all .3s ease-in 0s;
	-moz-transition: all .3s ease-in 0s;
	-ms-transition: all .3s ease-in 0s;
	-o-transition: all .3s ease-in 0s;
	transition: all .3s ease-in 0s;
	}

#send:hover{
	background: #000;
	}

#w_maps{
	position: relative;
	height: 55vh;
	}

#w_maps iframe{
	width: 100%;
	display: block;
	pointer-events: none;
	position: relative; /* IE needs a position other than static */
}
#w_maps iframe.clicked{
	pointer-events: auto;
}

#footer{
	background: #000021;
	padding: 20px 0;
	color: #fff;
	font-size: 12px;
	letter-spacing: 2px;
	}

#logo_ft{
	float: left;
	width: 40%;
	}

#redes_ft{
	float: right;
	text-align: right;
	width: 40%;
	padding: 28px 0 0 0;
	color: #fff;
	}

#redes_ft a{
	color: #fff;
	}
	
	
	
	
	
#por_sec{
	position: relative;
	height: 27vh;
	PADDING: 5% 0 0 0;
	}

.txt_just{
	width: 95%;
	margin: auto;
	text-align:justify;
	color: #7a7c7e;
	}

.cert{
	width: 20%;
	margin: 2%;
	float: left;
	height: 150px;
	background: #f1f1f2;
	}

#video{
	width: 900px;
	height: 600px;
	background: #000;
	margin: auto;
	}
	
#w_pro{
	background: #000021;
	color: #fff;
	}

.list{
	width: 200px;
	margin: 7% 0 0 23%;
	float: left;
	}

.sub_m{
	background: #f1f1f2;
	padding: 20px 0;
	text-align:center;
	}

.sub_m ul li{
	display: grid;
	*display: inline-block;
	zoom: 1;
	}

.sub_m ul li a{
	background: #f1f1f2;
	padding: 15px 10px;
	text-align: center;
	color: #002053;
	}

.sub_m ul li a:hover{
	background: #002053;
	color: #f1f1f2;
	}

.sub_m ul li a.activo{
	background: #002053;
	color: #f1f1f2;
	}

.site-wrap 					{ min-height: 100%;min-width: 100%;background-color: white; position: relative;top: 0;bottom: 100%;left: 0;z-index: 1;background-size: 200%;}

.navigation 				{ width: 260px; height: 100%;position: absolute; top: 5px; bottom: 0;left: 0;z-index: 0;background: #000;list-style: none; padding:0 0 50px 0; margin:0; display:block }
.navigation li 				{ border-bottom: 1px dotted #ccc; text-align: center; color: #ccc; }
.navigation li.float		{ padding-left: 40px }
.navigation li.float a		{ display: inline-block; zoom: 1; *display: inline; }
.navigation li a 			{ display: block;padding: 1em 0 1em 12px;color: #fff;text-align: left;font-size: 1em;text-decoration: none;transition: color 0.2s, background 0.5s;}
.navigation li a.activo		{ color: #d0b066; }

.nav-trigger 				{ position: absolute;clip: rect(0, 0, 0, 0);display: none;}
label[for="nav-trigger"] 	{ display: block; position: absolute;left: 15px; top: 15px;z-index: 3; height: 30px;width: 30px;cursor: pointer;background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6' fill='red'/><rect y='24' width='15' height='6' fill='red'/><rect y='12' width='30' height='6' fill='red'/></svg>");background-size: contain;}

/*para abrir */
.nav-trigger + label, .site-wrap 	{transition: left 0.2s;}
.nav-trigger:checked + label 		{left: 290px;}
.nav-trigger:checked ~ .site-wrap 	{left: 260px;box-shadow: 0 0 5px 5px rgba(0,0,0,0.2);}

/*body								{overflow-x: hidden;}*/

#ip_logo					{ display: block; position: relative; text-align: center; width: 100%; z-index: 9; top 0; background: #fff;}
#formasss					{ margin: 0 }

@media only screen and (min-width: 481px) {
.gridContainer 			{width: 90.675%;padding-left: 1.1625%;padding-right: 1.1625%;}
#LayoutDiv1 			{clear: both;float: left;margin-left: 0;width: 100%;display: block;}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

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

.input						{ width: 70%;}
.list						{ margin: 2%;}
.sub_m ul li				{ display: inline;}
.txt_just					{ width: 50%;}
#formasss					{ margin: 0 0 0 15% }
.flotante_contacto			{ float: left; width: 50%; text-align:left}
.circulo					{ width: 20%;}
.caption					{ font-size: 40px; line-height: 47px; top: 55%;}
#w_menu						{ display: block;}
#ip_logo					{ display: none;}
label[for="nav-trigger"] 	{ display: none;}
.gridContainer 			{width: 88.2%;max-width: 1232px;padding-left: 0.9%;padding-right: 0.9%;margin: auto;}
#LayoutDiv1 			{clear: both;float: left;margin-left: 0;width: 100%;display: block;}
}