@charset "utf-8";
@import url("fonts.css");
/* Selectores Basicos */
header, section, article, nav, footer, aside, figure, form{
	display:block;
	margin:0;
	padding:0;	
}
body{
	margin:0;
	background:#ffffff;	
}
*{
	box-sizing:border-box;
}
p, h1, h2, h3, h4{
	font-family:Arial, sans-serif;
	font-size:14px;
	color:#555555;
	margin:6px;
}
h1{ font-size:24px; }
h2{ font-size:20px; }
h3{ font-size:18px; }
h4{ font-size:16px; }
a{
	text-decoration:none;
	color:#555555;
}
a img{
	border:none;
}
ul, ol{
	font-family:Arial, sans-serif;
	font-size:14px;
	color:#555555;
}
/*--ScrollUp--*/
#scrollUp{
	width:60px;
	height:60px;
	bottom:10px;
	right:10px;
	background:url(../imagenes/triangulo-gris.png);
}

/****************************************************/
/**************** Estilos para la cabecera **********/
/****************************************************/
#cajacabecera{
	background:#f8f8f8; /* #0b72b5*/
}
#cabecera{
	width:100%;
	max-width:1100px;
	margin:auto;
	padding:10px 0;
	
	/*Flex*/
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
}
#socialessup{
	margin:0;
	padding:0;
	list-style:none;
	
	/*Flex*/
	display:flex;
	align-items:flex-end;
}
#socialessup li a{
	display:block;
	margin-left:6px;
}
#socialessup li a i{
	display:block;
	width:37px;
	height:37px;
	line-height:37px;
	text-align:center;
	background:#001d7e;
	color:#FFFFFF;
	font-size:18px;	
}
#socialessup li a i:hover{
	background:#489594; /*#1e9142 #001d7e*/
}
/****************************************************/
/**************** Estilos para el menu     **********/
/****************************************************/
#cajamenu{
	background:#FFFFFF;
	background:linear-gradient(#FFFFFF, #eeeeee);
	border-bottom:2px solid #CCCCCC;
	border-top:2px solid #CCCCCC;
}
#btn-menu{
	display:none;
}
#mmovil{
	display:none;
}
#menu{
	width:100%;
	max-width:1100px;
	margin:auto;	
}
#menu ul{
	margin:0;
	padding:0;
	list-style:none;
	/*Flex*/
	display:flex;
}
#menu ul li{
	/*Flex*/	
	flex-grow:1;
}
#menu ul li:first-child a{
	border-left:2px solid #CCCCCC;
}
#menu ul li a{
	display:block;
	line-height:45px;
	padding:0 10px;
	color:#000000;
	font-family:"Oswald", Helvetica, Arial, sans-serif;
	font-size:14px;
	border-right:2px solid #CCCCCC;
	text-align:center;
}
#menu ul li a:hover, #menu ul li a.activo{
	color:#FFFFFF;
	background:#489594;/*#39ab61;*/
	
}
.menu-fijo {
	position: fixed;
	top: 0;
	width:100%;
	z-index:999; 
}
/****************************************************/
/**************** Estilos para el cuerpo   **********/
/****************************************************/
#banner{
	overflow:hidden;	
}
#contenedor{
	width:100%;
	max-width:1100px;
	margin:auto;
	padding:1%;
