/* FONTS */

@font-face {
    font-family: 'Constantia';
    src: url('/assets/fonts/Constantia.eot');
    src: url('/assets/fonts/Constantia.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/Constantia.woff2') format('woff2'),
        url('/assets/fonts/Constantia.woff') format('woff'),
        url('/assets/fonts/Constantia.ttf') format('truetype'),
        url('/assets/fonts/Constantia.svg#Constantia') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Constantia';
    src: url('/assets/fonts/Constantia-Bold.eot');
    src: url('/assets/fonts/Constantia-Bold.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/Constantia-Bold.woff2') format('woff2'),
        url('/assets/fonts/Constantia-Bold.woff') format('woff'),
        url('/assets/fonts/Constantia-Bold.ttf') format('truetype'),
        url('/assets/fonts/Constantia-Bold.svg#Constantia-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


/* RESET */

:root {
    --anim-time: 200ms;
    --color-gold: #DDBC6E;
    --color-darkgold: #B98555;
    --color-black: #000000;
    --color-white: #FFFFFF;
}
HTML, BODY { 
    font-family: 'Constantia','Times New Roman', Times, serif;
    font-weight: normal;
    margin:0; padding:0;
    text-shadow: 0 1px 1px rgb(0 0 0 / 80%), 2px 2px 8px rgb(0 0 0 / 80%);
    overflow: hidden;
}

*, *::after, *::before {
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
    margin:0; 
    padding:0;
    box-sizing: border-box;
}

h3 {
    font-family: "Constantia";
    font-size: 3.5rem;
    color: var(--color-white);
    text-align: center;
    font-weight: 400;
}

h2 {
    font-family: "Constantia";
    font-size: 4.5rem;
    color: var(--color-white);
    font-weight: bold;
    margin-bottom: 0.5em;
}
@media (max-width : 768px) { h2 { font-size: 3.25rem; }}

h4 {
    font-family: "Constantia";
    font-size: 2rem;
    color: var(--color-white);
    font-weight: bold;
}

p {
    margin:0 0 1.2em 0; 
    font-size: 1.75rem;
    color: var(--color-white);
}
@media (max-width : 768px) { p { font-size: 1.5rem; }}

/*===================== COOCKIES =================================*/
/*================================================================*/
/* AGE GATE */
#AGE_GATE {
    display: none; opacity:0;
    position:fixed; z-index:1000002;
    top:50%; left:50%; transform: translate(-50%, -50%);
    width:600px; max-width:90%;
    color:#FFF;text-align:center;font-size:120%;
    background-color: #000A;
}

.age_btn { padding:20px; margin:20px; font-size:150%; cursor: pointer}
#AGE_GATE h1, #AGE_GATE h3, #AGE_GATE p {
    margin: 1em 0;
    padding: 0;
    color:var(--color-red); 
    font-family: initial;
}
#AGE_GATE h1 { font-size: 38px; margin-bottom: 2rem;}
#AGE_GATE h3 { font-size: 25px; margin-bottom: 2rem;}
#AGE_GATE p {text-align: center; }

/* COOKIES CONSENT */
#COOKIES_CONSENT { 
    display: none; opacity:0;
    position:fixed; z-index:1000002;
    bottom:2vw; left:2vw;
    width:360px; max-width: 96vw;
    text-align:center;
    background:rgba(0,0,0,0.8);
    border-radius:8px;
    padding:0px 20px 15px;
    color:#FFF;
    outline: 1px solid #fff8;
}
#COOKIES_CONSENT p { font-weight: normal; font-size: 16px; text-align: center; color:#fff; margin: 1em 0;}
#COOKIES_CONSENT a { cursor: pointer; font-weight:bold }
#COOKIES_CONSENT #close_btn { position: absolute; right:6px; top:6px; cursor: pointer;}

