@import url("fonts.css");



@desktop_l:  ~"only screen and (min-width: 1200px)";                            // xl
@desktop:    ~"only screen and (min-width: 992px) and (max-width: 1199px)";     // lg
@tablet:     ~"only screen and (min-width: 768px) and (max-width: 991px)";      // md
@phone_l:    ~"only screen and (min-width: 576px) and (max-width: 767px)";      // sm
@phone:      ~"only screen and (max-width: 575px)";     


@crema: #eee4b4;
@pink_gold: #d4a362;
@gold: #D4A362;
@white: #FFF9DF;

@green: #165A36;
@green_lighter: #00693B;
@grey: #747474;
@red: #CC162D;
@error_color: #ffffff;

.newline() { content:"\000A"; white-space: pre; }
.menu_delimiter() { 
    content: "|"; 
    margin: 0rem 0.3rem 0rem 0.4rem; 
    display: inline-block; 
}


.with_shadow(@x, @y, @b, @s, @color) {
    -webkit-box-shadow: @x @y @b @s @color;
    -moz-box-shadow: @x @y @b @s @color;
    box-shadow: @x @y @b @s @color;
}

.with_inner_shadow(@color) {
    -webkit-box-shadow: inset -3px 5px 9px -7px @color;
    -moz-box-shadow: inset -3px 5px 9px -7px @color;
    box-shadow: inset -3px 5px 9px -7px @color;
}

.transition(@selector, @time) {
    -webkit-transition: @selector @time ease-in-out !important;
    -moz-transition: @selector @time ease-in-out !important;
    -o-transition: @selector @time ease-in-out !important;
    -ms-transition: @selector @time ease-in-out !important;
    transition: @selector @time ease-in-out !important;
}

.content_border(@size) {
    -webkit-filter: drop-shadow(@size @size 0 @pink_gold)
                    drop-shadow(-@size @size 0 @pink_gold)
                    drop-shadow(@size -@size 0 @pink_gold)
                    drop-shadow(-@size -@size 0 @pink_gold);

        filter: drop-shadow(@size @size 0 @pink_gold)
                drop-shadow(-@size @size 0 @pink_gold)
                drop-shadow(@size -@size 0 @pink_gold)
                drop-shadow(-@size -@size 0 @pink_gold);
}


.border_round(@radius) {
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}

.border_round_custom(@tl, @tr, @bl, @br) {
    border-top-left-radius: @tl;
    border-top-right-radius: @tr;
    border-bottom-left-radius: @bl;
    border-bottom-right-radius: @br;
    
    -webkit-border-top-left-radius: @tl;
    -webkit-border-top-right-radius: @tr;
    -webkit-border-bottom-left-radius: @bl;
    -webkit-border-bottom-right-radius: @br;
    
    -moz-border-top-left-radius: @tl;
    -moz-border-top-right-radius: @tr;
    -moz-border-bottom-left-radius: @bl;
    -moz-border-bottom-right-radius: @br;
}


.back_gradient(@top_color, @bottom_color) {
    background: @top_color;
    background: -moz-linear-gradient(top, @top_color 20%, @bottom_color 100%);
    background: -webkit-linear-gradient(top, @top_color 20%, @bottom_color 100%);
    background: linear-gradient(to bottom, @top_color 20%, @bottom_color 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=@top_color, endColorstr=@bottom_color, GradientType=0 );
}





* {
    margin: 0;
    padding: 0;
}


html, body { 
    width: 100%;
    min-height: 100vh;
    height: auto;
    font-family: "Avenir";
    font-weight: 700;
    font-size: 16px;
    /*letter-spacing: 1px;*/
}

body {
    position: relative;
    color: @gold;
    a { color: @gold; }
    font-variant-ligatures: common-ligatures;
    background-color: #00220C;
}



#wrapper {
    position: relative;
    min-height: 100dvh;
    padding-bottom: 150px;
    
    .page_wrapper {
        
        position: relative;
        width: 100%;
        max-width: 1600px;
        
        margin: auto;
        /*padding: 0 20px;*/

        background: #00220C;
        background: linear-gradient(90deg, rgba(0, 34, 12, 1) 0%, rgba(4, 65, 35, 1) 10%, rgba(13, 98, 60, 1) 50%, rgba(4, 65, 35, 1) 90%, rgba(0, 34, 12, 1) 100%);

    }
    
    
    &.external {
        
        background-color: @crema;
        
        .page_wrapper {
            background: none;
            background-color: @crema;
            color: @green;
            a { color: @green; text-decoration: underline; }
        }
        
        .container-fluid.main_menu {
            display: none;
        }
    }
    
    &.coming_soon {
        padding-bottom: 0px;
        .page_wrapper {
            min-height: 100dvh;
        }
    }
    
}



