/*IE10 viewport hack for Surface/desktop Windows 8 bug*/
@-ms-viewport{width:device-width}@-o-viewport{width:device-width}@viewport{width:device-width}

::-moz-selection {background: #b3d4fc; text-shadow: none; }
::selection {background: #b3d4fc; text-shadow: none; }

:root {
  --main-bg: #1c955f;
  --main-bg-text: #fff;
  --main-text: #1d1d1b;
}

@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInLeft{from{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fadeInLeft{from{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes fadeInUp {from {opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to {opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUp {from {opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to {opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInUp {-webkit-animation-name: fadeInUp; animation-name: fadeInUp; }.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInRight{from{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fadeInRight{from{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes bounceInUp {from, 60%, 75%, 90%, to {-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from {opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% {opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% {-webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% {-webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp {from, 60%, 75%, 90%, to {-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from {opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% {opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% {-webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% {-webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp {-webkit-animation-name: bounceInUp; animation-name: bounceInUp; }@-webkit-keyframes bounceInRight{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}from{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes bounceInRight{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}from{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInLeft{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes bounceInLeft{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;visibility:visible !important;}@media (prefers-reduced-motion){.animated{-webkit-animation:unset!important;animation:unset!important;-webkit-transition:none!important;transition:none!important;visibility:visible;}} @keyframes zoom {from {opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); } 50% {opacity: 1; } } .zoom {-webkit-animation-name: zoom; animation-name: zoom; }
.delay1{animation-delay:.1s;-moz-animation-delay:.1s;-webkit-animation-delay:.2s}.delay2{animation-delay:.3s;-moz-animation-delay:.3s;-webkit-animation-delay:.3s}.delay3{animation-delay:.5s;-moz-animation-delay:.5s;-webkit-animation-delay:.5s}.delay4{animation-delay:.7s;-moz-animation-delay:.7s;-webkit-animation-delay:.7s}.delay5{animation-delay:.9s;-moz-animation-delay:.9s;-webkit-animation-delay:.9s}.delay6{animation-delay:1.1s;-moz-animation-delay:1.1s;-webkit-animation-delay:1.1s}.delay7{animation-delay:1.3s;-moz-animation-delay:1.3s;-webkit-animation-delay:1.3s}.delay8{animation-delay:1.5s;-moz-animation-delay:1.5s;-webkit-animation-delay:1.5s}.delay9{animation-delay:1.7s;-moz-animation-delay:1.7s;-webkit-animation-delay:1.7s}.delay10{animation-delay:1.9s;-moz-animation-delay:1.9s;-webkit-animation-delay:1.9s}
.anim {visibility: hidden;}
body,html{
  height:100%;
  width:100%;
  font-size: 24px;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
  color: var(--main-text);
}

a{color:var(--main-bg);} a:hover{color:var(--main-bg);}
button.cc_b_ok, .cc_cp_f_save button {background-color: var(--main-bg) !important;}
a.text-dark {text-decoration: underline; color: #000 !important;}
strong{font-weight: 700;}
h1, .h1 {font-size: 1.4rem;}
h1.big {font-size: 4rem;}
h1 span {color: #b09418;}
h2{font-size: 1.2rem; margin-bottom: 1rem; font-weight: 700}

.cover{background-size: cover; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; }
.fixed {background-attachment: fixed !important;}
.auto {background-position: center !important; background-size: auto !important; -webkit-background-size: auto !important; -moz-background-size: auto !important; -o-background-size: auto !important; }
.mobile {background-size: contain; }

.font-black{font-family: 'Roboto', sans-serif; font-weight: 900;}

.m-0{margin:0;}
.p-0 {padding:0;}
.p-l-0 {padding-left:0; padding-right: 0}
.m-t-20 {margin-top: 20px;}
.m-b-20 {margin-bottom: 20px;}
.dob-col {column-count: 2;}
.circle{background-color:#DEDC00;border-radius:100%;width: 50px;height: 50px;}
.circle span{width: 100%;
    text-align: center;
    display: inline-block;
    padding-top: 12px;
    font-weight: bold;
    color: #FFF;}

.lk, .cl{cursor: pointer;}

.btn{border-radius: 0; font-weight: 700; -webkit-transition: background-color 0.5s ease !important; -o-transition: background-color 0.5s ease !important; transition: background-color 0.5s ease !important; }
.btn:active{box-shadow:none;}
.btn-default {color: #fff !important; background-color: var(--main-bg); border: none;} 
.btn-default:hover {color: #fff !important; background-color: #000;}
.btn-grey {color: #fff; background-color: #9f9f9f; border: none; } 
.btn-grey:hover {color: #fff;}
.btn-black {color: #fff; background-color: #1d1d1b; border: 1px solid #fff; } 
.btn-black:hover {color: #fff; background-color: var(--main-bg);}
.btn-border {color: #fff; background: none; border: 2px solid #fff;}
.btn-border:hover {color: #fff; background-color: var(--main-bg);}
.btn-img {border: none; background: none; padding:0 5px !important;}
.btn-img:focus {outline: none; box-shadow:none;}
.btn-small {font-size: 0.9rem; padding:4px 6px;}
.btn.btn-fb, .btn.btn-tw {padding:5px 10px !important; text-transform: none !important; font-size: 0.8rem;}
.btn.btn-fb {color: #fff !important; background: #3b5998;} .btn.btn-fb:active{box-shadow:none;}
.btn.btn-fb img {margin: 0 !important; width: 10px !important;}
.btn.btn-tw {color: #fff !important; background: #03a9f4;} .btn.btn-tw:active{box-shadow:none;}
.btn.btn-tw img {margin: 0 !important; width: 22px !important;}

.bg-dark {background-color: #3c3c3b !important;}
.bg-white {background-color: #fff;}
.bg-grey {background-color: #f6f6f6;}
.bg-danger {background-color: #ffe6e9 !important;}

.back i {font-size: 34px; transform: translateY(4px);}

.grecaptcha-badge {display: none;}
.ovh {overflow:hidden;}
.overlay {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background-color: rgba(16,16,16,0.2);}
.error{color: red;}

input.nocomplete {background-color:#fff !important;}

.flex {display: flex; display: -webkit-flex;}
.flex-column {flex-direction: column;flex-wrap: wrap;}
.flex > div{flex-grow: 1}
.flex > div.wfixed{flex-shrink: 0}
.flex .ico {flex-basis: 90px; flex-shrink: 0;}
.flex .ico img {width: 50px;}

.flex h2{font-size: 1.4rem; color: #000; margin-bottom: 1rem; font-weight: 700}

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

.sep-sup {margin-top: 81px;}
.mh-65{min-height: 65vh;}

.modal-body, #area-cliente {font-size: 0.9rem;}
.modal-body p:last-child {margin-bottom: 0;}
.modal-body .form-control, #area-cliente .form-control {font-size: 0.8rem;}
.modal-body .form-group, #area-cliente .form-group {margin-bottom: 10px;}
.modal-header {padding: 10px; background-color: #f8f9fa;display: block; text-align: center;}
.modal-header button {position: absolute; left: 0; top: 20px;}
.modal-content {width: 100% !important;}
.modal .close:after, .modal .close:before {display: none;}
.modal .error {display: none;}

.popup{z-index: 90; right: 4vw; bottom: 4vw; width: 35vw; position: fixed; padding: 3vw; background: #fff; box-shadow: 0 0 35px -25px rgba(0,0,0,.75); font-size: 0.9rem;}
.popup p.h1{font-size: 1.5rem; margin-bottom: 1rem;}

.close {position: absolute; right: 32px; top: 32px; width: 32px; height: 32px; opacity: 0.3; }
.close:hover {opacity: 1; }
.close:before, .close:after {position: absolute; left: 15px; content: ' '; height: 33px; width: 2px; background-color: #333; }
.close:before {transform: rotate(45deg); }
.close:after {transform: rotate(-45deg); }

iframe {max-width: 100%}

#header {height: 100vh; position: relative;}

#header-page {height: 500px; position: relative; color: #fff; overflow: visible; margin-bottom: 150px;}
#header-page header {z-index: 1;}
#header-page header.alo {top: auto !important; transform: none; bottom: 50px;}
#header-page h1 {font-size: 2.4rem;}
#header-page h2 {font-weight: 300; font-size: 1.4rem;}
#header-page #content-header {bottom: -120px}

#content-header {width: 50%; position: absolute; left: 25%; bottom: 50px; background-color: var(--main-bg); color: #fff; padding: 50px; z-index: 9;}
#content-header h2, #content-header p.h2 {font-weight: 300; font-size: 1.4rem; margin-bottom: 0;}
#content-header .sep {margin: -20px 0}
#content-header .table {color: #fff;}

#carousel {overflow:hidden; height: 80vh;}
#carousel .carousel-inner, #carousel .carousel-item{height: 100%;}
#carousel .carousel-caption, #header-page header{position: absolute; top: 50%; transform: translateY(-50%);text-align: left; left: 20%; right: 20%; max-width: 680px; bottom: auto;}
#carousel .carousel-caption p{font-size: 1rem; line-height: 1.1;}
#carousel .carousel-caption p.title {font-size: 2.8rem; }
#carousel .carousel-caption p.subtitle {font-size: 2rem;}
#carousel .carousel-control-next, #carousel .carousel-control-prev {width: 10%;}
#carousel .anims {position: absolute; right: 0; top: 0; width: 100%; height: 100%;}
#carousel .anims img {opacity: 0; right: -100%; -moz-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; position: absolute; bottom:50px; max-height: 80%;}
#carousel .anims img.active {opacity: 1;}
#carousel .anims img.im0.active {right: 40%}
#carousel .anims img.im1.active {right: 40%}
#carousel .anims img.im2.active {right: 30%}

#menu{position: absolute; left: 0; top: 0; width: 100%; height: 150px; font-weight: 700; font-size: 0.9rem; padding:30px 50px; z-index: 99; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s;}
#logo {display: none;}
#logo, #logob {margin-right: 200px;}
#menu .btn {font-size: 0.9rem}
#menu ul li {display: inline-block; margin-right: 40px; }
#menu a {color: #fff;}
#menu div.sc {position: fixed; background: #2E3033; left: 100%; padding:0; width: 100%; height: 100vh; min-height: 100%; top:0; display: table; vertical-align: middle; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s;}
#menu div.sc ul{list-style: none; margin:0; padding:0; display: table-cell; vertical-align: middle;}
#menu div.sc ul li{display: block; text-align: center; line-height: 60px !important; margin-right: 0;}
#menu div.sc ul li ul {position: relative; padding:0 10px; display: none;}
#menu div.sc ul li a{color:#fff; text-decoration: none; line-height: 1.5rem; text-shadow: none; -moz-transition: color 0.5s ease; -webkit-transition: color 0.5s ease; -o-transition: color 0.5s ease; transition: color 0.5s ease;}
#menu div.sc ul li a:hover {color: #fff;}
#menu div.sc ul li a img {opacity: 0.8; transform: opacity 0.3s linear;}
#menu div.sc ul li a:hover img {opacity: 1;}
#menu div.sc ul li.submenu ul li {display: block; margin:0; line-height: 1.5rem; margin:5px; padding: 5px 15px;}
#menu div.sc ul li.submenu ul li:first-child {margin-top:0;}
#menu div.sc ul li.submenu ul li a {display: block; font-size:0.9rem; font-weight: 300; text-transform: none}
#menu div.sc ul li.submenu ul.open {display:block;}
#menu .hide {display: none !important;}

/*#idiomas img.lang-alt{filter: grayscale(100%); }*/

#menu.op {position: fixed; top: 0; left: 0; background-color: #fff; height: 80px; padding: 10px 50px;}
#menu.op a{color: var(--main-text);}
#menu.op #logob {display: none;}
#menu.op #logo {display: block; width: 97px; height: auto; margin-top: -5px; margin-bottom: -5px;}

#menu-tienda {transition: top linear 0.5s; top:0;}
#menu-tienda.fixed {position: fixed; top: 20px; right: 20px; background-color: #ffffff7a; padding:10px; border-radius: 20px;}

#menu div.anim, #header a.anim {animation-delay: 3s}
#menu div.anim:first-child, #menu div.anim:last-child {animation-delay: 4s}

body.🍔 {overflow: hidden;}
body.🍔 #menu div.sc{left: 0;}
body.🍔 #menu div.sc ul li a{color:#fff;}

body.nav-active #🍔{display: none;}
body.nav-active #close-nav{display: inline-block;}

.nav {display: none; opacity: 0; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 12 }
.nav-main {margin: 0 auto; padding: 0; list-style: none -webkit-align-self: center; -moz-align-self: center; -ms-align-self: center; align-self: center }
.nav-main li {line-height: 3rem;}
.nav-main li a{color: #fff;}
.nav-container {max-width: 100%; height: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex }
.nav--scroll .nav-container {overflow-y: scroll }
.nav-main-anchor {font-size: 1.6rem; font-weight: 700; -webkit-transition: color .4s ease; -moz-transition: color .4s ease; -ms-transition: color .4s ease; -o-transition: color .4s ease; transition: color .4s ease }
.nav-main-anchor.text-small {font-size: 1.4rem;}
.nav--animate>* {opacity: 0; -webkit-transform: translateZ(0) translate(25px, 0); -moz-transform: translateZ(0) translate(25px, 0); -ms-transform: translateZ(0) translate(25px, 0); transform: translateZ(0) translate(25px, 0); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; perspective: 1000; -webkit-transition: opacity .4s ease, transform .4s ease; -moz-transition: opacity .4s ease, transform .4s ease; -ms-transition: opacity .4s ease, transform .4s ease; -o-transition: opacity .4s ease, transform .4s ease; transition: opacity .4s ease, transform .4s ease }
.nav--animate.active>* {opacity: 1; -webkit-transform: translateZ(0) translate(0, 0); -moz-transform: translateZ(0) translate(0, 0); -ms-transform: translateZ(0) translate(0, 0); transform: translateZ(0) translate(0, 0); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; perspective: 1000 }
.nav--animate.active>:nth-child(1) {-moz-transition-delay: .1s; -o-transition-delay: .1s; -webkit-transition-delay: .1s; transition-delay: .1s }
.nav--animate.active>:nth-child(2) {-moz-transition-delay: .2s; -o-transition-delay: .2s; -webkit-transition-delay: .2s; transition-delay: .2s }
.nav--animate.active>:nth-child(3) {-moz-transition-delay: .3s; -o-transition-delay: .3s; -webkit-transition-delay: .3s; transition-delay: .3s }
.nav--animate.active>:nth-child(4) {-moz-transition-delay: .4s; -o-transition-delay: .4s; -webkit-transition-delay: .4s; transition-delay: .4s }
.nav--animate.active>:nth-child(5) {-moz-transition-delay: .5s; -o-transition-delay: .5s; -webkit-transition-delay: .5s; transition-delay: .5s }
.nav--animate.active>:nth-child(6) {-moz-transition-delay: .6s; -o-transition-delay: .6s; -webkit-transition-delay: .6s; transition-delay: .6s }
.nav--animate.active>:nth-child(7) {-moz-transition-delay: .7s; -o-transition-delay: .7s; -webkit-transition-delay: .7s; transition-delay: .7s }
.nav--animate.active>:nth-child(8) {-moz-transition-delay: .8s; -o-transition-delay: .8s; -webkit-transition-delay: .8s; transition-delay: .8s }
#close-nav {display: none}

#cart {position: relative;}
#cart:hover {text-decoration: none;}
#cart span {display: none; position: absolute; right: -12px; top: -10px; font-size: 12px; background-color: #be1622; color: #fff; transform:translateX(-50%); padding:0 7px; border-radius: 50% }

.table {display: table; height: 100%; margin-bottom:0}
.table > div, .table > article {display: table-cell; vertical-align: middle;}
img{max-width: 100%}

#home-main h2	{font-size: 1.6rem; color:#94c132}

#breadcrumb {padding-left: 0; text-align: center;}
#breadcrumb li {display: inline-block; list-style: none; margin-bottom: 0;}
#breadcrumb li a {text-decoration: none}
#breadcrumb li a:hover {text-decoration: underline}

#categorias {list-style-type: none; margin:0; padding:0;}
#blog #categorias {margin-bottom: 20px;}
#categorias li{display: inline-block; margin-right: 15px; cursor: pointer; padding:5px 10px; margin-bottom: 10px;}
#categorias li.active {background-color: var(--main-bg);}
#categorias li.active a {color: #fff;}

.product-category {width: 500px; height: 500px; overflow: hidden; position: relative; margin: 0 auto;}
.product-category svg, .product-category div, .product-category span{width: 100%; height: 100%; position: relative;}
.product-category div{position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);}
.product-category span {display: block; position: absolute; left: 0; top: 0; background-color: #1c955f; border-radius: 50%; z-index: -1;}
.product-category span.envero {background-color: #94c132;}
.product-category span.oro {background-color: #6a3084;}

.secciones {height: 550px; font-size: 1.2rem;}
.secciones > div:first-child{width: 20%;}
.secciones a {color: #fff; line-height: 1; width: 100%; height: 100%; display: block; position: relative; overflow: hidden;}
.secciones a div.bg {position: absolute; left: 0; top: 0; width: 100%; height: 100%; filter: grayscale(100%); -webkit-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}
.secciones a:hover div.bg {text-decoration: none; filter: grayscale(0%); transform: scale(1.1);}
.secciones a div.content {position: absolute; bottom: 0; left: 0; padding: 25px; padding-bottom: 15px;}
.secciones p {margin-bottom: 10px; text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);}

.container {max-width: 1260px;}
.container.mw {max-width: 1400px;}

#categorias h2 {font-size: 1.2rem; margin-bottom: 10px;}
#categorias h3 {font-size: 1.2rem; color: #94c132;}

.productos > div {padding-left: 20%;}
.productos a:hover {text-decoration: none;}
.productos .content {width: 35%; margin-right: 5%;}
.productos .content h3 {font-size: 1.4rem; }
.productos .content p{margin-bottom: 0.5rem; font-size: 0.9rem;}
.productos .slider {width: 60%; padding-right: 20px;}
.productos .slider h3 {font-size: 1.1rem; color: var(--main-text); font-weight: 400; margin-top: 20px; font-family: 'Roboto', sans-serif; margin-bottom: 5px;}
.productos .slider .slick-slide {padding: 0 5px; text-align: center;}
.productos .slider .slick-slide img {width: 100%;}
.productos .slider .slick-arrow {position: absolute; top: -60px; right: 20px; font-size: 50px;}
.productos .slider .slick-arrow.prev {right: 70px;}
.productos .slider .slick-arrow.slick-disabled {opacity: 0.5;}
.productos .slider .precio {font-size: 1.2rem; margin: 10px 0;}
.productos .slider .precio .small {font-size:70%; font-weight:300}
.productos strike {font-size: 0.8rem;}
.productos select {font-size: 0.8rem; padding: 2px 5px; max-width: 250px; margin: 0 auto !important; text-align: center;}

#info-tienda {font-size: 0.9rem; line-height: 1.2; padding-bottom: 25px;}
#info-tienda .col {min-width: 150px; margin-bottom: 25px;}
#info-tienda img {margin-bottom: 30px; width: 80px;}

#newsletter {}
#newsletter .content {max-width: 600px; margin: 0 auto;}
#newsletter .flex {margin-bottom: 10px;}
#newsletter div.wfixed {flex-basis: 100px; margin-left: 10px;}
#newsletter .btn {width: 100%;}
#newsletter input {background-color: #ededed; border-radius: 0;}

#newsletter-promo {position: fixed; right: -400px; bottom: 0; width: 310px; background: #fff; border: 1px solid silver; padding: 15px; font-size: 0.85rem; line-height: 1.2em; z-index: 2;}
#newsletter-promo input {font-size: 14px; margin-bottom: 10px; z-index: 9;}
#newsletter-promo button {font-size: 16px;}
#newsletter-promo p {margin-bottom: 10px;}
#newsletter-promo img {width: 100%; margin-bottom: 5px;}
#newsletter-promo label {font-size: 12px; font-weight: 300;}
#newsletter-promo .close {position: absolute; top: 3px; right: 15px;}

#map {min-height: 350px; height: 100%;}

section {padding: 50px 0; overflow: hidden;}

.parallax{width: 100%; height: 650px; -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); position: relative; background-position: 50% 0; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover;}

#p1 {background: url(../img/mar-de-olivos-arjonilla.jpg) no-repeat; }
#p2 {background: url(../img/recogida-aceitunas.jpg) no-repeat; }
#p3 {background: url(../img/quienes-somos-2.jpg) no-repeat; }

#blog .row {margin-right: 0;}
#blog article {margin-bottom: 15px; padding-right: 0;}
#blog article div.content{background: #fff; text-align: left; padding:10px; font-size: 0.9rem; position: relative;}
#blog article .foto {max-height: 265px; overflow:hidden; margin-bottom: 5px;}
#blog article img {width: 100%;}
#blog article h3 {font-size: 1.2rem; }
#blog article span, .slick-slider a span{color: #94c132; font-size: 0.8rem; margin-bottom: 5px; display: block; text-transform: uppercase}
#noticia img {max-width: 100%; height: auto;}
#noticias_relacionadas {background-color: #fff; padding: 10px;}
.pagination .page-link {color: var(--main-bg);}
.pagination .page-item.active .page-link {background-color: var(--main-bg); border-color: var(--main-bg);}

.mas-news p{margin-bottom:10px; font-size: 0.85rem;}
.mas-news p:last-child{margin-bottom: 0;}
.mas-news p a{color: #000; text-decoration: none;}
.label-categoria {background: #94c132; padding: 5px 8px; margin:0 5px 5px 0;  display: inline-block;}
.label-categoria a {color: #fff;}

#footer p.autor {font-size: 10px;}

#carousel-news {padding: 0 80px}
#carousel-news .row > div {min-height: 500px;}
#carousel-news .carousel-control-prev, #carousel-news .carousel-control-next{color: #000; font-size: 40px; }
#carousel-news .carousel-control-next{right: -50px;}
#carousel-news .carousel-control-prev{left: -50px;}

#product header {}
#product h2 {font-weight: 300; color: #94c132; margin-bottom: 0;}
#product .precio {font-weight: 400;}
#product .precio span strong {font-size: 1.8rem; color: #e30613; font-weight: 700;}
#product .cantidad {border: 1px solid #dadada; background-color: #f6f6f6; display: inline-block;}
#product hr {border-top: 1px solid #dee2e6}
#product #accordion .card {border: none; border-bottom: 1px solid #dee2e6; border-radius: 0;}
#product #accordion .card-header {padding: 5px 0; border: none; background: none; border-radius: 0; transition: background 0.5s ease;}
#product #accordion .card-header:hover {background-color: #f6f6f6;}
#product #accordion .card-header h5 {font-weight: 300;}
#product #accordion .card-header h5 button {font-weight: 300; color: var(--main-text); padding:0; display: block; text-align: left; width: 100%;}
#product #accordion .card-header h5 button:hover {text-decoration: none;}
#product #accordion .card-header h5 button span {font-weight: 300; margin-top: 4px;}
#product #accordion .card-body {padding: 0; padding-top: 10px; border-top: 1px solid #dee2e6; font-size: 0.9rem;}
#product #accordion .card-body p:last-child, #product #accordion .card-body ul {margin-bottom: 10px;}
#product .descuento {background-color: #D6AF20; color: #fff; padding: 2px 6px; float: right;}

#footer {padding:60px 0; padding-bottom: 30px; color: #fff;}
#footer .text-small {font-size: 80%;}
#footer a {color: #fff;}
#footer ul {margin-bottom: 20px;}
#footer p {font-size: 0.9rem;}
#footer input {background: none; border: none; border-radius: 0; border-bottom: 1px solid #fff; font-size: 16px; color: #fff;}
#footer input::placeholder {color: #fff; opacity: 1; }
#footer .pago img {transform: translateY(-3px);}

#footer .send {position: absolute; right: 0; top: 10px;}

@media (max-width: 1450px){
	#menu div.sc ul li {margin-right: 12px;}
	#menu div.sc ul li a {font-size:1rem;}
	.popup{padding:30px;}

  .productos > div{padding-left: 10%;}
}

@media (max-width: 1310px){
	#menu div.sc ul li {margin-right: 12px;}
	#menu div.sc ul li a {font-size:0.9rem;}
	#menu .logo{margin:10px 20px;}
	.parallax{height: 450px;}
}

@media (max-width: 1220px){
	body,html{font-size: 20px;}
	#🍔 {display: inline-block; }
	#logo, #logob {margin-right: 100px;}
	#menu {padding: 20px; height: 100px; font-size: 0.9rem;}
	#menu .logo{margin:5px 20px;}
	#menu .logo img {height: 45px;}
	#menu ul li{margin-right: 25px;}
	#menu-tienda i {font-size: 18px;}


	body.🍔 #menu div.sc{left: 0;}
	#menu div.sc {position: fixed; background: #000; left: 100%; padding:0; width: 100%; height: 100vh; min-height: 100%; top:0; display: table; vertical-align: middle; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s;}
	#menu div.sc ul {display: table-cell; vertical-align: middle; }
	#menu div.sc ul li {display: block; text-align: center; line-height: 60px !important; margin-right: 0;}
	#menu div.sc ul li ul {display: none;}
	#menu div.sc ul li a{font-size: 1.5rem;}
	#menu div.sc ul li.submenu ul li {margin-bottom: 0;}
	#menu div.sc ul li.submenu ul li:last-child {margin-bottom: 10px;}
	#menu div.sc ul li.submenu ul li a {font-size: 1rem; color: #fff;}
	#menu div.sc ul li.submenu ul.open {display:block;}
	#menu li.submenu > a i {border-width: 0px 4px 4px 0; padding: 4px;}
	#menu li.submenu > a i {border-color: #fff;}

	#content-header img {height: 135px;}

}

@media (max-width: 1100px){
	.popup{width: 50vw;}
	#logo, #logob {margin-right: 50px;}
	#content-header {width: 60%; position: absolute; left: 20%;}

  #footer form{max-width: 300px; margin: 0 auto;}
  .product-category {width: 400px; height: 400px;}
  .productos > div{padding-left: 50px}
    /*.productos .content {margin-right: 30px;}*/
}

@media (max-width: 900px){
  #menu.op {padding: 10px 25px;}  
	#menu ul li{margin-right: 15px;}
	#menu ul li:last-child{display: none;}
	#logo, #logob {margin-right: 30px;}
	#carousel-news {padding: 0 50px}
  .productos .content {width: 45%;}
  .productos .slider {width: 50%;}
}

@media (max-width: 767px){
	.popup{width: 92vw;}

	#carousel .carousel-caption, #header-page header, #content-header {left: 10%; right: 10%;}
	#content-header {width: 80%; padding: 30px}
  .product-category {width: 350px; height: 350px;}

	#carousel-news {padding: 0;}
	#carousel-news .row > div {min-height: 300px;}
	#carousel-news .row > div:last-child {min-height: auto;}
	#carousel-news .carousel-control-next i, #carousel-news .carousel-control-prev i{background: #fff; padding: 0 10px; border-radius: 50%;}
	#carousel-news .carousel-control-next{right: 0; bottom: auto; top: 50px}
	#carousel-news .carousel-control-prev{left: 0; bottom: auto; top: 50px}
	#carousel-news .carousel-control-next i:before {margin-left: 5px;}
	#carousel-news .carousel-control-prev i:before {margin-right: 5px;}

  #header-page #content-header {bottom: -90px}

	.secciones {height: auto}
	.secciones div.flex-grow-1 {width: 100% !important;}
	.secciones a {height: 350px; }

  .productos .content, .productos .slider {width: 100%; margin: 0}
  .productos .content {margin-bottom: 50px;}

}

@media (max-width: 575px){

	#menu {padding:20px;}
	#logo img {width: 200px; padding-right: 15px;}
	
	#carousel .carousel-caption p.title{font-size: 2.4rem; }
	#carousel .carousel-caption p.subtitle{font-size: 1.8rem;}

	#carousel .carousel-caption p.subtitle {
	    line-height: 3rem;
	}
	#content-header h1, #content-header p.h1 {font-size: 1.4rem;}
	#content-header h2, #content-header p.h2 {font-size: 1.2rem;}

  .productos > div{padding-left: 25px} 

  #product .descuento {display: inline-block; float: none; margin: 0 20px;}
}

@media (max-width: 450px){
	#content-header {width: 90%; left: 5%; padding: 20px;}
}

@media (max-width: 380px){
  .product-category {width: 300px; height: 300px;}
}

@media (min-width: 530px){
}

@media (min-width: 576px){
	.modal-content {width:inherit;} 
}

@media (min-width: 768px){
	
}

@media (min-width: 1080px){

}

@media (min-width: 1201px){
	#menu li ul {position: absolute; right: 0; top: 80px; width: 250px; overflow-y: hidden; padding: 0px 5px 5px 5px; z-index: 2; background:none;}
	#menu li ul:before {content: ""; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; -webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.5); -moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.5); box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.5); background-color: #fff;} 
	#menu li ul li:hover {background-color: #eaeaea;}
	#menu li.submenu:hover ul {display: block;}
}

@media (min-width: 1300px){
}

@media (min-width:768px) {
	.nav-container {
		padding: 10px;
		margin: 0
	}

	.nav-main {margin:0;}

}

@media (max-width:767.98px) {
	.nav-main {
		padding-top: 90px;
		padding-bottom: 90px
	}
}

@media (min-width:768px) {
	.nav-main {
		width: 35%;
		padding-top: 30px;
		padding-left: 5%
	}
}

@media (min-width:768px) {
	.nav--scroll .nav-main {
		padding-top: 100px
	}
}

@media (max-height: 650px){
	body,html{font-size: 20px;}
#content-header {bottom: 0; padding: 30px;}
}


.product-details-row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between
}

.product-details-row .product-image {
  width: 150px;
  margin: 0 40px 0 0
}

.product-details-row .product-name-and-price {
  -ms-flex: 1;
  flex: 1;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between
}

.product-details-row .product-price {
  width: auto;
  margin-left: 10px
}

#modal-product-name {
  font-size: 1.2rem;
}

#modal-product-price {font-weight: 700;}

@media(max-width:640px) {
  .product-details-row .product-name-and-price {
    display: block
  }
  .product-details-row .product-image {
    margin-right: 30px
  }
  .product-details-row .product-price {
    margin: 8px 0 0
  }
}

@media(max-width:400px) {
  #header-page {height: 550px; margin-bottom: 120px;}
}