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

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

    .grid-2 {
        display: block;
    }

    .grid-3 {
        display: block;
    }

    .grid-4 {
        display: block;
    }

    .grid-6 {
        display: block;
    }

    .cta-green {
        padding-bottom: 1.6%;
        padding-left: 4.5%;
        padding-right: 4.5%;
        padding-top: 1.6%;
    }

    .cta-blue {
        padding-bottom: 1.6%;
        padding-left: 4.5%;
        padding-right: 4.5%;
        padding-top: 1.6%;
    }

    .game-btn {
        padding-bottom: 4%;
        padding-left: 6%;
        padding-right: 6%;
        padding-top: 4%;
    }

    .sound-btn {
        padding-bottom: 1%;
        padding-left: 1.2%;
        padding-right: 1.2%;
        padding-top: 1%;
    }


    /* NAVBAR FOR REGISTERED USERS */
    /* Desktop version */
    .guest-nav, .user-nav {
        display: none;
    }

    /* Mobile version */
    .user-nav-m {
        background-color: var(--dark-blue);
        bottom: 0;
        color: #ffffff;
        display: flex;
        height: 65px;
        position: fixed;
        width: 100%;
        z-index: 10;
    }

    .user-nav-m .fa-house {
        padding-left: 3%;
    }

    .user-nav-m .round-blue {
        left: 1%;
    }

    .guest-m {
        padding-left: -10%;
    }

    .guest-m .round-blue {
        left: -3%;
    }
    
    .user-nav-m .fa-solid {
      font-size: 1.4rem;
    }
    
    .nav__text {
      margin-top: 5%;
    }
    
    .nav__link {
        align-items: center;
        color: #ffffff;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        font-family: 'nunito-r';
        font-size: 10px;
        justify-content: center;
        min-width: 50px;
        text-decoration: none;
    }

    .user-nav-m .register-link, .user-nav-m .faq-link {
        left: -3.5%;
        position: relative;
    }

    .user-nav-m .login-link {
        left: -2%;
        position: relative;
    }

    .user-nav-m .home-link {
        left: 1%;
        position: relative;
    }

    .round-blue {
        width:100px;
        height: 100px;
        background: var(--dark-blue);
        border-radius: 100%;
        margin: 0 auto;
        position: relative;
        top: -40%;
    }

    .round-green {
        background-color: #8dc15c;
        border-radius: 100%;
        height: 85%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        transform: translateY(6%);
        width: 85%;
    }

    .round-green .fa-solid {
        font-size: 30px !important;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        transform: translateY(90%);
    }

    .logo-m {
        display: block;
        text-align: center;
        margin-bottom: 2%;
        margin-left: auto;
        margin-top: 2%;
        margin-right: auto;
        width: 30%;
    }

    /* ---------------------------------------------- */
    /* FOOTER */
    .container-wave {
        display: block;
        height: 70vh !important;
    }

    .container-wave svg {
        width: auto !important;
    }

    .footer {
        padding-bottom: 20%;
    }

    .footer .links, .footer .social {
        padding-left: 0;
    }

    .footer .social img {
        max-width: 5%;
    }

    .footer .links li {
        display: block;
        margin-bottom: 3%;
    }

    .footer .links li a {
        font-size: 20px;
    }


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

    /* INDEX PAGE */
    .bg-lottie {
        display: none;
    }

    .bg-clouds-m {
        display: block;
        flex: 1;
        left: 0;
        margin-top: 20%;
        object-fit: cover;
        width: 100vw;
    }

    .container-top {
        margin-top: -20%;
    }

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

    .container-top h1 {
        width: 45%;
    }
    
    .container-top h2 {
        margin-bottom: 5%;
        width: 52%;
    }

    .bg-img {
        display: none;
    }

    .container-second-section {
        margin-top: 70%;
        position: relative;
    }

    .container-third-section {
        margin-left: auto;
        margin-right: auto;
        margin-top: -80%;
        position: relative;
        text-align: center;
    }

    .container-third-section .container-right {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .container-third-section .container-right h4, .container-fourth-section .container-left h4 {
        padding-left: 20%;
        padding-right: 20%;
    }

    .container-fourth-section .container-left, .container-fourth-section .container-right {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .container-fourth-section .container-right img {
        display: none;
    }

    .phonemes-table-m {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    /* Banner */
    .container-index-banner {
        margin-bottom: 5%;
    }

    .container-index-banner img {
        max-width: 90%;
        min-width: 90%;
    }


    /* LOGIN */
    .container-login {
        margin-bottom: 30%;
    }

    .container-login .container-left {
        margin-left: auto;
        margin-right: auto;
        margin-top: 40%;
        position: relative;
        text-align: center;
        width: 100%;
    }

    .container-login .container-left .cta-green {
        padding-bottom: 2%;
        padding-left: 5%;
        padding-right: 5%;
        padding-top: 2%;
    }

    .container-login .container-right {
        margin-top: -20%;
        position: relative;
        width: 100%;
    }

    .container-login .container-right img, .container-login-img img {
        display: none;
    }

    .container-login .container-left .username, .container-login .container-left .password {
        margin-left: 20%;
        margin-right: 20%;
    }


    /* REGISTER */
    .container-register .container-right img, .container-register-img img {
        display: none;
    }

    .container-register {
        margin-bottom: 10%;
    }

    .container-register .container-left {
        margin-left: auto;
        margin-right: auto;
        margin-top: 50%;
        position: relative;
        text-align: center;
        width: 100%;
    }

    .container-register .container-left .cta-green {
        padding-bottom: 2%;
        padding-left: 5%;
        padding-right: 5%;
        padding-top: 2%;
    }

    .container-register .container-right {
        margin-top: -30%;
        position: relative;
        width: 100%;
    }


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

    /* HOMEPAGE */
    .container-dashboard-user .container-left {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .statistics {
        width: 100%;
    }

    .totals {
        display: grid;
        max-width: 100%;
        min-width: 100%;
    }

    .totals .blue-card h4 {
        margin-bottom: -5%;
    }

    .container-passport .bg-passport {
        display: none;
    }

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

    .data-user .container-middle .passport {
        grid-template-rows: 1fr 1fr;
        margin-top: 20%;
        position: relative;
    }

    .data-user .container-middle h6, .data-user .container-middle h2, .container-dashboard-user h1 {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .data-user .container-middle h6 {
        margin-top: -15%;
    }

    .data-user .container-middle .btn, .data-user .container-right .btn {
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        width: 20%;
    }

    .data-user .container-right {
        margin-left: 0;
        margin-top: 10%;
    }

    .data-user .container-right .quizz-list {
        margin-left: auto;
        margin-right: auto;
        max-width: 50%;
        min-width: 50%;
        text-align: center;
    }

    .data-user .container-right .btn {
        width: 30%;
    }

    /* Banner */
    .container-home-banner {
        margin-left: 10%;
    }

    .container-home-banner img {
        max-width: 45%;
    }

    .container-home-banner {
        display: none;
    }

    .container-home-banner-m {
        display: block;
        margin-top: 10%;
    }

    .container-home-banner-m img {
        max-width: 100%;
        min-width: 100%;
    }


    /* LEARNING PAGE */
    .container-courses {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .container-courses .container-left {
        display: grid;
        order: 1;
        padding-left: 5%;
        width: 90%;
    }

    .container-courses .container-right {
        display: grid;
        margin-left: 15%;
    }

    .container-courses .vowels, .container-courses .diphtongs, .container-courses .consonants {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        margin-left: 10%;
    }

    .container-courses .container-right .vowels div, .container-courses .container-right .diphtongs div, .container-courses .container-right .consonants div {
        height: 80px;
        width: 80px;
    }


    /* QUIZZ PAGE */
    .container-quizz .container-middle {
        margin-top: 0;
    }

    .container-quizz .container-middle .sound-btn {
        margin-left: 3%;
        padding-bottom: 1%;
        padding-left: 1.2%;
        padding-right: 1.2%;
        padding-top: 1%;
    }

    .container-quizz h1, .container-quizz .container-right h2 {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .container-quizz .container-middle h3 {
        margin-bottom: -2%;
        margin-top: 2%;
    }

    .container-quizz .container-middle .answers {
        display: grid;
        margin-bottom: 8%;
        margin-left: 15%;
    }

    .container-quizz .container-middle #quizz1 .answers {
        display: grid;
        margin-bottom: unset;
    }

    .container-quizz .container-middle .answers div {
        height: 200px;
        width: 200px;
    }


    /* ALL QUIZZ PAGE */
    .container-game-top-img .bg-clouds-m {
        margin-bottom: 20%;
        margin-top: 10%;
    }

    .container-game-top .bg-plane {
        display: none;
    }

    .container-game-top .game-quizz .game-btn:hover img, .container-game-top .game-quizz:hover .game-btn h2 {
        display: none;
    }

    .container-game-top {
        margin-bottom: 20%;
        margin-top: -8%;
    }

    .container-game-top .game-btn {
        margin-bottom: 8%;
    }


    /* PROFILE PAGE */
    .container-profile {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .container-profile .container-left, .container-profile .container-right {
        margin-left: 0;
    }

    .container-profile .container-right .cta-green {
        margin-top: 5%;
        width: 20%;
    }


    /* 404 PAGE */
    .container-404 img {
        margin-top: 10%;
        width: 30%;
    }


    /* CONTACT PAGE */
    .container-profile .container-right form input[type="text"], input[type="password"], input[type="email"], #message_title, #message_content {
        width: 90%;
    }

    #message_content {
        min-height: 300px;
    }

    .contact-form, .contact-form .s {
        text-align: center;
    }

    .contact-form .cta-green {
        margin-top: 8% !important;
    }


    /* ---------------------------------------------- */
    /* -- DASHBOARD ADMIN -- */
    /* ---------------------------------------------- */

    /* MENUS */
    .xxl {
        font-size: 25px;
    }

    .xl {
        font-size: 20px;
    }

    .l {
        font-size: 18px;
    }

    .m {
        font-size: 15px;
    }

    .s {
        font-size: 12px;
    }

    .admin-nav .links-pages span {
        display: none;
    }

    /* HOME DASHBOARD */
    .container-admin-dashboard .container-middle {
        width: 80%;
    }

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

    .container-admin-dashboard .container-right {
        display: none;
    }

    .admin-navbar {
        background-color: white;
        width: 8%;
        z-index: 10;
    }

    .admin-navbar .links-website, .admin-navbar .logo {
        display: none
    }

    .admin-nav ul {
        padding-left: 20%;
    }
}