.container-fluid.main_menu {
    
    position: relative;
    z-index: 5;
    padding: 0;
    background-color: @red;
    border-bottom: 3px solid @crema;
    
    
    .navigation {
        max-width: 1600px;
        margin: auto;
        padding: 10px 0;
        @media @tablet, @phone_l, @phone { width: 100%; }
        
        
        
        .navbar {
            padding: 0.5rem 2rem;
            
            .navbar-brand {
                max-width: 100px;
                padding-top: 1.5rem;
                
                @media @phone {
                    max-width: 80px;
                    padding-top: 0.5rem;
                }
            }
            
            .navbar-nav {
                /*align-items: center;*/
                align-items: end;
                max-width: 1150px;
                font-size: 1.2rem;
                    
                cursor: pointer;

                a {
                    position: relative;
                    color: @crema;

                    &:after {
                        content: '';
                        position: absolute;
                        top: 0; left: 0; right: 0; bottom: 7px;
                        border-bottom-width: 1px;
                        border-bottom-style: solid;
                        border-color: @crema;
                        width: 0;
                        margin: auto;
                        transition-duration: 0.25s;
                        transition-property: width, border-color;
                        transition-timing-function: ease-in-out
                    }

                    &:hover { 
                        &:after {
                            width: 100%;
                        }
                    }
                }

                &.active {
                    a:after {
                        width: 100%;
                        border-color: @crema;
                    }
                }
                
                
            }
            
            .navbar-toggler {
                width: auto;
                margin-left: auto;
                span {
                    display: block;
                    background-color: @crema;
/*                    background: rgb(154,104,20);
                    background: linear-gradient(90deg, rgba(154,104,20,1) 0%, rgba(222,175,40,1) 20%, rgba(154,104,20,1) 40%, rgba(246,216,112,1) 70%, rgba(154,104,20,1) 100%);*/
                    height: 4px;
                    width: 40px;
                    margin-top: 5px;
                    margin-bottom: 5px;
                    position: relative;
                    left: 0;
                    opacity: 1;
                    transition: all 0.35s ease-out;
                    transform-origin: center left;
                }
            }
            
            .navbar-toggler:not(.collapsed) span:nth-child(1) { transform: translate(5%, -140%) rotate(45deg); }
            .navbar-toggler:not(.collapsed) span:nth-child(2) { opacity: 0; }
            .navbar-toggler:not(.collapsed) span:nth-child(3) { transform: translate(5%, 140%) rotate(-45deg); }

            .navbar-toggler span:nth-child(1) { transform: translate(0%, 0%) rotate(0deg); }
            .navbar-toggler span:nth-child(2) { opacity: 1; }
            .navbar-toggler span:nth-child(3) { transform: translate(0%, 0%) rotate(0deg); }
            
            @media @phone_l, @phone {
                .navbar-toggler {
                    span {
                        width: 30px;
                    }
                }
                
                .navbar-toggler:not(.collapsed) span:nth-child(1) { transform: translate(5%, -50%) rotate(45deg); }
                .navbar-toggler:not(.collapsed) span:nth-child(2) { opacity: 0; }
                .navbar-toggler:not(.collapsed) span:nth-child(3) { transform: translate(5%, 50%) rotate(-45deg); }
            }
            
            
            
            
            @media @phone, (max-width: 450px) {
                padding: 0.5rem 0;
            }
            
            .navbar-nav {
                /*padding-bottom: 20px;*/
                .nav-item {

                    &:nth-child(1) { margin-top: 20px; }

                    a { margin: 0px 10px; }
                }
            }
        }
    }
}



.headline {
    img {
        width: 90%;
        max-width: 325px;
        margin: auto;
    }
}

/*
.container-fluid {
    
    position: relative;
    z-index: 2;
    
    .delimiter {
        
        z-index: 0;
        padding: 30px 0;

        [class*='col-'] {
            width: 100%;
            height: 20px;
            background-color: rgba(13, 98, 60, 0.0);
        }

        @media @phone_l, @phone {

            padding: 30px 0;

            [class*='col-'] {
                height: 10px;
            }
        }
    }
}
*/


.container-fluid.home {
    
    padding-top: 20px;
    
    
}





.container-fluid.registration, .container-fluid.prizes, .container-fluid.winners, .container-fluid.rules {
    
    position: relative;
    z-index: 1;
    padding-top: 20px;
    
    .section_title {
        position: relative;
        top: -90px;
        text-align: center;
        color: @green;
        font-size: 1.4em; line-height: 1.2em;
        
        span {
            display: block;
            font-size: 0.8em; line-height: 1.2em;
            margin-top: 5px;
        }
        
        @media @tablet { top: -60px; }
        @media @phone_l {
            top: -35px;
            font-size: 1.2em; line-height: 1.2em;
        }
        @media @phone { 
            top: -7vw;
            font-size: 4.5vw; line-height: 1.2em;
        }
    }
    
    
    .section_header, .section_footer {
        img {
            min-width: 100%;
        }
    }
    
    .section_content {
        position: relative;
        &>div {
            background-color: @crema;
            /*min-height: 100px;*/
        }
        
        &:after {
            content: '';
            position: absolute;
            top: 0; right: -10px;
            background: url('../images/kym.svg') no-repeat right top;
            background-size: 100%;
            width: 17px;
            height: 340px;
            
            @media @phone {
                right: 0px;
                background-size: 80%;
            }
        }
    }
}


img.bottle_can_img {
    position: relative;
    z-index: 1;
    margin-bottom: -50px;
    width: 35%;
    max-width: 220px;
    
    @media @tablet { margin-bottom: -110px; }
    @media @phone_l { margin-bottom: -80px; }
    @media @phone { margin-bottom: -15vw; }
}










