/* 
    Created on : 26 авг. 2022 г., 12:54:53
    Author     : Ginter Janis
*/

.g-row {
    width: 6%;
    top: 0px;
    bottom: 0px;
    position: absolute;
    background: #cccccc52;
}

.g-l-1 {
    left: 5.75%;
    position: absolute;
}

.g-l-2 {
    left: 13.25%;
    position: absolute;
}

.g-l-3 {
    left: 20.75%;
    position: absolute;
}

.g-l-4 {
    left: 28.25%;
    position: absolute;
}

.g-l-5 {
    left: 35.75%;
    position: absolute;
}

.g-l-6 {
    left: 43.25%;
    position: absolute;
}

.g-r-1 {
    right: 5.75%;
    position: absolute;
}

.g-r-2 {
    right: 13.25%;
    position: absolute;
}

.g-r-3 {
    right: 20.75%;
    position: absolute;
}

.g-r-4 {
    right: 28.25%;
    position: absolute;
}

.g-r-5 {
    right: 35.75%;
    position: absolute;
}

.g-r-6 {
    right: 43.25%;
    position: absolute;
}


.body-16 {

    font-size: 16px;
    line-height: 20px;
}

.body-20 {
    font-size: 20px;
    line-height: 25px;
}

.body-26 {
    font-size: 26px;
    line-height: 32px;
}

.body-40 {
    font-size: 40px;
    line-height: 50px;
}

.header-28 {
    font-weight: 800;
    font-size: 28px;
    line-height: 110%;
}

.header-36 {
    font-weight: 700;
    font-size: 36px;
    line-height: 100%;
}

.header-48 {
    font-weight: 700;
    font-size: 48px;
    line-height: 100%;
}

.header-72 {
    font-weight: 700;
    font-size: 72px;
    line-height: 100%;
}

.key-16 {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #000000;
}


body {
    background: #01123F;
    padding: 0px;
    margin: 0px;
    font-family: 'TT Hoves';
    font-style: normal;
}

.container {
    background: #01123F;
    width: 1280px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    height: 12050px;
}

.dragon {
    position: absolute;
    width: 300px;
    height: 267px;
    left: 13.25%;
    top: 0px;
    background: url(/assets/images/dragon.png);
    z-index: 999;
}

#bottle {
    position: fixed;
    width: 159px;
    height: 590px;
    left: calc(50% + 65px);
    top: 51px;
    transform: rotate(180deg);
    z-index: 999;
    background-size: cover;
    pointer-events: none;
}
#bottle.shake {
    animation: shake 0.5s;
    animation-iteration-count: 3;
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(180deg); }
    10% { transform: translate(-1px, -2px) rotate(179deg); }
    20% { transform: translate(-3px, 0px) rotate(181deg); }
    30% { transform: translate(3px, 2px) rotate(180deg); }
    40% { transform: translate(1px, -1px) rotate(181deg); }
    50% { transform: translate(-1px, 2px) rotate(179deg); }
    60% { transform: translate(-3px, 1px) rotate(180deg); }
    70% { transform: translate(3px, 1px) rotate(179deg); }
    80% { transform: translate(-1px, -1px) rotate(181deg); }
    90% { transform: translate(1px, 2px) rotate(180deg); }
    100% { transform: translate(1px, -2px) rotate(181deg); }
}

#bottle img {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
    z-index: 999;
}

#bottle img.active {
    display: block;
    animation-timing-function: ease;
    animation-duration: 0.5s;
    background-size: cover;
    animation-name: nextFrame;
    z-index: 1005
}

@keyframes nextFrame {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }
}

#bottle img.old {
    display: block;
    animation-timing-function: ease;
    animation-duration: 0.5s;
    background-size: cover;
    animation-name: oldFrame;   
    z-index: 1004;
}

@keyframes oldFrame {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.5;
    }
}



@keyframes fade {
    0% { opacity: 0 }
    100% { opacity: 1 }
}


#bottle .voron {
    position: absolute;
    width: 304px;
    height: 294px;
    right: -259px;
    top: 110px;
    background: url(/assets/images/voron.png);
    background-size: cover;
}

#bottle .guitar {
    position: absolute;
    height: 180px;
    width: 402px;
    left: -337px;
    top: 294px;
    background: url(/assets/images/guitar-six.png);
}

#bottle .leaf {
    position: absolute;
    width: 180px;
    height: 240px;
    left: -123px;
    top: 5px;
    background: url(/assets/images/basil.png);
    background-size: cover;
    z-index: 99;
}

#bottle .flow {
    position: absolute;
    height: 170px;
    width: 180px;
    left: -89px;
    top: 380px;
    background: url(/assets/images/rose-six.png?v=1);
    transform: rotate(
        -7deg
        );
    background-size: cover;
}

.frame {
    max-width: 100%;
    width: 1440px;
    position: relative;
}

.frame.home {
    height: 1026px;
}
.frame.home .bg-image {
    position: absolute;
    width: 1440px;
    height: 1284px;
    left: 0px;
    top: -258px;
    background: radial-gradient(47.57% 53.35% at 50% 45.99%, rgba(1, 18, 64, 0) 0%, #011240 100%),url(/assets/images/bg_screen2.png);
    mix-blend-mode: normal;
}

.frame.home h1 {
    position: absolute;
    width: 310px;
    height: 38px;
    left: 240px;
    top: 294px;
    color: #DBEFEC;
}
.frame.home h2 {
    position: absolute;
    margin: 0px;
    right: -34px;
    top: 350px;
    font-weight: 800;
    font-size: 124px;
    line-height: 83.9%;
    color: #DBEFEC;
    opacity: 0.6;
    transform: rotate(90deg);
}

.frame.home .description {
    position: absolute;
    width: 470px;
    height: 122px;
    left: 247px;
    top: 432px;
    color: #FFFFFF;
}

.frame.home .bobbles {
    position: absolute;
    width: 30px;
    height: 90px;
    right: -17px;
    top: 83px;
    background: url(/assets/images/bobbles2.gif);
    background-size: cover;
    transform: rotate(
        75deg
        );
}

.frame.home .ship {
    position: absolute;
    width: 403px;
    height: 216px;
    right: 215px;
    top: 495px;
    z-index: 1100;
}

.frame.rotate {
    height: 1368px;
}

.frame.rotate .anchor {
    position: absolute;
    width: 755.82px;
    height: 762.3px;
    left: 5.75%;
    top: -418px;
}
.frame.rotate .anchor img.t1 {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.5;
}


.frame.rotate .anchor #col1_cake {
    position: absolute;
    left: 89px !important;
    top: 382px !important;
    z-index: 80;
}
.frame.rotate .anchor #col1_water {
    position: absolute;
    top: 292px !important;
    left: 372px !important;
    z-index: 70;
}
.frame.rotate .anchor #col1_water2 {
    left: 266px !important;
    top: 252px !important;
    position: absolute;
    z-index: 60;
}
.frame.rotate .anchor #col1_glass {
    position: absolute;
    left: 11px !important;
    top: 0px !important;
    z-index: 50;
}
.frame.rotate .anchor #col1_sputnik {
    position: absolute;
    left: 0px !important;
    top: 71px !important;
    z-index: 40;
}
.frame.rotate .anchor #col1_anchor {
    position: absolute;
    left: 125px !important;
    top: 206px !important;
    z-index: 30;
}
.frame.rotate .anchor #col1_fishka {
    position: absolute;
    top: 195px !important;
    left: 259px !important;
    z-index: 20;
}
.frame.rotate .anchor #col1_sputnik2 {
    position: absolute;
    left: 497px !important;
    top: 230px !important;
    z-index: 10;
}
.frame.rotate .anchor #col1_cube {
    position: absolute;
    left: 416px !important;
    top: 638px !important;
    z-index: 10;

}




