@charset "utf-8";
/* CSS Document. Home only */

* {-moz-box-sizing: border-box; box-sizing: border-box;-webkit-transition: all 0.2s ease-in;-moz-transition: all 0.2s ease-in;-ms-transition: all 0.2s ease-in;-o-transition: all 0.2s ease-in;transition: all 0.2s ease-in;}
body {width: 100%; height: 100%;  font: 14pt 'Neucha', Arial, Helvetica, sans-serif; padding: 0; position: absolute; background: #fff url(../img/home.jpg.webp) fixed no-repeat;   -webkit-background-size: cover; background-size: cover;}

/* DESKTOP MENU */
header { margin: 0;
padding: 0 1em;
position: fixed;
top: 0;
z-index: 9999;
width: 100%;
color: #fff;
background: #009fe3 url(../img/header-border.jpg.webp) bottom left repeat-x;
 display: -webkit-box;
 display: -webkit-flex;
 display: -moz-box;
 display: -ms-flexbox;
 display: flex;
-webkit-box-shadow: 0 1px 5px 0 rgba(0,0,0,0.5);
box-shadow: 0 1px 5px 0 rgba(0,0,0,0.5);
}

ul { list-style: none;margin: 0;padding: 0;}

.large-nav {-webkit-box-flex: 3;-webkit-flex-grow: 3;-ms-flex-positive: 3;flex-grow: 3;}
.small-nav {-webkit-box-flex: 1;-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow: 1;list-style: none;}
.large-nav h1, .small-nav h1 { padding: 0; margin: 0;}
.large-nav h1> a, .small-nav h1> a {padding: 0 !important; margin: 0;}
.large-nav ul {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox; display: flex; max-height: 5.5em;}
.large-nav li {-webkit-box-flex: 1;-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow: 1;}
.large-nav li img { width: 85%; height: auto}
.large-nav li a {text-decoration: none; color: #fff;text-align: center;}
.top-search {-webkit-box-flex: 1;-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow: 1;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox; display: flex; position: relative}

.top-search:hover> input, .top-search:focus> input, .top-search:active> input { border-bottom: 1px solid #fff; }
.top-search input:focus, .top-search input:active {outline: none;}
.top-search button { background: none; border: none; }

.pushy ul {margin-top: 4.5em;}
.menu-btn {font-size: 1.5em; padding: 0.5em 0.15em 0 0.15em;}
.menu-btn .icono-cancel-1 {font-size: 1.3em; float:right; margin-right:-12px }

#welcome { height: 100%; width: 100%;}

#contSlider_bx {width:100%; height:100%; background-color:#06C; position:absolute; top:0px}

#home-recipes {overflow: hidden;position: relative; z-index: 333; width: 100%; height: 100%;

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;}

.badge img { width: 100%; height: auto;}
.welcome-img { position: absolute; z-index: 333; width: 30%; height: 100%; text-align:center}
.welcome-img p { color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.5); font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-weight: 300; position:fixed;left:50%; width:200px; margin: 0 0 -2% -100px; bottom: 0; }
.welcome-img p a { text-decoration: none; color: #fff;}

#home-recipes { height: auto;}
#home-recipes ul{ list-style: none; width: 100%;   background: #fff; }
#home-recipes ul li{ -webkit-column-break-inside: avoid;-moz-column-break-inside: avoid;column-break-inside: avoid; opacity: 1;-webkit-transition: all .2s ease;-moz-transition: all .2s ease;-o-transition: all .2s ease;transition: all .2s ease; position: relative; width:20%; float:left  }
#home-recipes ul li:first-child{ margin-top: 0;}

#home-recipes ul li img {  width: 100%; height: auto;}
#home-recipes li a, #home-recipes li a img {display: block; position: relative; }
#home-recipes li a {overflow: hidden;-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
text-decoration: none; }
#home-recipes a .caption { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; /*font-family: 'Grand Hotel', cursive; */color: #fff; text-align: center; position: absolute; top: -100%;width: 100%; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
#home-recipes a:hover .caption { background: rgba(0,159,227,0.7); top: 0; width: 100%; height: 100%;  margin: 0; padding: 35% 1em;}

.filter-corner{position: absolute; z-index: 333;  top: 0;right: 0; margin: 0; padding: 0; width: 0px;height: 0px;border-style: solid;border-width: 0 2.5em 2.5em 0; line-height: 0px; background: none;}
.filter-corner.pera{ border-color: transparent #fff09c transparent transparent; _border-color: #000000 #fff09c #000000 #000000; _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');}
.filter-corner.naranja{ border-color: transparent #f8951b transparent transparent; _border-color: #000000 #f8951b #000000 #000000; _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');}
.filter-corner.limon{ border-color: transparent #fffd61 transparent transparent; _border-color: #000000 #fffd61 #000000 #000000; _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');}
.filter-corner.frutilla { border-color: transparent #e00109 transparent transparent; _border-color: #000000 #e00109 #000000 #000000; _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');}
.filter-corner.frutos-rojos { border-color: transparent #9f0056 transparent transparent; _border-color: #000000 #9f0056 #000000 #000000; _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');}
.filter-corner.manzana { border-color: transparent #acca04 transparent transparent; _border-color: #000000 #acca04 #000000 #000000; _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');}

.filter-corner.chocolate { border-color: transparent #3b250a transparent transparent; _border-color: #000000 #3b250a #000000 #000000; _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');}
.filter-corner.cafe { border-color: transparent #180d00 transparent transparent; _border-color: #000000 #180d00 #000000 #000000; _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');}
.filter-corner.ddl{ border-color: transparent #975a0f transparent transparent; _border-color: #000000 #975a0f #000000 #000000; _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');}
.filter-corner.crema, .filter-corner.coco { border-color: transparent #f0eee9 transparent transparent; _border-color: #000000 #f0eee9 #000000 #000000; _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');}


/* RESPONSIVE MENU STYLES */

.st-container,
.st-pusher,
.st-content {height: 100%;}
.st-content {overflow-y: scroll;background: #f3efe0;}
.st-content, .st-content-inner {position: relative;}
.st-container {position: relative;}
.st-pusher {position: relative;left: 0;z-index: 888;height: 100%;-webkit-transition: -webkit-transform 0.5s;transition: transform 0.5s;}

.st-pusher::after {position: absolute;top: 0;right: 0;width: 0;height: 0;background: rgba(0,0,0,0.2);content: '';opacity: 0;-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;}
.st-menu-open .st-pusher::after {width: 100%;height: 100%;opacity: 1;-webkit-transition: opacity 0.5s;transition: opacity 0.5s;}
.st-menu {position: absolute;top: 0; right: 0;z-index: 999;visibility: hidden;width: 300px;height: 100%;background: #1b6bb3;-webkit-transition: all 0.5s;transition: all 0.5s;}
.st-menu::after {position: absolute;top: 0;right: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.2);content: '';opacity: 1;-webkit-transition: opacity 0.5s;transition: opacity 0.5s;}

.st-menu-open .st-menu::after {width: 0;height: 0;opacity: 0;-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;}

/* content style */
.st-menu ul {margin: 0;padding: 0;list-style: none;}
.st-menu h2 {margin: 0;padding: 1em;color: rgba(0,0,0,0.4);text-shadow: 0 0 1px rgba(0,0,0,0.1);font-weight: 300;font-size: 2em;}
.st-menu ul li a {display: block;padding: 1em 1em 1em 1.2em;outline: none;box-shadow: inset 0 -1px rgba(0,0,0,0.1);color: #f3efe0; text-decoration: none;text-shadow: 0 0 1px rgba(255,255,255,0.1);letter-spacing: 1px;font-weight: 400;-webkit-transition: background 0.3s, box-shadow 0.3s;transition: background 0.3s, box-shadow 0.3s;}
.st-menu ul li:first-child a {box-shadow: inset 0 -1px rgba(0,0,0,0.2), inset 0 1px rgba(0,0,0,0.2);}
.st-menu ul li a:hover {background: rgba(0,0,0,0.2);box-shadow: inset 0 -1px rgba(0,0,0,0);color: #fff;}

.st-effect-7.st-container { -webkit-perspective: 1500px; perspective: 1500px; -webkit-perspective-origin: 0% 50%; perspective-origin: 0% 50%;}
.st-effect-7 .st-pusher {  -webkit-transform-style: preserve-3d;  transform-style: preserve-3d;}
.st-effect-7.st-menu-open .st-pusher { -webkit-transform: translate3d(-300px, 0, 0); transform: translate3d(-300px, 0, 0);}

.st-effect-7.st-menu { -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg); transform: translate3d(100%, 0, 0) rotateY(90deg);-webkit-transform-origin: 100% 50%;-ms-transform-origin: 100% 50%;transform-origin: 100% 50%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;}
.st-effect-7.st-menu-open .st-effect-7.st-menu { visibility: visible; -webkit-transform: translate3d(100%, 0, 0) rotateY(0deg); transform: translate3d(100%, 0, 0) rotateY(0deg);}

.more-products {display: block; position: relative; }
.more-products p { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; font-family: 'Grand Hotel', cursive; color: #fff; text-align: center; position: absolute; width: 100%; padding: 0 10%; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; z-index: 666; height: 100%; font-size: 2em; line-height: 1em; margin: 0;}
.more-products a:hover img{ opacity: 0.75; }

.icon-list-1 {font-size: 1.3em !important; float:right; margin-right:-12px}



.welcome-img {
	position: relative;
	width: 25%;
	display: block;
	margin:auto;
	text-align:center
}

.welcome-img .badge {
	position: absolute;
	top: 25%;
	z-index: 10;
	width:100%;
}

.welcome-img p {
	z-index: 10;
    background: rgba(0,159,227,0.7);
    font-weight: 500;
}

.welcome-img p a{
    display: block;
	padding: 1.25em 0.5em;
}

.sb-search-submit { text-align: center !important;}

/* MEDIA QUERIES ---------------------------------------------- */

@media screen and (min-width: 540px) and (max-width: 800px){

	/*#home-recipes ul {-moz-column-count: 2; -webkit-column-count: 2; column-count: 2;position: relative;  top: 6em;}*/
	#home-recipes ul li{ width:50%; float:left  }
	#home-recipes a .caption { font-size: 2em!important;}

}

@media screen and (max-width: 800px){

	header {padding: 0 1em 0 0; display: block; height: 4.2em; }
	#home-recipes a .caption { font-size: 2.5em;}

	.large-nav { display: none;}
	.small-nav { max-width: 50%; position: absolute; z-index: 999;}
	.small-nav h1 { width: auto;}
	.small-nav h1 img { width: 80%; height: auto; margin: 10px;}

	.top-search { width: 100%; z-index: 222; }
	#st-trigger-effects button {background: none;border: none;color: #fff;height: 30px;font-size: 28px;margin: 10px 0 0 15px;}

	.welcome-img { width: 60%}
    .sb-search-submit { text-align: right !important;  }
    .sb-search-input { width: 97% !important; left: 20px !important; font-size: 14px; top: 14px !important;}
    .sb-icon-search { text-align: right !important; width: 40px !important;  top: 5px !important;}

    #home-recipes a .caption { font-size: 1.7em; top: 0 !important; bottom: 0; text-shadow: 2px 3px 3px rgba(0,0,0,0.7); width: 100%; height: 100%; margin: 0; padding: 35% 1em; }
}

@media screen and (min-width: 800px){

	.top-search {padding: 1.5em 0;}

	.small-nav { display: none;}
	#st-trigger-effects { display: none;}
	#menu-7 {display: none;}

	.large-nav {max-width: 80%;}
	.large-nav li a { font-size: 1.3em;padding: 1.6em 0;display: block;overflow: visible;}
	.top-search input {padding: .5em;}
	.top-search button {font-size: 1.4em;}
	.sb-search{top: 1.1em;}
	.badge p { font-size: 24px; margin-top: 15%}
	/*#home-recipes ul {-moz-column-count: 2; -webkit-column-count: 2; column-count: 2;position: relative;  top: 6em;}*/
	#home-recipes ul li{ width:50%; float:left  }

	#home-recipes a .caption { font-size: 2em;}
    .welcome-img p {bottom: 1em;}

}

@media screen and (min-width: 800px) and (max-width: 1800px){

	.large-nav {-webkit-box-flex: 4;-webkit-flex-grow: 4;-ms-flex-positive: 4;flex-grow: 4;max-width: 82%;}
	.large-nav ul { max-height: 4.5em;}
	.large-nav li a { font-size: 1em;padding: 1.8em 0;}
	.top-search button {font-size: 1.2em;}
	.top-search{padding: .8em 0; overflow: hidden;}
	.sb-search{top: .8em; right:-20px}
	.sb-search.sb-search-open,
.no-js .sb-search {
	width: 100%;
}
	.sb-search-input { font-size: 14px}
	/*#home-recipes ul {-moz-column-count: 5; -webkit-column-count: 5; column-count: 5; }*/
	#home-recipes ul li{ width:25%; float:left  }
	#home-recipes a .caption {  top: -130%; font-size: 2em;}
	#home-recipes a:hover .caption {padding: 15% 1em; font-size: 2em;}
	.welcome-img { width:40%}
	.badge img { width:75%}

}

@media screen and (min-width: 1360px) and (max-width: 1580px) {
	/*#home-recipes ul {-moz-column-count: 5; -webkit-column-count: 5; column-count: 5;}*/
	#home-recipes ul li{ width:20%; float:left  }
	#home-recipes a:hover .caption {padding: 20% 1em;}
	#home-recipes a .caption { color: #fff; text-align: center; position: absolute; top: -100%;width: 100%;}

}
@media screen and (min-width: 1580px) {
	/*#home-recipes ul {-moz-column-count: 5; -webkit-column-count: 5; column-count: 5;}*/
	#home-recipes ul li{ width:20%; float:left  }
	.welcome-img p { margin: 0 0 -1.5% -100px; }
}


@media screen and (max-width: 539px){

	#home-recipes ul li{ width:100%;  }
	.welcome-img { width: 100% !important}
	.welcome-img p { margin: 0; width: 100%; bottom: 0; left: 0;}
	.welcome-img p a { padding: 0.75em 0; text-decoration: none; }
    .small-nav h1 img { width: 80%; }
	.badge img { width: 65%}
}