.container-fluid.registration {
    
    min-height: 200px;
    
    .section_content {
        &>div { 
            /*margin-bottom: -120px;*/
        }
    }
    
    form { 
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
        width: 100%;
        max-width: 800px;
        margin: auto;
        
        @media @desktop_l, @desktop {
            top: -120px;
            bottom: -120px;
        }
        
        
        .caps_container, .checkboxes {
            width: 95%;
            max-width: 525px;
            margin: auto;
        }
        
        
        .caps_container {
            position: relative;
            
            @media @desktop_l, @desktop {
                &:after {
                    content: '';
                    position: absolute;
                    top: 190px;
                    right: -230px;
                    background: url('../images/bottle_can_form.png') no-repeat right top;
                    background-size: 100%;
                    width: 277px;
                    height: 339px;
                }
            }
        }
        
        .cap_closed {
            position: absolute;
            top: 0; left: 0; right: 0;
            z-index: 3;
            opacity: 1;
            .transition(transform, 0.2s);
            
            &.close {
                /*opacity: 0;*/
                transform: scaleX(0);
            }
        }
        
        .cap_opened {
            position: relative;
            z-index: 2;
            
            display: flex;
            justify-content: center;
            align-items: center;
            
            transform: scaleX(0);
            .transition(transform, 0.2s);
            opacity: 0;
            
            &.open {
                transform: scaleX(1);
                opacity: 1;
            }
            
            img {
                position: relative;
            }
            
            .input_container {
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 10px;
                position: absolute;
                top: 0; left: 0; right: 0; bottom: 0;
                align-self: center;
                width: 60%;
                margin: auto;
                padding-left: 5px;
                font-family: 'AvenirCn';
                color: @green_lighter;
                /*font-size: 1.3em; line-height: 1.2em;*/
                
                @media @phone {
                    gap: 1vw;
                }
            }
        }
        
        .form_part_2 {
            
            overflow: hidden;
            max-height: 1000px;
            .transition(max-height, 1s);
            
            @media @desktop_l, @desktop {
                margin-bottom: -140px;
            }
            
            &.closed {
                max-height: 0px;
            }
        }
        
        
        
        input {
            display: block;
            background-color: @white !important;
            border: 2px solid @gold !important; 
            .border_round(10px);
            width: 100%; 
            max-width: 370px;
            /*margin: auto;*/
            height: 50px; 
            padding: 0 1rem;
            font-size: 1.2em;
            font-weight: 700;
            color: @gold !important;
            /*color: @green;*/
            text-align: center;
            outline: none;
            box-shadow: none;

            &::placeholder { color: rgba(186, 153, 82, 0.5); font-size: 0.8em; text-align: center; text-transform: initial; }
            &::-webkit-input-placeholder { color: rgba(186, 153, 82, 0.5); font-size:  0.8em; text-align: center; text-transform: initial; }
            &::-moz-placeholder { color: rgba(186, 153, 82, 0.5); font-size:  0.8em; text-align: center; text-transform: initial; }
            &:-ms-input-placeholder { color: rgba(186, 153, 82, 0.5); font-size:  0.8em; text-align: center; text-transform: initial; }
            outline: none !important;
            /*box-shadow: none;*/
            /*.with_shadow(0, 3px, 7px, 0, rgba(0, 0, 0, 0.25)) !important;*/

            &[name="u_code"] {
                text-transform: uppercase;
            }

            &.error { border-color: @red !important; }
        }

        @media @phone {
            input {

                padding: 0 0.25rem;
                font-size: 4.5vw;
                height: 10vw;

                &::placeholder { font-size: 0.6em; }
                &::-webkit-input-placeholder { font-size: 0.6em; }
                &::-moz-placeholder { font-size: 0.6em; }
                &:-ms-input-placeholder { font-size: 0.6em; }
            }
        }
        
        
        
        
        
        
        .checkboxes {
        
            width: 85%;

            margin: 1.5rem auto 0rem auto;

            @media @tablet, @phone_l, @phone {
                margin-bottom: 0rem;
            }

            /*max-width: 80%;*/
            /*margin: auto;*/
            /*font-size: 0.8em; line-height: 1.1em;*/

            @media @phone {
                max-width: 90%;
                margin-top: 0;
            }



            .form-check-label {
                position: relative;
                padding-left: 45px;
                min-height: 33px;
                display: flex;
                align-items: center;
                margin-bottom: 20px;

                font-size: 1.2em; line-height: 1.2em;

                @media @phone {
                    font-size: 0.8em; line-height: 1.1em;
                }

                input {
                    position: absolute;
                    opacity: 0;
                    top: 0; left: 0; bottom: 0;
                    width: 33px; height: 33px;
                    cursor: pointer;
                }

                span {
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 33px;
                    width: 33px;
                    background-image: url('../images/checkbox.png');
                }

                input:checked~span {
                    background-position: 0 center;
                }

                input.error~span {
                    background-position: 0 bottom;
                }

                p {
                    display: block;
                    margin-bottom: 0px;
                    margin-top: -3px;
                    text-align: left;
                    font-family: 'AvenirCn';
                    color: @green;
                    font-weight: 400;
                }

                a {
                    text-decoration: underline;
                    color: @green;
                    &:hover { color: @green; }
                }
            }
        }
        
        
        
        
        .cta {
            font-weight: 400px;
            font-size: 1.4em; line-height: 1.2em;
            color: @green;
            text-align: center;
            margin-top: 40px;
            
            @media @phone {
                font-size: 4.5vw; line-height: 1.2em;
                margin: 4vw auto 0 auto;
            }
        }
        
    }

    label {
        display: block;
        font-size: 1.3em; line-height: 1.2em;
        margin-bottom: 5px;
        
        @media @phone {
            font-size: 3.5vw; line-height: 1.2em;
        }
        
    }
    
    
    
    
    
    

    
    
    
    
    
    
    
    
    
    .error_message {
        color: @red;
        text-align: center;
        max-width: 90%;
        min-height: 15px;
        margin: auto;
        font-size: 0.9em; line-height: 1em;
        
        @media @phone {
            font-size: 0.8em; line-height: 1em;
        }
    }
    
    
    .reg_btn {
        a {
            width: 100%;
            max-width: 240px;
        }
    }
    
    .out_of_promo {
        font-size: 1.2em;
        text-align: center;
        color: @green;
        width: 90%;
        margin: 0 auto;
        padding-top: 80px;
        padding-bottom: 120px;
        
        @media @tablet, @phone_l, @phone {
            padding-top: 100px;
            padding-bottom: 80px;
        }
        
    }
}





