@charset "utf-8";
/* Tipografias Goolge Fonts
font-family: 'Roboto', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Padauk', sans-serif;
font-family: 'Lato', sans-serif;
font-family: 'Fira Sans Extra Condensed', sans-serif;
font-family: 'Roboto Condensed', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Nunito', sans-serif;
font-family: 'Nunito Sans', sans-serif;
font-family: 'Raleway', sans-serif;
font-family: 'Fira Sans Condensed', sans-serif;
font-family: 'Open Sans Condensed', sans-serif;
font-family: 'PT Sans', sans-serif;
font-family: 'Roboto Slab', serif;
font-family: 'PT Sans Narrow', sans-serif;
font-family: 'Quicksand', sans-serif;
font-family: 'Ubuntu', sans-serif;
font-family: 'Arimo', sans-serif;
font-family: 'Titillium Web', sans-serif;
font-family: 'Fjalla One', sans-serif;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-family: 'Anton', sans-serif;
font-family: 'Archivo Narrow', sans-serif;
 */
header, section, article, nav, footer, aside, figure{
	display:block;
	margin:0;
	padding:0;	
}
body{
	margin:140px 0 0 0;
	background:#FFF;
}
*{
	box-sizing:border-box;
}
p, h1, h2, h3, h4{
	font-size:14px;
	color:#000;
	margin:6px;
	font-weight:normal;
}
p{
	color:#868686;
	font-size:14px;	
	font-weight:normal;
}
h1{ font-size:24px; font-weight:normal; }
h2{ font-size:20px; font-weight:normal; }
h3{ 
	font-size:16px; font-weight:normal;
}
h4{ font-size:16px; font-weight:normal; }
a{
	text-decoration:none;
	color:#000;
}
a img{
	border:none;
}
ul, ol{
	font-size:14px;
	color:#868686;
}
/****************************************************/
/**************** Estilos para la cabecera **********/
/****************************************************/
#cajacabecera{
	background:#FFFFFF;
	width:100%;
	position:fixed;
	left:0;
	top:0;
	z-index:999;
	box-shadow: 0 4px 4px rgba(0,0,0,0.5);
}
#cabecera{
	width:100%;
	max-width:1100px;
	margin:auto;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items: center;
	padding: 5px 0;
}
#cabecera figure{
	width:25%;	
}
#cabecera ul{
	width:75%;
	display:flex;
	justify-content:flex-end;
	margin: 0;
	padding: 0;
	list-style: none;
}
#cabecera ul li{
	margin-left: 6px;	
}
#cabecera ul li a{
	width: 40px;
	height: 40px;
	display: block;
	background: #62CA75;
	text-align: center;
	line-height: 40px;
	font-size: 24px;
	color: #fff;
	border-radius: 100%;
}
#cabecera ul li a.fac{
	background: #1458AB;	
}
#cabecera figure img{
	width:100%;	
	height:auto;
	display:block;
}
#cajamenu{
	background:#325c23;	
}
#cajamenu div{
	width:100%;
	max-width:1100px;
	margin:auto;
	border-left: 1px solid #325c23;
}
/***************************************************/
/********        DISEÑO PARA CUERPO         ********/
/***************************************************/
#banners{
	height:730px;	
}
#cajaslogan{
	width:100%;
	max-width:1100px;
	margin:auto;	
	position:relative;
}
#slogan{
	width:100%;
	max-width:580px;
	background:rgba(27,173,207,0.8);
	position:absolute;
	right:0;
	top:200px;
	padding:30px;
}
#slogan h2{
	font-family: 'Anton', sans-serif;
	font-size:45px;
	font-weight:normal;
	color:#FFFFFF;
	text-align:center;
	margin:0;
}
#slogan p{
	font-family: 'Roboto', sans-serif;
	font-size:18px;
	font-weight:normal;
	color:#FFFFFF;
	text-align:center;
	margin:0;
}
#slogan a{
	width: 240px;
	height: 45px;
	display: block;
	margin: 15px auto;
	background: #325c23;
	text-align: center;
	line-height: 45px;
	border-radius: 6px;
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
}
/***************************************************/
/********         DISEÑO PARA NOSOTROS      ********/
/***************************************************/
#nosotros{
	display:flex;
	justify-content:space-between;	
}
#imgnosotros{
	width:50%;
}
#txtnosotros{
	width:50%;
	background:#1BADCF;
	padding:40px;
}
#imgnosotros img{
	width:100%;
	height:auto;
	display:block;
}
#txtnosotros h2{
	font-family: 'Anton', sans-serif;
	font-size:26px;
	font-weight:normal;
	color:#fff;
}
#txtnosotros p{
	font-family: 'Roboto', sans-serif;
	font-size:14px;
	font-weight:normal;
	color:#fff;
	line-height: 22px;
	text-align: justify;
}