.frame.rotate .header {
    position: absolute;
    left: 193px;
    top: 476px;
    font-weight: 800;
    font-size: 96px;
    line-height: 75%;
    text-align: right;
    letter-spacing: -0.06em;
    color: #DBEFEC;
}

.frame.rotate .header p {
    margin: 0px;
    margin-bottom: 12px;
    padding: 0px;
}

.frame.rotate .header p.p1, .frame.rotate .header p.p3 {
    margin-right: 6px;
}
.frame.rotate .header p.p3 {
    transform: rotate(
        -180deg
        );
    text-align: left;
    margin-top: 31px;
    margin-right: 0px;
}

.frame.rotate .bottle {
    width: 159px;
    height: 590px;
    position: absolute;
    z-index: 5;
    display: none;
}

.frame.rotate .bottle.active {
    display: block;
}

.frame.rotate .b6.active {
    display: none;
}

.frame.rotate .b1 {
    left: calc(50% + 175px);
    top: -126px;
    background: url(/assets/images/bottles2/navy/b1.png);
    transform: rotate(
        -150deg
        ); 
    background-size: cover;
}

.frame.rotate .b2 {
    left: calc(50% + 362px);
    top: 60px;
    background: url(/assets/images/bottles2/blue/b1.png);
    transform: rotate(
        -120deg
        ); 
    background-size: cover;
}

.frame.rotate .b3 {
    left: calc(50% + 430px);
    top: 315px;
    background: url(/assets/images/bottles2/green/b1.png);
    transform: rotate(
        -90deg
        ); 
    background-size: cover;
}

.frame.rotate .b4 {
    left: calc(50% + 362px);
    top: 570px;
    background: url(/assets/images/bottles2/yellow/b1.png);
    transform: rotate(
        -60deg
        ); 
    background-size: cover;
}

.frame.rotate .b5 {
    left: calc(50% + 175px);
    top: 756px;
    background: url(/assets/images/bottles2/red/b1.png);
    transform: rotate(
        -30deg
        ); 
    background-size: cover;
}

.frame.rotate .b6 {
    left: calc(50% - 80px);
    top: 825px;
    background: url(/assets/images/bottles2/pink/b1.png); 
    background-size: cover;
}

.bottle_shadow {
    width: 810px;
    height: 810px;
    opacity: 0.4;
    position: absolute;
    display: none;
}

.bottle_shadow.active {
    display: block;
    animation-timing-function: ease;
    animation-duration: 0.5s;
    background-size: cover;
    animation-name: shadowShow;
}
.bottle_shadow#a-licht {
    left: calc(50% + -405px) !important;
    top: -145px !important;
}

@keyframes shadowShow {
    from {
        opacity: 0;f
    }

    to {
        opacity: 0.4;
    }
}

.bottle_shadow.bs0 {
    left: calc(50% + -180px);
    top: -145px;
    background: radial-gradient(46.39% 42.09% at 50% 46.21%, #637FBB 0%, rgba(107, 136, 200, 0) 100%);
}

.bottle_shadow.bs1 {
    left: calc(50% + -50px);
    top: -30px;
    background: radial-gradient(46.39% 42.09% at 50% 46.21%, #23D5F3 0%, rgba(0, 156, 182, 0) 100%);
}

.bottle_shadow.bs2 {
    left: calc(50% + 0px);
    top: 185px;
    background: radial-gradient(46.39% 42.09% at 50% 46.21%, #B4CF65 0%, rgba(185, 212, 117, 0) 100%);
}

.bottle_shadow.bs3 {
    left: calc(50% + -62px);
    top: 390px;
    background: radial-gradient(46.39% 42.09% at 50% 46.21%, #FFEDC5 0%, rgba(242, 187, 89, 0) 100%);
}

.bottle_shadow.bs4 {
    left: calc(50% + -74px);
    top: 522px;
    background: radial-gradient(46.39% 42.09% at 50% 46.21%, #FF6B3E 0%, rgba(228, 71, 0, 0) 100%);
}
.bottle_shadow.bs5 {
    left: calc(50% + -365px);
    top: 570px;
    background: radial-gradient(46.39% 42.09% at 50% 46.21%, #FF3341 0%, rgba(255, 133, 145, 0) 100%);
}

.frame.rotate .description {
    position: absolute;
    width: 535px;
    height: 214px;
    left: 85px;
    top: 952px;
    font-weight: 300;
    font-size: 20px;
    line-height: 24px;

    color: #DBEFEC;
}

.frame.secret .guitar {
    position: absolute;
    left: 92px;
    top: 0px;
    width: 581px;
    height: 191px;
    transform: rotate(26.12deg);
    background: url('/assets/images/guitar.png');
    background-size: cover;
    z-index: 5;
}

.frame.secret {
    /*height: 1433px;*/
    height: 1533px;
}
.frame.secret .guitar {
    position: absolute;
    background: url('/assets/images/guitar.png');
    width: 581px;
    height: 191px;
    background-size: cover;
    display: block;
    opacity: 0;
}

.frame.secret .guitar.active {
    /*display: block;*/
    opacity: 1;
}

.frame.secret #s-guitar-0 {
    top: 0px;
    left: 92px;
    transform: rotate(25deg);
    z-index: 1;
}

.frame.secret #s-guitar-1 {
    top: 80px;
    left: 59px;
    transform: rotate(15deg);
    z-index: 2;
}

.frame.secret #s-guitar-2 {
    top: 165px;
    left: 48px;
    transform: rotate(0deg);
    z-index: 3;
}

.frame.secret #d-guitar {
    top: 0px;
    left: 92px;
    transform: rotate(25deg);
    z-index: 4;
    opacity: 0;
    display: block;
}

.frame.secret #octocup {
    position: absolute;
    right: -20px;
    top: 18px;
    width: 507px;
    height: 564px;
}

.frame.secret .octopus {
    width: 507px;
    height: 564px;
    background: url('/assets/images/octopus.png');
    background-size: cover;
}

.frame.secret .cup {
    position: absolute;
    left: auto !important;
    right: 55px !important;
    top: 342px !important;
    width: 345px;
    height: 342px;
    /*transform: rotate(-48.06deg);*/
    background: url('/assets/images/cup.png?v=1');
    background-size: cover;
}

.frame.secret h3 {
    position: absolute;
    width: 312px;
    height: 144px;
    left: 231px;
    top: 548px;
    font-weight: 700;
    font-size: 48px;
    line-height: 48px;

    color: #DBEFEC;
}

.frame.secret .ingredients {
    position: absolute;
    width: 100%;
    top: 783px;
    font-family: 'TT Hoves';
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 126%;
    text-align: center;
    color: #DBEFEC;
}

.frame.secret .ingredients .item {
    text-align: center;
    position: absolute;
    width: 165px;
    display: none;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
}

.frame.secret .ingredients .item .icon {
    text-align: center;
    position: relative;
    height: 80px;
    width: 100%;
}
.frame.secret .ingredients .item .icon img {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.frame.secret .ingredients .item .name {
    text-align: center;
    position: relative;
    width:100%;
    margin-top: 23px;
}

.frame.secret .ingredients .item .percent {
    text-align: center;
    position: relative;
    width:100%;
}


.frame.secret .ingredients #ing-label-0 {
    top: 0px;
    left: 14%;
}

.frame.secret .ingredients #ing-label-1 {
    top: 0px;
    left: 29%;
}
.frame.secret .ingredients #ing-label-2 {
    top: 0px;
    right: 29%;
}
.frame.secret .ingredients #ing-label-3 {
    top: 0px;
    right: 14%;
}
.frame.secret .ingredients .item.active {
    display: block;
    animation-timing-function: ease;
    animation-duration: 0.25s;
    animation-name: nextItem;
    opacity: 1;
}

