@import url('https://fonts.googleapis.com/css?family=Elsie:400|Montserrat:400,700|Rajdhani:300,400,500|Syncopate:400,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
/*
    font-family: 'Syncopate', sans-serif;
    font-family: 'Montserrat', sans-serif;
    font-family: 'Elsie', cursive;
    font-family: 'Rajdhani', sans-serif;
    font-family: 'Open Sans', sans-serif;
*/

@font-face {
    font-family: 'arvil_sansregular';
    src: url('fonts/arvil_sans-webfont.woff2') format('woff2'),
         url('fonts/arvil_sans-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body{
	margin: 0 auto;
}

.logo{
	position: fixed;
	background-color: #FFF;
	top: 0px;
	width: 100px;
	padding: 5px;
	border-bottom-right-radius: 2px;
	border-bottom-left-radius: 2px;
	z-index: 10;
	left: calc((100% - 100px)/2);
}

.seccion{
	position: relative;
	display: inherit;
	vertical-align: top;
	width:100%;
	overflow: hidden;
}
.boton-menu{
	position: fixed;
	right: 0px;
	background-color: #FFF;
	width: 50px;
	height: 50px;
	z-index: 10;
	border-radius: 2px;
	cursor: pointer;
}
.linea{
	position: relative;
	width: 60%;
	margin-left: 20%;
	height: 3px;
	margin-top: 5px;
	border-radius: 2px;
	background-color: #000;
}
.linea:first-child{
	margin-top: 15px;
	animation-duration: .5s;
	animation-fill-mode: forwards;
}
.linea:nth-child(3){
	animation-duration: .5s;
	animation-fill-mode: forwards;
}

#home{
	height: 57em;
	background-image: url(images/banner_prin_1.jpg);
	background-size: cover;
}
.titulo-home{
	position: relative;
	color:#FFF;
	margin: 0px;
	font-family: 'Syncopate', sans-serif;
	font-size: 3.5em;
	text-align: left;
	padding-left: 4%;
	line-height: .8;
	padding-top: 20%;
	text-shadow: 0px -1px 2px rgba(0, 0, 0, 1);
}

.menu{
	position: fixed;
	margin: 0px;
	padding: 0px;
	top: 0px;
	right: 0%;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,.95);
	list-style: none;
	z-index: 2;
	display: none;
}
.liga-menu{
	position: relative;
	font-family: 'Montserrat', sans-serif;
	font-family: 'Syncopate', sans-serif;
	color: #A6BA05;
	font-size: 3em;
	padding: 0px;
	margin: 0px;
	font-weight: 700;
	letter-spacing: -1px;
	/*text-shadow: 0px -1px 2px rgba(0, 0, 0, 1);*/
	line-height: 1.2;
	margin-top: .8em;
	text-align: center;
	cursor: pointer;
	animation-fill-mode: forwards;
	animation-name: interletrado-out;
	animation-duration: .5s;
}
.primera-liga{
	margin-top: 15%;
}
.liga-menu:hover{
	animation-fill-mode: forwards;
	animation-name: interletrado;
	animation-duration: .5s;
}
#nosotros{
	height: 42.2em;
	overflow: hidden;
}
.imagen-nosotros{
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 65%;
}
.cuadros{
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 35%;
}
.cuadro{
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 90%;
	padding-right: 10%;
	height: 9.69em;
	font-size: 1.2em;
	padding-top: 2.1em;
	background-position: center center;
	background-size: cover;
	animation-fill-mode: forwards;
	animation-name: zoom-out;
	animation-duration: .5s;
	cursor: pointer;
}
.texto-cuadro{
	position: relative;
	padding: 0px;
	margin: 0px;
	border-top:solid 1px #FFF;
	border-bottom:solid 1px #FFF;
	color: #FFF;
    font-family: 'Elsie', cursive;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 1);
    animation-fill-mode: forwards;
	animation-name: interletrado-out;
	animation-duration: .5s;
}
.titulo-cuadro{
	position: relative;
	width: 80%;
	margin-left: 20%;
	color: #FFF;
	font-family: 'arvil_sansregular';
	font-size: 3em;
	padding-top: 0px;
	margin-top: 0px;
	animation-fill-mode: forwards;
	animation-name: rotacion-out;
	animation-duration: 1s;
}
.cuadro:hover{
	animation-fill-mode: forwards;
	animation-name: zoom;
	animation-duration: .5s;
	cursor: pointer;
}
.cuadro:hover .titulo-cuadro{
	animation-fill-mode: forwards;
	animation-name: rotacion;
	animation-duration: 1s;
}
.cuadro:hover .texto-cuadro{
	animation-fill-mode: forwards;
	animation-name: interletrado;
	animation-duration: .5s;
}
#foto-mision{
	background-image: url(images/quienes_somos_boton1.jpg);
}
#foto-vision{
	background-image: url(images/quienes_somos_boton2.jpg);
}
#foto-valores{
	background-image: url(images/quienes_somos_boton3.jpg);
}
.imagen-nosotros img{
	position: relative;
	width: 100%;
}

