@charset "utf-8";
/* CSS Document
font-family: 'Roboto', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Lato', sans-serif;
font-family: 'Saira Semi Condensed', sans-serif;
font-family: 'Roboto Condensed', sans-serif;
font-family: 'Slabo 27px', serif;
font-family: 'Oswald', sans-serif;
font-family: 'Roboto Slab', serif;
font-family: 'Raleway', sans-serif;
font-family: 'Open Sans Condensed', sans-serif;
font-family: 'Saira Extra Condensed', sans-serif;
font-family: 'Anton', sans-serif;
font-family: 'Fjalla One', sans-serif;
font-family: 'Archivo Narrow', sans-serif;
font-family: 'Play', sans-serif;
font-family: 'Francois One', sans-serif;
font-family: 'Archivo Black', sans-serif;
font-family: 'Rajdhani', sans-serif;
 */
body{
	margin:0;
	background:rgba(0,0,0,0.7);
}
*{
	box-sizing:border-box;	
}
p, h1, h2, h3, h4{
	font-family: 'Raleway', sans-serif;
	font-size:14px;
	color:#000000;
	margin:6px;
	font-weight:normal;	
}
h1{
	font-family: 'Fjalla One', sans-serif;
	font-size:24px;	
}
h2{
	font-family: 'Fjalla One', sans-serif;
	font-size:20px;	
}
h3{
	font-family: 'Fjalla One', sans-serif;
	font-size:18px;	
}
h4{
	font-family: 'Fjalla One', sans-serif;
	font-size:16px;	
}
a{
	font-family: 'Raleway', sans-serif;
	text-decoration:none;
	color:#000000;	
}
a img{
	border:none;	
}
ul, ol{
	font-size:14px;
	color:#000000;
	font-family: 'Raleway', sans-serif;
}

/*********************   SCROLLUP    **********************/
#scrollUp{
	width:59px;
	height:59px;
	bottom:10px;
	right:10px;
	background:url(../imagenes/flecha-arriba.png);	
}
/**********************************************************/
/*********************    PRECARGA   **********************/
/**********************************************************/
#precarga{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:#2B2D37;
	z-index:10500;	
}
#iconoprecarga{
	width:200px;
	height:200px;
	position:absolute;
	left:50%;
	top:50%;
	margin:-100px 0 0 -100px;	
}
#iconoprecarga i{
	font-size:150px;
	font-weight:normal;
	color:#B0D355;
	text-align:center;	
}
#iconoprecarga p{
	color:#FFFFFF;
	text-align:center;
	letter-spacing:15px;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size:30px;
	margin-left:15px;	
}

/***********************************************************/
/********************* ESTILOS BANNER  *********************/
/***********************************************************/
#banner{
	width:100%;
	height:auto;

}
#cajabanner{
	width:100%;
	height: 720px;
	margin:auto;
	background:rgba(0,0,0,0.4);
	padding:1%;	
}
#cajalogo{
	width: 875px;
	height:auto;
	margin: auto;
	z-index:999;
}
#cajalogo img{
	width: 875px;
	height:273px;
	display: flex;
	margin:auto;
	margin-top:70px;
}
#cajaslogan{
	width:100%;
	height:auto;
	display:flex;
	margin: auto;
	margin-top: 220px;
	position:fixed;
	/*border: 1px solid rgba(255,255,255,0.5);
	box-shadow: 0 0 15px #fff;*/
}
#cajaslogan h1{
	font-family: 'Anton', sans-serif;
	text-align: center;
	color: #fff;
	font-size: 60px;
	line-height:70px;
	font-weight:normal;
	text-shadow: 5px 5px 5px black;
	margin:auto;
}
/*#cajaslogan h1 .t1{
	font-family: 'Open Sans Condensed', sans-serif;
	color: #fff;
	font-size:50px;
	font-weight:normal;
}*/
#cajaslogan h1 .t2{
	width: 60%;
	font-family: 'Anton', sans-serif;
	font-size:60px;
	font-weight:bold;
	line-height:70px;
	text-align: center;
	letter-spacing:1px;
	margin:auto;
	display:block;
}
#cajaslogan p{
	font-family: 'Raleway', sans-serif;
	font-size:14px;
	display: normal;
	font-weight:normal;
	color: #fff;
	margin-top:-10px;
	letter-spacing:1px;
}
#cajaslogan a{
	width: 280px;
	height: 60px;
	display: block;
	margin: 15px auto;
	background:#FF0004;
	line-height: 55px;
	text-align: center;
	font-family: 'Oswald', sans-serif;
	font-size: 20px;
	font-weight:bold;
	color: #fff;
	border-radius: 60px;
	transition: all 0.5s;
	border:2px solid #fff;
}
#cajaslogan a:hover{
	background:none;
}