.container-fluid.registration, .container-fluid.winners {
    
    .choose_prize_slider, .choose_winners_slider {
        
        display: block;
        list-style: none;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
        padding: 0;
        position: relative;
        z-index: 1;
        
        .prize_btn, .winners_btn {
            position: relative;
            
            img.base, img.won {
                position: absolute;
                top: 0; bottom: 0; left: 0; right: 0;
                z-index: 2;
                /*.transition(opacity, 0.25s);*/
            }
            img.won {
                opacity: 0;
                z-index: 3;
            }
            img.selected {
                position: relative;
                z-index: 1;
                opacity: 0;
            }

            &.selected {
                img.base { opacity: 0; }
                img.selected { opacity: 1; }
            }
            
            &.won {
                img.base { opacity: 0; }
                img.selected { opacity: 0; }
                img.won { opacity: 1; }
            }
        }



        &>div {
            margin: auto;
            img {
                width: 100%;
                max-width: 230px;
            }
        }
        
        
        
        
        
        
        .swiper-slide {
            position: relative;
            margin: 35px 0px;
            transform: scale(1);
            .transition(transform, 0.2s);
            
            &.swiper-slide-active {
                transform: scale(1.2);
            }
        }
        
        
        
        
/*
        .slick-slide {
            position: relative;
            margin: 35px 25px;

            img {
                position: relative;
                z-index: 2;
                .transition(transform, 0.2s);
                opacity: 1;
            }
            &:hover {
                cursor: pointer;
            }
            
            @media @phone {
                margin: 35px 4vw;
            }
        }



        .slick-slide.slick-center img {
            transform: scale(1.2);
            opacity: 1;
        }
        */
        
    }


    .slick_prev, .slick_next, .winners_slick_prev, .winners_slick_next {
        position: absolute;
        top: 45%;
        z-index: 5;
        cursor: pointer;
    }
    .slick_prev, .winners_slick_prev { left: 30%; }
    .slick_next, .winners_slick_next { right: 30%; }
    
    @media @phone_l {
        .slick_prev, .winners_slick_prev, .slick_next, .winners_slick_next {
            img { width: 80%; }
        }
        .slick_prev, .winners_slick_prev { left: 29%; }
        .slick_next, .winners_slick_next { right: 29%; }
    }
    @media @phone {
        .slick_prev, .winners_slick_prev, .slick_next, .winners_slick_next {
            img { width: 60%; }
        }
        .slick_prev, .winners_slick_prev { left: 18%; }
        .slick_next, .winners_slick_next { right: 18%; }
    }
}






.container-fluid.prizes {
    
    
    .prizes_container {
        &>div:not(.reg_btn) {
            display: flex;
            justify-content: center;
            align-items: center;

            img {
                max-width:100%;
                width: 30%;
                cursor: pointer;
                
                @media @desktop_l, @desktop {
                    &:nth-child(2) { margin-top: -220px; }
                    &:nth-child(3) { margin-top: 60px; }
                }
            }
            
            @media @tablet, @phone_l, @phone {
                flex-direction: column;
                
                img {
                    width: 75%;
                    max-width: 450px;
                    &:nth-child(2) { margin-top: -30px; }
                }
            }
            @media @phone {
                img {
                    &:nth-child(2) { margin-top: -7vw; }
                }
            }
        }
    }
    
    @media @desktop_l, @desktop {
        .prizes_container>div:not(.reg_btn) {
            margin-bottom: -30px;
        }

        .reg_btn {
            bottom: -30px;
        }
    }
}








.container-fluid.rules, .container-fluid.winners {
    
    
    .scroll_area {
        max-height: 350px;
        overflow: auto;
        color: @green;
        
        
        a { color: @green; text-decoration: underline; }
        
        .mCSB_scrollTools {
            width: 35px;
        }
        
        .mCSB_inside > .mCSB_container {
            margin-right: 65px;
        }
        
        .mCSB_outside + .mCSB_scrollTools {
            right: 0;
        }
        
        
        .mCSB_draggerContainer { 
            width: 2px;
            margin: 0;
            background-color: @pink_gold;
            .mCSB_dragger {
                width: 70px !important;
                height: 70px !important;
                min-height: 70px !important;
                margin-left: -34px;
/*                background-color: #ffffff;
                .border_round(50px);
                background-color: @gold;*/
                background: url("../images/scroller_dragger.png") no-repeat center top;
                background-size: 100%;
                /*.with_shadow(0px, 2px, 4px, 0, rgba(0, 0, 0, 0.25));*/
                .mCSB_draggerRail { display: none; }
                .mCSB_dragger_bar { background-color: transparent; }
            }
        }
        
        @media @phone {
            /*.mCSB_scrollTools { width: 55px; }*/
            
            .mCSB_inside > .mCSB_container {
                margin-right: 45px;
            }
            
            .mCSB_draggerContainer { 
                .mCSB_dragger {
                    width: 50px !important;
                    height: 50px !important;
                    min-height: 50px !important;
                    margin-left: -24px;
                }
            }
        }
        
        table {
            hyphens: auto !important;
            tr {
                td, th { 
                    border: 1px solid @green; 
                    padding: 5px;
                    white-space: normal;
                    
                    &.t_header {
                        text-transform: uppercase;
                    }
                    
                    p { 
                        margin-bottom: 0; hyphens: auto !important; 
                        @media @phone { 
                            
                            /*word-wrap: anywhere;*/
                        }
                        
                        @media screen and (max-width: 470px) {
                            font-size: 3vw; line-height: 1.2em;
                        }
                    }
                }
            }

            @media @phone { 
                /*font-size: 3vw; line-height: 3.7vw;*/ 
            }
            
            &.smaller {
                tr {
                    td, th { 
                        p {
                            @media @phone { 
                                font-size: 1.9vw; line-height: 1.2em;
                                /*word-wrap: anywhere;*/
                            }
                        }
                    }
                }
            }
        }
        
    }
}









.container-fluid.winners {
    
    .section_title {
        @media @tablet { top: 20px; margin-bottom: 30px; }
        @media @phone_l { top: 15px; margin-bottom: 30px; }
        @media @phone { top: 4vw; margin-bottom: 5vw; }
        
    }
    
    .winners_container {
        width: 100%;
        max-width: 800px;
        margin: 0 auto 0 auto;
        
        @media @desktop_l, @desktop {
            margin-top: -50px;
        }
    }
    
    
    .winners_list_container {
        position: relative;
        width: 80%;
        max-width: 350px;
        margin: auto;
        color: @green;
        
        @media @desktop_l, @desktop {
            &:before {
                content: '';
                position: absolute;
                bottom: -30px;
                left: -250px;
                background: url('../images/bottle_can_form.png') no-repeat left bottom;
                background-size: 100%;
                width: 277px;
                height: 339px;
            }
        }
        
        @media @phone {
            width: 100%;
        }
    }
    
    
    .scroll_area {
        
        width: 100%;
        /*max-width: 250px;*/
        height: 300px;
        margin: 20px auto 0 auto;
        display: none;
        
        ul {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            list-style-type: none;
            font-size: 1.3em; line-height: 1.3em;
            font-weight: 600;
            margin-bottom: 0;
            
            li {
                padding: 5px;
                width: 100%;
                text-align: center;
            }
        }
        
        
        @media @phone_l, @phone {
            
            margin: 20px auto;
            
            ul {
                font-size: 1.1em;
                
                li {
                    padding: 2px;
                }
            }
        }
    }
    
    
    .no_winners {
        font-size: 1em; line-height: 1.2em;
        @media @phone {
            font-size: 3.7vw; 
        }
    }
    
}