background:#FFFFFF;
background:linear-gradient(#FFFFFF, #eeeeee);
	overflow: hidden;
margin-bottom: 10px;
		
}
#contenedor2 /*Agrego esta dos parametros #contenedor overflow y margin-bottom evitar  caja flotantes tabs*/{
overflow: hidden;
margin-bottom: 10px;
}
/****************************************************/
/**************** Estilos para el proyecto **********/
/****************************************************/
.titulos{
	font-family:"Oswald", Helvetica, Arial, sans-serif;
	font-weight:normal;
	display:block;
	border-bottom:2px dotted #6B1818; /*#1e9142;*/
	padding:5px 0;
	margin-bottom:10px;
}
.titulos2{
	font-family:"Oswald", Helvetica, Arial, sans-serif;
	font-weight:normal;
	display:block;
	border-bottom:2px solid #6B1818;/*#1e9142;*/
	padding:5px 0;
	margin-bottom:10px;
}
.cajaproyectos{
	/*Flex*/	
	display:flex;
	flex-direction:row;
	justify-content:space-between;
}
.cajas{
	margin:6px;
}
.cajas img{
	width:100%;
	height:auto;
	display:block;
	border:4px solid #d9d9d9;
}
.cajas h2{
	font-family:"Oswald", Helvetica, Arial, sans-serif;
	font-weight:normal;
	font-size:16px;
	margin:6px 0;
}
.cajas a{
	font-size:13px;
}
.cajas a:hover{
	color:#c2cc08;
}
/****************************************************/
/**************** Estilos para servicios   **********/
/****************************************************/
.cajaservicios{
	/*Flex*/	
	display:flex;
	/*justify-content:space-between;*/	
	flex-direction: row;
	flex-wrap:wrap;
}
.servicios{
	width:30%;
	/*margin:5px;*/
	/*border-bottom:1px solid #1e9142;*/
	padding:5px 10px;
}
.servicios .numeros{ 
	width:30px;
	height:30px;
	display:block;
	background:#001d7e;
	color:#FFFFFF;
	text-align:center;
	line-height:30px;
	margin:1px 0;
	font-family:"Oswald", Helvetica, Arial, sans-serif;
}
.servicios p{
	font-size:14px;
	line-height:20px;
	margin:6px 0;
	color:#050505;	
}
.cajaservicios figure{
	border:4px solid #489594; /*#001d7e;*/  /* #D9D9D9;*/
	position:relative;	
}
.cajaservicios figure img{
	width:100%;
	height:auto;
	display:block;	
}
.cajaservicios figure figcaption{
	width:100%;
	display:block;
	line-height:30px;
	/*background:#1e9142;/*rgba(0,0,0,0.6);*/
	color:#1e9142; 
	/*#0b72b5; #1e9142;*/
	background:#FFFFFF;
    background:linear-gradient(#FFFFFF, #eeeeee);
	text-align:center;
	position:absolute;
	bottom:0;
	font-family:"Oswald", Helvetica, Arial, sans-serif;
	font-size:12px;
}
/****************************************************/
/**************** Estilos para pie pagina  **********/
/****************************************************/
#cajapie{
	background:#0b72b5;/*#1e9142;*/	
	
}
#piepagina{
	width:100%;
	
	max-width:1100px;
	margin:auto;
	padding:2px 0;
	
	
	/*Flex*/
	display:flex;
	justify-content:space-between;
	align-items:center;
}
#piepagina p{
	color:#FFFFFF;
}
#piepagina .socialespie{
	margin:0;
	padding:0;
	list-style:none;	
	
	/*Flex*/
	display:flex;
}
#piepagina .socialespie a{
	color:#FFFFFF;
	line-height:37px;	
}
#piepagina .socialespie a i{
	width: 37px;
	height: 37px;
	display: block;
	color:#FFFFFF;
	background:#001d7e;
	margin-left:6px;
	font-size:18px;
	text-align:center;	
}
#piepagina .socialespie a i:hover{
	background:#050505;
	color:#FFFFFF;	
}
/****************************************************/
/**************** Estilos para proyectos   **********/
/****************************************************/
#contenedorproyectos{
	/*Flex*/
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;	
}
.proyectos{
	width:25%;
	padding:1.5% 1%;	
}
.proyectos img{
	width:100%;
	height:auto;
	display:block;
	border:4px solid #d9d9d9;
}
.proyectos h2{
	font-family:"Oswald", Helvetica, Arial, sans-serif;
	font-weight:normal;
	font-size:16px;
	margin:6px 0;
}
.proyectos p{
	font-size:13px;
	margin:6px 0;
}
.proyectos a{
	width:130px;
	height:40px;
	line-height:40px;
	display:block;
	text-align:center;
	color:#fff;
	background:#CFCFCF;
	font-size:13px;
}
.proyectos a:hover{
	color:#FFFFFF;
	background:#C2CC08;
}
/****************************************************/
/****************    Detalle Proyectos     **********/
/****************************************************/
#cajabannerpro{
	overflow:hidden;
	margin-bottom:50px;
	
	/*Flex*/
	display:flex;
	flex-direction:row;	
	align-items:flex-end;
}
#cajaimagenes{
	width:70%;
}
#cajaimagenes img{
	width:100%;
	height:auto;
	display:block;
	border:6px solid #d9d9d9;
}
#datosproyecto{
	width:30%;	
}
#datosproyecto h2{
	font-family:"Oswald", Helvetica, Arial, sans-serif;
	font-size:26px;
}
#datosproyecto h3{
	font-family:"ChaletParisNineteenSixtyRg", Helvetica, Arial, sans-serif;
	font-size:36px;
	color:#C2CC08;
	font-weight:normal;
}
#datosproyecto p{
	color:#737373;
	line-height:20px;
}