@keyframes nextItem {
    from {
        transform: rotateY(90deg);
    }

    to {
        transform: rotateY(0deg);
    }
}

.frame.secret .ingredients .item.old {
    display: block;
    animation-timing-function: ease;
    animation-duration: 0.25s;
    animation-name: oldItem;
    opacity: 1;
}

@keyframes oldItem {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(90deg);
    }
}

.frame.secret .arrows {
    position: absolute;
    width: 102px;
    height: 32px;
    left: calc(50% - 51px);;
    top: 1022px;
}

.frame.secret .arrows .arrow-left {
    float: left;
    background: url('/assets/images/left-arrow.svg');
    width: 32px;
    height: 32px;
    background-size: cover;
    cursor: pointer;
    z-index: 5;

}

.frame.secret .arrows .arrow-right {
    float: right;
    background: url('/assets/images/right-arrow.svg');
    width: 32px;
    height: 32px;
    background-size: cover;
    cursor: pointer;
    z-index: 5;
}


.frame.secret .bullets {
    position: absolute;
    right: calc(50% - 115px);
    top: 1093px;
    z-index: 998;
}

.frame.secret .bullets div {
    width: 10px;
    float: left;
    height: 10px;
    margin: 0px 14px;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

.frame.secret .bullets div.active {
    margin-top: -2px;
    border: 2px solid #FF9E9E;
}

.frame.secret .guitar-small {
    position: absolute;
    top: 596px;
    right: calc(50% - 260px);
    height: 174px;
    width: 183px;
    background: url(/assets/images/guitar-small.png);
    background-size: cover;
}

.frame.secret #static_moved {
    position: fixed;
    z-index: 999;
    top: calc(50% - 650px);
    height: 100vw;

}

.frame.secret .ing-picture {
    position: absolute;
    background-size: cover;
    display: none;
    z-index: 999;
    pointer-events: none;
}

.frame.secret .ing-picture.active {
    display: block;
    zoom: 0;
    animation-timing-function: ease;
    animation-duration: 0.5s;
    animation-name: nextItem;
    opacity: 1;
}

.frame.secret .ing-picture.old {
    display: block;
    zoom: 0;
    animation-timing-function: ease;
    animation-duration: 0.5s;
    animation-name: oldItem;
    opacity: 1;
}

.frame.secret .ing-0 {
    top: 778px;
    right: calc(50% - 190px);
    height: 174px;
    width: 183px;
    background: url(/assets/images/ingr/1_rose.png);
}

.frame.secret .ing-1 {
    top: 644px;
    right: calc(50% - 142px);
    width: 119px;
    height: 267px;
    background: url(/assets/images/ingr/2_guitar.png);
}

.frame.secret .ing-2 {
    top: 694px;
    right: calc(50% + 42px);
    width: 101px;
    height: 142px;
    background: url(/assets/images/ingr/3_fishki.png);
    background-size: cover;
}

.frame.secret .ing-3 {
    top: 719px;
    right: calc(50% - 130px);
    width: 105px;
    height: 141px;
    background: url(/assets/images/ingr/4_cake.png);
}

.frame.secret .ing-4 {
    top: 850px;
    right: calc(50% - 169px);
    height: 120px;
    width: 114px;
    background: url(/assets/images/ingr/5_peper.png);
}

.frame.secret .ing-5 {
    top: 686px;
    /*right: 720px;*/
    right: calc(50% - -42px);
    width: 96px;
    height: 64px;
    background: url(/assets/images/ingr/6_flow.png);
}

.tmp {
    left: calc(50% - 40px);
    top: 87px;
    background: url(/assets/images/bottles/pink/1.png); 
    background-size: cover;
    width: 159px;
    height: 590px;
    position: absolute;
    z-index: 1000;
}