/* POPUP */
#POPUP {
    position: fixed; z-index: 1000009;
    top:0; left:0; width:100%; height:100%; 
    pointer-events: all;
    display:none; opacity:0; 
    text-shadow: none; 
}
#popup_overlay {
    position: fixed; z-index: -1;
    top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6);   
}
#popup_wrapper {
    position:fixed;
    width:700px; height:90%; max-width:90%;
    top:50%; left:50%; transform: translate(-50%, -50%);
    background:rgba(255, 255, 255, 0.95);
    box-shadow:0px 0px 10px rgba(0,0,0,0.8);
    border-radius: 8px; border:0 none;
    overflow: hidden;
}
#popup_title { 
    position: absolute;
    width:100%; 
    background:var(--color-gold);
    font-weight: 600; color:#FFF; font-size:22px; text-align:center; text-transform: uppercase;
    padding:15px 4px;
}
#popup_content { 
    position: relative;
    width:90%; height:85%;
    top:12%; left:5%; 
    padding-right:10px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal; color:#222; font-size:13px; text-align:justify;
    overflow-x: hidden;
    overflow-y: scroll;
}
#popup_btn { position: absolute; right:16px; top:16px; cursor: pointer;}

#POPUP h2, #POPUP h3, #POPUP p{
    margin: 1em 0;
    padding: 0;
    color: #222;
}

#POPUP h2 {font-size: 1.5em; text-align: left;}
#POPUP h3 {font-size: 14px; text-align: left; color: #222}
#POPUP p {font-size: 13px; color: #222; font-weight: normal;}

#NAV { 
    position:absolute; 
    padding: 0;
    top:90%; 
    text-align:center; 
    width:100%; 
    /* opacity: 0; */
    /* transition: all 300ms ease-out; */
}
#NAV LI, #SOCIAL LI  {
    display: inline-block;
    margin:0 10px;
    color: #FFF;
}
#NAV LI.sep { font-weight:bold}
#NAV LI A, #SOCIAL LI A {
    color: #FFF;
    text-decoration: none;
    line-height:24px;
    font-size:16px
}
/*===================== COOCKIES =================================*/
/*================================================================*/

/*
#ascrail2000 {
    z-index: 20 !important;
} 
*/

#retete-button { position:fixed; right:40px; top:48px; z-index:100000; }
#retete-button A { padding:8px 20px; background:var(--color-gold); border-radius:30px; font-size:90%; font-weight:bold; text-decoration:none; text-transform:uppercase; opacity:0.6; color:#000; text-shadow:none; transition:0.5s opacity; }
#retete-button A:hover { opacity:1 }
@media (max-width:767px) {
    #retete-button { right:10px; top:20px }
}

#lang-button { position:fixed; left:40px; top:40px; z-index:100001; cursor:pointer; }
#lang-button { padding:8px 20px; background:var(--color-gold); border-radius:30px; font-size:90%; font-weight:bold; text-decoration:none; text-transform:uppercase; opacity:0.6; color:#000; text-shadow:none; transition:0.5s opacity; }
#retete-button A:hover { opacity:1 }
#lang-button:hover { opacity:1 }
@media (max-width:767px) {
    #lang-button { left:10px; top:20px }
}
span[data-lang="en"] { display: none;}

#ascrail2000 .nicescroll-cursors {
    background-color: #ffffff80 !important;
    right: 5px !important;
}

.fullpage { width:100%; height:100vh; position:relative }
#MAIN { 
    width:1918px; 
    transform-origin:top left;
    z-index: 1;
    background-color: #000;
    /* display: none; */
} 

#actions {
    background-color: #e4e4e4;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}


/***** SCROLL *****/
.icon-scroll, .icon-scroll:before {
    position: absolute;
 }

.icon-scroll {
    width: 36px;
    height: 70px;
    margin-left: -20px;
    bottom: -100px;
    opacity: 0;
    left: 50%;
    margin-top: -35px;
    border: 3px solid var(--color-gold);
    box-shadow: inset 0 0 3px 3px rgba(0, 8, 126, 0.15),
                0px 0px 3px 3px rgba(0, 8, 126, 0.15);
    border-radius: 25px;
    z-index: 5;
}

.icon-scroll::before {
    content: '';
    width: 14px;
    height: 14px;
    background: var(--color-gold);
    left: 8px;
    top: 8px;
    border-radius: 7px;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-name: scroll;
    box-shadow: 0px 0px 3px 3px rgba(0, 8, 126, 0.15);
}

#sc-icon2 {
    border-color: var(--color-gold);
}

#sc-icon2::before {
    background: var(--color-gold);
}

@keyframes scroll {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(46px);
  }
}

