/* FONTS */

@font-face {
    font-family: Sans;
    font-weight: 300;
    src: url(../fonts/sans-light.otf);
}
@font-face {
    font-family: Sans;
    font-weight: 400;
    src: url(../fonts/sans-book.otf);
}
@font-face {
    font-family: Sans;
    font-weight: 500;
    src: url(../fonts/sans-medium.otf);
}
@font-face {
    font-family: Sans;
    font-weight: 600;
    src: url(../fonts/sans-heavy.otf);
}
@font-face {
    font-family: Sans;
    font-weight: 700;
    src: url(../fonts/sans-bold.otf);
}

/* CONTAINER FIXER */

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

    .container{
        min-width: 1366px;
    }

}

/* SMALL SIZE SCREEN */

@media screen and (orientation: landscape) and (max-width: 1366px){

    :root{
        font-size: 12px!important;
    }

}

/* GENERAL */

::-webkit-scrollbar {
    width: 0px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
}
::-webkit-scrollbar-thumb {
    background: white;
    -webkit-box-shadow: none;
}
::-webkit-scrollbar-thumb:window-inactive {
    background: none;
}

*, button, input, optgroup, select, textarea{
    position: relative;
    font-family: 'Open-Sans';
    transition: all 0.2s;
}
*:focus, *:hover{
    outline: none!important;
    text-decoration: none!important;
}
html{
    background-color: #000;
    background-image: url(../img/spinner.gif);
    background-repeat: no-repeat;
    background-position: center;    
}
body{
    background-color: transparent;
    overflow-x: hidden!important;
    -webkit-font-smoothing: antialiased;
}
.sans-light{
    font-family: Sans;
    font-weight: 300;
}
.sans-book{
    font-family: Sans;
    font-weight: 400;    
}
.sans-medium{
    font-family: Sans;
    font-weight: 500;
}
.sans-heavy{
    font-family: Sans;
    font-weight: 600;
}
.sans-bold{
    font-family: Sans;
    font-weight: 700;
}
.text-gold{
    color: #9C8248;
}
.bg-gold{
    background-color: #9C8248;
}
.bg-cover{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.bg-screen{
    background-color: rgba(0,0,0,0.5);
}
.full-fixed{
    bottom: 0px;
    left: 0px;
    right: 0px;
    top: 0px;
}
.full-width{
    width: 100vw;
}
.full-height{
    height: 100vh;
}
.fixed-x{
    left: 0px;
    right: 0px;
}
.overflow-hidden{
    overflow: hidden;
}
.letter-space-sm{
    letter-spacing: 3px;
}
.letter-space-md{
    letter-spacing: 6px;
}
.letter-space-xl{
    letter-spacing: 12px;
}
.z-index-n{
    z-index: -100
}
.z-index-0{
    z-index: 0; 
}
.z-index-1{
    z-index: 1000;
}
.z-index-2{
    z-index: 2000;
}
.z-index-3{
    z-index: 3000;
}
.z-index-4{
    z-index: 4000;
}
.z-index-5{
    z-index: 5000;
}
.z-index-6{
    z-index: 6000;
}
.z-index-7{
    z-index: 7000;
}
.screen-container{
    background-color: rgba(0,0,0,0.25);
    bottom: 0px;
    left: 0px;
    right: 0px;
    top: 0px;    
}
.page-template-page-explore .screen-container{
    background-color: rgba(0,0,0,0.7);    
}
.bsmart-logo{
    bottom: 0px;
}
.bsmart-logo img{
    width: 100px;
}
.video-container{
    bottom: 0px;
    left: 0px;
    right: 0px;
    top: 0px;
}
.video-container video{
    width: 110%;
    height: auto;
}
.life p,
.wine p{
    line-height: 24px;
    font-size: 12px;
    letter-spacing: 2px;
}
.life h1{
    font-size: 70px;
    letter-spacing: 20px;
    background-image: url(../img/gold.jpg);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
.life h6{
    font-size: 16px;
    line-height: 34px;
    letter-spacing: 3px;
}
.logo{
    height: 20vh;
}
.logo:hover{
    opacity: 0.5;
}
.life-text{
    opacity: 0;
    transition: all 0.5s;
}
.life-item{
    cursor: pointer;
    border: 1px solid #9C8248;
    height: 18px;
    margin: 24px;
    transform-origin: center;
    transform: rotate(45deg);
    width: 18px;
}
.life-item:hover{
    border-width: 2px;
}
.life-item.active{
    background-color: #9C8248;
}
.line-top{
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(156,130,72,1) 50%, rgba(125,104,58,1) 100%);
    height: 17%;
    position: absolute;
    top: 0px;
    width: 1px;
}
.line-bottom{
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(156,130,72,1) 50%, rgba(125,104,58,1) 100%);
    bottom: 0px;
    height: 17%;
    position: absolute;
    width: 1px;
}
#explore-template h2,
#age-gate .sans-bold{
    background-image: url(../img/gold.jpg);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