.container-fluid.rules {
    
    position: relative;
    padding-bottom: 100px;
    
    .section_title {
        
        top: 0px;
        margin-bottom: 50px;
        
        @media @desktop_l, @desktop {
            top: -50px;
        }
    }
    
    .rules_container {
        width: 90%;
        max-width: 850px;
        margin: 0 auto 0 auto;
        
        @media @desktop_l, @desktop {
            margin-top: -40px;
        }
        
        @media @phone {
            width: 93%;
            margin: 0 5px 0 auto;
        }
    }
    
    .scroll_area {
        
        .mCustomScrollBox {
            max-width: 90%;
            @media @phone_l { max-width: 85%; }
            @media @phone { max-width: 80%; }
        }
        
        font-family: 'Avenir';
        font-weight: normal;
        font-size: 1em; line-height: 1.2em;
        text-align: left;
        max-height: 450px;
        
        @media @phone {
            font-size: 0.9em; line-height: 1.2em;
        }
    }
    
    @media @phone_l, @phone { 
        padding-bottom: 130px;
        
    }
    
    
    
    /*
    table {
        width: 100%;
        border: 1px solid @green;
        margin: 1.5rem auto;
        text-align: center;
        th, td { padding: 1.5rem 1vw; border: 1px solid @green; }
        th { color: @green; font-weight: bold; }
        td:first-child { font-weight: bold; }
        
        tr:nth-child(2), 
        tr:nth-child(3), 
        tr:nth-child(4), 
        tr:nth-child(5) {
            td { border-top: none; border-bottom: none; }
        }

        @media @phone { font-size: 3.5vw; }
    }
    
    
    ul, ol {
        li { margin-left: 40px; }
    }
    */
}


.container-fluid.external {
    &:after, &:before {
        background: none !important;
    }
    
    .rules_title {
        font-size: 1.2em; line-height: 1.2em;
        text-align: center;
        text-transform: uppercase;
    }
}

.container-fluid.rules {
    
    &.external {
        
        margin-bottom: 0rem;
        padding-bottom: 80px;
        
        .scroll_area {
            height: calc(100vh - 260px);
            min-height: 400px;
            max-height: none;
            color: @gold !important;
            a { color: @gold !important; }
        }
        
        @media @phone {
            padding-bottom: 110px;
            
            .scroll_area {
                height: calc(100vh - 350px);
            }
        }
    }
}




.container-fluid.registration {
    
    position: relative;
    
    &:after {
        content: '';
        position: absolute;
        top: -120px; right: 0;
        z-index: -1;
        background: url('../images/back_bush_1.png') no-repeat right top;
        background-size: 100%;
        width: 50%;
        max-width: 409px;
        height: 299px;
    }
    
    .section_footer {
        position: relative; 
        /*margin-bottom: 100px;*/
        
        &:before, &:after {
            content: '';
            position: absolute;
            background-size: 100%;
        }
        
        &:before {
            bottom: -110px; left: 40px;
            background: url('../images/reg_footer_before.png') no-repeat left bottom;
            width: 100%;
            max-width: 486px;
            height: 266px;
        }
        
/*        &:after {
            bottom: 0px; right: 0;
            background: url('../images/reg_footer_after.png') no-repeat right bottom;
            width: 415px;
            height: 302px;
        }*/
    }
}


.container-fluid.prizes {
    
    .section_footer {
        position: relative;

        &:before {
            content: '';
            position: absolute;
            bottom: -130px; left: -200px;
            z-index: 1;
            background: url('../images/prize_footer_before.png') no-repeat left bottom;
            background-size: 100%;
            width: 100%;
            max-width: 545px;
            height: 281px;
        }
    }
}


.container-fluid.rules {
    
    position: relative;
    
    &:before {
        content: '';
        position: absolute;
        top: -70px; left: 90px; right: 0;
        margin: auto;
        z-index: 1;
        background: url('../images/rules_header_before.png') no-repeat center top;
        background-size: 100%;
        width: 100%;
        max-width: 229px;
        height: 173px;
    }
    
    .section_footer {
        position: relative;
    
        &:after {
            content: '';
            position: absolute;
            bottom: -45px; left: 50%; right: 0;
            margin: auto;
            z-index: 1;
            background: url('../images/rules_footer_after.png') no-repeat right bottom;
            background-size: 100%;
            width: 100%;
            max-width: 222px;
            height: 157px;
        }
    }
}



.container-fluid.delimiter.reg_delimiter {
    margin: -50px 0 -50px auto;
}

.container-fluid.delimiter.prizes_delimiter {
    margin: -30px 0 -70px auto;
}

.container-fluid.delimiter.winners_delimiter {
    margin: -30px auto -70px 0;
}

.container-fluid.delimiter.bottom {
    
    position: relative;
    &:after {
        content: '';
        position: absolute;
        bottom: -120px; left: 0;
        z-index: 0;
        background: url('../images/back_bush_2.png') no-repeat left bottom;
        background-size: 100%;
        width: 50%;
        max-width: 405px;
        height: 293px;
    }
}



