@font-face { font-family:"be"; src:url(../ttf/BebasNeue-Regular.ttf) format("truetype");}
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400');
/* font-family: 'Roboto Condensed', sans-serif; */

*{
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 15px;
	margin: 0px;
	padding: 0px;
	color: #666;
	-webkit-appearance: none;
    -moz-appearance: none;
   	appearance: none;
}

@media(max-width: 728px){
	*{
		font-size: 13px;
	}
}

p{
	text-align: justify;
	margin: 8px 0px !important;
}

.parrafo{
	width: 60%;
	margin: 35px auto;
}

 .centrar{
 	text-align: center !important;
 }

#load{
	z-index: 120;
	background-color: #fff;
	background-position: center;
	background-image: url(../images/waiting2.gif);
	background-repeat: no-repeat;
	background-size: 100px;
}



#inicio1{
	z-index: 10;
	background-color: #fff;
}

#inicio2{
	z-index: 8;
	background-color: #fff;
}

#inicio3{
	z-index: 4;
	background-color: #fff;
}

#inicio1, #inicio2, #inicio3{
}


.load{
	display: none;
}

.fondo{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: 0;
	background-position: center center;
}

#fondo1{	background-image: url(../images/fondo-X-01.jpg);}
#fondo2{	background-image: url(../images/fondo-X-02.jpg);}
#fondo3{	background-image: url(../images/fondo-X-03.jpg);}
#fondo4{	background-image: url(../images/fondo-X-04.jpg);}

body{
	width: 100%;
	height: 100%;
	position: absolute;
	background-attachment: fixed;
}

.cont{
	width: 100%;
	height: 100%;
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
}

.cont2{
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.cont3{
	width: 100%;
	height: 100%;
	position: relative;
	display: block;
}

.cont4{
	width: 100%;
	height: 100%;
	position: relative;
	display: block;
}

.seccion-name{
	opacity: 0;
	width: 100%;
	font-size: 25px;
	line-height: 24px;
	color: #c00;
	font-family: "be";
	position: absolute;
	text-align: center;
	left: 0px;
	bottom: -155px;
}


@media(max-width: 600px){
	.cont4{
		width: 90%;
		height: auto;
		position: relative;
		display: block;
		margin:0px auto 10px auto;
		padding-bottom: 160px;
	}
	
	.header{
		position: fixed !important;
		bottom: 0px !important;
		left: 0px !important;
		padding-top: 10px !important;	
	}

	*{
		text-align: center;
	}
	
	.telefonos a{
		font-size: 24px !important;
	}

	.icono-tel{
		width: 55px !important;
		height: 55px !important;
		display: block !important;
		margin: auto !important;
	}

}


.icono-slogan{
	width: 120px;
	height: auto;
	margin: auto;
}

.icono-slogan2{
	width: 250px;
	height: auto;
	margin: auto;
}

.slogan1, .slogan2 {
	font-family: 'be';
	text-align: center;
}

.slogan1{
	font-size: 25px;
	color:#555;
	display: block;
}

.slogan2{
	font-size: 40px;
	line-height: 35px;
	color:#555;
	display: block;
}

.header{
	position: absolute; bottom: 0px;
	width: 100%;
	height: 15%;
	padding:45px 0px 10px 0px;
	background-position: top center;
}

.titulo-seccion{
	width: 80%;	
	margin: auto;
	color: #555 !important;
}

.titulo-seccion strong{
	color: #555 !important;
	font-size: 15px;
	margin-bottom: 20px;
}


.titulo-seccion img{
	width: 100% !important;
}

.titulo-seccion-imagen{
	width: 80%;
	margin: 0px auto 0px auto;
}

.titulo-seccion-imagen2{
	width: 70%;
	margin: auto;
}


@media (min-width: 1400px) {
	.header{
		height: 13% !important;
	}
}

.logo-h{
	width: 220px;
	margin: auto;
	clear: both;
}

.contacto{
	width: 180px;
	height: 55px;
	text-align: left;
	position: absolute;	left: 30px; bottom: 25px;
}

.redes{
	width: 180px;
	height: 55px;
	position: absolute;	right: 30px; bottom: 25px;
	text-align: right;
}

.red{
	width: 40px;
	height: 40px;
	display: inline-block;
	margin: 5px;
}

.contenido{
	position: relative;
	top: 0px;
	width: 100%;
	height: 80%;
	display: flex;
	justify-content: center;
	align-items: center;
}

@media(){
	.contenido{
		margin: 25px auto 0px auto !important; 
	}	
}


.sub-titulo{
	font-family: "be";
	color:#555;
	display: block;
	margin: 10px auto 0px auto;
	font-size: 40px;
	line-height: 38px;
	text-align: center;
}


@media (min-width: 1400px) {
	.contenido{
		height: 85% !important;
	}
}

.panel-contenido{
	display: inline-block;
	width: 30%;
	height: auto;
	margin:0px;
}

.linea-vertical{
	position: relative;
	width: 2px;
	height: 90%;
	margin: 1%;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 50px;
}
	
	.titulo-seccion{
		color: #FFF;
		text-align: center;
	}

	.panel-contenido p{
		color: #555;
	}

@media (max-width: 600px){
	.seccion-name{
		color: #FFF;
	}

	.panel-contenido{
		display: block !important;
		width: 90%;
		height: auto;
		margin:0px auto;
	}

	.linea-vertical{
		display: none;
	}

	.titulo-seccion{
		width: 100%;	
		margin: auto;
	}

	.header{
		background: rgba(255, 255, 255, 0.98);
		box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.2);
	}

	.sub-titulo{
		margin: 30px auto 10px auto;
	    font-size: 30px;
	    line-height: 30px;
	}

}