/**********************************************************/
/*********************    CABECERA   **********************/
/**********************************************************/
#cabecera{
	width:100%;
	padding:10px 15px;
	position:fixed;
	z-index:9999;	
}
#cabecera a img{
	width:230px;
	height:137px;
	display:flex;
	margin:auto;
	margin-top:30px;	
}
.sociales{
	margin:0;
	padding:0;
	list-style:none;
	width:50px;
	position:fixed;
	left:0;
	top:30%;
	z-index:1500;	
}
/*.sociales li a{
	width:50px;
	height:50px;
	display:block;
	line-height:50px;
	text-align:center;
	background:#3a589b;
	color:#FFFFFF;
	font-size:22px;
}*/
.sociales li a.tw{
	background:#598dca;	
}
.sociales li a.li{
	background:#4866a8;	
}
.sociales li a.yu{
	background:#cf3427;	
}
.iconomenu{
	width:50px;
	height:50px;
	line-height:50px;
	text-align:center;
	font-size:30px;
	display:block;
	background:#FFFFFF;
	color:#000000;
	position:fixed;
	right:15px;
	top:15px;
	z-index:10001;
	transition:all 0.5s;
}
.iconomenu:hover{
	background:#CC080B; 
	color:#FFFFFF;
}
/**********************************************************/
/*********************      MENU     **********************/
/**********************************************************/
#contenedormenu{
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	/*background:rgba(43,45,55,0.95);*/
	background:rgba(0,0,0,0.8);
	z-index:10000;
}
#cajamenu{
	width:40%;
	height:auto;
	margin:auto;
	margin-top:1%;	
}
#cajamenu img{
	width:230px;
	height:137px;
	display:block;
	margin:auto;
	margin-top:40px;
	margin-bottom:50px;
}
.menu{
	margin:0;
	padding:0;
	list-style:none;	
}
.menu li a{
	width:100%;
	height:60px;
	line-height:60px;
	display:block;
	border:1px solid #CC080B;  
	text-align:center;
	font-family: 'Oswald', sans-serif;
	font-size:26px;
	color:#FFFFFF;
	margin-bottom:10px;
	transition:all 0.5s;	
}
.menu li a:hover{
	background:#CC080B; 
}
#cajamenu p{
	text-align:center;
	color:#FFFFFF;		
}
.socialesmenu{
	margin:0;
	padding:0;
	list-style:none;
	display:flex;
	flex-direction:row;
	justify-content:center;	
}
.socialesmenu li{
	margin-right:6px;	
}
.socialesmenu li a{
	width:60px;
	height:60px;
	line-height:60px;
	text-align:center;
	display:block;
	background:#CC080B;
	color:#FFFFFF;
	font-size:24px;
	transition:all 0.5s;	
}
.socialesmenu li a:hover{
	background:#FFFFFF;
	color:#000000;   /*#2B2D37;	*/
}
/**********************************************************/
/****************  PRESENTACION HOME  *********************/
/**********************************************************/
#cajapresentacion{
	/*min-height:640px;
	position:relative;
	border-bottom:10px solid #6D7287;
	background:url(../imagenes/colina.png) no-repeat left bottom;
	overflow:hidden;*/
	height:850px;
}
#presentacion{
	width:100%;
	max-width:560px;
	margin:auto;
	margin-top:8%;
}
#presentacion h1{
	font-family: 'Fjalla One', sans-serif;
	font-size:40px;
	text-align:center;
	color:rgba(255,255,255,0.7);
}
#presentacion h1 .t2{
	color:#b0d355;
}
#presentacion h1 .t3{
	color:#6ac0ad;
}
#presentacion p{
	font-family: 'Open Sans Condensed', sans-serif;
	font-size:22px;
	text-align:center;
	color:rgba(255,255,255,0.7);
	line-height:26px;	
}
/**********************************************************/
/**********  PRESENTACION PIE DE PAGINA  ******************/
/**********************************************************/
.stop{
	width:55px;
	height:55px;
	display:block;
	line-height:55px;
	margin:auto;
	margin-bottom:15px;
	color:#FFFFFF;
	background:#6AC0AD;
	text-align:center;
	font-size:26px;
	border-radius:100%;
	transition:all 0.5s;
}
.stop:hover{
	background:#B0D355;	
}
#piepagina{
	background:#2b2d37;
	padding:1% 0;	
}
#piepagina h2{
	font-family: 'Raleway', sans-serif;
	font-size:16px;
	line-height:14px;
	text-align:center;
	color:#fff;
	font-weight:normal;    /*#b1d15d;*/	
}
/*#piepagina h2 .p2{
	color:#fff;
}
#piepagina h2 .p3{
	color:#419ce9;
}*/
#piepagina p{
	font-family: 'Raleway', sans-serif;
	font-size:12px;
	text-align:center;
	color:#fff;
}
.socialespie{
	margin:0;
	padding:0;
	list-style:none;
	display:flex;
	flex-direction:row;
	justify-content:center;
}
.socialespie li a{
	width:50px;
	height:50px;
	display:block;
	line-height:50px;
	text-align:center;
	background:#CC080B; 
	color:#fff;
	font-size:22px;
	margin:3px;
}
.socialespie li a:hover{
	background:#fff;
	color:#2b2d37;
}