@media @tablet, @phone_l, @phone {
    .container-fluid.registration {
        &:after {
            background-size: 90%;
        }
        
        .section_content {
            &>div {
                padding-bottom: 10vw;
            }
        }
        
        .section_footer {
            
            &:before {
                bottom: -100px; left: 0px;
                background: url('../images/reg_footer_before_m.png') no-repeat left bottom;
                width: 100%;
                max-width: 719px;
                height: 262px;
                background-size: 100%;
            }
            
            &:after {
                background-size: 80%;
            }
        }
    }
    
    .container-fluid.prizes {
    
        .section_footer {
            &:before { 
                background: url('../images/prize_footer_before_m.png') no-repeat left bottom;
                width: 45%;
                max-width: 311px;
                height: 209px;
                background-size: 100%;
                bottom: -115px; left: 10px;
            }
        }
    }
    
    
    .container-fluid.rules {

        &:before {
            top: -6vw;
            left: 15vw;
            /*background-size: 100%;*/
            width: 25%;
        }

        .section_footer {
            &:after {
                bottom: -45px; left: 57%; right: 0;
                width: 27%;
            }
        }
    }
    
    
    
    .container-fluid.delimiter.reg_delimiter {
        margin: 60px auto 30px auto;
    }
    
    .container-fluid.delimiter.prizes_delimiter {
        margin: -30px 0 -170px auto;
        overflow: hidden;
        
        img { margin-right: -22%; } 
    }
    
    .container-fluid.delimiter.winners_delimiter {
        margin: 30px auto 30px 0;
        
        img { margin-left: 12vw; } 
    }
    
    .container-fluid.delimiter.bottom {
        &:after {
            bottom: -15vw;
        }
    }
}




@media @phone_l {
    
    .container-fluid.prizes {
        .section_footer {
            &:before { 
                bottom: -90px;
            }
        }
    }
    
}





@media @phone {
    
    
    
    .container-fluid.prizes {
        .section_footer {
            &:before { 
                bottom: -17vw;
            }
        }
    }
    
    .container-fluid.rules {
        
        .section_footer {
            &:after {
                bottom: -6vw;
            }
        }
    }
    
    
    
    .container-fluid.delimiter.prizes_delimiter {
        margin: -20px 0 -30vw auto;
    }
    
    .container-fluid.delimiter.bottom {
        &:after {
            bottom: -2vw;
        }
    }
    
    
}






footer {
    
    position: absolute;
    z-index: 2;
    left: 0; right: 0;
    bottom: 0px;
    height: 150px;
    font-family: 'AvenirCn';
    text-align: center;
    background-color: @green;
    align-items: center;
    display: flex;
    
    @media @tablet, @phone_l, @phone {
        overflow: hidden;
    }

    a {
        color: @crema;
        /*text-decoration: underline;*/
        &:hover { color: @crema; }
    }
    
    .footer_links {
        
        &>.container {
            &>.row {
                height: 40px;
                align-items: center;
            }
        }
        
        p {
            display: flex;
            justify-content: center;
            gap: 30px;
            max-width: 930px;
            margin: 0 auto;
            font-size: 1rem; 
            
            span { 
                
                &.delimiter {
                    &:after {
                        content: '|';
                        color: @crema;
                        padding: 0 10px; 
                    }
                }
            }
        }
        
    }
    
    .social_btns_container {
        display: flex;
        justify-content: center;
        gap: 20px;
        
        img {
            width: 60px;
        }
        
        @media @phone {
            gap: 0;
            margin-top: 5px;
        }
    }
    
    .recommendation {
        p span {
            font-size: 0.9rem;
            line-height: 1.1rem;
            
            &.copyright { 
                display: block;
                font-size: 0.8rem; 
                margin-top: 0.75rem; 
            }
            
            @media @phone_l, @phone {
                font-size: 0.8rem;
                line-height: 1rem;

                &.copyright { 
                    font-size: 0.7rem; 
                }
            }
        }
    }
    
    
    @media @phone {
        height: 200px;
        
        .footer_links {
            &>.container {
                &>.row {
                    height: 90px;
                }
            }
            p {
                flex-direction: column;
                gap: 5px;
/*                span {
                    &.delimiter {
                        &:after { content: ''; padding: 0; }
                    }
                }*/
            }
        }
    }
    
}


@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}


.reg_btn {
    /*margin: 1rem auto 0rem auto;*/
    position: relative;
    z-index: 3;
    text-align: center;
    margin-top: 30px;
    font-weight: 700;
    background-color: transparent !important;
    
    .loading {
        height: 70px;
        width: 80%;
        max-width: 265px;
        margin: 0 auto;
        
/*        display: flex;*/
        display: none;
        align-items: center;
        justify-content: center;
        position: absolute; 
        top: 0; left: 0; bottom: 0; right: 0;
        background-color: rgba(10, 50, 30, 0.5); 
        z-index: 1;
        .border_round(14px);
        
        img {
            animation:spin 4s linear infinite;
        }
    }
    
    a {
        position: relative;
        display: inline-block;
        width: 90%;
        max-width: 265px;
        /*min-height: 70px;*/
        margin: auto;
        padding: 0.8rem 1.0rem;
        vertical-align: middle;
        background-color: @red;
        color: @white;
        text-align: center;
        font-size: 1.2em; line-height: 1.2em;
        font-weight: 400;
        text-decoration: none;
        border: 2px solid @gold;
        .transition(all, 0.25s);
        .border_round(14px);
        
        &:hover {
            background-color: @crema;
            color: @gold;
            border-color: @gold;
        }
    }
    
    
    span {
        display: block;
        color: @green;
        margin-top: 5px;
        font-family: 'AvenirCn';
        font-weight: 400;
        font-size: 0.8em; line-height: 1.3em;
        letter-spacing: 0.5px;
    }
    
    
    &.green {
        a {
            background-color: @green;
            border-color: transparent;
            
            &:hover {
                background-color: @crema;
                color: @green;
                border-color: @green;
            }
        }
        
        span { color: @green !important; }
    }
    
    
    @media @phone_l {
        a {
/*            font-size: 1em; line-height: 1.2em;
            padding: 0.8rem;
            .border_round(8px);*/
        }
        /*span { font-size: 0.65em; }*/
    }
    
    @media @phone {
        margin-top: 0;
        a {
            /*font-size: 1.0em; line-height: 1.2em;*/
            font-size: 4vw; line-height: 1.2em;
            padding: 0.6rem 0.8rem;
            .border_round(8px);
        }
        span { font-size: 0.8em; }
    }
    
    &.ag {
        
        margin-top: 0;
        
        a { 
            background: transparent;
            .border_round(0);
            color: @crema;
            /*min-height: 60px;*/
            
            &::before {
                padding: 3px;
                .border_round(0);
            }
        }
    }
}










