@import url("fonts.css");

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

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

@bordo: #914e5d;
@yellow: #efcf51;
@error_color: #ff0000;
@blue: #d2f0ff;
@light_blue: #4cd3fd;
/*@blue: #8cd0ef;*/
@violet: #7d6aad;
@dark_violet: #3b2774;


@paint_violet: #592e8e;
@paint_violet_light: #7d69ac;
@paint_blue: #00c0fd;
@paint_green: #65b32e;
@paint_yellow: #fee301;
@paint_pink: #fc1ba5;



.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;
}

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

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







* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    /*height: 100%;*/
    /*background-color: @violet;*/
    font-family: "Congenial_L";
    font-size: 16px;
    text-align: center;
    color: #ffffff;
}

body {
    
    background: url("../images/back_clouds.png") no-repeat center top 120px;
    background-size: 90%;
    
    @media (max-width: 1600px) { background-size: 1440px; }
    
    @media @phone_l, @phone {
        background: none;
    }
    
    background-color: @violet !important;
}


#wrapper {

    position: relative;
    min-height: 100vh;
    padding-bottom: 128px;
    overflow: hidden;
    
    background: url("../images/footer_background.png") no-repeat center bottom 120px;
    background-size: 100%;
    
    @media (max-width: 1700px) { background-size: 1700px; }
    @media (max-width: 991px) { background-size: 1650px; }
    
    
    /*@media (min-width: 1600px) { background-position-y: 30vw; }*/
    
    @media @tablet { background-size: 1500px; background-position-y: bottom 170px; }
    @media @phone_l { background-size: 1200px; background-position-y: bottom 210px; }
    @media @phone { background-size: 1000px; background-position-y: bottom 250px; }
    
    
    @media @tablet { padding-bottom: 170px; }
    @media @phone_l { padding-bottom: 210px; }
    @media @phone { padding-bottom: 265px; }
    
    .container-fluid {
        position: relative;
        z-index: 3;
    }
}


body.coming_soon {
    #wrapper { background: none; }
}



.container {
    
    &.navigation {
        
        font-family: "Congenial_M";

        .navbar-nav {
            min-height: 90px;
            align-items: center;
            .nav-item {
                position: relative;
                display: table;
                height: 40px;
                margin: auto 0.1rem;
                &.logo { margin: -0.2rem 0.5rem 0rem 0.5rem; height: 100%; }
                a {
                    position: relative;
                    color: @dark_violet;
                    font-size: 1.125rem;
                    padding: 6px 24px 4px 24px;
                    margin: 0 7px;
                    z-index: 1;
                    background-color: #ffffff;
                    .border_radius(8px);
                    .transition(background-color, 0.2s);
                }
                
                &:hover, &.active {
                    a {
                        background-color: @dark_violet;
                        color: #ffffff;
                        text-decoration: none;
                        cursor: pointer !important;
                    }
                }
                
                @media @tablet, @phone_l, @phone {
                    margin: 0.5rem 0rem 0rem auto;
                    height: auto;
                    a {
                        text-align: right;
                        padding-left: 0.5rem;
                        padding-right: 0.5rem;
                    }
                }
            }

            
            @media @tablet, @phone_l, @phone { width: 99%; }
        }
        
        
        .navbar {
            @media @desktop_l, @desktop { padding: 0; }
            @media @tablet, @phone_l, @phone { padding-top: 1.5rem; }
            @media @phone { padding-left: 0rem; padding-right: 0rem; }
            
            
            a.logo {
                /*
                position: absolute;
                top: 25px;
                left: 0; right: 0;
                margin: auto;
                z-index: 1;
                */
            }
            
            .navbar-toggler {
                outline: none;
                z-index: 2;
                span {
                    display: block;
                    background-color: #ffffff;
                    height: 6px;
                    width: 30px;
                    /*border: 1px solid @violet;*/
                    border-radius: 3px;
                    margin-top: 4px;
                    margin-bottom: 4px;
                    position: relative;
                    left: 0;
                    opacity: 1;
                    transition: all 0.25s ease-out;
                    transform-origin: center left;
                }
            }
            
            
            
            .logo_m {
                position: absolute; 
                top: 0; 
                left: 0; right: 0;
            }
        }
        
        #navbarNav.show {
            /*@media @tablet { margin-bottom: -5rem; }*/
        }
    }
}




.container, .container-fluid {
    
    position: relative;
    z-index: 3;
    
    .logo {
        img { max-width: 45%; }
    }
    
    p.title {
        font-family: "LORRACHBETA";
        font-size: 3rem; line-height: 3.4rem;
        margin: 3rem auto 0rem auto;
        text-align: center;
    }
    
    @media @tablet, @phone_l { 
        p.title { font-size: 2.5rem; line-height: 2.9rem; margin-top: 2rem; }
    }
    @media @phone { 
        p.title { font-size: 2.0rem; line-height: 2.4rem; margin-top: 1.5rem; }
    }
    
}