#static-elements *{
    font-size: 12px;
}
.back-button{
    color: #9C8248;
    border: 1px solid #9C8248;
}
.back-button:hover{
    background-color: #9C8248;
    color: #FFF;
}
.slide-text{
    opacity: 0.75;
    transform: translate(0, 30%);
    transition: 0.5s;
}
.slide-text h2{
    font-size: 50px;
    letter-spacing: 10px;
    background-image: url(../img/gold.jpg);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    word-spacing: 500px;
}
.en .the-all-knowing .slide-text h2,
.en #modal-the-all-knowing .modal-text h2,
.en #slide-the-all-knowing .slide-text h2{
    word-spacing: normal;
}
.slide-text h6{
    font-size: 16px;
    line-height: 34px;
    letter-spacing: 3px;
    opacity: 0;
}
.slide-text a:hover{
    opacity: 0.5;
}
.carousel-life:hover .bg-screen{
    background-color: rgba(0,0,0,0.25);
}
.carousel-life:hover .slide-text{
    opacity: 1;
    transform: none;
}
.carousel-life:hover .slide-text h6{
    opacity: 1;
}
.carousel-next{
    opacity: 0.5;
    font-size: 30px;
    top: 47%;
    right: 30px;
}
.carousel-prev{
    opacity: 0.5;
    font-size: 30px;    
    top: 47%;
    left: 30px;
}
.carousel-prev:hover,
.carousel-next:hover{
    color: #9C8248!important;
    opacity: 1!important;
}
#sound-off{
    display: none;
}
.bottle{
    max-height: 75vh;
}
.gate-logo{
    width: 160px;
}
#age-gate p{
    font-size: 10px;
}
.lang-button{
    background-color: #FFF;
    border-radius: 50px;
    border: 1px solid #FFF;
    color: #9C8248;
    display: inline-block;
    font-size: 14px;
    height: 30px;
    padding-top: 4px;
    text-align: center;
    width: 30px;
    margin: 0px 4px 0px 4px;
}
.lang-button:hover{
    background-color: transparent;
    border: 1px solid #9C8248;
    color: #9C8248;
}
.opacity-fixer{
    opacity: 0;
}
#age-gate{
    display: none;
}
.hashtag{
    bottom: 10%;
}
#wines-panels h2,
#wines-panels h5{
    background-image: url(../img/gold.jpg);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;    
}
#explore-template h2{
    line-height: 1.5;
}

/* BUTTON HOVER EFFECT */