.frame.colors {
    width: 1440px;
    height: 1284px;
    background: radial-gradient(47.57% 53.35% at 50% 45.99%, rgba(1, 18, 64, 0) 0%, #011240 100%);
    mix-blend-mode: normal;
}

.frame.colors .bg-image {
    position: absolute;
    width: 1440px;
    height: 1284px;
    left: 0px;
    top: -258px;
    background: radial-gradient(47.57% 53.35% at 50% 45.99%, rgba(1, 18, 64, 0) 0%, #011240 100%),url(/assets/images/bg_screen2.png);
    mix-blend-mode: normal;
    background-size: cover;

}

.frame.colors #six {
    position: absolute;
    /*width: 634px;*/
    /*height: 1065px;*/
    left: 403px;
    /*transform: translate(-50%, 0);*/
    font-size: 1150px;
    top: -300px;
    font-weight: 800;
    font-size: 1066px;
    line-height: 99.9%;
    text-align: center;
    color: #DBEFEC;
}

.frame.colors .word {
    position: absolute;
    color: #DBEFEC;
    font-weight: 700;
    font-size: 48px;
    line-height: 99.9%;
}

.frame.colors .left {
    top: 400px;
    left: 98px;
}

.frame.colors .right {
    top: 400px;
    right: 98px;
}

.frame.colors .cubes {
    position: absolute;
    height: 160px;
    width: 160px;
    right: 337px;
    top: 580px;
}

.frame.colors .cubes .cube_big {
    top: 60px !important;
    left: 4px !important;
    position: absolute;

}
.frame.colors .cubes .cube_small {
    position: absolute;
    top: 0px !important;
    right: 4px !important;
    left: auto !important;

}

.frame.items {
    width: 1440px;
    height: 1433px;
}
.frame.items .bg-image {
    position: absolute;
    width: 1440px;
    height: 1284px;
    left: -43px;
    top: -470px;
    background: radial-gradient(46.39% 42.09% at 50% 46.21%, #DBEFEC 0%, rgba(1, 18, 64, 0) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    mix-blend-mode: normal;
    opacity: 0.3;
}

.frame.items .label {
    position: absolute;
    width: 900px;
    height: 210px;
    left: 463px;
    top: 205px;
    font-weight: 800;
    font-size: 124px;
    line-height: 84.9%;

    color: #DBEFEC;
    opacity: 0.6;
    transform: rotate(90deg);
}

.frame.items #item-content-5 .label {
    left: 520px;
}


.frame.items .name-base {
    position: absolute;
    left: 230px;
    top: 12px;
    font-weight: 700;
    font-size: 32px;
    line-height: 117.4%;
    color: #ECEFDB;
}
.frame.items .name {
    position: absolute;
    left: 230px;
    top: 50px;
    font-weight: 700;
    font-size: 32px;
    line-height: 117.4%;
    color: #ECEFDB;
}

.frame.items .description {
    position: absolute;
    width: 431px;
    height: 214px;
    left: 231px;
    top: 143px;
    font-weight: 300;
    font-size: 20px;
    line-height: 24px;

    color: #DBEFEC;
}

.frame.items .icons {
    position: absolute;
    top: 535px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 212px;

}
.frame.items .icons .icon {
    width: 106px;
    height: 106px;
    position: relative;
    cursor: pointer;
    z-index: 999;
    float: left;
    margin: 0px 10px;
    transform-style: preserve-3d;
}

.frame.items .icons .icon img {
    width: 100%;
    height: 100%;
}

.frame.items .icons .icon .light {
    position: absolute;
    height: 70px;
    width: 70px;
    left: 15px;
    top: 0px;
    background: #FFFFFF;
    mix-blend-mode: soft-light;
    opacity: 0;
    filter: blur(30.5px);
}
.frame.items .icons .icon:not(.active):hover .light {
    opacity: 0.2;
}

.frame.items .icons .active .light
{
    position: absolute;
    height: 127px;
    width: 127px;
    left: 25px;
    top: 0px;

    background: #FFFFFF;
    mix-blend-mode: soft-light;
    opacity: 0.2;
    filter: blur(30.5px);
    transform: translateZ(-1px)rotate(45deg);
    animation-duration: 0.5s;
    animation-name: iconBefore;
}

.frame.items .icons .icon .shadow {
    position: absolute;
    width: 70px;
    height: 70px;
    left: 20px;
    top: 40px;
    background: #000000;
    opacity: 0;
    filter: blur(17.5px);
    transform: rotate(45deg);
    z-index: -1;
}
.frame.items .icons .icon:not(.active):hover .shadow {
    opacity: 0.6;
}

.frame.items .icons .active .shadow
{
    position: absolute;
    width: 127px;
    height: 127px;
    left: 30px;
    top: 68px;
    background: #000000;
    opacity: 0.6;
    filter: blur(17.5px);
    transform: translateZ(-1px)rotate(45deg);
    animation-duration: 0.5s;
    animation-name: iconBefore;
}

.frame.items .icons .active {
    width: 194px;
    height: 194px;
    animation-duration: 0.5s;
    animation-name: iconActive;
}

@keyframes iconActive {
    from {
        width: 106px;
        height: 106px;
    }
    to {
        width: 194px;
        height: 194px;
    }
}

@keyframes iconBefore {
    from {
        width: 0px;
        height: 0px;
    }
    to {
        height: 127px;
        width: 127px;
    }
}

.frame.items .ellipse {
    position: absolute;
    width: 400px;
    height: 80px;
    /*left: 530px;*/
    left: calc(50% - 200px);
    top: 438px;
    z-index: 0;

    background: url('/assets/images/ellipse2.svg');
    background-size: cover;
}

.frame.items .btn-white {
    box-sizing: border-box;

    position: absolute;
    width: 286px;
    height: 48px;

    opacity: 0.95;
    border: 0.5px solid #F0D0D0;
    border-radius: 40px;
    cursor: pointer;
    font-family: 'TT Hoves';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    color: #303030;
    padding-top: 10px;
}

.frame.items .btn-white:before {
    top: 4px;
    left: 5px;
    width: 275px;
    position: absolute;
    height: 38px;

    content: '';
    background: #DBEFEC;
    border-radius: 28px;
    z-index: -1;
}

.frame.items .btn-white:after {
    content: '';
    top: 4px;
    left: 5px;
    width: 275px;
    position: absolute;
    height: 38px;


    background: #DBEFEC;
    mix-blend-mode: lighten;
    opacity: 0.6;
    filter: blur(7px);
    border-radius: 28px;
    z-index: -1;
}

.frame.items #make-coctail {
    right: 92px;
    top: 180px;
}
.frame.items #show-receipts {
    right: 92px;
    top: 260px;
}

.frame.items .item-content {
    display: none;
}

.frame.items .item-content.active {
    display: block;
    animation-timing-function: ease;
    animation-duration: 0.25s;
    animation-name: nextItemContent;
    /*opacity: 1;*/
}

@keyframes nextItemContent {
    from {
        /*transform: rotateY(90deg);*/s
        opacity: 0;
    }

    to {
        opacity: 1.0;
        /*transform: rotateY(0deg);*/
    }
}

.frame.items .item-content.old {
    display: block;
    animation-timing-function: ease;
    animation-duration: 0.25s;
    animation-name: oldItemContent;
    /*opacity: 1;*/
}

@keyframes oldItemContent {
    from {
        /*transform: rotateY(0deg);*/
        opacity: 1.0;
    }

    to {
        /*transform: rotateY(90deg);*/
        opacity: 0;
    }
}

.frame.items .item-content .i-s-0 {
    position: absolute;
    top: -145px;
    left: 558px;
}

.frame.items .item-content .i-s-1 {
    position: absolute;
    left: 562px;
    top: -105px;
}

.frame.items .item-content .i-s-2 {
    position: absolute;
    left: 545px;
    top: -72px;
}

.frame.items .item-content .i-s-3 {
    position: absolute;
    top: -145px;
    left: 500px;
}

.frame.items .item-content .i-s-4 {
    position: absolute;
    top: -75px;
    left: 550px;
}

.frame.items .item-content .i-s-5 {
    position: absolute;
    top: -85px;
    left: 490px;
}

.frame.receipt {
    width: 1200px;
    height: 1057px;
}