#skip {
    font-size: 20px;
    text-transform: uppercase;
    border: 3px solid var(--color-gold);
    color: var(--color-gold);
    padding: 0.3em 0.5em;
    position: absolute;
    top: 960px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px;
    z-index: 6;
    opacity: 1;
    transition: opacity var(--anim-time) ease-out; 
    cursor: pointer;
}

#scroll {
    width: 100%;
    top: 0px;
    height: 27500px;
    transform-origin:top left;
    overflow: hidden;
    /* display: none; */
} 

.stop {
    position: fixed;
    top: 0;
    left: 0;
}

#move {
    position: relative;
    top: 0;
    left: 0;
    background-color: #000;
}


/*** SECTION 01: PRELOADER *********************************/
#preloader {
	width:1920px; height: 1080px;
	background: no-repeat #000;
    position: absolute;
    overflow: hidden;
    transform-origin: left top;
    z-index: 10;
}

#precont {
    position: absolute;
    background-color: #000;
    width:1920px; height: 1080px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#thunder {
    position: absolute;
    transform-origin: left top;
    left: 30%;
    top: 0;
    opacity: 0;
} 
  
#wolf {
    opacity: 0;
}


/***************************************/

#intro {
    width: 1920px; height: 1080px;
    background-color: #000;
    position: relative;
    display: flex;
    justify-content: center;
}

#intro-movie {
    position: absolute;
    top:0; left: 0;
}

#intro-back {
    position: absolute;
    top:0; left: 0;
    opacity: 0;
}

/***************************************/

#golden-taste {
    position: relative;
    width: 1920px; height: 1080px;
}

#golden-back { 
    position: absolute;
    top: 0; left:0;
}

#golden-text {
    position: absolute;
    width: 815px; height: 233px;
    top: 80%;
    left: 101%;
    transform-origin: left top;
    transition: left var(--anim-time) ease-out;
}

#golden-text img {
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: center;
}

/***************************************/

#stalinskaya {
    position: relative;
    width: 1920px; height: 1080px;
    overflow: hidden;
    background: radial-gradient(circle at center, #2F2E2C 10%,  #070707);
}

#bottle {
    position: absolute;
    transform-origin: center;
    transform: rotate(10deg);
    top: -700px;
    left: -70px;
    transform: rotate(370deg);
    transition: all var(--anim-time) ease-out; 
    pointer-events: none;
}

#bottle-back {
    position: absolute;
    width: 100%;
    height: 100%;
    top:0; left:0;
    pointer-events: none;
    cursor: unset;
}

#bottle-scale {
    transform-origin: center;
    transition: transform var(--anim-time) ease-out;
}


#stalinskaya-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 5%;
    max-width: 45%;
    text-align: right;
    /* padding-bottom: 5%; */
}

#stalinskaya-text > * {
    position: relative;
    transition: right var(--anim-time) ease-out;
}

#stalinskaya-title {
    margin-bottom: 2em;
}

#stalinskaya-left {
    position: absolute;
    left: 0; top: 0;
    height: 100%;
}
#stalinskaya-left > *  {
    position: absolute;
    left: 0;
    bottom: 0;
    transition: left var(--anim-time) ease-out;
}
#stalinskaya-left-04  {
    bottom: unset;
    top:0;
}

#stalinskaya-right {
    position: absolute;
    right: 0; top: 0;
    height: 100%;
}
#stalinskaya-right > *  {
    position: absolute;
    right: 0;
    transition: right var(--anim-time) ease-out;
}
#stalinskaya-right-01,
#stalinskaya-right-04 {
    top:0;
}

#stalinskaya-right-02,
#stalinskaya-right-03 {
    bottom: 0;
}

#stalinskaya-buttons {
    position: absolute;
    width: 1920px;
    height: 1080px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: opacity var(--anim-time) ease-out;
}
#stalinskaya-buttons .button {
    position: absolute;
    max-width: 40%;
    opacity: 0;
    cursor:pointer;
}
 
#stalinskaya-buttons .title {
    position: relative;
    margin-bottom: 0.25em;
}

#stalinskaya-buttons .icon {
    position: absolute;
    display: inline-block;
    position: absolute;
    left: -60px;
    top: -10px;
    width: 52px; height: 60px;
}

#stalinskaya-buttons p {
    font-size: 1.5rem;
}