.boton{
	width:200px;
	height:45px;
	line-height:45px;
	display:block;
	background:#000;
	color:#ffff;
	text-align:center;
	font-family: 'Oswald', sans-serif;
	font-size:18px;
	margin:15px 6px;
	border-radius: 6px;
}
.boton:hover{
	background:#325c23;
	color:#ffff;
}
/***************************************************/
/********      DISEÑO PARA SERVICIOS        ********/
/***************************************************/
#cajatitulos{
	width:100%;
	margin:auto;
	padding: 30px 0;
	background: rgba(239,239,239,1.00);
}
#cajatitulos h2{
	font-family: 'Anton', sans-serif;
	font-size:30px;
	font-weight:normal;
	color:#000;
	text-align:center;
	display:block;
	background:url(../imagenes/raya.png) no-repeat center bottom;
	padding:10px 0;
	margin-bottom:15px;
}
#cajatitulos p{
	width:50%;
	margin:auto;
	font-family: 'Roboto', sans-serif;
	font-size:14px;
	font-weight:normal;
	color:#000;
	text-align:center;
	line-height: 22px;
}
/***************************************************/
/********    DISEÑO PARA UBICANOS           ********/
/***************************************************/
#clientes{
	padding:50px 0;	
}
/***************************************************/
/********    DISEÑO PARA UBICANOS           ********/
/***************************************************/
#cajamapa{
	height:650px;
	border-bottom:1px solid #e2e2e2;
	border-top:1px solid #e2e2e2;	
}
/***************************************************/
/********    DISEÑO PARA CONTACTENOS        ********/
/***************************************************/
#contactenos{
	padding:50px 0;	
}
#cajaformulario{
	width:100%;
	max-width:1100px;
	margin:auto;
	padding: 30px 0;
}
#trescolums{
	display:flex;
	flex-direction:row;
	justify-content:space-between;	
}
#trescolums p{
	width:33%;
	color:#000;
}
#unacolum p{
	color:#000;
}
.campos{
	width:100%;
	height:45px;
	line-height:43px;
	padding:0 10px;
	border:1px solid #e2e2e2;
	border-radius:6px;
	background:#fff;
	color:#646464;	
	transition:all 0.5s;
}
.campos:hover{
	border:1px solid #1BADCF;	
}
.comentarios{
	width:100%;
	height:200px;
	padding:10px;
	border:1px solid #e2e2e2;
	border-radius:6px;
	background:#fff;
	color:#646464;
	transition:all 0.5s;	
}
.comentarios:hover{
	border:1px solid #1BADCF;	
}

