@import url('promo.css');
@import url('prod.css');
@import url('promSlide.css');
@import url('alerts.css');
@import url('recipes.css');
@import url('noticias.css');
*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: sans-serif;
}
ul{
	list-style: none;
}
a{
	text-decoration: none;
	cursor: pointer;
}
h1{
	font-size: 48px;
	color: #3d6f00;
	/*font-style: italic;*/
	margin-bottom: 60px;
	display: block;
}
header a span, header a label{ cursor: pointer; }
body{ padding-top: 106px; }
section{ position: relative; }
.cont{
	display: block;
	position: relative;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 10px;
	z-index: 5;
}
.cont>div{
	display: flex;
	justify-content: flex-start;
}
.bg1{ background: #59701F; }
.bg2{ background: #990000; }
.bg3{ background: #cc9933; }
.bg4{ background: #808080; }
.bg5{ background: #663300; }
.bgT{
	width: 300px;
    height: 175px;
    /*-webkit-transform: skew(35deg);
    -moz-transform: skew(35deg);
    -ms-transform: skew(35deg);
    -o-transform: skew(35deg);
    transform: skew(35deg);*/
    position: absolute;
    top: -125px;
    left: 0;
    z-index: -1;
}
.bgT:before{
	content: '';
	width: 300px;
    height: 175px;
    position: absolute;
    top: 0px;
    left: 200px;
}
.bgT:after{
	content: '';
	width: 300px;
    height: 175px;
    position: absolute;
    top: 0px;
    left: 250px;
}
.bgB{
	width: 300px;
    height: 300px;
    /*-webkit-transform: skew(35deg);
    -moz-transform: skew(35deg);
    -ms-transform: skew(35deg);
    -o-transform: skew(35deg);
    transform: skew(35deg);*/
    position: absolute;
    bottom: 0px;
    left: 0;
    z-index: 0;
}
.bgB:before{
	content: '';
	width: 300px;
    height: 300px;
    position: absolute;
    bottom: 0px;
    left: 200px;
}
.bgB:after{
	content: '';
	width: 300px;
    height: 300px;
    position: absolute;
    bottom: 0px;
    left: 250px;
}
.contenedor{
	z-index: 10;
}
#area_promociones .bgT,#area_promociones .bgT:before, #area_promociones .bgT:after{
	background-image: linear-gradient(rgba(255,255,255, 0.5),rgba(255,255,255,0.2),transparent);
}
#recipes .contenedor{
	position: relative;
}
#recipes h1{ margin-bottom: 20px;  }
#recipes .bgT,#recipes .bgT:before, #recipes .bgT:after{
	background-image: linear-gradient(rgba(167, 205, 67, 1),rgba(167, 205, 67, 0.2), transparent);
}
#recipes .bgT{ top: -125px; }
#noticias .contenedor{
	position: relative;
}
#noticias h1{ margin-bottom: 20px;  }
#noticias .bgT,#noticias .bgT:before, #noticias .bgT:after{
	background-image: linear-gradient(rgba(167, 205, 67, 1),rgba(167, 205, 67, 0.2), transparent);
}
#noticias .bgT{ top: -125px; }
/*----- HEADER -----*/
	header{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		overflow: hidden;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 500;
	}
	header .logoContent{
		height: 50px;
	    width: 100%;
	    background: #8D5D34;
	}
	header .logo{
	    display: flex;
	    width: 172px;
	    height: 100px;
	    background: #FFF;
	    /*-webkit-transform: skew(35deg);
	    -moz-transform: skew(35deg);
	    -ms-transform: skew(35deg);
	    -o-transform: skew(35deg);
	    transform: skew(35deg);*/
	    justify-content: center;
	    align-items: center;
	    overflow: hidden;
	    position: absolute;
	    top: 0;
	}
	header .logo img{
		height: 100px;
	    /*transform: skew(-35deg);*/
        margin-left: 15px;
	}
	header .logo img:before{
		content: '';
		width: 0;
		height: 0;
		border-right: 50px solid transparent;
		border-top: 50px solid transparent;
		border-left: 50px solid #f0ad4e;
		border-bottom: 50px solid #f0ad4e;
	}
	header .infoPage{
		width: 100%;
		height: 50px;
		background: #59701F;
	}
	.infoPage .cont{
	    display: flex;
	    /* flex-direction: row-reverse; */
	    justify-content: space-between;
	    height: 100%;
	    padding-left: 199px;
	}
	.infoPage ul{
		display: flex;
		align-items: center;
		height: 100%;
		padding: 4px 0px;
	}
	.infoPage ul li{
	    display: inline-flex;
	    height: 100%;
	    align-items: center;
	}
	.infoPage ul li a{
	    color: rgba(255,255,255,0.8);;
	    padding: 0px 15px;
	    border-right: 1px solid #FFF;
	    height: 100%;
	    display: flex;
	    align-items: center;
	    font-size: 18px;
	}
	.infoPage ul li a:hover{ color: #FFF; }
	.infoPage ul li:last-child a{
		border: 0;
	}
	.infoPage .ico-map{
		background-size: cover;
		width: 40px;
	}
	header .btnHead{
		display: flex;
		/*-webkit-transform: skew(35deg);
	    -moz-transform: skew(35deg);
	    -ms-transform: skew(35deg);
	    -o-transform: skew(35deg);
	    transform: skew(35deg);*/
	    justify-content: center;
	    align-items: center;
	    overflow: hidden;
	    padding: 4px 30px;
	    width: 172px;
	    font-size: 16px;
	}
	header .btnHead:hover{ opacity: 0.7; }
	.btnHead label{
		/*transform: skew(-35deg);*/
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    flex-wrap: wrap;
	    color: #FFF;
	}
	header .ico{
		width: 25px;
		min-width: 25px;
		height: 25px;
		min-height: 25px;
	}
	.socialMedia .ico{
		width: 45px;
		min-width: 45px;
		height: 45px;
		min-height: 45px;
	}
/*----- MENU -----*/
	nav{
		background: #A7CD43;
		width: 100%;
	}
	nav .cont{
		display: flex;
	}
	nav ul{
		display: flex !important;
	}
	nav ul li{
		display: inline-flex;
	}
	nav ul li:first-child{ margin-left: 47px; }
	nav ul li a{
		display: flex;
		flex-wrap: wrap;
	    /*background: #FFF;*/
	    /*-webkit-transform: skew(35deg);
	    -moz-transform: skew(35deg);
	    -ms-transform: skew(35deg);
	    -o-transform: skew(35deg);
	    transform: skew(35deg);*/
	    justify-content: center;
	    align-items: center;
	    overflow: hidden;
	    padding: 4px 30px;
	    width: 172px;
	    font-size: 12px;
	}
	nav ul li a:hover{
		opacity: 0.7;
	}
	nav ul li label{
	    /*transform: skew(-35deg);*/
	    display: flex;
	    flex-wrap: wrap;
	    color: #FFF;
	}
	nav ul li a span{
		width: 100%;
		margin:  0;
	}
	nav ul li a span:last-child{
		margin-left: 24px;
	}
	.socialMedia .ico{
		display: inline-block;
		margin: 0 5px;
	}
	.socialMedia{
		display: flex;
	    padding: 2px 20px;
	    align-items: center;
	    position: absolute;
	    right: 0;
	    top: 0px;
	}
/*----- WELCOME -----*/
	#welcome{
		padding: 125px 0px;
		background: #FEFEFE;
		border-top: 50px solid #59701F;
		overflow: hidden;
	}
	#welcome .bgT,#welcome .bgT:before, #welcome .bgT:after{
		/*background-image: linear-gradient(rgba(255, 204, 0, 1),rgba(255, 204, 0, 0.2), transparent);*/
		background-image: linear-gradient(rgba(167, 205, 67, 1),rgba(167, 205, 67, 0.2), transparent);
	}
	#welcome p{
		color: #000;
		font-size: 18px;
	}
	#welcome .cont>img{
		position: absolute;
	    top: -105px;
	    right: 0;
	    height: 200px;
	}
	#welcome b{
		font-size: 28px;
		color: #3d6f00;
	    font-style: italic;
	    font-weight: lighter;
	    display: block;
	    margin: 10px 20px;
	}
	#welcome ul{
	    list-style: square;
		margin-left: 40px;
	}
	#welcome ul li{
   		font-size: 18px;
	}