.frame.receipt .screen{
    position: absolute;
    width: 1200px;
    height: 1057px;
    left: 120px;
    top: 6033px;

    background: #FBF2F2;
    border-radius: 30px 30px 0px 0px;
    position: absolute;
    width: 1200px;
    height: 1057px;
    left: 120px;
    top: -515px;

    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    z-index: 1;
}
.frame.receipt .screen:before {
    content: '';
    position: absolute;
    width: 1200px;
    height: 1057px;
    left: 120px;
    top: -515px;

    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.frame.receipt .screen h3 {
    position: absolute;
    left: 112px;
    top: 43px;
    font-family: 'TT Hoves';
    font-style: normal;
    font-weight: 800;
    font-size: 64px;
    line-height: 75px;
    color: #000000;
    margin: 0px;
}
.frame.receipt .screen h4 {
    position: absolute;
    left: 112px;
    top: 145px;
    font-family: 'TT Hoves';
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 38px;

    color: #000000;
    margin: 0px;

}

.frame.receipt .screen p.description {
    position: absolute;
    left: 112px;
    top: 256px;
    font-family: 'TT Hoves';
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 24px;
    color: #000000;
    margin: 0px;
}

.frame.receipt .screen .label {
    position: absolute;
    width: 737px;
    height: 208px;
    right: -125px;
    top: 540px;

    font-family: 'TT Hoves';
    font-style: normal;
    font-weight: 800;
    font-size: 124px;
    line-height: 83.9%;
    /* or 104px */


    color: #CCBBA0;

    opacity: 0.6;
    transform: rotate(90deg);
}

.frame.receipt .big-bottle {
    position: absolute;
    width: 240px;
    height: 500px;
    left: 112px;
    top: 384px;
}

.frame.receipt .big-bottle .bottle {
    display: none;
    text-align: center;
}

.frame.receipt .big-bottle .bottle.active {
    display: block;
}



.frame.receipt .big-bottle img {
    position: relative;
    margin-top: 24px;
    width: 118px;
    height: 444px;
}

.frame.receipt .big-bottle.small img
{
    width: 88px;
    height: 323px;
    /*animation-duration: 0.5s;*/
    /*animation-name: fromBig;*/
    /*animation-timing-function: ease;*/
}

@keyframes fromBig {
    from {
        width: 118px;
        height: 444px;
    }

    to {
        width: 88px;
        height: 323px;
    }
}

.frame.receipt .big-bottle p
{
    position: relative;
    width: 100%;
    margin-top: 20px;
    text-align: center;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 200;
    font-size: 12px;
    line-height: 15px;
    color: #666666;
}

.frame.receipt .big-bottle .left-arrow {
    position: absolute;
    width: 23px;
    height: 23px;
    left: 27px;
    top: 189px;
    background: url('/assets/images/receipt/arrow-black-left.svg?v=1');
    background-size: cover;
    cursor: pointer;
}
.frame.receipt .big-bottle .right-arrow {
    position: absolute;
    width: 23px;
    height: 23px;
    right: 27px;
    top: 189px;
    background: url('/assets/images/receipt/arrow-black-right.svg?v=1');
    background-size: cover;
    cursor: pointer;
}

.frame.receipt .small-bottle {
    position: absolute;
    width: 192px;
    height: 400px;
    left: 355px;
    top: 384px;

    background: #F3E8E8;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.frame.receipt .small-bottle .bottle {
    display: none;
    text-align: center;
}

.frame.receipt .small-bottle .bottle.active {
    display: block;
}

.frame.receipt .small-bottle .plus {
    cursor: pointer;
    position: relative;
    margin: 0 auto;
    margin-top: 24px;
    width: 88px;
    height: 323px;
}
.frame.receipt .small-bottle .plus img {
    position: absolute;
    width: auto;
    height: auto;
    top: calc(50% - 10px);
    left: 50%;
    -ms-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}

.frame.receipt .small-bottle img {
    position: relative;
    margin-top: 24px;
    width: 88px;
    height: 323px;
}

.frame.receipt .small-bottle p
{
    position: relative;
    margin-top: 3px;
    width: 100%;
    text-align: center;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 200;
    font-size: 12px;
    line-height: 19px;
    color: #666666;
}

.frame.receipt .small-bottle .left-arrow {
    position: absolute;
    width: 23px;
    height: 23px;
    left: 14px;
    top: 189px;
    background: url('/assets/images/receipt/arrow-black-left.svg?v=1');
    background-size: cover;
    cursor: pointer;
}
.frame.receipt .small-bottle .right-arrow {
    position: absolute;
    width: 23px;
    height: 23px;
    right: 14px;
    top: 189px;
    background: url('/assets/images/receipt/arrow-black-right.svg?v=1');
    background-size: cover;
    cursor: pointer;
}
.frame.receipt .small-bottle.plus .left-arrow, .frame.receipt .small-bottle.plus .right-arrow {
    display: none;
}


.frame.receipt .ing-selector
{
    position: absolute;
    width: 192px;
    height: 192px;
    background: #F3E8E8;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.frame.receipt .ing-selector .left-arrow {
    position: absolute;
    width: 23px;
    height: 23px;
    left: 12px;
    top: 86px;
    background: url('/assets/images/receipt/arrow-black-left.svg?v=1');
    background-size: cover;
    cursor: pointer;
    z-index: 10;
}
.frame.receipt .ing-selector .right-arrow {
    position: absolute;
    width: 23px;
    height: 23px;
    right: 12px;
    top: 86px;
    background: url('/assets/images/receipt/arrow-black-right.svg?v=1');
    background-size: cover;
    cursor: pointer;
    z-index: 10;
}
.frame.receipt .ing-selector img {  
    position: absolute;
    margin: 0 auto;
    top: 50%;
    left: 50%;
    -ms-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}

.frame.receipt .ing-selector .item {
    width: 192px;
    height: 192px;
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
}
.frame.receipt .ing-selector .item p {
    position: absolute;
    width: 192px;
    top: 155px;
    text-align: center;

    font-family: 'Inter';
    font-style: normal;
    font-weight: 200;
    font-size: 12px;
    line-height: 15px;
    /* identical to box height */


    color: #666666;
}

.frame.receipt .ing-selector.plus {
    box-sizing: border-box;

    border: 4px solid #848D99;
    border-radius: 10px;
}


.frame.receipt .ing-selector .item.active {
    display: block;
}

.frame.receipt .ing-selector.plus .left-arrow, .frame.receipt .ing-selector.plus .right-arrow {
    display: none;
}

.frame.receipt .ing-selector .plus {
    cursor: pointer;
}

.frame.receipt .ing-selector .plus p
{
    position: absolute;
    width: 100%;
    text-align: center;
    top: 114px;

    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    text-align: center;

    color: #848D99;

}


.frame.receipt #ing-sel-0 {

    left: 565px;
    top: 384px;
}

.frame.receipt #ing-sel-1 {

    left: 777px;
    top: 384px;
}

.frame.receipt #ing-sel-2 {

    left: 565px;
    top: 592px;
}

.frame.receipt #ing-sel-3 {

    left: 777px;
    top: 592px;
}

.frame.receipt #ice {
    position: absolute;
    width: 192px;
    height: 92px;
    left: 355px;
    top: 806px;
    background: #F3E8E8;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    cursor: pointer;
}

.frame.receipt #ice.not  {
    opacity: 0.3;
}

.frame.receipt #ice img {
    position: absolute;
    width: 52px;
    height: 59px;
    top: 19px;
    left: 34px;
}

.frame.receipt #ice p {
    position: absolute;
    width: 23px;
    height: 15px;
    top: 27px;
    right: 46px;

    font-family: 'Inter';
    font-style: normal;
    font-weight: 200;
    font-size: 12px;
    line-height: 15px;
    /* identical to box height */


    color: #666666;
}
.frame.receipt .checkbox {
    position: absolute;
    top: 948px;
    left: 150px;
    text-align: center;
    width: 168px;
}

.frame.receipt .checkbox .left-label {
    float: left;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-size: 12px;
    line-height: 15px;
    margin-top: 5px;
    color: #666666;
}

.frame.receipt .checkbox .right-label {
    float: right;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-size: 12px;
    line-height: 15px;
    margin-top: 5px;
    color: #666666;
}
.frame.receipt .checkbox .right-label.active, .frame.receipt .checkbox .left-label.active {
    font-weight: 600;
}

.frame.receipt .switch {
    position: relative;
    display: inline-block;
    width: 55px;
    height: 26px;
}

.frame.receipt .switch input {display:none;}


.frame.receipt .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: .4s;
    transition: .4s;
    background: #EBDADA;
    box-shadow: inset 4px 4px 5px -4px rgba(0, 0, 0, 0.15);
    border-radius: 13px;
}

.frame.receipt .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    -webkit-transition: .4s;
    transition: .4s;
    background: #858D99;
    box-shadow: 0px 4px 4px -3px rgba(0, 0, 0, 0.25);
    border-radius: 11px;
}

.frame.receipt input:checked + .slider:before {
    -webkit-transform: translateX(29px);
    -ms-transform: translateX(29px);
    transform: translateX(29px);
}

.frame.receipt .slider.round {
    border-radius: 34px;
}

.frame.receipt .slider.round:before {
    border-radius: 50%;
}

.frame.receipt .name {
    position: absolute;
    left: 563px;
    top: 845px;
}

.frame.receipt .name label {
    font-family: 'TT Hoves';
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 24px;

    color: #4B4B4B;
    position: absolute;
    top: 0px;
    left: 20px;
    width: 400px;
}

.frame.receipt .name .input {
    position: absolute;
    left: 0px;
    top: 60px;
    width: 405px;
    height: 92px;
    background: #F3E8E8;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    border: none;
}