#stalinskaya-buttons ul {
    margin-left: 3rem; 
}

#stalinskaya-buttons .short {
    opacity: 0;
    transition: opacity var(--anim-time) ease-out;
}

#stalinskaya-compozitie {left: 500px; top: 200px;}
#stalinskaya-reteta {left: 250px; top: 470px;}
#stalinskaya-distilare {left: 450px; top: 800px;}
#stalinskaya-gustativ {left: 1370px; top: 730px;}
#stalinskaya-olfactiv {left: 1520px; top: 430px;}
#stalinskaya-filtrare {left: 1300px; top: 150px;}


#stalinskaya-buttons .show {
    opacity: 1 !important;
}

#stalinskaya-buttons .hide {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity var(--anim-time) ease-out;
}

/***************************************/
#reteta {
    position: relative;
    width: 1920px; height: 1080px;
}

#reteta-move {
    position: absolute;
    width: 3840px;
    height: 1080px;
    top: 0;
    left: 0;
    transition: left var(--anim-time) ease-out;
}

#compozitie-text {
    position: absolute;
    left: 2%;
    top: 50%;
    transform: translateY(-50%);
    text-align: left;
    max-width: 20%;
}

#reteta-text {
    position: absolute;
    right: 2%;
    top: 50%;
    transform: translateY(-50%);
    text-align: right;
    max-width: 20%;
}

/***************************************/

#distilare {
    position: relative;
    width: 1920px; height: 1080px;
}

#distilare-pahare {
    position: absolute;
    top: 0; left: 0;
    width: 1920px; height: 1080px;
    overflow: hidden;
}

#distilare-back {
    width: 100%;
}

#distilare-pahare > img {
    object-fit: cover;
    transform-origin: center;
    position: absolute;
}

#distilare-screen {
    mix-blend-mode: screen;
    left: -300px;
    top: -300px;
} 

#distilare-logo {
    position: absolute;
    width: 815px; height: 233px;
    top: 5%;
    transform-origin: center;
}
#distilare-logo img {
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: center;
}

#distilare-frunze {
    position: absolute;
    top: 0; left:0;
    width: 1920px; height: 1080px;
    overflow: hidden;
    opacity: 0;
}

#distilare-frunze > * {
    position: absolute;
}

#frunza-bootle {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: center bottom;
}

#frunza-stanga {
    position: absolute;
    top: 0; left: -50%;
    transition: left var(--anim-time) ease-out;
}

#frunza-dreapta {
    position: absolute;
    top: 0; right: -50%;
    transition: right var(--anim-time) ease-out;
}

#frunza-back {
    transition: left var(--anim-time) ease-out;
}

#distilare-text {
    position: absolute;
    left: 2%;
    top: 50%;
    transform: translateY(-50%);
    text-align: left;
    max-width: 18%;
}

#filtrare-text {
    position: absolute;
    right: 2%;
    top: 50%;
    transform: translateY(-50%);
    text-align: right;
    max-width: 18%;
}

/***************************************/
#profil {
    position: relative;
    width: 1920px; height: 1080px;
}

#profil-move {
    position: absolute;
    width: 3840px;
    height: 1080px;
    top: 0;
    left: 0;
    transition: left var(--anim-time) ease-out;
}

#olfactiv-text {
    position: absolute;
    right: 52%;
    top: 20%;
    text-align: right;
    max-width: 20%;
}

#gustativ-text {
    position: absolute;
    left: 52%;
    top: 20%;
    text-align: left;
    max-width: 20%;
}

/***************************************/

/***************************************/
#final {
    position: relative;
    width: 1920px; height: 1080px;
    overflow: hidden;
}

#final > * {
    position: absolute;
}

#final-bottle {
    left: 20%;
    top: -150px;
    transition: left var(--anim-time) ease-out;
    transform-origin: center top;
}

#final-logo {
    right: 20%;
    top: 30%;
    transition: right var(--anim-time) ease-out;
    width: 715px;
    height: 135px;
}

#final-logo img {
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: center;
}

#final-social {
    right: 30%; /* 25% */
    top: 55%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    transition: opacity var(--anim-time) ease-out;
}

#final-social img {
    width: 100px; 
    object-fit: contain;
}

#final-social * + * {
    margin-left: 100px;
 }
/***************************************/