@media only screen and (max-width: 1900px) {

    :root {
        --light-blue: #61BBD4;
        --blue: #58AABC;
        --dark-blue: #135e6c;
        --light-green: #8dc15c;
        --green: #90AA5E;
        --dark-green: #749F4B;
        --red: #FF5857;
        --light-grey: #CBCBCC;
        --grey: #40403c;
    }

    .xxl {
        font-size: 30px;
    }
    
    .xl {
        font-size: 25px;
    }
    
    .l {
        font-size: 20px;
    }
    
    .m {
        font-size: 18px;
    }
    
    .s {
        font-size: 14px;
    }
    
    .xs {
        font-size: 12px;
    }

    .cta-green {
        padding-bottom: 2%;
        padding-left: 3%;
        padding-right: 3%;
        padding-top: 2%;
    }

    .cta-blue {
        padding-bottom: 2%;
        padding-left: 3%;
        padding-right: 3%;
        padding-top: 2%;
    }

    @media only screen and (max-width: 1200px) {
        .m {
            font-size: 12px;
        }

        .l {
            font-size: 15px;
        }

        .xl {
            font-size: 20px;
        }

        .btn {
            font-size: 14px;
        }
    }


    /* ---------------------------------------------- */
    /* -- GUEST USERS PAGES -- */
    /* ---------------------------------------------- */

    /* INDEX PAGE */
    .container-top .cta-green {
        padding-bottom: 1%;
        padding-left: 2%;
        padding-right: 2%;
        padding-top: 1%;
    }

    .bg-img {
        top: -450px;
    }

    @media only screen and (max-width: 1600px) {
        .bg-img {
            top: -300px;
        }
    }

    @media only screen and (max-width: 1400px) {
        .bg-img {
            top: -200px;
        }
    }

    @media only screen and (max-width: 1200px) {
        .bg-img {
            top: -100px;
        }
    }

    .container-third-section {
        margin-top: 40%;
    }


    /* REGISTER */
    .container-register {
        margin-top: 15%;
    }


    /* ---------------------------------------------- */
    /* -- REGISTERED USERS PAGES -- */
    /* ---------------------------------------------- */

    /* HOMEPAGE */
    .container-homepage .grid-4 {
        grid-template-columns: 22% 25% 22% 30%;
    }

    .statistics {
        width: 120%;
    }

    .totals {
        max-width: 120%;
        min-width: 120%;
    }

    .data-user .container-middle {
        margin-left: 30%;
    }

    .data-user .container-middle .passport {
        top: 35%;
    }

    @media only screen and (max-width: 1200px) {
        .data-user .container-middle .passport {
            top: 40%;
        }
    }

    .data-user .container-right .quizz-list {
        max-width: 110%;
        min-width: 110%;
    }

    .data-user .container-right {
        margin-left: 50%;
    }

    .container-home-banner {
        margin-left: 20%;
    }


    /* ---------------------------------------------- */
    /* -- QUIZZ PAGE -- */
    /* ---------------------------------------------- */
  
    /* QUIZZ */
    .container-quizz .container-middle .sound-btn {
        margin-top: 3%;
    }


    /* ---------------------------------------------- */
    /* -- BACK OFFICE -- */
    /* ---------------------------------------------- */
  
    /* MENUS */
    .container-admin-dashboard .xxl {
        font-size: 25px;
    }

    .container-admin-dashboard .xl {
        font-size: 20px;
    }

    .container-admin-dashboard .l {
        font-size: 18px;
    }

    .container-admin-dashboard .m {
        font-size: 15px;
    }

    .container-admin-dashboard .s {
        font-size: 12px;
    }

    .admin-nav .links-pages span {
        font-size: 13px;
    }

    .admin-navbar .links-website {
        margin-left: -5%;
        margin-top: 300%;
        position: absolute;
    }

    .container-admin-dashboard .container-right .btn-nav {
        margin-left: 1%;
        padding-left: 5%;
        padding-right: 5%;
    }

    @media only screen and (max-width: 1400px) {
        .admin-navbar .links-website {
            margin-left: -15%;
            margin-top: 400%;
            position: absolute;
        }

        .container-admin-dashboard .container-right .btn-nav {
            font-size: 10px;
            margin-left: 1%;
            padding-left: 4.5%;
            padding-right: 4.5%;
        }
    }

    @media only screen and (max-width: 1200px) {
        .admin-navbar span {
            font-size: 10px !important;
        }

        .admin-navbar .links-website {
            margin-left: -20%;
            margin-top: 450%;
            position: absolute;
        }

        .container-admin-dashboard .container-right .btn-nav {
            font-size: 8px;
            margin-left: 1%;
            padding-left: 3%;
            padding-right: 3%;
        }
    }
}