.frame.receipt .name input {
    position: absolute;
    width: 340px;
    height: 26px;
    top: 34px;
    left: 34px;

    font-family: 'Inter';
    font-style: normal;
    font-weight: 200;
    font-size: 16px;
    line-height: 19px;

    padding-left: 20px;

    color: #666666; 
    background: #FCEEEE;
    box-shadow: inset 4px 4px 5px -4px rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    border: none;
}
.frame.receipt .name input:focus{
    outline: none;
}

.frame.calc-receipt {
    width: 1200px;
    height: 134px;
    top: -515px;
    left: 120px;
    background: radial-gradient(101% 158.96% at 100% 97.09%,  #52599F 0%,  #73CEE2 82.96%,  #4DB2B6 100%);
    border-radius: 0px;
    z-index: 0;
}

.frame.calc-receipt .btn-calc {
    position: absolute;
    width: 396px;
    height: 40px;
    top: 41px;
    left: 389px;
    border: 0.5px solid #F0D0D0;
    border-radius: 40px;
    font-family: 'TT Hoves';
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 28px;
    text-align: center;
    padding-top: 10px;
    color: #5970AC;
    cursor: pointer;
}

.frame.calc-receipt .btn-calc:after {
    position: absolute;
    left: 6px;
    top: 4px;
    content: '';
    width: 383px;
    height: 42px;

    background: #FFFFFF;
    box-shadow: 0px 4px 8px 8px rgba(0, 0, 0, 0.05);
    border-radius: 28px;
    z-index: -1;
}

.frame.result-receipt {
    width: 1200px;
    height: 753px;
    top: -515px;
    left: 120px;
    background: radial-gradient(101.58% 158.96% at 100% 99.09%, #52599F 0%, #73CEE2 82.96%, #4DB2B6 100%);
    border-radius: 0px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    display: none;
}

.frame.result-receipt.active {
    display:block;
}

.frame.result-receipt .preview {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-51%);
    left: -60px;
}
.frame.result-receipt .preview.active {
    display: block;
}

.frame.result-receipt h3 {
    position: absolute;
    left: 590px;
    top: 34px;

    font-family: 'TT Hoves';
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 38px;

    color: #FFFFFF;
}

.frame.result-receipt h4 {
    position: absolute;
    left: 590px;
    top: 154px;
    font-family: 'TT Hoves';
    font-style: normal;
    font-weight: 500;
    font-size: 30px;
    line-height: 35px;
    text-transform: uppercase;
    color: #FFFFFF;
}

.frame.result-receipt h5 {
    position: absolute;
    padding: 7px 16px;
    left: 574px;
    top: 183px;
    font-family: 'TT Hoves';
    font-style: normal;
    font-weight: 500;
    font-size: 30px;
    line-height: 35px;
    text-transform: uppercase;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-radius: 12px;

}
.frame.result-receipt p.method {
    position: absolute;
    left: 590px;
    top: 295px;

    font-family: 'TT Hoves';
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 28px;

    color: #FFFFFF;
}
.frame.result-receipt ul.items {
    position: absolute;
    left: 569px;
    top: 356px;
    display: list-item;
    text-align: -webkit-match-parent;
    list-style-type: none;
}
.frame.result-receipt ul.items li {
    font-family: 'TT Hoves';
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 24px;
    color: #FFFFFF;
    list-style: none;
    position: relative;
    margin-bottom: 9px;
}

.frame.result-receipt ul.items li::before {
    content: "•";
    position: absolute;
    width: 10px;
    height: 10px;
    font-size: 10pt;
    left: -17px;
}

.frame.result-receipt .btn-share {
    position: absolute;
    width: 396px;
    height: 40px;
    top: 644px;
    left: 573px;
    border: 0.5px solid #F0D0D0;
    border-radius: 40px;
    font-family: 'TT Hoves';
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 28px;
    text-align: center;
    padding-top: 10px;
    color: #5970AC;
    cursor: pointer;
}

.frame.result-receipt .btn-share:after {
    position: absolute;
    left: 6px;
    top: 4px;
    content: '';
    width: 383px;
    height: 42px;

    background: #FFFFFF;
    box-shadow: 0px 4px 8px 8px rgba(0, 0, 0, 0.05);
    border-radius: 28px;
    z-index: -1;
}

.coctails {
    position: relative;
    width: 1200px;
    margin: 28px auto 0px;
    color: #fff;
    /*top: -535px;*/
    top: -516px;
}
.coctails .cup {
    position: absolute;
    right: -165px;
    top: -215px;
    width: 340px;
}
.coctails .header {
    background: radial-gradient(150.58% 189.96% at 0% 2.09%, #4DB2B6 0%, #73CEE2 20.04%, #52599F 100%);
    /*background: radial-gradient(101.58% 158.96% at 0% 2.09%, #52599F 0%, #73CEE2 82.96%, #4DB2B6 100%);*/
    border-radius: 30px 30px 0px 0px;
    height: 764px;
    width: 100%;
    position: relative;
}
.coctails .header .coctail {
    width: 730;
    float: left;
    margin-left: -115px;
    margin-top: -77px
}
.coctails .header h1 {
    font-family: 'TT Hoves';
    font-style: normal;
    font-weight: 800;
    font-size: 64px;
    line-height: 60px;
    position: absolute;
    /*right: 253px;*/
    right: 217px;
    top: 65px;
}
.coctails .header h2 {
    font-family: 'TT Hoves';
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 38px;
    position: absolute;
    right: 205px;
    top: 270px;
}
.coctails .header p {
    font-family: 'TT Hoves';
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 28px;
    position: absolute;
    right: 130px;
    top: 400px;
    width: 470px;
}

.coctails .content {
    background: #FBF2F2;
    border-radius: 0px 0px 30px 30px;
    width: 100%;
    min-height: 100px;
    margin-top: -32px;
}
.coctails .content h3 {
    font-family: 'TT Hoves';
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 30px;
    color: #000000;
    padding:  68px 0px 0px 71px;
}

.coctails .content .row {
    padding: 25px 60px;
    display: inline-block;

}
.coctails .content .col {
    float: left;
    width: 302px; 
    height: 400px;
    background: #FDF8F8;
    border-radius: 5px;
    margin: 1px;
    text-align: center;
    padding: 16px 26px 26px 26px;
    cursor: pointer;
}
.coctails .content .col:hover {
    /*box-shadow: 2px 2px 2px #dedede*/
    filter: drop-shadow(0px 7px 15px rgba(0, 0, 0, 0.12));
}

.col .icon {
    margin-top: 27px;
}
.col h4 {
    text-align: left;
    font-family: 'TT Hoves';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    text-transform: uppercase;
    margin-top: 24px;
    margin-bottom: 0px;
    color: #4F4F4F;
}
.col .items {
    width: 100%;
    margin-left: -5px;
}
.col .item {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 200;
    font-size: 12px;
    line-height: 15px;
    color: #666666;
    float: left;
    background: #FBF2F2;
    padding: 4px 10px;
    border-radius: 4px;
    margin: 4px;
    margin-bottom: 0px;

}

/*.first_modal {
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    backdrop-filter: blur(15px);
    text-align: center;
    display: none;
    z-index: 9999;
}*/
.first_modal {
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    /*backdrop-filter: blur(15px);*/
    text-align: center;
    display: none;
    z-index: 9999;
    background: #353535bd;
}

@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
    .first_modal {
        background-color: #ccc0;
        -webkit-backdrop-filter: blur(15px);
        backdrop-filter: blur(15px);
    }
}
.first_modal.active {
    display: block;
}

.first_modal .request {
    font-family: 'TT Hoves';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 55px;
    margin-top: 35vh;
    text-align: center;
    color: #FFFFFF;
}

.first_modal .buttons {
    margin: 0 auto;
    margin-top: 55px;
    width: 580px;
    max-width: 95%;
}
.first_modal button:hover {
    filter: drop-shadow(0px 7px 15px #cbcdd5);
}

.first_modal .yes {
    width: 164px;
    height: 34.88px;
    background: #4DB2B6;
    box-shadow: 0px 4px 8px 8px rgba(0, 0, 0, 0.05);
    border-radius: 28px;
    border: 0px;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    color: #FFFFFF;
    cursor: pointer;
    float: left;
}

.first_modal .no {
    width: 164px;
    height: 34.88px;
    background: #FF9E9E;
    box-shadow: 0px 4px 8px 8px rgba(0, 0, 0, 0.05);
    border-radius: 28px;
    border: 0px;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    color: #FFFFFF;
    cursor: pointer;
    float: right;
}

.first_modal .alert {
    bottom: 50px;
    position: absolute;
    left: calc(50% - 1180px/2);
}

.first_modal .alert-mobile{
    display: none;
}

.modal {
    display: none;  
    position: fixed; 
    z-index: 5; 
    left: 0;
    top: 0;
    bottom: 0px; 
    right: 0px; 
    /*overflow: hidden;*/ 
    overflow: overlay;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
}
.modal.active {
    display: block;
}

.modal-content {
    width: 1070px;
    height: 828px;
    display: none;
    border-radius: 20px;
    background: linear-gradient(297.44deg, #C2DEDD -3.26%, #6482C1 -3.25%, #C2D2FF 105.01%), url('/r2/modal_bg3.png');
    background-blend-mode: hard-light;
    background-size: cover;
    margin: 0 auto; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    position: absolute;
}

.modal-content.active {
    display: block;
}

.modal-content.right {
    display: block;
    animation-duration: 0.5s;
    animation-name: slideright;
    animation-timing-function: ease;
}

@keyframes slideright {
    from {
        left: 100%;
        opacity: 0;
    }

    to {
        left: 50%;
        opacity: 1;
    }
    /*                50% {
                        left: 50%;
                        opacity: 0.5;
                    }*/
}

.modal-content.left {
    display: block;
    animation-duration: 0.5s;
    animation-name: slideleft;
    animation-timing-function: ease;
}
@keyframes slideleft {
    from {
        left: -150%;
        opacity: 0;
    }

    to {
        left: 50%;
        opacity: 1;
    }
    /*                50% {
                        left: 50%;
                        opacity: 0.5;
                    }*/
}

.modal-content.fromleft {
    display: block;
    animation-duration: 0.5s;
    animation-name: fromleft;
    animation-timing-function: ease;
    position: absolute;
    left: 0px;
}
.modal-content.fromright {
    display: block;
    animation-duration: 0.5s;
    animation-name: fromright;
    animation-timing-function: ease;
    position: absolute;
    left: 0px;
}

@keyframes fromleft {
    from {
        left: 50%;
        opacity: 1.0;
    }

    to {
        left: 100%;
        opacity: 0;
    }
    /*                50% {
                        left: 100%;
                        opacity: 0.5;
                    }*/
}

@keyframes fromright {
    from {
        left: 50%;
        opacity: 1.0;
    }

    to {
        left: -100%;
        opacity: 0;
    }
    /*                50% {
                        left: -100%;
                        opacity: 0.5;
                    }*/
}

#cl1.modal-content{
    background: linear-gradient(297.44deg, #C2DEDD -3.26%, #6482C1 -3.25%, #C2D2FF 105.01%), url('/r2/modal_bg3.png');    
}
#cl2.modal-content{
    background: linear-gradient(297.44deg, #EDA335 -3.26%, #FFEFB7 105.01%), url('/r2/modal_bg3.png');
}
#cl3.modal-content{
    background: linear-gradient(297.44deg, #A4C531 -3.25%, #F1FFDA 105.01%), url('/r2/modal_bg3.png');
}
#cl4.modal-content{
    background: linear-gradient(297.44deg, #028EA8 -3.25%, #E9F7FF 105.01%), url('/r2/modal_bg3.png');
}
#cl5.modal-content{
    background: linear-gradient(297.44deg, #F2702D -3.25%, #FFE5E0 105.01%), url('/r2/modal_bg3.png');
}
#cl6.modal-content{
    background: linear-gradient(297.44deg, #F46871 -3.26%, #FFD0D7 105.01%), url('/r2/modal_bg3.png');
}


.modal-content .description {
    padding: 0px 100px 40px;
}

.modal-content h3 {
    font-family: 'TT Hoves';
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 38px;
    text-transform: uppercase;
    color: #000000;
    margin-bottom: 16px;
    margin-left: 100px;
    margin-top: 70px;
}

.modal-content h4 {
    font-family: 'TT Hoves';
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 28px;
    color: #000000;
    margin-top: 16px;
    margin-bottom: 15px;
}
.modal-content h4.method {
    /*margin-top: 125px;*/
    margin-top: 70px;
    margin-bottom: 27px;
}

.modal-content ul {
    margin-left: 30px;
    padding-left: 2px;
    width: 350px;
}
.modal-content li {
    font-family: 'TT Hoves';
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 16px;
    color: #000000;
    list-style: none;
    margin-bottom: 5px;
    position: relative;
}
.modal-content ul li:before{ 
    content: "•";
    position: absolute;
    width: 10px;
    height: 10px;
    font-size: 10pt;
    left: -17px;
}

.modal-content ul.method li {
    margin-bottom: 10px;
    line-height: 18px;
    font-size: 16px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
.modal-content .preview {
    position: absolute;
}
.modal-content .preview-b {
    display: none;
}

#cl1.modal-content .preview {
    right: 70px;
    top: 3px;
}

#cl2.modal-content .preview {
    right: 50px;
    top: 55px;
}

#cl3.modal-content .preview {
    right: 30px;
    top: 92px;
}

#cl4.modal-content .preview {
    right: -50px;
    top: -27px;
}