/*----- SERVICES -----*/
	#services{
		background: #630;
		padding: 250px 0px;
		overflow: hidden;
	}
	#services .bgT,#services .bgT:before, #services .bgT:after{
		background-image: linear-gradient(rgba(225, 204, 148, 1),rgba(225, 204, 148, 0.2), transparent);
	}
	#services h1{
	    color: #FFF;
	    margin-bottom: 20px;
	    text-align: center;
	}
	#services label{
		font-size: 28px;
	    color: #FFF;
	    font-style: italic;
	    font-weight: lighter;
	    margin-bottom: 20px;
	    display: block;
	    text-align: center;
	}
	#services .imgs{
		margin: 50px 0px;
	}
	#services .imgs img{
		height: 240px;
	}
	@media screen and (max-width: 1030px){
		#services .imgs{
			flex-wrap: wrap;
			justify-content: center;
		}
	}
	@media screen and (max-width: 600px){
		#services .imgs img{
			display: none;
		}
		#services .imgs img:first-child{ display: block; }
	}
/*----- SOCIAL MEDIA -----*/
	#socialMedia{
		background: #cc9933;
		padding: 250px 0px 80px;
		overflow: hidden;
	}
	#socialMedia .bgT,#socialMedia .bgT:before, #socialMedia .bgT:after{
		background-image: linear-gradient(rgba(204, 153, 51, 1),rgba(255,255,255,0.2),rgba(255,255,255,0.2),rgba(255,255,255,0));
	}
	#socialMedia .cont{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
	#socialMedia .frameFB{
	    background: #FFF;
	    padding: 20px;
	}
	#socialMedia h1{
	    width: 100%;
	    color: #FFF;
	    font-size: 50px;
	    text-align: right;
	}