.texto-quienes{
	position:absolute;
	top: 40%;
	left: 0px;
	width: 70%;
	padding-left: 15%;
	padding-left: 15%;
	color: #FFF;
	font-size: 1.5em;
	font-family: 'Rajdhani', sans-serif;
	display: none;
}
#texto-mision{
	display: block;
	text-align: center;
	font-size: 2em;
}
#texto-vision{
	font-size: 1.7em;
	top: 20%;
}
#texto-valores{
	font-size: 2em;
	width: 40%;
	left: 20%;
	top: 35%;
}
.banner{
	position: relative;
	width: 100%;
	display: inline-block;
	vertical-align: top;
}
.banner-contenedor{
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 100%;
	height: 40em;
	background-image: url(images/img_quienes_inferior.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	animation: fondo 10s infinite;
	animation-fill-mode: forwards;
}
.titulo-banner{
	position: absolute;
	color: #FFF;
	font-family: 'Montserrat', sans-serif;
	font-family: 'Elsie', cursive;
	font-family: 'Syncopate', sans-serif;
	font-size: 	3em;
	font-weight: 700;
	text-transform: uppercase;
	width: 70%;
	padding-right: 15%;
	padding-left: 15%;
	text-shadow: 0px -1px 2px rgba(0, 0, 0, 1);
	text-align: center;
	padding-top: 3em;
	line-height: 1.5;
}
#productos{
	height: 57em;
}
.imagen-productos-1{
	position: absolute;
	top: 0px;
	/*left: 0px;*/
	left: -80%;
	width: 75%;
}
.imagen-productos-2{
	position: absolute;
	/*top:30%;*/
	top:-80%;
	left: 50%;
	width: 25%;
}

.texto-productos-2{
	position: absolute;
	width: 20%;
	padding-right: 2.5%;
	padding-left: 2.5%;
	font-size: 1.3em;
	color: #A6BA05;
	right: 0px;
	top: 5%;
    font-family: 'Montserrat', sans-serif;
    display: none;
}
.cuadro-productos{
	position: absolute;
	left: 0px;
	/*top: 50%;*/
	top: 150%;
	height: 50%;
	width: 50%;
}
.frase-productos{
	position: relative;
	padding: 0px;
	margin: 0px;
	padding-top: 1.5em;
	font-size: 1.3em;
	color: #6C8411;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	width: 35%;
	padding-left: 15%;
}
.titulo-productos{
	position: relative;
	padding: 0px;
	margin: 0px;
	margin-top: .1em;
	font-size: 4em;
	line-height: 1;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	letter-spacing: -.05em;
	width: 35.5%;
	padding-left: 14.5%;
}
.texto-productos-1{
	position: absolute;
	width: 65%;
	height: 45%;
	padding: 2.5%;
	font-size: 1.3em;
	background-color: #A6BA05;
	left: 0px;
	color: #FFF;
	bottom: 0px;
    font-family: 'Montserrat', sans-serif;
}
#historia{
	height: 75em;
}
.foto-historia-1{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 62.5%;
	height: 30em;
	background-image: url(images/historia_1.jpg);
	background-position: center center;
	background-size: 100%;
	animation: fondo 10s infinite;
	animation-fill-mode: forwards;
}
.titulo-historia{
	position: absolute;
	background-color: #FFF;
	top: 2%;
	left: 60%;
	font-family: 'Syncopate', sans-serif;
	font-size: 2.5em;
	line-height: .9;
	color: #A6BA05;
	padding: .5em;
}
.texto-historia-1{
	position: absolute;
	right: 6%;
	top: 19.5%;
	width: 30%;
	color: #788112;
	font-family: 'Montserrat', sans-serif;
	font-family: 'Open Sans', sans-serif;
	font-size: .8em;
}
.texto-historia-2{
	position: absolute;
	right: 5%;
	top: 41%;
	width: 50%;
	color: #788112;
	font-family: 'Montserrat';
	font-family: 'Open Sans', sans-serif;
	font-size: .8em;
	z-index: 2;
}
.mapa{
	position: absolute;
	left: 0px;
	top: 40%;
	width: 50%;
	height: 39em;
	background-image: url(images/mapa_mx.gif);
	background-position: center center;
	background-size: 100%;
	background-repeat: no-repeat;
}
.foto-historia-2{
	position: absolute;
	width: 50%;
	height: 25em;
	bottom: 0px;
	right: 0px;
	background-image: url(images/chihuahua_1.jpg);
	background-position: center center;
	background-size: 100%;
	animation: fondo 10s infinite;
	animation-fill-mode: forwards;
}
#beneficios{
	height: 57em;
	padding-top: 3em;
}
.beneficios{
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 50%;
}
.titulo-beneficios-1{
	position: relative;
	font-family: 'Syncopate', sans-serif;
	color:#788112;
	font-size: 4em;
	line-height: 1;
	margin: 0px;
	padding: 0px;
	width: 80%;
	padding-right: 10%;
	padding-left: 10%;
}
.titulo-beneficios-2{
	position: relative;
	line-height: 1;
	font-family: 'Syncopate', sans-serif;
	color: #A6BA05;
	font-size: 2.5em;
	width: 64%;
	margin: 0px;
	padding: 0px;
	padding-right: 10%;
	padding-left: 10%;
	text-align: right;
	padding-bottom: 1em;
}
.chava{
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 50%;
	height: 50em;
	background-image: url(images/chava.jpg);
	background-position: center center;
	background-size: 100%;
	animation: fondo 10s infinite;
	animation-fill-mode: forwards;
}
.beneficio{
	position: relative;
	width: 85%;
	padding-left: 5%;
}
.titulo-beneficio{
	position: relative;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	padding: 0px;
	margin: 0px;
	font-size: .85em;
	color: #788112;
}
.texto-beneficio{
	position: relative;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	color: #A6BA05;
	font-size: .85em;
}
#proceso{
	height: 55em;
	background-color: #FFA;
}