.container.winners, .container.rules, .container.products {
    margin-bottom: 5rem;
}




.container.home {
    
    .home_cta {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        
        p {
            font-size: 1.7rem; line-height: 2.0rem;
            text-align: left;
            margin-bottom: 0;
        }
    }
    
    
    @media @desktop {
        .home_cta {
            p { font-size: 1.5rem; line-height: 1.8rem; }
        }
    }
    
    @media @tablet, @phone_l, @phone {
        .home_cta {
            p { font-size: 1.3rem; line-height: 1.5rem; }
        }
    }
    
    @media @phone_l, @phone {
        .home_cta {
            p { text-align: center; }
        }
    }
}





.container-fluid.howto, .container.games section#game_map .howto {
    
    @media @desktop_l, @desktop {
        /*margin-top: -7rem;*/
        padding-top: 5rem;
    }
    @media @tablet {
        padding-top: 2rem;
    }
    
    
    @media (min-width: 1450px) { padding-top: 7vw; }

    
    &>div { 
        max-width: 1140px; margin: auto;
        @media @desktop { max-width: 960px; }
        @media @tablet { max-width: 720px; }
        @media @phone_l { max-width: 540px; }
    }
    
    .steps {
        padding: 3rem 0 3rem 0;
        @media @phone_l { padding: 2rem 0 1.5rem 0; }
        @media @phone { padding: 1.5rem 0 1rem 0; }
    }
    
    .step {
        display: flex;
        margin: 1.5rem auto;
        
        &>div {
            position: relative;
            background-color: #ffffff;
            .border_radius(40px);
            padding: 3rem 2rem 2rem 2rem;
            
            &:before {
                background-color: @light_blue;
                font-family: "LORRACHBETA";
                font-size: 2.4rem;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 70px;
                height: 70px;
                padding-top: 7px;
                position: absolute;
                top: -35px;
                left: 0;
                right: 0;
                margin: auto;
                .border_radius(70px);
            }
        }
        
        &:nth-child(1) { 
            &>div:before { content: "1"; } 
        }
        &:nth-child(2) { 
            &>div:before { content: "2"; } 
        }
        
        p {
            color: @dark_violet;
            margin-bottom: 0;
        }
    }
    
    
    @media @phone {
        .step {
            padding-left: 0;
            padding-right: 0;

            &>div {
                padding: 3rem 1rem 1rem 1rem;
            }
        }
    }
    
}



.overlay {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    display: none;


    &.game_info, &.game_message, &.reg_error_message, &.all_played {
        .popup {
            position: relative;
            top: 25%; bottom: 0; left: 0; right: 0;
            /*transform: translateY(-50%);*/
            display: flex;
            justify-content: center;
            width: 100%;
            max-width: 600px;
            margin: auto;
            padding: 2rem;
            background-color: #ffffff;
            color: @dark_violet;
            .border_radius(15px);
            .with_shadow(5px, 5px, 15px, 0, rgba(0, 0, 0, 0.25));
        }
    }
    
    &.reg_error_message {
        
        z-index: 20;
        padding: 0 15px;
        
        .popup {
            flex-direction: column;
            .with_shadow(5px, 5px, 15px, 0, rgba(0, 0, 0, 0.5));
        }
    }
}