/*----- LOCATION -----*/
	#location{
		padding: 125px 0px 80px;
		/*border-bottom: 50px solid #eabf75;*/
		overflow: hidden;
	}
	#location .bgT,#location .bgT:before, #location .bgT:after{
		background-image: linear-gradient(rgba(167, 205, 67, 1),rgba(167, 205, 67, 0.2), transparent);
	}
	#location h1{
	    font-size: 37px;
	    color: #3d6f00;
	    font-style: italic;
	    font-weight: bold;
	    margin-bottom: 30px;
	    display: flex;
	    flex-wrap: nowrap;
	    white-space: nowrap;
	    padding-right: 200px;
	    justify-content: flex-start;
	    align-items: baseline;
	}
	#location span{
		font-size: 20px;
		color: #3d6f00;
		font-style: italic;
		font-weight: lighter;
		margin-left: 40px;
		white-space: nowrap;
	}
	#location .map{
		border: 3px solid #A7CD43;
	}
	#location img{
		height: 180px;
	    position: absolute;
	    top: -125px;
	    right: 0;
	}
	#location p{
		color: #3d6f00;
    	padding: 20px 0px;
	}
	@media screen and (max-width: 690px){
		#location h1{
			flex-wrap: wrap;
		}
	}
/*----- FOOTER -----*/
	footer{
		width: 100%;
		position: relative;
		background: #8D5D34;
		color:  #FFF;
	}
	footer .line{
		background: #59701F;
		width: 100%;
		height: 30px;
	}
	footer .cont{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	footer .line .cont{
		justify-content: flex-end;
		height: 100%;
	}
	footer .line .cont>span{
		padding: 10px 0px;
		position: relative;
		height: 100%;
	}
	footer .line span:before{
		content: '';
		background: #663300;
   		/*-webkit-transform: skew(35deg);
	    -moz-transform: skew(35deg);
	    -ms-transform: skew(35deg);
	    -o-transform: skew(35deg);
	    transform: skew(35deg);*/
	    justify-content: center;
	    align-items: center;
	    overflow: hidden;
	    width: 30px;
	    height: 100%;
	    position: absolute;
	    top: 0;
	    left: -59px;
	}
	footer .line span:after{
		content: '';
		background: #A7CD43;
   		/*-webkit-transform: skew(35deg);
	    -moz-transform: skew(35deg);
	    -ms-transform: skew(35deg);
	    -o-transform: skew(35deg);
	    transform: skew(35deg);*/
	    justify-content: center;
	    align-items: center;
	    overflow: hidden;
	    width: 50px;
	    height: 100%;
	    position: absolute;
	    top: 0;
	    left: -109px;
	}
	footer span b{
		margin: 0 5px;
	}
	footer .cont span{
		padding: 10px 0px 130px;
	}
	footer .ico{
		position: absolute;
	    right: 5px;
	    bottom: 5px;
	    width: 20px;
	    min-width: 20px;
	    height: 20px;
	    min-height: 20px;
	    z-index: 10;
	}
	footer a{
		color: #FFF;
	}
	footer a:hover{ text-decoration: underline; }
/*----- CONTACT -----*/
	#contact{
		padding: 150px 0px;
		position: relative;
		overflow: hidden;
	}
	#contact .bgT{ top: -150px; }
	#contact .bgT,#contact .bgT:before, #contact .bgT:after{
		background-image: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.1), transparent);
		z-index: -10;
	}
	#contact .bgB{ bottom: -150px; }
	#contact .bgB,#contact .bgB:before, #contact .bgB:after{
		background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
		z-index: -10;
	}
	#contact form{
		width: 400px;
	    background: #FFF;
	    padding: 40px;
	    margin: 0 auto;
	    display: flex;
	    flex-wrap: wrap;
	    position: relative;
	}
	#contact form:before{
		content: '';
	    width: 130%;
	    background-image: linear-gradient(to right, #ffcc00, #ffcc00 , #59701F, #59701F);
	    height: 90%;
	    position: absolute;
	    top: 5%;
	    left: -15%;
	    z-index: -2;
	}
	#contact form:after{
		content: '';
	    width: 120%;
	    background: #808080;
	    height: 90%;
	    position: absolute;
	    top: 5%;
	    left: -10%;
	    z-index: -1;
	}
	#contact h1{
		font-size: 37px;
	    color: #3d6f00;
	    font-weight: lighter;
	}
	#contact h1 b{
		font-weight: bold;
	}
	#contact h3{
		font-size: 20px;
	    color: #3d6f00;
	    font-style: italic;
	    font-weight: lighter;
	    margin-bottom: 30px;
	}
	#contact div{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
		padding: 8px 0px 3px;
	}
	#contact div label{
		width: 100%;
		display: flex;
		align-items: center;
	}
	#contact div label b{
		color: #3d6f00;
		font-weight: bold;
	}
	#contact div input, #contact div textarea{
		width: 100%;
		border: 1px solid #3d6f00;
		font-size: 14px;
		padding: 3px 0px ;
	}
	#contact div textarea{
		min-height: 100px;
	}
	#contact div input:focus { border: 4px solid red !important; }
	#contact div input[type=submit]{
		width: auto;
		margin: 0 auto;
		background: #2E3D09;
		border: 1px solid #2E3D09;
		padding: 3px 25px;
		color: #FFF;
		font-size: 16px;
		opacity: 0.9;
		cursor: pointer;
	}
	#contact div input[type=submit]:hover{ opacity: 1; }
	.reqFields{
		width: 100%;
		color: #3d6f00;
		font-weight: bold;
		font-size: 12px;
	}