.container-fluid.agegate_section {
    display: block;
    position: fixed;
    top: 0; bottom: 0;
    left: 0; right: 0;
    /*background-color: #004a2b;*/
    .back_gradient(#024930, #00230d);
    color: @crema;
    z-index: 100;
    overflow: auto;
    
    .container {
        /*position: absolute;*/
        width: 100%;
        height: 100vh;
        min-height: 700px;
        display: flex;
        justify-content: center;
        align-items: center;
/*        top: 50%;
        transform: translateY(-50%);*/
        left: 0; right: 0;
        margin: auto;
        @media @desktop { background-position-y: 11rem; }
        @media @tablet  { background-position-y: 13rem; }
        @media @phone_l, @phone { background: none; }
        
        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
            left: 50%; 
            transform: translate(-50%, -50%);
        }
        
        .question, .note { text-align: center; }
        .question { font-size: 2.0rem; margin: 2rem auto 0rem auto; }
        .note     { font-size: 1.2rem; margin: 1.5rem auto; }
        @media @phone_l, @phone {
            .question { font-size: 2.2rem; margin: 1.5rem auto; }
            .note { font-size: 0.9rem; }
        }
        
        @media @phone {
            .question { font-size: 1.7rem; }
        }
        
        
        
        &>.row {
            /*margin-top: 5vh;*/
        }
        
        .logo {
            margin-bottom: 4vh;
        }
        
        .age_section {
            /*position: relative;*/
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 100%;
            height: calc(100vw / 2.6);
            /*max-width: 584px;*/
            max-height: 220px;
            margin: auto;
            border: 5px solid transparent;
            padding: 10px 15px;
            @media @phone_l { 
                width: 424px; 
                max-height: 163px; 
                border-width: 3px;
                padding: 10px 11px;
            }
            @media @phone { 
                /*width: 264px;*/ 
                height: 140px; 
                border-width: 3px;
                padding: 6px 5px;
            }
            
            display: flex;
            flex-direction: row;
            
            
            /*&.error { border-color: #ff0000; }*/
            
            
            
            .agegate_fragment {
                position: relative;
                display: inline-block;
                /*width: 127px;*/
                /*height: 180px;*/
                /*background-color: #052b7b;*/
                margin: 0 5px;
                padding: 0;
/*                font-size: 6.5rem;
                line-height: 180px;*/
                text-align: center;
                
                
                &::before {
                    .border_round(0);
                }
                
                
                &.focus::after {
                    content: "";
                    position: absolute;
                    bottom: 20px;
                    left: 25%;
                    width: 50%;
                    height: 8px;
                    background: @gold;
                    color: #4cd964;
                    -webkit-animation: fadeInOut 1.5s infinite;
                    -moz-animation: fadeInOut 1.5s infinite;
                    -o-animation: fadeInOut 1.5s infinite;
                     animation: fadeInOut 1.5s infinite;
                    visibility: visible;
                    pointer-events: none;
                    z-index: 1;
                }
                
                @media @phone_l { 
                    width: 92px; 
                    max-height: 130px; 
                    margin: 2px;
                    font-size: 5.0rem;
                    line-height: 130px;
                    border-width: 3px;
                    &.focus::after {
                        bottom: 10px;
                        height: 8px;
                    }
                }
                @media @phone { 
                    /*width: 57px;*/ 
                    max-height: 110px; 
                    margin: 5px;
                    font-size: 3.5rem;
                    line-height: 82px;
                    border-width: 2px;
                    &.focus::after {
                        bottom: 10px;
                        height: 5px;
                    }
                }
                
                input {
                    position: relative;
/*                    position: absolute;
                    top: 0; left: 0;*/
                    width: 160px;
                    height: 190px;
                    font-family: "Avenir"; 
                    color: @gold;
                    font-weight: 500;
                    font-size: 6.5rem;
                    line-height: 180px;
                    text-align: center;
                    /*color: @green !important;*/
                    background: transparent;
                    box-shadow: none;
                    -webkit-box-shadow: none;
                    -moz-box-shadow: none;
                    border: 6px solid @gold;
                    /*border: none;*/
                    outline: none;
                    caret-color: transparent;
                    opacity: 1;
                    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
                    filter: alpha(opacity=1);
                    -moz-opacity: 1;
                    -khtml-opacity: 1;
                    cursor: default;
                    z-index: 1;
                    padding-top: 5px;
                    
                    
                    &::placeholder { color: @green; opacity: 1; }
                    &::-webkit-input-placeholder { color: @green; opacity: 1; }
                    &::-moz-placeholder { color: @green; opacity: 1; }
                    &:-ms-input-placeholder { color: @green; opacity: 1; }
                    
                    
                    
                    
                    
                    
                    
                    @media @phone_l { width: 92px; max-height: 120px; font-size: 5rem; line-height: 120px; }
                    @media @phone   { width: 17vw; max-height: 100px; font-size: 15vw; line-height: 20vw; border-width: 4px; }
                }
                
                
                span {
                    position: relative;
                    z-index: 2;
                }
            }
        }
        
        .checkboxes {
            text-align: center;
            label {
                p { 
                    margin-top: 3px;
                    text-transform: uppercase;
                }
                &:hover { cursor: pointer; }
            }
            

            input {
                width: 0px !important;
                height: 0px !important;
            }
            
            
            
            
            .form-check-label {
                position: relative;
                /*padding-left: 65px;*/
                min-height: 29px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 10px;
                margin-bottom: 20px;


                font-size: 1.0em; line-height: 1.2em;

                @media @phone {
                    font-size: 1.0em; line-height: 1.2em;
                }


                input {
                    position: absolute;
                    opacity: 0;
                    top: 0; left: 0; bottom: 0; right: 0;
                    width: 41px; height: 41px;
                    cursor: pointer;
                }

                span {
/*                    position: absolute;
                    top: 0;
                    left: 0;*/
                    height: 29px;
                    width: 29px;
                    background-image: url('../images/checkbox_ag.png');
                }

                input:checked~span {
                    background-position: 0 bottom;
                }

                input.error~span {
                    background-position: 0 bottom;
                }

                p {
                    display: block;
                    margin-bottom: 0px;
                    margin-top: 0px;
                    margin-left: 10px;
                    /*text-align: left;*/
                    font-weight: 200;
                    /*font-size: 1rem; line-height: 1.2rem;*/
                }

            }
            
            
            
            
            
        }
        
        .agegate_error {
            /*position: absolute;*/
            /*top: 25.5rem;*/
            /*left: 0; right: 0;*/
            margin: auto;
            background: url("../images/agegate_error_back.png") no-repeat center top;
            background-size: 100% 100%;
            display: none;
/*            @media @tablet {  top: 55vw; }
            @media @phone_l {  top: 90vw; }
            @media @phone {  top: 85vw; }*/
            p {
/*                position: absolute;
                top: 0;
                left: 0;*/
                padding: 0rem 1rem 1rem 1rem;
                font-size: 1.3em;
                text-align: center;
                color: #ff0000;
                @media @phone_l { font-size: 5vw;  }
                @media @phone { font-size: 4vw; }
            }
        }
    }
}