.container.games {
    
    .game_container {
        margin: 0rem auto 3rem auto;
    }
    
    
    .game_container, .registration_form {
        display: none;
    }
    
    .game_title_1, .game_title_2, .game_title_3, .game_title_4 {
        
        font-size: 2.5rem; line-height: 2.9rem; margin: 2rem auto;
        
        @media @tablet, @phone_l { 
            font-size: 2.0rem; line-height: 2.4rem; margin: 2rem auto;
        }
        @media @phone { 
            font-size: 1.5rem; line-height: 1.9rem; margin: 1.5rem auto;
        }
    }
    
    section#game_map {
        
        position: relative;
        
        #theend_message { 
            display: none; 
            
            p {
                font-family: "LORRACHBETA";
                font-size: 2rem; line-height: 2.2rem;
                text-align: center;
                max-width: 640px;
                margin: 2rem auto;
                
                span {
                    display: block;
                    font-family: "Congenial_L";
                    font-size: 1.2rem; line-height: 1.4rem;
                    margin-top: 1rem;
                }
                
                
                @media @phone_l {
                    font-size: 1.7rem; line-height: 1.9rem;
                    span { font-size: 1.1rem; line-height: 1.3rem; }
                }
                @media @phone {
                    font-size: 1.5rem; line-height: 1.7rem;
                    span { font-size: 1rem; line-height: 1.2rem; }
                }
            }
        
        }
        
        .cta {
            font-size: 1.2rem; line-height: 1.4rem;
            @media @phone_l {
                font-size: 1.1rem; line-height: 1.3rem;
            }
            @media @phone {
                font-size: 1.0rem; line-height: 1.2rem;
            }
        }
    }
    
    
    #game_1 {
        
        position: relative;
        
        
        .paint_board {
            position: absolute;
            top: 0; bottom: 0; left: 0; right: 0;
            max-width: 1000px;
            margin: auto;
        }
        
        .color_pickers_container, .color_brush {
            position: absolute;
            top: 0; bottom: 0; left: 60%; right: 0;
            z-index: 1;
        }
        .color_pickers_container {
            z-index: 2;
            
            img {
                position: absolute;
                top: 0; left: 0;
                /*bottom: 0; right: 0;*/
                z-index: 2;
                
                &.violet        { top: 18.9%; left: 19.4%; width: 20%; }
                &.violet_light  { top: 23.3%; left: 43.7%; width: 20%; }
                &.blue          { top: 35.3%; left: 47.4%; width: 20%; }
                &.green         { top: 48.0%; left: 43.4%; width: 20%; }
                &.yellow        { top: 53.5%; left: 28.7%; width: 20%; }
                &.pink          { top: 53.7%; left: 5.5%; width: 20%; }
                
                &:hover { cursor: pointer; }
            }
        }
        
        .color_brush {
            img {
                position: absolute;
                top: 32.5%; left: 42.5%;
                width: 50%;
            }
        }
        
        
        @media @phone_l, @phone {
            .color_pickers_container, .color_brush {
                top: 47%; left: 0;
            }
            
            .color_pickers_container {

                img {
                    &.violet        { top: 4.4%; left: 38.0%; width: 10%; }
                    &.violet_light  { top: 10.4%; left: 50.1%; width: 10%; }
                    &.blue          { top: 28.0%; left: 51.8%; width: 10%; }
                    &.green         { top: 46.0%; left: 49.8%; width: 10%; }
                    &.yellow        { top: 53.7%; left: 42.5%; width: 10%; }
                    &.pink          { top: 54.0%; left: 31.0%; width: 10%; }
                }
            }
            
            .color_brush {
                img {
                    top: 22.6%; left: 50.5%;
                    width: 25.5%;
                }
            }
        }
        
    }
    
    
    #game_2 {
        
        .puzzle_scene {
            width: 100%;
            max-width: 600px;
            margin: auto;
            /*-webkit-overflow-scrolling: touch;*/
        }
        
        .puzzle_hint {
            max-width: 600px;
            margin: 0rem auto 2rem auto;
        }
        
        .puzzle_container {
            position: relative;
            width: 95% !important;
            max-width: 600px !important;
            height: 100%;
            max-height: 820px;
            margin: 0px auto;
        }

        #puzzle_board, #puzzle_pieces {
            display: block;
            /*box-sizing: content-box;*/
            width: 100% !important;
            height: 100%;
            max-height: 400px;
        }

        #puzzle_board {
            width: 100%;
            background-size: 100% !important;

            &.bunny             { background: url("../images/puzzles/bunny/board.png") no-repeat center center; }
            &.easter_basket     { background: url("../images/puzzles/easter_basket/board.png") no-repeat center center; }
            &.easter_box        { background: url("../images/puzzles/easter_box/board.png") no-repeat center center; }
            &.funny_egg         { background: url("../images/puzzles/funny_egg/board.png") no-repeat center center; }
            &.happy_easter_bar  { background: url("../images/puzzles/happy_easter_bar/board.png") no-repeat center center; }
            &.oreo              { background: url("../images/puzzles/oreo/board.png") no-repeat center center; }
            &.plushies          { background: url("../images/puzzles/plushies/board.png") no-repeat center center; }

        }

        #puzzle_pieces {
            background-color: rgba(255, 255, 255, 0.3);
            .border_radius(40px);
            margin-top: 20px;


            .p_piece {
                position: absolute !important;
                top: 0; bottom: 0; left: 0; right: 0;
                /*width: 33.33%;*/
                width: 42%;
                height: 0;
                box-sizing: border-box;

                img { 
                    max-width: 100%; 

                    &.with_shadow {
                        transform: translateZ(0);
                        -webkit-filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.75));
                        filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.75));
                    }
                }
            }
        }
    }


    #game_3 {
        
        .quest_counter {
            margin: 0rem auto 0.75rem auto;
            font-size: 1.1rem;
            line-height: 1.3rem;
        }
        
        .question {
            background-color: #ffffff;
            .border_radius(40px);
            .with_shadow(5px, 5px, 15px, 0, rgba(0, 0, 0, 0.25));
            color: @dark_violet;
            padding: 40px 50px 30px 50px;
            
            font-family: "Congenial_M";
            font-size: 1.3rem;
            
            display: none;
            &#question_1 { display: block; }
            
            .question_title {
                width: 90%;
                max-width: 450px;
                margin: 0 auto 1.5rem auto;
                font-size: 1.4rem; line-height: 1.6rem;
            }
            
            .answer {
                display: flex;
                align-items: center;
                padding: 6px;
                box-sizing: border-box;
                border: 2px solid @dark_violet;
                .border_radius(50px);
                margin: 10px auto;
                width: 90%;
                max-width: 600px;
                .transition(background-color, 0.15s);
                
                &:hover { cursor: pointer; }
                &:hover, &.active {
                    /*background-color: rgba(60, 40, 115, 0.15);*/
                    background-color: rgba(125, 105, 170, 0.2);
                }
                
                p {
                    margin: 0 0 0 15px;
                    font-family: "Congenial_L";
                    padding-top: 5px;
                }
                
                span {
/*                    display: flex;
                    justify-content: center;
                    align-items: center;*/
                    background-color: @dark_violet;
                    width: 40px;
                    min-width: 40px;
                    height: 40px;
                    .border_radius(40px);
                    /*padding-top: 5px;*/
                    line-height: 44px;
                    color: #ffffff;
                }
            }
            
            
            
            @media @phone_l {
                padding: 30px 30px 30px 30px;
                font-size: 1.2rem;
            
                .question_title {
                    font-size: 1.3rem; line-height: 1.5rem;
                }
            }
            
            
            @media @phone {
                padding: 30px 10px 30px 10px;
                font-size: 1.1rem; line-height: 1.3rem;
            
                .question_title {
                    font-size: 1.2rem; line-height: 1.4rem;
                }
                
                .answer {
                    p { margin-left: 3vw; }
                }
            }
            
        }
    }
    
    
    
    
    #game_4 {
        
        .hunt {
            position: relative;
            top: 0; left: 0;
            width: 100%;
            max-width: 1000px;
            margin: auto;
        }
        
        .hunt_back {
            
            img.with_shadow {
                -webkit-filter: drop-shadow(3px 3px 15px rgba(0, 0, 0, 0.5));
                filter: drop-shadow(3px 3px 15px rgba(0, 0, 0, 0.5));
            }
        }
        
        .hunt_eggs {
            
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            max-width: 1000px;
            height: 100%;
            
            .egg {
                position: absolute;
                top: 0; left: 0; bottom: 0; right: 0;
                /*opacity: 0.5;*/
                
                &.egg_1 { top: 14.4%; left: 24.8%; width: 8%; }
                &.egg_2 { top: 6.7%; left: 82.6%; width: 6.1%; }
                &.egg_3 { top: 42.3%; left: 76.3%; width: 4.7%; }
                &.egg_4 { top: 56.2%; left: 54.3%; width: 5.1%; }
                &.egg_5 { top: 70.7%; left: 11.4%; width: 5.2%; }
                &.egg_6 { top: 66.9%; left: 37.6%; width: 6.8%; }
                &.egg_7 { top: 73.1%; left: 70.2%; width: 5.0%; }
                &.egg_8 { top: 69.8%; left: 91.0%; width: 5.9%; }
                &.egg_9 { top: 87.1%; left: 22.1%; width: 6.7%; }
                &.egg_10 { top: 83.4%; left: 56.9%; width: 11.7%; }
            }
        }
        
        
        .discovered_eggs {
            
            width: 100%;
            margin: 3rem auto 0rem auto;
            
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            
            
            @media @phone_l, @phone {
                flex-direction: column-reverse;
                
                margin: 7vw auto 0vw auto;
            }
            
            
            &>div {
                position: relative;
                top: 0; left: 0;
            }
            
            .hunt_basket {}
            
            .basket {
                width: 70%;
                max-width: 357px;
                margin: auto;
            }
            
            .discovered_txt {
                font-size: 1.5rem; line-height: 1.8rem;
                font-family: "Congenial_M";
                text-align: left;
                
                @media @phone_l, @phone { 
                    font-size: 1.2rem; line-height: 1.5rem;
                    text-align: center; 
                }
            }
        }
        
        .hunt_basket_eggs {
            position: absolute;
            top: 0; left: 0; right: 0;
            width: 70%;
            max-width: 357px;
            height: 100%;
            margin: auto;
            
/*            @media @desktop { left: 19.4%; }
            @media @tablet { left: 9.2%; }
            @media @phone_l { left: 9.2%; }*/
            
            .disc_egg {
                position: absolute;
                top: 0; left: 0; bottom: 0; right: 0;
                display: none;
                /*opacity: 0.5;*/
                
                &.disc_egg_1 { top: 22.3%; left: 55%; width: 22.4%;     z-index: 8;}
                &.disc_egg_2 { top: 21.6%; left: 25.7%; width: 20%;     z-index: 10;}
                &.disc_egg_3 { top: 2.7%; left: 17.2%; width: 20.7%;    z-index: 4;}
                &.disc_egg_4 { top: 2.0%; left: 66.4%; width: 21.6%;    z-index: 1; }
                &.disc_egg_5 { top: 0%; left: 51.0%; width: 22.0%;      z-index: 2; }
                &.disc_egg_6 { top: 20.7%; left: 73.0%; width: 19.8%;   z-index: 6;}
                &.disc_egg_7 { top: 22.1%; left: 43.5%; width: 21%;     z-index: 9;}
                &.disc_egg_8 { top: 0.0%; left: 33.0%; width: 22.3%;    z-index: 3; }
                &.disc_egg_9 { top: 26.1%; left: 10.7%; width: 21%;     z-index: 7;}
                &.disc_egg_10 { top: 13.7%; left: 5.7%; width: 21%;     z-index: 5;}
            }
        }   
    }
    
    
    
    .registration_form {
        
        #regform, #confirm_wrapper {
            color: @dark_violet;
            text-align: left;
            font-family: "Congenial_L";

            background-color: #ffffff;
            width: 100%;
            max-width: 670px;
            margin: 3rem auto 2rem auto;
            padding: 1.5rem 3rem;
            .border_radius(20px);

            @media @phone_l, @phone { padding: 1.5rem; }
            
            
            p {

                &.reg_form_title {
                    font-family: "Congenial_M";
                    font-size: 1.2rem; line-height: 1.3rem;
                }
                &.restriction {
                    font-size: 0.9rem;
                }
                &.error_message {
                    color: @error_color;
                    min-height: 24px;
                    margin: 0.5rem auto 0.2rem auto;
                    a { color: @error_color; text-decoration: underline; }
                }
            }
            
            p, label {
                font-size: 1.0rem; line-height: 1.1rem;
                padding-left: 5px;
            }

            input {
                height: calc(2.6rem + 2px);
                .border_radius(10px);
                border: 2px solid @dark_violet;
                font-size: 1.15rem;
                line-height: calc(1.9rem + 2px);
                color: @dark_violet;
                padding-top: 0.6rem;
                box-shadow: none;

                &.error, &.date_error {
                    border-color: @error_color;
                }
            }
        }
        
        
        #confirm_wrapper {
            text-align: center;
            
            p {
                font-size: 0.95rem; line-height: 1.1rem;
                
                &.description span { font-family: "Congenial_M"; }
            }
            
            input { 
                text-align: center; 
                max-width: 90%;
                margin: auto;
            }
        }
        
        #confirm_wrapper { display: none; }
        
        
        #regform {
            
            .label_error_container {
                display: flex;
                justify-content: space-between;
                align-items: baseline;
                margin-top: 0.8rem;
                margin-bottom: 0.2rem;

                span.error {
                    font-size: 0.85rem; line-height: 1rem;

                    label {
                        font-size: 0.85rem; line-height: 1rem;
                        text-align: right;
                        font-weight: normal;
                        color: @error_color;
                        margin: 0;
                        padding-left: 5px;
                        min-width: auto;
                        display: block;

                        a { color: @error_color; }

                    }

                    @media @phone_l, @phone {
                        label { text-align: left; }
                    }

                    &.error_amount, &.error_date {
                        label { margin-top: -0.5rem; }
                    }

                    @media @phone_l {
                        &.error_date { max-width: 270px; }
                        &.error_amount label, &.error_date label, &.error_recap {
                            text-align: right;
                        }
                    }


                }

                @media @phone_l, @phone {
                    flex-direction: column;
                    align-items: inherit;
                    span:not(.error) { align-self: end; }

                }

                @media @phone {
                    align-items: baseline;
                    span.error { text-align: left; }
                }
            }

            label {
                font-size: 1.0rem;
                line-height: 1.1rem;
                margin-bottom: 0rem;
                min-width: 200px;
                
                &.for_uphone { font-family: "Congenial_M"; }

                /*@media @phone_l { min-width: auto; }*/
            }
            label:first-child { margin-top: 0.3rem; }




            .recaptcha_container {
                /*width: 50%;*/
                /*float: right;*/
                
                display: flex;
                justify-content: space-between;
                align-items: center;
                
                @media @phone_l, @phone {
                    flex-direction: column;
                }

                @media @phone_l { width: 100%; }
                @media @phone   { width: 100%; }

                .recaptcha-outer {
                    width: 50%;
                    text-align: center;
                    background: #f9f9f9;
                    border: 2px solid #f9f9f9;
                    .border_radius(10px);
                    margin: 0.4rem 0rem 0.2rem 0rem;
                    overflow: hidden;

                    .recaptcha-inner{
                        width: 154px;
                        height: 70px;
                        overflow: hidden;
                        margin: 0 auto;
                        margin-top: -17px;
                        padding: 0;

                        #input_captcha { margin-left: -1px; }
                    }
                    
                    @media @phone_l, @phone {
                        width: 100%;
                    }

                    &.error { border-color: @error_color; }

                }
            }



            .checkboxes {
                margin-top: 1rem;
                .label_error_container {
                    flex-direction: column;
                    flex-grow: 1;
                    align-items: baseline;

                    span.error {
                        label { text-align: left; }
                    }
                }
                label { margin-top: 0; }
            }

            .ch_rules_container, .ch_receipt_container {
                display: flex;
                flex-direction: row;
                align-items: center;
                width: 100%;
                margin-top: 1rem;
            }


            .check_label { 
                width: calc(100% - 52px);
                text-align: left;
                margin-bottom: 0;
            }



            #ch_receipt, #ch_rules {  width: 50px; }

            span.jqTransformCheckboxWrapper{
                display: block;
                margin: 0;
            }
            a.jqTransformCheckbox {
                    background: transparent url(../images/checkbox.png) no-repeat center top;
                    vertical-align: top;
                    width: 36px;
                    height: 36px;
                    display:block;
                    outline: none;
                    margin-left: auto;
            }
            a.jqTransformCheckbox.error { background: url(../images/checkbox_error.png) no-repeat center top; }
            a.jqTransformChecked, a.jqTransformChecked.error { background-position: center bottom;}
            .jqTransformHidden {display: none;}


            .form_comment {
                margin-top: 1rem;
                font-size: 0.75rem;
                line-height: 1.05rem;
                text-align: justify;
            }

            label, .form_comment {
                a { color: @dark_violet; text-decoration: underline; }
            }


            .participate_btn {
                text-align: center;

            }
            
            .error_message { display: none; }
        }
        
    }
    
    
    .overlay {
        
        
        &.game_message, &.all_played {
            .popup {
                flex-direction: column;
                
                p {
                    span { 
                        font-family: "Congenial_M"; 
                        font-size: 1.2rem; line-height: 1.5rem;
                    }
                }
            }
        }
        
        &.all_played {
            .popup {
                top: 18%;
            }
        }
        
        &.game_info {
            .popup {
                
                flex-direction: row;
                
                &>div {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    flex-basis: 55%;
                    padding: 2rem 0 1rem 0;
                    font-size: 1.2rem; line-height: 1.5rem;
                    text-align: left;
                }
                
                img {
                    flex-basis: 35%;
                    width: 35%;
                    height: 100%;
                    margin: auto auto auto 0;
                }
                
                .participate_btn {
                    margin-left: 0;
                    a {
                        max-width: 230px;
                    }
                    
                }
                
                
                @media @phone_l, @phone {
                    
                    flex-direction: column;
                    top: 17%;
                    padding: 1.5rem 1.0rem;
                    
                    &>div { 
                        text-align: center; 
                        font-size: 1.0rem; line-height: 1.3rem;
                    }
                    
                    img { width: 35%; max-width: 120px; margin: auto; }
                    
                    .participate_btn { margin-left: auto; }
                }
            }
        }
        
    }
    
    
    
    p.out_of_promo_message {
        
        font-size: 2rem; line-height: 2.4rem;
        
        a { color: #ffffff; text-decoration: underline; }
        
        
        @media @phone_l, @phone { font-size: 1.7rem; line-height: 2.1rem; }
    }
    
}








