@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html, body{width: 100%; margin: 0; padding: 0; font-family: 'Archivo', sans-serif; color: #000000; background: white;}
* div{box-sizing: border-box;}
* img, * iframe{display: block; width: 100%;}

/* width */
::-webkit-scrollbar { width: 7px; }
/* Track */
::-webkit-scrollbar-track { background: #342313; }
/* Handle */
::-webkit-scrollbar-thumb { background: #e5ad7a; }
/* Handle on hover */
::-webkit-scrollbar-thumb:hover { background: #eacfb5; }

.captcha-box {height: 25px;left: -3200px;position: fixed;top: -50px;width: 100px;}

/* -------- Header --------*/

header{display: block; width: 100%; max-width: 1920px; position: absolute; top:0; left: 0; margin: 0 auto; background: transparent; z-index: 99;}
header:before{content:''; display: block; position: absolute; width: 20%; height: 100%; top: 0; left: 0; background-color: white; z-index: 1;}
header:after{content:''; display: block; position: absolute; width: 80%; height: 82%; top: 0; right: 0; background-color: #ab7442; z-index: 1;}
@media screen and (min-width: 992px){
  header:after{height: 75%;}
}

main{flex: 1 1 auto; display: flex; flex-flow: column wrap; min-height: 100vh; margin: 0; padding: 0; overflow: hidden;}
.pageWrapper{width: 100%; flex: 1 1 auto; margin: 0 auto;}
@media screen and (min-width: 1200px){
  .pageWrapper{width: 100%;}
}

.headerWrapper{justify-content: space-between; align-items: flex-start; width: 96%; max-width: 1600px; margin: 0 auto;}

.header-icons{ width: calc(100% - 120px); justify-content: space-between;background: transparent;z-index: 5; padding: 0.95rem 0;}
@media screen and (min-width: 768px){
  .header-icons{width: calc(100% - 190px); padding: 0.5rem 0;}
}
@media screen and (min-width: 992px){
  .header-icons{width: calc(100% - 250px); padding: 0.65rem 0;}
}
@media screen and (min-width: 1200px){
  .header-icons{width: calc(100% - 240px); padding: 2rem 0;}
}

.section-top{display: block; width: 100%; position: relative; padding-top: 4rem;}
.section-top:before{content:''; display: block; position: absolute; width: 30%; height: 45%; top: 0; left: 0; background-color: #cccccc; z-index: 1;}
.section-top:after{content:''; display: block; position: absolute; width: 70%; height: 45%; top: 0; right: 0; background-color: #ab7442; z-index: 1;}

.heroImg{ justify-content: center; align-items: center; position: relative; max-width: 1600px; min-height: 320px; margin: 0 auto; padding: 2rem 0; z-index: 3; background-image: url('../images/hero-img.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; text-align: center;}
.heroImg:after{content:''; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #343434; opacity: 0.8; z-index: 1;}
.heroText{display: block; position: relative; z-index: 5; color: white;}
.heroText h2{font-size: 24px; line-height: 1.2; font-weight: 200; text-transform: uppercase;}
.heroText h3{font-size: 19px; line-height: 1.2; font-weight: 900; text-transform: uppercase; margin-bottom: 2rem;}
h4.price {text-align: center; color: #a2dd50;}
@media screen and (min-width: 768px){
  .heroImg{min-height: 380px; padding: 3rem 0; }
  .heroText h2{font-size: 42px;}
  .heroText h3{font-size: 28px;}
}
@media screen and (min-width: 1200px){
  .heroImg{min-height: 520px; padding: 5rem 0; }
  .heroText h2{font-size: 60px;}
  .heroText h3{font-size: 42px;}
}


.btn{border-radius: 0; font-size: 14px; text-transform: uppercase; font-weight: 800; letter-spacing: 0.2px;}
.btn:hover{background-color: #a2dd50; border-color: transparent; }
.btn:active, .btn:focus, .btn:active:focus{background-color: #a2dd50; border-color: #a2dd50; box-shadow: none; outline: none;}
.btn-lg{padding: 0.75rem 2.5rem; font-size: 14px;}
@media screen and (min-width: 992px){
  .btn-lg{font-size: 16px;}
}

.section{display: block; width: 100%; padding: 2rem 0;}

.titleWrapper{display: block; width: 100%; max-width: 1600px; margin: 0 auto; position: relative; z-index: 3;}
.sectionTitle{display: block; width: 100%; text-align: center; font-size: 20px; line-height: 1.2; text-transform: uppercase; font-weight: 900; padding-bottom: 1rem; margin-bottom: 2rem;}
.sectionTitle:before{content:''; display: block; position: absolute; width: 144px; height: 2px; bottom: 0; left: 0; right: 0; margin: 0 auto; background-color: #cccccc;}
.sectionTitle:after{content:''; display: block; position: absolute; width: 44px; height: 5px; bottom: -3px; left: 0; right: 0; margin: 0 auto; background-color: #dba64b;}
@media screen and (min-width: 992px){
  .sectionTitle{font-size: 28px;}
}

/*Products*/

.product{justify-content: space-between; align-items: stretch; width: 96%; max-width: 1600px; margin: 0 auto; position: relative;}
.product-item{width: calc( 100% / 2 - 0.5rem ); margin-bottom: 1rem;}
.product-item:hover .product-item-img img{transform: scale(1.1);}
.product-item-img{display: block; width: 100%; position: relative; overflow: hidden;}
.product-item-img img{transition: all 0.2s ease-in-out;}
.product-item-img:after{content:''; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #343434; opacity: 0.5; z-index: 1;}
.product-item-img .flag{display: block; position: absolute;  top: 0; right: 0; width: 0; z-index: 3;
  height: 0;
  border-style: solid;
  border-width: 0 48px 48px 0;
  border-color: transparent #8ec63f transparent transparent;
}
.product-item-img .flag:after{content:''; display: block; position: absolute; width: 48px; height: 48px; top: 0; left: 0; background-color: transparent; background-image: url('../images/sale.svg'); background-repeat: no-repeat; background-position: top 5px right 5px; background-size: 19px 19px;}
.product-item-title{display: block; width: 100%; position: absolute; width: 100%; left: 0; bottom: 0; font-size: 16px; line-height: 1.2; font-weight: 800; color: white; text-transform: uppercase; letter-spacing: 0.5px; text-align: center; padding: 1rem; z-index: 3;}
.btn-product{width: 100%; font-size: 13px; line-height: 38px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 900; border-radius: 0;}
.btn-product:hover{background-color: #8dc63f; color: white;}

@media screen and (min-width: 576px){
  .product-item{width: calc( 100% / 3 - 0.5rem )}
  .product-item-title{font-size: 18px;}
}
@media screen and (min-width: 1200px){
  .product-item{width: calc( 100% / 5 - 0.5rem )}
  .product-item-title{font-size: 22px;}
}



/*Promotion*/

.section-promotion{padding-top: 0;}
.promotion{justify-content: center; align-items: center; width: 100%; max-width: 1600px; margin: 0 auto; position: relative; background-image: url('../images/promotion-bg.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover;}
.promotion:before{content:''; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #343434; opacity: 0.8; z-index: 1;}
.promotion-text{display: block; max-width: 1200px; position: relative; z-index: 3; color:white; text-align: center; padding: 3rem 2rem;}
.promotion-text h3{display: block; width: 100%; font-size: 20px; line-height: 1.3; text-transform: uppercase; font-weight: 900; margin-bottom: 1rem;}
.promotion-text h4{display: block; width: 100%; font-size: 20px; line-height: 1.3; text-transform: uppercase; font-weight: 900; margin-bottom: 1rem; color: #8ec63f;}
.promotion-icon{display: block; position: absolute; top: 0; left: 0; z-index: 5;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 90px 90px 0 0;
  border-color: #8ec63f transparent transparent transparent;}
  .promotion-icon:before{content:''; display: block; position: absolute; width: 90px; height: 90px; top: -90px; left: 0; background-color: transparent; background-image: url('../images/promotion-icon.svg'); background-repeat: no-repeat; background-position: top 9px left 9px; background-size: 32px 32px;}
  @media screen and (min-width: 992px){
    .promotion-text{padding: 3rem;}
    .promotion-text h3{font-size: 32px;}
    .promotion-text h4{font-size: 28px;}
  }
  @media screen and (min-width: 1200px){
    .promotion-text{padding: 7rem;}
  }


  /*Contact*/
  .section-contact{display: block; max-width: 1600px; width: 100%; margin: 0 auto; padding: 4rem 0; background-color: #fbf4f4; background-image: url('../images/contact-bg.svg'); background-repeat: no-repeat; background-position: center center; background-size: cover;}
  .contact-form{justify-content: center; align-items: center;}
  .contactForm .formItem__alert { font-size: 13px; color: red; margin: 5px 0; }
  .section-contact form{max-width: 720px; width: 96%; background-color: white; padding: 1rem;}
  .section-contact form input, .section-contact form select, .section-contact form textarea, .section-contact form > div{margin-bottom: 1rem; border-radius: 0;}
  .section-contact form input:focus,.section-contact form input:active, .section-contact form select:focus, .section-contact form textarea:focus{border-color: #ddd; outline-color: #ddd; box-shadow: 0 0 0 0.25rem rgba(141, 198, 63, 0.2);}
  .form-check-input:checked{background-color: #8dc63f;border-color: #8dc63f;}
  .form-check-input:focus{border-color: #8dc63f; outline: 0; box-shadow: 0 0 0 0.25rem rgb(141 198 63 / 50%);}
  .form-switch .form-check-input:focus{ background-image: url('../images/checkbox.svg'); }
  .section-contact .buttonWrapper{justify-content: center; align-items: center; text-align: center; margin-top: 2rem;}
  @media screen and (min-width: 1200px){
   .section-contact form{padding: 2rem;}
 }



 .contact-map iframe{height: 320px}
 .contact-data{display: block; max-width: 1600px; margin: 0 auto; background-color: #fbf4f4}
 .contact-text{padding: 2rem;}
 .contact-text h4{display: block; text-transform: uppercase; font-size: 18px; line-height: 1.4; font-weight: 900; margin-bottom: 1rem;}
 @media screen and (min-width: 992px){
  .contact-text{padding: 4rem 2rem;}
  .contact-text h4{font-size: 20px;}
}


.header-social{width: 100%; padding: 0; margin-left: 0; z-index: 10;}
@media screen and (min-width: 992px){
  .header-social{width: auto; margin-left: 2rem;}
}
@media screen and (min-width: 1200px){
  .header-social{}
}

.navbar-brand{display: inline-block; vertical-align: middle; position: relative; max-width: 300px; margin: 0; transition: all 0.2s ease; z-index: 10; padding: 0.5rem; background-color: white; }
.navbar-brand img{max-width: 64px;}
.navbar-brand h1{display: inline-block; vertical-align: middle; margin: 0; font-size: 1.2rem; line-height: 1; font-weight: 200; color: black;}
.navbar-brand h1 span{font-weight: 900;}
@media screen and (min-width: 768px){
  .navbar-brand{padding: 0.51rem }
  .navbar-brand img{max-width: 90px;}
}
@media screen and (min-width: 992px){
  .navbar-brand{padding: 1rem;}
}
@media screen and (min-width: 1200px){
  .navbar-brand{padding: 1rem; }
  .navbar-brand img{max-width: 120px;}
  
}

/*social icons*/
.btn-social{position: relative; padding: 0; margin-right: 0; font-size: 0; line-height: 0; font-weight: 600; color: white; }
.btn-social span{display: none; font-size: 13px; line-height: 1.2; font-weight: 600; color: white;}
.btn-social:before{content: ''; display: inline-block; vertical-align: middle; position: relative; width: 32px; height: 32px; top: 0; margin-right: 1rem; border: 1px solid white; border-radius: 50%; background-color: transparent; z-index: 1; background-repeat: no-repeat; background-position: center center; background-size: 13px 13px;box-shadow: 0 0 0 4px rgb(255 255 255 / 20%); transition: all 0.2s ease-in-out}

.btn-social:last-child{margin-left: 0;}
.btn-social-phone:before{background-image: url(../images/phone.svg);}
.btn-social-email:before{background-image: url(../images/email.svg);}

.btn-social-facebook{margin: 0;}
.btn-social-facebook:before{background-image: url(../images/facebook.svg); margin: 0;}


.btn-social:hover{background-color: transparent; color: white;}
.btn-social:hover:before{background-color: #8dc63f; border-color: #8dc63f; box-shadow: 0 0 0 6px rgb(141 198 63 / 20%); color: white;}
.btn-social:hover:after{opacity: 1;}
@media screen and (min-width: 768px){
  .btn-social{margin-right: 2rem; font-size: 13px; line-height: 1.2;}
  .btn-social span{display: inline-block; vertical-align: middle;}
  .btn-social:before{width: 44px; height: 44px; background-size: 15px 15px;}
  .btn-social-facebook{margin: 0;}
}


/* -------- Footer --------*/

footer{display: block; width: 100%;position: relative;}
footer:before{content: '';
display: block;
position: absolute;
width: 92%;
height: 90%;
top: 0;
left: 0;
background-color: #ab7442;
z-index: 1;}
footer:after{    content: '';
display: block;
position: absolute;
width: 9%;
height: 90%;
top: 0;
right: 0;
background-color: #cccccc;
z-index: 1;}
.footer{ justify-content: center; align-items: center; flex-direction: column-reverse; position: relative; max-width: 1600px; margin: 0 auto; z-index: 5; padding: 0.5rem 0;}

.footer .footer-logo{display: inline-block; position: relative;}
.footer .footer-logo .navbar-brand{padding: 1rem;}
.footer .footer-logo .navbar-brand img{max-width: 90px;}
.footer .footer-logo:before{
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: -1rem;
  left: -1rem;
  background-color:#ab7442;
  z-index: 1;
}
.footer .footer-logo:after{
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: -2rem;
  left: 2rem;
  background-color: #cccccc;
  z-index: 1;
}
.footer-links{width: 100%; text-align: center; margin: 1rem 0;}

@media screen and (min-width: 768px){
  .footer{justify-content: space-between; flex-direction: row;}
  .footer-links{width: calc(100% - 175px); text-align: left; margin: 0;}
}
@media screen and (min-width: 992px){
  .footer-links{width: calc(100% - 275px); text-align: left; margin: 0;}
}

.footer-brand{display: inline-block; position: relative; width: 100%; max-width: 160px; margin: 0 auto; z-index: 2;}
@media screen and (min-width: 768px){
  .footer-brand{max-width: 200px;}
}
@media screen and (min-width: 1200px){
  .footer-brand{max-width: 260px;}
}
.footer-social{width: 100%; margin: 1rem 0 0; display: inline-block; vertical-align: middle;}
@media screen and (min-width: 768px){
  .footer-social{width: auto; margin-top: 0;}
}
.footer-social .btn-social{margin-right: 1rem;}
.footer-social .btn-social:last-child{margin-right: 0;}
.footer-social .btn-social:before{margin-right: 0;}
.footer-social .btn-social:hover:before{background-color: #8e6036; border-color: #8e6036; box-shadow: 0 0 0 6px rgb(142 96 54 / 20%);}
@media screen and (min-width: 768px){
  .footer-social .btn-social{margin-right: 1rem;}
}


.footer-menu{display: block; position: relative; width: 100%; list-style-type: none; margin: 0; padding: 0; text-align: center;}
@media screen and (min-width: 768px){
  .footer-menu{display: inline-block; vertical-align: middle; width: auto; text-align: right;}
}



.footer-menu li{display: block; position: relative; min-width: 160px;}
.footer-menu li:after{content: ''; display: none; position: absolute; top: calc(50% - 12px); right: -2px; width: 1px; height: 24px; background: white;}
.footer-menu li:last-child:after{display: none;}
.footer-menu li a {display: block; width: 100%; font-size: 13px; line-height: 1; font-weight: 500; padding: 0.5rem 2rem; color: white; text-decoration: none; text-transform: uppercase; text-align: center; }
.footer-menu li a:hover{color: #342313;}
@media screen and (min-width: 768px){
  .footer-menu li{display: inline-block; vertical-align: middle;}
  .footer-menu li:after{display: block;}
}

.copyright{display: block; position: relative; width: 100%; background-color: #342313; color: white; padding: 0.5rem 0; z-index: 5;}
.copyrightContainer{ max-width: 1600px; margin: 0 auto; text-align: center;}
@media screen and (min-width: 1200px){
  .copyrightContainer{}
}

.copyright span{display: inline-block; vertical-align: middle; font-size: 12px; line-height: 1; color: white; padding: 0 1rem;}
.copyright span a{display: block; text-decoration: none; font-weight: 800; color: white;}
.copyright span a:hover{color: #8dc63f;}


/* -------- Pages --------*/
.section-static{ position: relative;padding-top: 7rem;}
.section-static:before{content:''; display: block; position: absolute; width: 30%; height: 6rem; top: 0; left: 0; background-color: #cccccc; z-index: 1;}
.section-static:after{content:''; display: block; position: absolute; width: 70%; height: 6rem; top: 0; right: 0; background-color: #ab7442; z-index: 1;}
.section-static .titleWrapper h3{background-color: white; padding: 2rem;}
.staticText{display: block; position: relative; width: 96%; max-width: 960px; margin: 0 auto; padding: 1rem; z-index: 3; background-color: #fbf4f4;}
@media screen and (min-width: 992px){
  .section-static{padding-top: 8rem;}
  .section-static:before{height: 9rem;}
.section-static:after{height: 9rem;}
.staticText{padding: 2rem; }
}



#cookie-bar {background:#000000; height:auto; color:#eeeeee; text-align:center; padding: 10px 0;z-index:10000;opacity: 0.9;}
#cookie-bar.fixed {position:fixed; top:0; left:0; width:100%;}
#cookie-bar.fixed.bottom {bottom:0; top:auto;}
#cookie-bar p {margin:0; padding:0; font-size: 14px;}
#cookie-bar a {color:#ffffff; display:inline-block;}
#cookie-bar .cb-enable {background:#8dc63f; font-size: 15px; line-height: 24px; text-decoration:none; padding:7px 16px; margin:0 16px;}
#cookie-bar .cb-enable:hover {background:#129EA1;}
#cookie-bar .cb-disable {background:#990000;}
#cookie-bar .cb-disable:hover {background:#bb0000;}
#cookie-bar .cb-policy {background:#0033bb;}
#cookie-bar .cb-policy:hover {background:#0055dd;}