.container-fluid.coming_soon {
    
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100dvh;

    .coming_soon_container {

        /*background-color: rgba(0, 120, 60, 0.25);*/
        padding: 40px 20px;

        
        .section_counter {
            
            img {
                width: 50%;
                max-width: 241px;
            }
            
            @media @desktop_l, @desktop {
                align-self: end;
                margin-bottom: 20px;
            }
        }
        @media @desktop_l, @desktop {
            .section_products {
                margin-right: -50px !important;
            }
        }

        .cs_title {
            font-family: 'Noah';
            font-size: 1.2em; line-height: 1.2em;
            text-align: center;
            margin-bottom: 0rem;
            padding: 25px 0px 15px 0px;
        }


        .counter_container {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 80vw;
            max-width: 335px;
            /*max-width: 600px;*/
            margin: 0;
            /*padding: 0 30px 0px 30px;*/
            color: @white;


            &>div {
                margin: 5px 25px;
                /*line-height: 4.5rem;*/
                display: flex;
                flex-direction: row;
                /*justify-content: center;*/
                align-items: baseline;
                text-align: center;

                p { margin-bottom: 0; }

                .cs_counter_digit {
                    min-width: 60px;
                    padding-right: 10px;
                    text-align: right;
                }
                .cs_counter_digit, .cs_counter_text {
                    font-size: 3.1em; line-height: 1.2em;
                    text-transform: lowercase;
                }
            }
        }

        
        @media @tablet, @phone_l, @phone {
            
            padding: 40px 20px 10px 20px;
            
            .counter_container {
                margin: 0 auto;
                &>div {
                    justify-content: center;
                }
            }
            
            .headline {
                max-width: 500px;
                margin: auto;
            }
        }

        @media @phone {

            .cs_title { 
                font-size: 4.3vw; line-height: 4.5vw;
            }

            .counter_container {
                width: 60vw;
                padding: 0 3vw 6vw 3vw;
                &>div {
                    margin: 5px 5px;
                    .cs_counter_digit, .cs_counter_text {
                        font-size: 8vw; line-height: 8.5vw;
                    }
                    .cs_counter_digit {
                        min-width: 14vw;
                    }
                }
            }
        }
    }
}









.blurred {
    filter: blur(3px);
    -webkit-filter: blur(3px);
}



.overlay {
    position: fixed;
    top: 0; bottom: 0;
    left: 0; right: 0;
    padding: 1rem;
    display: none;
    z-index: 101;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    /*display: flex;*/
    justify-content: center;
    align-items: center;

    .message_container {
        position: relative;
        width: 100%;
        max-width: 800px;
        min-height: 300px;
        margin: auto;
        background-color: @white;
        color: @green;
        padding: 20px;
        .border_round(16px);
        
        &>div {
            .border_round(10px);
            padding: 0 15px
        }
        
        .close_popup_btn {
            position: absolute;
            top: 7px; right: 10px;
            z-index: 5;
            color: @green;
            text-decoration: none;
            font-size: 1.5em; line-height: 1.2em;
            font-weight: 100;
        }
        
        .message {
            font-family: 'AvenirCn';
            font-size: 1.0em; line-height: 1.4em;
            font-weight: normal;
            color: @green;
            text-align: left;
            
            span {
                display: block;
                text-transform: uppercase;
                font-size: 1.5em; line-height: 1.2em;
                font-weight: bold;
            }
        }
        
        .close_btn {
            display: inline-block;
            margin: 20px 0 0 0;
/*            width: 100%;
            max-width: 220px;*/
            text-transform: initial;
            background-color: @green_lighter;
            color: @gold;
            text-decoration: none;
            padding: 10px 15px 8px 15px;
            .border_round(8px);
        }
    }
    
    &.registration {
        .message_container {
            max-width: 400px;
            
            &>.row {
                min-height: inherit;
                
                &>div {
                    display: flex;
                    flex-direction: column;
                    min-height: inherit;
                    align-items: center;
                    justify-content: space-between;
                    
                    .message {
                        flex: 1;
                        align-content: center;
                        text-align: center;
                    }
                }
            }
        }
    }
    
}


#teconsent {
    position: fixed;
    bottom: 0; right: 0;
    z-index: 300;
}




.clear { clear: both; }