/*  menu principal   */

.contenedor-grande{
	width: 350px;
	text-align: center !important;
	margin-top: 0px !important;
	position: relative;
}

.cont-menu{
	width: 100px;
	height: 100px;
	margin: auto;
	position: relative;
}

.menu-item,
.menu-open-button {
   position: absolute; top: -40px; left: -40px;
   color: #FFFFFF;
   text-align: center;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
   -webkit-transition: -webkit-transform ease-out 200ms;
   transition: -webkit-transform ease-out 200ms;
   transition: transform ease-out 200ms;
   transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}

.menu-open-button{
	width: 85px;
    height: 85px;
   	background-image: url(../images/menu.svg);
   	margin-top: 0px !important;
   	margin-left: -1px !important;
}

.menu-item{
	width: 80px !important;
	height: 80px !important;
	margin:0px 0px 0px 0px;
	position: absolute;
}

.titulo-menu{
	width: 140px;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.3);
	padding: 10px;
}

.menu-open{
   display: none;
}

.lines {
   width: 25px;
   height: 3px;
   background: #fff;
   display: block;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -12.5px;
   margin-top: -1.5px;
   -webkit-transition: -webkit-transform 200ms;
   transition: -webkit-transform 200ms;
   transition: transform 200ms;
   transition: transform 200ms, -webkit-transform 200ms;
}

.line-1 {
   -webkit-transform: translate3d(0, -8px, 0);
   transform: translate3d(0, -8px, 0);
}