.container.rules, .container.winners {
    
    
    .winners_container, .rules_container {
        padding: 2rem;
        background-color: #ffffff;
        margin: 2rem auto 3rem auto;
        .border_radius(15px);
        .with_shadow(5px, 5px, 15px, 0, rgba(0, 0, 0, 0.25));
        
        @media @phone {
            padding: 1.5rem 1rem;
        }
    }
    
    
    .scroll_area {
        
        max-height: 400px;

        .mCSB_scrollTools { 
            background-color: #ece9f3;
            width: 10px;
            .border_radius(16px);
        }
        .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y { margin-right: 0px; }
        .mCSB_draggerContainer { 
            margin: 0;
            .mCSB_dragger {
                max-height: auto !important;
                
                .mCSB_draggerRail { background-color: transparent; }
            }
            .mCSB_dragger_bar { 
                background-color: @dark_violet; 
                width: 10px;
            }
        }
    }
}




.container.winners {
    
    .winners_container {
        
        .winners_list {

            width: 100%;
            align-self: baseline;

            ul {

                list-style-type: none;
                display: flex !important;
                flex-wrap: wrap;
                font-size: 1.25rem; line-height: 2.5rem;
                color: @dark_violet;
                margin-bottom: 0;

                li {
                    width: 25%;
                    /*@media @tablet { width: 33.33% };*/
                    @media @phone_l { width: 33.33%; }
                    @media @phone { width: 50%; font-size: 1.1rem; }
                }
            }
        }
        
        
        .no_winners_message {
            color: @dark_violet;
            font-size: 1.2rem; line-height: 1.5rem;
            margin: 1rem auto;
        }
    }
}