/*----- ICONS -----*/
	.ico{
		width: 23px;
	    min-width: 23px;
	    height: 23px;
	    min-height: 23px;
	    background-repeat: no-repeat;
	    background-size: contain;
	    background-position: center;
	    cursor: pointer;
	    opacity: 0.6;
	}
	.ico:hover{ opacity: 1; }
	.ico-fb{
		background-image: url('../img/icons/fb.png');
	}
	.ico-yt{
		background-image: url('../img/icons/yt.png');
	}
	.ico-wa{
		background-image: url('../img/icons/wa.png');
	}
	.ico-location{
		background-image: url('../img/icons/location.png');
	}
	.ico-panel{
		background-image: url('../img/icons/logoPanel.png');
	}
	.ico-mail{
		background-image: url('../img/icons/mail.png');
	}
/*----- CAPTCHA -----*/
	.captchaCont{ position: relative; }
	.captcha{
		font-size: 50px !important; 
		text-transform: uppercase;
		height: 80px;
		text-align: center;
		font-family: "Papyrus";
		font-style: italic;
		font-weight: 800;
		position: absolute;
		background: inherit;
		z-index: 100;
		border: 0;
		pointer-events: none;
		cursor: none;
		border: none !important;
	}
	.banner{
		position: relative;
		width: 100%;
		height: 80px;
		pointer-events: none;
		cursor: none;
	}