#cl5.modal-content .preview {
    right: 40px;
    top: 81px;
}

#cl6.modal-content .preview {
    right: -55px;
    top: 48px;
}

.modal-content .left-arrow {
    background: url(/r2/left.svg);
    width: 20px;
    height: 40px;
    position: absolute;
    left: 30px;
    top: calc(50% - 40px/2);
    cursor: pointer;
    z-index: 5;
}
.modal-content .left-arrow:hover {
    filter: invert(27%) sepia(51%) saturate(4%) hue-rotate(346deg) brightness(104%) contrast(97%);;
}


.modal-content .right-arrow {
    background: url(/r2/right.svg);
    /*    width: 20px;
        height: 40px;*/
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
    width: 60px;
    height: 60px;
    position: absolute;
    right:  30px;
    top: calc(50% - 40px/2);
    cursor: pointer;
    z-index: 5;
}
.modal-content .right-arrow:hover {
    filter: invert(27%) sepia(51%) saturate(4%) hue-rotate(346deg) brightness(104%) contrast(97%);;
}
.modal-content .close-btn {
    background: url(/r2/close.svg);
    /*    width: 20px;
        height: 20px;*/
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
    width: 60px;
    height: 60px;
    position: absolute;
    right:  30px;
    top: 30px;
    cursor: pointer;
    z-index: 5;
}
.modal-content .close-btn:hover {
    filter: invert(27%) sepia(51%) saturate(4%) hue-rotate(346deg) brightness(104%) contrast(97%);;
}