.container.rules {
    
    .scroll_area {
        
        /*margin: 2.5rem 0;*/
        max-height: 500px;
        color: @dark_violet;
        
        /* ------- doc formating */
        ul {
            /*width: 465px;*/
            width: 100%;
            list-style-type: none;
            font-size: 1rem;
            text-align: justify;
            padding-left: 0px;
            margin-bottom: 0;
            font-family: "Congenial_L";
            
            p.doc_title {
                font-size: 1.1rem;
                line-height: normal;
                text-align: center;
                padding-bottom: 20px;
            }
            
            p.game_title {
                font-size: 1.0rem;
                text-align: left;
                font-family: "Congenial_M";
            }
            
            span { font-family: "Congenial_M"; }
            
            a { color: @dark_violet !important; text-decoration: underline; }
            
            li {
                margin-top: 2rem;
                margin-bottom: 0px;
                line-height: 1.2rem;
                
                &:first-child { margin-top: 0; }
                
                ul {
                    display: flex;
                    flex-wrap: wrap;
                    margin-top: 10px;
                    
                    li {
                        font-weight: normal;
                        margin-left: 10px;
                        margin-top: 10px;
                        margin-bottom: 5px;
                        /*text-align: center;*/
                        width: 100%;
                        
                        &.products { 
                            width: 45%; 
                            @media @phone { width: 100%;  }
                        }

                        ul li {
                            font-weight: normal;
                            margin-left: 10px;
                            margin-top: 5px;
                            padding-right: 10px;

                            ul li {
                                font-weight: normal;
                                margin-left: 10px;
                            }
                        }
                    }
                }
                
                
            }
        }

        li.rules_strong { margin-bottom: 5px; font-family: "Congenial_M"; }
        li.italic { font-style: italic; }
        ul.disc { 
            list-style-type: disc; 
            li { margin-left: 15px; }
        }
        li.dash {
            margin-top: 0;
            margin-bottom: 0;
            &::before { 
                content: "-";
                /*text-indent: -5px;*/
                margin-left: -5px;
                margin-right: 2px;
            }
        }
        
        span.underline { text-decoration: underline; }
        /* ------- end doc formating */
        
    }
    
}





