@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


@crema: #eae6d2;

.container-fluid {
    
    &.navigation {
        
        .navbar {
            
            .navbar-collapse {
                .nav-item {
                    a { 
                        font-size: 1.3em; line-height: 1.2em;
                        padding: 12px 9px;
                    }
                }
            }
            
            @media screen and (min-width: 992px) and (max-width: 1270px) {
                .navbar-collapse {
                    .nav-item {
                        margin: 15px 3px;
                        a { font-size: 1.6vw; line-height: 1.2em; }
                    }
                }
            }
            
            @media screen and (min-width: 992px) and (max-width: 1160px) {
                .navbar-collapse {
                    .nav-item {
                        a { padding: 12px 8px; }
                    }
                }
            }
        }
    }
}


.overlay {
    
    &.new_game {
        display: block; 
        position: fixed; 
        top: 0; bottom: 0; left: 0; right: 0; 
        background-color: rgba(0, 0, 0, 0.4); 
        z-index: 1000;
        
        .new_game_popup {
            position: relative; 
            top: 120px; 
            width: 90%; 
            max-width: 1200px; 
            margin: auto;
            
            .close_newgame_popup {
                position: absolute; 
                top: 35px; right: 20px;
                max-width: 25px;
                
                @media @phone_l, @phone {
                    top: 5vw;
                    right: 3vw;
                }
                @media @phone {
                    max-width: 5vw;
                }
            }
            
            .popup_content {
                
                position: absolute;
                top: 62%;
                left: 0;
                right: 0;
                
                .participate_btn {
                    a {
                        font-size: 2em; line-height: 1.2em;
                        width: 22%;
                        max-width: 250px;
                    }
                }
                
                .question {
                    color: @crema;
                    width: 33%;
                    max-width: 380px;
                    margin: 10px auto;
                    font-size: 1.1em; line-height: 1.15em;
                }
            }
            
            @media @tablet {
                width: 98%; 
                
                .popup_content {
                    .participate_btn {
                        a {
                            font-size: 1.75em;
                            width: 24%;
                            padding: 0.5rem 0.2rem;
                        }
                    }
                    .question {
                        font-size: 1.0em; line-height: 1.0em;
                    }
                }
            }
            
            @media @phone_l, @phone {
                top: 5vw;
                width: 90%;
                max-width: 500px;
                
                .popup_content {
                    
                    top: 70%;
                    
                    .participate_btn {
                        a {
                            width: 50%;
                        }
                    }
                    .question {
                        width: 70%;
                        font-size: 3.15vw; line-height: 1.2em;
                        margin-top: 5vw;
                    }
                }
            }
            
            @media @phone {
                
                .popup_content {
                    
                    .participate_btn {
                        a {
                            width: 50%;
                            padding: 0.4rem 0.2rem;
                        }
                    }
                    
                    .question {
                        font-size: 4.15vw; line-height: 1.2em;
                    }
                }
            }
            
        }
    }
}