@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&family=Montserrat:wght@300;400;600&display=swap');
@font-face {
    font-family: 'brandon';
    src: url('../fonts/BrandonText-Black.woff2') format('woff2'),
    url('../fonts/BrandonText-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;

}






html, body {
 font-family: 'Cormorant Garamond', serif;font-size: 18px; line-height: 26px;
}
h1, h2, h3{font-family: 'brandon'; font-weight: bold; text-transform: uppercase;}
h1 {font-size: 45px; line-height: 40px}
h2, h3 {font-size: 36px; line-height: 40px;}

.prodotto h1 span, .page h1 span {font-size: 24px;}
.prodotto h2.text, .page h2.text {font-family: 'Cormorant Garamond', serif; font-size: 20px; line-height: 26px; text-transform: inherit;}

a {  color: #fff;}
.font-brand{font-family: 'brandon'; }
a:hover{text-decoration: none !important;}
.c-white a:hover {color: #fff}


/*@media(min-width: 991px){
    h1 {font-size: 68px; line-height: 70px}
    h2, h3 {font-size: 48px; line-height: 50px;}
    .prodotto h1 span, .page h1 span {font-size: 24px;}
}*/

@media(min-width: 1400px){
    h1 {font-size: 68px; line-height: 70px}
    h2, h3 {font-size: 48px; line-height: 50px;}
    .prodotto h1 span, .page h1 span {font-size: 24px;}
}
@media(min-width: 1600px){
    h1 {font-size: 86px; line-height: 90px}
    h2, h3{font-size: 68px; line-height: 70px}
    .prodotto h1 span, .page h1 span {font-size: 36px;}
}

#hamburger {width: 55px; height: 55px;position: absolute; z-index: 300;right: 20px; top: 15px;}
.toggle {width: 50px; height: 50px; background-color: transparent; position: fixed; z-index: 1000; cursor: pointer;background-color: rgba(0,0,0,0.65)}
.toggle span {width: 30px; height: 2px; /*background: #414141;*/ background: #fff; top: 15px; position: absolute; left: 10px; transform: translate(0%, 0%); transition: 0.4s;}
.toggle span:nth-child(2) {margin-top: 10px;}
.toggle span:nth-child(3) {margin-top: 20px;}
.toggle.active span:nth-child(1) {transform: rotate(45deg); margin-top: 10px; transition-duration: 0.4s;}
.toggle.active span:nth-child(2) {opacity: 0; transition-duration: 0.1s;}
.toggle.active span:nth-child(3) {transform: rotate(-45deg); margin-top: 10px; transition-duration: 0.4s;}
.text-close, .text-open {position: absolute; right: 85px; top: 18px; transition-duration: 0.4s;}
.text-close.active, .text-open {opacity: 1; transition-duration: 0.5s;}
.text-close, .text-open.active {opacity: 0; transition-duration: 0.5s;}
/*.intro-sub {display: block;}
.intro-sub.remove {display: none;}
.intro-sub span {font-size: 1.5rem; opacity: 0.2; font-weight: 600; color: white; font-family: 'Helvetica', sans-serif}*/
#menu ul {list-style-type: none;}
#menu ul li a, #menu ul li a:hover {color: white; text-decoration: none; transition-duration: 0.2s; background-position: right;}
#menu .collapsing { position: relative; height: 0; overflow: hidden; transition: 0s ease;}
#menu .fade { transition: opacity .25s linear; }
.dropdown-item{letter-spacing: 1px;}
/*#menu label {color: #fff !important;}*/


/*FORM*/
.form-control {
    height: 50px;
    border: 0 !important;
    border-bottom: 2px solid #8C0000 !important;
    border-radius: 0 !important;
    padding: 0.75rem 1rem !important;
}
.form-row>.col, .form-row>[class*=col-] {
    padding-right: 10px;
    padding-left: 0;
}
textarea.form-control {
    height: auto;
    min-height: 276px;
    border: 2px solid #8C0000 !important;
}

.form-control ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #8C0000;
  opacity: 1;
}




.lds-spinner {color: official;display: inline-block;position: relative;width: 80px;height: 80px;}
.lds-spinner div {transform-origin: 40px 40px;animation: lds-spinner 1.2s linear infinite;}
.lds-spinner div:after {content: " ";display: block;position: absolute;top: 3px;left: 37px;width: 6px;height: 18px;border-radius: 20%;background: #000;}
.lds-spinner div:nth-child(1) {transform: rotate(0deg);animation-delay: -1.1s;}
.lds-spinner div:nth-child(2) {transform: rotate(30deg);animation-delay: -1s;}
.lds-spinner div:nth-child(3) {transform: rotate(60deg);animation-delay: -0.9s;}
.lds-spinner div:nth-child(4) {transform: rotate(90deg);animation-delay: -0.8s;}
.lds-spinner div:nth-child(5) {transform: rotate(120deg);animation-delay: -0.7s;}
.lds-spinner div:nth-child(6) {transform: rotate(150deg);animation-delay: -0.6s;}
.lds-spinner div:nth-child(7) {transform: rotate(180deg);animation-delay: -0.5s;}
.lds-spinner div:nth-child(8) {transform: rotate(210deg);animation-delay: -0.4s;}
.lds-spinner div:nth-child(9) {transform: rotate(240deg);animation-delay: -0.3s;}
.lds-spinner div:nth-child(10) {transform: rotate(270deg);animation-delay: -0.2s;}
.lds-spinner div:nth-child(11) {transform: rotate(300deg);animation-delay: -0.1s;}
.lds-spinner div:nth-child(12) {transform: rotate(330deg);animation-delay: 0s;}
@keyframes lds-spinner { 0% {opacity: 1;} 100% {opacity: 0;} }
.lds-spinner{position: absolute;bottom: 10%; right: 50%;transform: translate(50%,-50%);}
.form-loading{position: absolute; top: 0px; left: 0px; background-color: rgba(255,255,255,0.8);height: 100%; width: 100%;z-index:30}



img.lazy{opacity: 0;}
img.lazy.loaded{opacity:1; transition: all 0.5s}
/*.container-fluid{max-width: 1630px}*/
#header{padding-top: 10px; padding-bottom: 10px;font-family: 'brandon'; position: fixed;z-index: 200;width: 100vw; transition: all 0.4s }
#header nav{position: absolute;top: 0px;left: 0px; background-color: rgba(0,0,0,0.8);color: #fff; height: 100vh; display: flex;align-items: center; justify-content: center}
.logo-link{position: relative; z-index: 10}
#header nav ul{padding: 0px;list-style-type: none; margin-bottom: 0px; letter-spacing: 3px; line-height: 2rem;}
#header a:hover{color: #fff; text-decoration: none}
#header .container-fluid {max-width: 1630px;}

.logo-link img{max-width: 80px; transition: all 0.4s}
@media (min-width: 992px) {
    .max-w-lg-300{max-width: 350px}
    .max-w-lg-450{max-width: 450px}
}
@media (min-width: 1200px) {
    #header{background-color: rgba(0,0,0,0.5); color: #fff; /*border-bottom: solid 2px #fff*/}
    .logo-link img{max-width: 100px}
    #header.sticky{background-color: rgba(0,0,0,0.9); padding-top: 7px; padding-bottom: 7px}
    #header.sticky .logo-link img{max-width: 80px}

    nav ul li{display: inline-block; margin: 0px 12px}
    #header nav{position: relative;top: 0px;left: 0px; background-color: transparent;color: #fff; height: auto; display: block;}
    .max-w-xl-300{max-width: 350px}

}

.container-products{max-width: 1260px; margin: auto;padding-left: 15px; padding-right: 15px}


#header.active nav{display: flex !important;}

.main-bg{background-image: url("../images/bg.jpg"); background-size: cover}
#main-cover{background-size: cover; background-repeat: no-repeat; background-position: center;}
#main-claim{position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    /*width: 800px;*/
    padding: 22px;
    text-shadow: 0px 0px 1px rgb(0 0 0 / 58%);
    max-width: 100%;}
#main-claim p{font-size: 20px}



.radius-right-top{
    -webkit-border-top-right-radius: 80px;
    -moz-border-radius-topright: 80px;
    border-top-right-radius: 80px;
}
.radius-left-top{
  -webkit-border-top-left-radius: 80px;
  -moz-border-radius-topleft: 80px;
  border-top-left-radius: 80px;
}


@media(min-width: 991px){
    #main-cover{background-image: transparent !important;}
    #main-claim{top: 285px;}
    .homepage #main-claim{top: 70%; width: 800px;}

    .radius-right-top{
        -webkit-border-top-right-radius: 120px;
        -moz-border-radius-topright: 120px;
        border-top-right-radius: 120px;
    }
    .radius-left-top{
      -webkit-border-top-left-radius: 120px;
      -moz-border-radius-topleft: 120px;
      border-top-left-radius: 120px;
    }
}


.c-red,.c-red:hover{color: #8C0000; text-decoration: none}
.c-white,.c-white:hover{color: #fff;}

.btn-brand{position: relative;font-family: 'brandon';}
.btn-brand:before{content: "\2192";position: absolute; right: 20px;top: 4px; font-size: 26px; top: 0px; right: -30px}
.btn-brand-inverse{ position: relative;font-family: 'brandon'; background-color: #8c0000;
    color: #fff;
    padding: 5px 20px;
    border-radius: 20px;}
.btn-brand-inverse:hover { color: #8c0000; background-color: #fff;}
.social .btn-brand:before{content: "";}
.social .btn-brand:before {right: 0px}

.products-card .p-card{position: relative; padding: 5px 30px}
/*.products-card .p-card >div{max-width: 350px;margin: auto}*/
.products-card .bottle{position: absolute; width: 34%; left: 50%;top: 50%; transform: translate(-50%, -50%)}
.label{position: relative}
.label span{display: block; line-height: 100%; position: absolute;width: 100%; text-align: center; top: 50%; left: 0px; z-index: 2;transform: translateY(-50%); text-transform: uppercase; font-weight: bold; font-family: "brandon"}
.px-30{padding-left: 30px; padding-right: 30px}
.mx-n-30{margin-left: -30px; margin-right: -30px}
@media(min-width: 768px){
    .mx-md-n30{margin-left: -30px !important; margin-right: -30px !important;}
}

.p-card img:first-child{z-index: 3}
.p-card:hover .pic img:last-child{transform: scale(0.9);}
.p-card:hover .pic img:first-child{transform: scale(1.1) translate(-50%,-50%)}
.cocktails img{transition: all 0.2s !important; border-top-right-radius: 120px}
.cocktails img:hover{border-top-right-radius: 0px}
.cocktails > div{overflow: hidden}
input[type="email"]{border:none;border-bottom: 2px solid #8C0000;background-color: transparent; }
input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #8C0000;
    opacity: 1; /* Firefox */
}
.fs-15{font-size: 1.25rem}
footer{background-color: #8C0000;font-family: 'brandon';}
footer hr{border-top: 2px solid rgba(255,255,255,1)}
.animated-side-l,.animated-side-r{transition: all 0.8s; transition-delay: 0.5s;opacity: 0.1}
.animated-side-l{transform: translateX(-100%); }
.animated-side-r{transform: translateX(100%);}
.animated-side-l.active,.animated-side-r.active{transform: translateX(0%); opacity: 1}
.bottom-center{position: absolute; z-index: 3; bottom: 10px;text-align: center; width: 100%}

.ml-n15{margin-left: -17px !important;display: block}
.ml-15{margin-left: 15px !important;display: block}
.mr-n15{margin-right: -17px !important;display: block}
.mr-15{margin-right: 15px !important;display: block}


.gallery .slick{width: 100%; margin-left: 0%;}


@media(min-width: 1200px) and (max-width: 1320px){
    #header{font-size: 13px}
    /*#header nav ul li{margin: 0px 2px}*/
}
@media(min-width: 1321px) and (max-width: 1500px){
    #header{font-size: 14px}
    /*#header nav ul li{margin: 0px 5px}*/
}
@media(min-width: 992px){
  .products-card .first{margin-left: 1px}
  .gallery .slick{width: 130%; margin-left: -15%;}
}





.bg-color-page{background-color: #8C0000; color: #fff;}

.bg-color-product{background-color: #E8DEC1;}
.bg-color-secco {background-color: #D0D9C3;}
.bg-color-rosso {background-color: #D9C4C3;}
.bg-color-bianco {background-color: #C3CDD9;}
.bg-color-vecchio {background-color: #D9CFC3;}
.bg-color-chinato {background-color: #D9D9D9;}
.bg-color-kopi {background-color: #D9D1C3;}
.bg-color-sakura {background-color: #D9C4C3;}
.bg-color-marino {background-color: #6f2a2d;}

.color-secco {color: #495E2C;}
.color-rosso {color: #912420;}
.color-bianco {color: #19385B;}
.color-vecchio {color: #5C482E;}
.color-chinato {color: #666666;}
.color-kopi {color: #A0834D;}
.color-sakura {color: #B27270;}
.color-marino {color: #6f2a2d;}



/*
.bg-color-claypot {background-color: #;}
.color-claypot {background-color: #;}
*/

.prodotto #main-cover .divider {background-image: url("../images/divider.svg"); background-position: center; background-size: contain; background-repeat: no-repeat;}

.container-product div > img {margin-top:-10%!important; margin-bottom:-10%!important}
.container-product {margin-bottom:10%!important}

@media(max-width: 768px){
   .hoz-paroller-cont{
    height: 108px !important;
    margin: -54px 0px -54px !important;
    }
}


.hoz-paroller-cont {
    position: relative;
    overflow: hidden;
    height: 160px;
    margin: -80px 0px -80px;
    z-index: 4;
    width: 100%;
    padding: 30px 0px;
}
.hoz-paroller {
    position: absolute;
    width: 1500%;
    margin-left: -150%;
}
.hoz-paroller > span {
    font-family: 'brandon';
    font-weight: bold;
    color: transparent;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: #CBCCCA;
    display: inline-block;
    font-size: 68px;
    line-height: 70px;
    font-weight: bold;
    text-transform: uppercase;
}

.hoz-paroller > span:before {
    content: '-';
    font-family: 'brandon';
    color: transparent;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: #CBCCCA;
    font-size: 68px;
    line-height: 70px;
    display: inline-block;

    margin: -30px 20px 0px;

    vertical-align: middle;
}
@media(max-width: 990px){
    .vh-100 {
        height: 100vh!important;
    }
    .vh-85 {
        height: 85vh!important;
    }
}



@media (min-width: 768px) {
    .modal-dialog {
        max-width: 700px;
        margin: 1.75rem auto;
    }
}

@media (min-width: 991px) {
    .modal-dialog {
        max-width: 900px;
        margin: 1.75rem auto;
    }
}
.filter-controller a{transition: all 0.3s; text-transform: uppercase}
.filter-controller a.active{font-weight: bolder; font-size: 1.2rem}
.filtered-items > div{transition: all 0.5s;overflow: hidden}
.filtered-items > div.hidden{width: 0px; height: 0px; padding: 0px !important;}


/*ETICHETTA*/

.etichetta h3 {font-size:20px}
.etichetta .btn-brand-back:before {
    content: "\2190";
    position: absolute;
    right: 20px;
    top: 4px;
    font-size: 26px;
    top: 0px;
    left: -30px;
}
.etichetta .table thead th {
    vertical-align: bottom;
    border-bottom: 0px solid #dee2e6;
    font-weight:bold
}
.etichetta .table td, .table th {
    border-top: 0px solid #dee2e6;
}
@media(min-width:767px){
    .etichetta .table-responsive {display:table}
}


/* POPUP */
#light{width:100%;height:100%;position:fixed;z-index:400;left:0px;top:0px;background-color: rgba(0, 0, 0, 0.65); z-index: 999999 }



.popUp-mobile {position: absolute; width: 340px; height: auto; left: 50%; margin-left: -160px; top: 15%; z-index: 999999}
.popUp {position: absolute; width: 1000px; height: 500px; left: 50%; margin-left: -500px; top: 10%; z-index: 999999}
.popUp img {width: 100% !important;/* border: 16px solid white;*/}
.popUp-mobile .close{font-size: 25px;
    right: 0;
    margin-top: -50px; color:#fff; position:absolute; opacity: 0.9; font-weight: bold}
.popUp-mobile img {width: 100% !important; border: 5px solid white;}
.popUp-mobile video {width: 100% !important; border: 0px solid white;}

.close{font-size:15px; color:#fff; position:absolute; top:20px; right: 20px; opacity: 0.9;  font-weight: bold}
.close a:hover {text-decoration: none;}

/*.popUp a.btn {
    font-size: 15px;
    color: #fff;
    border: 1px solid #fff;
    padding: 10px 30px;
    position: absolute;
    top: 385px;
    left: 50%;
    margin-left: -65px;
    font-family: sans-serif;
}*/

.popUp a.btn {
    color: #fff;
    border: 1px solid #fff;
    padding: 10px 30px;
    float:right;
}
.popUp a:hover.btn {background-color: #fff; color: #175B80}

@media (max-width: 699px) {
    .popUp-mobile {display: block}
    .popUp {display: none}
}

@media (min-width: 700px) {
    .popUp-mobile {display: none}
    .popUp {display: block}
}