.container.products {
    
    p.title { 
        @media @phone_l { font-size: 2rem; line-height: 2.4rem; }
        @media @phone { font-size: 1.7rem; line-height: 2.1rem; }
    }
    
    .producrs_section_1, .producrs_section_2, .producrs_section_3 {
        /*background-color: #ffffff;*/
        width: 100%;
        max-width: 1000px;
        margin: 2rem auto;
        padding: 1rem 0;
        
        [class*='col-'] {
            margin: 10px 0;
        }
        
        background-size: 100% 100% !important;
        
        .products_title {
            font-family: "Congenial_M";
            color: @dark_violet;
            font-size: 1.8rem; line-height: 2rem;
            margin-top: 1.5rem;
        }
        
        @media @phone_l {
            .products_title { font-size: 1.5rem; line-height: 1.7rem; }
        }
        @media @phone {
            .products_title { font-size: 5vw; line-height: 6vw; }
        }
    }
    
    .producrs_section_1 {
        background: url("../images/products/products_section_1_back_d.png") no-repeat center center;
        @media @phone_l, @phone { background: url("../images/products/products_section_1_back_m.png") no-repeat center center; }
    }
    
    .producrs_section_2 {
        background: url("../images/products/products_section_2_back_d.png") no-repeat center center;
        @media @phone_l, @phone { background: url("../images/products/products_section_2_back_m.png") no-repeat center center; }
    }
    
    .producrs_section_3 {
        background: url("../images/products/products_section_3_back_d.png") no-repeat center center;
        @media @phone_l, @phone { background: url("../images/products/products_section_1_back_m.png") no-repeat center center; }
    }
    
}