/*----- ALERT TAG -----*/
	.alertTag{
		position: relative;
	    display: flex;
	    justify-content: center;
	}
	.alertTag span{
		color: #000;
	    font-size: 12px;
	    display: none;
	    transition: 0.5s;
	    position: absolute;
	    background: #efe80e;
	    padding: 10px;
	    margin-top: 10px;
	    border-radius: 5px;
	    top: 100%;
	    z-index: 100;
	    animation: visible 0.5s;
	    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.2);
	}
	.alertTag span:before{
	    content: '';
	    position: absolute;
	    top: -20px;
	    left: 10px;
	    width: 0;
	    height: 0;
	    border-right: 10px solid transparent;
	    border-top: 10px solid transparent;
	    border-left: 10px solid transparent;
	    border-bottom: 10px solid #efe80e;
	}
/*----- @media ------*/
	@media screen and (max-width: 1024px){
		section h1 {
    		font-size: 44px !important; 
    	}
		#welcome p,#welcome ul li {
		    font-size: 16px;
		}
		#welcome b {
    		font-size: 24px;
    	}
    	#welcome .cont>img,#location img {
		    height: 180px;
		}
		#services label {
    		font-size: 24px;
    	}
    	#location span {
	    	font-size: 18px;
	    }
	    .infoPage ul li a {
	    	font-size: 14px;
	    	padding: 0 5px;
	    }
	    header .btnHead {
	    	font-size: 14px;
	    	width: 136px;
	    }
	}
	@media screen and (max-width: 734px){
		header .infoPage {
			padding-top: 50px;
			height: 85px;
		}
		.infoPage .cont {
			justify-content: center;
			padding: 0;
		}
		body{ padding-top: 143px; }
	}
	@media screen and (max-width: 600px){
		section h1 {
    		font-size: 36px !important; 
    	}
		#welcome p,#welcome ul li {
		    font-size: 14px;
		}
		#welcome b {
    		font-size: 20px;
    	}
    	#welcome .cont>img,#location img {
		    height: 160px;
		}
		#services label {
    		font-size: 20px;
    	}
    	#location span {
	    	font-size: 16px;
	    }
	}
	@media screen and (max-width: 564px){
		.infoPage ul li a,header .btnHead { font-size: 11px; }
	}