#cajadescripcion{
	/*Flex*/	
	display:flex;
	flex-direction:row;
}
#cajadescripciontabs{
	overflow: hidden;
	margin-bottom: 10px;
	
}
#opcionespro{
	width:25%;
	border-right:1px solid #CCCCCC;	
	padding-right:2%;
}
#descripcion{
	width:75%;
	padding-left:2%;	
}
#opcionespro h2{
	font-family:"Oswald", Helvetica, Arial, sans-serif;
	font-size:26px;
	font-weight:normal;
	text-align:right;
	margin-bottom:15px;
}
#opcionespro ul{
	margin:0;
	padding:0;
	list-style:none;
}
#opcionespro ul li a{
	width:100%;
	height:44px;
	display:block;
	line-height:44px;
	color:#FFFFFF;
	background:#737373;
	margin-bottom:10px;
	padding:0 6%;
	text-align:right;
	font-family:"Oswald", Helvetica, Arial, sans-serif;
}
#opcionespro ul li a:hover{	
	background:#C2CC08;
}
#descripcion p{
	color:#737373;
	line-height:20px;
	text-align:justify;
}
/****************************************************/
/****************   Pagina Servicios       **********/
/****************************************************/
#contenedorservicios{
	/*Flex*/
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	flex-wrap:wrap;	
}
#contenedorservicios figure{
	width:30%;
	margin:15px 6px;
	position:relative;
	border:4px solid #489594;
}
#contenedorservicios figure img{
	width:100%;
	height:auto;
	display:block;
}
#contenedorservicios figure figcaption{
	width:100%;
	line-height:36px;
	background:rgba(0,0,0,0.6);
	text-align:center;
	color:#FFFFFF;
	position:absolute;
	bottom:0;
	font-size:14px;
	font-family:"Oswald", Helvetica, Arial, sans-serif;
	transition:all 1s;
}
#contenedorservicios figure:hover figcaption{
	background:#489594;/*rgba(0,29,126,0.9);*/
	
}
/****************************************************/
/**************  Pagina Detalle Servicios  **********/
/****************************************************/
#bannerservicios{
	border:6px solid #489594;
}
#cajadetalleservicios{
	/*Flex*/
	display:flex;
	flex-direction:row;
}
#descripcionservicios{
	width:70%;
	padding-right:2%;
}
#descripcionservicios p{
	color:#000000;
	line-height:20px;
	text-align:justify;	
}
#descripcionnoticias img{
    width:28%;
	height:20%;
	display:block;
	float:right;
	
}

#opcioneservicios{
	width:30%;
	padding-left:2%;
	border-left:2px solid #489594;
}
#opcioneservicios h2{
	font-family:"ChaletParisNineteenSixtyRg", Helvetica, Arial, sans-serif;
	font-size:30px;
	color:#001d7e;
	font-weight:normal;
	margin:6px 0;
}
#opcioneservicios p{
	color:#737373;
	line-height:20px;	
	margin:6px 0;
}
#opcioneservicios ul{
	margin:0;
	padding:0;
	list-style:none;
	margin-top:10px;
}
#opcioneservicios ul li a{
	width:100%;
	height:44px;
	display:block;
	line-height:44px;
	color:#FFFFFF;
	background:#489594;
	margin-bottom:10px;
	padding:0 6%;
	font-family:"Oswald", Helvetica, Arial, sans-serif;
}
#opcioneservicios ul li a:hover{	
	background:#0b72b5;
}