.slider{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 500%;
	height: 100%;
	background-color: #FA0;
}
.item{
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 20%;
	height: 100%;
	/*background-image: url(images/proceso_1.jpg);*/
	background-position: top center;
	background-size: 100%;
}
.titulo-item{
	position: absolute;
	left: 15%;
	width: 70%;
	top: 23%;
	font-size: 9em;
	color: #FFF;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	line-height: .9;
	/*text-shadow: 0px -1px 2px rgba(0, 0, 0, 1);*/
}
.proceso{
	position: absolute;
	bottom: 5em;
	right: 2%;
	width: 35%;
	height: 20%;
	background-color: rgba(166,168,5,.5);
}
.titulo-proceso{
	position: relative;
	width: 80%;
	padding-left: 10%;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.8em;
	padding-top: .3em;
	padding-bottom: .3em;
	margin: 0px;
	text-align: left;
	font-weight: 700;
	color: #FFF;
}
.texto-proceso{
	position: relative;
	width: 90%;
	height: 100%;
	padding-left: 5%;
	padding-right: 5%;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	padding-top: 1em;
	color: #313F04;
	background-color: #FFF;
}
.flecha-izquierda{
	position: absolute;
	left: 2%;
	top: 45%;
	width: 3em;
	height: 5em;
	z-index: 2;
	cursor: pointer;
}
.flecha-derecha{
	position: absolute;
	right: 2%;
	top: 45%;
	width: 3em;
	height: 5em;
	z-index: 2;
	cursor: pointer;
}
#contacto{
	height: 45em;
}

.fondo-contacto{
	position: relative;
	width: 50%;
	display: inline-block;
	vertical-align: top;
	height: 100%;
	background-image: url(images/foto_contacto.jpg);
	background-position: center center;
	background-size: 100%;
	animation: fondo 10s infinite;
	animation-fill-mode: forwards;
}
.cuadro-contacto{
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 50%;
	height: 100%;
}
.texto-contacto{
	position: relative;
	width: 80%;
	padding: 2.5%;
	padding-left: 10%;
	font-size: 1.3em;
	margin-top: 0em;
	color: #425B00;
	bottom: 0px;
    font-family: 'Montserrat', sans-serif;
}
.datos{
	position: relative;
	width: 40%;
	padding-right: 5%;
	display: inline-block;
	vertical-align: top;
	font-family: 'Montserrat', sans-serif;
	color: #A6BA05;
	padding-bottom: 1em;
}
.grande{
	font-size: 1.3em;
	line-height: 1.3;
}
.titulo-contacto{
	position: relative;
	padding: 0px;
	margin: 0px;
	margin-top: .1em;
	font-size: 4em;
	line-height: 1;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	letter-spacing: -.05em;
	width: 55%;
	padding-top: .5em;
	padding-bottom: .5em;
	padding-left: 10%;
	background-color: #A6BA05;
}