.line-2 {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

.line-3 {
   -webkit-transform: translate3d(0, 8px, 0);
   transform: translate3d(0, 8px, 0);
}

.menu-open:checked + .menu-open-button .line-1 {
   -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
   transform: translate3d(0, 0, 0) rotate(45deg);
}

.menu-open:checked + .menu-open-button .line-2 {
   -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
   transform: translate3d(0, 0, 0) scale(0.1, 1);
}

.menu-open:checked + .menu-open-button .line-3 {
   -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
   transform: translate3d(0, 0, 0) rotate(-45deg);
}

.menu {
   margin: auto;
   position: absolute;
   top: 0px;
   bottom: 0px;
   left: 0px;
   right: 0px;
   width: 0px;
   height: 0px;
   text-align: center;
}

.menu-open-button {
   z-index: 2;
   -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   -webkit-transition-duration: 400ms;
   transition-duration: 400ms;
   -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
   transform: scale(1.1, 1.1) translate3d(0, 0, 0);
   cursor: pointer;
   
}

.menu-open-button:hover {
   -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
   transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.menu-open:checked + .menu-open-button {
   -webkit-transition-timing-function: linear;
   transition-timing-function: linear;
   -webkit-transition-duration: 200ms;
   transition-duration: 200ms;
   -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
   transform: scale(1.1, 1.1) translate3d(0, 0, 0);
}

.menu-open:checked ~ .menu-item {
   -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
   transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}

.menu-open:checked ~ .menu-item:nth-child(3) {
   transition-duration: 300ms;
   -webkit-transition-duration: 300ms;
   -webkit-transform: translate3d(0px, -100px, 0);
   transform: translate3d(0px, -100px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(4) {
   transition-duration: 300ms;
   -webkit-transition-duration: 300ms;
   -webkit-transform: translate3d(-100px, 0px, 0);
   transform: translate3d(-100px, 0px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(5) {
   transition-duration: 300ms;
   -webkit-transition-duration: 300ms;
   -webkit-transform: translate3d(100px, 0px, 0);
   transform: translate3d(100px, 0px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(6) {
   transition-duration: 300ms;
   -webkit-transition-duration: 300ms;
   -webkit-transform: translate3d(0px, 100px, 0);
   transform: translate3d(0px, 100px, 0);
}


.girar{
	display: none;
}

.mostrar{
	display: block !important;
}

/*        textos        */

.texto-menu{
	display: none;
	position: absolute; left: 0px; top: 80px;
	color: #666;
	font-size: 10px;
	width: 85px;
}


.movil{display: none;}
.pc{display: inline-block;}


@media (max-width: 700px) {
	
	
	.movil{display: inline-block;}
	.pc{display: none !important;}

	.slogan1{
		font-size: 20px;
		line-height: 17px;
	}

	.slogan2{
		font-size: 35px;
		line-height: 32px;
	}

	.icono-slogan{
		width: 80px;
	}

	.icono-slogan2{
		width: 180px;
		height: auto;
		margin: auto;
	}

	.cont-menu{
	}
	
	.header{
		height: 110px;
	}
	
	.contacto{
		width: 130px;
		height: 40px;
		position: relative; top: 0px; left: 0px;
		margin-left: 10px;
		float: left;
	}

	.redes{
		width: 130px;
		height: 40px;
		position: relative; top: 0px; right: 0px;
		margin-right: 10px;
		float: right;
	}

	.red{
		width: 30px;
		height: 30px;
		display: inline-block;
		margin: 5px;
	}

	.logo-h{
		width: 170px !important;
	}

}


@media (max-height:480px) {
	.contenido{
		height: 73%;
	}
}

@media (min-height:481px) and (max-height:568px) {
	.contenido{
		height: 77%;
	}
}

@media (min-height:569px) and (max-height:737px) {
	.contenido{
		height: 81% !important;
	}
}

@media (min-height:738px) and (max-height:812px) {
	.contenido{
		height: 84% !important;
	}
}

@media (min-height:813px) and (max-height:1024px) {
	.contenido{
		height: 88% !important;
	}
	
	.header{
		height: 10% !important;
	}
}

@media (min-height:1025px) and (max-height:1366px) {
	.contenido{
		height: 88% !important;
	}
	
	.header{
		height: 10% !important;
	}
	
	.logo-h{
		width: 300px;
	}

}

@media (max-width: 1000px) and (orientation : landscape) {
	.girar{
		display: block;
		position:fixed; top: 0px; left: 0px;
		width: 100%; 
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		z-index: 100;
		background-color: #FFF;
		color: #fff;
	}
}


.telefonos{
	margin-top: 30px;
}

.telefonos a{
	color: #555;
	font-size: 25px;
	font-weight: 700;
	display: block;
	text-align: center;
	text-decoration: none;
	margin: 5px 0px;
	padding: 5px;
}

.icono-tel{
	width: 40px;
	height: 40px;
	display: inline-block;
	vertical-align: middle;
	margin: 0px 15px 0px 0px;
}

.icono-tel img{
	width: 100%;
}

.formulario{
	text-align: center;
}

.input-form{
	display: block;
	background-color: transparent;
	color: #555;
	border:solid 1.5px #555;
	border-radius: 3px;
	width: 100%;
	margin: 5px 0px;
	padding: 10px 0px;
	text-align: center;
	background-image: url(../images/bg-input.svg);
	background-repeat: no-repeat;
	background-position: left bottom;
}

.input-form::placeholder{
	color:#BBB;
}

.input-form:focus{
	outline: none;
	background: #eee;
}

form > input[type="submit"]{
	width: 100%;
	font-weight: bold;
	border-radius: 3px;
	background-color: #ddd;
	margin: 10px auto 0px auto;
	padding:12px;
	color:#555;
	border:solid 1.5px #555;
	background-image: url(../images/bg-input.svg);
	background-repeat: no-repeat;
	background-position: left bottom;
	cursor: pointer;
}

form > input[type="text"]:focus + #head-tomate{
	display: none !important;
}


.cliente{
	width: 70%;
	height: auto;
	margin:5px auto;
}

.cliente img{
	width: 100%;
}

@media (max-width: 728px){
	.cliente{
		width: 100%;
	}
}

@media(max-height: 350px){
	.header{
		display: none !important;
	}
}

@media(max-height: 400px) and (max-width: 500px){
	.girar{
		display: none;
	}
	.cont4{
		padding-bottom: 30px;
	}