.portfolio-experiment {
    background: none;
}
.portfolio-experiment a {
    border: 3px solid transparent;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-size: 1.5em;
    letter-spacing: 0.07em;
    padding: 0.7em calc(0.7em * 1.2);
    position: relative;
}
.portfolio-experiment a .text {
    display: block;
    font-size: 16px;
    padding: 6px 16px;
    transform: translate3d(0, 0.7em, 0);
    transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1) 0.4s;
}
.portfolio-experiment a:after {
    position: absolute;
    content: '';
    bottom: -3px;
    left: calc(0.7em * 1.2);
    right: calc(0.7em * 1.2);
    height: 3px;
    background: #9C8248;
    transition: transform 0.8s cubic-bezier(1, 0, 0.37, 1) 0.2s, right 0.2s cubic-bezier(0.04, 0.48, 0, 1) 0.6s, left 0.4s cubic-bezier(0.04, 0.48, 0, 1) 0.6s;
    transform-origin: left;
}
.portfolio-experiment .line {
    position: absolute;
    background: #9C8248;
}
.portfolio-experiment .line.-right, .portfolio-experiment .line.-left {
    width: 3px;
    bottom: -3px;
    top: -3px;
    transform: scale3d(1, 0, 1);
}
.portfolio-experiment .line.-top, .portfolio-experiment .line.-bottom {
    height: 3px;
    left: -3px;
    right: -3px;
    transform: scale3d(0, 1, 1);
}
.portfolio-experiment .line.-right {
    right: -3px;
    transition: transform 0.1s cubic-bezier(1, 0, 0.65, 1.01) 0.23s;
    transform-origin: top;
}
.portfolio-experiment .line.-top {
    top: -3px;
    transition: transform 0.08s linear 0.43s;
    transform-origin: left;
}
.portfolio-experiment .line.-left {
    left: -3px;
    transition: transform 0.08s linear 0.51s;
    transform-origin: bottom;
}
.portfolio-experiment .line.-bottom {
    bottom: -3px;
    transition: transform 0.3s cubic-bezier(1, 0, 0.65, 1.01);
    transform-origin: right;
}
.portfolio-experiment a:hover .text, .portfolio-experiment a:active .text {
    transform: translate3d(0, 0, 0);
    transition: transform 0.6s cubic-bezier(0.2, 0, 0, 1) 0.4s;
}
.portfolio-experiment a:hover:after, .portfolio-experiment a:active:after {
    transform: scale3d(0, 1, 1);
    right: -3px;
    left: -3px;
    transform-origin: right;
    transition: transform 0.2s cubic-bezier(1, 0, 0.65, 1.01) 0.17s, right 0.2s cubic-bezier(1, 0, 0.65, 1.01), left 0s 0.3s;
}
.portfolio-experiment a:hover .line, .portfolio-experiment a:active .line {
    transform: scale3d(1, 1, 1);
}
.portfolio-experiment a:hover .line.-right, .portfolio-experiment a:active .line.-right {
    transition: transform 0.1s cubic-bezier(1, 0, 0.65, 1.01) 0.2s;
    transform-origin: bottom;
}
.portfolio-experiment a:hover .line.-top, .portfolio-experiment a:active .line.-top {
    transition: transform 0.08s linear 0.4s;
    transform-origin: right;
}
.portfolio-experiment a:hover .line.-left, .portfolio-experiment a:active .line.-left {
    transition: transform 0.08s linear 0.48s;
    transform-origin: top;
}
.portfolio-experiment a:hover .line.-bottom, .portfolio-experiment a:active .line.-bottom {
    transition: transform 0.5s cubic-bezier(0, 0.53, 0.29, 1) 0.56s;
    transform-origin: left;
}

/* MENU */

.menu-container{
    background-color: transparent;
    height: 20vh;
    left: 0px;
    right: 0px;
    top: 0px;    
}
.menu-container.open{
    background-color: rgba(0, 0, 0, 0.8);
    height: 100%;
}
.menu-container + .container{
    padding-top: 20vh;
}
.menu-opacity{
    opacity: 0;
}
.menu-opacity.open{
    opacity: 1;
}
a.menu-opacity.open{
    opacity: 0.5;
}
a.menu-opacity.open:hover{
    opacity: 1;
}
.social-icon{
    border-radius: 50px;
    border: 1px solid #9C8248;
    color: #000;
    font-size: 20px;
    height: 44px;
    margin: 0px 10px;
    text-align: center;
    width: 44px;
    justify-content: center;
    align-items: center;
}
.social-icon:hover{
    background: transparent;
    color: #9C8248;
}
.menu-wrapper {
    position: absolute;
    top: 3rem;
    right: 3rem;
    margin: auto;
    width: 40px;
    height: 40px;
    cursor: pointer;
}
.hamburger-menu{
    cursor: pointer;
    border: 1px solid #9C8248;
    height: 18px;
    margin: 0px;
    transform-origin: center;
    transform: rotate(45deg);
    width: 18px;   
}
.hamburger-menu:hover{
    border-width: 2px;
}
.hamburger-menu.active{
    background-color: #9C8248;
}
.plus-button{
    display: block;
    height: 30px;
    padding-top: 14px;
    width: 30px;
}
.plus-button span{
    background-color: #FFF;
    display: block;
    height: 1px;
    margin-top: 0px;
    width: 30px;
}
.plus-button span:nth-child(2){
    margin-top: -1px;
    transform: rotate(-90deg);
}