footer {
    
    position: absolute;
    left: 0; right: 0;
    bottom: 0px;
    /*height: 130px;*/
    padding-top: 130px;
    z-index: 2;
    
    @media @tablet { padding-top: 170px; }
    @media @phone_l { padding-top: 210px; }
    @media @phone { padding-top: 270px; }
    
    
    font-family: "GoodHeadlinePro";
    font-size: 0.9rem;
    text-align: left;
    
    z-index: 2;
    
    
    &>div {
        background-color: @dark_violet;
        padding-bottom: 1rem;
    }
    
    
    .container { 
        max-width: 830px; 
        margin: auto;
        @media @desktop { max-width: 800px; }
        @media @tablet  { max-width: 630px; }
    }
    
    a { 
        color: #ffffff; 
        text-decoration: none !important;
        /*&#fb_btn, &#mdlz_btn {text-decoration: none;}*/
        &:not(#fb_btn):not(#ig_btn):not(#mdlz_btn):hover { color: #ffffff; text-decoration: underline !important; }
    }
    
    p span { 
        
        &.copyright_d { display: none; }
        &.copyright_m { display: block; }
        
        @media @desktop_l, @desktop {
            &.privacy_btn:after, 
            &.rules_btn:after, 
            &.aboutus_btn:after, 
            &.contacts_btn:after { 
                .menu_delimiter; 
            }
            
            &.cookies_btn:after {
                .newline;
            }
        }

        @media @tablet, @phone_l {
             
            &.aboutus_btn:after, 
            &.contacts_btn:after { 
                .menu_delimiter; 
            }
            
            &.privacy_btn:after, &.cookies_btn:after, &.rules_btn:after {
                .newline;
            }
        }
        
        @media @phone_l {
            &.copyright_m {
                font-size: 0.85rem;
                padding: 0rem; 
                padding-bottom: 1rem;
            }
        }
        
        @media @phone   { 
            
            &.privacy_btn:after, &.cookies_btn:after, &.rules_btn:after, &.aboutus_btn:after, &.contacts_btn:after, &.terms_btn:after {
                .newline;
            }
            
            /*font-size: 0.9rem;*/ 
            padding: 0 0.5rem; 
            &.copyright_m {
                font-size: 0.80rem;
                padding: 0rem; 
                padding-bottom: 1rem;
                padding-left: 8px;
                &:before { content:"\000A"; white-space: pre; }
            }
            
        }
    }
}

.goto_top_arrow {
    position: fixed;
    bottom: 20px;
    right: 10px;
    z-index: 100;
    max-width: 40px;
    opacity: 0.5;
    .transition(opacity, 0.2s);
    
    &:hover { opacity: 1; }
    
    @media @phone {
        bottom: 10px;
        max-width: 35px;
    }
}



.participate_btn, .subscribe_btn {
    
    margin: auto;
    
    a {
        position: relative;
        .transition(background-color, 0.2s);
        transition-property: color, background-color !important;
        display: inline-block;
        padding: 17px 30px 8px 30px;
        font-family: "Congenial_M";
        font-size: 20px;
        color: @dark_violet;
        background-color: #ffffff;
        .border_radius(12px);
        margin-bottom: 0.5rem;
        width: 100%;
        max-width: 290px;
        min-width: 220px;
        z-index: 1;
        text-decoration: none !important;
        
        &:hover {
            text-decoration: none;
            color: #ffffff;
            background-color: @dark_violet;
        }
    }
    
    span { 
        display: block; 
        font-size: 0.9rem;
        line-height: 1.1rem;
        /*color: #ffffff;*/
    }
    
    @media @phone { 
        /*width: 100%;*/
        max-width: 280px; 
        margin: auto;
    }
    
    &.medium {
        a {
            min-width: 120px;
            padding: 13px 60px 9px 60px;
            font-size: 20px;
        }
    }
    
    &.small {
        a {
            display: inline-block;
            max-width: 180px;
            min-width: 120px;
            padding: 11px 40px 4px 40px;
            font-size: 18px;
            .border_radius(10px);
        }
    }
    
    &.white {
        a { 
            color: @dark_violet; 
            background-color: #ffffff;
            &:hover {
                color: #ffffff; 
                background-color: @dark_violet;
            }
        }
        span { color: #ffffff; }
    }
    
    &.violet {
        a { 
            color: #ffffff; 
            background-color: @dark_violet;
            &:hover {
                color: @dark_violet; 
                background-color: #ffffff;
            }
        }
    }
    
    
    /* on Safari and Chrome */
    /*
    @media screen and (-webkit-min-device-pixel-ratio:0) {
        
        ::i-block-chrome, a { padding: 17px 30px 11px 30px; }
        
        &.medium {
            ::i-block-chrome, a { padding: 13px 60px 11px 60px; }
        }

        &.small {
            ::i-block-chrome, a { padding: 11px 40px 7px 40px; }
        }
    }
    */
    
    
    @media not all and (min-resolution:.001dpcm) { 
        @supports (-webkit-appearance: none) {
          /* Safari Only CSS here */
          
            a { padding: 17px 30px 11px 30px; }
        
            &.medium {
                a { padding: 13px 60px 11px 60px; }
            }

            &.small {
                a { padding: 11px 40px 7px 40px; }
            }
        }
    }
    
}

.participate_btn {
    
    @media @phone { width: 100%; }
}


.clear { clear: both; }