/* --------------- VARIABLES --------------- */

:root {
    --fl-lightBlue: #008fbe;
    --fl-lightBlue-hover: rgb(0, 133, 177);
    --fl-purple: #5200c5;
    --fl-black: #585858;
    --fl-yellow: #ebac22;
    --fl-red: #d50037;
    --fl-green: #76bc21;
    --fl-btn-lightBlue: linear-gradient(360deg, #008fbe 0%, rgba(0, 143, 190, 0.85) 100%);
    --fl-btn-lightBlue-hover: linear-gradient(360deg, #0083ae 0%, rgba(0, 133, 177, 0.85) 100%);
    --fl-btn-purple: linear-gradient(180deg, rgba(82, 0, 197, 0.95) 0%, #5200c5 100%);
    --fl-btn-purple-hover: linear-gradient(180deg, rgba(74, 0, 179, 0.95) 0%, #5200c5 100%);
    --fl-btn-yellow: linear-gradient(180deg, rgba(235, 172, 34, 0.85) 0%, #ebac22 100%);
    --fl-btn-yellow-hover: linear-gradient(180deg, rgba(222, 162, 31, 0.85) 0%, #d4a21f 100%);
    --fl-box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.05);
    --fl-color-shadow: #d9d9d9;
}

/* --------------- RESET CSS --------------- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

blockquote,
body,
dd,
div,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: inherit;
}

/* --------------- FONT = BLISS PRO --------------- */

@font-face {
    font-family: "Bliss pro";
    src: url("../fonts/BlissPro-ExtraLight.woff") format("woff");
    font-display: swap;
    font-weight: 200;
}

@font-face {
    font-family: "Bliss pro";
    src: url("../fonts/BlissPro-Light.woff") format("woff");
    font-display: swap;
    font-weight: 300;
}

@font-face {
    font-family: "Bliss pro";
    src: url("../fonts/BlissPro.woff") format("woff");
    font-display: swap;
    font-weight: 400;
}

@font-face {
    font-family: "Bliss pro";
    src: url("../fonts/BlissPro-Medium.woff") format("woff");
    font-display: swap;
    font-weight: 500;
}

@font-face {
    font-family: "Bliss pro";
    src: url("../fonts/BlissPro-Bold.woff") format("woff");
    font-display: swap;
    font-weight: 700;
}

@font-face {
    font-family: "Bliss pro";
    src: url("../fonts/BlissPro-ExtraBold.woff") format("woff");
    font-display: swap;
    font-weight: 800;
}

/* --------------- BUTTONS --------------- */

.btn.btn-primary {
    background: var(--fl-btn-lightBlue);
    padding: 1.25rem 2rem;
    color: #fff;
    border-radius: 2rem;
    border: 0;
    box-shadow: var(--fl-box-shadow);
    text-transform: uppercase;
    font-weight: 500;
}

    .btn.btn-primary:hover {
        background: var(--fl-btn-lightBlue-hover);
        color: #fff;
    }

    .btn.btn-primary:active {
        transform: scale(0.99);
    }

.btn.btn-danger {
    padding: 1.25rem 2rem;
    border-radius: 2rem;
    border: 0;
    box-shadow: var(--fl-box-shadow);
    text-transform: uppercase;
    font-weight: 500;
}

.btn.btn-purple {
    background: var(--fl-btn-purple);
    padding: 1.25rem 2rem;
    color: #fff;
    border-radius: 2rem;
    border: 0;
    box-shadow: var(--fl-box-shadow);
    text-transform: uppercase;
    font-weight: 500;
}

    .btn.btn-purple:hover {
        background: var(--fl-btn-purple-hover);
        color: #fff;
    }

    .btn.btn-purple:active {
        transform: scale(0.99);
        color: #fff;
    }

.btn.btn-secondary {
    background: var(--fl-btn-yellow);
    padding: 1.25rem 2rem;
    color: #fff;
    border-radius: 2rem;
    border: 0;
    box-shadow: var(--fl-box-shadow);
    text-transform: uppercase;
    font-weight: 500;
}

.btn.btn.btn-secondary:hover {
    background: var(--fl-btn-yellow-hover);
    color: #fff;
    filter: brightness(1.05);
}

.btn.btn.btn-secondary:active {
    transform: scale(0.99);
}

.btn.btn-resources-white {
    background: #fff;
    padding: 1.25rem 2rem;
    color: rgba(118, 188, 33, 1);
    border-radius: 2rem;
    border: 0;
    box-shadow: var(--fl-box-shadow);
    text-transform: uppercase;
    font-weight: 500;
}

    .btn.btn-resources-white:hover {
        filter: brightness(1.02);
        background: #fff;
        color: rgba(118, 188, 33, 1);
    }

.btn.btn.btn-resources-white:active {
    transform: scale(0.99);
    background: #fff;
    color: var(--fl-lightBlue);
}

.btn.btn-transparent {
    background: transparent;
    padding: 1.25rem 2rem;
    color: #fff;
    border-radius: 2rem;
    border: 2px solid rgb(245, 245, 245);
    box-shadow: var(--fl-box-shadow);
    text-transform: uppercase;
    font-weight: 500;
}

    .btn.btn-transparent:hover {
        background: transparent;
        color: #fff;
        border: 2px solid rgb(245, 245, 245);
        filter: brightness(1.1);
    }

    .btn.btn-transparent:active {
        transform: scale(0.99);
        color: rgb(245, 245, 245);
        outline: 2px solid rgb(245, 245, 245);
        filter: brightness(1.02);
    }

.btn.btn-primary-sm {
    background: var(--fl-btn-lightBlue);
    padding: 0.75rem 1.5rem;
    color: #fff;
    border-radius: 2rem;
    border: 0;
    box-shadow: var(--fl-box-shadow);
    text-transform: uppercase;
}

    .btn.btn-primary-sm:hover {
        background: var(--fl-btn-lightBlue-hover);
        color: #fff;
    }

    .btn.btn-primary-sm:active {
        transform: scale(0.99);
    }

.btn.btn-primary.form {
    padding: 1.5rem 2rem;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.25rem;
    text-transform: uppercase;
    margin: 0.5rem 0 0 0;
    box-shadow: var(--fl-box-shadow);
}

.btn.btn-whatsapp {
    background: linear-gradient(91.95deg, #28c143 5.55%, #1faf38 94.45%);
    padding: 0.75rem 1rem;
    color: #fff;
    border-radius: 2rem;
    border: 0;
    box-shadow: var(--fl-box-shadow);
    text-transform: uppercase;
}

    .btn.btn-whatsapp:hover {
        background: linear-gradient(91.95deg, #25b63e 5.55%, #25b63e 94.45%);
        color: #fff;
    }

    .btn.btn-whatsapp:active {
        transform: scale(0.99);
        color: #fff;
    }

.btn.btn-facebook {
    background: #4267b2;
    padding: 0.75rem 1rem;
    color: #fff;
    border-radius: 2rem;
    border: 0;
    box-shadow: var(--fl-box-shadow);
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .btn.btn-facebook:hover {
        background: #3d5fa6;
        color: #fff;
    }

    .btn.btn-facebook:active {
        transform: scale(0.99);
        background: #3d5fa6;
        color: #fff;
    }

.btn.btn-google {
    background: #fff;
    padding: 0.75rem 1rem;
    color: rgba(88, 88, 88, 0.75);
    font-weight: 500;
    border-radius: 2rem;
    border: 1px solid rgba(88, 88, 88, 0.75);
    box-shadow: var(--fl-box-shadow);
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .btn.btn-google:hover {
        background: #fff;
        color: rgba(88, 88, 88, 0.75);
        border: 1px solid rgba(88, 88, 88, 0.75);
        filter: opacity(0.9);
    }

    .btn.btn-google:active {
        transform: scale(0.99);
        background: #fff;
        color: rgba(88, 88, 88, 0.75);
        border: 1px solid rgba(88, 88, 88, 0.75);
    }

.btn.btn-copy {
    background: #fff;
    padding: 0.75rem 1rem;
    color: var(--fl-lightBlue);
    border-radius: 2rem;
    border: 2px solid var(--fl-lightBlue);
    box-shadow: var(--fl-box-shadow);
    text-transform: uppercase;
}

    .btn.btn-copy:hover {
        background: #fff;
        color: rgb(0, 130, 174);
        border: 2px solid rgb(0, 130, 174);
    }

    .btn.btn-copy:active {
        transform: scale(0.99);
        color: rgb(0, 130, 174);
        border: 2px solid rgb(0, 130, 174);
    }

.btn.btn-link {
    background: transparent;
    padding: 0.75rem 1rem;
    color: var(--fl-lightBlue);
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
}

    .btn.btn-link:hover {
        background: transparent;
        color: rgb(0, 130, 174);
    }

    .btn.btn-link:active {
        transform: scale(0.99);
        color: rgb(0, 130, 174);
    }

.btn.btn-fl-red {
    background: var(--fl-red);
    padding: 1rem 1.25rem;
    color: #fff;
    font-weight: 500;
    border-radius: 2rem;
    font-size: 0.9rem;
    box-shadow: var(--fl-box-shadow);
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

    .btn.btn-fl-red:hover {
        color: #fff;
        background: #c60033;
    }

    .btn.btn-fl-red:active {
        transform: scale(0.99);
        background: #c60033;
        color: #fff;
    }

.btn.btn-fl-green {
    background: var(--fl-green);
    padding: 1rem 1.25rem;
    color: #fff;
    font-weight: 500;
    border-radius: 2rem;
    font-size: 0.9rem;
    box-shadow: var(--fl-box-shadow);
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

    .btn.btn-fl-green:hover {
        color: #fff;
        background: #6baa1e;
    }

    .btn.btn-fl-green:active {
        transform: scale(0.99);
        background: #6baa1e;
        color: #fff;
    }

.btn.btn-outline-primary {
    background: #fff;
    padding: 1.25rem 2rem;
    color: var(--fl-lightBlue);
    border-radius: 2rem;
    border: 2px solid rgb(245, 245, 245);
    border-color: var(--fl-lightBlue);
    box-shadow: var(--fl-box-shadow);
    text-transform: uppercase;
    font-weight: 500;
}

    .btn.btn-outline-primary:hover {
        background: rgb(253, 253, 253);
        border: 2px solid var(--fl-lightBlue);
        color: var(--fl-lightBlue);
        filter: brightness(1.05);
    }

    .btn.btn-outline-primary:active {
        transform: scale(0.99);
    }

.btn.btn-white {
    background: #fff;
    padding: 1.5rem 2rem;
    color: var(--fl-lightBlue);
    border-radius: 2rem;
    border: 0;
    box-shadow: var(--fl-box-shadow);
    text-transform: uppercase;
    font-weight: 500;
}

    .btn.btn-white:hover {
        filter: brightness(1.05);
        background: #fff;
        color: var(--fl-lightBlue-hover);
    }

    .btn.btn-white:active {
        transform: scale(0.99);
    }

/* --------------- CONTAINER-FLUID --------------- */

.container-fluid {
    padding: 0 40px;
}

@media (max-width: 576px) {
    .container-fluid {
        padding: 0 12px;
    }
}

/* --------------- PAGINATION --------------- */

.pagination {
    --bs-pagination-border-width: 0;
}

    .pagination .page-link {
        color: var(--fl-lightBlue);
        font-size: 20px;
        font-weight: 500;
        border-radius: 4px;
    }

        .pagination .page-link:hover,
        .pagination .page-item.active {
            background-color: var(--fl-lightBlue);
            color: #fff;
            border-radius: 4px;
        }

            .pagination .page-item.active .page-link {
                background-color: var(--fl-lightBlue);
                color: #fff;
            }

    .pagination .page-item.disabled .page-link {
        color: #aeaeae;
        user-select: none;
    }

/* --------------- MODALS --------------- */

.modal.fade {
    background-color: rgba(0, 0, 0, 0.9);
    cursor: pointer;
}

.modal-header {
    border: 0;
}

.modal-body {
    padding: 0 3rem 3rem 3rem;
}

@media (max-width: 600px) {
    .modal-body {
        padding: 0 2rem 3rem 2rem;
    }
}

.modal h3 {
    font-weight: 500;
    font-size: 2rem;
    text-align: center;
    color: var(--fl-lightBlue);
    margin: 0 0 2.5rem 0;
}

.modal h5 {
    font-style: italic;
    font-weight: 300;
    font-size: 1.5rem;
    text-align: center;
    color: var(--fl-lightBlue);
    margin: 0 0 2.5rem 0;
}

.modal p {
    font-weight: 300;
    font-size: 1.2rem;
    text-align: center;
    color: var(--fl-black);
    margin: 0 0 0.5rem 0;
}

.modal form {
    margin: 0 0 4rem 0;
}

.modal button.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}

.modal__actions {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    margin: 3rem 0 0 0;
}

@media (max-width: 600px) {
    .modal__actions {
        gap: 1rem 0;
    }
}

.slide-in-fwd-center {
    -webkit-animation: slide-in-fwd-center 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slide-in-fwd-center 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

#assignResourceInAClub .modal-body {
    padding: 0 2rem 3rem 2rem;
}

@media (max-width: 576px) {
    #assignResourceInAClub .modal__actions button {
        width: 100%;
    }
}

@-webkit-keyframes slide-in-fwd-center {
    0% {
        -webkit-transform: translateZ(-1400px);
        transform: translateZ(-1400px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes slide-in-fwd-center {
    0% {
        -webkit-transform: translateZ(-1400px);
        transform: translateZ(-1400px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}

.modalWelcome .modal-content {
    border-radius: 30px;
}

.modalWelcome .modal-dialog.modal-lg {
    --bs-modal-width: 950px;
}

.modalWelcome .modal-body {
    padding: 0;
}

.modalWelcome .actions {
    display: flex;
    flex-flow: row wrap;
    gap: 1rem;
    margin-top: 2rem;
}

    .modalWelcome .actions button {
        margin: 0;
    }

.modalWelcome .text {
    padding: 3rem 0 3rem 4rem;
    user-select: none;
    cursor: auto;
}

    .modalWelcome .text h2 {
        font-weight: 700;
        font-size: 48px;
        line-height: 67px;
        color: var(--fl-black);
    }

        .modalWelcome .text h2 span {
            font-style: italic;
            font-weight: 700;
            font-size: 48px;
            line-height: 67px;
            color: var(--fl-lightBlue);
        }

.modalWelcome img {
    position: absolute;
    z-index: 10;
    right: -29px;
    top: -170px;
    width: 500px;
    user-select: none;
    cursor: auto;
}

@media (max-width: 1400px) {
    .modalWelcome img {
        width: 440px;
        top: -140px;
    }

    .modalWelcome .text {
        padding: 2rem 0 2rem 3rem;
    }
}

@media (max-width: 992px) {
    .modalWelcome img {
        width: 340px;
        top: -74px;
        right: 26px;
    }
}

@media (max-width: 768px) {
    .modalWelcome img {
        width: 250px;
        top: -180px;
        right: 26px;
    }
}

@media (max-width: 576px) {
    .modalWelcome img {
        width: 200px;
        top: -160px;
        right: 26px;
    }

    .modalWelcome .actions {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-top: 2rem;
    }

    .modalWelcome .text {
        padding: 3rem 2rem;
    }
}


/* --------------- PAGE INTERNAL HEADER --------------- */

.pageInternal__header {
    background-repeat: no-repeat;
    padding: 8rem 0 5rem 0;
    width: 100%;
    background-size: cover;
}

    .pageInternal__header.green {
        background-image: url(../img/greenBanner.svg);
    }

    .pageInternal__header.yellow {
        background-image: url(../img/bannerYellow.svg);
    }

    .pageInternal__header.lightBlue {
        background-image: url(../img/bannerLightBlue.svg);
    }

    .pageInternal__header.purple {
        background-image: url(../img/bannerPurple.svg);
    }

@media (min-width: 992px) {
    .pageInternal__header {
        background-position: bottom center;
    }
}

.pageInternal__title {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 1rem;
}

    .pageInternal__title img {
        width: 3.5rem;
    }

@media (max-width: 992px) {
    .pageInternal__title img {
        display: none;
    }
}

.pageInternal__title h1 {
    font-weight: 500;
    font-size: 3rem;
    color: #fff;
    letter-spacing: 0.4rem;
}

.pageInternal__title .imageClub {
    position: relative;
    margin-bottom: 32px;
}

    .pageInternal__title .imageClub div {
        width: 120px;
        height: 120px;
    }

    .pageInternal__title .imageClub img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        background-color: #80bf33;
    }

        .pageInternal__title .imageClub img.sponsor {
            position: absolute;
            width: 120px;
            height: auto;
            bottom: 10px;
            transform: rotate(-5deg);
        }

.pageInternal__header h5 {
    /*margin: 0.75rem 0 0 0;*/
    font-weight: 200;
    font-size: 1.5rem;
    letter-spacing: 0.25rem;
    color: #ffffff;
}

@media (max-width: 1200px) {
    .pageInternal__title {
        width: 75%;
    }
}

@media (max-width: 1200px) {
    .pageInternal__title h1 {
        font-size: 2.5rem;
    }

    .pendingTransfers__header h5 {
        font-size: 1.25rem;
    }
}

@media (max-width: 576px) {
    .pageInternal__title h1 {
        font-size: 2rem;
    }

    .pageInternal__header h5 {
        font-size: 1rem;
    }
}

/* --------------- BOOK VIEW HEADER --------------- */

.bookViewHeader {
    background-color: #fff;
}

    .bookViewHeader .container-fluid {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .bookViewHeader h2 {
        color: var(--fl-lightBlue);
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        /*max-width: 400px;*/
    }

    .bookViewHeader .btn-link {
        display: flex;
        align-items: center;
    }

.bookViewHeader__brands {
    display: flex;
    align-items: center;
    flex-flow: row nowrap;
    gap: 0 1rem;
}

.bookViewHeader__action-book {
    display: flex;
    flex-flow: row nowrap;
}

.bookViewHeader__brands a:first-child img {
    width: 7rem;
}

.bookViewHeader__brands a:last-child img {
    width: 11rem;
}

@media (max-width: 992px) {
    .bookViewHeader__brands {
        display: none;
    }
}

@media (max-width: 420px) {
    .bookViewHeader .btn.btn-link p {
        display: none;
    }
}

/* --------------- HEADER TEACHER SEARCHER --------------- */

.headerTeacher.searcher .nav-item .input-group button,
.headerTeacher.searcher .nav-item .input-group input {
    all: unset;
}

.headerTeacher.searcher .nav-item .input-group {
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 20rem;
    background: rgba(0, 143, 190, 0.1);
    padding: 0.6rem 1rem 0.4rem 1rem;
    border-radius: 0.4rem 0.4rem 0 0;
    border-bottom: 3px solid var(--fl-lightBlue);
    color: var(--fl-lightBlue);
}

    .headerTeacher.searcher .nav-item .input-group input {
        width: 100%;
    }

    .headerTeacher.searcher .nav-item .input-group button {
        cursor: pointer;
    }

    .headerTeacher.searcher .nav-item .input-group input::placeholder {
        color: var(--fl-lightBlue);
        font-style: italic;
    }

@media (max-width: 1600px) {
    .headerTeacher.searcher .nav-item .input-group {
        width: 14rem;
    }
}

@media (max-width: 1350px) {
    .headerTeacher.searcher .nav-item .input-group {
        width: 10rem;
    }

    .headerTeacher.searcher .navbar__menu-items {
        gap: 0 1.5rem;
    }
}

@media (max-width: 1200px) {
    .headerTeacher.searcher .nav-item .input-group {
        width: 20rem;
    }

    .headerTeacher.searcher .navbar__menu-items {
        display: contents;
    }
}

@media (max-width: 600px) {
    .headerTeacher.searcher .nav-item .input-group {
        width: 100%;
    }
}

header .navbar__logo-brands {
    display: flex;
    flex-flow: row nowrap;
    align-items: center
}

@media (min-width:1300px) and (max-width: 1400px) {
    header .navbar__logo-desafio {
        width: 150px;
    }
}

@media (min-width: 1200px) and (max-width: 1500px) {
    header ul.navbar-nav {
        gap: 1rem;
    }

    ul.navbar-nav .navbar__menu-items {
        gap: 1rem;
    }
}

@media (max-width: 420px) {
    header .navbar__logo-fleer {
        width: 150px;
    }

    header .navbar__logo-desafio {
        width: 150px;
    }

    header .navbar__logo-brands {
        gap: 0.5rem;
    }
}

@media (max-width: 350px) {

    header .navbar__logo-desafio {
        width: 120px;
    }
}

/* --------------- FORMS --------------- */

.form__bg-white {
    background-color: #fff;
    box-shadow: var(--fl-box-shadow);
    padding: 5rem;
    border-radius: 1rem;
    width: 34rem;
}

@media (max-width: 600px) {
    .form__bg-white {
        background-color: #fff;
        box-shadow: var(--fl-box-shadow);
        padding: 4rem 2rem;
        border-radius: 1rem;
        width: 100%;
    }
}

@media (max-width: 400px) {
    .form__bg-white {
        background-color: #fff;
        box-shadow: var(--fl-box-shadow);
        padding: 5rem 1rem;
        border-radius: 1rem;
    }
}

.form__header h2 {
    font-weight: 800;
    font-size: 2.25rem;
    line-height: 2.5rem;
    text-align: center;
    letter-spacing: 0.15rem;
    color: var(--fl-lightBlue);
    margin: 0 0 1rem 0;
}

.register__finalStep .form__header h2 {
    font-size: 2rem;
}

.form__header p {
    font-weight: 300;
    font-size: 1.25rem;
    line-height: 1.5rem;
    text-align: center;
    letter-spacing: 0.15rem;
    color: var(--fl-black);
    margin: 0 0 2.5rem 0;
}

.form__item {
    margin: 0 0 2.5rem 0;
}

    .form__item.hidden {
        margin: 0 0 2.5rem 0;
    }

form .form-label {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2rem;
    letter-spacing: 0.05rem;
    color: var(--fl-lightBlue);
    margin: 0 0 0.75rem 0.25rem;
}

    form .form-label.caption {
        font-weight: 400;
        font-size: 0.9rem;
        text-align: center;
        color: rgba(88, 88, 88, 0.75);
        margin: 0.5rem 0 0 0;
    }

        form .form-label.caption a {
            color: var(--fl-lightBlue);
        }

            form .form-label.caption a:hover {
                color: var(--fl-lightBlue-hover);
            }

form .form-control,
form .form-select {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    color: var(--fl-black);
}

.form-control:focus {
    border-color: var(--fl-lightBlue);
    box-shadow: 0 0 0 0.25rem rgba(0, 143, 190, 0.25);
}

form .form-check {
    margin: 0.5rem 0 0 0;
    color: var(--fl-black);
}

form .form-check-label {
    opacity: 0.75;
}

form .form-check-input:checked {
    background-color: var(--fl-lightBlue);
    border-color: var(--fl-lightBlue);
}

.form__item select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(../img/iconSelect.svg);
}

.form__access-rrss-hr {
    display: flex;
    flex-flow: nowrap row;
    align-items: center;
    gap: 1rem;
    margin: 3rem 0 2rem 0;
}

    .form__access-rrss-hr p {
        width: 100%;
        text-align: center;
        color: rgba(88, 88, 88, 0.75);
    }

    .form__access-rrss-hr .desafioLeer__hr {
        background-image: url(../img/hrsmall.svg);
    }

.form__access-rrss-actions {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 0 1rem;
}

@media (max-width: 420px) {
    .form__access-rrss-actions {
        flex-direction: column;
        gap: 1rem 0;
    }
}

.form__access-rrss-actions .btn-facebook,
.form__access-rrss-actions .btn-google {
    width: 100%;
}

/* --------------- STYLES --------------- */

body {
    font-family: "Bliss pro", "Open Sans", "sans-serif";
}

.desafioLeer__hr {
    background-image: url(../img/hrLarge.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 1rem;
    width: 100%;
}

@media (max-width: 600px) {
    .desafioLeer__hr {
        height: 1rem;
        width: 100%;
        background-image: url(../img/hrsmall.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
}

/* --------------- HEADER --------------- */

nav.navbar {
    padding: 0.5rem 0;
    position: fixed;
    z-index: 1000;
    width: 100%;
}

@media (max-width: 992px) {
    nav.navbar {
        padding: 1rem 0;
    }
}

.navbar__display {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

@media (max-width: 1200px) {
    .navbar__display {
        flex-direction: column;
    }
}

.navbar__logo-button {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

@media (max-width: 1200px) {
    .navbar__logo-button {
        justify-content: space-between;
    }
}

.navbar__logo-fleer {
    width: 175px;
    height: auto;
}

/*@media (max-width: 476px) {
.navbar__logo-fleer {
  display: none;
}
}

@media (min-width: 1200px) and (max-width: 1450px) {
.navbar__logo-fleer {
  display: none;
}
}*/

.navbar__logo-desafio {
    max-width: 200px;
    height: auto;
}

@media (max-width: 476px) {
    .navbar-brand {
        margin-right: 0;
    }
}

@media (max-width: 991px) {
    .navbar__menu {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 1200px) {
    .navbar__menu {
        display: flex;
        width: 100%;
        justify-content: flex-start;
    }
}

.navbar__menu-items {
    display: flex;
    flex-direction: row;
    gap: 3rem;
    align-items: center;
}

@media (max-width: 768px) {
    .navbar__menu-items {
        flex-direction: column;
        align-items: flex-start;
    }
}

.navbar__menu-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

.navbar__menu .nav-link {
    padding: 0;
    white-space: nowrap;
}

.nav-link.navbar__menu-item.search {
    color: var(--fl-lightBlue);
    font-size: 1rem;
    font-weight: 800;
    line-height: 19px;
}

.nav-link.navbar__menu-item.library {
    color: var(--fl-yellow);
    font-size: 1rem;
    font-weight: 800;
    line-height: 19px;
}

.nav-link.navbar__menu-item.resources {
    color: var(--fl-purple);
    font-size: 1rem;
    font-weight: 800;
    line-height: 19px;
}

.nav-link.navbar__menu-item.videos {
    color: var(--fl-red);
    font-size: 1rem;
    font-weight: 800;
    line-height: 19px;
    white-space: nowrap;
}

nav {
    background-color: #fff;
    box-shadow: var(--fl-box-shadow);
}

ul.navbar-nav {
    display: flex;
    gap: 2rem;
}

@media (max-width: 1200px) {
    ul.navbar-nav {
        padding: 2rem 0;
    }
}

@media (min-width: 1200px) {
    ul.navbar-nav {
        align-items: center;
    }
}

@media (max-width: 992px) {
    ul.navbar-nav {
        margin: 1rem 0 0.5rem 0;
    }
}

a.nav-link {
    font-size: 1.25rem;
    letter-spacing: 0.1rem;
    font-weight: 200;
}

@media (max-width: 1200px) {
    div#navbarNav {
        width: 100%;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }
}

button.navbar-toggler {
    color: var(--fl-lightBlue);
    border: 1px solid var(--fl-lightBlue);
}

.navbar-toggler-icon {
    background-image: url(../img/iconBurger.svg);
    width: 24px;
    margin: 0.2rem 0.1rem;
}

nav .dropdown-menu[data-bs-popper] {
    margin-left: -150px;
    margin-top: 20px;
}

.navbar__avatar {
    width: 60px;
}

nav li .nav-link.dropdown-toggle {
    color: var(--fl-lightBlue);
}

.navbar__trophy {
    cursor: pointer;
}

.navbar__trophy-icon {
    width: 3rem;
}

.navbar__trophy hr {
    margin: 2.5rem 0 0 0;
}

@media (min-width: 1200px) {
    .navbar__trophy hr {
        display: none;
    }
}

div.dropdown-menu.navbar__profile-menu.show {
    padding: 2rem 1.5rem;
    box-shadow: var(--fl-box-shadow);
    border: 0;
    width: 280px;
    border-radius: 10px;
    max-height: 75vh;
    overflow-y: auto;
}

.navbar__menu .dropdown-menu.navbar__profile-menu.show::-webkit-scrollbar {
    width: 10px;
    background-color: #fff;
    border-radius: 0 4px 4px 0;
    padding-left: 10px;
}

/*.navbar__menu .dropdown-menu.navbar__profile-menu.show:-webkit-scrollbar {
  background: #fff;
}
*/
.navbar__menu .dropdown-menu.navbar__profile-menu.show::-webkit-scrollbar-thumb {
    background-color: var(--fl-lightBlue);
    border-radius: 10px;
    border: 3px solid #FFFFFF;
}

.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0;
    content: "";
    border-top: 0.75rem solid;
    border-right: 0.75rem solid transparent;
    border-bottom: 0;
    border-left: 0.75rem solid transparent;
    border-radius: 50px;
}

@media (max-width: 1200px) {
    .navbar__menu a.nav-link.dropdown-toggle.navbar__profile {
        display: none;
    }
}

@media (max-width: 1200px) {
    .dropdown-menu.navbar__profile-menu {
        display: block;
    }
}

.navbar__profile-select {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

    .navbar__profile-select .btn-link,
    .navbar__profile-select .btn-link:hover {
        padding: 0;
        color: var(--fl-lightBlue);
        text-decoration: none;
        font-size: 0.9rem;
        line-height: 19px;
        font-weight: 400;
    }

.navbar__profile-select-avatars {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.navbar__profile-select-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--fl-black);
    cursor: pointer;
}

    .navbar__profile-select-avatar p {
        opacity: 0.75;
    }

    .navbar__profile-select-avatar.active p {
        color: #000;
        opacity: 1;
    }

    .navbar__profile-select-avatar.active .rounded-circle {
        background-color: #008fbe;
    }

    .navbar__profile-select-avatar.active img {
        padding: 2px;
    }

.navbar__profile-options {
    color: var(--fl-black);
}

@media (max-width: 1200px) {
    .navbar__profile-options {
        margin-top: 2rem;
    }
}

.navbar__profile-options-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

@media (max-width: 1200px) {
    .navbar__profile-options-items {
        margin-bottom: 2rem;
    }
}

.navbar__dropdown-title {
    color: var(--fl-lightBlue);
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 24px;
}

.navbar__profile-options .navbar__dropdown-title {
    margin-bottom: 1rem;
}

.navbar__profile-options-item a:hover {
    color: var(--fl-black);
}

.navbar__profile-logout {
    margin-top: 1rem;
    color: var(--fl-black);
}

@media (max-width: 1200px) {
    .navbar__profile-logout {
        margin-top: 2rem;
    }
}

.navbar__profil-logout-btn {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    align-items: center;
}

.navbar__profile-logout a:hover {
    color: var(--fl-black);
}

header .modal-content {
    cursor: auto;
}

header .modal-header {
    border: 0;
}

button.btn-close {
    background: url(../img/closeIcon.svg) center/1em auto no-repeat;
    opacity: 1;
}

.navbar__modal-text {
    flex-direction: column;
}

header .modal-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 0 2rem 0;
}

.navbar__modal-text h3 {
    color: var(--fl-lightBlue);
}

.navbar__modal-text p {
    font-style: italic;
    color: var(--fl-black);
}

header .dropdown-menu {
    border: 0;
}

/* --------------- HEADER HOME --------------- */

@media (min-width: 1200px) {
    .navbarHome .navbar {
        padding: 0;
    }
}

.navbarHome .navbar__logo-button {
    width: auto;
}

@media (max-width: 1200px) {
    .navbarHome .navbar__logo-button {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
}

/*@media (max-width: 1400px) {
.navbarHome .navbar__logo-fleer {
  display: none;
}
}*/

@media (max-width: 1200px) {
    /*.navbarHome .navbar-brand {
  margin-right: 0;
}*/

    .navbarHome ul.navbar-nav {
        padding: 0.5rem 0;
        gap: 0rem;
    }
}

.navbarHome a.nav-link {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

    .navbarHome a.nav-link.active {
        display: flex;
        align-content: flex-end;
        align-items: flex-end;
    }

.navbarHome .navbar__menu-items {
    margin: 0;
}

.navbarHome .navbarHome__nav-active-img {
    visibility: hidden;
}

.navbarHome a.nav-link.active .navbarHome__nav-active-img {
    visibility: visible;
}

.navbarHome .navbar__menu .navbar__menu-items .nav-link {
    font-weight: 700;
    font-size: 1rem;
    color: var(--fl-black);
}

    .navbarHome .navbar__menu .navbar__menu-items .nav-link:hover {
        filter: brightness(1.25);
    }

    .navbarHome .navbar__menu .navbar__menu-items .nav-link.active {
        color: var(--fl-lightBlue);
        font-weight: 900;
        filter: brightness(1);
    }

.navbarHome .nav-link.active img:hover {
    filter: brightness(1.25);
    cursor: pointer;
}

.navbarHome__nav-active-img {
    width: 48px;
}

.navbarHome .navbar__menu-items {
    gap: 1rem;
}

.navbarHome .navbarHome__actions {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
}

.navbarHome .btn-primary,
.navbarHome .btn-secondary {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0.75rem 1.75rem;
    gap: 1rem;
    margin: 1.5rem 0;
    font-size: 1rem;
}

@media (max-width: 768px) {

    .navbarHome .navbarHome__actions,
    .navbarHome .btn-primary,
    .navbarHome .btn-secondary {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .navbarHome .navbarHome__actions {
        flex-direction: column;
        gap: 0;
        margin: 1rem 0 0 0;
    }

    .navbarHome .btn-primary,
    .navbarHome .btn-secondary {
        margin: 1rem 0;
    }
}

/* --------------- HEADER TEACHER --------------- */

.navbar__menu-item.resource .dropdown-toggle::after {
    display: none;
}

.navbar__menu-item.resource .nav-link.dropdown-toggle {
    color: var(--fl-purple);
    font-size: 1rem;
    font-weight: 800;
    line-height: 19px;
    display: flex;
    gap: 0 0.75rem;
    align-items: center;
}

.navbar__menu-item.resource .dropdown-menu[data-bs-popper] {
    margin-left: -12px;
    margin-top: 40px;
}

.navbar__menu-item.resource .dropdown-menu.navbar__profile-menu.show {
    padding: 2rem;
    width: max-content;
}

.navbar__menu-item.resource .navbar__profile-options,
.navbar__menu-item.resource .navbar__profile-options-items {
    margin: 0;
}

.navbar__menu-item.resource .navbar__profile-options-items {
    gap: 1.75rem 0;
}

.navbar__menu-item.resource .navbar__profile-options-item {
    color: var(--fl-purple);
    font-weight: 600;
    font-size: 1rem;
    line-height: 19px;
    display: flex;
    align-items: center;
    text-transform: uppercase;
}

    .navbar__menu-item.resource .navbar__profile-options-item i {
        display: flex;
        justify-content: flex-end;
        width: 1rem;
    }

.navbar__menu-item.resource .navbar__profile-options-items a {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
}

    .navbar__menu-item.resource .navbar__profile-options-items a:hover {
        color: var(--fl-purple);
    }

@media (max-width: 1200px) {
    .navbar__menu-item.resource .navbar__profile-options-items {
        flex-direction: row;
        gap: 0 3rem;
    }

        .navbar__menu-item.resource .navbar__profile-options-items i {
            font-size: 2em;
        }

        .navbar__menu-item.resource .navbar__profile-options-items a {
            gap: 0 0.75rem;
            text-transform: uppercase;
            font-size: 1rem;
            font-weight: 800;
            white-space: nowrap;
            line-height: 19px;
        }
}

@media (max-width: 1100px) {
    .headerTeacher .navbar__menu-items {
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar__menu-item.resource .navbar__profile-options-items {
        flex-direction: column;
        gap: 3rem 0;
    }

        .navbar__menu-item.resource .navbar__profile-options-items i {
            justify-content: flex-start;
        }

        .navbar__menu-item.resource .navbar__profile-options-items a {
            gap: 0 1rem;
        }
}

/* --------------- SWIPER SLIDER --------------- */

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: transparent;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

    .swiper-slide img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
    }

.swiper-button-prev {
    width: 100px;
    height: auto;
    left: 0;
    color: transparent;
    opacity: 1;
    outline: 0;
}

.swiper-button-next {
    width: 100px;
    height: auto;
    right: 0;
    color: transparent;
    opacity: 1;
    outline: 0;
}

@media (max-width: 600px) {

    .swiper-button-prev,
    .swiper-button-next {
        width: 75px;
    }
}

.swiper-button-prev:after {
    background-image: url(../img/sliderLeftCircle.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: transparent;
    width: 100px;
    height: auto;
}

.swiper-button-next:after {
    background-image: url(../img/sliderRightCircle.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: transparent;
    width: 100px;
    height: auto;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    opacity: 1;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: 0;
}

/* --------------- SLIDER HEADER --------------- */

.slider__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    user-select: none;
}

@media (max-width: 768px) {
    .slider__header {
        display: flex;
        flex-direction: column;
        gap: 0.5rem 0;
    }
}

.slider__header h4 {
    font-weight: 500;
    font-size: 2rem;
    line-height: 2.5rem;
    color: var(--fl-lightBlue);
}

.slider__header p {
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 2rem;
    color: var(--fl-lightBlue);
    display: flex;
    flex-direction: row;
    align-items: baseline;
    cursor: pointer;
}

    .slider__header p:hover {
        filter: brightness(1.05);
    }

/* --------------- BIBLIOTECA - ALUMNO (MAIN BANNER) --------------- */

.suggestedBook__bg {
    height: 750px;
    margin: 0;
}

@media (max-width: 992px) {
    .suggestedBook__bg {
        height: 800px;
    }
}

@media (max-width: 768px) {
    .suggestedBook__bg {
        height: 1250px;
    }
}

.suggestedBook__bg.yellow {
    background-image: url(../img/pillsBgYellow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
}

.suggestedBook__bg.green {
    background-image: url(../img/pillsBgGreen.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
}

.suggestedBook__bg.red {
    background-image: url(../img/pillsBgRed.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
}

.suggestedBook__bg.purple {
    background-image: url(../img/pillsBgPurple.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
}

.suggestedBook__body {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    /*padding: 9rem 0 0 0;*/
    padding: 8rem 0;
}

/*
@media (max-width: 992px) {
.suggestedBook__body {
  padding: 8rem 0;
  justify-content: unset;
}
}

@media (max-width: 366px) {
.suggestedBook__body ul#pills-tab {
  display: flex;
  justify-content: space-around;
  gap: 0;
}
}
*/

.suggestedBook__bg.lightBlue {
    background-image: url(../img/bgBookDetail.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    margin: auto !important;
    margin-bottom: -10px !important;
}

.nav-pills .nav-link.suggestedBook__btn-pills.active {
    background-image: url(../img/btnPills.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: transparent;
    min-width: 136px;
    font-size: 1.25rem;
    font-weight: 900;
    color: #fff;
}

@media (max-width: 768px) {
    .nav-pills .nav-link.suggestedBook__btn-pills.active {
        background-size: unset;
        font-size: 1.1rem;
        min-width: 100px;
    }
}

.nav-pills .nav-link.suggestedBook__btn-pills {
    min-width: 136px;
    font-size: 1.25rem;
    font-weight: 400;
    color: #fff;
}

@media (max-width: 768px) {
    .nav-pills .nav-link.suggestedBook__btn-pills {
        background-size: unset;
        font-size: 1.1rem;
        min-width: 100px;
    }
}

.suggestedBook__body .nav-pills {
    gap: 4rem;
}

@media (max-width: 992px) {
    .suggestedBook__body .nav-pills {
        gap: 3rem;
    }
}

@media (max-width: 768px) {
    .suggestedBook__body .nav-pills {
        gap: 1rem;
    }
}

.suggestedBook__body .desafioLeer__hr {
    margin: 0 0 3rem 0;
    background-image: url(../img/hrmedium.svg);
}

@media (max-width: 600px) {
    .suggestedBook__body .desafioLeer__hr {
        background-image: url(../img/hrsmall.svg);
    }
}

.suggestedBook__img-book {
    display: flex;
    justify-content: center;
    align-items: center;
}

.suggestedBook__img-book-width {
    width: 100%;
    height: auto;
}

@media (max-width: 420px) {
    .suggestedBook__img-book-width {
        width: 100%;
        height: auto;
        max-height: 436px;
    }
}

.suggestedBook__info {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
}

@media (max-width: 1200px) {
    .suggestedBook__info {
        padding: 0 0 0 1rem;
    }
}

@media (max-width: 768px) {
    .suggestedBook__info {
        margin: 2rem 0 0 0;
        padding: 0;
    }
}

.suggestedBook__info-content h1 {
    margin: 0 0 0.25rem 0;
    font-weight: 500;
    font-size: 2.25rem;
    line-height: 43px;
    color: #ffffff;
}

@media (max-width: 768px) {
    .suggestedBook__info-content h1 {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }
}

.suggestedBook__editorial {
    width: 170px;
    height: auto;
    max-height: 100px;
    display: flex;
    margin: 0 0 1rem 0;
    align-items: center;
}

suggestedBook__editorial img {
    object-fit: contain;
}

.suggestedBook__info-caption {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    font-weight: 200;
    font-size: 1.5rem;
    line-height: 24px;
    color: #ffffff;
    font-style: italic;
}

.suggestedBook__info-synopsis {
    margin: 0 0 2rem 0;
    font-weight: 200;
    font-size: 1.5rem;
    line-height: 150%;
    letter-spacing: 0.02em;
    color: #ffffff;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (max-width: 767px) {
    .suggestedBook__info-synopsis {
        margin: 0 0 0.5rem 0;
    }
}

.suggestedBook__info-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 2rem 0;
}

@media (max-width: 992px) {
    .suggestedBook__info-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
        margin-top: 1rem;
    }
}

.suggestedBook__info-footer-data {
    display: flex;
    flex-direction: row;
    gap: 0 3rem;
}

@media (max-width: 1200px) {
    .suggestedBook__info-footer-data {
        gap: 0 2rem;
    }
}

@media (max-width: 992px) {
    .suggestedBook__info-footer-data {
        flex-direction: row;
        gap: 0 2rem;
    }
}

@media (max-width: 400px) {
    .suggestedBook__info-footer-data {
        flex-direction: column;
        gap: 1rem 0;
    }
}

.suggestedBook__info-time {
    font-weight: 500;
    font-size: 1rem;
    line-height: 175%;
    letter-spacing: 0.02em;
    color: #ffffff;
}

.suggestedBook__info-available {
    font-weight: 500;
    font-size: 1rem;
    line-height: 175%;
    letter-spacing: 0.02em;
    color: #ffffff;
}

@media (max-width: 400px) {
    .suggestedBook__info button {
        width: 100%;
    }
}

.suggestedBook__actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 0 1.5rem;
}

    .suggestedBook__actions a {
        font-size: 1rem;
    }

@media (max-width: 992px) {
    .suggestedBook__actions {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem 0;
    }

        .suggestedBook__actions button {
            width: 100%;
        }
}

.suggestedBook__return {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

    .suggestedBook__return p {
        color: white;
    }

/* --------------- BIBLIOTECA - ALUMNO (PROFILE INFO) --------------- */

.profileInfo {
    margin: 2rem 0;
    display: flex;
    align-items: center;
}

@media (max-width: 992px) {
    .profileInfo__welcome {
        display: flex;
        justify-content: center;
        gap: 1rem;
    }
}

.profileInfo__welcome-statistics {
    display: flex;
    flex-direction: column;
    gap: 3rem 0;
}

@media (max-width: 992px) {
    .profileInfo__welcome-statistics {
        align-items: center;
    }
}

.profileInfo__welcome-belt {
    background-image: url(../img/profileInfoBGBelt.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
}

.profileInfo__welcome-belt-img {
    width: 90px;
    padding: 0.5rem;
}

.profileInfo__welcome-title h4 {
    font-weight: 500;
    font-size: 3rem;
    line-height: 57px;
    color: var(--fl-black);
}

    .profileInfo__welcome-title h4 span {
        color: var(--fl-lightBlue);
    }

.profileInfo__welcome-title h6 {
    font-weight: 200;
    font-size: 1.5rem;
    line-height: 38px;
    color: var(--fl-black);
}

    .profileInfo__welcome-title h6 span {
        color: var(--fl-lightBlue);
    }

@media (max-width: 400px) {
    .profileInfo__welcome-title h6 span {
        display: block;
    }
}

@media (max-width: 576px) {
    .profileInfo__welcome-title {
        text-align: center;
    }
}

.profileInfo__statistics {
    display: flex;
    flex-direction: row;
    gap: 0 4rem;
}

@media (max-width: 1600px) {
    .profileInfo__statistics {
        gap: 0 2rem;
    }
}

@media (max-width: 1500px) {
    .profileInfo__statistics {
        gap: 0 1rem;
    }
}

@media (max-width: 600px) {
    .profileInfo__statistics {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 420px) {
    .profileInfo__statistics {
        gap: 2rem 1rem;
    }
}

.profileInfo__statistics-read {
    background-image: url(../img/circleStatisticsOutline.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 180px;
    height: 180px;
}

.profileInfo__statistics-hours {
    background-image: url(../img/circleStatisticsOutline.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 180px;
    height: 180px;
}

.profileInfo__statistics-points {
    background-image: url(../img/circleStatistics.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 180px;
    height: 180px;
}

.profileInfo__statistics h4,
.profileInfo__statistics h6 {
    color: var(--fl-lightBlue);
}

.profileInfo__statistics h4 {
    font-family: "Bliss Pro";
    font-style: normal;
    font-weight: 900;
    font-size: 3rem;
    line-height: 76px;
    text-align: center;
}

.profileInfo__statistics-points h4,
.profileInfo__statistics-points h6 {
    color: #fff;
}

.profileInfo__position {
    display: flex;
    flex-direction: row;
    align-items: center;
}

@media (max-width: 1600px) {
    .profileInfo__position {
        gap: 0 2rem;
        justify-content: center;
    }
}

.profileInfo__position .col-2 {
    display: flex;
    justify-content: flex-end;
    position: relative;
    left: 0rem;
}

@media (max-width: 1600px) {
    .profileInfo__position .col-2 {
        left: 1rem;
    }
}

@media (max-width: 1400px) {
    .profileInfo__position .col-2 {
        position: static;
    }
}

.profileInfo__position-bg-star {
    background-image: url(../img/libraryStar.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 400px;
    width: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.profileInfo__position-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profileInfo__position-user {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.profileInfo__position-content h6,
.profileInfo__position-number {
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 2rem;
    text-align: center;
    color: var(--fl-lightBlue);
}

    .profileInfo__position-number h4 {
        font-size: 5rem;
    }

    .profileInfo__position-number span {
        font-size: 4rem;
        position: relative;
        bottom: 1rem;
    }

.profileInfo__position-quote {
    width: 48px;
}

.profileInfo__position-content p {
    font-weight: 200;
    font-size: 1.5rem;
    line-height: 2rem;
    text-align: center;
    color: var(--fl-lightBlue);
    font-style: italic;
}

/* --------------- BIBLIOTECA - ALUMNO (NOTIFICATIONS CARDS) --------------- */

.notificationsCards {
    margin: 5rem 0 0 0;
}

.notificationsCards__grid {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 2rem 4rem;
    padding: 5rem 2rem 5rem 2rem;
}

@media (max-width: 1400px) {
    .notificationsCards__grid {
        gap: 2rem 4rem;
    }
}

@media (max-width: 1200px) {
    .notificationsCards__grid {
        padding: 5rem 0rem;
        gap: 2rem 1rem;
    }
}

@media (max-width: 992px) {
    .notificationsCards__grid {
        justify-content: center;
        padding: 5rem 0rem;
        gap: 2rem 0rem;
    }
}

.notificationsCards__img {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 576px) {
    .notificationsCards__img {
        display: none;
    }
}

.notificationsCards__img-width {
    width: 150px;
}

.notificationsCards__item {
    display: flex;
    flex-direction: row;
    border: 1px solid #eee;
    border-radius: 1rem;
    padding: 2rem;
}

    .notificationsCards__item h3 {
        font-weight: 400;
        font-size: 1.5rem;
        line-height: 2rem;
        color: var(--fl-black);
    }

    .notificationsCards__item p {
        font-weight: 300;
        font-size: 1rem;
        line-height: 1.5rem;
        color: var(--fl-black);
        margin: 0 0 1rem 0;
    }

@media (max-width: 600px) {
    .notificationsCards__item p {
        margin: 0 0 2rem 0;
    }
}

.notificationsCards__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 0 0 1rem;
}

@media (max-width: 576px) {
    .notificationsCards__body {
        padding: 0;
    }
}

.notificationsCards__content h3 {
    margin: 0 0 0.75rem 0;
}

    .notificationsCards__content h3 span {
        font-style: italic;
        font-weight: 700;
        font-size: 1.5rem;
        line-height: 1rem;
        color: var(--fl-lightBlue);
    }

.notificationsCards__content.gift h3 {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1rem;
    color: var(--fl-lightBlue);
    height: 2.5rem;
    margin: 1rem 0 0 0;
}

.notificationsCards__content.gift span {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--fl-lightBlue);
}

.notificationsCards__footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

/* --------------- BIBLIOTECA - ALUMNO (CHALLENGES) --------------- */

.challenge__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.challenge__item {
    box-shadow: var(--fl-box-shadow);
    width: 100%;
    background-color: #fff;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 1.5rem;
    margin: 2rem 1rem 3rem 1rem;
    cursor: pointer;
    position: relative;
    height: 16rem;
}

    .challenge__item:hover {
        filter: brightness(1.05);
    }

@media (max-width: 600px) {
    .challenge__item {
        justify-content: space-around;
        padding: 3rem 1rem;
        height: 350px;
        margin-left: 3rem;
        margin-right: 3rem;
    }
}

.swiper-slide .challenge__illustration-size {
    width: 100px;
    height: 150px;
    margin: 0 0 0.5rem;
    object-fit: contain;
}

@media (max-width: 600px) {
    .swiper-slide .challenge__illustration-size {
        width: 130px;
        height: 170px;
        margin: -1rem 0 1.5rem;
    }
}

.challenge__item h6 {
    text-align: center;
    margin: 1rem 0 0 0;
    font-weight: 500;
    font-size: 1.1rem;
    line-height: 1.5rem;
    text-align: center;
    color: var(--fl-lightBlue);
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (max-width: 600px) {
    .challenge__item h6 {
        font-size: 1.5rem;
        line-height: 1.75rem;
    }
}

.challenge__lock {
    position: absolute;
    width: 100%;
    margin: -1.25rem 0;
    padding: 1.25rem 1.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

@media (max-width: 600px) {
    .challenge__lock {
        justify-content: space-around;
        padding: 3rem 1rem;
        height: 350px;
        margin-left: 3rem;
        margin-right: 3rem;
    }
}

.challenge__lock.green {
    background-color: rgba(118, 188, 33, 0.95);
}

.challenge__lock.red {
    background-color: rgba(213, 0, 55, 0.95);
}

.challenge__lock.yellow {
    background-color: rgba(255, 183, 27, 0.95);
}

.challenge__lock.blue {
    background-color: rgba(0, 143, 190, 0.95);
}

.challenge__lock.gray {
    background-color: rgba(175, 175, 175, 0.95);
}

.challenge__lock .challenge__illustration-size {
    opacity: 0.9;
}

.challenge__lock h6 {
    text-align: center;
    margin: 1rem 0 0 0;
    font-weight: 500;
    font-size: 1.1rem;
    line-height: 1.5rem;
    text-align: center;
    color: #fff;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (max-width: 600px) {
    .challenge__lock h6 {
        font-size: 1.5rem;
        line-height: 1.75rem;
    }
}

.challenge__slider {
    margin: 0 0 2rem 0;
}

    .challenge__slider .desafioLeer__hr {
        margin: 3.5rem 0 0 0;
    }

.challenge__item.wobble-hor-bottom {
    -webkit-animation: wobble-hor-bottom 3s infinite both;
    animation: wobble-hor-bottom 3s infinite both;
    cursor: pointer;
    height: 100%;
}

    .challenge__item.wobble-hor-bottom .challenge__lock {
        justify-content: center;
        height: 16rem;
    }

        .challenge__item.wobble-hor-bottom .challenge__lock h6 {
            font-weight: 200;
            font-size: 32px;
            text-align: center;
            margin: 0;
            display: block;
            line-height: 120%;
        }

            .challenge__item.wobble-hor-bottom .challenge__lock h6 span {
                font-weight: 900;
                font-size: 36px;
                text-align: center;
            }

/* ----------------------------------------------
* Generated by Animista on 2023-3-15 14:26:38
* Licensed under FreeBSD License.
* See http://animista.net/license for more info. 
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation wobble-hor-bottom
* ----------------------------------------
*/
@keyframes wobble-hor-bottom {

    0%, 100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }

    7.5% {
        -webkit-transform: translateX(-10px) rotate(-3deg);
        transform: translateX(-10px) rotate(-3deg);
    }

    15% {
        -webkit-transform: translateX(10px) rotate(3deg);
        transform: translateX(10px) rotate(3deg);
    }

    22.5% {
        -webkit-transform: translateX(-10px) rotate(-2.6deg);
        transform: translateX(-10px) rotate(-2.6deg);
    }

    30% {
        -webkit-transform: translateX(6px) rotate(2.0deg);
        transform: translateX(6px) rotate(2.0deg);
    }

    37.5% {
        -webkit-transform: translateX(-3px) rotate(-0.8deg);
        transform: translateX(-3px) rotate(-0.8deg);
    }

    50% {
        -webkit-transform: translateX(0) rotate(0deg);
        transform: translateX(0) rotate(0deg);
    }
}

/* --------------- DESAFIOS - ALUMNO --------------- */

.challenge__list {
    display: flex;
    flex-direction: row;
    gap: 0 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

    .challenge__list .challenge__item {
        width: 11rem;
        min-height: 15rem;
    }

    .challenge__list .challenge__illustration-size {
        margin-bottom: 0.5rem;
        width: 100px;
        height: 150px;
        object-fit: contain;
    }

/* --------------- BIBLIOTECA - ALUMNO (NOTIFICATIONS CARDS) --------------- */

.libraryFilters__bg {
    background-image: url(../img/libraryFilters__bg.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 100%;
    height: fit-content;
}

.libraryBook__item {
    box-shadow: var(--fl-box-shadow);
    width: 100%;
    background-color: #fff;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 0.75rem;
    margin: 2rem 1.5rem 3rem 1.5rem;
    cursor: pointer;
    position: relative;
}

    .libraryBook__item:hover {
        filter: brightness(1.05);
    }

@media (max-width: 600px) {
    .libraryBook__item {
        justify-content: space-around;
        padding: 3rem 1rem;
        height: 350px;
        margin-left: 3rem;
        margin-right: 3rem;
    }
}

/* --------------- CREATE CLUB --------------- */

.form__bg-illustration {
    background-image: url(../img/register__bg.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: fit-content;
    padding: 10rem 0 7.5rem 0;
}

@media (max-width: 600px) {
    .form__bg-illustration {
        background-size: cover;
        min-height: 75vh;
    }
}

.mySwiper__createClub-container {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    position: relative;
}

    .mySwiper__createClub-container .swiper-wrapper {
        align-items: center;
    }

    .mySwiper__createClub-container .swiper-button-prev {
        left: -75px;
    }

    .mySwiper__createClub-container .swiper-button-next {
        right: -75px;
    }

@media (max-width: 600px) {
    .mySwiper__createClub-container .swiper-button-next {
        right: -40px;
    }
}

@media (max-width: 600px) {
    .mySwiper__createClub-container .swiper-button-prev {
        left: -40px;
    }
}

@media (max-width: 400px) {
    .mySwiper__createClub-container .swiper-button-next {
        right: -30px;
    }
}

@media (max-width: 400px) {
    .mySwiper__createClub-container .swiper-button-prev {
        left: -30px;
    }
}

.mySwiper__createClub-container .swiper-button-prev:after {
    background-image: url(../img/sliderLeft.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: transparent;
    width: 1rem;
    height: auto;
}

.mySwiper__createClub-container .swiper-button-next:after {
    background-image: url(../img/sliderRight.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: transparent;
    width: 1rem;
    height: auto;
}

.mySwiper__createClub-box {
    height: 100%;
}

.mySwiper__createClub .swiper-slide .mySwiper__createClub-box img {
    width: 5rem;
    height: 5rem;
    object-fit: contain;
    filter: grayscale(100%);
}

@media (max-width: 400px) {
    .mySwiper__createClub .swiper-slide .mySwiper__createClub-box img {
        width: 4rem;
        height: 4rem;
    }
}

.mySwiper__createClub .swiper-slide-active .mySwiper__createClub-box img {
    width: 6rem;
    height: 6rem;
    object-fit: contain;
    filter: grayscale(0%);
}

@media (max-width: 400px) {
    .mySwiper__createClub .swiper-slide-active .mySwiper__createClub-box img {
        width: 5rem;
        height: 5rem;
    }
}

.mySwiper__createClub-overlay {
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 100%;
    background: radial-gradient(100% 996.14% at 0% 50%, #ffffff 0%, rgba(255, 255, 255, 0) 33.33%, rgba(255, 255, 255, 0) 66.67%, #ffffff 100%);
}

/* --------------- CREATE CLUB CONFIRMED --------------- */

.creationClubConfirmated__box {
    background: rgba(0, 161, 214, 0.05);
    border-radius: 10px;
    padding: 0.75rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0 0 2.5rem 0;
}

    .creationClubConfirmated__box p {
        font-weight: 400;
        font-size: 1rem;
        line-height: 1.25rem;
        text-align: center;
        letter-spacing: 0.025rem;
        color: var(--fl-black);
    }

    .creationClubConfirmated__box h3 {
        font-weight: 900;
        font-size: 2rem;
        line-height: 2.25rem;
        text-align: center;
        letter-spacing: 0.025rem;
        color: var(--fl-lightBlue);
    }

.creationClubConfirmated form {
    margin: 2rem 0 0 0;
}

.creationClubConfirmated .form__item label.form-label {
    margin-top: 1rem;
}

.creationClubConfirmated .desafioLeer__hr {
    margin: 2.5rem 0;
    background-image: url(../img/hrmedium.svg);
}

@media (max-width: 600px) {
    .creationClubConfirmated .desafioLeer__hr {
        background-image: url(../img/hrsmall.svg);
    }
}

.creationClubConfirmated__bottom p {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    color: var(--fl-black);
    margin: 0 0 1.5rem 0;
    opacity: 0.75;
}

.creationClubConfirmated__bottom .btn.btn-secondary {
    margin-bottom: 2.5rem;
}

.creationClubConfirmated__share {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    width: 100%;
}

@media (max-width: 450px) {
    .creationClubConfirmated__share {
        flex-direction: column;
        gap: 1rem;
    }
}

.creationClubConfirmated i.fa-brands.fa-whatsapp {
    color: #fff;
}

/* --------------- TEACHER PROFILE --------------- */

.teacherProfile {
    padding: 0 0 10rem 0;
}

.pageInternal__content {
    display: flex;
    flex-direction: row;
    gap: 0 1.5rem;
}

    .pageInternal__content img {
        width: 6rem;
    }

@media (max-width: 340px) {
    .pageInternal__content img {
        width: 3rem;
    }
}

.pageInternal__header.purple .pageInternal__title {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
}

    .pageInternal__header.purple .pageInternal__title h5 {
        margin: 0;
    }

.teacherProfile__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 1rem 0;
}

@media (max-width: 1200px) {
    .teacherProfile__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 3rem;
        margin: 0 0 2rem 0;
    }
}

.teacherProfile__header-user {
    display: flex;
    flex-direction: column;
}

.teacherProfile .desafioLeer__hr {
    background-size: auto;
}

.teacherProfile__header-user h1 {
    font-weight: 500;
    font-size: 3rem;
    line-height: 3rem;
    color: var(--fl-lightBlue);
}

.teacherProfile__header-user h2 {
    font-weight: 400;
    font-size: 1.75rem;
    line-height: auto;
    color: var(--fl-black);
}

.teacherProfile__header-user a {
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.25rem;
    color: var(--fl-lightBlue);
    margin: 0.5rem 0 0 0;
}

    .teacherProfile__header-user a:hover {
        color: var(--fl-lightBlue-hover);
    }

.teacherProfile__header-actions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1.5rem;
    margin: 6rem 0 0 0;
}

@media (min-width: 992px) {
    .teacherProfile__header-actions button {
        flex-direction: column;
        width: 22rem;
        height: 4.25rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
    }
}

@media (max-width: 500px) {
    .teacherProfile__header-actions button i {
        display: none;
    }
}

@media (max-width: 768px) {
    .teacherProfile__header-actions {
        flex-direction: column;
        width: 100%;
    }
}

.teacherProfile__content {
    display: flex;
    flex-flow: row wrap;
    gap: 3rem;
    margin: 3rem 0;
    padding: 0 9rem;
}

@media (max-width: 1400px) {
    .teacherProfile__content {
        padding: 0;
    }
}

@media (max-width: 600px) {
    .teacherProfile__content {
        gap: 2rem;
    }
}

.teacherProfile__club {
    width: 30rem;
    background-color: #f9f9f9;
    border-radius: 0.75rem;
    outline: 2px solid transparent;
    cursor: pointer;
    transition: outline 0.1s linear;
}

.btn.btn-outline-transparent {
    background: none;
    padding: 1.25rem 2rem;
    color: var(--fl-lightBlue);
    border-radius: 2rem;
    border: 2px solid var(--fl-lightBlue);
    box-shadow: var(--fl-box-shadow);
    text-transform: uppercase;
    font-weight: 500;
}

    .btn.btn-outline-transparent:active {
        transform: scale(0.99);
    }

@media (min-width: 992px) and (max-width: 1200px) {
    .teacherProfile__club {
        width: 28rem;
    }

    .teacherProfile__content {
        justify-content: space-between;
        gap: 2rem 0;
    }
}

@media (max-width: 992px) {
    .teacherProfile__content {
        justify-content: center;
    }
}

@media (max-width: 500px) {
    a .teacherProfile__club {
        width: 100%;
    }
}

.teacherProfile__club:hover {
    outline: 0.2rem solid var(--fl-lightBlue);
}

.teacherProfile__club-body {
    padding: 2rem 2rem 7rem 2rem;
}

.teacherProfile__club-info {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 1.5rem;
    margin: 0 0 1.5rem 0;
}

.teacherProfile__club-avatar {
    width: 5rem;
    height: 5rem;
}

.teacherProfile__club-name h3 {
    font-weight: 700;
    font-size: 1.75rem;
    text-align: left;
    color: var(--fl-lightBlue);
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.teacherProfile__club-name p {
    font-weight: 300;
    font-size: 1rem;
    line-height: 19px;
    color: var(--fl-black);
}

.teacherProfile__club-statistics {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

@media (max-width: 400px) {
    .teacherProfile__club-statistics {
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
    }
}

.teacherProfile__club-statistics-minutes,
.teacherProfile__club-statistics-books,
.teacherProfile__club-statistics-points {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    text-align: center;
}

    .teacherProfile__club-statistics-minutes h4,
    .teacherProfile__club-statistics-books h4,
    .teacherProfile__club-statistics-points h4 {
        font-weight: 700;
        font-size: 1.5rem;
        text-align: center;
        color: var(--fl-lightBlue);
    }

    .teacherProfile__club-statistics-minutes p,
    .teacherProfile__club-statistics-books p,
    .teacherProfile__club-statistics-points p {
        font-weight: 300;
        font-size: 16px;
        line-height: 19px;
        color: var(--fl-black);
    }

.teacherProfile__club-icons {
    display: flex;
    flex-direction: column;
    color: var(--fl-lightBlue);
    padding: 1.5rem 2rem 1.5rem 2rem;
    justify-content: space-between;
    margin: -5rem 2rem 0 2rem;
    gap: 24px;
}

@media (max-width: 400px) {
    .teacherProfile__club-icons {
        padding: 1.5rem 0 1.5rem 0;
    }
}

.teacherProfile__club-icons i.fa-brands.fa-whatsapp {
    color: var(--fl-lightBlue);
}

.teacherProfile__club-icons .btn:first-child:hover {
    border: 2px solid var(--fl-lightBlue);
}

.custom-tooltip {
    --bs-tooltip-bg: var(--fl-lightBlue);
    --bs-tooltip-color: #fff;
    --bs-tooltip-padding-x: 1rem;
    --bs-tooltip-padding-y: 0.75rem;
    --bs-tooltip-opacity: 1;
}

@media (max-width: 600px) {
    .custom-tooltip {
        display: none;
    }
}

.teacherProfile__header-actions .btn-primary,
.teacherProfile__header-actions .btn-secondary {
    font-size: 0.9rem;
}

.teacherProfile__club .dropdown-menu {
    width: max-content;
    box-shadow: var(--fl-box-shadow);
    border: 0;
    border-radius: 10px;
}

.teacherProfile__club-icons-size {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    color: var(--fl-lightBlue);
}

@media (min-width: 768px) {
    .teacherProfile__club .dropdown-menu {
        position: static;
        --bs-dropdown-bg: unset;
        --bs-dropdown-border-color: unset;
        --bs-dropdown-item-padding-x: unset;
        --bs-dropdown-link-color: unset;
        --bs-dropdown-link-hover-color: unset;
        --bs-dropdown-link-hover-bg: unset;
        color: unset;
        box-shadow: unset;
    }

    .teacherProfile__club-icons {
        padding: 2rem;
    }

    .teacherProfile__club .dropdownClub {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        width: 100%;
        position: static !important;
        transform: unset !important;
        --bs-dropdown-zindex: unset;
    }

    .teacherProfile__club-icons-size p {
        display: none;
    }
}

@media (max-width: 768px) {
    .teacherProfile__club-icons {
        padding: 1.5rem 0 1.5rem 0;
    }

    .teacherProfile__club .dropdown-menu .dropdown-item {
        padding: 1rem 1.5rem;
    }

    .teacherProfile__club .dropdownClub li:last-child .teacherProfile__club-icons-size {
        color: var(--fl-red);
    }
}

/* --------------- FOOTER --------------- */

.footer__body {
    background: linear-gradient(360deg, #008fbe 0%, #00a0d5 100%);
    width: 100%;
}

.footer__body {
    padding: 5rem 0;
}

@media (max-width: 576px) {
    .footer__body {
        padding: 0 0 5rem 0;
    }
}

.footer__body-columns {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

@media (max-width: 576px) {
    .footer__body-columns {
        flex-direction: column-reverse;
        gap: 1.5rem;
    }
}

@media (max-width: 576px) {
    .footer__body hr {
        display: block;
        margin: 1rem 0;
        color: #fff;
        border: 0;
        border-top: 1px solid;
        width: 100%;
    }
}

.footer__body-aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

@media (max-width: 992px) {
    .footer__body-aside {
        gap: 1.5rem;
        margin: 3rem 0 0 0;
    }
}

.footer__body-rrss-icons {
    color: var(--fl-lightBlue);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 1.5rem 0 0 0;
}

.footer__body-title {
    color: #fff;
    margin: 0 0 2.25rem;
    font-size: 2rem;
    font-weight: 200;
}

@media (max-width: 576px) {
    .footer__body-options {
        gap: 2rem;
    }
}

.footer__body-subtitle {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0 0 1rem 0;
}

.footer__body ul {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer__body li {
    color: #d9d9d9;
    font-weight: 300;
    font-size: 1rem;
}

.footer__bottom {
    background-color: #0085b0;
    width: 100%;
    padding: 1rem 0;
    font-weight: 300;
}

    .footer__bottom ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2rem;
        color: #fff;
    }

@media only screen and (max-width: 400px) {
    .footer__bottom ul {
        gap: 1.5rem;
    }
}

.fa-solid.fa-location-dot {
    color: #e32053;
}

i.fa-brands.fa-whatsapp {
    color: #60d669;
}

.fa-solid.fa-envelope {
    color: var(--fl-yellow);
}

.footer__body-rrss .rounded-circle {
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.footer__body-rrss-icons .rounded-circle:hover {
    background-color: #fafafa;
}

.footer__body-rrss-icons a:hover {
    color: var(--fl-btn-lightBlue-hover);
}

.footer__body li:hover {
    filter: brightness(1.5);
}

/* --------------- PENDING TRANSFERS --------------- */

.pendingTransfers__header {
    background-image: url(../img/bannerYellow.svg);
    background-repeat: no-repeat;
    padding: 8rem 0 4rem 0;
    width: 100%;
    background-size: cover;
}

@media (min-width: 992px) {
    .pendingTransfers__header {
        background-position: bottom center;
    }
}

.pendingTransfers__title {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 1rem;
}

    .pendingTransfers__title img {
        width: 3.5rem;
    }

@media (max-width: 992px) {
    .pendingTransfers__title img {
        display: none;
    }
}

.pendingTransfers__title h1 {
    font-weight: 500;
    font-size: 3rem;
    color: #fff;
    letter-spacing: 0.4rem;
}

.pendingTransfers__header h5 {
    margin: 0.75rem 0 0 0;
    font-weight: 200;
    font-size: 1.5rem;
    letter-spacing: 0.25rem;
    color: #ffffff;
}

@media (max-width: 420px) {
    .pendingTransfers__title h1 {
        font-size: 1.75rem;
    }

    .pendingTransfers__header h5 {
        font-size: 1.25rem;
    }
}

@media (max-width: 340px) {
    .pendingTransfers__title h1 {
        font-size: 1.5rem;
    }

    .pendingTransfers__header h5 {
        font-size: 1rem;
    }
}

.pendingTransfer__students-table {
    margin: 1.5rem 0 3rem 0;
}

@media (max-width: 576px) {
    .pendingTransfer__students-table {
        margin: 1.5rem 0 3rem 0;
    }
}

.pendingTransfers__body {
    width: 800px;
    margin: 0 auto 7rem auto;
}

@media (max-width: 992px) {
    .pendingTransfers__body {
        width: 100%;
    }
}

.pendingTransfer__students-thead .pendingTransfer__students-tr {
    background-color: var(--fl-lightBlue);
    font-weight: 500;
    font-size: 0.9rem;
    text-align: center;
    color: #ffffff;
    padding: 1.5rem 1rem;
    border-radius: 10px 10px 0 0;
    align-items: center;
}

.pendingTransfer__students-tr {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
    padding: 1rem 1rem;
    color: var(--fl-black);
    background: #ffffff;
    border-bottom: 1px solid #ececec;
    align-items: center;
}

    .pendingTransfer__students-tr:hover {
        background: #fafafa;
    }

.pendingTransfer__students-thead .pendingTransfer__students-tr:hover {
    background-color: var(--fl-lightBlue);
}

.pendingTransfer__students-thead-student,
.pendingTransfer__students-thead-teacher,
.pendingTransfer__students-student,
.pendingTransfer__students-teacher {
    display: flex;
    justify-content: flex-start;
}

.pendingTransfer__students-thead-check,
.pendingTransfer__students-thead-actions,
.pendingTransfer__students-check,
.pendingTransfer__students-actions {
    display: flex;
    justify-content: center;
}

.pendingTransfer__students-thead-student {
    display: flex;
    flex-flow: row nowrap;
}

.pendingTransfer__students-student img,
.pendingTransfer__students-teacher img {
    width: 24px;
}

.pendingTransfer__students-student,
.pendingTransfer__students-teacher {
    gap: 0 0.5rem;
    align-items: center;
}

@media (max-width: 768px) {

    .pendingTransfer__students-thead-teacher,
    .pendingTransfer__students-teacher {
        display: none;
    }
}

.pendingTransfers .form-check-input:checked {
    background-color: var(--fl-yellow);
    border-color: var(--fl-yellow);
    cursor: pointer;
}

.pendingTransfers .form-check-input {
    cursor: pointer;
}

    .pendingTransfers .form-check-input:focus {
        box-shadow: 0 0 0 0.25rem rgba(253, 249, 13, 0.25);
        border-color: var(--fl-yellow);
    }

.pendingTransfers .dropdown-toggle::after {
    display: none;
}

.pendingTransfers .pendingTransfer__students-actions a.nav-link {
    color: var(--fl-lightBlue);
    font-weight: 700;
}

.pendingTransfer__students-tr .form-check {
    min-height: unset;
    margin-bottom: 0.2rem;
}

    .pendingTransfer__students-tr .form-check:hover {
        cursor: pointer;
    }

.pendingTransfer__students-actions .dropdown-menu a {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 0 0.5rem;
}

.pendingTransfers .pendingTransfer__students-actions .dropdown-menu {
    width: max-content;
    padding: 1.5rem;
    box-shadow: var(--fl-box-shadow);
    border: 0;
    border-radius: 10px;
}

.pendingTransfer__students-actions .dropdown-menu a:first-child {
    font-weight: 400;
    font-size: 1rem;
    color: var(--fl-red);
    margin-bottom: 1rem;
}

.pendingTransfer__students-actions .dropdown-menu a:last-child {
    font-weight: 400;
    font-size: 1rem;
    color: var(--fl-green);
}

.pendingTransfer__students {
    display: flex;
    flex-direction: column;
}

    .pendingTransfer__students h4 {
        font-weight: 500;
        font-size: 2.25rem;
        color: var(--fl-lightBlue);
        margin: 4rem 0 1.5rem 0;
    }

.pendingTransfer__actions {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    gap: 1.5rem;
}

@media (max-width: 576px) {
    .pendingTransfer__actions {
        flex-flow: column;
        width: 100%;
        justify-content: center;
        gap: 1.5rem;
        margin-bottom: 2rem;
    }
}

.pendingTransfer__empty-state {
    width: 100%;
    height: 200px;
    background: linear-gradient(90deg, #f4f4f4 0%, rgba(244, 244, 244, 0.5) 99.83%);
    border: 2px solid rgba(88, 88, 88, 0.05);
    border-radius: 10px;
    margin: 1rem 0 4rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem 0;
}

    .pendingTransfer__empty-state img {
        mix-blend-mode: luminosity;
        opacity: 0.5;
    }

    .pendingTransfer__empty-state h6 {
        font-weight: 500;
        font-size: 1.5rem;
        text-align: center;
        color: rgba(88, 88, 88, 0.5);
        width: 250px;
    }

#transferRejected img,
#transferRejectedConfirmation img,
#transferAcceptedConfirmation img,
#transferAcceptedConfirmationClub img {
    width: 200px;
    margin-bottom: 2rem;
}

#transferRejected .modal__actions {
    margin: 1rem 0 0 0;
}

@media (max-width: 476px) {

    #transferRejected .btn-link,
    #transferRejected .btn-primary {
        width: 100%;
    }
}

#transferRejectedConfirmation h3,
#transferAcceptedConfirmation h3,
#transferAcceptedConfirmationClub h3 {
    margin: 0 0 1rem 0;
}

#transferRejectedConfirmation p,
#transferAcceptedConfirmation p,
#transferAcceptedConfirmationClub p {
    color: var(--fl-lightBlue);
}

@media (min-width: 360px) {
    #transferAcceptedConfirmation p {
        width: 260px;
    }
}

/* --------------- Modal Select Club --------------- */

.selecClub__list {
    display: flex;
    flex-direction: column;
    height: 300px;
    overflow-y: auto;
    width: 100%;
    padding: 0.5rem 1rem;
}

.selectClub__card {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding: 1.5rem;
    border-radius: 0.75rem;
    border: 2px solid transparent;
    background: #f9f9f9;
    width: 100%;
    filter: opacity(0.5);
    margin: 0.5rem 0 0.5rem 0;
}

    .selectClub__card:hover {
        filter: opacity(0.6);
        border: 2px solid var(--fl-lightBlue);
    }

    .selectClub__card.active {
        filter: opacity(1);
        border: 2px solid var(--fl-lightBlue);
    }

    .selectClub__card img {
        width: 4rem;
        height: 4rem;
    }

.selectClub__card-body {
    display: flex;
    flex-direction: column;
    margin: 0 0 0 1rem;
}

    .selectClub__card-body .selectClub__card-title {
        margin: 0;
        font-style: normal;
        font-weight: 700;
        font-size: 1.5rem;
        text-align: left;
        max-width: 200px;
        display: inline-block;
    }

    .selectClub__card-body .selectClub__card-subtitle {
        font-weight: 300;
        font-size: 0.75rem;
        margin: 0;
        color: var(--fl-black);
        text-align: left;
        max-width: 200px;
        display: inline-block;
    }

.selecClub__list {
    scrollbar-width: thin;
    scrollbar-color: #008fbe #ebebeb;
}

    .selecClub__list::-webkit-scrollbar {
        width: 8px;
    }

    .selecClub__list::-webkit-scrollbar-track {
        background: #ebebeb;
    }

    .selecClub__list::-webkit-scrollbar-thumb {
        background-color: #008fbe;
        border-radius: 50px;
        border: 0px none #ffffff;
    }

@media (max-width: 476px) {
    #selectClubTransfer .modal-body {
        padding: 0 1rem 3rem 1rem;
    }

    .selectClub__card img {
        display: none;
    }

    #selectClubTransfer .btn-primary {
        width: 100%;
    }
}

@media (max-width: 400px) {

    .selectClub__card-body .selectClub__card-title,
    .selectClub__card-body .selectClub__card-subtitle {
        max-width: 160px;
    }
}

@media (max-width: 320px) {

    .selectClub__card-body .selectClub__card-title,
    .selectClub__card-body .selectClub__card-subtitle {
        max-width: 100px;
    }
}

/* --------------- TABLE STUDENT --------------- */

.tableStudent__buttons {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    margin: 5rem 0 0 0;
    gap: 2rem;
}

.tableStudent {
    margin: 4rem 0 15rem 0;
}

.tableStudent__head {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: var(--fl-lightBlue);
    border-radius: 0.75rem 0.75rem 0 0;
    padding: 1rem 1.5rem;
    font-style: normal;
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
    color: #fff;
}

@media (min-width: 992px) and (max-width: 1200px) {
    .tableStudent__head {
        font-size: 0.75rem;
    }
}

.tableStudent__check,
.tableStudent__belt,
.tableStudent__student,
.tableStudent__user,
.tableStudent__connection,
.tableStudent__books,
.tableStudent__time,
.tableStudent__games,
.tableStudent__points {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.tableStudent__tr .tableStudent__student {
    padding: 0 0 0 2rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    gap: 0.5rem;
}

.tableStudent__tr {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 1rem 1.5rem;
    font-style: normal;
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
    color: var(--fl-black);
    background-color: #fff;
}

.tableStudent__belt img {
    width: 3rem;
}

.tableStudent__tr:hover {
    background-color: #fcfcfc;
}

.tableStudent__tr .tableStudent__student {
    display: flex;
    flex-direction: row;
    align-items: center;
}

    .tableStudent__tr .tableStudent__student img {
        width: 3rem;
    }

    .tableStudent__tr .tableStudent__student p {
        display: inline-block;
        max-width: 12rem;
    }

.tableStudent .form-check-input:checked {
    background-color: var(--fl-yellow);
    border-color: var(--fl-yellow);
    cursor: pointer;
}

.tableStudent .form-check {
    min-height: unset;
}

.tableStudent .form-check-input {
    cursor: pointer;
}

    .tableStudent .form-check-input:focus {
        box-shadow: 0 0 0 0.25rem rgba(253, 249, 13, 0.25);
        border-color: var(--fl-yellow);
    }

.tableStudent .dropdown-toggle::after {
    display: none;
}

.tableStudent .tableStudent__actions a.nav-link {
    color: var(--fl-lightBlue);
    font-weight: 700;
}

.tableStudent .dropdown-menu a {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 0 0.5rem;
}

.tableStudent .dropdown-menu {
    width: max-content;
    padding: 1.5rem;
    box-shadow: var(--fl-box-shadow);
    border: 0;
    border-radius: 10px;
}

    .tableStudent .dropdown-menu a {
        font-weight: 400;
        font-size: 0.9rem;
        color: var(--fl-lightBlue);
        margin-bottom: 1.25rem;
        display: flex;
        align-items: center;
    }

        .tableStudent .dropdown-menu a:last-child {
            font-weight: 400;
            color: var(--fl-red);
            margin: 0;
            display: flex;
            align-items: center;
        }

        .tableStudent .dropdown-menu a:hover {
            filter: brightness(1.1);
        }

@media (max-width: 1200px) {
    .tableStudent__tr .tableStudent__student p {
        display: inline-block;
        max-width: 10rem;
    }
}

@media (min-width: 992px) {

    .tableStudent__user span,
    .tableStudent__connection span,
    .tableStudent__books span,
    .tableStudent__time span,
    .tableStudent__games span,
    .tableStudent__points span {
        display: none;
    }

    .tableStudent__tr {
        border-bottom: 1px solid #ececec;
    }
}

@media (max-width: 992px) {
    .tableStudent__buttons {
        flex-wrap: wrap;
    }

        .tableStudent__buttons button {
            width: 100%;
        }

    .btn.btn-fl-red {
        padding: 1.25rem 2rem;
    }

    .tableStudent__head {
        display: none;
    }

    .tableStudent__tr {
        flex-direction: column;
        width: 100%;
        border: 1px solid #ececec;
        border-radius: 10px;
        padding: 1.5rem 0.25rem 0 0.25rem;
    }

    .tableStudent__user,
    .tableStudent__connection,
    .tableStudent__books,
    .tableStudent__time,
    .tableStudent__games,
    .tableStudent__points {
        flex-direction: column;
    }

    .tableStudent__statistics p {
        font-weight: 500;
        font-size: 1.5rem;
        text-align: center;
        color: #008fbe;
    }

    .tableStudent__statistics span {
        font-weight: 300;
        font-size: 1rem;
        color: #585858;
    }

    .tableStudent__tr .tableStudent__student {
        padding: 0 0 0 0.5rem;
        font-weight: 700;
        font-size: 1.5rem;
        text-align: center;
        color: var(--fl-lightBlue);
    }

    .tableStudent_table {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem 0;
    }

    .tableStudent__statistics {
        margin: 2rem 0 1rem 0;
        display: flex;
        gap: 2rem 0;
    }

    .tableStudent input.form-check-input {
        width: 1.25rem;
        height: 1.25rem;
        margin-bottom: 0.1rem;
    }

    .tableStudent__tr .tableStudent__student p {
        display: inline-block;
        max-width: 25rem;
    }
}

@media (max-width: 768px) {
    .tableStudent__tr {
        padding: 1.5rem 0 0 0;
    }
}

@media (max-width: 576px) {
    .tableStudent__buttons > {
        width: 100%
    }
}

.tableStudent__buttons button,
.tableStudent__buttons div,
.tableStudent__buttons form {
    white-space: nowrap;
}

.tableStudent__title {
    font-weight: 500;
    font-size: 2.5rem;
    color: var(--fl-lightBlue);
}

    .tableStudent__title span {
        font-weight: 200;
        font-size: 2rem;
        display: block;
    }

.tableStudent__empty-state {
    width: 100%;
    height: 300px;
    background: linear-gradient(90deg, #f4f4f4 0%, rgba(244, 244, 244, 0.5) 99.83%);
    border: 2px solid rgba(88, 88, 88, 0.05);
    border-radius: 10px;
    margin: 4rem 0 8rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem 0;
}

    .tableStudent__empty-state img {
        width: 6rem;
        mix-blend-mode: luminosity;
        opacity: 0.5;
    }

    .tableStudent__empty-state h6 {
        font-weight: 500;
        font-size: 1.5rem;
        text-align: center;
        color: rgba(88, 88, 88, 0.5);
    }

@media (max-width: 400px) {
    .tableStudent__empty-state {
        padding: 1rem;
    }

        .tableStudent__empty-state h6 {
            font-size: 1.25rem;
        }
}

/* --------------- TEACHER CHALLENGES PAGES --------------- */

.teacherChallenge {
    margin: 0rem 0 10rem 0;
    padding-top: 8rem;
}

    .teacherChallenge h1 {
        font-family: "Bliss Pro";
        font-style: normal;
        font-weight: 500;
        font-size: 2rem;
        color: var(--fl-lightBlue);
    }

.teacherChallenge__list {
    display: flex;
    flex-flow: row wrap;
    gap: 3rem;
    margin: 3rem 0 0 0;
}

.teacherChallenge__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    width: 12rem;
    background: #ffffff;
    box-shadow: 0px 9.37937px 37.5175px rgba(0, 0, 0, 0.15);
    border-radius: 0.6rem;
    cursor: pointer;
    user-select: none;
}

    /* .teacherChallenge__card:hover {
box-shadow: 0px 9.37937px 37.5175px rgba(0, 0, 0, 0.25);
} */

    .teacherChallenge__card img:first-child {
        width: 7rem;
        height: 7rem;
    }

    .teacherChallenge__card img:nth-child(2) {
        width: 100%;
        margin: 1rem 0 0.75rem 0;
    }

.teacherChallenge__name {
    height: 3rem;
    display: flex;
    align-items: center;
}

    .teacherChallenge__name p {
        font-weight: 500;
        font-size: 1rem;
        text-align: center;
        color: var(--fl-lightBlue);
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

@media (max-width: 1200px) {
    .teacherChallenge {
        display: flex;
        justify-content: center;
    }

        .teacherChallenge h1 {
            text-align: center;
        }

    .teacherChallenge__list {
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 400px) {
    .teacherChallenge__list {
        padding: 0 2rem;
    }

    .teacherChallenge__card {
        margin: 1rem;
        padding: 3rem 2rem;
        min-width: 16rem;
    }

        .teacherChallenge__card img:first-child {
            width: 9rem;
            height: 9rem;
        }

        .teacherChallenge__card img:nth-child(2) {
            width: 100%;
            margin: 1rem 0 0 0;
        }

    .teacherChallenge__name {
        margin: 1.75rem 0 0 0;
    }

        .teacherChallenge__name p {
            font-size: 1.5rem;
        }
}

#challengeDetail .modal-body img {
    width: 100%;
    height: auto;
    padding: 2rem;
}

@media (min-width: 992px) and (max-width: 1200px) {
    #challengeDetail .modal-body img {
        padding: 0;
    }
}

#challengeDetail .modal-body h3 {
    text-align: left;
    margin: 1.5rem 0;
}

#challengeDetail .modal-body p {
    text-align: left;
    font-weight: 300;
    font-size: 1.4rem;
    letter-spacing: 0.075em;
    color: var(--fl-black);
    margin: 0 0 2rem 0;
}

.challenge__slider-modal-footer {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    gap: 0 4rem;
    font-weight: 300;
    font-size: 1rem;
    letter-spacing: 0.075em;
    color: var(--fl-black);
    white-space: nowrap;
}

/* --------------- TEACHER HOME CLUB LIST --------------- */

.teacherHomeClubList {
    margin-bottom: 4rem;
}

    .teacherHomeClubList h2 {
        font-weight: 500;
        font-size: 3rem;
        color: var(--fl-lightBlue);
    }

.teacherHomeClubList__header {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

    .teacherHomeClubList__header h5 {
        font-weight: 200;
        font-size: 2rem;
        color: var(--fl-lightBlue);
    }

    .teacherHomeClubList__header a {
        font-weight: 500;
        font-size: 1.25rem;
        color: var(--fl-lightBlue);
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
    }

        .teacherHomeClubList__header a i {
            position: relative;
            top: 2px;
        }

.teacherHomeClubList__list {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    margin-bottom: 0.5rem;
}

.teacherHomeClubList__card {
    padding: 1rem 1.5rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;
    border-radius: 0.75rem;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 0 1rem;
}

    .teacherHomeClubList__card:hover {
        filter: brightness(1.025);
    }

    .teacherHomeClubList__card.club-bg-1 {
        background-image: url(../img/club-bg-1.svg);
    }

    .teacherHomeClubList__card.club-bg-2 {
        background-image: url(../img/club-bg-2.svg);
    }

    .teacherHomeClubList__card.club-bg-3 {
        background-image: url(../img/club-bg-3.svg);
    }

    .teacherHomeClubList__card.club-bg-4 {
        background-image: url(../img/club-bg-4.svg);
    }

    .teacherHomeClubList__card.club-bg-5 {
        background-image: url(../img/club-bg-5.svg);
    }

    .teacherHomeClubList__card.club-bg-6 {
        background-image: url(../img/club-bg-6.svg);
    }

    .teacherHomeClubList__card.sponsors {
        border: 3px solid var(--f-leer-celeste, #008FBE);
        box-shadow: 2px 6px 4px 0px rgba(0, 175, 175, 0.1);
    }

        .teacherHomeClubList__card.sponsors h5 {
            color: var(--fl-lightBlue);
        }

        .teacherHomeClubList__card.sponsors p {
            color: var(--fl-lightBlue);
            font-style: italic;
        }

    .teacherHomeClubList__card img {
        width: 5rem;
        height: 5rem;
    }

.clubListActions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

@media (width < 576px) {
    .clubListActions {
        flex-direction: column;
    }

        .clubListActions button {
            width: 100%;
        }

        .clubListActions a {
            width: 100%;
        }
}

@media (min-width: 768px) and (max-width: 1400px) {
    .teacherHomeClubList__card img {
        width: 3rem;
        height: 3rem;
    }
}

.teacherHomeClubList__card-content h5 {
    max-width: 20rem;
    font-weight: 700;
    font-size: 1.75rem;
    color: #FFFFFF;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.teacherHomeClubList__card-content p {
    font-weight: 300;
    max-width: 15rem;
    font-size: 1.25rem;
    color: #FFFFFF;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    user-select: all;
}

@media (max-width: 992px) {
    .teacherHomeClubList__card {
        display: flex;
        flex-flow: row nowrap;
        width: 100%;
        min-width: unset;
    }
}

@media (max-width: 768px) {
    .teacherHomeClubList__header {
        display: flex;
        flex-flow: column;
        gap: 1rem 0;
    }
}

@media (max-width: 476px) {
    .teacherHomeClubList__card-content h5 {
        max-width: 10rem;
    }

    .teacherHomeClubList__card-content p {
        max-width: 10rem;
    }
}

@media (max-width: 340px) {
    .teacherHomeClubList__card-content h5 {
        max-width: 7.5rem;
    }

    .teacherHomeClubList__card-content p {
        max-width: 7.5rem;
    }
}

.teacherHomeClubList__card.add {
    background-color: #fff;
    border: 3px solid var(--fl-lightBlue);
    width: fit-content;
    gap: 0 0.75rem;
    height: 100%;
    width: 100%;
    justify-content: center;
}

    .teacherHomeClubList__card.add i {
        color: var(--fl-lightBlue);
        font-weight: 700;
        font-size: 20px;
    }

    .teacherHomeClubList__card.add h5 {
        color: var(--fl-lightBlue);
        max-width: unset;
        font-weight: 600;
        font-size: 20px;
    }

.teacherHomeClubList__list > div {
    padding: 1rem;
}

/* --------------- TEACHER CHALLENGE SLIDER --------------- */

.teacherChallengeSlider .swiper-wrapper {
    padding: 0;
}

.teacherChallengeSlider .swiper-slide {
    margin-right: 0 !important;
}

/* --------------- HOVER FORWARD --------------- */

/* Icon Back */
.hvr-icon-back {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
}

    .hvr-icon-back .hvr-icon {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-transition-duration: 0.1s;
        transition-duration: 0.1s;
        -webkit-transition-property: transform;
        transition-property: transform;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }

    .hvr-icon-back:hover .hvr-icon,
    .hvr-icon-back:focus .hvr-icon,
    .hvr-icon-back:active .hvr-icon {
        -webkit-transform: translateX(-4px);
        transform: translateX(-4px);
    }

/* Icon Forward */
.hvr-icon-forward {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
}

    .hvr-icon-forward .hvr-icon {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-transition-duration: 0.1s;
        transition-duration: 0.1s;
        -webkit-transition-property: transform;
        transition-property: transform;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }

    .hvr-icon-forward:hover .hvr-icon,
    .hvr-icon-forward:focus .hvr-icon,
    .hvr-icon-forward:active .hvr-icon {
        -webkit-transform: translateX(4px);
        transform: translateX(4px);
    }

/* --------------- TEACHER HOME FILTERS --------------- */

.teacherHomeFilters h2 {
    font-weight: 500;
    font-size: 2.5rem;
    color: var(--fl-lightBlue);
    margin-bottom: 2rem;
}

.teacherHomeFilters__age,
.teacherHomeFilters__category {
    display: flex;
    flex-direction: column;
    margin: 0 0 3rem 0;
}

    .teacherHomeFilters__age h5,
    .teacherHomeFilters__category h5,
    .teacherHomeFilters__result h5 {
        font-weight: 500;
        font-size: 2rem;
        color: var(--fl-lightBlue);
        margin-bottom: 2rem;
    }

    .teacherHomeFilters__age h2 {
        font-weight: 500;
        font-size: 2.5rem;
        color: var(--fl-lightBlue);
        margin: 3rem 0 3rem 0;
    }

.teacherHomeFilters__buttons-group {
    display: flex;
    flex-direction: row;
    gap: 0 4rem;
    flex-wrap: wrap;
}

.teacherHomeFilters__button {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    user-select: none;
    cursor: pointer;
    width: 12rem;
}

.teacherHomeFilters__buttons img {
    width: 7rem;
    height: 7rem;
}

.teacherHomeFilters__button img:hover {
    transform: scale(1.05);
    transition: 0.75s;
}

.teacherHomeFilters__button-text {
    padding: 2rem 0 2rem 0;
    font-weight: 500;
    font-size: 1.25rem;
    color: var(--fl-lightBlue);
    width: 14rem;
    display: inline-block;
    text-align: center;
}

    .teacherHomeFilters__button-text.active {
        background-image: url(../img/btnPills.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        font-weight: 500;
        font-size: 20px;
        color: #ffffff;
        text-align: center;
        padding: 2rem 0;
        width: 14rem;
        white-space: nowrap;
    }

.teacherHomeFilters__result {
    margin: 0 0 3rem 0;
}

.swiperFiltersCategory .swiper-slide img {
    width: 8rem;
    height: 8rem;
}

@media (max-width: 992px) {
    .teacherHomeFilters__age .teacherHomeFilters__buttons-group {
        justify-content: center;
        margin: 0;
    }
}

@media (max-width: 768px) {
    .teacherHomeFilters__age .teacherHomeFilters__buttons-group {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0;
    }
}

@media (max-width: 650px) {
    .teacherHomeFilters__age .teacherHomeFilters__buttons-group {
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

@media (max-width: 576px) {
    .teacherHomeFilters__age .teacherHomeFilters__button img {
        width: 5rem;
        height: 5rem;
    }

    .teacherHomeFilters__age .teacherHomeFilters__button-text {
        padding: 2rem 1rem;
        width: fit-content;
    }

        .teacherHomeFilters__age .teacherHomeFilters__button-text.active {
            padding: 2rem 1rem;
            width: fit-content;
        }
}

@media (max-width: 400px) {
    .teacherHomeFilters__age .teacherHomeFilters__button img {
        width: 8rem;
        height: 8rem;
    }

    .teacherHomeFilters__age .teacherHomeFilters__button-text {
        padding: 2rem 1rem;
        font-size: 0.9rem;
        width: fit-content;
    }

        .teacherHomeFilters__age .teacherHomeFilters__button-text.active {
            padding: 2rem 1rem;
            font-size: 0.9rem;
            width: fit-content;
        }
}

@media (max-width: 576px) {

    /* --AGREGADO-- */
    .teacherHomeFilters__age .teacherHomeFilters__buttons-group {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* --FIN-- */

    .teacherHomeFilters__age .teacherHomeFilters__button img {
        width: 5rem;
        height: 5rem;
    }

    .teacherHomeFilters__age .teacherHomeFilters__button-text {
        padding: 2rem 1rem;
        width: fit-content;
    }

        .teacherHomeFilters__age .teacherHomeFilters__button-text.active {
            padding: 2rem 1rem;
            width: fit-content;
        }
}

@media (max-width: 400px) {

    /* --AGREGADO-- */
    .teacherHomeFilters__age .teacherHomeFilters__buttons-group {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* --FIN-- */

    .teacherHomeFilters__age .teacherHomeFilters__button img {
        width: 8rem;
        height: 8rem;
    }

    .teacherHomeFilters__age .teacherHomeFilters__button-text {
        padding: 2rem 1rem;
        font-size: 0.9rem;
        width: fit-content;
    }

        .teacherHomeFilters__age .teacherHomeFilters__button-text.active {
            padding: 2rem 1rem;
            font-size: 0.9rem;
            width: fit-content;
        }
}

/* --------------- FILTERS BOOK CARD --------------- */

.swiperFiltersResult .bookCard {
    width: 100%;
    cursor: pointer;
    user-select: none;
}

.swiperFiltersResult .bookCard__img {
    width: 100%;
    height: 15rem;
    object-fit: cover;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem;
    position: relative;
    z-index: 0;
    background-size: cover;
    background-position: center;
}

.swiperFiltersResult .bookCard__audio {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem;
    position: absolute;
    bottom: 0;
    z-index: 0;
    padding: 0.5rem 0 0.25rem 0;
    background-image: url(../img/cardAudioBG.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: #ffffff;
    gap: 1rem;
}

.swiperFiltersResult .bookCard__lock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 15rem;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 0.5rem;
    position: absolute;
    z-index: 100;
    padding: 0 1rem;
}

    .swiperFiltersResult .bookCard__lock img {
        width: 6rem;
        height: auto;
    }

    .swiperFiltersResult .bookCard__lock p {
        color: #fff;
        font-size: 1rem;
        text-align: center;
        margin: 0.5rem 0 0 0;
    }

.swiperFiltersResult .bookCard__title {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 100%;
}

    .swiperFiltersResult .bookCard__title h6 {
        font-weight: 700;
        font-size: 1.2rem;
        margin: 0.5rem 0.5rem 0.1rem 0.1rem;
        text-align: left;
        color: var(--fl-lightBlue);
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        width: 9.75rem;
    }

.swiperFiltersResult .bookCard .bookCard__author {
    font-weight: 200;
    font-size: 1rem;
    color: var(--fl-black);
    opacity: 0.75;
    text-align: left;
    display: block;
    max-width: 12rem;
}

.swiperFiltersResult .bookCard__title button {
    all: unset;
    height: 0;
}

.swiperFiltersResult i.fa-heart.js-heart.heart.fa-lg.far {
    color: var(--fl-black);
    opacity: 0.75;
    width: 1.5rem;
}

.swiperFiltersResult .bookCard__title i.fa-lg {
    line-height: unset;
    width: 1.5rem;
    margin: 0.4rem 0.5rem 0 0;
}

.bookCard .fas {
    color: var(--fl-red);
}

.bookCard .heart {
    cursor: pointer;
}

.bookCard .pulse {
    animation: pulse 0.4s;
}

.teacherHomeFilters__btn-more-filters {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0 0 1rem 0;
}

    .teacherHomeFilters__btn-more-filters button {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
    }

.teacherHomeFilters .desafioLeer__hr {
    margin: 0 0 6rem 0;
}

@media (max-width: 400px) {
    .teacherHomeFilters__btn-more-filters button {
        width: 100%;
    }

    .swiperFiltersResult .bookCard__lock {
        height: 100%;
        padding: 0 3rem;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

@media (max-width: 400px) {
    .swiperFiltersResult .bookCard__img {
        height: 24rem;
    }

    .swiperFiltersResult .bookCard__title h6 {
        width: 18rem;
    }
}

/* --------------- MAIN LIBRARY HOME --------------- */

.mainLibraryHome {
    background-image: url(../img/bg_opacity.svg);
    background-repeat: repeat-y;
    background-position: center;
    background-size: contain;
    padding: 1rem 0 0 0;
    margin: 0;
}

    .mainLibraryHome h2 {
        font-weight: 500;
        font-size: 2.5rem;
        color: var(--fl-lightBlue);
        margin: 3rem 0 3rem 0;
    }

    .mainLibraryHome .slider__header {
        margin: 0 0 1.5rem 0;
    }

.mainLibraryHome__category {
    margin: 0 0 5rem 0;
}

.mainLibraryHome__btn-more-filters {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0 0 6rem 0;
}

.mainLibraryHomes__btn-more-filters button {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

/* --------------- STUDENTS RESOURCES --------------- */

.studentsResources {
    margin: 0 0 3rem 0;
}

    .studentsResources h2 {
        font-weight: 500;
        font-size: 2.5rem;
        color: var(--fl-lightBlue);
        margin: 6rem 0 3rem 0;
    }

.studentsResources__degrees {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0 3rem;
    margin: 0 0 2rem 0;
}

    .studentsResources__degrees button.active {
        all: unset;
        background-image: url(../img/btnPills.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        padding: 1.4rem 2.5rem;
        cursor: pointer;
        font-weight: 500;
        font-size: 1.25rem;
        color: #FFFFFF;
    }

    .studentsResources__degrees button {
        all: unset;
        padding: 1rem 2.5rem;
        cursor: pointer;
        font-weight: 500;
        font-size: 1.25rem;
        color: var(--fl-lightBlue);
    }

.studentsResources .slider__header {
    margin: 0 0 1.5rem;
}

.studentsResources .readingWorkshops {
    margin: 0 0 5rem 0;
}

.studentsResources .resourcesCard {
    width: 100%;
    cursor: pointer;
    user-select: none;
    position: relative;
    z-index: 0;
}

    .studentsResources .resourcesCard.disabled .resourcesCard__actions {
        background-color: rgba(175, 175, 175, 0.55);
    }

    .studentsResources .resourcesCard.disabled:hover span {
        display: none;
    }

.studentsResources .swiper-slide .resourcesCard__img {
    /*background-image: url(../img/coverWorkshopR.jpg);*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 100%;
    height: 15rem;
    vertical-align: middle;
    border-radius: 0.5rem;
    margin: 0.5rem 0 0 0;
}

.studentsResources .resourcesCard__actions {
    width: 100%;
    height: 100%;
    border: 1px solid #eee;
    border-radius: 8px;
}

    .studentsResources .resourcesCard__actions span {
        background: rgba(0, 143, 190, 0.95);
        border-radius: 0.5rem;
        visibility: hidden;
    }

.studentsResources .writingWorkshops .resourcesCard__actions span {
    background: rgba(213, 0, 55, 0.9);
    border-radius: 0.5rem;
    visibility: hidden;
}

.studentsResources .writingWorkshops .btn.btn-resources-white {
    color: rgba(213, 0, 55, 0.9);
}

.studentsResources .resourcesCard:hover span {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    gap: 0.75rem 0;
    padding: 1rem;
    visibility: visible;
    width: 100%;
    height: 100%;
    animation: fadeIn 0.25s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.studentsResources .resourcesCard__actions button {
    border-radius: 3rem;
    padding: 0.75rem 0;
    width: 100%;
    font-weight: 400;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-transform: unset;
}

.studentsResources .resourcesCard__actions a {
    border-radius: 3rem;
    padding: 0.75rem 0;
    width: 100%;
    font-weight: 400;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-transform: unset;
}

.studentsResources .resourcesCard__title {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 100%;
}

    .studentsResources .resourcesCard__title h6 {
        font-weight: 700;
        font-size: 1.3rem;
        margin: 0.5rem 0.1rem 0.1rem 0.1rem;
        text-align: left;
        color: var(--fl-lightBlue);
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        width: 100%;
    }

.studentsResources .resourcesCard .resourcesCard__time {
    font-weight: 200;
    font-size: 1rem;
    color: var(--fl-black);
    opacity: 0.75;
    text-align: left;
    display: block;
    max-width: 12rem;
}

@media (min-width: 992px) {
    .resourcesCard__actions-responsive {
        display: none;
    }

        .resourcesCard__actions-responsive button {
            display: none;
        }

        .resourcesCard__actions-responsive a {
            display: none;
        }
}

@media (max-width: 992px) {
    .resourcesCard__actions {
        display: none;
    }

    .resourcesCard__actions-responsive {
        border-radius: 3rem;
        padding: 0.75rem 0;
        font-weight: 400;
        font-size: 1rem;
        text-align: center;
        text-transform: unset;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        padding: 0.25rem 0;
        margin: 2rem 1rem 0 1rem;
        background-color: var(--fl-green);
    }

    .writingWorkshops .resourcesCard__actions-responsive {
        background-color: var(--fl-red);
    }

    .resourcesCard__actions-responsive button {
        border-radius: 3rem;
        padding: 0rem 0;
        width: 100%;
        font-weight: 400;
        font-size: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        text-transform: unset;
    }

    .resourcesCard__actions-responsive a {
        border-radius: 3rem;
        padding: 0rem 0;
        width: 100%;
        font-weight: 400;
        font-size: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        text-transform: unset;
    }

    .resourcesCard__actions-responsive .btn {
        padding: 0;
        background-color: transparent;
        border-radius: 0.25rem;
        width: 3rem;
        height: 3rem;
        color: #fff;
    }

        .resourcesCard__actions-responsive .btn:hover {
            color: #fff;
        }
}

@media (max-width: 600px) {
    .studentsResources__degrees {
        gap: 0 0.5rem;
        justify-content: space-between;
    }

        .studentsResources__degrees button.active {
            padding: 1rem 1.25rem;
        }

        .studentsResources__degrees button {
            padding: 1rem 1.25rem;
        }
}

@media (max-width: 550px) {
    .studentsResources .swiper-slide .resourcesCard__img {
        height: 30rem;
    }
}

@media (max-width: 400px) {
    .studentsResources .resourcesCard__img {
        height: 24rem;
    }

    .studentsResources .resourcesCard__title h6 {
        width: 18rem;
    }

    .studentsResources__degrees button.active {
        font-size: 1rem;
    }

    .studentsResources__degrees button {
        font-size: 1rem;
    }
}

@media (max-width: 340px) {
    .studentsResources__degrees {
        flex-wrap: wrap;
    }
}

.studentsResources .sharedResources .btn.btn-resources-assign {
    display: none;
}

/* --------------- TEACHERS RESOURCES --------------- */

.teachersResources {
    margin: 0 0 6rem 0;
}

    .teachersResources .readingGuides .resourcesCard__actions span {
        background: rgba(0, 143, 190, 0.95);
        border-radius: 0.5rem;
        visibility: hidden;
    }

    .teachersResources .readingWorkshops .resourcesCard__actions span {
        background: rgba(0, 143, 190, 0.95);
        border-radius: 0.5rem;
        visibility: hidden;
    }

    .teachersResources .writingWorkshops .resourcesCard__actions span {
        background: rgba(0, 143, 190, 0.95);
        border-radius: 0.5rem;
        visibility: hidden;
    }

    .teachersResources .swiper-slide .resourcesCard__img.readingGuides {
        /*background-image: url(../img/guidesTeachersCover.jpg);*/
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 100%;
        height: 15rem;
        vertical-align: middle;
        border-radius: 0.5rem;
        margin: 0.5rem 0 0 0;
    }

    .teachersResources .swiper-slide .resourcesCard__img.readingWorkshops {
        /*background-image: url(../img/readingWorkshopsTeachers.jpg);*/
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 100%;
        height: 15rem;
        vertical-align: middle;
        border-radius: 0.5rem;
        margin: 0.5rem 0 0 0;
    }

    .teachersResources .swiper-slide .resourcesCard__img.writingWorkshops {
        /*background-image: url(../img/writingWorkshopsTeachers.jpg);*/
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 100%;
        height: 15rem;
        vertical-align: middle;
        border-radius: 0.5rem;
        margin: 0.5rem 0 0 0;
    }

    .teachersResources h2 {
        font-weight: 500;
        font-size: 2.5rem;
        color: var(--fl-lightBlue);
        margin: 6rem 0 3rem 0;
    }

    .teachersResources h5 {
        font-weight: 500;
        font-size: 1.5rem;
        color: var(--fl-lightBlue);
        margin-bottom: 0;
    }

    .teachersResources .btn.btn-resources-white {
        color: var(--fl-lightBlue);
    }

.teachersResources__degrees {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0 3rem;
    margin: 0 0 2rem 0;
}

    .teachersResources__degrees button.active {
        all: unset;
        background-image: url(../img/btnPills.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        padding: 1.4rem 2.5rem;
        cursor: pointer;
        font-weight: 500;
        font-size: 1.25rem;
        color: #FFFFFF;
    }

    .teachersResources__degrees button {
        all: unset;
        padding: 1rem 2.5rem;
        cursor: pointer;
        font-weight: 500;
        font-size: 1.25rem;
        color: var(--fl-lightBlue);
    }

.teachersResources .slider__header {
    margin: 0 0 1.5rem;
}

.teachersResources .readingWorkshops {
    margin: 0 0 5rem 0;
}

.teachersResources .resourcesCard {
    width: 100%;
    cursor: pointer;
    user-select: none;
    position: relative;
    z-index: 0;
}

.teachersResources .readingGuides .swiper-slide .resourcesCard__img {
    /*background-image: url(../img/guidesTeachersCover.jpg);*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 15rem;
    vertical-align: middle;
    border-radius: 0.5rem;
    margin: 0.5rem 0 0 0;
}

.teachersResources .readingWorkshops .swiper-slide .resourcesCard__img {
    /*background-image: url(../img/readingWorkshopsTeachers.jpg);*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 15rem;
    vertical-align: middle;
    border-radius: 0.5rem;
    margin: 0.5rem 0 0 0;
}

.teachersResources .writingWorkshops .swiper-slide .resourcesCard__img {
    /*background-image: url(../img/writingWorkshopsTeachers.jpg);*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 15rem;
    vertical-align: middle;
    border-radius: 0.5rem;
    margin: 0.5rem 0 0 0;
}

.teachersResources .resourcesCard__actions {
    width: 100%;
    height: 100%;
}

.teachersResources .readingGuides .btn.btn-resources-white {
    color: var(--fl-lightBlue);
}

.teachersResources .resourcesCard:hover span {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    gap: 1.5rem 0;
    padding: 1rem;
    visibility: visible;
    width: 100%;
    height: 100%;
    animation: fadeIn 0.25s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.teachersResources .resourcesCard__actions button {
    border-radius: 3rem;
    padding: 0.75rem 0;
    width: 100%;
    font-weight: 400;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-transform: unset;
}

.teachersResources .resourcesCard__actions a {
    border-radius: 3rem;
    padding: 0.75rem 0;
    width: 100%;
    font-weight: 400;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-transform: unset;
}

.teachersResources .resourcesCard__title {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 100%;
}

    .teachersResources .resourcesCard__title h6 {
        font-weight: 700;
        font-size: 1.3rem;
        margin: 0.5rem 0.1rem 0.1rem 0.1rem;
        text-align: left;
        color: var(--fl-lightBlue);
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        width: 100%;
    }

.teachersResources .resourcesCard .resourcesCard__time {
    font-weight: 200;
    font-size: 1rem;
    color: var(--fl-black);
    opacity: 0.75;
    text-align: left;
    display: block;
    max-width: 12rem;
}

.teachersResources .readingGuides {
    margin: 0 0 4rem 0;
}

@media (max-width: 992px) {
    .teachersResources .resourcesCard__actions-responsive {
        background-color: var(--fl-lightBlue);
    }

    .teachersResources .readingGuides .resourcesCard__actions-responsive {
        background-color: var(--fl-lightBlue);
    }
}

@media (max-width: 600px) {
    .teachersResources__degrees {
        gap: 0 0.5rem;
        justify-content: space-between;
    }

        .teachersResources__degrees button.active {
            padding: 1rem 1.25rem;
        }

        .teachersResources__degrees button {
            padding: 1rem 1.25rem;
        }
}

@media (max-width: 550px) {
    .teachersResources .readingGuides .swiper-slide .resourcesCard__img {
        height: 30rem;
    }

    .teachersResources .readingWorkshops .swiper-slide .resourcesCard__img {
        height: 30rem;
    }

    .teachersResources .writingWorkshops .swiper-slide .resourcesCard__img {
        height: 30rem;
    }
}

@media (max-width: 400px) {
    .teachersResource .resourcesCard__img {
        height: 24rem;
    }

    .teachersResource .resourcesCard__title h6 {
        width: 18rem;
    }

    .teachersResources__degrees button.active {
        font-size: 1rem;
    }

    .teachersResources__degrees button {
        font-size: 1rem;
    }
}

@media (max-width: 340px) {
    .teachersResources__degrees {
        flex-wrap: wrap;
    }
}

.teachersResources .writingWorkshops .btn.btn-resources-assign {
    display: none;
}

.teachersResources .readingGuides .resourcesCard__img {
    /*background-image: url(../img/guidesTeachersCover.jpg);*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 15rem;
    vertical-align: middle;
    border-radius: 0.5rem;
    margin: 0.5rem 0 0 0;
}

.teachersResources .readingWorkshops .resourcesCard__img {
    /*background-image: url(../img/readingWorkshopsTeachers.jpg);*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 15rem;
    vertical-align: middle;
    border-radius: 0.5rem;
    margin: 0.5rem 0 0 0;
}

.teachersResources .writingWorkshops .resourcesCard__img {
    /*background-image: url(../img/writingWorkshopsTeachers.jpg);*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 15rem;
    vertical-align: middle;
    border-radius: 0.5rem;
    margin: 0.5rem 0 0 0;
}

.teachersResources .readingGuides .btn.btn-resources-assign {
    display: none;
}

.teachersResources .readingWorkshops .btn.btn-resources-assign {
    display: none;
}

.teachersResources .writingWorkshops .btn.btn-resources-assign {
    display: none;
}

.gridBooksContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 210px));
    gap: 40px 20px;
    justify-content: space-evenly;
}

.gridItemBook {
    padding: 0;
    max-width: 210px;
}

@media (max-width: 576px) {
    .gridBooksContainer {
        grid-template-columns: repeat(auto-fill, minmax(200px, 100%));
    }

    .gridItemBook {
        width: 100%;
        max-width: 100%;
    }
}

/* --------------- VIDEO WORKSHOP --------------- */

.videoWorkshops {
    margin: 0rem 0 7rem 0;
}

    .videoWorkshops .slider__header h2 {
        font-weight: 500;
        font-size: 2.5rem;
        color: var(--fl-lightBlue);
        margin: 2rem 0 2rem 0;
    }

.swiperVideoWorkshops {
    margin: 1.5rem 0 0 0;
    user-select: none;
}

    .swiperVideoWorkshops iframe {
        border-radius: 1rem;
        user-select: none;
        height: 270px;
    }

    .swiperVideoWorkshops .swiper-slide {
        display: flex;
        justify-content: flex-start;
    }

.videoList {
    padding: 10rem 0;
}

    .videoList h2 {
        font-weight: 500;
        color: var(--fl-lightBlue);
        margin-bottom: 2rem;
    }

    .videoList .row > div {
        padding: 1rem;
    }

    .videoList iframe {
        width: 100%;
        height: 230px;
        border-radius: 16px;
    }

@media (max-width: 1400px) {
    .videoList {
        padding: 8rem 0;
    }

        .videoList iframe {
            height: 200px;
        }
}

/* --------------- CATEGORIES SEARCHER --------------- */

.categoriesSearcher {
    padding: 10rem 0;
}

.categoriesSearcher__grid {
    display: flex;
    flex-flow: row wrap;
    justify-content: left;
    gap: 3rem 2rem;
}

.categoriesSearcher .teacherHomeFilters__button img {
    width: 8rem;
    height: 8rem;
    object-fit: contain;
}

.categoriesSearcher .teacherHomeFilters__button-text {
    padding: 1rem;
    font-size: 1.5rem;
    margin-top: 1rem;
}

@media (max-width: 1200px) {
    .categoriesSearcher__bg {
        background-image: unset;
    }
}

@media (max-width: 768px) {
    .categoriesSearcher__grid {
        justify-content: center;
    }
}

@media (max-width: 420px) {
    .categoriesSearcher__grid {
        gap: 5rem 2rem;
    }

    .categoriesSearcher .teacherHomeFilters__button {
        width: 8rem;
    }

        .categoriesSearcher .teacherHomeFilters__button img {
            width: 6rem;
            height: 6rem;
        }

    .categoriesSearcher .teacherHomeFilters__button-text {
        font-size: 1.5rem;
    }
}

.categoriesSearcher__bg .dropdown-menu {
    max-height: 250px;
    overflow-y: auto;
    z-index: 2;
}

    .categoriesSearcher__bg .dropdown-menu::-webkit-scrollbar {
        width: 10px;
        background-color: #fff;
        border-radius: 0 4px 4px 0;
    }

    .categoriesSearcher__bg .dropdown-menu::-webkit-scrollbar-track {
        background: #fff;
    }

    .categoriesSearcher__bg .dropdown-menu::-webkit-scrollbar-thumb {
        background-color: var(--fl-lightBlue);
        border-radius: 10px;
        border: 2px solid #FFFFFF;
    }

/* --------------- CATEGORIES SEARCHER RESULT --------------- */
.categoriesSearcher.result h2 {
    font-weight: 500;
    font-size: 2.25rem;
    color: var(--fl-lightBlue);
    margin: 0 0 3rem 0;
}

.categoriesSearcher.result .categoriesSearcher__grid {
    gap: 4rem 4rem;
}

.categoriesSearcher__bg .dropdown-item {
    background-color: #fff;
    color: var(--fl-black);
}

    .categoriesSearcher__bg .dropdown-item:hover {
        background-color: var(--fl-lightBlue);
        color: #fff;
    }

    .categoriesSearcher__bg .dropdown-item.active {
        background-color: var(--fl-lightBlue);
        color: #fff;
    }

/* --------------- FILTERS BOOK CARD --------------- */

.bookCard {
    width: 100%;
    cursor: pointer;
    user-select: none;
}

.bookCard__img {
    width: 100%;
    height: 18rem;
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem;
    position: relative;
    z-index: 0;
    background-size: cover;
    background-position: center;
}

    .bookCard__img img {
        width: 100%;
        height: 100%;
        border-radius: 0.5rem;
        object-fit: cover;
    }

.bookCard__audio {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem;
    position: absolute;
    bottom: 0;
    z-index: 10;
    padding: 0.5rem 0 0.25rem 0;
    background-image: url(../img/cardAudioBG.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: #ffffff;
    gap: 1rem;
}

.bookCard__lock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 0.5rem;
    position: absolute;
    bottom: 0;
    top: 0;
    z-index: 100;
    padding: 0 1rem;
}

    .bookCard__lock img {
        width: 6rem;
        height: auto;
    }

    .bookCard__lock p {
        color: #fff;
        font-size: 1rem;
        text-align: center;
        margin: 0.5rem 0 0 0;
    }

.bookCard__title {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 100%;
}

    .bookCard__title h6 {
        font-weight: 700;
        font-size: 1.2rem;
        margin: 0.5rem 0.5rem 0.1rem 0.1rem;
        text-align: left;
        color: var(--fl-lightBlue);
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        width: 9.75rem;
    }

.bookCard .bookCard__author {
    font-weight: 200;
    font-size: 1rem;
    color: var(--fl-black);
    opacity: 0.75;
    text-align: left;
    display: block;
    max-width: 12rem;
}

.bookCard__title button {
    all: unset;
    height: 0;
}

.bookCard i.fa-heart.js-heart.heart.fa-lg.far {
    color: var(--fl-black);
    opacity: 0.75;
    width: 1.5rem;
}

.bookCard__title i.fa-lg {
    line-height: unset;
    width: 1.5rem;
    margin: 0.4rem 0.5rem 0 0;
}

.bookCard .fas {
    color: var(--fl-red);
}

.bookCard .heart {
    cursor: pointer;
}

.bookCard .pulse {
    animation: pulse 0.4s;
}

@media (max-width: 400px) {
    .bookCard__lock {
        height: 100%;
        padding: 0 3rem;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

@media (max-width: 540px) {
    .bookCard__img {
        height: 24rem;
    }

    .bookCard__title h6 {
        width: 18rem;
    }
}

@media (max-width: 360px) {
    .bookCard {
        width: 100%;
    }
}

.bookCard__actions {
    width: 100%;
    height: 100%;
}

.bookCard .bookCard__actions {
    background: rgba(190, 190, 190, 0.45);
    border-radius: 0.5rem;
    display: none;
    z-index: 1;
}

.bookCard:hover .bookCard__actions {
    display: block;
}

.bookCard:hover span {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    gap: 1.5rem 0;
    padding: 1rem;
    visibility: visible;
    width: 100%;
    height: 100%;
    animation: fadeIn 0.25s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.bookCard__actions a {
    border-radius: 3rem;
    padding: 0.75rem 0;
    width: 100%;
    font-weight: 400;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-transform: unset;
}

@media (min-width: 992px) {
    .bookCard__actions-responsive {
        display: none;
    }

        .bookCard__actions-responsive button {
            display: none;
        }
}

@media (max-width: 992px) {
    .bookCard:hover .bookCard__actions {
        display: none;
    }

    .bookCard__actions-responsive {
        border-radius: 3rem;
        padding: 0.75rem 0;
        font-weight: 400;
        font-size: 1rem;
        text-align: center;
        text-transform: unset;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        padding: 0.25rem 0;
        margin: 2rem 1rem 0 1rem;
        background-color: var(--fl-yellow);
    }

        .bookCard__actions-responsive a {
            border-radius: 3rem;
            padding: 0rem 0;
            width: 100%;
            font-weight: 400;
            font-size: 1rem;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            text-transform: unset;
        }

            .bookCard__actions-responsive a.btn {
                padding: 0;
                background-color: transparent;
                border-radius: 0.25rem;
                width: 3rem;
                height: 3rem;
                color: #fff;
            }

                .bookCard__actions-responsive a.btn:hover {
                    color: #fff;
                }
}

/* --------------- BOOK LAST PAGE --------------- */

.bookLastPage {
    padding: 4rem 0;
    max-width: 40rem;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.bookLastPage__img {
    width: 100%;
    display: flex;
    justify-content: center;
}

.bookLastPage img {
    width: 100%;
    max-width: 30rem;
}

.bookLastPage h2 {
    font-weight: 700;
    font-size: 1.75rem;
    text-align: center;
    color: var(--fl-lightBlue);
    margin: 3.5rem 0 3rem 0;
}

.bookLastPage__survey {
    display: flex;
    flex-direction: row nowrap;
    justify-content: space-around;
    margin: 0 0 6rem 0;
}

    .bookLastPage__survey a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        cursor: pointer;
    }

        .bookLastPage__survey a p {
            font-weight: 700;
            font-size: 1rem;
            text-align: center;
            color: var(--fl-black);
            opacity: 0.95;
        }

    .bookLastPage__survey img {
        width: 3.5rem;
        margin: 0 0 0.5rem 0;
    }

.bookLastPage__buttons {
    display: flex;
    justify-content: center;
}

@media (max-width: 400px) {
    .bookLastPage h2 {
        font-weight: 600;
        font-size: 1.5rem;
    }

    .bookLastPage__survey {
        justify-content: space-between;
        margin: 0 0 5rem 0;
    }
}

/* --------------- COMMUNICATIONS BANNER --------------- */

.communicationsBanner div:first-child {
    height: 0.1rem;
}

.communicationsBanner__img {
    width: 100%;
    min-height: 40vh;
    height: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../img/communicationsBanner.jpg);
    margin: 4.5rem 0 0 0;
}

@media (max-width: 992px) {
    .communicationsBanner__img {
        display: none;
    }
}

/* --------------- BOOK VIEW --------------- */

.bookReader {
    height: calc(100vh - 74.8px);
}

/* --------------- GAMES MENU --------------- */

.bgGames {
    position: absolute;
    right: 0;
    z-index: -100;
    margin: -15rem 0 0 0;
}

.gamesCard__list {
    margin: 6rem 0 0 0;
    display: flex;
    flex-flow: row wrap;
    gap: 8rem;
}

.gameCard {
    display: flex;
    flex-flow: row nowrap;
    gap: 0 1.25rem;
    width: 30rem;
}

.gameCard_body {
    display: flex;
    flex-direction: column;
}

.gameCard__body h4 {
    margin: 0 0 0.25rem 0;
    font-family: "Averia Libre";
    font-style: normal;
    font-weight: 700;
    font-size: 2.5rem;
}

.trivia .gameCard__body h4 {
    color: var(--fl-green);
}

.links .gameCard__body h4 {
    color: var(--fl-red);
}

.soup .gameCard__body h4 {
    color: var(--fl-purple);
}

.crossword .gameCard__body h4 {
    color: var(--fl-yellow);
}

.gameCard__img img {
    width: 6rem;
    height: 6rem;
}

.gameCard__body P {
    margin: 0 0 1.5rem 0;
    font-weight: 400;
    font-size: 1rem;
    color: #949494;
}

.gameCard__body a {
    float: right;
}

.gameCard.trivia a.btn-primary {
    background: var(--fl-green);
    padding: 1rem 2rem;
}

.gameCard.links a.btn-primary {
    background: var(--fl-red);
    padding: 1rem 2rem;
}

.gameCard.soup a.btn-primary {
    background: var(--fl-purple);
    padding: 1rem 2rem;
}

.gameCard.crossword a.btn-primary {
    background: var(--fl-yellow);
    padding: 1rem 2rem;
}

.gameCard a.btn-primary:hover {
    filter: brightness(1.05);
}

@media (max-width: 1200px) {
    .gamesCard__list {
        display: flex;
        justify-content: center;
    }

    .gameCard,
    .gameCard__body {
        width: 100%;
    }
}

/* --------------- GAMES VIEW --------------- */

.gamesView__bg {
    background-image: url(../img/register__bg.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100vh;
}

.gamesView__body {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-evenly;
    align-items: center;
    gap: 5rem 0;
}

.gamesView__actions {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

    .gamesView__actions button {
        display: flex;
        align-items: center;
    }

.gamesView__actions-game {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 0 2rem;
}

.gamesView__bg .fixed-bottom {
    padding: 1.5rem 0;
    background-color: #fff;
}

@media (min-width: 992px) {
    .gamesView__actions button {
        gap: 0 0.75rem;
    }
}

@media (max-width: 992px) {
    .gamesView__bg .fixed-bottom {
        padding: 0.5rem 0;
    }
}

/* --------------- SUCCESSFUL GAME --------------- */

.successfulGame__title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 2rem;
    width: 100%;
    padding: 6.5rem 0 1rem 0;
}

    .successfulGame__title img {
        margin: 0 0 1.5rem 0;
    }

    .successfulGame__title h2 {
        font-weight: 500;
        font-size: 4rem;
        color: var(--fl-lightBlue);
        text-align: center;
    }

.successfulGame__statistics h5 {
    font-weight: 300;
    font-size: 2rem;
    color: var(--fl-lightBlue);
    text-align: center;
    margin: 0 0 2rem 0;
}

.successfulGame__statistics-results {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    margin: 1.5rem 0 4rem 0;
}

.successfulGame__data {
    text-align: center;
    color: var(--fl-lightBlue);
    font-size: 1.5rem;
}

.successfulGame__number,
.successfulGame__plus {
    font-size: 3rem;
    font-weight: 900;
    line-height: 95%;
}

.successfulGame__bg.trophy {
    background-image: url(../img/bgSuccessfulTrophy.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: fit-content;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    padding: 3rem 6rem;
}

.successfulGame__bg.belt {
    background-image: url(../img/bgSuccessfulBelt.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: fit-content;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    padding: 3rem 6rem;
}

.successfulGame__message {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 20rem 0;
}

.successfulGame__message-body {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 0 2rem;
}

.successfulGame__message-img {
    width: 8rem;
    height: auto;
}

    .successfulGame__message-img.confetti {
        cursor: pointer;
    }

.successfulGame__message-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .successfulGame__message-content h5 {
        font-weight: 700;
        font-size: 1.75rem;
        color: #fff;
    }

    .successfulGame__message-content p {
        font-weight: 300;
        font-size: 1.25rem;
        color: #fff;
    }

.successfulGame__incentive-BG {
    background-image: url(../img/fixed-bottom.svg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding: 3rem 0;
}

.successfulGame__incentive-body {
    display: flex;
    width: 100%;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 100;
}

.successfulGame__incentive-content {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-around;
}

.successfulGame__incentive-text {
    color: #fff;
}

    .successfulGame__incentive-text h5 {
        font-weight: 500;
        font-size: 2.5rem;
        text-align: center;
    }

    .successfulGame__incentive-text p {
        font-weight: 200;
        font-size: 1.5rem;
        text-align: center;
    }

.successfulGame__incentive-buttons {
    display: flex;
    flex-flow: row nowrap;
    gap: 2rem;
}

.successfulGame__incentive-cornets {
    width: 100%;
    height: 100%;
    position: relative;
    bottom: 200px;
}

    .successfulGame__incentive-cornets img {
        width: 20rem;
        user-select: none;
        position: absolute;
    }

        .successfulGame__incentive-cornets img:first-child {
            left: 0;
        }

        .successfulGame__incentive-cornets img:last-child {
            right: 0;
        }

.successfulGame__incentive-buttons .btn-resources-white {
    color: var(--fl-lightBlue);
}

    .successfulGame__incentive-buttons .btn-resources-white:hover {
        filter: brightness(1.05);
        color: var(--fl-lightBlue);
    }

@media (width < 992px ) {
    .successfulGame .fixed-bottom {
        position: relative;
    }
}

.wobble-ver-left {
    -webkit-animation: wobble-ver-left 1.25s linear 0.25s both;
    animation: wobble-ver-left 1.25s linear 0.25s both;
}

.wobble-ver-right {
    -webkit-animation: wobble-ver-right 1.5s linear 0.25s both;
    animation: wobble-ver-right 1.5s linear 0.25s both;
}

@-webkit-keyframes wobble-ver-left {

    0%, 100% {
        -webkit-transform: translateY(0) rotate(0);
        transform: translateY(0) rotate(0);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }

    15% {
        -webkit-transform: translateY(-30px) rotate(-6deg);
        transform: translateY(-30px) rotate(-6deg);
    }

    30% {
        -webkit-transform: translateY(15px) rotate(6deg);
        transform: translateY(15px) rotate(6deg);
    }

    45% {
        -webkit-transform: translateY(-15px) rotate(-3.6deg);
        transform: translateY(-15px) rotate(-3.6deg);
    }

    60% {
        -webkit-transform: translateY(9px) rotate(2.4deg);
        transform: translateY(9px) rotate(2.4deg);
    }

    75% {
        -webkit-transform: translateY(-6px) rotate(-1.2deg);
        transform: translateY(-6px) rotate(-1.2deg);
    }
}

@keyframes wobble-ver-left {

    0%, 100% {
        -webkit-transform: translateY(0) rotate(0);
        transform: translateY(0) rotate(0);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }

    15% {
        -webkit-transform: translateY(-30px) rotate(-6deg);
        transform: translateY(-30px) rotate(-6deg);
    }

    30% {
        -webkit-transform: translateY(15px) rotate(6deg);
        transform: translateY(15px) rotate(6deg);
    }

    45% {
        -webkit-transform: translateY(-15px) rotate(-3.6deg);
        transform: translateY(-15px) rotate(-3.6deg);
    }

    60% {
        -webkit-transform: translateY(9px) rotate(2.4deg);
        transform: translateY(9px) rotate(2.4deg);
    }

    75% {
        -webkit-transform: translateY(-6px) rotate(-1.2deg);
        transform: translateY(-6px) rotate(-1.2deg);
    }
}

@-webkit-keyframes wobble-ver-right {

    0%, 100% {
        -webkit-transform: translateY(0) rotate(0);
        transform: translateY(0) rotate(0);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }

    15% {
        -webkit-transform: translateY(-30px) rotate(6deg);
        transform: translateY(-30px) rotate(6deg);
    }

    30% {
        -webkit-transform: translateY(15px) rotate(-6deg);
        transform: translateY(15px) rotate(-6deg);
    }

    45% {
        -webkit-transform: translateY(-15px) rotate(3.6deg);
        transform: translateY(-15px) rotate(3.6deg);
    }

    60% {
        -webkit-transform: translateY(9px) rotate(-2.4deg);
        transform: translateY(9px) rotate(-2.4deg);
    }

    75% {
        -webkit-transform: translateY(-6px) rotate(1.2deg);
        transform: translateY(-6px) rotate(1.2deg);
    }
}

@keyframes wobble-ver-right {

    0%, 100% {
        -webkit-transform: translateY(0) rotate(0);
        transform: translateY(0) rotate(0);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }

    15% {
        -webkit-transform: translateY(-30px) rotate(6deg);
        transform: translateY(-30px) rotate(6deg);
    }

    30% {
        -webkit-transform: translateY(15px) rotate(-6deg);
        transform: translateY(15px) rotate(-6deg);
    }

    45% {
        -webkit-transform: translateY(-15px) rotate(3.6deg);
        transform: translateY(-15px) rotate(3.6deg);
    }

    60% {
        -webkit-transform: translateY(9px) rotate(-2.4deg);
        transform: translateY(9px) rotate(-2.4deg);
    }

    75% {
        -webkit-transform: translateY(-6px) rotate(1.2deg);
        transform: translateY(-6px) rotate(1.2deg);
    }
}

@media (max-width: 1400px) {
    .successfulGame__incentive-content {
        justify-content: center;
        gap: 1rem;
    }

    .successfulGame__incentive-cornets img {
        width: 15rem;
    }
}

@media (max-width: 1250px) {
    .successfulGame__incentive-content {
        justify-content: center;
        flex-flow: column;
        gap: 1rem;
    }
}

@media (max-width: 992px) {
    .successfulGame__bg.belt {
        background-image: unset;
        padding: 3rem 1rem;
    }

    .successfulGame__bg.trophy {
        background-image: unset;
        padding: 3rem 1rem;
    }

    .successfulGame__incentive-content {
        justify-content: center;
        flex-flow: column;
        gap: 1rem;
    }

    .successfulGame__incentive-cornets img {
        display: none;
    }

    .successfulGame__message-content p,
    .successfulGame__message-content h5 {
        color: var(--fl-lightBlue);
    }

    .successfulGame__statistics-results {
        gap: 2rem 0;
    }
}

@media (max-width: 576px) {
    .successfulGame__statistics {
        margin-bottom: 20rem;
    }

    .successfulGame__statistics-results {
        gap: 3rem 0;
    }

    .successfulGame__message-body {
        flex-flow: row wrap;
        justify-content: center;
        gap: 2rem;
    }

    .successfulGame__message-content h5,
    .successfulGame__message-content p {
        text-align: center;
    }

    .successfulGame__incentive-buttons {
        gap: 0.5rem;
    }

        .successfulGame__incentive-buttons .btn-secondary,
        .successfulGame__incentive-buttons .btn-resources-white {
            padding: 1.25rem 1rem;
        }

    .successfulGame__title h2 {
        font-size: 3rem;
    }

    .successfulGame__statistics h5 {
        font-size: 1.5rem;
    }
}

/* --------------- TRY AGAIN GAME --------------- */

.tryAgainGame {
    padding: 10rem 0 13rem 0;
}

.tryAgainGame__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem 0;
}

.tryAgainGame__img {
    width: 15rem;
}

.tryAgainGame__title h2 {
    font-weight: 500;
    font-size: 2.5rem;
    color: var(--fl-lightBlue);
    text-align: center;
}

.tryAgainGame__title h5 {
    font-weight: 300;
    font-size: 1.5rem;
    color: var(--fl-lightBlue);
    text-align: center;
    margin: 1rem 0 2rem 0;
}

.tryAgainGame__buttons {
    display: flex;
    flex-flow: row nowrap;
    gap: 2rem;
}

.tryAgainGame__lens {
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
}

.tryAgainGame__message-bg {
    background-image: url(../img/fixed-bottom.svg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding: 3rem 0;
}

.tryAgainGame__message-body {
    display: flex;
    width: 100%;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 100;
    gap: 2.5rem;
}

.tryAgainGame__message-text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: #fff;
}

    .tryAgainGame__message-text h5 {
        font-weight: 500;
        font-size: 2.5rem;
        text-align: center;
    }

    .tryAgainGame__message-text p {
        font-weight: 200;
        font-size: 1.5rem;
        text-align: center;
    }

.tryAgainGame .btn.btn-resources-white {
    color: var(--fl-lightBlue);
}

@media (max-width: 1400px) {
    .tryAgainGame__lens img {
        width: 14rem;
        position: relative;
        bottom: 2rem;
    }

    .tryAgainGame__message-bg {
        padding: 1.5rem 0;
    }
}

@media (max-width: 992px) {
    .tryAgainGame__message-body {
        flex-direction: column;
    }

    .tryAgainGame {
        padding: 10rem 0 20rem 0;
    }
}

@media (max-width: 768px) {
    .tryAgainGame {
        padding: 10rem 0 30rem 0;
    }

    .tryAgainGame__buttons {
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 420px) {

    .tryAgainGame__buttons .btn-purple,
    .tryAgainGame__buttons .btn-secondary,
    .tryAgainGame__buttons .btn-primary {
        width: 100%;
    }
}

/* --------------- STUDENT PROFILE HEADER --------------- */

.studentProfile__header .pageInternal__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    word-break: break-all;
}

    .studentProfile__header .pageInternal__title h2 {
        font-weight: 700;
        font-size: 5rem;
        color: #ffffff;
    }

    .studentProfile__header .pageInternal__title p {
        font-weight: 400;
        font-size: 2rem;
        color: #ffffff;
    }

.studentProfile__header .pageInternal__content img {
    width: 9rem;
    border-radius: 100%;
}

@media (max-width: 576px) {
    .pageInternal__content {
        flex-direction: column;
        align-items: center;
    }

    .studentProfile__header .pageInternal__content img {
        width: 12rem;
    }

    .studentProfile__header .pageInternal__title {
        align-items: center;
    }

        .studentProfile__header .pageInternal__title h2 {
            text-align: center;
            font-size: 4rem;
        }

        .studentProfile__header .pageInternal__title p {
            text-align: center;
            font-size: 1.5rem;
        }
}

/* --------------- STUDENT PROFILE BANNERS --------------- */

.studentProfile__banners {
    margin: 4rem 0 6rem 0;
}

    .studentProfile__banners .carousel-item {
        height: 40rem;
    }

    .studentProfile__banners .carousel-indicators {
        margin-bottom: 0;
        gap: 1rem;
    }

.carousel-indicators [data-bs-target] {
    background-color: var(--fl-lightBlue);
    border-radius: 50%;
    width: 1.25rem;
    height: 1.25rem;
}

.studentProfile__banners .carousel-control-prev {
    height: 75vh;
}

.studentProfile__banners .carousel-control-prev-icon {
    background-image: url(../img/chevronLeft.svg);
    width: 2.5rem;
    height: 2.5rem;
}

.studentProfile__banners .carousel-control-next {
    height: 75vh;
}

.studentProfile__banners .carousel-control-next-icon {
    background-image: url(../img/chevronRight.svg);
    width: 2.5rem;
    height: 2.5rem;
}

.studentProfile__banners .welcome,
.studentProfile__banners .newChallenge,
.studentProfile__banners .challengeAchieved,
.studentProfile__banners .newTournament,
.studentProfile__banners .tournamentAchieved {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.studentProfile__banners .welcome__body,
.studentProfile__banners .newChallenge__body,
.studentProfile__banners .challengeAchieved__body {
    max-width: 60rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .studentProfile__banners .welcome__body h2,
    .studentProfile__banners .newChallenge__body h2,
    .studentProfile__banners .challengeAchieved__body h2,
    .studentProfile__banners .newTournament__body h2,
    .studentProfile__banners .tournamentAchieved__body h2 {
        font-weight: 700;
        font-size: 3.5rem;
        text-align: center;
        color: var(--fl-lightBlue);
        margin-top: 1rem;
    }

    .studentProfile__banners .welcome__body p,
    .studentProfile__banners .newChallenge__body p,
    .studentProfile__banners .challengeAchieved__body p,
    .studentProfile__banners .newTournament__body p,
    .studentProfile__banners .tournamentAchieved__body p {
        font-weight: 300;
        font-size: 1.75rem;
        text-align: center;
        color: #868686;
        margin: 1rem 0 2rem 0;
        padding: 0 6rem;
    }

.studentProfile__banners .welcome .welcome__body .welcome__body-img,
.studentProfile__banners .newChallenge .newChallenge__body .newChallenge__body-img,
.studentProfile__banners .challengeAchieved .challengeAchieved__body .challengeAchieved__body-img {
    width: 100%;
    display: flex;
    justify-content: center;
}

.studentProfile__banners .welcome .welcome__body-img img,
.studentProfile__banners .newChallenge .newChallenge__body-img img,
.studentProfile__banners .challengeAchieved .challengeAchieved__body-img img {
    width: 25rem;
}

.studentProfile__banners .welcome .welcome__footer,
.studentProfile__banners .newChallenge .newChallenge__footer,
.studentProfile__banners .challengeAchieved .challengeAchieved__footer {
    background-image: url(../img/fixed-bottom.svg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    padding: 2.5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .studentProfile__banners .welcome .welcome__footer h5,
    .studentProfile__banners .newChallenge .newChallenge__footer h5,
    .studentProfile__banners .challengeAchieved .challengeAchieved__footer h5 {
        color: #fff;
        text-align: center;
        font-weight: 700;
        font-size: 2.4rem;
    }

@media (max-width: 1200px) {
    .studentProfile__banners .carousel-item {
        height: auto;
    }
}

@media (max-width: 576px) {

    .studentProfile__banners .welcome__body p,
    .studentProfile__banners .newChallenge__body p,
    .studentProfile__banners .challengeAchieved__body p,
    .studentProfile__banners .newTournament__body p,
    .studentProfile__banners .tournamentAchieved__body p {
        padding: 0;
        font-size: 1.25rem;
    }

    .studentProfile__banners .welcome__body h2,
    .studentProfile__banners .newChallenge__body h2,
    .studentProfile__banners .challengeAchieved__body h2,
    .studentProfile__banners .newTournament__body h2,
    .studentProfile__banners .tournamentAchieved__body h2 {
        font-size: 2.5rem;
    }

    .studentProfile__banners .welcome .welcome__body-img img,
    .studentProfile__banners .newChallenge .newChallenge__body-img img,
    .studentProfile__banners .challengeAchieved .challengeAchieved__body-img img {
        margin: 4rem 0;
    }
}

/* --------------- STUDENT PROFILE BANNERS NEW CHALLENGE --------------- */

.newChallenge__body span.toOrange {
    color: #ff7f00;
}

.newChallenge__body span.toOrange {
    color: #ff7f00;
}

.newChallenge__body span.toBlue {
    color: #0000ff;
}

.newChallenge__body span.toBlack {
    color: var(--fl-black);
}

/* --------------- STUDENT PROFILE BANNERS CHALLENGE ACHIEVED --------------- */

.challengeAchieved {
    background-image: url(../img/CornetsBG.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* --------------- STUDENT PROFILE BANNERS NEW TOURNAMENT --------------- */

.studentProfile__banners .newTournament {
    background-image: url(../img/newTournamentBG.svg);
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
}

.studentProfile__banners .newTournament__body h2 {
    text-align: left;
    padding: 0 8rem 0 0;
}

.studentProfile__banners .newTournament__body p {
    text-align: left;
    font-size: 1.5rem;
    padding: 0 20rem 0 0;
}

.studentProfile__banners .newTournament__info span {
    color: var(--fl-green);
    font-weight: 700;
}

.newTournament__img {
    display: flex;
    justify-content: center;
}

@media (max-width: 1400px) {
    .studentProfile__banners .newTournament__body p {
        padding: 0 8rem 0 0;
    }
}

/* --------------- STUDENT PROFILE BANNERS TOURNAMENT ACHIEVED --------------- */

.studentProfile__banners .tournamentAchieved {
    background-image: url(../img/tournamentAchievedBG.svg);
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
}

.studentProfile__banners .tournamentAchieved__body h2 {
    text-align: left;
    padding: 0 8rem 0 0;
    font-weight: 700;
    font-size: 6rem;
    margin: 0 0 1rem 0;
}

.studentProfile__banners .tournamentAchieved__body h3 {
    text-align: left;
    padding: 0 8rem 0 0;
    font-weight: 500;
    font-size: 2.5rem;
    color: var(--fl-lightBlue);
    margin: 0 0 1rem 0;
}

    .studentProfile__banners .tournamentAchieved__body h3 span.bronze {
        color: #dc8750;
        text-transform: uppercase;
    }

    .studentProfile__banners .tournamentAchieved__body h3 span.plate {
        color: #ced7d6;
        text-transform: uppercase;
    }

    .studentProfile__banners .tournamentAchieved__body h3 span.golden {
        color: #d4ba66;
        text-transform: uppercase;
    }

    .studentProfile__banners .tournamentAchieved__body h3 span.platinum {
        color: #b0b0b0;
        text-transform: uppercase;
    }

.studentProfile__banners .tournamentAchieved__body p {
    text-align: left;
    font-size: 1.5rem;
    padding: 0 2rem 0 0;
    margin: 0 0 4rem 0;
}

    .studentProfile__banners .tournamentAchieved__body p span {
        color: var(--fl-green);
        font-weight: 700;
    }

@media (max-width: 1200px) {
    .studentProfile__banners .tournamentAchieved__img {
        max-width: 25rem;
    }

    .studentProfile__banners .tournamentAchieved__body h2,
    .studentProfile__banners .newTournament__body h2 {
        padding: 0;
        font-size: 4rem;
    }

    .studentProfile__banners .tournamentAchieved__body h3 {
        padding: 0;
        font-size: 2rem;
    }

    .studentProfile__banners .tournamentAchieved__body p,
    .studentProfile__banners .newTournament__body p {
        margin: 0 0 3rem 0;
        padding: 0;
    }
}

@media (min-width: 576px) and (max-width: 992px) {

    .studentProfile__banners .tournamentAchieved__img,
    .studentProfile__banners .newTournament__img {
        max-width: 25rem;
    }
}

/* --------------- STATISTICS CIRCLE PROFILE STUDENT --------------- */

.statisticsCircles {
    background-image: url(../img/bgPurpleProfile.svg);
    height: 100%;
    padding: 6rem 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.statisticsCircles__container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    position: relative;
}

.statisticsCircles__statistics {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 250px;
    height: 250px;
}

    .statisticsCircles__statistics h4 {
        font-weight: 900;
        font-size: 4.5rem;
        color: #FFFFFF;
    }

    .statisticsCircles__statistics h6 {
        font-weight: 400;
        font-size: 1.5rem;
        color: #FFFFFF;
    }

    .statisticsCircles__statistics.white h4,
    .statisticsCircles__statistics.white h6 {
        color: var(--fl-purple);
    }

.statisticsCircles__grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    grid-gap: 10px;
}

.statisticsCircles__statistics.yellow {
    background-image: url(../img/bgCircleYellow.svg);
    grid-area: 2 / 1 / 2 / 1;
}

.statisticsCircles__statistics.green {
    background-image: url(../img/bgCircleGreen.svg);
    grid-area: 1 / 2 / 1 / 2;
}

.statisticsCircles__statistics.red {
    background-image: url(../img/bgCircleRed.svg);
    grid-area: 2 / 3 / 2 / 3;
}

.statisticsCircles__statistics.white {
    background-image: url(../img/bgCircleWhite.svg);
    grid-area: 1 / 4 / 1 / 4;
}

.statisticsCircles__statistics.blue {
    background-image: url(../img/bgCircleBlue.svg);
    grid-area: 2 / 5 / 2 / 5;
}

@media (max-width: 1400px) {
    .statisticsCircles__grid-container {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        gap: 1rem 10rem;
    }
}

/* --------------- DIPLOMAS PROFILE --------------- */

.diplomaProfile {
    margin: 10rem 0;
}

    .diplomaProfile h2 {
        font-weight: 500;
        font-size: 2rem;
        color: var(--fl-lightBlue);
        margin: 0 0 2rem 0;
    }

.diplomaProfile__list {
    display: flex;
    flex-flow: row wrap;
    gap: 2rem 1.25rem;
    margin: 0 0 3.5rem 0;
}

.diplomaProfile__card-bg {
    border-radius: 0.5rem;
    cursor: pointer;
    user-select: none;
    position: relative;
    width: 400px;
    height: 225px;
}

.diplomaProfile__img {
    background-image: url(../img/diplomaExample.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    border-radius: 0.5rem;
    position: absolute;
    z-index: 0;
}

.diplomaProfile__download {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}

    .diplomaProfile__download span {
        background-color: #5200c5dc;
        border-radius: 0.5rem;
        visibility: hidden;
    }

.diplomaProfile__card-bg:hover span {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    visibility: visible;
    width: 100%;
    height: 100%;
}

    .diplomaProfile__card-bg:hover span button {
        -webkit-animation: slide-in-bottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: slide-in-bottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }

@-webkit-keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 992px) {
    .diplomaProfile__list {
        display: flex;
        gap: 5rem 3rem;
    }

    .diplomaProfile__card-bg {
        width: 320px;
        height: 280px;
    }
}

@media (max-width: 768px) {
    .diplomaProfile__list {
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .diplomaProfile__card-bg {
        width: 100%;
    }
}

@media (max-width: 576px) {

    .diplomaProfile__card {
        width: 100%;
    }

    .diplomaProfile__card-bg {
        width: 100%;
    }
}

/* --------------- STUDENT PROFILE MY BOOKS --------------- */

.myBooksProfile {
    margin: 10rem 0 12rem 0;
}

    .myBooksProfile h2 {
        font-weight: 500;
        font-size: 2rem;
        color: var(--fl-lightBlue);
        margin: 0 0 2rem 0;
    }

.myBooksProfile__list {
    display: flex;
    flex-flow: row wrap;
    gap: 2rem 1.25rem;
    margin: 0 0 3.5rem 0;
}

@media (max-width: 576px) {
    .myBooksProfile__list {
        justify-content: center;
    }
}

.myBooksProfile .bgMyBooksProfile {
    width: 100%;
    position: absolute;
    z-index: -1;
}

    .myBooksProfile .bgMyBooksProfile img {
        position: relative;
        width: 100%;
        max-width: 500px;
        float: right;
        bottom: 120px;
        right: 0px;
        z-index: -1;
    }

@media (max-width: 1400px) {
    .myBooksProfile .bgMyBooksProfile {
        display: none;
    }
}

/* --------------- STUDENT PROFILE MY CHALLENGES --------------- */

.myChallengesProfile {
    margin: 10rem 0;
}

    .myChallengesProfile h2 {
        font-weight: 500;
        font-size: 2rem;
        color: var(--fl-lightBlue);
        margin: 0 0 2rem 0;
    }

.myChallengesProfile__list {
    display: flex;
    flex-flow: row wrap;
    gap: 2rem 1.25rem;
    margin: 0 0 3.5rem 0;
}

    .myChallengesProfile__list .challenge__item {
        width: auto;
        padding: 2.25rem 0.75rem;
        margin: 0;
    }

.myChallengesProfile .challenge__illustration-size {
    width: 120px;
    height: 150px;
    margin: 0 0 0.5rem;
    object-fit: contain;
}

.myChallengesProfile__list .challenge__item .hr {
    width: 100%;
}

.challenge__item h6.text-truncate {
    max-width: 10rem;
    display: block;
}


@media (max-width: 778px) {
    .myChallengesProfile .challenge__item {
        margin: 0 1rem;
    }
}

@media (max-width: 576px) {
    .myChallengesProfile__list {
        justify-content: center;
    }

        .myChallengesProfile__list .challenge__item {
            width: 100%;
        }

    .myChallengesProfile .challenge__illustration-size {
        width: 180px;
        height: 220px;
        margin: -1rem 0 1.5rem;
    }

    .myChallengesProfile .challenge__item {
        margin: 0 2rem;
    }

    .challenge__item h6.text-truncate {
        max-width: 14rem;
    }
}


/* --------------- STUDENT PROFILE RANKING --------------- */

.rankingProfile {
    margin: 10rem 0;
}

.rankingProfile__title {
    display: flex;
    flex-direction: column;
    gap: 1.25rem 0;
    margin: 0 0 5rem 0;
}

    .rankingProfile__title h2 {
        font-weight: 700;
        font-size: 6rem;
        color: var(--fl-lightBlue);
    }

    .rankingProfile__title p {
        font-weight: 400;
        font-size: 2rem;
        color: var(--fl-lightBlue);
        line-height: 125%;
    }

.rankingProfile__top {
    padding: 0 4rem;
}

    .rankingProfile__top h5 {
        font-weight: 700;
        font-size: 2.5rem;
        color: var(--fl-lightBlue);
        margin-bottom: 1.5rem;
    }

.rankingProfile__top-results {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
}

.rankingProfile__top img.hr {
    margin-top: 4rem;
    width: 100%;
}

.rankingProfile__top-results-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 6rem;
}

    .rankingProfile__top-results-item h6 {
        font-weight: 500;
        font-size: 1.5rem;
        text-align: center;
        color: var(--fl-lightBlue);
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .rankingProfile__top-results-item p {
        font-weight: 300;
        font-size: 1rem;
        text-align: center;
        color: var(--fl-lightBlue);
        margin: 0.2rem 0 0 0;
    }

.rankingProfile__top-podium {
    position: relative;
}

.rankingProfile__medal {
    width: 2.5rem;
    height: auto;
    position: absolute;
    z-index: 1;
    right: 0;
}

.rankingProfile__top-avatar {
    width: 6rem;
    height: 6rem;
    margin: 0 0 0.5rem 0;
}

.rankingProfile__general h5 {
    font-weight: 700;
    font-size: 2.5rem;
    color: var(--fl-lightBlue);
    margin-bottom: 0;
}

.rankingProfile__table {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem 0;
}

.rankingProfile__table-tr {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: #fff;
    border-radius: 0.25rem;
}

    .rankingProfile__table-tr.active {
        background: rgba(0, 143, 190, 0.1);
        border-radius: 0.25rem;
    }

.rankingProfile__table-tr-data {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 0 1rem;
}

.rankingProfile__table-avatar {
    width: 3rem;
    height: 3rem;
}

    .rankingProfile__table-avatar img {
        width: 100%;
        height: auto;
    }

.rankingProfile__table-position,
.rankingProfile__table-name,
.rankingProfile__table-tr-points {
    font-weight: 700;
    font-size: 1.5rem;
    text-align: center;
    color: var(--fl-lightBlue)
}

    .rankingProfile__table-name.text-truncate {
        display: block;
        max-width: 16rem;
    }

.rankingProfile__general p {
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--fl-lightBlue);
    margin-bottom: 1rem;
}

@media (max-width: 1400px) {
    .rankingProfile__table-name.text-truncate {
        max-width: 10rem;
    }
}

@media (max-width: 1200px) {
    .rankingProfile__top {
        padding: 0 1rem;
    }
}

@media (max-width: 992px) {
    .rankingProfile__general {
        margin: 4rem 0;
    }

    .rankingProfile__top-results {
        justify-content: space-between;
    }

    .rankingProfile__table-name.text-truncate {
        max-width: 24rem;
    }
}

@media (max-width: 768px) {
    .rankingProfile__table-name.text-truncate {
        max-width: 10rem;
    }
}

@media (max-width: 576px) {
    .rankingProfile__title h2 {
        font-size: 5rem;
    }

    .rankingProfile__title p {
        font-size: 2rem;
    }

    .rankingProfile__top {
        padding: 0;
    }

    .rankingProfile__top-avatar {
        width: 4rem;
        height: 4rem;
    }

    .rankingProfile__medal {
        width: 2rem;
    }

    .rankingProfile__general {
        margin: 6rem 0;
    }

    .rankingProfile__top-results {
        justify-content: space-between;
    }

    .rankingProfile__top-results-item h6 {
        max-width: 6rem;
    }

    .rankingProfile__table-tr {
        padding: 0.75rem 0rem;
    }

    .rankingProfile__table-name.text-truncate {
        max-width: 7rem;
    }
}





/* --------------- TEACHER INBOX --------------- */

.teacherInbox {
    margin: 8rem 0 20rem 0;
}

    .teacherInbox h2 {
        font-weight: 500;
        font-size: 2.25rem;
        color: var(--fl-lightBlue);
        margin: 0 0 2rem 0;
    }

.teacherInbox__list {
    display: flex;
    flex-direction: column;
    gap: 1rem 0;
}

.teacherInbox__message {
    border-left: 4px solid transparent;
    background: #FAFAFA;
    padding: 1rem 2rem;
    cursor: pointer;
}

    .teacherInbox__message h3 {
        font-weight: 500;
        font-size: 1.25rem;
        color: var(--fl-lightBlue);
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .teacherInbox__message h6 {
        font-weight: 300;
        font-size: 1rem;
        color: var(--fl-lightBlue);
        margin: 0.5rem 0;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .teacherInbox__message p {
        font-weight: 300;
        font-size: 1rem;
        color: var(--fl-black);
        opacity: 0.75;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .teacherInbox__message.unread {
        border-left: 4px solid var(--fl-lightBlue);
        background: #F8FDFF;
    }

.teacherInbox__actions {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin: 3rem 0 6rem 0;
    gap: 0 2rem;
    justify-content: flex-end;
}

@media (max-width: 992px) {
    .teacherInbox__actions button {
        width: 100%;
    }

    .teacherInbox {
        margin: 8rem 0 30rem 0;
    }
}

@media (max-width: 778px) {
    .teacherInbox__actions {
        flex-direction: column;
        gap: 2rem 0;
    }

        .teacherInbox__actions button {
            width: 100%;
        }
}

/* --------------- TEACHER LAST NEWS --------------- */

.lastNews {
    margin: 6rem 0 18rem 0;
}

    .lastNews h2 {
        font-weight: 500;
        font-size: 2.25rem;
        color: var(--fl-lightBlue);
        margin: 0 0 2rem 0;
    }

.lastNews__list {
    display: flex;
    flex-flow: row wrap;
    gap: 3rem;
}

.lastNews__card {
    width: 24rem;
    background-color: #fff;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.1);
    border-radius: 0px 0px 0.75rem 0.75rem;
    cursor: pointer;
}

    .lastNews__card:hover {
        filter: brightness(1.025);
    }

.lastNews__card-img {
    width: 100%;
    height: 250px;
    overflow: hidden;
    border-radius: 0.75rem 0.75rem 0 0;
}

    .lastNews__card-img img {
        width: 100%;
        height: 100%;
        border-radius: 0.75rem 0.75rem 0 0;
        object-fit: cover;
        transition: 0.25s all ease-in-out;
    }

.lastNews__card:hover .lastNews__card-img img {
    transform: scale(1.05);
}

.lastNews__item-body {
    padding: 1.5rem 1.5rem 3rem 1.5rem;
}

    .lastNews__item-body h5 {
        font-weight: 700;
        font-size: 1.5rem;
        color: var(--fl-lightBlue);
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        margin-bottom: 1rem;
    }

    .lastNews__item-body p {
        font-weight: 400;
        font-size: 1.25rem;
        color: var(--fl-blacks);
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom: 1rem;
        opacity: 0.75;
    }

@media (max-width: 1400px) {
    .lastNews__list {
        justify-content: unset;
    }
}

@media (max-width: 992px) {
    .lastNews__card {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .lastNews {
        margin: 6rem 0 30rem 0;
    }
}

/* --------------- COMMUNICATIONS BOTTOM BANNER--------------- */

.communicationsFooter {
    background-image: url(../img/communicationsFooter.svg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
    padding: 3rem 0;
}

.communicationsFooter__body {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 3rem;
}

.communicationsFooter__title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

    .communicationsFooter__title h5 {
        font-weight: 700;
        font-size: 2.5rem;
        color: #FFFFFF;
        text-align: center;
    }

    .communicationsFooter__title p {
        font-weight: 300;
        font-size: 2.25rem;
        color: #FFFFFF;
        text-align: center;
    }

.communicationsFooter__rrss {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 0 4.5rem;
    color: #fff;
}


.communicationsFooter .close {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

    .communicationsFooter .close button {
        font-size: 2rem;
        color: #fff;
        border: 0;
    }

        .communicationsFooter .close button:hover {
            color: #fff;
        }

.communicationsFooter.offcanvas {
    justify-content: center;
    border: 0;
    background-color: transparent;
    --bs-offcanvas-height: 25vh;
}

.communicationsFooter__rrss a:hover {
    color: #fff;
}

@media (max-width: 1400px) {
    .communicationsFooter__body {
        justify-content: center;
        gap: 2rem;
    }

    .communicationsFooter.offcanvas {
        justify-content: center;
        border: 0;
        background-color: transparent;
        --bs-offcanvas-height: 35vh;
    }
}

@media (max-width: 992px) {
    .communicationsFooter__title {
        gap: 0;
    }

    .communicationsFooter__body {
        gap: 0.5rem;
    }

    .communicationsFooter.offcanvas {
        --bs-offcanvas-height: 40vh;
    }
}

@media (max-width: 576px) {
    .communicationsFooter__title h5 {
        font-size: 2rem;
    }

    .communicationsFooter__title p {
        font-size: 1.75rem;
    }

    .communicationsFooter__rrss {
        gap: 2rem;
        flex-flow: row wrap;
        justify-content: center;
    }

    .communicationsFooter__body {
        padding: 0;
    }
}

/* --------------- MESSAGE READ --------------- */

.messageRead {
    margin: 3rem 0 20rem 0;
}

    .messageRead h2 {
        font-weight: 500;
        font-size: 2.25rem;
        color: var(--fl-lightBlue);
        margin: 2rem 0 1rem 0;
    }

    .messageRead h5 {
        font-weight: 400;
        font-size: 1.5rem;
        color: var(--fl-lightBlue);
        margin: 0 0 1.5rem 0;
    }

    .messageRead p {
        font-weight: 300;
        font-size: 1.25rem;
        color: rgba(88, 88, 88, 0.75);
    }

@media (max-width: 1200px) {
    .messageRead {
        margin: 6rem 0 30rem 0;
    }
}

/* ---------------- BOOK GAMES ---------------- */

.gamesAvailable h2 {
    font-weight: 700;
    font-size: 2rem;
    color: var(--fl-lightBlue);
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    margin-bottom: 1rem;
}

.bookGames {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    margin: 2rem 8rem;
}

.bookGames__button {
    border-radius: 1rem;
    color: #fff;
    max-width: 22rem;
    height: 12rem;
}

    .bookGames__button.trivia {
        background-image: url(../img/TriviaCardBG.svg);
        background-repeat: no-repeat;
        background-size: inherit;
        background-color: var(--fl-lightBlue);
        order: 1;
    }

    .bookGames__button.letterSoup {
        background-image: url(../img/SoupCardBG.svg);
        background-repeat: no-repeat;
        background-size: cover;
        background-color: var(--fl-purple);
        order: 2;
    }

    .bookGames__button.joinWithArrows {
        background-image: url(../img/ArrowsCardBG.svg);
        background-repeat: no-repeat;
        background-size: inherit;
        background-color: var(--fl-yellow);
        order: 3;
    }

    .bookGames__button.crossword {
        background-image: url(../img/crossWordsCardBG.svg);
        background-repeat: no-repeat;
        background-size: inherit;
        background-color: var(--fl-red);
        order: 4;
    }

.bookGames__gameTitle {
    font-family: "Averia Libre";
    font-weight: 500;
    font-size: 2.5rem;
    padding: 2rem 1.5rem 0 1.5rem;
}

a:hover .bookGames__gameTitle {
    color: #fff;
    text-decoration: underline #fff;
    text-underline-offset: 5px;
}

.bookGames__gameBody {
    font-weight: 100;
    font-size: 0.95rem;
    letter-spacing: 0.13rem;
    padding: 0 1.5rem 2rem 1.5rem;
}

a:hover .bookGames__gameBody {
    color: #fff;
}

/* --------------- LIBRARY SECTION BUTTON --------------- */

.librarySectionButton {
    display: flex;
    justify-content: center;
}

/* ---------------- KID ACCESS ---------------- */

.kidAccess {
    padding: 9rem 0;
}

    .kidAccess h2 {
        font-weight: 500;
        font-size: 2.5rem;
        text-align: center;
        color: var(--fl-lightBlue);
        margin-bottom: 3rem;
    }

    .kidAccess .kidAccessContainer {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 5rem;
    }

    .kidAccess .card {
        padding: 3rem 2.25rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 20rem;
        gap: 2rem;
        border-radius: 1.25rem;
    }

        .kidAccess .card.withCode {
            border: 2px solid var(--fl-green);
        }

        .kidAccess .card.withoutCode {
            border: 2px solid var(--fl-red);
        }

    .kidAccess .imageText {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1rem;
        align-items: center;
    }

    .kidAccess .card img {
        width: 12rem;
        object-fit: contain;
    }

    .kidAccess .card p {
        font-weight: 500;
        font-size: 20px;
        line-height: 175%;
        text-align: center;
    }

    .kidAccess .card.withCode p {
        color: var(--fl-green);
    }

    .kidAccess .card.withoutCode p {
        color: var(--fl-red);
    }

.homeFooterFixed {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
}

    .homeFooterFixed h5 {
        font-weight: 700;
        font-size: 40px;
        line-height: 48px;
        color: #fff;
    }

@media (max-width: 1900px) {
    .kidAccess {
        padding: 9rem 0 14rem 0;
    }
}

@media (max-width: 1200px) {
    .kidAccess {
        padding: 9rem 0 20rem 0;
    }

    .homeFooterFixed {
        flex-flow: column nowrap;
        justify-content: center;
        text-align: center;
        gap: 1.5rem;
    }
}

@media (max-width: 992px) {
    .kidAccess {
        padding: 9rem 0 22rem 0;
    }
}

@media (max-width: 766px) {
    .kidAccess .kidAccessContainer {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 400px) {
    .kidAccess .card {
        width: 100%;
    }
}

/* ---------------- SELECT PROFILE ---------------- */

.selectProfile {
    padding: 9rem 0;
}

    .selectProfile h2 {
        font-weight: 500;
        font-size: 2.5rem;
        text-align: center;
        color: var(--fl-lightBlue);
        margin-bottom: 3rem;
    }

    .selectProfile .selectProfileContainer {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 5rem;
    }

    .selectProfile .card {
        padding: 3rem 2.25rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 20rem;
        gap: 2rem;
        border-radius: 1.25rem;
    }

        .selectProfile .card.imTeacher {
            border: 2px solid var(--fl-lightBlue);
        }

        .selectProfile .card.imFamily {
            border: 2px solid var(--fl-purple);
        }

    .selectProfile .imageText {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1rem;
        align-items: center;
    }

    .selectProfile .card img {
        width: 12rem;
        object-fit: contain;
    }

    .selectProfile .card p {
        font-weight: 500;
        font-size: 20px;
        line-height: 175%;
        text-align: center;
    }

    .selectProfile .card.imTeacher p {
        color: var(--fl-lightBlue);
    }

    .selectProfile .card.imFamily p {
        color: var(--fl-purple);
    }

@media (max-width: 1900px) {
    .selectProfile {
        padding: 9rem 0 14rem 0;
    }
}

@media (max-width: 1200px) {
    .selectProfile {
        padding: 9rem 0 20rem 0;
    }
}

@media (max-width: 992px) {
    .selectProfile {
        padding: 9rem 0 22rem 0;
    }
}

@media (max-width: 766px) {
    .selectProfile .selectProfileContainer {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 400px) {
    .selectProfilekidAccess .card {
        width: 100%;
    }
}

/* ----------- SLIDERS CAROUSEL HOME -------------*/

.carouselHome {
    padding-top: 88px;
}

.homeCarouselBG {
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: calc(80vh - 88px);
    padding-top: 4rem;
}

    .homeCarouselBG.slide1 {
        background-image: url(../img/mainCarouselSlide1.jpg);
    }

        .homeCarouselBG.slide1 h2,
        .homeCarouselBG.slide1 h3 {
            font-size: 3rem;
            font-weight: 400;
            letter-spacing: normal;
            color: #fff;
            max-width: 430px;
        }

            .homeCarouselBG.slide1 h2 span.line {
                font-weight: 800;
                background-image: url(../img/carouselLine.svg);
                background-repeat: no-repeat;
                background-position: center bottom;
                padding-bottom: 8px;
            }

            .homeCarouselBG.slide1 h3 span {
                font-weight: 800;
            }

        .homeCarouselBG.slide1 .actions {
            display: flex;
            flex-direction: row;
            gap: 0 3rem;
        }

            .homeCarouselBG.slide1 .actions p {
                font-weight: 400;
                font-size: 1rem;
                color: #fff;
            }

    .homeCarouselBG.slide2 {
        background-image: url(../img/mainCarouselSlide2.jpg);
    }

        .homeCarouselBG.slide2 h2 {
            font-size: 3rem;
            font-weight: 400;
            letter-spacing: normal;
            color: #fff;
            max-width: 450px;
        }

            .homeCarouselBG.slide2 h2 span {
                font-weight: 800;
            }

        .homeCarouselBG.slide2 h3 {
            font-size: 1.5rem;
            font-weight: 400;
            letter-spacing: normal;
            color: #fff;
            max-width: 450px;
        }

        .homeCarouselBG.slide2 .actions {
            display: flex;
            flex-direction: row;
            gap: 0 3rem;
        }

            .homeCarouselBG.slide2 .actions p {
                font-weight: 400;
                font-size: 1rem;
                color: #fff;
            }

    .homeCarouselBG.slide3 {
        background-image: url(../img/familyCarouselSlide1.jpg);
    }

        .homeCarouselBG.slide3 h2 {
            font-size: 3rem;
            font-weight: 600;
            letter-spacing: normal;
            color: #fff;
            max-width: 460px;
            margin-top: 2rem;
        }

            .homeCarouselBG.slide3 h2 span {
                font-weight: 800;
            }

        .homeCarouselBG.slide3 h3 {
            font-size: 1.5rem;
            font-weight: 400;
            letter-spacing: normal;
            color: #fff;
            max-width: 450px;
        }

        .homeCarouselBG.slide3 .actions p {
            font-weight: 400;
            font-size: 1rem;
            color: #fff;
        }


        .homeCarouselBG.slide3 .actions {
            display: flex;
            flex-direction: row;
            gap: 0 3rem;
            margin-top: 3rem;
        }

    .homeCarouselBG.slide4 {
        background-image: url(../img/familyCarouselSlide2.jpg);
    }

        .homeCarouselBG.slide4 h2 {
            font-size: 3rem;
            font-weight: 600;
            letter-spacing: normal;
            color: #fff;
            max-width: 460px;
            margin-top: 2rem;
        }

            .homeCarouselBG.slide4 h2 span {
                font-weight: 800;
            }

        .homeCarouselBG.slide4 h3 {
            font-size: 1.5rem;
            font-weight: 400;
            letter-spacing: normal;
            color: #fff;
            max-width: 600px;
        }

        .homeCarouselBG.slide4 .actions p {
            font-weight: 400;
            font-size: 1rem;
            color: #fff;
        }

        .homeCarouselBG.slide4 .actions {
            display: flex;
            flex-direction: row;
            gap: 0 3rem;
            margin-top: 2rem;
        }


    .homeCarouselBG.slide5 {
        background-image: url(../img/teacherCarouselSlide1.jpg);
    }

        .homeCarouselBG.slide5 h2 {
            font-size: 3rem;
            font-weight: 600;
            letter-spacing: normal;
            color: #fff;
            max-width: 550px;
            margin-top: 1rem;
        }

            .homeCarouselBG.slide5 h2 span {
                font-weight: 800;
            }

        .homeCarouselBG.slide5 h3 {
            font-size: 1.5rem;
            font-weight: 400;
            letter-spacing: normal;
            color: #fff;
            max-width: 600px;
            margin-top: 2rem;
        }

        .homeCarouselBG.slide5 .actions {
            display: flex;
            flex-direction: row;
            gap: 0 3rem;
            margin-top: 3rem;
        }

            .homeCarouselBG.slide5 .actions p {
                font-weight: 400;
                font-size: 1rem;
                color: #fff;
            }

    .homeCarouselBG.slide6 {
        background-image: url(../img/teacherCarouselSlide2.jpg);
    }

        .homeCarouselBG.slide6 h2 {
            font-size: 3rem;
            font-weight: 600;
            letter-spacing: normal;
            color: #fff;
            max-width: 550px;
            margin-top: 0;
        }

            .homeCarouselBG.slide6 h2 span {
                font-weight: 800;
            }

        .homeCarouselBG.slide6 h3 {
            font-size: 1.5rem;
            font-weight: 400;
            letter-spacing: normal;
            color: #fff;
            max-width: 600px;
            margin-top: 2rem;
        }

        .homeCarouselBG.slide6 .actions {
            display: flex;
            flex-direction: row;
            gap: 0 3rem;
            margin-top: 2rem;
        }

            .homeCarouselBG.slide6 .actions p {
                font-weight: 400;
                font-size: 1rem;
                color: #fff;
            }

    .homeCarouselBG .actions .btn {
        font-size: 1.3rem;
        font-weight: 700;
    }

@media (max-width: 1400px) {
    .homeCarouselBG {
        height: calc(100vh - 88px);
        padding-top: 2rem;
    }

        .homeCarouselBG.slide1 h2,
        .homeCarouselBG.slide1 h3 {
            font-size: 2.5rem;
        }
}

@media (max-width: 576px) {
    .mobileDisplay {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .homeCarouselBG {
        padding-top: 0;
    }

        .homeCarouselBG.slide1 .actions {
            flex-direction: column;
            gap: 1.5rem 0;
            margin-top: 1rem;
        }

            .homeCarouselBG.slide1 .actions button {
                width: 100%;
            }

        .homeCarouselBG.slide1 h3 {
            display: none;
        }

        .homeCarouselBG.slide2 .actions {
            flex-direction: column;
            gap: 1.5rem 0;
            margin-top: 1rem;
        }

            .homeCarouselBG.slide2 .actions button {
                width: 100%;
            }

        .homeCarouselBG.slide2 h3 {
            display: none;
        }

        .homeCarouselBG.slide4 h3 {
            display: none;
        }

        .homeCarouselBG.slide5 h3,
        .homeCarouselBG.slide5 h2 span {
            display: none;
        }

        .homeCarouselBG.slide5 .actions {
            flex-direction: column;
            gap: 1.5rem 0;
            margin-top: 1rem;
        }

            .homeCarouselBG.slide5 .actions button {
                width: 100%;
            }

        .homeCarouselBG.slide5 {
            padding-top: 24px;
        }

        .homeCarouselBG.slide6 {
            padding-top: 48px;
        }

            .homeCarouselBG.slide6 h3 {
                display: none;
            }

            .homeCarouselBG.slide6 h2 {
                font-size: 2.5rem;
            }

            .homeCarouselBG.slide6 .actions {
                flex-direction: column;
            }

                .homeCarouselBG.slide6 .actions button {
                    width: 100%;
                }

    .carouselHome {
        padding-top: 79px;
    }
}

/* --------------- HOME MINI BOOKS --------------- */

.miniBooks {
    margin: 4rem 0;
}

    .miniBooks h2 {
        font-weight: 500;
        font-size: 48px;
        line-height: 57px;
        color: var(--fl-lightBlue);
    }

    .miniBooks p {
        font-weight: 400;
        font-size: 24px;
        line-height: 175%;
        letter-spacing: 0.02em;
        color: var(--fl-black);
        margin-top: 1.25rem;
    }

    .miniBooks .pillsContent {
        margin-top: 2.5rem;
    }

    .miniBooks .nav-pills {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 3rem;
    }

    .miniBooks button.nav-link.active {
        background-image: url(../img/pillsBlue.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-color: unset;
        padding: 2rem;
    }

    .miniBooks button.nav-link {
        background-image: url(../img/pillsTransparent.svg);
        font-weight: 500;
        font-size: 20px;
        line-height: 24px;
        color: var(--fl-lightBlue);
        padding: 2rem;
    }

    .miniBooks .tab-content {
        background: #F9F9F9;
        border-radius: 10px;
        padding: 2.5rem 4rem;
        margin-bottom: 4rem;
    }

        /*.miniBooks .tab-content .gridBooks {
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
gap: 3rem 5rem;
}*/

        .miniBooks .tab-content .gridBooks .book {
            width: 220px;
            height: 300px;
            cursor: pointer;
            border-radius: 8px;
            filter: brightness(0.98);
            border: 4px solid transparent;
        }

            .miniBooks .tab-content .gridBooks .book:hover {
                border: 4px solid var(--fl-lightBlue);
                background-color: var(--fl-lightBlue);
                border-radius: 8px;
                filter: brightness(1.06);
                transform: scale(1.025);
                transition: 0.2s linear;
            }

            .miniBooks .tab-content .gridBooks .book img {
                object-fit: cover;
                height: 100%;
                width: 100%;
                border-radius: 8px;
            }

@media (max-width: 1400px) {
    .miniBooks .tab-content .gridBooks {
        gap: 3rem;
    }
}

@media (max-width: 576px) {
    .miniBooks .tab-content {
        padding: 2rem 1rem;
    }

        .miniBooks .tab-content .gridBooks {
            gap: 3rem 1rem;
        }

            .miniBooks .tab-content .gridBooks .book {
                width: 135px;
                height: 180px;
            }

    .miniBooks .nav-pills {
        justify-content: space-around;
        gap: 0;
    }
}

/* --------------- HOME BENEFITS --------------- */

.homeBenefits {
    margin: 2rem 0;
}

    .homeBenefits h2 {
        font-weight: 500;
        font-size: 40px;
        line-height: 48px;
        text-align: center;
        color: var(--fl-lightBlue);
        display: block;
        margin: 0 auto;
        max-width: 992px;
        margin-bottom: 2rem;
    }

    .homeBenefits .benefits {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        text-align: center;
        margin: 0 4rem;
    }

        .homeBenefits .benefits .item {
            max-width: 200px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }

    .homeBenefits .benefitsIMG {
        width: 230px;
    }

    .homeBenefits .teachers .benefitsIMG {
        width: 150px;
    }

    .homeBenefits .benefits .item h5 {
        font-weight: 700;
        font-size: 24px;
        line-height: 29px;
        text-align: center;
        color: var(--fl-lightBlue);
    }


    .homeBenefits .benefits .item p {
        margin-top: 1rem;
        font-weight: 400;
        font-size: 20px;
        line-height: 175%;
        text-align: center;
        letter-spacing: 0.02em;
        color: var(--fl-black)
    }

@media (max-width: 1400px) {
    .homeBenefits .benefitsIMG {
        width: 250px;
    }

    .homeBenefits .benefits .item {
        max-width: 250px;
    }
}

@media (max-width: 1200px) {
    .homeBenefits .benefits .item {
        max-width: 300px;
    }
}

@media (max-width: 992px) {
    .homeBenefits .benefits {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4rem 0;
    }

        .homeBenefits .benefits .item {
            max-width: 400px;
        }
}

.benefits.family {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem 2rem;
}

.benefits.teachers {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem 2rem;
    margin: 0;
}

    .benefits.teachers .item {
        max-width: 220px;
    }

@media (max-width: 1400px) {
    .benefits.teachers .item {
        max-width: 220px;
    }
}

/* --------------- BANNERS HOME --------------- */

.bannerHome {
    margin: 2rem 0;
}

    .bannerHome .kidsPosition {
        position: relative;
        top: 5px;
        z-index: -1;
    }

        .bannerHome .kidsPosition img {
            width: 360px;
        }

.bannerHomeBG {
    background-image: url(../img/bannersHomeBG.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 2rem 0;
}

.bannerHome.girl .bannerHomeBG,
.bannerHome.boy .bannerHomeBG {
    background-image: url(../img/bannersHomeBG-SM.svg);
}

.bannerHomeBG .content {
    display: flex;
    flex: row;
    justify-content: center;
    align-items: center;
    gap: 0 2rem;
}

.bannerHomeBG h2 {
    font-weight: 500;
    font-size: 40px;
    line-height: 122.4%;
    text-align: center;
    color: #FFFFFF;
}

@media (max-width: 992px) {
    .bannerHomeBG .content {
        flex-direction: column;
        gap: 2rem 0;
    }
}

@media (max-width: 576px) {
    .bannerHomeBG .content {
        flex-direction: column;
        gap: 2rem 0;
    }

    .bannerHome .kidsPosition img {
        width: 320px;
    }
}

/* --------------- GRID FEATURES --------------- */

.gridFeatures {
    padding: 0 0 3rem 0;
}

    .gridFeatures h2 {
        font-weight: 500;
        font-size: 40px;
        line-height: 48px;
        color: var(--fl-lightBlue);
        margin-bottom: 4rem;
    }

    .gridFeatures .grid-container {
        display: grid;
        grid-template-areas:
            'one two three four four'
            'one five five six seven';
        gap: 1.25rem;
    }

        .gridFeatures .grid-container > div {
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #F9F9F9;
            padding: 1.5rem;
            position: relative;
            cursor: pointer;
        }

        .gridFeatures .grid-container span {
            visibility: hidden;
            color: #fff;
            position: absolute;
            border-radius: 10px;
            padding: 1.5rem;
            width: 100%;
            height: 100%;
            background-image: url(../img/bgFeatures.svg);
            background-position: bottom right;
            background-size: cover;
        }

        .gridFeatures .grid-container div:hover span {
            visibility: visible;
            animation: fadeIn 0.15s;
            overflow: hidden;
        }

        .gridFeatures .grid-container > .item1 {
            grid-area: one;
        }

        .gridFeatures .grid-container .item1 span {
            background-color: var(--fl-lightBlue);
        }

        .gridFeatures .grid-container > .item2 {
            grid-area: two;
        }

        .gridFeatures .grid-container .item2 span {
            background-color: var(--fl-yellow);
        }

        .gridFeatures .grid-container > .item3 {
            grid-area: three;
        }

        .gridFeatures .grid-container .item3 span {
            background-color: var(--fl-purple);
        }

        .gridFeatures .grid-container > .item4 {
            grid-area: four;
        }

        .gridFeatures .grid-container .item4 span {
            background-color: var(--fl-green);
        }

        .gridFeatures .grid-container > .item5 {
            grid-area: five;
        }

        .gridFeatures .grid-container .item5 span {
            background-color: var(--fl-green);
        }

        .gridFeatures .grid-container > .item6 {
            grid-area: six;
        }

        .gridFeatures .grid-container .item6 span {
            background-color: var(--fl-red);
        }

        .gridFeatures .grid-container > .item7 {
            grid-area: seven;
        }

        .gridFeatures .grid-container .item7 span {
            background-color: var(--fl-lightBlue);
        }

        .gridFeatures .grid-container .content {
            max-width: 200px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1rem;
        }

        .gridFeatures .grid-container .item4 .content,
        .gridFeatures .grid-container .item5 .content {
            flex-direction: row;
            max-width: 400px;
        }

        .gridFeatures .grid-container .img-grid {
            width: 150px;
        }

        .gridFeatures .grid-container p {
            font-weight: 500;
            font-size: 1.25rem;
            line-height: 24px;
            text-align: center;
            color: #585858c7;
            max-width: 230px;
        }

        .gridFeatures .grid-container span.contentHover {
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 400;
            font-size: 19px;
            line-height: 150%;
            text-align: center;
            color: var(#fff);
        }

@media (max-width: 992px) {
    .gridFeatures .grid-container {
        display: grid;
        grid-template-areas:
            'one two'
            'one three'
            'four four'
            'six seven'
            'five five';
        gap: 1.25rem;
    }

        .gridFeatures .grid-container span.contentHover {
            display: none;
        }
}

@media (max-width: 576px) {
    .gridFeatures .grid-container {
        gap: 0.5rem;
    }

        .gridFeatures .grid-container > div {
            padding: 1.5rem 1rem;
        }
}

/* --------------- HOME MAP --------------- */

.homeMap {
    background-image: url(../img/mapBG.svg);
    background-position: center;
    background-size: cover;
    padding: 6rem 0 5rem 0;
}

    .homeMap h2 {
        font-weight: 500;
        font-size: 2.5rem;
        line-height: 3rem;
        color: #FFFFFF;
        text-align: center;
    }

    .homeMap .content {
        padding: 4rem 0;
        display: flex;
        align-items: center;
        gap: 4rem 0;
    }

    .homeMap .statistics {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        gap: 3rem;
    }

        .homeMap .statistics .reads {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            max-width: 240px;
        }

        .homeMap .statistics .hours {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            max-width: 240px;
        }

        .homeMap .statistics .reads img {
            width: 125px;
            margin-bottom: 1rem;
        }

        .homeMap .statistics .hours img {
            width: 125px;
            margin-bottom: 1rem;
        }

        .homeMap .statistics h5 {
            font-weight: 800;
            font-size: 2.5rem;
            line-height: 175%;
            text-align: center;
            letter-spacing: 0.02em;
            color: #FFFFFF;
        }

        .homeMap .statistics p {
            font-weight: 400;
            font-size: 20px;
            line-height: 175%;
            text-align: center;
            letter-spacing: 0.02em;
            color: #FFFFFF
        }

/* --------------- LOGO BRANDS HOME --------------- */

.logoBrands {
    margin: 7rem 0;
}

    .logoBrands h2 {
        font-weight: 500;
        font-size: 2.5rem;
        line-height: 48px;
        color: var(--fl-lightBlue);
        margin-bottom: 3.5rem;
    }

    .logoBrands .swiper-slide > div {
        width: 200px;
        height: 112px;
        border: 1px solid #e1e1e1;
        background-color: #fff;
        border-radius: 8px;
        user-select: none;
        padding: 1rem;
        display: flex;
        justify-content: center;
    }

    .logoBrands .swiper-slide img {
        object-fit: contain;
    }

    .logoBrands .sponsors {
        display: flex;
        flex-wrap: wrap;
        padding: 0 1.5rem 4rem 1.5rem;
        gap: 1.5rem;
    }

        .logoBrands .sponsors > div {
            width: 220px;
            height: 134px;
            object-fit: contain;
            border: 1px solid #e1e1e1;
            background-color: #fff;
            border-radius: 8px;
            user-select: none;
            padding: 1rem;
            display: flex;
            justify-content: center;
        }

        .logoBrands .sponsors img {
            object-fit: contain;
        }

@media (max-width: 576px) {
    .logoBrands .sponsors {
        align-items: center;
        justify-content: center;
    }
}

/* --------------- TESTIMONIALS --------------- */

.testimonials {
    margin: 5rem 0;
}

    .testimonials .description {
        padding-right: 4.5rem;
    }

    .testimonials h2 {
        font-weight: 500;
        font-size: 40px;
        line-height: 48px;
        color: var(--fl-lightBlue);
        margin-bottom: 2.5rem;
    }

    .testimonials h5 {
        font-weight: 700;
        font-size: 32px;
        line-height: 175%;
        letter-spacing: 0.02em;
        color: #008FBE;
    }

    .testimonials p {
        font-weight: 400;
        font-size: 20px;
        line-height: 175%;
        letter-spacing: 0.02em;
        color: var(--fl-black);
    }

        .testimonials p span {
            font-weight: 700;
            font-size: 24px;
            letter-spacing: 0.02em;
            color: var(--fl-lightBlue);
        }

    .testimonials .groupCards {
        display: flex;
        flex-direction: column;
        gap: 5rem 0;
    }

        .testimonials .groupCards .card {
            padding: 40px 32px;
            border: 0;
            box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.1);
            border-radius: 40px 10px;
        }

            .testimonials .groupCards .card .iconCard {
                width: 90px;
                position: absolute;
                top: -40px;
            }

            .testimonials .groupCards .card p {
                font-weight: 400;
                font-size: 1rem;
                line-height: 175%;
                letter-spacing: 0.02em;
                color: #585858d7;
            }

            .testimonials .groupCards .card h6 {
                font-weight: 800;
                font-size: 16px;
                line-height: 175%;
                text-align: right;
                letter-spacing: 0.02em;
                color: var(--fl-lightBlue);
                max-width: 450px;
            }

@media (max-width: 992px) {
    .testimonials .groupCards {
        margin-top: 5rem;
    }

        .testimonials .groupCards .card h6 {
            max-width: unset;
        }

    .testimonials .description {
        padding-right: 0;
    }
}

/* --------------- AUTHORS --------------- */

.authorsHome {
    margin: 2rem 0 0 0;
}

    .authorsHome h2 {
        font-weight: 500;
        font-size: 40px;
        line-height: 130.4%;
        letter-spacing: 0.02em;
        text-align: center;
        color: var(--fl-lightBlue);
        margin-bottom: 2rem;
    }

    .authorsHome .authorsList {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        gap: 2rem 1rem;
    }

    .authorsHome .author {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 275px;
        color: #585858;
    }

        .authorsHome .author img {
            width: 150px;
        }

        .authorsHome .author h6 {
            text-align: center;
            font-weight: 300;
            font-size: 27px;
            line-height: 38px;
            text-align: center;
            margin-top: 1rem;
        }

        .authorsHome .author p {
            text-align: center;
            margin-top: 0.25rem;
            font-weight: 700;
            font-size: 18px;
            line-height: 175%;
            letter-spacing: 0.02em;
        }

        .authorsHome .author small {
            text-align: center;
            font-weight: 300;
            font-size: 18px;
            line-height: 130%;
            text-align: center;
            letter-spacing: 0.02em;
        }

@media (max-width: 1400px) {
    .authorsHome .authorsList {
        justify-content: center;
        gap: 8rem 3rem;
    }
}


/* --------------- FAMILY PROPOSAL --------------- */

.familyProposal {
    margin-top: 4rem;
}

    .familyProposal h2 {
        margin-bottom: 10rem;
    }

    .familyProposal h2 {
        font-weight: 500;
        font-size: 40px;
        line-height: 122.4%;
        text-align: center;
        color: var(--fl-lightBlue);
        margin-top: 4rem;
    }

    .familyProposal .leftColumn {
        padding-right: 1rem;
    }

    .familyProposal .leftColumn,
    .familyProposal .rightColumn {
        display: flex;
        flex-direction: column;
        gap: 1rem 0;
    }

    .familyProposal h5 {
        font-weight: 500;
        font-size: 2rem;
        line-height: 122.4%;
        color: var(--fl-black);
        margin-bottom: 1rem;
    }

        .familyProposal h5 span {
            color: var(--fl-lightBlue);
        }

    .familyProposal .itemProposal {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
    }

        .familyProposal .itemProposal img {
            width: 130px;
        }

        .familyProposal .itemProposal h6 {
            font-weight: 500;
            font-size: 1.5rem;
            line-height: 28px;
            color: var(--fl-lightBlue);
            max-width: 350px;
        }

        .familyProposal .itemProposal p {
            font-weight: 400;
            font-size: 1.25rem;
            line-height: 35px;
            letter-spacing: 0.02em;
            color: var(--fl-black);
            max-width: 350px;
        }

@media (max-width: 992px) {
    .familyProposal .rightColumn {
        margin-top: 6rem;
    }

    .familyProposal .leftColumn {
        padding-right: 0;
    }
}

@media (max-width: 576px) {
    .familyProposal .itemProposal {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

        .familyProposal .itemProposal h6 {
            text-align: center;
        }

        .familyProposal .itemProposal p {
            text-align: center;
        }
}

/* --------------- TEACHERS FEATURES HOME --------------- */

.teachersFeatures {
    margin: 10rem 0;
}

    .teachersFeatures h2 {
        font-weight: 500;
        font-size: 2.5rem;
        line-height: 122.4%;
        text-align: center;
        color: var(--fl-lightBlue);
    }

    .teachersFeatures .carousel-indicators {
        bottom: -60px;
        margin: 0;
        gap: 0.5rem;
    }

    .teachersFeatures .buttonList {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .teachersFeatures .btn.features {
        border: 0;
        background-color: unset;
        font-weight: 500;
        font-size: 1.25rem;
        line-height: 175%;
        letter-spacing: 0.02em;
        color: #585858bd;
        text-align: left;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1.25rem;
    }

        .teachersFeatures .btn.features.active {
            color: var(--fl-lightBlue);
        }

        .teachersFeatures .btn.features img {
            visibility: hidden;
        }

        .teachersFeatures .btn.features.active img {
            visibility: visible;
        }

@media (max-width: 1200px) {
    .teachersFeatures .buttonList {
        margin-top: 4rem;
    }

    .teachersFeatures .carousel-item img {
        max-width: 500px;
    }
}

.teachersFeatures .carousel-item div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.teachersFeatures .carousel-item img {
    width: 70%;
}

/* --------------- GAME --------------- */

.displayGame .box {
    width: 100%;
    background-image: url(../img/bgQuestionTrivia.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom right;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 32px 64px;
    font-weight: 500;
    font-size: 40px;
    line-height: 48px;
    color: #FFFFFF;
    border-radius: 8px;
    min-height: 150px;
    text-align: center;
    gap: 2rem;
}

    .displayGame .box .imgContainer {
        width: 120px;
        height: 120px;
    }

    .displayGame .box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4px;
    }

    .displayGame .box.matching {
        background-image: url(../img/bgBoxGameRed.svg);
    }

    .displayGame .box.cross {
        background-image: url(../img/bgBoxGameYellow.svg);
    }

    .displayGame .box.word {
        background-image: url(../img/bgBoxGamePurple.svg);
    }

/* --------------- TRIVIA GAME --------------- */

.triviaGame {
    padding: 6rem 0 0 0;
    height: 100%;
}

    .triviaGame .displayGame {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: space-between;
        min-height: calc(100vh - 112px);
    }

    .triviaGame .title {
        display: flex;
        flex-flow: column;
        width: 100%;
        justify-content: center;
        align-items: flex-start;
        text-align: left;
    }

        .triviaGame .title h2 {
            color: #fff;
            font-size: 40px;
        }

        .triviaGame .title p {
            color: #fff;
            font-size: 24px;
            font-weight: 300;
        }

    .triviaGame .content {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 800px;
        margin: auto;
    }

    .triviaGame .question {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

        .triviaGame .question .box {
            width: 100%;
            background-image: url(../img/bgQuestionTrivia.svg);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: bottom right;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /*padding: 48px 96px;*/
            font-weight: 500;
            font-size: 40px;
            line-height: 48px;
            color: #FFFFFF;
            border-radius: 8px;
            min-height: 150px;
            text-align: center;
        }

        .triviaGame .question .step {
            display: flex;
            width: 100%;
            justify-content: end;
            padding-right: 1rem;
            font-weight: 500;
            font-size: 24px;
            line-height: 29px;
            color: var(--fl-green);
        }

    .triviaGame .questionContainer {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 2rem;
    }

        .triviaGame .questionContainer .question {
            display: flex;
            justify-content: center;
            width: 100%;
            text-align: center;
            color: var(--fl-green);
            font-size: 32px;
            font-weight: 700;
        }

    .triviaGame .step {
        display: flex;
        width: 100%;
        justify-content: end;
        padding-right: 1rem;
        font-weight: 400;
        font-size: 16px;
        line-height: 29px;
        color: #A0A0A0;
        margin-bottom: 1rem;
    }

    .triviaGame .answers {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .triviaGame .radioAsButton label {
        width: 100%;
        background-color: #fff;
        cursor: pointer;
    }

        .triviaGame .radioAsButton label span {
            text-align: left;
            padding: 6px;
            display: block;
            padding: 16px 24px;
            outline: 1px solid #CBCBCB;
            background: #FFFFFF;
            border-radius: 8px;
            font-weight: 400;
            font-size: 20px;
            line-height: 29px;
            color: var(--fl-black);
        }

        .triviaGame .radioAsButton label input {
            display: none;
        }

    .triviaGame .radioAsButton input:checked + span {
        background-color: var(--fl-green);
        border-radius: 4px;
        color: #fff;
        outline: 3px solid var(--fl-green);
    }

    .triviaGame .answerItem:focus {
        outline: 1px solid #CBCBCB;
    }

    .triviaGame .answerItem span:hover {
        outline: 3px solid var(--fl-green);
        color: var(--fl-green);
    }

    .triviaGame .navbar {
        background-color: transparent;
        box-shadow: unset;
    }

    .triviaGame .buttonGroup {
        display: flex;
        flex-direction: row;
        gap: 3rem;
        justify-content: end;
        padding: 2rem 0;
    }

    .triviaGame .changeQuestion {
        display: flex;
        flex-direction: row;
        gap: 3rem;
    }

        .triviaGame .changeQuestion button {
            border: 0;
            background-color: #fff;
            color: var(--fl-green);
            cursor: pointer;
            white-space: nowrap;
        }

            .triviaGame .changeQuestion button:hover {
                filter: brightness(1.025);
            }

    .triviaGame .btn-fl-green {
        font-size: 16px;
        padding: 1.5rem;
        white-space: nowrap;
    }

.bgGamesPosition {
    position: relative;
    width: 100%;
}

.bgGameTrivia {
    position: absolute;
    bottom: -15px;
    z-index: -1;
    width: 700px
}

@media (max-width: 1400px) {
    .triviaGame {
        padding: 6rem 0 0 0;
    }

        .triviaGame .question .box {
            padding: 24px 96px;
            font-size: 32px;
            color: #FFFFFF;
        }

        .triviaGame .buttonGroup {
            padding: 0.5rem 0;
        }

    .bgGameTrivia {
        bottom: -6rem;
    }
}

@media (max-width: 1200px) {
    .bgGameTrivia {
        display: none;
    }
}

@media (max-width: 992px) {
    .triviaGame .content {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .triviaGame {
        padding: 6rem 0 0 0;
        min-height: calc(100vh - 112px);
    }

        .triviaGame .answers .row {
            gap: 2rem;
        }

    .displayGame .box {
        padding: 32px 24px;
    }

    .triviaGame .buttonGroup {
        flex-direction: column;
        gap: 2rem;
        margin-top: 2rem;
    }

        .triviaGame .buttonGroup .changeQuestion {
            justify-content: center;
            flex-wrap: wrap;
        }

    .displayGame .box .imgContainer {
        display: none;
    }
}

/* --------------- CROSSWORDS GAME --------------- */

.crosswordGame {
    padding: 7rem 0 0 0;
    height: 100%;
}

    .crosswordGame .displayGame {
        display: flex;
        flex-direction: row;
        height: 100%;
        justify-content: space-between;
        min-height: calc(100vh - 216px);
    }

    .crosswordGame table {
        text-transform: capitalize;
        border: 0;
    }

        .crosswordGame table td {
            padding: 0;
            font-size: 1.5rem;
            border: 0;
            border-radius: 10px;
            width: 44px;
            padding: 2px;
            background-color: #fff;
            position: relative;
        }

            .crosswordGame table td span {
                position: absolute;
                z-index: 1;
                right: 10px;
                color: #fff;
                font-size: 12px;
            }

        .crosswordGame table input {
            width: 100%;
            text-align: center;
            text-transform: capitalize;
            background-color: var(--fl-yellow);
            border-radius: 10px;
            border: 1px solid #fff;
            color: #fff;
            cursor: pointer;
            -webkit-box-shadow: inset 0px 0px 0px 0.1px #fff;
            -moz-box-shadow: inset 0px 0px 0px 0.1px #fff;
            box-shadow: inset 0px 0px 0px 0.1px #fff;
            box-shadow: 0px 0px 0px 2px var(--fl-yellow);
            padding: 3px 0;
        }

            .crosswordGame table input.selected {
                background-color: #ebac22bb;
                /*color: var(--fl-yellow);*/
                outline: 0;
            }

        .crosswordGame table td.wordSelect input {
            background-color: #fdd682;
        }

        /*.crosswordGame table input:focus {
  border-color: #fff;
  background-color: #e7b344;
  outline: 0;
}*/

        .crosswordGame table input:active {
            border-color: #fff;
            background-color: #e7b344;
            outline: 0;
        }

        /*     .crosswordGame table input:hover {
  background-color: #ebb134;
  transform: scale(1.025);
}*/

        .crosswordGame table td.blocked input {
            display: none;
        }

    .crosswordGame ul:focus-visible {
        outline: 0;
    }

    .crosswordGame ul li span {
        color: var(--fl-yellow);
        font-weight: 800;
        margin-right: 0.5rem;
    }

    .crosswordGame .bgGamesPosition {
        position: relative;
        width: 100%;
    }

    .crosswordGame .bgGameCrosswords {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;
        width: 700px
    }

    .crosswordGame .buttonGroup {
        display: flex;
        flex-direction: row;
        gap: 3rem;
        justify-content: end;
        padding-bottom: 2rem;
    }

    .crosswordGame h6 {
        font-size: 32px;
        font-weight: 700;
        color: var(--fl-yellow);
        margin-bottom: 1rem;
    }

    .crosswordGame ul button {
        font-size: 1.25rem;
        font-weight: 200;
        color: var(--fl-black);
        padding: 0.4rem 0;
        border: 0;
        background-color: transparent;
        text-align: left;
    }

@media (max-width: 1400px) {
    .crosswordGame {
        padding: 6rem 0 0 0;
    }

        .crosswordGame .buttonGroup {
            margin-top: 3rem;
        }
}

@media (max-width: 1600px) {
    .bgGameCrosswords {
        display: none;
    }
}

@media (max-width: 1200px) {
    .crosswordGame table {
        margin-bottom: 4rem;
    }
}


@media (max-width: 768px) {
    .crosswordGame table td {
        width: 44px;
    }

    .crosswordGame table {
        margin-bottom: 0;
    }

    .crosswordGame h6 {
        margin-top: 4rem;
    }

    .crosswordGame table td span {
        position: absolute;
        right: 11px;
        top: 1px;
        color: #fff;
        font-size: 10px;
    }
}

@media (max-width: 576px) {
    .crosswordGame .tab-content {
        padding: 2rem 1rem;
    }

    .crosswordGame .btn-secondary {
        width: 100%;
    }
}

/*
@media (max-width: 465px) {
.crosswordGame table td {
  line-height: 150%;
}
}
*/

@media (max-width: 430px) {
    .crosswordGame table td {
        line-height: 150%;
        font-size: 0.8rem;
    }
}

@media (max-width: 340px) {
    .crosswordGame table td {
        line-height: 75%;
        font-size: 0.7rem;
    }

        .crosswordGame table td span {
            top: 2px;
        }
}

/* --------------- WORDS SEARCH --------------- */

.wordsSearch {
    padding: 7rem 0 0 0;
    height: 100%;
}

    .wordsSearch .displayGame {
        display: flex;
        flex-direction: row;
        height: 100%;
        justify-content: space-between;
        min-height: calc(100vh - 216px);
    }

    .wordsSearch table {
        text-transform: capitalize;
        border: 0;
    }

        .wordsSearch table td {
            padding: 0;
            font-size: 1.5rem;
            border: 0;
            width: 44px;
            padding: 4px;
            text-align: center;
            background-color: #fff;
            color: var(--fl-black);
        }


            .wordsSearch table td.painted {
                background-color: var(--fl-purple);
                color: #fff;
            }

            .wordsSearch table td.correct {
                background-color: var(--fl-green);
                color: #fff;
            }

    .wordsSearch h6 {
        font-size: 32px;
        font-weight: 700;
        color: var(--fl-purple);
        margin-bottom: 1rem;
        text-align: center;
    }

    .wordsSearch li {
        padding: 0.25rem;
        font-size: 1.25rem;
        text-align: center;
    }

    .wordsSearch .strikethrough {
        text-decoration: line-through;
        color: var(--fl-purple);
    }

    .wordsSearch .bgGamesPosition {
        position: relative;
        width: 100%;
    }

    .wordsSearch .bgGameWordsSearch {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;
        width: 700px
    }

    .wordsSearch .buttonGroup {
        display: flex;
        flex-direction: row;
        gap: 3rem;
        justify-content: end;
        padding-bottom: 2rem;
    }

@media (max-width: 1200px) {
    .bgGameWordsSearch {
        display: none;
    }

    .wordsSearch h6 {
        margin-top: 4rem;
    }

    .wordsSearch .buttonGroup {
        margin-top: 3rem;
    }
}

@media (max-width: 768px) {
    .wordsSearch table td {
        width: 44px;
    }
}

@media (max-width: 470px) {
    .wordsSearch .btn-purple {
        width: 100%;
    }

    .wordsSearch table td {
        font-size: 1.3rem;
    }
}

@media (max-width: 470px) {
    .wordsSearch table td {
        font-size: 0.8rem;
        padding: 3px;
    }
}

/* --------------- MATCHING PICTURES --------------- */

.matchingPictures {
    padding: 7rem 0 0 0;
    height: 100%;
}

    .matchingPictures .displayGame {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: space-between;
        align-content: space-between;
        min-height: calc(100vh - 216px);
        gap: 1rem 0;
    }

    .matchingPictures h6 {
        font-size: 32px;
        font-weight: 700;
        color: var(--fl-red);
        margin-bottom: 1rem;
    }

    .matchingPictures .card {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .matchingPictures .bgGamesPosition {
        position: relative;
        width: 100%;
    }

    .matchingPictures .bgGameMatching {
        position: absolute;
        bottom: -2rem;
        left: -2rem;
        z-index: -1;
        width: 700px
    }

    .matchingPictures .buttonGroup {
        display: flex;
        flex-direction: row;
        gap: 3rem;
        justify-content: end;
        padding: 2rem 0;
    }

    .matchingPictures .buttonCard {
        border: 1px solid var(--fl-red);
        padding: 15px 10px;
        background-color: #d500375c;
        border-radius: 8px;
        width: 100%;
        height: 100%;
        overflow: hidden;
        word-wrap: break-word;
        overflow-wrap: break-word;
        text-overflow: ellipsis;
        font-size: 1.3rem;
        color: #fff;
    }

        .matchingPictures .buttonCard:hover {
            background-color: var(--fl-red);
            color: #fff;
        }

        .matchingPictures .buttonCard.btn-active {
            background-color: var(--fl-red);
            color: #fff;
        }

@media (max-width: 1400px) {
    .bgGameMatching {
        display: none;
    }
}

@media (max-width: 1200px) {
    .matchingPictures h6 {
        margin-top: 4rem;
    }

    .matchingPictures .buttonGroup {
        margin-top: 3rem;
    }

    .matchingPictures .buttonCard {
        font-size: 1.1rem;
    }
}

@media (max-width: 576px) {
    .matchingPictures .buttonCard {
        font-size: 0.9rem;
    }
}

@media (max-width: 470px) {
    .matchingPictures .btn-fl-red {
        width: 100%;
    }

    .matchingPictures .buttonCard {
        font-size: 0.8rem;
    }
}

/* --------------- JOIN WITH ARROWS --------------- */

.JoinWithArrows {
    padding: 7rem 0 0 0;
    height: 100%;
}

/*.JoinWithArrows {
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-size: 100%;
  border: 0 none;
  background: none repeat scroll 0 0 transparent;
  border-color: initial;
  background-image: none;
}*/

/*.JoinWithArrows .main {
  width: 65%;
  float: left;
}

.JoinWithArrows .baseCanvas {
  padding: 20px 0;
}

.JoinWithArrows .choicesContent {
  font-size: 0;
  position: relative;
  text-align: center;
  margin: 0 7px;
}

.JoinWithArrows .choicesContent .col-left{
  float: left;
  width: 38%;
}

.JoinWithArrows .choicesContent .col-right{
  float: right;
  width: 38%;
}

.JoinWithArrows .choicesContainer {
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-size: 100%;
  border: 0 none;
  background: none repeat scroll 0 0 transparent;
}

.JoinWithArrows .choicesContent .btn{
  background-color: rgb(24, 26, 27);
  outline-color: initial;
  border-color: initial;
  box-shadow: rgb(0 0 0 / 0%) 0px 10px 30px -18px, rgb(0 0 0 / 0%) 0px 3px 5px -3px;
  overflow-x: inherit;
  width: 100%;
  display: block;    
  border-radius: 2px;
  outline: none;
  position: relative;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 5px;
  cursor: pointer;
  padding: 0;
  border: none;    
  transition: all .3s;
}*/

/* CSS Copiado burdo de una pagina, puede estar sujeto a cambios */

.col-left {
    float: left;
    width: 38%;
}

.col-right {
    float: right;
    width: 38%;
}

#contentElementos .btn {
    overflow-x: inherit;
    width: 100%;
    display: block;
    background-color: #fff;
    border-radius: 2px;
    outline: none;
    position: relative;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 5px;
    cursor: pointer;
    padding: 0;
    border: none;
    -webkit-box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.0), 0 3px 5px -3px rgba(0, 0, 0, 0.0);
    box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.0), 0 3px 5px -3px rgba(0, 0, 0, 0.0);
    transition: all .3s;
}

    #contentElementos .btn:hover {
        -webkit-box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.8), 0 3px 5px -3px rgba(0, 0, 0, 0.3);
        box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.8), 0 3px 5px -3px rgba(0, 0, 0, 0.3);
    }

.container-btn {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 100%;
    border-radius: 3px;
    background-color: #f4f4f4;
    z-index: 3;
    box-shadow: inset rgba(0,0,0,0.15) 0 0 0 1px;
    padding: 3px 0;
}

    .container-btn:hover {
        border-color: #ccc;
    }

.btn-active .container-btn {
    box-shadow: inset rgba(255,189,24,1.00) 0 0 0 2px;
}

.btn-txt, .btn-image, .btn-sound {
    position: relative;
    z-index: 4;
    color: #333;
    transition: all .5s;
}

    .btn-image img {
        max-width: 120px;
        height: auto;
        vertical-align: middle;
    }

.btn-image {
    padding: 2px;
}

.btn-txt, .btn-sound {
    padding: 15px;
}

.bull {
    display: none;
    position: relative;
    border-radius: 100%;
    height: 8px;
    width: 8px;
    margin: 0;
    background-color: var(--fl-red);
    content: " ";
    transition: all .3s ease-in;
    z-index: 2;
}

.bull-left.bull-active {
    display: block;
    float: left;
}

.bull-right.bull-active {
    display: block;
    float: right;
}

.bgActive {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: 0;
    -webkit-transform: scale(0.0);
    transform: scale(0.0);
    transition: background .3s;
}

/* colores */
/*
.btn-active-color1 .bgActive, .btn-active-color1 .bull-active  { background-color:#f34235;}
.btn-active-color2 .bgActive, .btn-active-color2 .bull-active  { background-color:#9b26af;}
.btn-active-color3 .bgActive, .btn-active-color3 .bull-active  { background-color:#3f51b5;}
.btn-active-color4 .bgActive, .btn-active-color4 .bull-active  { background-color:#00bbd3;}
.btn-active-color5 .bgActive, .btn-active-color5 .bull-active  { background-color:#4caf50;}
.btn-active-color6 .bgActive, .btn-active-color6 .bull-active  { background-color:#e7d215;}
.btn-active-color7 .bgActive, .btn-active-color7 .bull-active  { background-color:#fe9700;}
.btn-active-color8 .bgActive, .btn-active-color8 .bull-active  { background-color:#9d9d9d;}
.btn-active-color9 .bgActive, .btn-active-color9 .bull-active  { background-color:#e81d62;}
.btn-active-color10 .bgActive, .btn-active-color10 .bull-active  { background-color:#6639b6;}
.btn-active-color11 .bgActive, .btn-active-color11 .bull-active  { background-color:#2095f2;}
.btn-active-color12 .bgActive, .btn-active-color12 .bull-active  { background-color:#009587;}
.btn-active-color13 .bgActive, .btn-active-color13 .bull-active  { background-color:#8ac249;}
.btn-active-color14 .bgActive, .btn-active-color14 .bull-active  { background-color:#ffc107;}
.btn-active-color15 .bgActive, .btn-active-color15 .bull-active  { background-color:#fe5621;}
.btn-active-color16 .bgActive, .btn-active-color16 .bull-active  { background-color:#5f7c8a;}
*/
/* btn-solution */
/*
.btn-solution .btn-txt { color:#fff;}
*/
/*
.btn-solution .bgActive {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity:1;
}
*/

.btnError .bgActive {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 1;
    background-color: #ffcfcb;
    box-shadow: inset #f34235 0 0 0 2px;
}

/*.btn-solution .container-btn {
  box-shadow: inset #6ba118 0 0 0 2px;
}*/

/* canvas */
.container-canvas {
    margin: 0 38%;
}

    .container-canvas canvas {
        width: 100%;
    }

span.rope-line {
    position: absolute;
    background-color: yellow;
    cursor: pointer;
    z-index: 9;
}

.rope {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--fl-red);
    width: 0;
    height: 2px;
    transform: rotate(80deg);
    transform-origin: 0% 0%;
}

/* --------------- FAQS --------------- */

.faqs {
    padding: 9.5rem 0;
    display: flex;
    justify-content: center;
}

    .faqs .title {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

        .faqs .title h2 {
            font-weight: 500;
            font-size: 48px;
            line-height: 122.4%;
            text-align: center;
            color: var(--fl-lightBlue);
            max-width: 700px;
        }

        .faqs .title p {
            font-weight: 400;
            font-size: 24px;
            line-height: 150%;
            text-align: center;
            letter-spacing: 0.02em;
            color: rgba(88, 88, 88, 0.65);
            max-width: 700px;
        }

    .faqs .nav-pills {
        margin: 64px 0;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
        gap: 40px;
        width: 100%;
    }

        .faqs .nav-pills .nav-link {
            background-color: transparent;
            color: var(--fl-lightBlue);
            border-radius: 50rem;
            padding: 16px 20px;
            border: 2px solid var(--fl-lightBlue);
            font-weight: 500;
            font-size: 20px;
            line-height: 29px;
        }

            .faqs .nav-pills .nav-link.active {
                background-color: var(--fl-lightBlue);
                color: #fff;
            }

    .faqs .tab-content {
        margin: auto;
        max-width: 1000px;
    }

    .faqs .faqsList {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 24px;
    }


    .faqs .accordion-item {
        border: 0;
    }

    .faqs .accordion-button {
        font-weight: 500;
        font-size: 20px;
        line-height: 150%;
        text-align: left;
        letter-spacing: 0.02em;
        color: var(--fl-lightBlue);
        display: flex;
        align-items: flex-start;
        background-color: unset;
    }

        .faqs .accordion-button:focus {
            box-shadow: unset;
            transition: unset;
        }

        .faqs .accordion-button::after {
            background-image: unset;
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            content: "\f078";
            height: unset;
            transition: unset;
        }

        .faqs .accordion-button:not(.collapsed) {
            background-color: unset;
            box-shadow: unset;
            transition: unset;
            transform: unset;
        }

            .faqs .accordion-button:not(.collapsed)::after {
                background-color: unset;
                box-shadow: unset;
                transition: unset;
                transform: unset;
            }

    .faqs .accordion-body {
        font-weight: 300;
        font-size: 20px;
        line-height: 150%;
        letter-spacing: 0.02em;
        color: rgba(88, 88, 88, 0.65);
    }

        .faqs .accordion-body ul li {
            list-style-type: disc;
            margin-left: 3rem;
        }

        .faqs .accordion-body strong {
            color: var(--fl-lightBlue);
            font-weight: 700;
        }

.faqsFoot {
    max-width: 1000px;
    margin: auto;
}

    .faqsFoot .card {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 2rem 1rem;
        border: 2px solid var(--fl-lightBlue);
        background-color: var(--fl-lightBlue);
        color: #fff;
        margin-top: 64px;
        font-weight: 300;
        background-image: url(../img/bgGames.svg);
        background-position: center right;
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
    }

        .faqsFoot .card p {
            width: 50%;
        }

        .faqsFoot .card strong {
            font-weight: 600;
        }

@media (max-width: 768px) {
    .faqs .nav-pills {
        gap: 16px;
    }

        .faqs .nav-pills .nav-link {
            font-size: 16px;
        }

    .faqsFoot .card {
        background-image: unset;
        padding: 2rem 0.5rem;
    }

        .faqsFoot .card p {
            width: 100%;
        }
}

/* --------------- CLASS RESOURCES --------------- */

.classResources {
    padding: 6rem 0;
}

    .classResources .nav-pills {
        display: flex;
        justify-content: center;
        width: 100%;
        gap: 1rem;
    }

    .classResources .title {
        font-weight: 500;
        font-size: 2.5rem;
        color: var(--fl-lightBlue);
        margin: 3rem 0 1rem 0;
    }

    .classResources .subtitle {
        font-weight: 500;
        font-size: 1.75rem;
        line-height: 2.5rem;
    }

    .classResources .nav-pills .nav-link {
        background-image: url(../img/pillsTransparent.svg);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        background-color: unset;
        font-weight: 600;
        font-size: 1.5rem;
        padding: 1.75rem 2.5rem;
    }

    .classResources .pillGuides {
        color: var(--fl-lightBlue);
    }

    .classResources .pillReading {
        color: var(--fl-green);
    }

    .classResources .pillWriting {
        color: var(--fl-red);
    }

    .classResources .nav-pills .nav-link.pillGuides.active {
        background-image: url(../img/pillsBlue.svg);
        color: #fff;
    }

    .classResources .nav-pills .nav-link.pillReading.active {
        background-image: url(../img/pillsGreen.svg);
        color: #fff;
    }

    .classResources .nav-pills .nav-link.pillWriting.active {
        background-image: url(../img/pillsRed.svg);
        color: #fff;
    }

.resourcesCard {
    width: 100%;
    cursor: pointer;
    user-select: none;
}

    .resourcesCard .cover {
        width: 100%;
        height: 15rem;
        border-radius: 0.25rem;
        border: 1px solid #eee;
        position: relative;
    }

        .resourcesCard .cover img {
            width: 100%;
            height: 100%;
            border-radius: 0.25rem;
            object-fit: cover;
        }

    .resourcesCard .actions {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .resourcesCard:hover .actions span {
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-evenly;
        gap: 0.25rem 0;
        padding: 1rem;
        visibility: visible;
        width: 100%;
        height: 100%;
        animation: fadeIn 0.15s;
    }

    .resourcesCard .actions .btn {
        white-space: nowrap;
        width: 100%;
        padding: 1rem 0;
        font-size: 14px;
    }

    .resourcesCard .actionsResponsive {
        display: none;
    }

    .resourcesCard .nameResource {
        font-weight: 500;
        font-size: 1.2rem;
        margin: 0.25rem 0.1rem 0.75rem 0.1rem;
        text-align: left;
        line-height: 24px;
        color: var(--fl-lightBlue);
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        width: 100%;
    }

    .resourcesCard .actions span {
        background: rgba(0, 143, 190, 0.95);
        border-radius: 0.25rem;
        visibility: hidden;
    }

    .resourcesCard.guides .actions span {
        background: rgba(0, 143, 190, 0.9);
    }

    .resourcesCard.writing .actions span {
        background: rgba(213, 0, 55, 0.9);
    }

    .resourcesCard.reading .actions span {
        background: rgba(118, 188, 33, 0.9);
    }


    .resourcesCard.guides .nameResource {
        color: var(--fl-lightBlue);
    }

    .resourcesCard.writing .nameResource {
        color: var(--fl-red);
    }

    .resourcesCard.reading .nameResource {
        color: var(--fl-green);
    }

@media (max-width: 992px) {
    .resourcesCard .actionsResponsive {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .resourcesCard .actions {
        display: none;
    }

    .resourcesCard .actionsResponsive .btn {
        color: #fff;
        width: 100%;
        padding: 0.5rem 0;
        border-radius: 4px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
        background-color: var(--fl-lightBlue);
    }

    .resourcesCard.guides .actionsResponsive .btn {
        background-color: var(--fl-lightBlue);
    }

    .resourcesCard.writing .actionsResponsive .btn {
        background-color: var(--fl-red);
    }

    .resourcesCard.reading .actionsResponsive .btn {
        background-color: var(--fl-green);
    }

    .resourcesCard .cover {
        height: 23rem;
    }
}

/* --------------- NEWS LIST --------------- */

.newsList {
    padding: 10rem 0;
}

    .newsList h1 {
        font-weight: 500;
        font-size: 2.5rem;
        line-height: 3rem;
        color: var(--fl-lightBlue);
        margin-bottom: 3rem;
    }

.gridNewsContainer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    gap: 80px;
}

.gridItemNews {
    padding: 0;
    max-width: 100%;
    max-width: 420px;
}

.gridNewsContainer .lastNews__card {
    width: 100%;
}

.gridNewsContainer .lastNews__card-img {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 0.75rem 0.75rem 0 0;
}

@media (max-width: 1200px) {
    .gridNewsContainer {
        grid-template-columns: auto auto;
    }

    .gridItemNews {
        width: 100%;
        max-width: 100%;
    }
}

--------------- BOOK DETAIL ---------------
.bookDetail {
    padding: 2rem;
}

.bookDetail .content {
    display: flex;
    flex-direction: column;
    width: 100%;
}

    .bookDetail .content .return {
        margin-bottom: 0.5rem;
        display: flex;
        width: 100%;
        justify-content: flex-end;
    }

.bookDetail .return p {
    color: var(--fl-lightBlue);
    font-size: 1.5rem;
    font-weight: 600;
}

.bookDetail .content .cover {
    display: flex;
    justify-content: center;
    align-items: center;
}

.bookDetail .cover .imgWidth {
    width: -webkit-fill-available;
    height: auto;
}

.bookDetail .content .info {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
}

.bookDetail .description h1 {
    margin: 0 0 0.25rem 0;
    font-weight: 500;
    font-size: 2.25rem;
    line-height: 43px;
    color: var(--fl-lightBlue);
}

.bookDetail .editorial {
    width: 9rem;
    height: 6rem;
    margin: 0 0 0.5rem 0;
}

    .bookDetail .editorial img {
        object-fit: contain;
        width: 100%;
        height: 100%;
    }

.bookDetail .caption {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    font-weight: 200;
    font-size: 1.3rem;
    line-height: 24px;
    color: var(--fl-black);
    font-style: italic;
}

.bookDetail .synopsis {
    margin: 0 0 2rem 0;
    font-weight: 200;
    font-size: 1.5rem;
    line-height: 150%;
    letter-spacing: 0.02em;
    color: var(--fl-black);
    text-align: left;
}

.bookDetail .infoFooter {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 2rem 0;
}

    .bookDetail .infoFooter .data {
        display: flex;
        flex-direction: row;
        gap: 0 3rem;
    }

        .bookDetail .infoFooter .data .time {
            font-weight: 500;
            font-size: 1rem;
            line-height: 175%;
            letter-spacing: 0.02em;
            color: #FFFFFF;
        }

.bookDetail .actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 0 1.5rem;
}

    .bookDetail .actions a {
        font-size: 1rem;
    }

@media (max-width: 1200px) {
    .bookDetail .infoFooter .data {
        gap: 0 2rem;
    }
}

@media (max-width: 992px) {
    .bookDetail .infoFooter {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
        margin-top: 1rem;
    }

    .bookDetail .actions {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem 0;
        margin-bottom: 1rem;
    }

        .bookDetail .actions .btn {
            width: 100%;
        }

    .bookDetail .infoFooter .data {
        flex-direction: row;
        gap: 0 2rem;
    }
}

@media (max-width: 768px) {
    .bookDetail .content .info {
        margin: 2rem 0 0 0;
        padding: 0;
    }

    .bookDetail .synopsis {
        margin: 0 0 0.5rem 0;
    }
}

@media (max-width: 400px) {
    .bookDetail .infoFooter .data {
        flex-direction: column;
        gap: 1rem 0;
    }

    .bookDetail .cover .imgWidth {
        width: 100%;
        height: auto;
        max-height: 436px;
    }
}

@media (max-width: 768px) {
    .gridNewsContainer {
        grid-template-columns: repeat(auto-fill, minmax(200px, 100%));
    }
}

@media (max-width: 576px) {
    .gridItemNews {
        width: 100%;
        max-width: 100%;
    }
}

/* --------------- NEWS DETAIL --------------- */

.newsDetail {
    padding-top: 74px;
    min-height: calc(100vh - 432px);
}

    .newsDetail .row {
        margin: 64px 0 128px 0;
    }

    .newsDetail .imgContainer {
        width: 100%;
        background-color: #fafafa;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .newsDetail .imgContainer img {
            width: 100%;
            height: auto;
            max-height: 500px;
            object-fit: cover;
            border-radius: 8px;
        }

    .newsDetail h1 {
        font-weight: 500;
        font-size: 2.5rem;
        color: var(--fl-lightBlue);
        margin: 0rem 0 1rem 0;
    }

    .newsDetail p {
        font-weight: 300;
        font-size: 1.25rem;
        color: rgba(88, 88, 88, 0.75);
    }

/* --------------- CHALLENGE LIST --------------- */

.challengeList {
    padding: 10rem 0;
    min-height: calc(100vh - 432px);
}

    .challengeList h1 {
        font-weight: 500;
        font-size: 2.5rem;
        color: var(--fl-lightBlue);
        margin: 0rem 0 3rem 0;
    }

.gridChallengeContainer {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: auto;
    gap: 40px;
}

.gridItemChallenge {
    padding: 0;
    max-width: 100%;
    max-width: 420px;
}

.challengeList .challenge__item.wobble-hor-bottom {
    position: static;
}

.challengeList .challenge__illustration-size {
    width: 137px;
    height: 137px;
    margin: 0 0 1rem;
    object-fit: contain;
    border-radius: 4px;
}

.challenge__item.unlocked {
    margin: 0;
}

@media (max-width: 1200px) {
    .gridChallengeContainer {
        grid-template-columns: repeat(4, 1fr);
    }

    .gridItemChallenge {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .gridChallengeContainer {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 10px;
    }
}

@media (max-width: 576px) {
    .challenge__item.unlocked {
        margin: 0;
        height: unset;
        padding: 2rem 1rem;
    }
}

/* --------------- CHALLENGES REDESIGN --------------- */

.challenge {
    width: 100%;
    max-width: 11.5rem;
    height: 17rem;
    padding: 2rem 0;
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: var(--fl-box-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    user-select: none;
}

    .challenge .imgContainer {
        width: 125px;
        height: 125px;
        display: flex;
        justify-content: center;
    }

    .challenge .hrChallenge img {
        width: 100%;
        margin: 1rem 0 0.75rem 0;
    }

    .challenge.unlock,
    .challenge.active {
        cursor: pointer;
    }

        .challenge.unlock .imgContainer img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 4px;
        }

        .challenge.unlock .name p {
            max-width: 125px;
            text-align: center;
            font-weight: 500;
            font-size: 1.1rem;
            line-height: 1.5rem;
            color: var(--fl-lightBlue);
            display: -webkit-box;
            overflow: hidden;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

    .challenge.active {
        -webkit-animation: wobble-hor-bottom 3s infinite both;
        animation: wobble-hor-bottom 3s infinite both;
    }

        .challenge.unlock:hover,
        .challenge.active:hover {
            filter: brightness(1.025);
        }

        .challenge.active h6 {
            font-weight: 200;
            font-size: 32px;
            text-align: center;
            margin: 0;
            display: block;
            line-height: 120%;
            color: #fff;
        }

            .challenge.active h6 span {
                font-weight: 900;
                font-size: 36px;
                text-align: center;
                color: #fff;
            }

    .challenge.unlock .imgContainer {
        height: 180px;
        width: 180px;
    }

@keyframes wobble-hor-bottom {

    0%, 100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }

    7.5% {
        -webkit-transform: translateX(-10px) rotate(-3deg);
        transform: translateX(-10px) rotate(-3deg);
    }

    15% {
        -webkit-transform: translateX(10px) rotate(3deg);
        transform: translateX(10px) rotate(3deg);
    }

    22.5% {
        -webkit-transform: translateX(-10px) rotate(-2.6deg);
        transform: translateX(-10px) rotate(-2.6deg);
    }

    30% {
        -webkit-transform: translateX(6px) rotate(2.0deg);
        transform: translateX(6px) rotate(2.0deg);
    }

    37.5% {
        -webkit-transform: translateX(-3px) rotate(-0.8deg);
        transform: translateX(-3px) rotate(-0.8deg);
    }

    50% {
        -webkit-transform: translateX(0) rotate(0deg);
        transform: translateX(0) rotate(0deg);
    }
}

.challenge.active.blue,
.challenge.lock.blue {
    background-color: var(--fl-lightBlue);
}

.challenge.lock.red {
    background-color: var(--fl-red);
}

.challenge.lock.green {
    background-color: var(--fl-green);
}

.challenge.lock.yellow {
    background-color: var(--fl-yellow);
}

.challenge.active.blue,
.challenge.lock.blue,
.challenge.lock.blue.teachers {
    background-color: var(--fl-lightBlue);
}

.challenge.lock.red,
.challenge.lock.red.teachers {
    background-color: var(--fl-red);
}

.challenge.lock.green,
.challenge.lock.green.teachers {
    background-color: var(--fl-green);
}

.challenge.lock.yellow,
.challenge.lock.yellow.teachers {
    background-color: var(--fl-yellow);
}

.challenge.lock .name p {
    max-width: 125px;
    text-align: center;
    font-weight: 500;
    font-size: 1.1rem;
    line-height: 1.5rem;
    color: #fff;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.challenge.lock.teachers {
    max-width: 12rem;
    height: 17rem;
}

    .challenge.lock.teachers .name {
        margin-top: 0.75rem;
    }

        .challenge.lock.teachers .name p {
            max-width: 140px;
        }

    .challenge.lock.teachers .imgContainer {
        width: 100px;
        height: 100px;
    }

    .challenge.lock.teachers .goals {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        gap: 0.5rem 1rem;
        margin-top: 0.75rem;
        font-size: 14px;
        font-weight: 200;
        color: #fff;
    }

.challenge.lock .imgContainer {
    height: 125px;
    width: 125px;
}

.challenge .hrChallenge,
.challenge .name {
    padding: 0 1.5rem;
}

.gridChallengeContainer.teachers {
    gap: 30px;
}

@media (max-width: 1400px) {
    .gridChallengeContainer.teachers {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 1200px) {
    .gridChallengeContainer.teachers {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .gridChallengeContainer.teachers {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .gridChallengeContainer.teachers {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 400px) {
    .gridChallengeContainer.teachers {
        gap: 10px;
    }
}

/* --------------- ACHIEVEMENTS (BELTH AND TOURNAMENTS) --------------- */

/*
.achievements {
  padding: 10rem 0;
}
*/

.achievements .bgAchievements {
    width: 100%;
    position: absolute;
    z-index: -1;
}

    .achievements .bgAchievements img {
        position: relative;
        width: 100%;
        max-width: 500px;
        float: right;
        bottom: 220px;
        right: 0px;
        z-index: -1;
    }

.achievements .achievementContainer {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 0 0 2rem 0;
}

.achievements .title h1 {
    font-weight: 600;
    font-size: 36px;
    line-height: 38px;
    color: var(--fl-lightBlue);
    margin-bottom: 12px;
}

.achievements .title p {
    font-weight: 200;
    font-size: 24px;
    line-height: 38px;
    color: var(--fl-lightBlue);
    margin-bottom: 40px;
}

.achievements h2 {
    font-weight: 600;
    font-size: 24px;
    line-height: 38px;
    color: var(--fl-lightBlue);
}

    .achievements h2.lock {
        filter: opacity(0.1);
    }


.achievements .achievementGrid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: auto;
    gap: 40px;
}

.achievements .item {
    width: 100%;
    max-width: 100%;
}

    .achievements .item h6 {
        font-weight: 700;
        font-size: 18px;
        color: var(--fl-lightBlue);
        margin-top: 0.25rem;
    }

    .achievements .item p {
        font-weight: 300;
        font-size: 16px;
        color: #585858b7;
        line-height: normal;
    }

.achievements .diploma .achievementGrid {
    grid-template-columns: repeat(4, 1fr);
}

.achievements .diploma .item {
    max-width: 400px;
}

.achievements .item img {
    width: 100%;
}

.achievements .item.lock {
    filter: grayscale(0.99);
    cursor: auto;
}

.beltModal .imgContainer {
    width: 300px;
}

@media (max-width: 1400px) {
    .achievements .bgAchievements {
        display: none;
    }

    .achievements .diploma .achievementGrid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1200px) {
    .achievements .achievementGrid {
        grid-template-columns: repeat(4, 1fr);
    }

    .achievements .item {
        width: 100%;
        max-width: 100%;
    }

    .beltModal .imgContainer {
        width: 100%;
    }
}

@media (max-width: 992px) {
    .achievements .achievementGrid {
        grid-template-columns: repeat(3, 1fr);
    }

    .achievements .diploma .achievementGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .achievements .achievementGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 10px;
    }
}

@media (max-width: 400px) {
    .achievements .achievementGrid {
        grid-template-columns: repeat(1, 1fr);
    }

    .achievements .diploma .achievementGrid {
        grid-template-columns: repeat(1, 1fr);
    }
}

.achievements.banner {
    background-repeat: no-repeat;
    padding: 12rem 0 5rem 0;
    width: 100%;
    background-size: cover;
    background-image: url(../img/achievementsBanner.svg);
    margin-bottom: 4rem;
    min-height: 415px;
}

    .achievements.banner .title h1 {
        font-weight: 600;
        font-size: 36px;
        line-height: 38px;
        color: #FFFFFF;
        margin-bottom: 16px;
        text-wrap: balance;
    }

    .achievements.banner .title p {
        font-weight: 200;
        font-size: 24px;
        line-height: 38px;
        color: #FFFFFF;
        margin-bottom: 40px;
        text-wrap: balance;
    }

.achievements .alert {
    position: fixed;
    z-index: 100;
    top: 85px;
    background-color: var(--fl-green);
    padding: 8px 0;
    width: 100%;
    color: #fff;
    font-weight: 300;
    border-radius: 0;
}

@media (min-width: 1200px) and (max-width: 1400px) {
    .achievements .alert {
        top: 76px;
    }
}

@media (max-width: 992px) {
    .achievements .alert {
        top: 101px;
    }
}

@media (max-width: 420px) {
    .achievements .alert {
        top: 87px;
    }
}

@media (max-width: 350px) {
    .achievements .alert {
        top: 78px;
    }
}

.jello-horizontal {
    -webkit-animation: jello-horizontal 0.9s 1.25s both;
    animation: jello-horizontal 0.9s 1.25s both;
}

@-webkit-keyframes jello-horizontal {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes jello-horizontal {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

/* --------------- BANNER INSTRUCTIONS --------------- */

.bannerInstructions {
    background-color: var(--fl-lightBlue);
    color: #fff;
    text-align: center;
    font-style: italic;
    font-weight: 400;
    font-size: 20px;
    padding: 0.5rem 0;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
}


/* --------------- HOME MAP SCHOOLS --------------- */

.school-list .row {
    border: 1px solid rgb(140, 140, 140);
    border-width: 0 0 1px;
    padding: 0.5rem 0;
}

    .school-list .row:last-child {
        border-bottom-width: 0;
        padding: 0.5rem 0;
    }

.school-list .school-list-header {
    text-align: center;
    font-weight: 700;
    font-size: 1.5rem;
}

.school-list .school-list-city {
    text-align: center;
}

/* --------------- BACK --------------- */

.back {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: flex-start;
    align-items: center;
    color: var(--fl-lightBlue);
    font-weight: 900;
    font-size: 16px;
    margin-bottom: 48px;
}

    .back:hover {
        color: var(--fl-lightBlue);
    }

    .back p {
        margin: 0;
        font-weight: 500;
        font-size: 18px;
        color: var(--fl-lightBlue);
    }

/* --------------- SELECT PROFILE --------------- */

.chooseProfile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 15vh;
    min-height: 100vh;
}

    .chooseProfile .title {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 32px 0 0 0;
    }

    .chooseProfile h2 {
        font-weight: 500;
        font-size: 2.5rem;
        text-align: center;
        color: var(--fl-lightBlue);
        margin-bottom: 3rem;
    }

    .chooseProfile .profileList {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: center;
        gap: 48px 96px;
    }

        .chooseProfile .profileList .profileItem {
            cursor: pointer;
        }

    .chooseProfile .img {
        max-width: 200px;
        max-height: 200px;
        height: 180px;
        border-radius: 16px;
        background-color: #008ebe25;
        border: 10px solid transparent;
        overflow: hidden;
    }

        .chooseProfile .img img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 12px;
            transition: transform .5s ease;
        }

    .chooseProfile p {
        font-weight: 600;
        font-size: 24px;
        line-height: 175%;
        text-align: center;
        letter-spacing: 0.02em;
        color: #58585880;
    }

    .chooseProfile .profileItem:hover .img {
        border: 10px solid var(--fl-lightBlue);
    }

        .chooseProfile .profileItem:hover .img img {
            transform: scale(1.025);
        }

    .chooseProfile .profileItem:hover p {
        color: var(--fl-lightBlue);
    }

    .chooseProfile footer {
        display: flex;
        justify-content: center;
        min-height: 200px;
    }

        .chooseProfile footer div {
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            align-items: center;
            gap: 16px;
        }

@media (max-width: 500px) {
    .chooseProfile {
        gap: 5vh;
    }

        .chooseProfile footer img {
            width: 120px;
        }
}

/* --------------- TOAST --------------- */

.toast {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 100;
    width: 400px;
    max-width: 90%;
    overflow: hidden;
    background-color: #D00545;
}

    .toast .btn-close {
        background: url(../img/closeIconWhite.svg) center/1em auto no-repeat;
    }

.btn-close:focus {
    box-shadow: unset;
}

.toast-header {
    border-bottom: 0;
}

.toast-body {
    width: 100%;
    height: 100%;
    padding: 4px 8px 16px;
}

.toast img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 6px;
}

@media (max-width: 576px) {
    .toast {
        left: 50%;
        transform: translate(-50%, 0);
    }
}

.img-w-48 {
    width: 48px;
    height: 48px;
}

.clr-primary {
    color: var(--fl-lightBlue);
}

.clr-green {
    color: var(--fl-green);
}

.clr-danger {
    color: var(--fl-red);
}

.alert.blue {
    border: 1px solid var(--fl-lightBlue);
    background: rgba(0, 143, 190, 0.1);
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    padding: 24px 36px;
}

.club-status-toast {
    background-color: var(--fl-lightBlue);
    z-index: 1050;
}

.text-body {
    font-weight: 300;
    font-size: 1.25rem;
}

.fs-7 {
    font-size: 14px !important;
}

/* --------------- CHALLENGE COMPLETED --------------- */

.hexagon {
    position: relative;
    width: 57.735026918925px;
    height: 100px;
    margin: 10px 18.433756729731px;
    border-radius: 4px;
    transition: all 650ms ease-in-out;
}

    .hexagon.challengeCompleted {
        background-color: #008fbe;
    }

    .hexagon:before,
    .hexagon:after {
        content: "";
        position: absolute;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        transition: all 650ms ease-in-out;
    }

    .hexagon:before {
        left: 100%;
        border-left: 28.867513459463px solid #008fbe;
    }

    .hexagon:after {
        right: 100%;
        border-right: 28.867513459463px solid #008fbe;
    }

    .hexagon.highlight,
    .hexagon:hover {
        transition: all 150ms ease-in-out;
    }

        .hexagon.highlight:before,
        .hexagon.highlight:after,
        .hexagon:hover:before,
        .hexagon:hover:after {
            transition: all 150ms ease-in-out;
        }

    .hexagon:hover {
        cursor: pointer;
        background-color: #eaa819;
    }

        .hexagon:hover:before,
        .hexagon:hover:after {
            border-left-color: #eaa819;
            border-right-color: #eaa819;
        }

    .hexagon.highlight {
        background-color: #ebac22;
    }

        .hexagon.highlight:before,
        .hexagon.highlight:after {
            border-left-color: #ebac22;
            border-right-color: #ebac22;
        }

.hexContainer .col {
    position: relative;
    top: -10px;
    left: -50px;
    display: inline-block;
}

    .hexContainer .col:nth-of-type(even) {
        top: -65px;
    }

.hexContainer {
    height: 100%;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    background: linear-gradient(360deg, #008fbe 0%, #00a0d5 100%);
}

.modal-achievements.modal.fade {
    background-color: #008fbe;
}

.modal-achievements .modal-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .modal-achievements .modal-content main {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        width: 100%;
        height: 100%;
        max-width: 600px;
        padding: 2rem;
        display: flex;
        align-items: center;
        z-index: 1;
    }

.modal-achievements .modalBody {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: between;
    align-items: center;
    background-color: #fff;
    border-radius: 12px;
    cursor: auto;
    padding: 2rem 2.5rem 3rem 2.5rem;
    max-height: 750px;
}

.modal-achievements.btn {
    margin: 0;
}

.modal-achievements .logos {
    position: absolute;
    right: 32px;
    bottom: 32px;
}

    .modal-achievements .logos.center {
        position: absolute;
        right: 0;
        left: 0;
        margin: 0 auto;
        bottom: 32px;
    }

.modal-achievements .foreground.planet {
    position: absolute;
    left: -172px;
    bottom: -191px;
    max-width: 600px;
    width: 100%;
    animation-name: spinReverse;
    animation-duration: 80s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.modal-achievements .foreground.orbit {
    position: absolute;
    left: -250px;
    bottom: -230px;
    max-width: 849px;
    width: 100%;
    animation-name: spin;
    animation-duration: 25s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.modal-achievements .foreground.belts {
    position: absolute;
    z-index: 99999999;
    left: -152px;
    bottom: -58px;
    max-width: 800px;
    width: 100%;
}

.modal-achievements .foreground.trophies {
    position: absolute;
    left: -300px;
    bottom: -100px;
    max-width: 700px;
    width: 100%;
}

    .modal-achievements .foreground.trophies.right {
        position: absolute;
        left: unset;
        right: -310px;
        bottom: -100px;
        max-width: 700px;
        width: 100%;
    }

.modal-achievements .foreground.tournaments {
    display: flex;
    position: absolute;
    left: 0;
    bottom: -30px;
    width: 750px;
}

    .modal-achievements .foreground.tournaments img {
        width: 350px;
    }

        .modal-achievements .foreground.tournaments img:nth-child(1) {
            position: absolute;
            left: -100px;
            bottom: -15px;
            z-index: 1;
            animation-delay: 0.4s;
        }

        .modal-achievements .foreground.tournaments img:nth-child(2) {
            position: absolute;
            left: 5%;
            bottom: -15px;
            z-index: 1;
            animation-delay: 1.2s;
        }

        .modal-achievements .foreground.tournaments img:nth-child(4) {
            position: absolute;
            left: 15%;
            bottom: -30px;
            z-index: 1;
            width: 584px;
            animation-delay: 1.6s;
        }

        .modal-achievements .foreground.tournaments img:nth-child(3) {
            position: absolute;
            left: 60%;
            bottom: -15px;
            z-index: 1;
            animation-delay: 0.8s;
        }

.modal-achievements .challengeImg {
    max-width: 300px;
    width: 100%;
    margin: 0 auto;
}

    .modal-achievements .challengeImg.diploma {
        max-width: 400px;
        width: 100%;
        margin: 0 auto;
    }

    .modal-achievements .challengeImg img {
        object-position: center;
        object-fit: contain;
        width: 100%;
        border-radius: 8px;
    }

.modal-achievements .stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    align-items: center;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes spinReverse {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@media (width < 1400px) {
    .modal-achievements .foreground.orbit {
        left: -250px;
        bottom: -220px;
        max-width: 737px;
    }

    .modal-achievements .foreground.planet {
        left: -160px;
        bottom: -180px;
        max-width: 512px;
    }

    .modal-achievements .modal-content main {
        max-width: 550px;
    }

    .modal-achievements .modalBody {
        padding: 1rem;
    }

    .modal-achievements .logos {
        width: 300px;
    }

    .modal-achievements .foreground {
        width: 500px;
    }

        .modal-achievements .foreground.belts {
            width: 500px;
        }

    .modal-achievements h2 {
        font-size: 1.75rem;
    }

    .modal-achievements h3 {
        font-size: 1.5rem;
    }

    .modal-achievements .challengeImg.diploma {
        max-width: 350px;
        width: 100%;
    }

    .modal-achievements .foreground.trophies {
        width: 550px;
    }
}

@media (width < 992px) {
    .modal-achievements .foreground.belts {
        width: 400px;
        left: -200px;
    }

    .modal-achievements .foreground.trophies {
        width: 400px;
        left: -250px;
    }
}

@media (width < 1300px) {
    .modal-achievements .logos {
        display: none;
    }
}

@media (width < 576px) {
    .modal-achievements .foreground {
        display: none;
    }

    .modal-achievements .challengeImg.tournaments img:not(:nth-child(5)) {
        display: none;
    }
}

@media (height < 750px) {
    .modal-achievements .modal-content main {
        padding: 1rem;
    }

    .modal-achievements .modalBody {
        padding: 1rem;
    }

    .modal-achievements .challengeImg {
        max-width: 220px;
    }
}


@media (height < 600px) {
    .modal-achievements .challengeImg {
        max-width: 150px;
    }

    .modal-achievements .stats {
        display: none;
    }

    .modal-achievements .modalBody {
        gap: 1rem;
    }
}

.bookCard .actions {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 11;
    background: rgba(0, 143, 190, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 0.25rem 0;
    padding: 1rem;
    border-radius: 0.25rem;
    visibility: hidden;
}

.bookCard:hover .actions {
    visibility: visible;
    animation: fadeIn 0.3s;
    cursor: auto;
}

.bookCard .actions span {
    padding: 0;
    height: auto;
    cursor: pointer;
}

.bookCard .actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.bookCard .actions-mobile {
    display: none;
}


#assignResourceInAClub .modal-body,
#assignBookInAClub .modal-body {
    padding: 0 2rem 3rem 2rem;
}

@media (width < 992px) {
    .bookCard .actions {
        display: none;
    }

    .bookCard .actions-mobile {
        display: flex;
    }

    .bookCard:hover .actions-mobile span {
        width: auto;
        margin: 0;
        padding: 0;
    }

    .actions-mobile button,
    .actions-mobile button:hover,
    .btn:first-child:hover, :not(.btn-check) + .btn:hover {
        background: var(--fl-lightBlue);
        color: #fff;
        margin-top: 12px;
        border-color: unset;
    }
}

@media (width < 576px) {
    #assignResourceInAClub .modal__actions button {
        width: 100%;
    }
}

.subtitle {
    font-weight: 500;
    font-size: 2rem;
    color: var(--fl-lightBlue);
    margin-bottom: 2rem;
}

button.show-password {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0;
    font-size: 1rem;
    line-height: 1.5;
    background: var(--clr-white);
    border: 1px solid #D7D7D7;
    border-left: 0;
    border-radius: 0 .625rem .625rem 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 3rem;
    height: 100%;
    cursor: pointer;
}


.whatsapp-floating {
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    z-index: 1000
}

    .whatsapp-floating .fa-stack-2x {
        width: 3.75rem;
        height: 3.75rem;
        background: #25D366;
        border-radius: 100%;
        opacity: 1
    }

        .whatsapp-floating .fa-stack-2x:before, .whatsapp-floating .fa-stack-2x:after {
            animation: wave 2.6s linear 0s infinite;
            background: inherit;
            border-radius: inherit;
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            z-index: 0
        }

        .whatsapp-floating .fa-stack-2x:before {
            animation-delay: 0s
        }

        .whatsapp-floating .fa-stack-2x:after {
            animation-delay: 1.3s
        }

    .whatsapp-floating .fa-stack-1x {
        font-size: 2.5rem;
        width: 3.75rem;
        height: 3.75rem;
        display: block;
        place-content: center
    }

    .whatsapp-floating i.fa-brands.fa-whatsapp {
        color: #fff;
    }

@keyframes wave {
    0% {
        opacity: .45;
        transform: scale(1)
    }

    40% {
        opacity: .45
    }

    to {
        opacity: 0;
        transform: scale(1.35)
    }
}

@media (width<576px) {
    .whatsapp-floating {
        right: 2rem;
        bottom: 3rem
    }
}