/* MOBILE */

@media screen and (max-width: 990px) and (orientation: portrait) {

    .video-container video{
        width: auto;
        height: 100%;
    }
    #video-buttons .w-50{
        width: 100%!important;
    }
    #explore-template h5{
        letter-spacing: 5px;
        line-height: 1.5;
        background-image: url(../img/gold.jpg);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;        
    }
    #explore-buttons .w-50{
        width: 100%!important;    
    }   
    #video-buttons a{
        width: 75%;
    }
    #explore-buttons a{
        font-size: 20px;
        margin-bottom: 1rem;
        width: 100%;
    }
    #jp-buttons a,
    #jp-buttons h6{
        width: 100%;
        padding: 1rem;
        display: block!important;
    }
    .hashtag{
        bottom: 3rem;
    }
    .life-item{
        display: inline-block;
        height: 10px;
        margin: 20px 12px;
        width: 10px;
    }
    #wines-template .scroll-menu{
        /*height: 3rem;*/
    }
    #wines-template .line-top,
    #wines-template .line-bottom{
        display: none;
    }
    .bottle{
        max-height: 410px;
        margin-bottom: 4rem;
    }
    .rotate-90{
        bottom: 6rem;
        left: 5rem;        
        position: absolute;
        transform-origin: left;
        transform: rotate(-90deg);
        width: 400px;
    }
    #menu-mobile{
        bottom: 0px;
        background-color: #000;
    }
    #wines-template #menu-mobile{
        left: 0px;
        background-color: #000;
        bottom: 0px;
        right: 0px;
        top: auto;
        height: 3rem;        
    }
    .wine-text{
        padding: 4rem;
        bottom: 4rem;        
    }
    .wine-text,
    .wine-mobile{
        opacity: 0;
    }    
    .wine-text.active,
    .wine-mobile.active{
        opacity: 1;
    }
    #wines-panels h4{
        background-image: url(../img/gold.jpg);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;    
    }
    .mobile-toggler{
        height: 24px;
        width: 24px;
        bottom: 5rem;
        left: 4.25rem;          
    }
    .mobile-toggler span{
        background-color: #FFF;
        width: 24px;
        height: 1px;
        display: block;
    }
    .mobile-toggler span:nth-child(2){
        transform: rotate(-90deg);
        margin-top: -1px;
    }
    .mobile-toggler.active span:nth-child(2){
        display: none;
    }
    .mobile-toggler:hover{
        opacity: 0.5;
    }
    .mobile-plus{
        height: 24px;
        width: 24px;  
        padding-top: 11.5px;     
    }
    .mobile-plus span{
        background-color: #FFF;
        display: block;    
        height: 1px;
        margin-top: 0px;
        width: 24px;
    }
    .mobile-plus span:nth-child(2){
        margin-top: -1px;
        transform-origin: center;
        transform: rotate(-90deg);
    }    
    .mobile-plus:hover{
        opacity: 0.5;
    }
    .slide-text{
        transform: none;
    }
    .slide-text h2{
        font-size: 26px;
        letter-spacing: 2px;
        line-height: 34px;      
    }  
    .slide-text h6{
        font-size: 12px;
        letter-spacing: 1.5px;
        line-height: 24px;
        opacity: 1;
    }
    #carousel-lives-mobile{
        padding: 8rem 4rem 5rem 4rem;        
    }
    .modal-text h2{
        -webkit-background-clip: text;
        background-clip: text;
        background-image: url(../img/gold.jpg);
        color: transparent;
        font-size: 32px;
        letter-spacing: 5px;
        line-height: 44px;
        max-width: 350px;       
    }
    .modal-life .mobile-toggler{
        top: 3rem;
        right: 3rem;
        bottom: auto;
        left: auto;
        width: 30px;
        height: 30px;
        transform: rotate(45deg);
    }
    .modal-life .mobile-toggler span{
        width: 30px;
        background-color: #9C8248;
    }
    .modal-life .mobile-toggler:hover{
        opacity: 0.5;
    }
    .modal-text p{
        font-size: 12px;
        letter-spacing: 1.6px;
        line-height: 20px;
    }
    #main-video{
        width: 100%;
        height: auto;
    }
    .video-container .plyr{
        height: 100%;
        width: 100%;
    }
    .video-container .plyr__video-wrapper{
        align-items: center;
        display: flex;
        height: 100%;
        justify-content: center;
        padding: 0px!important;
    }
    .plyr__poster{
        display: none!important;
    }
    .video-container .plyr iframe{
        height: 110%;
        left: auto;        
        margin: auto;
        top: auto;
        width: 110%;
    }   
    .modal-life h1{
        font-size: 32px;
        letter-spacing: 4px;
        line-height: 42px;
        word-spacing: 500px;
    }
    #explore-template h2{
        line-height: 1.25;
    }
    .menu-container{
        height: 15vh;
    }
    .social-icon {
        border-radius: 50px;
        border: 1px solid #9C8248;
        color: #000;
        font-size: 14px;
        height: 24px;
        margin: 0px 0px;
        text-align: center;
        width: 24px;
    }
        
}