.footer{
	position: relative;
	width: 100%;
	height: 200px;
}

.logo-footer{
	position: relative;
	display: inline-block;
	vertical-align: top;
	height: 100%;
	width: 20%;
	background-color: #898c0b;
}
.logo-footer img{
	position: relative;
	height: 170px;
	top: 15px;
}
.contacto-footer{
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 20%;
	padding-right: 2.5%;
	padding-left: 2.5%;
	height: 100%;
	background-color: #5a5907;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: #FFF;
	line-height: 1.5;
}
.contacto-footer p{
	padding-top: 20px;
}
.site-map{
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 55%;
	height: 100%;
	background-color: #434104;
}
.columna{
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 16%;
	padding: 0px;	
	margin: 0px;
	margin-left: 1%;
	margin-right: 1%;
	list-style: none;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	color: #FFF;
	margin-top: 20px;
	text-align: left;
	font-size: 12px;
}
.elemento{
	position: relative;
	width: 100%;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 12px;
	color: #FFF;
	line-height: 1.5;
}
.video-item{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
}
.chava-movil{
	display: none;
}
@media (max-width: 480px) {
	.logo{
		left: 0px;
		width: 100px;
	}
	.menu{
		width: 100%;
		padding: 0px;
		margin: 0px;
		left: 0px;
		background-color: rgba(255,255,255,1);
	}
	.liga-menu{
		position: relative;
		width: 100%;
		text-align: center;
		font-size: 34px;
		color: #A6BA05;
		text-shadow: none;
	}
	.primera-liga{
		margin-top:200px;
	}
	.titulo-home{
		font-size: 32px;
		padding-top: 25%;
		line-height: 1;
		left: 10px;
	}
	#nosotros{
		height: 900px;
	}
	.imagen-nosotros{
		width: 100%;
		display: none;
	}
	#texto-mision{
		font-size: 20px;
		top: 35%
	}
	#texto-vision{
		font-size: 16px;
		width: 90%;
		padding-right: 5%;
		padding-left: 5%;
		top: 5%;
	}
	#texto-valores{
		font-size: 20px;
		width: 60%;
		top: 25%;
		left:20%;
	}
	.cuadros{
		width: 100%;
	}
	.texto-cuadro{
		font-size: 16px;
		margin-top: 40px;
	}
	.titulo-cuadro{
		font-size: 40px;
		margin-top: 20px;
	}
	.banner-contenedor{
		height: 450px;
		background-size: cover;
	}
	.titulo-banner{
		width: 90%;
		padding-left: 5%;
		padding-right: 5%;
		font-size: 28px;
		padding-top: 85px;
	}
	#productos{
		height: 650px;
	}
	.imagen-productos-1{
		width: 100%;
		left: 0px;
	}
	.imagen-productos-2{
		display: none;
	}
	.texto-productos-2{
		font-size: 18px;
		width: 90%;
		padding-right: 5%;
		padding-left: 5%;
		top: 190px;
		display: block;
	}
	.cuadro-productos{
		top: 370px;
		width: 100%;
	}
	.frase-productos{
		font-size: 14px;
		width: 40%;
		padding-left: 5%;
		padding-right: 5%;
	}
	.titulo-productos{
		font-size: 32px;
		width: 40%;
		padding: 5%;
		padding-top: 0px;
	}
	.texto-productos-1{
		position: relative;
		top: 0px;
		width: 90%;
		margin: 0px;
		padding: 5%;
		font-size: 16px;
	}
	#proceso{
		height: 400px;
	}
	.titulo-item{
		top: 17%;
	}
	.flecha-derecha, .flecha-izquierda{
		width: 30px;
		height: 60px;
		top: 35%;
	}
	.proceso{
		width: 100%;
		left: 0px;
		height: 220px;
		bottom: 00px;
	}
	.titulo-proceso{
		font-size: 18px;
	}
	.texto-proceso{
		font-size: 14px;
		height: 180px;
	}
	#historia{
		height: 1000px;
	}
	.foto-historia-1{
		display: none;
	}
	.titulo-historia{
		font-size: 32px;
		left: 1%;
		padding-bottom: 50px;
	}
	.mapa{
		display: none;
	}
	.texto-historia-1, .texto-historia-2{
		font-size: 14px;
		top: 160px;
		left: 0px;
		width: 90%;
		padding-right: 5%;
		padding-left: 5%;
	}
	.texto-historia-2{
		top: 460px;
	}
	.foto-historia-2{
		display: none;
	}
	#beneficios{
		height: 1400px;
	}
	.beneficios{
		width: 100%;
	}
	.beneficio{
		width: 90%;
		padding-right: 5%;
		padding-left: 5%;
		font-size: 18px;
	}
	.titulo-beneficios-1{
		font-size: 32px;
	}
	.titulo-beneficios-2{
		font-size: 24px;
	}
	.chava{
		display: none;
	}
	.chava-movil{
		display: block;
		position: relative;
		width: 90%;
		margin-left: 5%;
	}
	#contacto{
		height: 550px;
	}
	.cuadro-contacto{
		width: 100%;
	}
	.titulo-contacto{
		font-size: 32px;
	}
	.texto-contacto{
		font-size: 16px;
	}
	.fondo-contacto{
		display: none;
	}
	.datos{
		width: 90%;
		font-size: 14px;
	}
	.logo-footer{
		width: 100%;
	}
	.contacto-footer{
		width: 95%;
	}
	.site-map{
		display: none;
	}
	.video-item{
		display: none;
	}
	.texto-quienes{
		position: relative;
		display: block;
		font-size: 16px;
		width: 90%;
		padding-left: 5%;
		padding-right: 5%;
		line-height: 1;
		color: rgba(166,186,5,1);
		padding-top: 5px;
		text-align: left;
		padding-top: 15px;
		padding-bottom: 15px;
	}
	.cuadro{
		height: 150px;
	}
	.chava{
		background-size: cover;
	}
	/*ANIMACIONES MOVILES*/
	.linea:first-child, .linea:nth-child(3), .liga-menu, .liga-menu:hover, .cuadro, .texto-cuadro, .titulo-cuadro, .chava, .cuadro:hover, .banner-contenedor, .foto-historia-1, .foto-historia-2{
		animation-name:none;
	}
	.cuadro:hover .titulo-cuadro{
		animation-name:none
	}
	.cuadro:hover .texto-cuadro{
		animation-name:none
	}
}