/****************************************************/
/****************    Estilos para Contacto   ********/
/****************************************************/
#cabeceracontacto{
	border:6px solid #489594;
}
#cabeceracontacto img{
	width:100%;
	height:auto;
	display:block;
}
#contenedorcontacto{
	/*Flex*/	
	display:flex;
	flex-direction:row;
	justify-content:space-between;
}
#fcontacto{
	width:58%;	
}
#cajadatos{
	width:40%;	
}
#fcontacto h3{
	font-family:"Oswald", Helvetica, Arial, sans-serif;
	font-size:26px;
	color:#0b72b5;/*#001d7e;*/
	font-weight:normal;
}
#fcontacto p{
	line-height:20px;
	font-size:13px;
}
#fcontacto p span{
	color:#001d7e;
	font-size:16px;
	font-weight:bold;
}
.campos{
	width:100%;
	height:40px;
	line-height:40px;
	border:1px solid #CCCCCC;
	padding:0 2%;	
}
.consulta{
	width:100%;
	height:200px;
	border:1px solid #CCCCCC;
	padding:2%;
}
.benviar{
	width:100%;
	height:46px;
	line-height:46px;
	background:#0b72b5;
	color:#FFFFFF;
	text-align:center;
	border:none;
	font-family:"Oswald", Helvetica, Arial, sans-serif;
	cursor:pointer;
}
.benviar:hover{
	background:#489594;/*#1e9142;*/	
}
#cajadatos p{
	font-size:13px;
	line-height:20px;
	margin:6px 0;	
}
#cajadatos h3{
	width:100%;
	height:46px;
	display:block;
	font-size:18px;
	line-height:46px;
	margin:6px 0;
	background:#6B1818;/*#1e9142;*/
	color:#FFFFFF;
	font-family:"ChaletParisNineteenSixtyRg", Helvetica, Arial, sans-serif;
	text-align:center;	
}
#mapa{
	width:100%;
	height:280px;
	min-height: 400px;
	border:6px solid #001d7e;	
}
/****************************************************/
/****************    Estilos Mapa de Sitio   ********/
/****************************************************/
#mapasitio{
	width:80%;
	margin:auto;
}
.cajatitulo{
	width:100%;
	background:#489594;
	padding:6px;
	position:relative;
	margin-bottom:25px;
}
.cajatitulo img{
	position:absolute;
	bottom:-28%;
	left:10%;
}
.cajatitulo h3{
	font-family:"", Helvetica, Arial, sans-serif;
	font-size:16px;
	color:#FFF;
	font-weight:normal;
	letter-spacing:1px;
}
#mapasitio ul{
	list-style:square;	
}
#mapasitio ul li a{
	display:block;
	padding:6px 0;
}
#mapasitio ul li a:hover{
	color:#001d7e;
}
/****************************************************/
/****************    Estilos Ubicanos        ********/
/****************************************************/
#cajaubicanos{
}
#cajaubicanos p{
	margin:6px 0;
}
.cajamapa{
	border:6px solid #d9d9d9;
	width:100%;
	height:450px;
}
/****************************************************/
/****************    Cotizaciones            ********/
/****************************************************/
#fcotizacion{
	background:#FFFFFF;
	padding:2%;	
}
#fcotizacion h2{
	font-family:"Oswald", Helvetica, Arial, sans-serif;
	font-size:24px;
	display:block;
	border-bottom:2px dotted #001d7e;
	padding:10px 0;
	margin-bottom:20px;
	color:#1e9142;
}
.campoencabezado{
	width:100%;
	height:36px;
	line-height:36px;
	border:1px solid #CCCCCC;
	padding:0 3%;	
}
.consultacotiza{
	width:100%;
	height:150px;
	border:1px solid #CCCCCC;
	padding:3%;	
}
.bcotizar{
	width:100%;
	height:36px;
	display:block;
	line-height:36px;
	background:#1e9142;	
	border:none;
	color:#FFFFFF;
	text-align:center;
	font-family:"Oswald", Helvetica, Arial, sans-serif;
	font-size:15px;
	cursor:pointer;
}
.bcotizar:hover{
	background:#001d7e;	
}
/*--ScrollUp--*/
#scrollUp{
	width:60px;
	height:60px;
	bottom:40px;
	right:0px;
	background:url(../imagenes/scrollup.png);
}


/*.video-container {
    position: relative;
    /*margin-bottom: 20px;*/
    /*padding-top: 56.25%;*/

.video-container iframe {
	position:relative;
	top: 0px;
	left: 0px;
	width: 360px;
	height: 200px;
}