.modal-content .cl-footer {
    width: 856px;
    height: 36px;
    border: 0.5px solid #000000;
    border-radius: 23px;
    position: absolute;
    font-family: 'TT Hoves';
    font-style: normal;
    font-weight: 275;
    font-size: 14px;
    line-height: 16px;
    text-transform: uppercase;
    color: #000000;
    bottom: 47px;
    left: calc(50% - 856px/2);
    display: table;
}

.cl-footer .level, .cl-footer .time, .cl-footer .kitchen {
    display: table-cell;
    text-align: center;
    padding: 10px 15px;
    width: 33%;
}
.cl-footer b {
    font-weight: 400;
    margin-left: 3px;
}
.cl-footer .level
{
    text-align: left;
}
.cl-footer .kitchen {
    text-align: right;
}
.close-button {
    display: none;
}

.frame.partners {
    width: 1200px;
    height: 1150px;
    top: -515px;
    left: 120px;
}

.frame.partners .buy {
    position: absolute;
    top: 84px;
    left: 114px;
    width: 226px;
    height: 158px; 
    background: url('/assets/images/buy3.svg');
}

.frame.partners h5 {
    position: absolute;
    top: 113px;
    left: 464px;

    font-family: 'TT Hoves';
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 24px;

    color: #DBEFEC;
} 

.frame.partners .list {
    position: absolute;
    top: 312px;
    max-width: 100%;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: normal;
    flex-wrap: wrap;
    grid-gap: 18px 28px;
}

.frame.partners .list img {
    flex: 0 0 auto;
    grid-gap: 20px;
}

.frame.footer {
    width: 1200px;
    height: 734px;
    top: -515px;
    left: 120px;
}

.frame.footer ul {
    list-style-type: none;
    position: absolute;
    top: 4px;
    left: -39px;
}

.frame.footer ul li
{
    margin-bottom: 27px;
}
.frame.footer ul li a {
    font-family: 'TT Hoves';
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 28px;

    color: #FFFFFF;
}
.frame.footer .link {
    position: absolute;
    top: 23px;
    right: 0px;
}
.frame.footer .link a {    
    font-family: 'TT Hoves';
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 117.4%;
    /* identical to box height, or 38px */

    text-align: center;
    text-decoration: underline;

    color: #DBEFEC;
}

.frame.footer .social {
    position: absolute;
    top: 87px;
    right: 0px;
    width: 100px;
}

.frame.footer .social .soc-vk {
    position: relative;
    float: right;
    width: 61px;
    height: 61px;
    background: url('/assets/images/vk.svg');
}


.frame.footer .design-logo {
    position: absolute;
    top: 288px;
    right: 0px;
    width: 150px;
    height: 42px;
    background: url('/assets/images/ad_logo.svg');
}

.frame.footer .no_smok {
    position: absolute;
    top: 616px;
    left: -45px;
    width: 1295px;
    height: 81px;
    z-index: 5;
}

.frame.footer .player {
    position: absolute;
    top: 394px;
    left: calc(50% - 390px);
    width: 780px;
    height: 342px;
}

#menu-btn {
    background: url(/assets/images/menu.svg);
    background-size: 22px 18px;
    background-position: center;
    background-repeat: no-repeat;
    width: 60px;
    height: 60px;
    position: fixed;
    left: 68px;
    top: 68px;
    cursor: pointer;
    z-index: 9999;
}

#menu {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 9999;
    background: #01123F;
    display: none;
}

#menu #menu-close-btn {
    background: url(/assets/images/close.svg);
    background-size: 27px 28px;
    background-position: center;
    background-repeat: no-repeat;
    width: 60px;
    height: 60px;
    position: absolute;
    left: 4px;
    top: 0px;
    cursor: pointer;
    z-index: 5;
}

#menu ul {
    list-style-type: none;
    position: absolute;
    top: 65px;
    left: 102px;
}

#menu ul li {
    margin-bottom: 27px;
}

#menu ul li a {
    font-family: 'TT Hoves';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 25px;
    color: #FFFFFF;
}

#menu .link {
    position: absolute;
    top: 84px;
    right: 139px;
}

#menu .link a {
    font-weight: 700;
    font-size: 24px;
    line-height: 117.4%;
    text-decoration: none;
    color: #DBEFEC;
}

#menu .social {
    position: absolute;
    top: 198px;
    right: 142px;
}

#menu .social .soc-vk {
    position: relative;
    float: right;
    width: 61px;
    height: 61px;
    background: url(/assets/images/vk.svg);
}

#menu .bg-text {
    position: absolute;
    height: 418px;
    width: 94%;
    left: 3%;
    bottom: 0px;
    background: url(/assets/images/anti_menu.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
}

#menu .buttons {
    position: absolute;
    bottom: 10px;
    max-width: 100%;
    width: 100%;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: normal;
    flex-wrap: wrap;
    /*grid-gap: 18px 28px;*/
    grid-gap: 8%;
}

#menu .buttons .item {
    /*flex-basis: 23%;*/
    width: 94px;
    height: 345px;
    cursor: pointer;

}

#menu .buttons .item#b0 {
    background: url(/assets/images/bottles2/navy/b1.png);
    background-size: cover;
}

#menu .buttons .item#b0 {
    background: url(/assets/images/bottles2/navy/b1.png);
    background-size: cover;
}

#menu .buttons .item#b1 {
    background: url(/assets/images/bottles2/blue/b1.png);
    background-size: cover;
}

#menu .buttons .item#b2 {
    background: url(/assets/images/bottles2/green/b1.png);
    background-size: cover;
}

#menu .buttons .item#b3 {
    background: url(/assets/images/bottles2/yellow/b1.png);
    background-size: cover;
}

#menu .buttons .item#b4 {
    background: url(/assets/images/bottles2/red/b1.png);
    background-size: cover;
}

#menu .buttons .item#b5 {
    background: url(/assets/images/bottles2/pink/b1.png);
    background-size: cover;
}

.frame.faq {
    width: 1200px;
    left: 120px;
    top: -540px;
    padding-top: 290px;
}

.frame.faq .item { 
    margin-bottom: 60px;
    width: 650px;
}

.frame.faq .item .request
{
    font-weight: 700;
    font-size: 20px;
    line-height: 25px;
    color: #FFFFFF;
    margin-bottom: 16px;
}

.frame.faq .item .answer
{
    font-weight: 300;
    font-size: 16px;
    line-height: 20px;
    color: #FFFFFF;
}

.frame.faq .faq {
    position: absolute;
    top: 84px;
    left: 114px;
    width: 530px;
    height: 158px; 
    background: url('/assets/images/faq2.svg?v=1');
}

.frame.faq h5 {
    position: absolute;
    top: 113px;
    right: 70px;


    font-weight: 300;
    font-size: 16px;
    line-height: 20px;

    color: #DBEFEC;
} 

.frame.faq .rigcht-img {
    position: absolute;
    right: -130px;
    top:300px;
}

#lang-menu {
    width: 34px;
    position: fixed;
    left: 81px;
    top: 117px;
    z-index: 9999999;
    color: #dbefec;
    font-weight: 400;
}
#lang-menu span {
    margin-right: 5px;
    cursor: pointer;
    padding: 5px;
    float: left;
}

#lang-menu span.active {
    border: 1px solid #ccc6;
}