.advertencia{
	color:#FF040C;
	font-weight:bold;	
}
.cajaroja{
	background:#E11313;
	border-radius:10px;
	padding:200px 0;
}
.cajaroja h2{
	color:#FFFFFF !important;
	font-family: 'Oswald', sans-serif;
	font-weight:normal;
	text-align:center;
}
/***************************************************/
/********    DISEÑO PARA PIE PAGINA         ********/ 
/***************************************************/
#piepagina{
	padding:3% 0;
	background:#1BADCF;
}
#centropie{
	width:100%;
	max-width:1100px;
	margin:auto;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
}
#centropie div{
	width:25%;
	padding:0 2%;
}
#centropie div img{
	width:200px;
	height:auto;
	display:block;
	margin-bottom:10px;
}
#centropie div h2{
	color:#FFFFFF;
	font-family: 'Oswald', sans-serif;
	font-weight:normal;
	font-size:16px;
}
#centropie div p{
	color:#FFF;
	font-size:13px;
}
#centropie div ul{
	margin:0;
	padding:0;
	list-style:none;	
}
#centropie div ul li a{
	display:block;
	color:#FFF;
	padding:6px 0;
	font-size:13px;
}
#centropie div ul li a:hover{
	color:#000;	
}
#centropie div ul.redes{
	display:flex;
}
#centropie div ul.redes li a{
	display:block;
	font-size:20px;
	margin-right:6px;
}

.copyrigth{
	display:block;
	background:#01223B;
	margin:0;
	padding:15px 0;
	text-align:center;	
	color:#FFFFFF;
}
/***************************************************/
/********    DISEÑO PARA TABLETAS 1024      ********/
/***************************************************/
@media only screen and (max-width: 1024px){
	
}
/***************************************************/
/********    DISEÑO PARA TABLETAS 800       ********/
/***************************************************/
@media only screen and (max-width: 800px){
	/****************************************************/
	/**************** Estilos para la cabecera **********/
	/****************************************************/
	#cabecera{
		flex-direction:column;
	}
	#cabecera figure{
		width:100%;	
	}
	#cabecera figure img{
		width:300px;
		height:auto;
		display:block;
		margin:auto;	
	}
	#cabecera div{
		display:none;
	}
	
	/***************************************************/
	/********        DISEÑO PARA CUERPO         ********/
	/***************************************************/
	#banners{
		height:500px;	
	}
	#slogan{
		width:90%;
		position:static;
		padding:20px;
		margin:auto;
		margin-top:150px;
	}
	#slogan h2{
		font-size:35px;
	}
	#slogan p{
		font-size:18px;
	}
	/***************************************************/
	/********         DISEÑO PARA NOSOTROS      ********/
	/***************************************************/
	#nosotros{
		flex-direction:column;	
	}
	#imgnosotros{
		width:100%;
		order:2;
	}
	#txtnosotros{
		width:100%;
		order:1;
	}
	#txtnosotros h2{
		font-family: 'Anton', sans-serif;
		font-size:40px;
		font-weight:normal;
		color:#FFFFFF;
	}
	
	/***************************************************/
	/********    DISEÑO PARA UBICANOS           ********/
	/***************************************************/
	#cajamapa{
		height:400px;
	}
	
	/***************************************************/
	/********    DISEÑO PARA CONTACTENOS        ********/
	/***************************************************/
	#cajaformulario{
		width:90%;
	}
	#trescolums{
		flex-direction:column;
	}
	#trescolums p{
		width:100%;
	}
	
	/***************************************************/
	/********    DISEÑO PARA PIE PAGINA         ********/
	/***************************************************/
	#centropie{
		width:100%;
		flex-direction:column;
	}
	#centropie div{
		width:80%;
		margin:autoM
	}
}
/***************************************************/
/********    DISEÑO PARA TABLETAS 603       ********/
/***************************************************/
@media only screen and (max-width: 603px){
	
}
/***************************************************/
/********    DISEÑO PARA TABLETAS 533       ********/
/***************************************************/
@media only screen and (max-width: 533px){
	
	
}
/***************************************************/
/********    DISEÑO PARA TABLETAS 480       ********/
/***************************************************/
@media only screen and (max-width: 480px){
	#txtnosotros h2{
		font-size:25px;
	}
	#cajatitulos h2{
		font-size:24px;
	}
	#cajatitulos p{
		width:95%;
	}
	
}
/***************************************************/
/********    DISEÑO PARA TABLETAS 360       ********/
/***************************************************/
@media only screen and (max-width: 360px){

	
}