/* --------------- 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;
}