.socialespie li a.tw{
	background:#CC080B; 
}
.socialespie li a.tw:hover{
	background:#fff;
	color:#2b2d37;
}
.socialespie li a.li{
	background:#CC080B; 
}
.socialespie li a.li:hover{
	background:#fff;
	color:#2b2d37;
}
.socialespie li a.yu{
	background:#CC080B; 
}
.socialespie li a.yu:hover{
	background:#fff;
	color:#2b2d37;
}

/*.socialespie li a{
	width:50px;
	height:50px;
	display:block;
	line-height:50px;
	text-align:center;
	background:#3a589b;
	color:#FFFFFF;
	font-size:22px;
}
.socialespie li a.tw{
	background:#598dca;	
}
.socialespie li a.li{
	background:#4866a8;	
}
.socialespie li a.yu{
	background:#cf3427;	
}*/
/**********************************************************/
/**************   ACERCA DE NOSOTROS   ********************/
/**********************************************************/
#cuerpo{
	width:100%;
	max-width:1100px;
	margin:auto;
	padding:180px 0 220px 0;
}
.titulos{
	padding:15px 0;
	background-size:300px;
	margin:30px 0;
}
.titulos h1{
	font-family: 'Open Sans', sans-serif;
	font-size:30px;
	line-height:30px;
	text-align:center;
	color:#fff;
	font-weight:bold;
}
#cajanosotros{
	display:block;
	flex-direction:column;
	margin:auto;
}
#cajanosotros div{
	width:80%;
	margin:auto;
	padding:auto;
}
#cajanosotros div p{
	font-family: 'Open Sans', sans-serif;
	font-size:18px;
	line-height:20px;
	text-align:justify;
	color:#fff;
	margin-bottom:20px;
}
#cajadatos{
	display:flex;
	flex-direction:row;	
}
#cajadatos div{ 
	width:33.33%;
	padding:1%;
}
#cajadatos div h2{
	font-family: 'Open Sans', sans-serif;
	text-align:center;
	color:#fff;
	font-weight:bold;
}
#cajadatos div p{
	font-family: 'Open Sans', sans-serif;
	font-size:18px;
	line-height:20px;
	text-align:center;
	color:#fff;
}
/**********************************************************/
/*********************    SERVICIOS  **********************/
/**********************************************************/
#cajaservicios{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	margin-bottom:30px;	
}
.servicios{
	width:50%;
	position:relative;
	overflow:hidden;	
}
.servicios img{
	width:100%;
	height:auto;
	display:block;
}
.servicios div{
	width:100%;
	height:100%;
	background:#393a44;
	padding:30% 5% 0 5%;
	position:absolute;
	left:0;
	top:101%;
	transition:all 0.5s;
}
.servicios:hover div{
	top:0;	
}
.servicios div h2{
	font-family: 'Open Sans', sans-serif;
	color:#b0d355;
	font-size:24px;
	text-align:center;
}
.servicios div p{
	color:#FFFFFF;
	text-align:center;
	line-height:22px;
}
.servicios div a{
	width:200px;
	height:45px;
	display:block;
	line-height:45px;
	margin:auto;
	background:#6ac0ad;
	color:#FFFFFF;
	text-align:center;
	font-family: 'Open Sans', sans-serif;
	font-size:16px;
	transition:all 0.5s;
}
.servicios div a:hover{
	background:#438F7E;	
}
/**********************************************************/
/*********************    1024px   ************************/
/**********************************************************/
@media only screen and (max-width:1024px){
	/******************************************************/
	/*********************    CABECERA   ******************/
	/******************************************************/
	#cabecera{
		position:static;
	}
	.sociales{
		display:none;	
	}
	/******************************************************/
	/****************  PRESENTACION HOME  *****************/
	/******************************************************/
	#cajapresentacion{
		min-height:640px;
		background-size:2000px;
	}
	#presentacion{
		width:90%;
		margin-top:10%;
	}
	#presentacion h1{
		font-size:30px;
	}
	#presentacion p{
		font-size:18px;
		line-height:normal;	
	}
	#nave{
		max-width:100px;
		top:9%;
	}
	#nubeizq{
		max-width:200px;
		top:4%;		
	}
	#nubeder{
		max-width:245px;
		top:30%;		
	}
	#nubechica{
		max-width:60px;
		top:70%;		
	}
	#sol{
		max-width:80px;
		top:50%;		
	}
	#arboles{
		width:1000px;
		margin-left:-500px;	
	}
	#arboles img{
		width:100%;
		height:auto;
		display:block;	
	}
	#cerro{
		max-width:220px;
		margin-left:-110px;
	}
	#ardilla{
		max-width:90px;
		left:10%;		
	}
	#ave{
		max-width:102px;
		position:absolute;
		left:57%;
		bottom:6%;		
	}
	
	
}
/**********************************************************/
/*********************     800px   ************************/
/**********************************************************/
@media only screen and (max-width:800px){
	/*****************   SCROLLUP    **********************/
	#scrollUp{
		width:40px;
		height:40px;
		background:url(../imagenes/flecha-arriba.png);	
		background-size:cover;
	}
	/******************************************************/
	/****************  PRESENTACION HOME  *****************/
	/******************************************************/
	#ave{
		max-width:102px;
		left:60%;
		bottom:6%;		
	}
	/*****************************************************/
	/**************   ACERCA DE NOSOTROS   ***************/
	/*****************************************************/
	#cuerpo{
		padding:0 0 150px 0;	
	}
	.titulos h1{
		font-size:40px;
	}
	#cajanosotros{
		width:80%;
		margin:auto;
		flex-direction:column;	
	}
	#cajanosotros div{
		width:100%;
	}
	#cajadatos{
		width:80%;
		margin:auto;
		flex-direction:column;	
	}
	#cajadatos div{ 
		width:100%;
	}
	/**********************************************************/
	/*********************    SERVICIOS  **********************/
	/**********************************************************/
	#cajaservicios{
		flex-direction:column;
		width:80%;
		margin:auto;
	}
	.servicios{
		width:100%;	
	}
	
	
}
/**********************************************************/
/*********************     603px   ************************/
/**********************************************************/
@media only screen and (max-width:603px){
	
	
}
/**********************************************************/
/*********************     533px   ************************/
/**********************************************************/
@media only screen and (max-width:533px){
	
	
}
/**********************************************************/
/*********************     480px   ************************/
/**********************************************************/
@media only screen and (max-width:480px){
	/**********************************************************/
	/*********************    CABECERA   **********************/
	/**********************************************************/
	#cabecera{
		padding:6px 10px;
	}
	#cabecera img{
		width:100px;
		height:auto;
		display:block;	
	}
	.iconomenu{
		width:45px;
		height:45px;
		line-height:45px;
		font-size:24px;
		top:12px;
	}
	/******************************************************/
	/*********************      MENU     ******************/
	/******************************************************/
	#cajamenu{
		width:90%;
	}
	#cajamenu img{
		width:125px;
	}
	.menu li a{
		height:50px;
		line-height:50px;
	}
	/******************************************************/
	/****************  PRESENTACION HOME  *****************/
	/******************************************************/
	#cajapresentacion{
		min-height:430px;
		background-size:1000px;
	}
	#presentacion{
		margin-top:8%;
	}
	#presentacion h1{
		font-size:20px;
	}
	#presentacion p{
		font-size:15px;
	}
	#nave{
		max-width:70px;
		top:37%;
	}
	#nubeizq{
		max-width:150px;
		top:4%;		
	}
	#nubeder{
		max-width:190px;
		top:30%;		
	}
	#nubechica{
		max-width:45px;
		top:70%;
		left:15%;		
	}
	#sol{
		max-width:60px;
		top:50%;		
	}
	#arboles{
		width:700px;
		margin-left:-350px;	
	}
	#cerro{
		max-width:150px;
		margin-left:-75px;
	}
	#ardilla{
		max-width:50px;
		left:7%;		
	}
	#ave{
		max-width:50px;
		left:59%;
		bottom:10%;		
	}
	/******************************************************/
	/**********  PRESENTACION PIE DE PAGINA  **************/
	/******************************************************/
	#piepagina h2{
		font-size:24px;
	}
	/*****************************************************/
	/**************   ACERCA DE NOSOTROS   ***************/
	/*****************************************************/
	#cuerpo{
		padding:0 0 90px 0;	
	}
	.titulos{
		background-size:200px;
	}
	.titulos h1{
		font-size:30px;
	}
	/**********************************************************/
	/*********************    SERVICIOS  **********************/
	/**********************************************************/
	#cajaservicios{
		width:90%;
	}
	.servicios div{
		padding:20% 5% 0 5%;
	}
}
/**********************************************************/
/*********************     360px   ************************/
/**********************************************************/
@media only screen and (max-width:360px){
	#ave{
		left:61%;
	}
	.servicios div{
		padding:10% 5% 0 5%;
	}
	.servicios div p{
		line-height:normal;
	}
}