.desplazamiento{
	text-decoration: none;
}

@keyframes rotacion{
	from{-moz-transform: rotateX(0deg);transform: rotateX(0deg);-webkit-transform: rotateX(0deg);}
	to{-moz-transform: rotateX(360deg);transform: rotateX(360deg);-webkit-transform: rotateX(360deg);}
}
@keyframes interletrado{
	from{letter-spacing: 0px;}
	to{letter-spacing: .2em;}
}
@keyframes zoom{
	from{background-size: 100%; -webkit-background-size: 100%;}
	to{background-size: 130%; -webkit-background-size: 130%;}
}
@keyframes fondo{
	0%,100%{background-size: 100%; -webkit-background-size: 100%;}
	50%{background-size: 130%; -webkit-background-size: 130%;}
}
@keyframes linea-1{
	from{transform: rotate(0deg); -webkit-transform:rotate(0deg); top: 0px;}
	to{transform: rotate(45deg); -webkit-transform:rotate(45deg); top: 10px;}
}
@keyframes linea-3{
	from{transform: rotate(0deg); -webkit-transform:rotate(0deg); top: 0px;}
	to{transform: rotate(-45deg); -webkit-transform:rotate(-45deg); top: 1px;}
}


@keyframes rotacion-out{
	from{-moz-transform: rotateX(360deg);}
	to{-moz-transform: rotateX(0deg);}
}
@keyframes interletrado-out{
	from{letter-spacing: .2em;}
	to{letter-spacing: 0px;}
}
@keyframes zoom-out{
	from{background-size: 130%; -webkit-background-size: 130%;}
	to{background-size: 100%; -webkit-background-size: 100%;}
}
@keyframes linea-1-out{
	from{transform: rotate(45deg); -webkit-transform:rotate(45deg); top: 10px;}
	to{transform: rotate(0deg); -webkit-transform:rotate(0deg); top: 0px;}
}
@keyframes linea-3-out{
	from{transform: rotate(-45deg); -webkit-transform:rotate(-45deg); top: 1px;}
	to{transform: rotate(0deg); -webkit-transform:rotate(0deg); top: 0px;}
}