.modal-life{
    opacity: 0;
    display: none;
}

@media (min-width: 990px) and (max-width: 1366px){

    #static-elements *{
        font-size: 10px;
    }
    .life-item {
        height: 14px;
        margin: 18px;
        width: 14px;
    }
    .life h1 {
        font-size: 60px;
        letter-spacing: 16px;
    }
    .slide-text h2{
        font-size: 38px;
        letter-spacing: 6px;
        line-height: 50px;
    }

}

#portrait-message{
    opacity: 0;
    display: none;
}

@media screen and (max-height: 719px) and (orientation : landscape){

    #portrait-message{
        opacity: 1;
        display: flex;
        display: -webkit-flex;
    }

} 
@media screen and (min-height: 700px) and (max-height: 810px){

    .video-container video{
        height: 110%;
        width: auto;
    }

} 

.page-id-20 .modal-backdrop{
    z-index: 3000;
}
#filter-modal{
    z-index: 4000;
}
.close-modal{
    cursor: pointer;
    height: 24px;
    width: 24px;
    top: 20px;
    right: 20px;  
    transform: rotate(45deg);        
}
.close-modal:hover{
    opacity: 0.75;
}
.close-modal span{
    background-color: #FFF;
    width: 24px;
    height: 1px;
    display: block;
    position: absolute;
    top: 12px;
}
.close-modal span:nth-child(2){
    transform: rotate(-90deg);
}
.filter{
    height: 60vh;
    order: 1;
}
.filter-icon{
    width: 60px;
}
.live-qr{
    width: 150px;
}
.main-qr{
    max-width: 300px;
}

/* FILTER */

#filters-header{
    height: 340px;
    background-image: url('../img/filters_bg.jpg');
    background-size: 70% auto;
    background-repeat: no-repeat;
    background-position: center;
}
#filters-template-mobile .logo img {
    width: 80px;
}
#filters-template-mobile p{
    letter-spacing: 2px;
}
#filters-template-mobile p b{
    font-family: Sans;
    font-weight: 700;
}
#filters-footer{
    height: 500px;
}
.scroll{
    width: 20px;
}

/* LANG MENU */

#lang-menu .lang-button{
    border: 1px solid #9C8248;
    background-color: #9C8248;
    color: #000;
}
#lang-menu .lang-button:hover{
    background-color: transparent;
    color: #9C8248;
}