/****************************************************/
/****************    Estilos para 1024     **********/
/****************************************************/
@media only screen and (max-width:1024px){
	/****************************************************/
	/**************** Estilos para la cabecera **********/
	/****************************************************/
	#cajacabecera{
		padding:0 6px;
	}
	
}
/****************************************************/
/****************    Estilos para 800      **********/
/****************************************************/
@media only screen and (max-width:800px){
	/****************************************************/
	/**************** Estilos para el menu     **********/
	/****************************************************/
	#cajamenu{
		background:#FFFFFF;
		border:none;
	}
	#mmovil{
	background:#FFFFFF;
	background:linear-gradient(#FFFFFF, #eeeeee);
	border-bottom:1px solid #CCCCCC;
	border-top:1px solid #CCCCCC;
		
		display:block;
		font-size:30px;
		cursor:pointer;
		text-align:right;
		color:#0b72b5;/*#001d7e;*/
		padding:6px;
	
	}
	#menu{
		
		position:absolute;
		left:0;
		transform:translateX(-100%);
		transition:all 0.3s;
		z-index:9999;
	}
	#menu ul{
		background:#FFFFFF;
		/*Flex*/
		flex-direction:column;
		align-items:flex-start;
	}
	#menu ul li{
		width:100%;
	
	}
	
	#menu ul li:first-child a{
		border-left:none;
	}
	#menu ul li a{
		border-right:none;
		border-bottom:1px solid #CCCCCC;
		text-align:left;
	}
	#menu ul li a:hover{
		border-bottom:1px solid #CCCCCC;
	}
	#btn-menu:checked ~ #menu{
		transform:translateX(0%);
	}
	
	/****************************************************/
	/**************** Estilos para el proyecto **********/
	/****************************************************/
	.cajaproyectos{
		/*Flex*/	
		flex-wrap:wrap;
	}
	.cajas{
		width:45%;
	}
	/****************************************************/
	/**************** Estilos para servicios   **********/
	/****************************************************/
	.servicios{
		width:45%;
	}
	/****************************************************/
	/**************** Estilos para proyectos   **********/
	/****************************************************/
	.proyectos{
		width:50%;	
	}
	
	/****************************************************/
	/****************   Pagina Servicios       **********/
	/****************************************************/
	#contenedorservicios{
		/*Flex*/
		display:flex;
		flex-direction:row;
		justify-content:space-between;
		flex-wrap:wrap;	
	}
	#contenedorservicios figure{
		width:45%;
	}
	/****************************************************/
	/**************  Pagina Detalle Servicios  **********/
	/****************************************************/
	#cajadetalleservicios{
		/*Flex*/
		flex-direction:column;
	}
	#descripcionservicios{
		width:100%;
		padding-right:0;
		
		/*Flex*/
		order:2;
	}
	#opcioneservicios{
		width:100%;
		padding-left:0;
		border-left:none;
		
		/*Flex*/
		order:1;
	}
	
	/****************************************************/
	/****************    Estilos para Contacto   ********/
	/****************************************************/
	#contenedorcontacto{
		/*Flex*/	
		flex-direction:column;
	}
	#fcontacto{
		width:100%;	
		margin-bottom:20px;
	}
	#cajadatos{
		width:100%;	
	}
	
}


/****************************************************/
/****************    Estilos para 603      **********/
/****************************************************/
@media only screen and (max-width:603px){
	/****************************************************/
	/**************** Estilos para pie pagina  **********/
	/****************************************************/
	#piepagina{
		/*Flex*/
		flex-direction:column
	}
	#piepagina p{
		text-align:center;
	}
	#piepagina .socialespie li:first-child{
		display:none;
	}
	/****************************************************/
	/****************    Detalle Proyectos     **********/
	/****************************************************/
	#cajabannerpro{
		/*Flex*/
		flex-direction:column;	
	}
	#cajaimagenes{
		width:100%;
		margin-bottom:10px;
	}
	#datosproyecto{
		width:100%;	
	}
	
	#cajadescripcion{
		/*Flex*/	
		flex-direction:column;
	}
	#opcionespro{
		width:100%;
		border-right:none;
		padding-right:0;
	}
	#descripcion{
		width:100%;
		padding-left:0;	
	}
	
}



/****************************************************/
/****************    Estilos para 533      **********/
/****************************************************/
@media only screen and (max-width:533px){
	/****************************************************/
	/**************** Estilos para servicios   **********/
	/****************************************************/
	.cajaservicios{
		/*Flex*/	
		flex-direction:column;
		align-items:center;
	}
	.servicios{
		width:90%;
	}
	
}
/****************************************************/
/****************    Estilos para 480      **********/
/****************************************************/
@media only screen and (max-width:480px){
	/****************************************************/
	/**************** Estilos para el proyecto **********/
	/****************************************************/
	.titulos{
		font-size:16px;
		text-align:center;	
	}
	.cajaproyectos{
		/*Flex*/	
		flex-direction:column;
		align-items:center;
	}
	.cajas{
		width:90%;
	}
	/****************************************************/
	/**************** Estilos para proyectos   **********/
	/****************************************************/
	#contenedorproyectos{
		/*Flex*/
		flex-direction:column;
	}
	.proyectos{
		width:90%;	
		margin:auto;
	}
	
	/****************************************************/
	/****************   Pagina Servicios       **********/
	/****************************************************/
	#contenedorservicios{
		/*Flex*/
		flex-direction:column;
	}
	#contenedorservicios figure{
		width:90%;
		margin:auto;
		margin-bottom:15px
	}

}
/****************************************************/
/****************    Estilos para 360      **********/
/****************************************************/
@media only screen and (max-width:360px){
	/****************************************************/
	/**************** Estilos para la cabecera **********/
	/****************************************************/
	#cabecera{	
		/*Flex*/
		flex-direction:column;
	}
	#socialessup{
		margin-top:6px;
	}
	#socialessup li:first-child{
		display:none;
	}
	
}

/****************************************************/
/****************    Estilos para 320      **********/
/****************************************************/
@media only screen and (max-width:320px){
	
	
}