@import url('https://fonts.googleapis.com/css2?family=Quattrocento:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');

@font-face {
  font-family: 'Reitam';
  src: url('local_fonts/Reitam-Regular.otf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'adorn-expanded-sans';
  src: url('local_fonts/adorn-expanded-sans.otf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Disket';
  src: url('local_fonts/Disket-Mono-Bold.ttf');
  font-weight: normal;
  font-style: normal;
}

/* ------------- #0 ------------- */
/* ----------- GLOBAL ----------- */

:root {
  --mainBg: #232931;
  --accent: #5F0101;
}

body {
  margin: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: white;
  font-family: 'Quattrocento', serif;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #303030;
}

.d-none {
  display: none !important;
}

.interface {
  z-index: 10;
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(100% + 35px);
  height: calc(100% + 35px);
  position: absolute;
  top: -20px;
  left: -20px;
  background-image: url(../img/website/main-background.jpg);
  background-size: cover;
  transition: 0.2s ease-in-out;
}

.interface .filter {
  background-color: var(--mainBg);
  opacity: 0.7;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.interface .heading,
#episode-player .heading,
#team .heading {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 50px;
  padding: 0 50px;
  margin-top: 75px;
  text-align: center;
  background-color: var(--accent);
  color: white;
  -webkit-clip-path: polygon(100% 0%, 96% 50%, 100% 100%, 0 100%, 4% 50%, 0 0%);
  clip-path: polygon(100% 0%, 96% 50%, 100% 100%, 0 100%, 4% 50%, 0 0%);
  font-family: 'Reitam', sans-serif;
  font-weight: bold;
  font-size: 16px;
  letter-spacing: 2px;
}

.close-interface {
  position: absolute;
  top: 50px;
  right: 50px;
  cursor: pointer;
  z-index: 100;
}

.close-interface.back {
  right: unset;
  left: 50px;
}

input[type="text"],
input[type="email"],
input[type="password"] {
  font-family: 'Quicksand';
  font-size: 15px;
  background-color: transparent;
  border-radius: 10px;
  border: 2px solid white;
  color: white;
  outline: none;
  height: 38px;
  padding: 0 12px;
}

input[type="date"],
input[type="number"] {
  background: transparent;
  color: white;
  border: 2px solid white;
  height: 35px;
  border-radius: 10px;
  padding: 0 10px;
}

.primary-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 40px;
  background-color: transparent;
  color: white;
  font-family: 'Quicksand', sans-serif;
  font-size: 17px;
  border: 2px solid var(--accent);
  border-radius: 10px;
  outline: none;
  cursor: not-allowed;
  transition: 0.15s ease-in-out;
}

.primary-btn.clickable {
  background-color: var(--accent);
  cursor: pointer;
}

.animated-btn,
.secondary-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 40px;
  background-color: transparent;
  color: white;
  font-family: 'Quicksand', sans-serif;
  font-size: 17px;
  border: 2px solid white;
  border-radius: 10px;
  outline: none;
  cursor: not-allowed;
  line-height: 0;
  transition: 0.15s ease-in-out;
}

.animated-btn.clickable,
.secondary-btn.clickable {
  cursor: pointer !important;
}

.animated-btn.clickable {
  color: white !important;
  border: 2px solid white !important;
}

.animated-btn.clickable::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid grey;
  border-radius: 10px;
  animation: pulseBtn 2.8s ease-in-out infinite;
}

.animated-btn.clickable:hover {
  background-color: rgba(255, 255, 255, 0.084);
}

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

  25% {
    opacity: 0;
    transform: scaleX(1.3) scaleY(2);
  }

  100% {
    opacity: 0;
  }
}

.logout {
  position: absolute;
  top: 40px;
  left: 55px;
  z-index: 999;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  color: white;
  gap: 10px;
  cursor: pointer;
  font-family: 'Quicksand';
}

.logout svg {
  width: 20px;
}

input:focus {
  outline: none;
  border-color: #fff;
  box-shadow: 0 0 10px #ffffff80;
}

/* Modals */

.modal-active,
.modal-active {
  overflow: hidden;
}

.modal-container {
  position: fixed;
  display: table;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  transform: scale(0);
  z-index: 999;
}

.modal-container.reveal {
  transform: scale(1);
}

.modal-container.reveal .modal-background {
  background: rgba(0, 0, 0, .0);
  animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.modal-container.reveal .modal-background .modal {
  opacity: 0;
  animation: scaleUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.modal-container.reveal+.content {
  animation: scaleBack 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.modal-container.out {
  animation: quickScaleDown 0s 0.5s linear forwards;
}

.modal-container.out .modal-background {
  animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.modal-container.out .modal-background .modal {
  animation: scaleDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.modal-container.out+.content {
  animation: scaleForward 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.modal-container .modal-background {
  display: table-cell;
  background: rgba(0, 0, 0, .8);
  text-align: center;
  vertical-align: middle;
}

.modal-container .modal-background .modal {
  background: #232931;
  padding: 15px 30px;
  padding-bottom: 10px;
  display: inline-block;
  border-radius: 8px;
  font-weight: 300;
  position: relative;
  width: 70vw !important;
  max-width: 850px;
  height: fit-content !important;
  overflow: unset !important;
}

.modal-container .modal-background .modal h2 {
  font-size: 25px;
  line-height: 25px;
  margin-bottom: 60px;
  color: lightgrey;
  font-weight: 500;
  font-family: 'Quicksand';
}

.modal-container .modal-background .modal p {
  position: absolute;
  left: 50%;
  top: 55px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.8);
  font-family: 'Quicksand';
}

.modal-container .modal-background .modal a {
  position: absolute;
  left: 13%;
  opacity: 0.8;
  transform: scale(0.9);
  transition: 0.2s ease-in-out;
}

.modal-container .modal-background .modal a:hover {
  transform: scale(1);
}

.modal-container .modal-background .modal .modal-svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 3px;
}

.modal-container .modal-background .modal .modal-svg rect {
  stroke: #fff;
  stroke-width: 2px;
  stroke-dasharray: 778;
  stroke-dashoffset: 778;
}

@keyframes fadeIn {
  0% {
    background: rgba(0, 0, 0, .0);
  }

  100% {
    background: rgba(0, 0, 0, .7);
  }
}

@keyframes fadeOut {
  0% {
    background: rgba(0, 0, 0, .7);
  }

  100% {
    background: rgba(0, 0, 0, .0);
  }
}

@keyframes scaleUp {
  0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
  }

  100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
  }
}

@keyframes scaleDown {
  0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
  }

  100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
  }
}

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

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

@keyframes scaleForward {
  0% {
    transform: scale(0.85);
  }

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

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

  99.9% {
    transform: scale(1);
  }

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


/* Alert Notifications 1 */

#notification-container {
  display: block;
  position: fixed;
  top: 25px;
  right: 25px;
  z-index: 999;
  font-family: 'Quicksand';
  z-index: 1000;
}

.notification {
  display: block;
  position: relative;
  padding: 15px 15px 15px 60px;
  overflow: hidden;
  width: 300px;
  border-radius: 4px;
  box-shadow: 0 0 12px #232931;
  color: #fff;
  -webkit-animation: show-notification 3s ease-out;
  animation: show-notification 3s ease-out;
}

.notification-close {
  padding: 0;
  cursor: pointer;
  background: none;
  border: 0;
  outline: none;
  -webkit-appearance: none;
  position: absolute;
  top: 5px;
  right: 10px;
  color: #fff;
  text-shadow: 0 1px 0 #ddd;
}

.notification-close::before {
  font-family: 'FontAwesome';
  font-size: 12px;
  font-weight: normal;
  content: '\f00d';
}

.notification-close:hover {
  color: #666;
}

.notification-title {
  font-size: 1.1em;
  font-weight: bold;
}

.notification-success::before,
.notification-error::before,
.notification-info::before,
.notification-warning::before {
  font-family: 'FontAwesome';
  font-size: 35px;
  display: block;
  position: absolute;
  left: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.notification-success {
  background-color: #44a83d;
}

.notification-success::before {
  content: '\f058';
}

.notification-error {
  background-color: #d24141;
}

.notification-error::before {
  content: '\f057';
}

.notification-info {
  background-color: #2dacd1;
}

.notification-info::before {
  content: '\f05a';
}

.notification-warning {
  background-color: #df6d1c;
}

.notification-warning::before {
  content: '\f071';
}

@-webkit-keyframes show-notification {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, -100%);
  }

  10% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
  }

  90% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate(0, -100%);
  }
}

@keyframes show-notification {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
  }

  10% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  90% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
  }
}

/* Alert Notifications 2 */

.notification-popup {
  font-size: 62.5%;
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  transition: background 0.3s ease-in-out;
  z-index: -999;
}

.notification-popup .center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -999;
}

.notification-popup .notification {
  padding: 0;
  --color: #233031;
  --bezier: cubic-bezier(0.75, 0.21, 0.25, 0.78);
  position: relative;
  text-align: center;
  width: 30rem;
  background-color: #232931;
  box-shadow: 0px 10px 10px black;
  border-radius: 20px;
  transition: transform 0.5s ease 0.4s;
  transform-origin: 50% 0%;
  transform: scaleY(0);
  font-size: 1.6rem;
  font-family: 'Open Sans', Helvetica, sans-serif;
}

.notification-popup .notification.-open {
  transition: 0.5s ease;
  transform-origin: 50% 50%;
  transform: scale(1);
}

.notification-popup .notification.-open::before {
  transition: 0.4s var(--bezier) 0.4s;
  transform: scaleY(0);
}

.notification-popup .notification.-open .notification__button {
  color: #fff !important;
  /* transition: color 0.3s ease 0.8s, background-color 0.3s ease;  */
}

.notification-popup .notification::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform-origin: 0% 100%;
  transition: 0.5s var(--bezier);
  background: var(--color);
  border-radius: 5px;
}

.notification-popup .notification__content {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  padding: 0;
  padding-top: 1rem;
}

.notification-popup .notification__icon {
  font-size: 5.2rem;
  color: var(--color);
  margin-bottom: 2rem;
  transition: color 0.3s ease;
}

.notification-popup .notification__title,
.notification-popup .notification__text,
.notification-popup .notification__icon {
  margin-top: 0;
}

.notification-popup .notification__title {
  font-weight: 600;
  margin-bottom: 1rem;
}

.notification-popup .notification__text {
  color: white;
  font-size: 1.4rem;
}

.notification-popup .notification__button {
  background: var(--color);
  color: var(--color);
  width: 100%;
  border: none;
  padding: 1.4rem 2rem;
  font-size: 1.2rem;
  font-weight: 600;
  transition: color 0.3s ease, background-color 0.3s ease;
  cursor: pointer;
  outline: none;
  position: relative;
  top: 1px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}


/* --------------------- #1 --------------------- */
/* -------- Page Loader & Transitionner --------- */

.page-loader {
  position: absolute;
  z-index: 999;
  height: 105%;
  width: 100%;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.page-loader,
.page-loader .mask {
  background: rgba(50, 50, 50, 1);
  background: -moz-radial-gradient(center, ellipse cover, rgba(50, 50, 50, 1) 0%, rgba(25, 25, 25, 1) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(50, 50, 50, 1)), color-stop(100%, rgba(25, 25, 25, 1)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(50, 50, 50, 1) 0%, rgba(25, 25, 25, 1) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(50, 50, 50, 1) 0%, rgba(25, 25, 25, 1) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(50, 50, 50, 1) 0%, rgba(25, 25, 25, 1) 100%);
  background: radial-gradient(ellipse at center, rgba(50, 50, 50, 1) 0%, rgba(25, 25, 25, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#323232', endColorstr='#191919', GradientType=1);
}

.page-loader .mask {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  animation: openLoading 0.5s 1.5s ease-in-out forwards;
}

.page-loader .waiting-text {
  position: absolute;
  left: 50%;
  bottom: 17%;
  transform: translateX(-50%);
  color: white;
  animation: waitingAnimation 1s infinite;
  font-family: 'Quicksand';
}

@keyframes waitingAnimation {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }

  100% {
    opacity: 1;
  }
}

.page-loader .title {
  position: relative;
  width: fit-content;
  left: 50%;
  top: calc(50% - 180px);
  transform: translate(-50%, -50%);
  z-index: 3;
  color: rgb(114, 114, 114);
  font-family: 'Reitam';
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.page-loader .title .main {
  display: flex;
}

.page-loader .title .sub {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.page-loader .title span {
  position: relative;
  font-size: 40px;
  font-weight: bold;
  margin: 0 8px;
  opacity: 0;
  text-transform: uppercase;
}

.page-loader .title .main span:nth-child(1) {
  animation: textUp 0.5s 0.2s ease-in-out forwards;
}

.page-loader .title .main span:nth-child(2) {
  animation: textUp 0.5s 0.4s ease-in-out forwards;
}

.page-loader .title .main span:nth-child(3) {
  animation: textUp 0.5s 0.6s ease-in-out forwards;
}

.page-loader .title .sub span {
  display: block;
  font-size: 18px;
  text-align: center;
  font-weight: 100;
  margin-top: 10px;
  animation: textUp 0.5s 1s ease-in-out forwards;
}

.page-loader .skip-loading {
  position: absolute;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: none;
  justify-content: center;
  align-items: center;
  gap: 12px;
  line-height: 0;
  border: 2px solid grey;
  animation: appearSkipLoading 0.5s ease-in-out;
}

.page-loader .skip-loading.clickable {
  display: flex;
}

.page-loader .skip-loading svg {
  width: 8px;
}

.page-loader.closed {
  animation: closeLoading 0.6s ease-in-out forwards;
}

@keyframes openLoading {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes appearSkipLoading {
  0% {
    opacity: 0;
    transform: translateX(calc(-50% - 25px));
  }

  75% {
    opacity: 1;
    transform: translateX(calc(-50% + 10px));
  }

  100% {
    opacity: 1;
    transform: translateX(-50%);
  }
}

@keyframes closeLoading {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes textUp {
  0% {
    opacity: 0;
    top: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    top: 15px;
    opacity: 1;
  }
}

#gearAssembly,
#gearHub {
  height: 0;
  width: 0;
  position: absolute;
  top: 55%;
  left: 50%;
  transform-origin: 50% 50%;
  transition: transform .75s ease-in-out;
}

#gearAssembly {
  z-index: 1;
}

#gearHub {
  z-index: 2;
  transform: rotateZ(0deg);
  animation: gearHub 9s linear infinite;
}

@keyframes gearHub {
  to {
    transform: rotateZ(360deg);
  }
}

#gearHub .idler {
  height: 68px;
  width: 2px;
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  margin-top: -34px;
  margin-left: -1px;
  transform-origin: 50% 50%;
}

#gearHub #idler1 {
  transform: rotateZ(0deg) translateY(-34px);
}

#gearHub #idler3 {
  transform: rotateZ(120deg) translateY(-34px);
}

#gearHub #idler2 {
  transform: rotateZ(240deg) translateY(-34px);
}

.tooth {
  position: absolute;
  border-bottom: 0px solid rgb(120, 120, 120);
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  height: 0;
  width: 2px;
  transform-origin: 50% 50%;
  top: 50%;
  left: 50%;
  margin-left: -3px;
  margin-top: 0px;
  animation: tooth .25s ease-out forwards;
}

@keyframes tooth {
  to {
    border-bottom: 10px solid rgb(120, 120, 120);
    margin-top: -5px;
  }
}

.sgear {
  height: 24px;
  width: 24px;
  border-radius: 100%;
  position: absolute;
  z-index: 999999;
  top: 50%;
  left: 50%;
  margin: -12px;
  background: rgb(80, 80, 80);
  box-shadow: inset 0px 0px 0px 5px rgb(120, 120, 120), inset 0px 0px 0px 8px rgb(100, 100, 100);
  transform-origin: 50% 50%;
  transform: rotateZ(0deg);
  animation: sgear 1.5s linear infinite;
}

@keyframes sgear {
  to {
    transform: rotateZ(360deg);
  }
}

.sgear .tooth:nth-child(1) {
  transform: rotateZ(0deg) translateY(-12px);
  animation-delay: 0s;
}

.sgear .tooth:nth-child(2) {
  transform: rotateZ(30deg) translateY(-12px);
  animation-delay: .02s;
}

.sgear .tooth:nth-child(3) {
  transform: rotateZ(60deg) translateY(-12px);
  animation-delay: .04s;
}

.sgear .tooth:nth-child(4) {
  transform: rotateZ(90deg) translateY(-12px);
  animation-delay: .06s;
}

.sgear .tooth:nth-child(5) {
  transform: rotateZ(120deg) translateY(-12px);
  animation-delay: .08s;
}

.sgear .tooth:nth-child(6) {
  transform: rotateZ(150deg) translateY(-12px);
  animation-delay: .1s;
}

.sgear .tooth:nth-child(7) {
  transform: rotateZ(180deg) translateY(-12px);
  animation-delay: .12s;
}

.sgear .tooth:nth-child(8) {
  transform: rotateZ(210deg) translateY(-12px);
  animation-delay: .14s;
}

.sgear .tooth:nth-child(9) {
  transform: rotateZ(240deg) translateY(-12px);
  animation-delay: .16s;
}

.sgear .tooth:nth-child(10) {
  transform: rotateZ(270deg) translateY(-12px);
  animation-delay: .18s;
}

.sgear .tooth:nth-child(11) {
  transform: rotateZ(300deg) translateY(-12px);
  animation-delay: .20s;
}

.sgear .tooth:nth-child(12) {
  transform: rotateZ(330deg) translateY(-12px);
  animation-delay: .22s;
}

.mgear {
  height: 50px;
  width: 50px;
  border-radius: 100%;
  position: absolute;
  z-index: 4;
  top: 0%;
  left: 50%;
  margin-left: -25px;
  box-shadow: inset 0px 0px 0px 5px rgb(120, 120, 120), inset 0px 0px 0px 8px rgb(100, 100, 100);
  transform-origin: 50% 50%;
  transform: rotateZ(7.5deg);
  animation: mgear 3.6s linear infinite;
}

.mgear:before {
  content: '';
  position: absolute;
  height: 16px;
  width: 16px;
  background: rgb(140, 140, 140);
  box-shadow: inset 0px 0px 0px 3px rgb(100, 100, 100);
  top: 50%;
  left: 50%;
  margin: -8px;
  border-radius: 100%;
}

@keyframes mgear {
  to {
    transform: rotateZ(-352.5deg);
  }
}

.mgear .arm {
  position: absolute;
  height: 12px;
  width: 4px;
  background: rgb(100, 100, 100);
  top: 50%;
  left: 50%;
  margin-top: -6px;
  margin-left: -2px;
  transform-origin: 50% 50%;
}

.mgear #arm1 {
  transform: rotateZ(0deg) translateY(-12px);
}

.mgear #arm2 {
  transform: rotateZ(120deg) translateY(-12px);
}

.mgear #arm3 {
  transform: rotateZ(240deg) translateY(-12px);
}

.mgear .tooth:nth-child(1) {
  transform: rotateZ(0deg) translateY(-25px);
  animation-delay: 0s;
}

.mgear .tooth:nth-child(2) {
  transform: rotateZ(15deg) translateY(-25px);
  animation-delay: .02s;
}

.mgear .tooth:nth-child(3) {
  transform: rotateZ(30deg) translateY(-25px);
  animation-delay: .04s;
}

.mgear .tooth:nth-child(4) {
  transform: rotateZ(45deg) translateY(-25px);
  animation-delay: .06s;
}

.mgear .tooth:nth-child(5) {
  transform: rotateZ(60deg) translateY(-25px);
  animation-delay: .08s;
}

.mgear .tooth:nth-child(6) {
  transform: rotateZ(75deg) translateY(-25px);
  animation-delay: .1s;
}

.mgear .tooth:nth-child(7) {
  transform: rotateZ(90deg) translateY(-25px);
  animation-delay: .12s;
}

.mgear .tooth:nth-child(8) {
  transform: rotateZ(105deg) translateY(-25px);
  animation-delay: .14s;
}

.mgear .tooth:nth-child(9) {
  transform: rotateZ(120deg) translateY(-25px);
  animation-delay: .16s;
}

.mgear .tooth:nth-child(10) {
  transform: rotateZ(135deg) translateY(-25px);
  animation-delay: .18s;
}

.mgear .tooth:nth-child(11) {
  transform: rotateZ(150deg) translateY(-25px);
  animation-delay: .20s;
}

.mgear .tooth:nth-child(12) {
  transform: rotateZ(165deg) translateY(-25px);
  animation-delay: .22s;
}

.mgear .tooth:nth-child(13) {
  transform: rotateZ(180deg) translateY(-25px);
  animation-delay: .24s;
}

.mgear .tooth:nth-child(14) {
  transform: rotateZ(195deg) translateY(-25px);
  animation-delay: .26s;
}

.mgear .tooth:nth-child(15) {
  transform: rotateZ(210deg) translateY(-25px);
  animation-delay: .28s;
}

.mgear .tooth:nth-child(16) {
  transform: rotateZ(225deg) translateY(-25px);
  animation-delay: .30s;
}

.mgear .tooth:nth-child(17) {
  transform: rotateZ(240deg) translateY(-25px);
  animation-delay: .32s;
}

.mgear .tooth:nth-child(18) {
  transform: rotateZ(255deg) translateY(-25px);
  animation-delay: .34s;
}

.mgear .tooth:nth-child(19) {
  transform: rotateZ(270deg) translateY(-25px);
  animation-delay: .36s;
}

.mgear .tooth:nth-child(20) {
  transform: rotateZ(285deg) translateY(-25px);
  animation-delay: .38s;
}

.mgear .tooth:nth-child(21) {
  transform: rotateZ(300deg) translateY(-25px);
  animation-delay: .40s;
}

.mgear .tooth:nth-child(22) {
  transform: rotateZ(315deg) translateY(-25px);
  animation-delay: .42s;
}

.mgear .tooth:nth-child(23) {
  transform: rotateZ(330deg) translateY(-25px);
  animation-delay: .44s;
}

.mgear .tooth:nth-child(24) {
  transform: rotateZ(345deg) translateY(-25px);
  animation-delay: .46s;
}

.lgear {
  height: 148px;
  width: 148px;
  border-radius: 100%;
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  margin: -74px;
  box-shadow: 0px 0px 0px 6px rgb(120, 120, 120), 0px 0px 0px 20px rgb(80, 80, 80);
  transform-origin: 50% 50%;
  transform: rotateZ(180deg);
}

.lgear .tooth:nth-child(1) {
  transform: rotateZ(0deg) translateY(74px);
  animation-delay: 0s;
}

.lgear .tooth:nth-child(2) {
  transform: rotateZ(6deg) translateY(74px);
  animation-delay: .02s;
}

.lgear .tooth:nth-child(3) {
  transform: rotateZ(12deg) translateY(74px);
  animation-delay: .04s;
}

.lgear .tooth:nth-child(4) {
  transform: rotateZ(18deg) translateY(74px);
  animation-delay: .06s;
}

.lgear .tooth:nth-child(5) {
  transform: rotateZ(24deg) translateY(74px);
  animation-delay: .08s;
}

.lgear .tooth:nth-child(6) {
  transform: rotateZ(30deg) translateY(74px);
  animation-delay: .1s;
}

.lgear .tooth:nth-child(7) {
  transform: rotateZ(36deg) translateY(74px);
  animation-delay: .12s;
}

.lgear .tooth:nth-child(8) {
  transform: rotateZ(42deg) translateY(74px);
  animation-delay: .14s;
}

.lgear .tooth:nth-child(9) {
  transform: rotateZ(48deg) translateY(74px);
  animation-delay: .16s;
}

.lgear .tooth:nth-child(10) {
  transform: rotateZ(54deg) translateY(74px);
  animation-delay: .18s;
}

.lgear .tooth:nth-child(11) {
  transform: rotateZ(60deg) translateY(74px);
  animation-delay: .2s;
}

.lgear .tooth:nth-child(12) {
  transform: rotateZ(66deg) translateY(74px);
  animation-delay: .22s;
}

.lgear .tooth:nth-child(13) {
  transform: rotateZ(72deg) translateY(74px);
  animation-delay: .24s;
}

.lgear .tooth:nth-child(14) {
  transform: rotateZ(78deg) translateY(74px);
  animation-delay: .26s;
}

.lgear .tooth:nth-child(15) {
  transform: rotateZ(84deg) translateY(74px);
  animation-delay: .28s;
}

.lgear .tooth:nth-child(16) {
  transform: rotateZ(90deg) translateY(74px);
  animation-delay: .3s;
}

.lgear .tooth:nth-child(17) {
  transform: rotateZ(96deg) translateY(74px);
  animation-delay: .32s;
}

.lgear .tooth:nth-child(18) {
  transform: rotateZ(102deg) translateY(74px);
  animation-delay: .34s;
}

.lgear .tooth:nth-child(19) {
  transform: rotateZ(108deg) translateY(74px);
  animation-delay: .36s;
}

.lgear .tooth:nth-child(20) {
  transform: rotateZ(114deg) translateY(74px);
  animation-delay: .38s;
}

.lgear .tooth:nth-child(21) {
  transform: rotateZ(120deg) translateY(74px);
  animation-delay: .4s;
}

.lgear .tooth:nth-child(22) {
  transform: rotateZ(126deg) translateY(74px);
  animation-delay: .42s;
}

.lgear .tooth:nth-child(23) {
  transform: rotateZ(132deg) translateY(74px);
  animation-delay: .44s;
}

.lgear .tooth:nth-child(24) {
  transform: rotateZ(138deg) translateY(74px);
  animation-delay: .46s;
}

.lgear .tooth:nth-child(25) {
  transform: rotateZ(144deg) translateY(74px);
  animation-delay: .48s;
}

.lgear .tooth:nth-child(26) {
  transform: rotateZ(150deg) translateY(74px);
  animation-delay: .5s;
}

.lgear .tooth:nth-child(27) {
  transform: rotateZ(156deg) translateY(74px);
  animation-delay: .52s;
}

.lgear .tooth:nth-child(28) {
  transform: rotateZ(162deg) translateY(74px);
  animation-delay: .54s;
}

.lgear .tooth:nth-child(29) {
  transform: rotateZ(168deg) translateY(74px);
  animation-delay: .56s;
}

.lgear .tooth:nth-child(30) {
  transform: rotateZ(174deg) translateY(74px);
  animation-delay: .58s;
}

.lgear .tooth:nth-child(31) {
  transform: rotateZ(180deg) translateY(74px);
  animation-delay: .6s;
}

.lgear .tooth:nth-child(32) {
  transform: rotateZ(186deg) translateY(74px);
  animation-delay: .62s;
}

.lgear .tooth:nth-child(33) {
  transform: rotateZ(192deg) translateY(74px);
  animation-delay: .64s;
}

.lgear .tooth:nth-child(34) {
  transform: rotateZ(198deg) translateY(74px);
  animation-delay: .66s;
}

.lgear .tooth:nth-child(35) {
  transform: rotateZ(204deg) translateY(74px);
  animation-delay: .68s;
}

.lgear .tooth:nth-child(36) {
  transform: rotateZ(210deg) translateY(74px);
  animation-delay: .7s;
}

.lgear .tooth:nth-child(37) {
  transform: rotateZ(216deg) translateY(74px);
  animation-delay: .72s;
}

.lgear .tooth:nth-child(38) {
  transform: rotateZ(222deg) translateY(74px);
  animation-delay: .74s;
}

.lgear .tooth:nth-child(39) {
  transform: rotateZ(228deg) translateY(74px);
  animation-delay: .76s;
}

.lgear .tooth:nth-child(40) {
  transform: rotateZ(234deg) translateY(74px);
  animation-delay: .78s;
}

.lgear .tooth:nth-child(41) {
  transform: rotateZ(240deg) translateY(74px);
  animation-delay: .8s;
}

.lgear .tooth:nth-child(42) {
  transform: rotateZ(246deg) translateY(74px);
  animation-delay: .82s;
}

.lgear .tooth:nth-child(43) {
  transform: rotateZ(252deg) translateY(74px);
  animation-delay: .84s;
}

.lgear .tooth:nth-child(44) {
  transform: rotateZ(258deg) translateY(74px);
  animation-delay: .86s;
}

.lgear .tooth:nth-child(45) {
  transform: rotateZ(264deg) translateY(74px);
  animation-delay: .88s;
}

.lgear .tooth:nth-child(46) {
  transform: rotateZ(270deg) translateY(74px);
  animation-delay: .9s;
}

.lgear .tooth:nth-child(47) {
  transform: rotateZ(276deg) translateY(74px);
  animation-delay: .92s;
}

.lgear .tooth:nth-child(48) {
  transform: rotateZ(282deg) translateY(74px);
  animation-delay: .94s;
}

.lgear .tooth:nth-child(49) {
  transform: rotateZ(288deg) translateY(74px);
  animation-delay: .96s;
}

.lgear .tooth:nth-child(50) {
  transform: rotateZ(294deg) translateY(74px);
  animation-delay: .98s;
}

.lgear .tooth:nth-child(51) {
  transform: rotateZ(300deg) translateY(74px);
  animation-delay: 1s;
}

.lgear .tooth:nth-child(52) {
  transform: rotateZ(306deg) translateY(74px);
  animation-delay: 1.02s;
}

.lgear .tooth:nth-child(53) {
  transform: rotateZ(312deg) translateY(74px);
  animation-delay: 1.04s;
}

.lgear .tooth:nth-child(54) {
  transform: rotateZ(318deg) translateY(74px);
  animation-delay: 1.06s;
}

.lgear .tooth:nth-child(55) {
  transform: rotateZ(324deg) translateY(74px);
  animation-delay: 1.08s;
}

.lgear .tooth:nth-child(56) {
  transform: rotateZ(330deg) translateY(74px);
  animation-delay: 1.1s;
}

.lgear .tooth:nth-child(57) {
  transform: rotateZ(336deg) translateY(74px);
  animation-delay: 1.12s;
}

.lgear .tooth:nth-child(58) {
  transform: rotateZ(342deg) translateY(74px);
  animation-delay: 1.14s;
}

.lgear .tooth:nth-child(59) {
  transform: rotateZ(348deg) translateY(74px);
  animation-delay: 1.16s;
}

.lgear .tooth:nth-child(60) {
  transform: rotateZ(354deg) translateY(74px);
  animation-delay: 1.18s;
}

.bolt {
  height: 6px;
  width: 6px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -3px;
  border-radius: 100%;
  background: rgb(50, 50, 50);
}

#bolt1 {
  transform: rotateZ(0deg) translateY(-87px);
}

#bolt2 {
  transform: rotateZ(72deg) translateY(-87px);
}

#bolt3 {
  transform: rotateZ(144deg) translateY(-87px);
}

#bolt4 {
  transform: rotateZ(216deg) translateY(-87px);
}

#bolt5 {
  transform: rotateZ(288deg) translateY(-87px);
}

.chainGear {
  height: 60px;
  width: 60px;
  background: rgb(60, 60, 60);
  box-shadow: 0px 0px 0px 34px rgb(50, 50, 50), 0px 0px 0px 70px rgb(60, 60, 60);
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -30px;
  transform-origin: 50% 50%;
  border-radius: 100%;
  z-index: 1;
}

.chainGear:after {
  content: '';
  z-index: 4;
  height: 38px;
  width: 38px;
  background: rgb(60, 60, 60);
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -19px;
  border-radius: 100%;
}

.chainGear:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 0;
  height: 0;
  border-left: 37px solid transparent;
  border-right: 37px solid transparent;
  border-bottom: 64px solid rgb(80, 80, 80);
  margin-left: -37px;
  margin-top: -43px;
}

.chainGear .arm {
  position: absolute;
  z-index: 7;
  height: 40px;
  width: 20px;
  background: rgb(60, 60, 60);
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -10px;
  transform-origin: 50% 50%;
}

.chainGear #a1 {
  transform: rotateZ(60deg) translateY(-44px);
}

.chainGear #a2 {
  transform: rotateZ(180deg) translateY(-44px);
}

.chainGear #a3 {
  transform: rotateZ(300deg) translateY(-44px);
}

.chainGear .t {
  position: absolute;
  z-index: 5;
  border-bottom: 24px solid rgb(60, 60, 60);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  height: 0;
  width: 10px;
  top: 50%;
  left: 50%;
  margin-top: -12px;
  margin-left: -13px;
  transform-origin: 50% 50%;
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
}

.chainGear .t:nth-child(1),
.chainGearOutput .t:nth-child(1) {
  transform: rotateZ(11.25deg) translateY(-110px);
}

.chainGear .t:nth-child(2),
.chainGearOutput .t:nth-child(2) {
  transform: rotateZ(33.75deg) translateY(-110px);
}

.chainGear .t:nth-child(3),
.chainGearOutput .t:nth-child(3) {
  transform: rotateZ(56.25deg) translateY(-110px);
}

.chainGear .t:nth-child(4),
.chainGearOutput .t:nth-child(4) {
  transform: rotateZ(78.75deg) translateY(-110px);
}

.chainGear .t:nth-child(5),
.chainGearOutput .t:nth-child(5) {
  transform: rotateZ(101.25deg) translateY(-110px);
}

.chainGear .t:nth-child(6),
.chainGearOutput .t:nth-child(6) {
  transform: rotateZ(123.75deg) translateY(-110px);
}

.chainGear .t:nth-child(7),
.chainGearOutput .t:nth-child(7) {
  transform: rotateZ(146.25deg) translateY(-110px);
}

.chainGear .t:nth-child(8),
.chainGearOutput .t:nth-child(8) {
  transform: rotateZ(168.75deg) translateY(-110px);
}

.chainGear .t:nth-child(9),
.chainGearOutput .t:nth-child(9) {
  transform: rotateZ(191.25deg) translateY(-110px);
}

.chainGear .t:nth-child(10),
.chainGearOutput .t:nth-child(10) {
  transform: rotateZ(213.75deg) translateY(-110px);
}

.chainGear .t:nth-child(11),
.chainGearOutput .t:nth-child(11) {
  transform: rotateZ(236.25deg) translateY(-110px);
}

.chainGear .t:nth-child(12),
.chainGearOutput .t:nth-child(12) {
  transform: rotateZ(258.75deg) translateY(-110px);
}

.chainGear .t:nth-child(13),
.chainGearOutput .t:nth-child(13) {
  transform: rotateZ(281.25deg) translateY(-110px);
}

.chainGear .t:nth-child(14),
.chainGearOutput .t:nth-child(14) {
  transform: rotateZ(303.75deg) translateY(-110px);
}

.chainGear .t:nth-child(15),
.chainGearOutput .t:nth-child(15) {
  transform: rotateZ(326.25deg) translateY(-110px);
}

.chainGear .t:nth-child(16),
.chainGearOutput .t:nth-child(16) {
  transform: rotateZ(348.75deg) translateY(-110px);
}

.chainGearOutput {
  height: 60px;
  width: 60px;
  background: rgb(60, 60, 60);
  box-shadow: 0px 0px 0px 34px rgb(50, 50, 50), 0px 0px 0px 70px rgb(60, 60, 60);
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -30px;
  transform-origin: 50% 50%;
  border-radius: 100%;
  z-index: 1;
  transform: translateY(-528px) rotateZ(0deg);
  animation: chainGearOutput 9s linear infinite;
}

.chainGearOutput:after {
  content: '';
  z-index: 4;
  height: 38px;
  width: 38px;
  background: rgb(60, 60, 60);
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -19px;
  border-radius: 100%;
}

.chainGearOutput .arm {
  position: absolute;
  z-index: 7;
  height: 40px;
  width: 20px;
  background: rgb(60, 60, 60);
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -10px;
  transform-origin: 50% 50%;
}

.chainGearOutput #a1 {
  transform: rotateZ(60deg) translateY(-44px);
}

.chainGearOutput #a2 {
  transform: rotateZ(180deg) translateY(-44px);
}

.chainGearOutput #a3 {
  transform: rotateZ(300deg) translateY(-44px);
}

.chainGearOutput .t {
  position: absolute;
  z-index: 5;
  border-bottom: 24px solid rgb(60, 60, 60);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  height: 0;
  width: 10px;
  top: 50%;
  left: 50%;
  margin-top: -12px;
  margin-left: -13px;
  transform-origin: 50% 50%;
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
}

@keyframes chainGearOutput {
  to {
    transform: translateY(-528px) rotateZ(360deg);
  }
}

#chainAssembly {
  top: 50%;
  left: 50%;
  margin-top: -536px;
  margin-left: 112px;
  z-index: 100;
  transform: translateY(0px) rotateZ(90deg);
  animation: chainAssembl 9s linear forwards;
  display: none;
}

.link {
  position: absolute;
  height: 16px;
  width: 44px;
  top: 50%;
  left: 100%;
  margin-top: -8px;
  background: rgb(80, 80, 80);
  box-shadow: 0px 0px 5px 3px rgba(50, 50, 50, 0.5);
  z-index: 100;
  transform-origin: 0% 50%;
  animation: linkCur 9s cubic-bezier(.5, 0, .5, 1) forwards;
}

.link:before {
  content: '';
  position: absolute;
  height: 24px;
  width: 24px;
  top: 50%;
  left: 0%;
  margin: -12px;
  border-radius: 100%;
  box-shadow: inset 0px 0px 0px 8px rgb(80, 80, 80), -2px 0px 5px 0px rgba(50, 50, 50, 0.5);
  background: rgb(50, 50, 50);
  z-index: 100;
}

.link:after {
  content: '';
  position: absolute;
  height: 24px;
  width: 24px;
  top: 50%;
  right: 0%;
  margin: -12px;
  border-radius: 100%;
  box-shadow: inset 0px 0px 0px 8px rgb(80, 80, 80), 2px 0px 5px 0px rgba(50, 50, 50, 0.5);
  background: rgb(50, 50, 50);
  z-index: 100;
}

.c.link {
  background: rgb(70, 70, 70);
  z-index: 99;
}

.c.link:before,
.c.link:after {
  box-shadow: inset 0px 0px 0px 8px rgb(70, 70, 70);
  background: rgb(50, 50, 50);
  z-index: 99;
}

@keyframes chainAssembly {
  60% {
    opacity: 1;
  }

  70% {
    opacity: 0;
  }

  100% {
    transform: translateY(704px) rotateZ(90deg);
    opacity: 0;
  }
}

@keyframes linkCurl {
  0% {
    transform: rotateZ(0deg);
  }

  12.5% {
    transform: rotateZ(22.5deg);
  }

  50% {
    transform: rotateZ(22.5deg);
  }

  62.5% {
    transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(0deg);
  }
}

#l1 {
  transform: rotateZ(0deg);
  animation-delay: 5.625s;
}

#l2 {
  transform: rotateZ(0deg);
  animation-delay: 5.0625s;
}

#l3 {
  transform: rotateZ(0deg);
  animation-delay: 4.5s;
}

#l4 {
  transform: rotateZ(0deg);
  animation-delay: 3.9375s;
}

#l5 {
  transform: rotateZ(0deg);
  animation-delay: 3.375s;
}

#l6 {
  transform: rotateZ(0deg);
  animation-delay: 2.8125s;
}

#l7 {
  transform: rotateZ(0deg);
  animation-delay: 2.25s;
}

#l8 {
  transform: rotateZ(0deg);
  animation-delay: 1.6875s;
}

#l9 {
  transform: rotateZ(0deg);
  animation-delay: 1.125s;
}

#l10 {
  transform: rotateZ(0deg);
  animation-delay: 0.5625s;
}

#l11 {
  transform: rotateZ(0deg);
  animation-delay: 0s;
}

#l12 {
  transform: rotateZ(11.25deg);
  animation-delay: -0.5625s;
}

#l13 {
  transform: rotateZ(22.5deg);
  animation-delay: -1.125s;
}

#l14 {
  transform: rotateZ(22.5deg);
  animation-delay: -1.6875s;
}

#l15 {
  transform: rotateZ(22.5deg);
  animation-delay: -2.25s;
}

#l16 {
  transform: rotateZ(22.5deg);
  animation-delay: -2.8125s;
}

#l17 {
  transform: rotateZ(22.5deg);
  animation-delay: -3.375s;
}

#l18 {
  transform: rotateZ(22.5deg);
  animation-delay: -3.9375s;
}

#l19 {
  transform: rotateZ(22.5deg);
  animation-delay: -4.5s;
}

#l20 {
  transform: rotateZ(11.25deg);
  animation-delay: -5.0625s;
}

#l21 {
  transform: rotateZ(0deg);
  animation-delay: 5.625s;
}

#l22 {
  transform: rotateZ(0deg);
  animation-delay: 5.0625s;
}

#l23 {
  transform: rotateZ(0deg);
  animation-delay: 4.5s;
}

#l24 {
  transform: rotateZ(0deg);
  animation-delay: 3.9375s;
}

#l25 {
  transform: rotateZ(0deg);
  animation-delay: 3.375s;
}

#l26 {
  transform: rotateZ(0deg);
  animation-delay: 2.8125s;
}

#l27 {
  transform: rotateZ(0deg);
  animation-delay: 2.25s;
}

#l28 {
  transform: rotateZ(0deg);
  animation-delay: 1.6875s;
}

#l29 {
  transform: rotateZ(0deg);
  animation-delay: 1.125s;
}

#l30 {
  transform: rotateZ(0deg);
  animation-delay: 0.5625s;
}

#l31 {
  transform: rotateZ(0deg);
  animation-delay: 0s;
}

#l32 {
  transform: rotateZ(11.25deg);
  animation-delay: -0.5625s;
}

#l33 {
  transform: rotateZ(22.5deg);
  animation-delay: -1.125s;
}

#l34 {
  transform: rotateZ(22.5deg);
  animation-delay: -1.6875s;
}

#l35 {
  transform: rotateZ(22.5deg);
  animation-delay: -2.25s;
}

#l36 {
  transform: rotateZ(22.5deg);
  animation-delay: -2.8125s;
}

#l37 {
  transform: rotateZ(22.5deg);
  animation-delay: -3.375s;
}

#l38 {
  transform: rotateZ(22.5deg);
  animation-delay: -3.9375s;
}

#l39 {
  transform: rotateZ(22.5deg);
  animation-delay: -4.5s;
}

/* Transitionner */

#transitionner,
#transitionner-from-cookie {
  position: absolute;
  display: none;
  left: 0;
  top: 0;
  z-index: 1000;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: white;
  width: 100%;
  height: 100%;
  background-color: #252525;
  transform: translateX(100%);
  transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0.25s;
}

#transitionner>*,
#transitionner-from-cookie>* {
  opacity: 0;
  transition: 0.8s ease-in-out;
}

#transitionner h3,
#transitionner-from-cookie h3 {
  font-size: 30px;
  text-transform: uppercase;
  font-family: 'Reitam';
  letter-spacing: 1.5px;
}

#transitionner p,
#transitionner-from-cookie p {
  font-size: 22px;
  text-transform: uppercase;
  font-family: 'Quicksand';
  margin: 0;
}

#transitionner-from-cookie {
  display: flex;
  transform: translateX(0);
  transition: none;
}

#transitionner-from-cookie>* {
  opacity: 1;
}

.loading-pulse {
  position: relative;
  width: 6px;
  height: 24px;
  background: rgba(255, 255, 255, 0.2);
  animation: pulse 750ms infinite;
  animation-delay: 250ms;
  margin-top: 60px;
}

.loading-pulse:before,
.loading-pulse:after {
  content: '';
  position: absolute;
  display: block;
  height: 16px;
  width: 6px;
  background: rgba(255, 255, 255, 0.2);
  top: 50%;
  transform: translateY(-50%);
  animation: pulse 750ms infinite;
}

.loading-pulse:before {
  left: -12px;
}

.loading-pulse:after {
  left: 12px;
  animation-delay: 500ms;
}

@keyframes pulse {
  50% {
    background: white;
  }
}

/* Back to Main */

#back-to-main {
  display: none;
  position: absolute;
  left: 25px;
  top: 25px;
  height: 40px;
  min-width: 55px;
  max-width: 55px;
  background-color: #8F0000;
  -webkit-clip-path: polygon(0 0, 72% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 72% 0%, 100% 100%, 0% 100%);
  cursor: pointer;
  transition: 0.3s ease-in-out;
  z-index: 10;
}

#back-to-main:hover {
  min-width: 240px;
  max-width: 240px;
  -webkit-clip-path: polygon(0 0, 90% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 90% 0%, 100% 100%, 0% 100%);
}

#back-to-main svg {
  margin-left: 15px;
  margin-top: 8px;
  width: fit-content;
  transition: 0.3s ease-in-out;
}

#back-to-main:hover svg {
  transform: rotate(-90deg);
}

#back-to-main p {
  color: white;
  display: inline-block;
  transform: translateY(-6px);
  font-family: 'Quicksand';
  margin-left: 30px;
}


/* ------------- #2 ------------- */
/* ------- ThreeJS Canva -------- */

.threejs {
  z-index: 0;
}

#profile-info {
  position: absolute;
  top: 25px;
  right: 25px;
  font-family: 'Quattrocento';
  font-weight: bold;
  color: white;
}

/* ------------- #3 ------------- */
/* -------- Points Divs --------- */

.points {
  transition: 0.15s ease-in-out;
  z-index: 1;
}

.points.hidden {
  opacity: 0;
}

.points.hidden .single-point p {
  cursor: default;
}

.points .single-point {
  position: absolute;
}

.points .single-point p {
  padding: 8px 16px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(5px);
  color: black;
  font-family: "Quattrocento";
  font-weight: bold;
  text-align: center;
  font-size: 20px;
  cursor: pointer;
  transition: opacity 0.3s;
  width: fit-content;
}

.points .single-point p::before {
  content: "";
  position: absolute;
  background: #bc0303;
  top: 59%;
  left: 50%;
  width: 80%;
  height: 12px;
  z-index: -1;
  -webkit-transform: rotate(-5deg) translateX(-50%) translateY(-50%);
  -ms-transform: rotate(-5deg) translateX(-50%) translateY(-50%);
  transform: rotate(-5deg) translateX(-50%) translateY(-50%);
  backdrop-filter: blur(5px);
}

.points .form,
.points .profile {
  right: 36%;
  top: 47%;
}

.points .lore,
.points .about {
  left: 41%;
  top: 35%;
}

.points .episodes {
  left: 20%;
  top: 35%;
}

.points .books {
  left: 74%;
  bottom: 26%;
}

.points .team {
  right: 16.5%;
  top: 32%;
}

/* ------------- #4 ------------- */
/* -------- Login Form ---------- */

#login-register {
  display: none;
}

#login-register .form .ajaxResponse {
  position: absolute;
  top: -40px;
  background-color: var(--accent);
  color: white;
  border-radius: 10px 10px 0 0;
  padding: 10px 25px;
  animation: showErrorLogin 5s ease-in-out forwards;
  z-index: -1;
}

@keyframes showErrorLogin {
  0% {
    top: -35px;
    opacity: 0;
  }

  5%,
  95% {
    top: -40px;
    opacity: 1;
  }

  100% {
    top: -35px;
    opacity: 0;
  }
}

#login-register .form {
  z-index: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: clamp(850px, 80%, 1400px);
  margin-top: 150px;
  height: calc(100% - 150px);
  font-family: 'Quicksand', sans-serif;
  color: white;
}

#login-register .form::before {
  content: '';
  z-index: 0;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 10px;
  height: 100%;
  background-color: white;
  opacity: 0.5;
}

#login-register .form .swap {
  z-index: 1;
  position: absolute;
  top: 20px;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(0px) rotate(0deg);
  -ms-transform: translateX(-50%) translateY(0px) rotate(0deg);
  transform: translateX(-50%) translateY(0px) rotate(0deg);
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

#login-register .form .swap svg {
  width: 30px;
  height: 30px;
  padding: 12px;
  border-radius: 1in;
  border: 2px solid white;
  background-color: var(--accent);
}

#login-register .col-left,
#login-register .col-right {
  position: relative;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.35);
}

#login-register .col-left {
  border-radius: 20px 0 0 0;
}

#login-register .col-right {
  border-radius: 0 20px 0 0;
}

#login-register .col-left>div,
#login-register .col-left>a,
#login-register .col-left>button,
#login-register .col-right>div,
#login-register .col-right>a,
#login-register .col-right>button {
  width: 60%;
  max-width: 340px;
}

#login-register .col-left h3,
#login-register .col-right h3 {
  font-family: 'Reitam', sans-serif;
  letter-spacing: 3px;
  font-size: 25px;
  margin-bottom: 35px;
}

#login-register .login .input-group:nth-of-type(2) {
  position: relative;
}

#login-register .login .input-group:nth-of-type(2) a {
  position: absolute;
  right: -55px;
  top: 38px;
  transform: scale(0.9);
  transition: 0.2s ease-in-out;
}

#login-register .login .input-group:nth-of-type(2) a:hover {
  transform: scale(1);
}

#login-register .input-group {
  margin-top: 10px;
}

#login-register .input-group p,
#login-register .input-group input {
  width: 100%;
  box-sizing: border-box;
}

#login-register .input-group p {
  margin-bottom: 10px;
  margin-left: 12px;
}

#login-register .extra,
#login-register a {
  color: white;
  font-family: 'Quicksand';
  text-align: right;
  text-decoration: underline;
  margin: 30px 0;
  cursor: pointer;
}

#login-register a {
  margin: 0;
  margin-top: 10px;
  text-align: left;
  font-style: italic;
  opacity: 0.6;
}

#login-register .login-btn {
  margin-top: 30px;
}

#login-register .register-btn {
  margin-top: 50px;
}

#login-register .slider {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  transition: 0.3s ease-in-out;
  z-index: 0;
  background-color: var(--mainBg);
  overflow: hidden;
}

#login-register .slider .slick-list,
#login-register .slider .slick-track {
  height: 100% !important;
}

#login-register .form.register .slider {
  right: 50%;
  transition: 0.3s ease-in-out;
}

#login-register .slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#login-register .slider img:nth-child(even) {
  -webkit-transform: scale(1.1) rotate(-5deg);
  -ms-transform: scale(1.1) rotate(-5deg);
  transform: scale(1.1) rotate(-5deg);
}

#login-register .slider img:nth-child(odd) {
  -webkit-transform: scale(1.25) rotate(5deg);
  -ms-transform: scale(1.25) rotate(5deg);
  transform: scale(1.25) rotate(5deg);
}

#login-register .slider img[tabindex="0"]:nth-child(even) {
  animation: imgPresentation1 4.5s forwards ease-in-out;
}

#login-register .slider img[tabindex="0"]:nth-child(odd) {
  animation: imgPresentation2 4.5s forwards ease-in-out;
}

#login-register .form.register .swap {
  -webkit-transform: translateX(-50%) translateY(-4px) rotate(180deg);
  -ms-transform: translateX(-50%) translateY(-4px) rotate(180deg);
  transform: translateX(-50%) translateY(-4px) rotate(180deg);
  transition: 0.3s ease-in-out;
}

#login-register .form .slick-slider {
  border-radius: 0 20px 0 0;
}

#login-register .form.register .slick-slider {
  border-radius: 20px 0 0 0;
}

@keyframes imgPresentation1 {
  0% {
    -webkit-transform: scale(1.1) rotate(-5deg);
    -ms-transform: scale(1.1) rotate(-5deg);
    transform: scale(1.1) rotate(-5deg);
  }

  100% {
    -webkit-transform: scale(1.25) rotate(5deg);
    -ms-transform: scale(1.25) rotate(5deg);
    transform: scale(1.25) rotate(5deg);
  }
}

@keyframes imgPresentation2 {
  0% {
    -webkit-transform: scale(1.25) rotate(5deg);
    -ms-transform: scale(1.25) rotate(5deg);
    transform: scale(1.25) rotate(5deg);
  }

  100% {
    -webkit-transform: scale(1.1) rotate(-5deg);
    -ms-transform: scale(1.1) rotate(-5deg);
    transform: scale(1.1) rotate(-5deg);
  }
}

@media only screen and (max-height: 780px) {
  #login-register .heading {
    display: none;
  }
}

/* ------------- #5 ------------- */
/* --------- Ask Name ----------- */

#ask-name {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: 0.3s;
}

#ask-name .wrapper {
  z-index: 10;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  text-align: center;
  gap: 30px;
}

#ask-name .wrapper .input-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}

#ask-name input {
  width: 300px;
}

#ask-name h3 {
  color: white;
  font-family: 'adorn-expanded-sans';
  font-size: 24px;
}

#ask-name .input-wrapper svg {
  width: 10px;
}

#ask-name .input-wrapper button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  opacity: 0;
  cursor: default;
}

#ask-name .input-wrapper button.clickable {
  animation: btnAppear 0.5s ease-in-out forwards;
  cursor: pointer;
}

@keyframes btnAppear {
  0% {
    opacity: 0;
    transform: translateX(-15px);
    z-index: 10;
  }

  70% {
    opacity: 1;
    transform: translateX(10px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
    z-index: 10;
  }
}


/* ---------------- #7 ----------------- */
/* -------------- Profile -------------- */

#profile {
  display: none;
}

#profile .wrapper {
  width: 80%;
  height: 65%;
  position: absolute;
  top: 25%;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

#profile .wrapper .infos {
  width: 30%;
  height: 100%;
  background-color: #1B2231;
  border-radius: 15px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
}

#profile .wrapper .infos p.last-new-game {
  color: white;
  margin-top: 100px;
  font-family: 'Quicksand';
}

#profile .wrapper .progression {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  width: 65%;
  height: 100%;
  gap: 10%;
}

#profile .wrapper .progression .single {
  width: 100%;
  height: 45%;
}

#profile .wrapper .progression .single .title {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
  color: white;
  font-family: 'Reitam';
  font-size: 20px;
  letter-spacing: 4px;
  height: 70px;
  border-radius: 15px 15px 0 0;
  overflow: hidden;
  z-index: 1;
}

#profile .wrapper .progression .single .title::before {
  content: "";
  position: absolute;
  z-index: -1;
  background-color: var(--mainBg);
  width: 100%;
  height: 100%;
}

#profile .wrapper .progression .single .title::after {
  content: "";
  position: absolute;
  right: 0;
  z-index: -1;
  background-color: #576478;
  width: 30%;
  height: 100%;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
}

#profile .wrapper .progression .single .title h3:nth-child(1) {
  margin-left: 5%;
}

#profile .wrapper .progression .single .title h3:nth-child(2) {
  margin-right: 8%;
  font-size: 26px;
  margin-bottom: 0;
  margin-top: 0;
}

#profile .wrapper .progression .single .stats {
  background-color: #1B2231;
  width: 100%;
  height: calc(100% - 70px);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  border-radius: 0 0 15px 15px;
  z-index: 0;
}

#profile .wrapper .progression .single .single-stat {
  width: 22%;
  font-family: 'Quicksand';
  font-weight: 500;
  color: white;
}

#profile .wrapper .progression .single .single-stat p {
  margin: 0;
  position: relative;
}

#profile .wrapper .progression .single .single-stat p:nth-child(1) {
  opacity: 0.6;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-size: 14px;
}

#profile .wrapper .progression .single .single-stat p:nth-child(2) {
  font-family: 'Reitam';
  font-size: 30px;
  margin-bottom: 30px;
}

#profile .wrapper .progression .single .single-stat p:nth-child(2)::after {
  content: '';
  position: absolute;
  left: -1px;
  bottom: -15px;
  background-color: #8F0000;
  width: 100%;
  height: 10px;
}

#profile .wrapper .infos .title {
  position: absolute;
  width: 30%;
  left: 0;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
  color: white;
  font-size: 16px;
  letter-spacing: 4px;
  height: 70px;
  z-index: 0;
  font-family: 'Reitam';
  overflow: hidden;
  border-radius: 15px 15px 0 0;
}

#profile .wrapper .infos .title::before {
  content: "";
  position: absolute;
  z-index: -1;
  background-color: var(--mainBg);
  width: 100%;
  height: 100%;
}

#profile .wrapper .infos .title::after {
  content: "";
  position: absolute;
  right: 0;
  z-index: -1;
  background-color: #576478;
  width: 40%;
  height: 100%;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
}

#profile .wrapper .infos .title h3:nth-child(1) {
  margin-left: 5%;
}

#profile .wrapper .infos .title h3:nth-child(2) {
  margin-right: 5%;
  font-size: 18px;
  margin-bottom: 0;
  margin-top: 0;
  font-family: 'adorn-expanded-sans';
}

#profile .wrapper .infos .first-row {
  width: 85%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 5%;
}

#profile .wrapper .infos .first-row .profile-infos {
  width: 65%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

#profile .wrapper .infos .first-row .profile-infos p {
  font-family: 'Quicksand';
  font-weight: 100;
  text-transform: uppercase;
  color: white;
  opacity: 0.6;
  margin: 5px;
}

#profile .wrapper .infos .first-row .prog-total {
  width: 40%;
}

#profile .wrapper .infos .second-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#profile .wrapper .infos .second-row .edit-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 90%;
  gap: 15px;
  margin-top: 20px;
}

#profile .wrapper .infos .second-row .edit-btns button {
  width: 150px;
  font-size: 15px;
}

#profile .wrapper .infos .second-row .edit-btns button[for="modify-password"] {
  width: 210px;
}

@media only screen and (max-width: 937px) {
  #profile .wrapper .infos .second-row .edit-btns button {
    width: 210px;
  }
}

#profile .wrapper .infos .second-row .edit-btns button:hover {
  background-color: var(--accent);
  opacity: 0.92;
}

#profile .wrapper .infos .third-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 25px;
  width: 85%;
}

#profile .wrapper .infos .third-row button {
  background-color: transparent;
  font-size: 14px;
  width: 75%;
}

#profile .wrapper .infos .third-row button:hover {
  background-color: var(--accent);
}

#profile .wrapper .infos .third-row p {
  color: #FF6464;
  text-decoration: underline;
  cursor: pointer;
}

#profile .circular-chart {
  display: block;
  margin: 0;
  width: 120px;
}

#profile .circle-bg {
  fill: none;
  stroke: rgba(238, 238, 238, 0.24);
  stroke-width: 3.8;
}

#profile .circle {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: square;
  animation: progress 1s ease-out forwards;
}

#profile .modal {
  padding-bottom: 50px;
}

#profile .modal-container .btn-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

#profile .modal-container.modify-name input {
  width: 200px;
  text-transform: capitalize;
}

#profile .modal-container.modify-email input,
#profile .modal-container.modify-password input {
  width: 350px;
}

#profile .modal-container.modify-password .input-wrapper {
  width: 65%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

#profile .modal-container.modify-password .input-wrapper input {
  letter-spacing: 4px;
}

#profile .modal-container.modify-password .input-wrapper input::placeholder {
  letter-spacing: 0;
}

#profile .modal-container.modify-password .current-password,
#profile .modal-container.modify-password .new-password {
  position: relative;
}

#profile .modal-container.modify-password .svg-wrapper {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
  width: 25px;
}

#profile .modal-container.modify-password .svg-wrapper:hover {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
  width: 25px;
}

#profile .modal-container.modify-password .svg-wrapper svg {
  display: none;
  width: 100%;
  cursor: pointer;
}

#profile .modal-container button {
  color: grey;
  border: 2px solid gray;
  cursor: not-allowed;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

#profile .circular-chart .circle {
  stroke: var(--accent);
}

.percentage {
  fill: white;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
}

@media only screen and (max-width: 1600px) {
  #profile .wrapper {
    width: 90%;
  }
}

@media only screen and (max-width: 1300px) {
  #profile .wrapper .progression {
    gap: 5%;
  }

  #profile .wrapper .infos {
    width: 40%;
  }

  #profile .wrapper .progression {
    width: 57%;
    gap: 0;
    justify-content: space-between;
  }

  #profile .wrapper .infos .title {
    width: 40%;
  }

  #profile .wrapper .progression .single .title h3 {
    font-size: 18px;
  }
}

@media only screen and (max-height: 800px) {
  #profile .wrapper {
    height: 72%;
    top: 20%;
  }

  #profile .heading {
    display: none;
  }
}


/* ---------------- #8 ------------------ */
/* -------------- Episodes -------------- */

#episodes {
  height: 105%;
  display: none;
}

#episodes .timeline-wrapper {
  width: 100%;
  height: 100%;
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#episodes .timeline-wrapper .timeline-slick {
  width: 1200px;
  overflow-x: clip;
  margin: 0;
}

#episodes .timeline-slick .slick-arrow {
  display: none !important;
}

#episodes .timeline-slick .slick-dots {
  position: absolute;
  bottom: 14vh;
  left: 380px;
  width: fit-content;
  transform: scale(1.2);
}

#episodes .timeline-slick .slick-dots::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: white;
  left: 0%;
  bottom: 50%;
  transform: translateY(100%);
  z-index: 0;
}

#episodes .timeline-slick .slick-dots li {
  margin: 0 15px !important;
  z-index: 1 !important;
}

#episodes .timeline-slick .slick-dots li p {
  position: absolute;
  top: 0;
  left: 4px;
  font-family: 'adorn-expanded-sans';
  color: white;
  font-size: 16px;
  color: lightgray;
}

#episodes .timeline-slick .slick-dots li svg {
  position: absolute;
  top: 16px;
  left: 3px;
  width: 15px;
  outline: none;
}

#episodes .timeline-slick .slick-dots li:first-child p {
  left: 5px;
}

#episodes .timeline-slick .slick-dots li.slick-active button~p {
  font-size: 22px;
  top: -10px;
  left: 0px;
  color: white;
}

#episodes .timeline-slick .slick-dots li.slick-active:first-child button~p {
  top: -10px;
  left: 4px;
}

#episodes .timeline-slick .slick-dots li button:before {
  color: lightgray !important;
  opacity: 1 !important;
  font-size: 11px;
  transition: 0.1s ease-in-out !important;
}

#episodes .timeline-slick .slick-dots li.slick-active button:before {
  opacity: 1 !important;
  color: white !important;
  font-size: 16px !important;
}

#episodes .timeline-wrapper .timeline-slick .slick-track {
  display: flex;
}

#episodes .timeline-wrapper .timeline-slick .single-episode {
  width: 300px !important;
  height: 300px !important;
  position: relative;
  background-color: #202020;
  margin: 0 50px;
  border-radius: 15px;
  transition: 0.5s;
}

#episodes .timeline-wrapper .timeline-slick .single-episode>* {
  position: absolute;
}

#episodes .timeline-wrapper .timeline-slick .single-episode img {
  width: 100%;
  height: 100%;
  opacity: 0.2;
  transition: 0.3s;
  border-radius: 15px;
}

#episodes .timeline-wrapper .timeline-slick .single-episode.unlocked img {
  opacity: 1;
}

#episodes .timeline-wrapper .timeline-slick .single-episode p {
  opacity: 0;
  left: 50%;
  bottom: -40px;
  transform: translateX(-50%);
  font-family: 'Disket', sans-serif;
  font-size: 75px;
  margin: 0;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: gray;
  transition: 0.5s ease-in-out;
}

#episodes .timeline-wrapper .timeline-slick .single-episode.unlocked.slick-current {
  box-shadow: 0 0 10px #ffffff80;
}

#episodes .timeline-wrapper .timeline-slick .single-episode.slick-current p {
  animation: numberEpisodeAppear 0.6s ease-in-out forwards;
}

#episodes .timeline-wrapper .timeline-slick .single-episode h4 {
  position: absolute;
  top: -95px;
  left: 50%;
  transform: translateX(-50%) translateY(15px);
  font-family: 'adorn-expanded-sans';
  font-size: medium;
  color: gray;
  letter-spacing: 1.3px;
  width: 300px;
  text-align: center;
  line-height: 24px;
}

#episodes .timeline-wrapper .timeline-slick .single-episode h5 {
  width: 80%;
  height: 100%;
  margin-left: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-40px);
  color: white;
  font-family: 'Quicksand', sans-serif;
  font-weight: 300;
  font-size: 15px;
  text-align: center;
  letter-spacing: 1.2px;
  opacity: 0;
  cursor: default;
}

#episodes .timeline-wrapper .timeline-slick .single-episode svg {
  width: 50px;
  height: 50px;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

#episodes .timeline-wrapper .timeline-slick .single-episode.unlocked svg {
  display: none;
}

#episodes .timeline-wrapper .timeline-slick .single-episode.unlocked:hover img {
  opacity: 0.4;
}

#episodes .timeline-wrapper .timeline-slick .single-episode.unlocked h4 {
  color: #ccc;
  transition: 0.5s;
}

#episodes .timeline-wrapper .timeline-slick .single-episode.unlocked.slick-current h4 {
  color: white;
}

#episodes .timeline-wrapper .timeline-slick .single-episode.unlocked:hover h5 {
  animation: titleEpisodeAppear 0.4s 0.05s ease-in-out forwards;
}

#episodes .timeline-wrapper .timeline-slick .single-episode.unlocked p {
  -webkit-text-stroke-color: white;
}

@keyframes numberEpisodeAppear {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-15px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes titleEpisodeAppear {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }

  to {
    opacity: 1;
    transform: translateY(-40px);
  }
}

#episodes .play-btn-wrapper {
  position: absolute;
  z-index: 2;
  bottom: 80px;
  right: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: white;
  text-align: center;
  font-family: 'adorn-expanded-sans';
  line-height: 25px;
  transition: 0.3s ease-in-out;
}

#episodes .play-btn-wrapper {
  color: gray;
  transition: 0.3s ease-in-out;
}

#episodes .play-btn-wrapper .svg-wrapper {
  border: 2px solid white;
  border-radius: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  transition: 0.3s ease-in-out;
  cursor: pointer;
}

#episodes .play-btn-wrapper .svg-wrapper:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

#episodes .play-btn-wrapper .svg-wrapper[data-selected-episode="none"] {
  border: 2px solid gray;
  cursor: default;
  background-color: transparent;
}

#episodes .play-btn-wrapper .svg-wrapper[data-selected-episode="none"] svg path {
  fill: gray !important;
}

#episodes .play-btn-wrapper .svg-wrapper svg {
  height: 30px;
}

#episodes .play-btn-wrapper .svg-wrapper svg path {
  transition: 0.3s ease-in-out;
}

#episodes .pov-selection {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 350px;
  height: 102vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 5vh;
  background: rgb(0, 0, 0);
  background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.6979166666666667) 65%, rgba(0, 0, 0, 0.44861694677871145) 76%, rgba(0, 0, 0, 0) 100%);
}

#episodes .pov-selection .pov-single {
  position: relative;
  cursor: default;
  width: 150px;
  height: 150px;
  border-radius: 1in;
  background-color: black;
}

#episodes .pov-selection .pov-single svg {
  display: none;
  position: absolute;
  bottom: -10px;
  left: 60px;
}

#episodes .pov-selection .pov-single h5.title {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-40px);
  color: white;
  font-family: 'Reitam', sans-serif;
  font-size: 23px;
  letter-spacing: 1.2px;
  opacity: 0;
  position: absolute;
  top: 5px;
}

#episodes .pov-selection .pov-single img {
  position: relative;
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 1in;
  transition: 0.3s;
}

#episodes .pov-selection .pov-single::after {
  content: url('../img/website/lock.svg');
  position: absolute;
  z-index: 2;
  width: 25px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
}

#episodes .pov-selection .pov-single::before {
  content: url('../img/website/handprint.png');
  position: absolute;
  width: 95px;
  height: 20px;
  transform: scale(0.09);
  z-index: 1;
  left: 0;
}

#episodes .pov-selection .pov-single img {
  opacity: 0.4;
}

#episodes .pov-selection .pov-single.unlocked {
  cursor: pointer;
  background-color: #202020;
}

#episodes .pov-selection .pov-single.unlocked img {
  opacity: 1;
}

#episodes .pov-selection .pov-single.unlocked:hover img,
#episodes .pov-selection .pov-single.unlocked.selected img {
  opacity: 0.4;
}

#episodes .pov-selection .pov-single.unlocked::before {
  content: unset;
}

#episodes .pov-selection .pov-single.unlocked::after {
  content: unset;
}

#episodes .pov-selection .pov-single.unlocked:not(.selected):hover h5.title {
  animation: titleEpisodeAppear 0.3s 0.04s ease-in-out forwards;
}

#episodes .pov-selection .pov-single.unlocked.selected h5.title {
  opacity: 1;
}

#episodes .pov-selection .pov-single.unlocked .selected-label {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 75px;
  height: 15px;
  -webkit-clip-path: polygon(100% 0%, 96% 50%, 100% 100%, 0 100%, 4% 50%, 0 0%);
  clip-path: polygon(100% 0%, 96% 50%, 100% 100%, 0 100%, 4% 50%, 0 0%);
  background-color: #D8AC37;
  z-index: 5;
  display: none;
}

#episodes .pov-selection .pov-single.unlocked .selected-label::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 1in;
  background-color: #FFF700;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

#episodes .new-label,
#episodes .in-progress {
  content: "";
  position: absolute;
  left: 68px;
  transform: translateX(-50%);
  bottom: -8px;
  padding: 8px;
  border-radius: 50%;
  animation: plop 2.8s ease infinite;
}

#episodes .new-label {
  display: none;
  background-color: red;
}

#episodes .in-progress {
  display: none;
  background-color: #576478;
}

@keyframes plop {

  0%,
  80% {
    transform: scale(1, 1);
  }

  90% {
    transform: scale(1.5, 1.5);
  }

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

#episodes .infos,
#episodes .episode-infos {
  position: absolute;
  color: white;
  top: 160px;
  z-index: 10;
  font-family: 'Quicksand';
  text-align: center;
  opacity: 0.6;
  transition: 0.3s ease-in-out;
}

#episodes .episode-infos {
  opacity: 0;
}

#episodes .episode-infos strong {
  text-transform: uppercase;
}

@media only screen and (max-height: 850px) {
  #episodes .infos {
    display: none;
  }
}

@media only screen and (max-height: 740px) {
  #episodes .heading {
    display: none;
  }

  #episodes .play-btn-wrapper .svg-wrapper {
    width: 80px;
    height: 60px;
  }

  #episodes .play-btn-wrapper {
    transform: translateY(40px);
  }
}

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

  #episodes .infos,
  #episodes .episode-infos {
    display: none;
  }

  #episodes .slick-list {
    transform: translateX(40px);
  }
}

/* ------------------- #9 --------------------- */
/* -------------- Episode Player -------------- */

#episode-player {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 100;
}

#episode-player .heading {
  position: absolute;
  top: 0;
  font-size: 23px;
  gap: 20px;
}

#episode-player .audio-source {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  color: white;
  background-color: #232931;
  width: 100%;
  height: 60px;
  border-radius: 20px;
  position: absolute;
  bottom: -75px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: 0.5s ease-in-out;
}

#episode-player .audio-source .time {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 95px;
  font-size: 16px;
  margin-top: 2px;

}

#episode-player .timeline {
  background: white;
  width: 70%;
  height: 10px;
  position: relative;
  cursor: pointer;
  box-shadow: 0 2px 10px 0 var(--accent);
  background-color: var(--accent);
  border-radius: 1in;
}

#episode-player .progress {
  background: #8F0000;
  width: 50%;
  height: 100%;
  transition: 0.2s;
  border-radius: 1in 0 0 1in;
}

#episode-player .finish-episode {
  display: flex;
  gap: 30px;
  padding: 0 35px;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  bottom: -150px;
  right: 0;
  background-color: #232931;
  width: fit-content !important;
  height: 60px;
  transition: 0.5s ease-in-out;
  border-radius: 20px;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

#episode-player .finish-episode:hover {
  background-color: var(--accent);
}

#episode-player .finish-episode p {
  margin: 0 !important;
  transform: translateY(0) !important;
}

@media only screen and (max-height: 685px) {
  #episode-player .finish-episode {
    bottom: unset;
    top: -70px;
  }
}

#episode-player .flex-container {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: start;
  position: absolute;
  left: 0;
  bottom: 0;
}

#episode-player .personnal-notes {
  overflow-y: hidden;
  background-color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='30' width='100%'><circle r='10' cx='20' cy='13' fill='%23888' /><line x1='80' x2='80' y1='0' y2='30' stroke='%23f00' /><line x1='0' x2='100%'  y1='28' y2='28' stroke='%2300f'/></svg>");
  background-repeat: repeat-y;
  font-family: cursive;
  font-size: 20px;
  line-height: 30px;
  height: 72vh;
  padding: 0 20px 0 100px;
  width: 40vw;
  max-width: 680px;
  color: black;
  outline: none;
  border-radius: 10px 10px 0 0;
  text-transform: capitalize;
}

#episode-player .personnal-notes textarea {
  width: 100%;
  height: 80%;
  border: none;
  background: transparent;
  font-family: cursive;
  font-size: 20px;
  line-break: anywhere;
  line-height: 30px;
  margin-top: 25px;
  outline: none;
  resize: none;
  color: rgba(0, 0, 0, 0.8);
  line-break: unset;
}

#episode-player .episode-cover {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 40vw;
  max-width: 640px;
  background-color: #232931;
  border-radius: 15px;
  padding: 25px;
  color: white;
  font-family: 'Reitam';
  letter-spacing: 1.5px;
  font-size: 20px;
}

#episode-player .episode-cover>*:not(.audio-source) {
  width: 90%
}

#episode-player .episode-cover img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 15px;
}

#episode-player .episode-cover p {
  font-family: 'Quicksand';
  font-weight: 100;
  text-transform: uppercase;
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 25px;
  transform: translateY(-5px);
}

#episode-player .episode-cover .play-btn {
  position: absolute;
  top: 54%;
  right: 60px;
  width: fit-content;
  background-color: #A20000;
  border-radius: 1in;
  width: 75px;
  height: 75px;
  cursor: pointer;
  transition: 0.3s ease-out;
}

#episode-player .episode-cover .play-btn:hover {
  background-color: #8F0000;
}

#episode-player .episode-cover .play-btn svg {
  transform: translateX(2px);
  width: 25px !important;
  transition: 0.3s ease-out;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 48%;
}

#episode-player .episode-cover .play-btn svg:nth-child(2) {
  opacity: 0;
}

#episode-player .episode-cover .play-btn.play svg:nth-child(1) {
  animation: playBtn1 0.4s forwards 0.25s;
  opacity: 0;
}

#episode-player .episode-cover .play-btn.play svg:nth-child(2) {
  animation: playBtn2 0.4s forwards;
  opacity: 1;
}

#episode-player .episode-cover .play-btn.pause svg:nth-child(1) {
  animation: playBtn2 0.4s forwards;
  opacity: 1;
}

#episode-player .episode-cover .play-btn.pause svg:nth-child(2) {
  animation: playBtn1 0.4s forwards 0.25s;
  opacity: 0;
}

@keyframes playBtn1 {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

@keyframes playBtn2 {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(45deg);
  }
}

#episode-player .episode-cover .volume-player {
  width: 200px;
  height: 50px;
  position: absolute;
  margin: 0 auto;
  bottom: 0;
  right: 5%;
}

#episode-player .episode-cover .volume-player i {
  position: absolute;
  margin-top: -6px;
  color: #666;
}

#episode-player .episode-cover .volume-player i.fa-volume-down {
  margin-left: -8px;
}

#episode-player .episode-cover .volume-player i.fa-volume-up {
  margin-right: -8px;
  right: 0;
}

#episode-player .episode-cover .volume {
  position: absolute;
  left: 24px;
  margin: 0 auto;
  height: 5px;
  width: 70%;
  background: #555;
  border-radius: 15px;
}

#episode-player .episode-cover .volume .ui-slider-range-min {
  height: 5px;
  width: 300px;
  position: absolute;
  background: #8F0000;
  border: none;
  border-radius: 10px;
  outline: none;
}

#episode-player .episode-cover .volume .ui-slider-handle {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background: #FFF;
  position: absolute;
  margin-left: -8px;
  margin-top: -8px;
  cursor: pointer;
  outline: none;
}

@media only screen and (max-height: 790px) {
  #episode-player .heading {
    display: none;
  }

  #episode-player .personnal-notes {
    height: 85vh;
  }
}

/* ------------------- #9 --------------------- */
/* ---------------- Collection ---------------- */

#collection {
  display: none;
  opacity: 0;
}

#collection .tabs-wrapper {
  position: absolute;
  left: 50%;
  top: 180px;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

#collection .tabs-wrapper .tab {
  text-align: center;
  color: white;
  background-color: transparent;
  width: 250px;
  height: 40px;
  font-family: 'Quicksand';
  font-size: 18px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  border: 2px solid white;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

#collection .tabs-wrapper .tab.selected {
  background-color: var(--accent);
  border: 2px solid var(--accent);
  font-weight: bold;
  position: relative;
}

#collection .tabs-wrapper .tab.selected::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
  width: 30px;
  height: 20px;
  background-color: var(--accent);
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

#collection .tabs-wrapper .tab:not(.selected):hover {
  background-color: #606060;
}

#collection .tabs-wrapper .tab p {
  margin: 0;
}

#collection .tabs-wrapper .infos {
  position: absolute;
  bottom: -90px;
  color: white;
  font-family: 'Quicksand';
  width: 70vw;
  text-align: center;
}

#collection .rooms-wrapper {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 80%;
  max-width: 1300px;
  position: absolute;
  top: 45%;
}

#collection .rooms-wrapper .room-single {
  position: relative;
  width: 280px;
  height: 280px;
  border-radius: 15px;
  border: 2px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: white;
  background-color: #000;
  overflow: hidden;
  transition: 0.2s ease-in-out;
}

#collection .rooms-wrapper .room-single img {
  filter: blur(10px);
}

#collection .rooms-wrapper .room-single.unlocked {
  cursor: pointer;
  background-color: #3e3e3e;
}

#collection .rooms-wrapper .room-single.unlocked .collected {
  display: flex;
}

#collection .rooms-wrapper .room-single.unlocked svg {
  display: none;
}

#collection .rooms-wrapper .room-single.unlocked img {
  filter: blur(0);
}

#collection .rooms-wrapper .room-single.unlocked:hover {
  box-shadow: 0 0 10px #ffffff80;
  background-color: gray;
}

#collection .rooms-wrapper .room-single.unlocked:hover img {
  transform: translateX(-50%) scale(1.08);
}

#collection .rooms-wrapper .room-single img {
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: 0.3s ease-in-out;
  opacity: 0.8;
}

#collection .rooms-wrapper .room-single svg {
  z-index: 1;
  height: 60px;
  width: 60px;
}

#collection .rooms-wrapper .room-single h4 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  font-family: 'Reitam';
  font-size: 16px;
  letter-spacing: 1px;
  width: 80%;
  text-align: center;
}

#collection .rooms-wrapper .room-single p {
  z-index: 1;
}

#collection .rooms-wrapper .room-single .collected {
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#collection .rooms-wrapper .room-single .collected>* {
  margin: 0;
}

#collection .rooms-wrapper .room-single .collected h5 {
  font-family: 'adorn-expanded-sans';
  font-size: 34px;
  z-index: 1;
}

#collection .rooms-wrapper .room-single .collected p {
  font-family: 'Quicksand';
  font-size: 16px;
  text-transform: lowercase;
  letter-spacing: 1.5px;
}

@media only screen and (max-height: 700px) {
  #collection .heading {
    display: none;
  }

  #collection .tabs-wrapper {
    top: 90px;
  }
}

#collection .docs-wrapper {
  display: flex;
  justify-content: space-evenly;
  align-items: start;
  position: absolute;
  top: 40%;
  width: 100%;
}

#collection .docs-wrapper .docs-selection {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 45%;
  gap: 25px;
  height: 50vh;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 15px 10px;
}

#collection .docs-wrapper .docs-selection .single-doc {
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  transition: 0.15s ease-in-out;
  border-radius: 10px;
  overflow: hidden;
}

#collection .docs-wrapper .docs-selection .single-doc:not(.locked):not(.unresolved) {
  border: 1px solid springgreen;
}

#collection .docs-wrapper .docs-selection .single-doc.locked {
  border: 1px solid rgb(187, 0, 0);
}

#collection .docs-wrapper .docs-selection .single-doc.unresolved:not(.locked) {
  border: 1px solid #D8AC37;
}

#collection .docs-wrapper .docs-selection .single-doc.selected {
  box-shadow: 0 0 15px white;
}

#collection .docs-wrapper .docs-selection .single-doc.locked.selected {
  box-shadow: 0 0 15px gray;
}

#collection .docs-wrapper .docs-selection .single-doc .episode-number {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -30%);
  color: white;
  font-size: 60px;
  font-weight: bold;
  margin: 0;
}

#collection .docs-wrapper .docs-selection .single-doc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#collection .docs-wrapper .docs-selection .single-doc .locked-parameter {
  display: none;
}

#collection .docs-wrapper .docs-selection .single-doc .enigme-parameter {
  display: none;
}

#collection .docs-wrapper .docs-selection .single-doc.locked .locked-parameter {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 35px;
  height: 35px;
  background-color: #D8AC37;
  display: flex;
  justify-content: center;
  align-items: center;
}

#collection .docs-wrapper .docs-selection .single-doc.unresolved .enigme-parameter {
  display: block;
  position: absolute;
  top: 0;
  right: 0px;
  width: 35px;
  height: 35px;
  background-color: #D8AC37;
  display: flex;
  justify-content: center;
  align-items: center;
}

#collection .docs-wrapper .docs-selection .single-doc.locked .enigme-parameter {
  position: absolute;
  top: 0;
  right: 40px;
  width: 35px;
  height: 35px;
  background-color: #D8AC37;
  display: flex;
  justify-content: center;
  align-items: center;
}

#collection .docs-wrapper .docs-selection .single-doc .enigme-parameter svg {
  stroke: rgb(95, 1, 1);
  stroke-width: 3px;
}

#collection .docs-wrapper .doc-details {
  position: relative;
  width: 45%;
  display: none;
  align-items: center;
  flex-direction: column;
  color: white;
  height: 50vh;
  overflow-x: hidden;
  overflow-y: scroll;
}

#collection .docs-wrapper .doc-details h4 {
  font-family: 'Quicksand';
  font-size: 22px;
  letter-spacing: 2px;
  position: relative;
}

#collection .docs-wrapper .doc-details p.text {
  padding-right: 15px;
  line-height: 24px;
  font-family: 'Quicksand';
  font-size: 17px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#collection .docs-wrapper .doc-details h4::before {
  content: '';
  background-color: red;
  width: 100%;
  height: 20px;
  position: absolute;
  transform: translateY(5px) rotate(-7deg);
  z-index: -1;
}

#collection .docs-wrapper .doc-details img {
  object-fit: contain;
  max-height: 320px;
  width: 80%;
}

#collection .docs-wrapper .doc-locked,
#collection .docs-wrapper .doc-choose,
#collection .docs-wrapper .doc-enigme {
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 45%;
  height: 50vh;
}

#collection .docs-wrapper .doc-locked svg,
#collection .docs-wrapper .doc-choose svg,
#collection .docs-wrapper .doc-enigme svg {
  scale: 3;
  margin-bottom: 20px;
  color: white;
}

#collection .docs-wrapper .doc-locked svg {
  animation: errorShake .4s forwards;
}

@keyframes errorShake {
  0% {
    transform: translateX(0px);
  }

  20% {
    transform: translateX(-3px);
  }

  40% {
    transform: translateX(3px);
  }

  60% {
    transform: translateX(-3px);
  }

  80% {
    transform: translateX(3px);
  }

  100% {
    transform: translateX(0px);
  }
}

#collection .docs-wrapper .doc-locked h3,
#collection .docs-wrapper .doc-choose h3,
#collection .docs-wrapper .doc-enigme h3 {
  color: white;
  font-family: 'Quicksand';
  text-align: center;
}

#collection .docs-wrapper .doc-choose {
  display: flex;
}

#collection .docs-wrapper .display-enigme {
  background: #fff;
  border: none;
  padding: 10px 20px;
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  width: 120px;
  text-transform: uppercase;
  cursor: pointer;
  transform: skew(-21deg);
  margin-top: 14px;
  border-radius: 6px;
}

#collection .docs-wrapper .display-enigme span {
  display: inline-block;
  transform: translateX(5px) skew(21deg);
  font-family: 'Quicksand';
}

#collection .docs-wrapper .display-enigme::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  left: 0;
  background: var(--accent);
  opacity: 0;
  z-index: -1;
  transition: all 0.5s;
}

#collection .docs-wrapper .display-enigme:hover {
  color: #fff;
}

#collection .docs-wrapper .display-enigme:hover::before {
  left: 0;
  right: 0;
  opacity: 1;
}

#collection .banter-loader {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  margin-left: -36px;
  margin-top: -36px;
}

#collection .banter-loader__box {
  float: left;
  position: relative;
  width: 20px;
  height: 20px;
  margin-right: 6px;
}

#collection .banter-loader__box:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: lightblue;
}

#collection .banter-loader__box:nth-child(3n) {
  margin-right: 0;
  margin-bottom: 6px;
}

#collection .banter-loader__box:nth-child(1):before,
#collection .banter-loader__box:nth-child(4):before {
  margin-left: 26px;
}

#collection .banter-loader__box:nth-child(3):before {
  margin-top: 52px;
}

#collection .banter-loader__box:last-child {
  margin-bottom: 0;
}

@keyframes moveBox-1 {
  9.0909090909% {
    transform: translate(-26px, 0);
  }

  18.1818181818% {
    transform: translate(0px, 0);
  }

  27.2727272727% {
    transform: translate(0px, 0);
  }

  36.3636363636% {
    transform: translate(26px, 0);
  }

  45.4545454545% {
    transform: translate(26px, 26px);
  }

  54.5454545455% {
    transform: translate(26px, 26px);
  }

  63.6363636364% {
    transform: translate(26px, 26px);
  }

  72.7272727273% {
    transform: translate(26px, 0px);
  }

  81.8181818182% {
    transform: translate(0px, 0px);
  }

  90.9090909091% {
    transform: translate(-26px, 0px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

#collection .banter-loader__box:nth-child(1) {
  animation: moveBox-1 4s infinite;
}

@keyframes moveBox-2 {
  9.0909090909% {
    transform: translate(0, 0);
  }

  18.1818181818% {
    transform: translate(26px, 0);
  }

  27.2727272727% {
    transform: translate(0px, 0);
  }

  36.3636363636% {
    transform: translate(26px, 0);
  }

  45.4545454545% {
    transform: translate(26px, 26px);
  }

  54.5454545455% {
    transform: translate(26px, 26px);
  }

  63.6363636364% {
    transform: translate(26px, 26px);
  }

  72.7272727273% {
    transform: translate(26px, 26px);
  }

  81.8181818182% {
    transform: translate(0px, 26px);
  }

  90.9090909091% {
    transform: translate(0px, 26px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

#collection .banter-loader__box:nth-child(2) {
  animation: moveBox-2 4s infinite;
}

@keyframes moveBox-3 {
  9.0909090909% {
    transform: translate(-26px, 0);
  }

  18.1818181818% {
    transform: translate(-26px, 0);
  }

  27.2727272727% {
    transform: translate(0px, 0);
  }

  36.3636363636% {
    transform: translate(-26px, 0);
  }

  45.4545454545% {
    transform: translate(-26px, 0);
  }

  54.5454545455% {
    transform: translate(-26px, 0);
  }

  63.6363636364% {
    transform: translate(-26px, 0);
  }

  72.7272727273% {
    transform: translate(-26px, 0);
  }

  81.8181818182% {
    transform: translate(-26px, -26px);
  }

  90.9090909091% {
    transform: translate(0px, -26px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

#collection .banter-loader__box:nth-child(3) {
  animation: moveBox-3 4s infinite;
}

@keyframes moveBox-4 {
  9.0909090909% {
    transform: translate(-26px, 0);
  }

  18.1818181818% {
    transform: translate(-26px, 0);
  }

  27.2727272727% {
    transform: translate(-26px, -26px);
  }

  36.3636363636% {
    transform: translate(0px, -26px);
  }

  45.4545454545% {
    transform: translate(0px, 0px);
  }

  54.5454545455% {
    transform: translate(0px, -26px);
  }

  63.6363636364% {
    transform: translate(0px, -26px);
  }

  72.7272727273% {
    transform: translate(0px, -26px);
  }

  81.8181818182% {
    transform: translate(-26px, -26px);
  }

  90.9090909091% {
    transform: translate(-26px, 0px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

#collection .banter-loader__box:nth-child(4) {
  animation: moveBox-4 4s infinite;
}

@keyframes moveBox-5 {
  9.0909090909% {
    transform: translate(0, 0);
  }

  18.1818181818% {
    transform: translate(0, 0);
  }

  27.2727272727% {
    transform: translate(0, 0);
  }

  36.3636363636% {
    transform: translate(26px, 0);
  }

  45.4545454545% {
    transform: translate(26px, 0);
  }

  54.5454545455% {
    transform: translate(26px, 0);
  }

  63.6363636364% {
    transform: translate(26px, 0);
  }

  72.7272727273% {
    transform: translate(26px, 0);
  }

  81.8181818182% {
    transform: translate(26px, -26px);
  }

  90.9090909091% {
    transform: translate(0px, -26px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

#collection .banter-loader__box:nth-child(5) {
  animation: moveBox-5 4s infinite;
}

@keyframes moveBox-6 {
  9.0909090909% {
    transform: translate(0, 0);
  }

  18.1818181818% {
    transform: translate(-26px, 0);
  }

  27.2727272727% {
    transform: translate(-26px, 0);
  }

  36.3636363636% {
    transform: translate(0px, 0);
  }

  45.4545454545% {
    transform: translate(0px, 0);
  }

  54.5454545455% {
    transform: translate(0px, 0);
  }

  63.6363636364% {
    transform: translate(0px, 0);
  }

  72.7272727273% {
    transform: translate(0px, 26px);
  }

  81.8181818182% {
    transform: translate(-26px, 26px);
  }

  90.9090909091% {
    transform: translate(-26px, 0px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

#collection .banter-loader__box:nth-child(6) {
  animation: moveBox-6 4s infinite;
}

@keyframes moveBox-7 {
  9.0909090909% {
    transform: translate(26px, 0);
  }

  18.1818181818% {
    transform: translate(26px, 0);
  }

  27.2727272727% {
    transform: translate(26px, 0);
  }

  36.3636363636% {
    transform: translate(0px, 0);
  }

  45.4545454545% {
    transform: translate(0px, -26px);
  }

  54.5454545455% {
    transform: translate(26px, -26px);
  }

  63.6363636364% {
    transform: translate(0px, -26px);
  }

  72.7272727273% {
    transform: translate(0px, -26px);
  }

  81.8181818182% {
    transform: translate(0px, 0px);
  }

  90.9090909091% {
    transform: translate(26px, 0px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

#collection .banter-loader__box:nth-child(7) {
  animation: moveBox-7 4s infinite;
}

@keyframes moveBox-8 {
  9.0909090909% {
    transform: translate(0, 0);
  }

  18.1818181818% {
    transform: translate(-26px, 0);
  }

  27.2727272727% {
    transform: translate(-26px, -26px);
  }

  36.3636363636% {
    transform: translate(0px, -26px);
  }

  45.4545454545% {
    transform: translate(0px, -26px);
  }

  54.5454545455% {
    transform: translate(0px, -26px);
  }

  63.6363636364% {
    transform: translate(0px, -26px);
  }

  72.7272727273% {
    transform: translate(0px, -26px);
  }

  81.8181818182% {
    transform: translate(26px, -26px);
  }

  90.9090909091% {
    transform: translate(26px, 0px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

#collection .banter-loader__box:nth-child(8) {
  animation: moveBox-8 4s infinite;
}

@keyframes moveBox-9 {
  9.0909090909% {
    transform: translate(-26px, 0);
  }

  18.1818181818% {
    transform: translate(-26px, 0);
  }

  27.2727272727% {
    transform: translate(0px, 0);
  }

  36.3636363636% {
    transform: translate(-26px, 0);
  }

  45.4545454545% {
    transform: translate(0px, 0);
  }

  54.5454545455% {
    transform: translate(0px, 0);
  }

  63.6363636364% {
    transform: translate(-26px, 0);
  }

  72.7272727273% {
    transform: translate(-26px, 0);
  }

  81.8181818182% {
    transform: translate(-52px, 0);
  }

  90.9090909091% {
    transform: translate(-26px, 0);
  }

  100% {
    transform: translate(0px, 0);
  }
}

#collection .banter-loader__box:nth-child(9) {
  animation: moveBox-9 4s infinite;
}

#collection .modal-background {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#collection .modal {
  width: 80vw !important;
  height: 75vh !important;
  max-width: unset;
  color: white;
  padding: 50px;
}

#collection .the-enigme {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#collection .the-enigme h3 {
  font-family: 'Quicksand';
  font-size: 20px;
  letter-spacing: 1px;
  line-height: 30px;
  width: 75%;
  margin: auto;
  margin-bottom: 5vh;
}

#collection .the-enigme .prompt-enigme {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#collection .the-enigme .prompt-enigme img {
  width: 80%;
  border-radius: 20px;
  max-height: 50vh;
  object-fit: cover;
  margin-bottom: 5vh;
}

#collection .the-enigme .input-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

#collection .the-enigme .prompt-enigme input {
  width: 300px;
}

#collection .animated-btn {
  gap: 15px;
  cursor: pointer;
}

#collection .animated-btn svg {
  width: 9px;
}

#collection .the-enigme .cards-single-answer-enigme {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10vh;
}

#collection .the-enigme .cards-single-answer-enigme .cards-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 90%;
  gap: 3vw;
}

#collection .the-enigme .cards-single-answer-enigme .cards-wrapper .single-card {
  background: #576478;
  border-radius: 25px;
  width: 10vw;
  height: 10vw;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

#collection .the-enigme .cards-single-answer-enigme .cards-wrapper .single-card.selected {
  box-shadow: 0 0 30px rgb(167, 17, 17);
  background-color: rgb(167, 17, 17);
}

#collection .the-enigme .cards-single-answer-enigme .cards-wrapper .single-card img {
  width: 85%;
  height: 85%;
  object-fit: contain;
}

/* ------------------- #10 --------------------- */
/* ------------------ 3D Lore ------------------ */

#lore-3d {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  display: none;
}

#lore-3d .list {
  position: absolute;
  left: 100%;
  height: 100%;
  width: 500px;
  background-color: rgba(35, 41, 49, 0.8);
  color: white;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  font-family: 'Reitam';
  transition: 0.5s ease-in-out;
}

#lore-3d .list>div {
  width: 80%
}

#lore-3d .list .separator {
  width: 60%;
  height: 3px;
  background-color: white;
  margin: 60px 0;
}

#lore-3d .list .switch {
  scale: 0.8;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transform: translateY(30px);
}

#lore-3d .list .switch .slider {
  width: 60px;
  height: 30px;
  background-color: lightgray;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  border: 4px solid transparent;
  transition: .3s;
  box-shadow: 0 0 10px 0 rgb(0, 0, 0, 0.25) inset;
  cursor: pointer;
}

#lore-3d .list .switch .slider::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transform: translateX(-30px);
  border-radius: 20px;
  transition: .3s;
  box-shadow: 0 0 10px 3px rgb(0, 0, 0, 0.25);
}

#lore-3d .list .switch .selected .slider::before {
  transform: translateX(30px);
  box-shadow: 0 0 10px 3px rgb(0, 0, 0, 0.25);
}

#lore-3d .list .switch .selected .slider {
  background-color: #2196F3;
}

#lore-3d .list .all-items {
  height: 50%;
  display: flex;
  flex-direction: column;
}

#lore-3d .list .single-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-basis: 50px;
}

#lore-3d .list .single-item p {
  margin: 0;
}

#lore-3d .list .single-item p span {
  margin-right: 15px;
}

#lore-3d .list .single-item svg {
  width: 28px;
  height: 28px;
  cursor: pointer;
}

#lore-3d .list .open-list {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  left: -40px;
  top: 50%;
  width: 40px;
  height: 75px;
  background-color: rgba(35, 41, 49, 0.8);
  transform: rotate(180deg);
  border-radius: 0 10px 10px 0;
  cursor: pointer;
}

#lore-3d .list .open-list svg {
  height: 30px;
  transition: 0.5s ease-in-out;
}

#lore-3d .list.opened {
  left: calc(100% - 500px);
}

#lore-3d .list.opened .open-list svg {
  transform: rotate(-180deg);
}

#lore-3d .list .single-item svg.back-to-view {
  display: none;
}


#lore-3d .povs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 80%;
  gap: 30px;
}

#lore-3d .povs .pov-single {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 1in;
  background-color: black;
  transition: 0.3s ease-in-out;
}

#lore-3d .povs .pov-single h3 {
  text-align: center;
  font-family: 'Quicksand';
  font-size: 16px;
  transform: translateY(-30px);
  opacity: 0;
  transition: 0.3s ease-in-out;
}

#lore-3d .povs .pov-single:hover:not(.selected) h3,
#lore-3d .povs .pov-single.selected h3 {
  transform: translateY(-10px);
  opacity: 1;
}

#lore-3d .povs .pov-single.selected {
  box-shadow: 0px 0px 10px white;
}

#lore-3d .povs .pov-single img {
  position: relative;
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 1in;
  transition: 0.3s;
  cursor: pointer;
}

#lore-3d .povs .pov-single.selected img {
  cursor: default;
}



/* ------------------- #11 --------------------- */
/* ------------------- BOOKS ------------------- */

#books {
  display: none;
}

#books .book {
  position: relative;
}

#books .flex-container {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: start;
  position: absolute;
  left: 0;
  bottom: 0;
}

#books .note-content {
  overflow-y: hidden;
  background-color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='30' width='100%'><circle r='10' cx='20' cy='13' fill='%23888' /><line x1='80' x2='80' y1='0' y2='30' stroke='%23f00' /><line x1='0' x2='100%'  y1='28' y2='28' stroke='%2300f'/></svg>");
  background-repeat: repeat-y;
  font-family: cursive;
  font-size: 20px;
  line-height: 30px;
  height: 72vh;
  padding: 0 20px 0 100px;
  width: 40vw;
  max-width: 680px;
  color: black;
  outline: none;
  border-radius: 10px 10px 0 0;
  text-transform: capitalize;
  z-index: 99;
}

#books .note-content textarea {
  width: 100%;
  height: 60vh;
  border: none;
  background: transparent;
  font-family: cursive;
  font-size: 20px;
  line-break: anywhere;
  line-height: 30px;
  margin-top: 25px;
  outline: none;
  resize: none;
  color: rgba(0, 0, 0, 0.8);
  line-break: unset;
}

#books .notes-list {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 40vw;
  max-width: 640px;
  padding: 25px;
  color: white;
  font-family: 'Reitam';
  letter-spacing: 1.5px;
  font-size: 20px;
  margin-top: -7%;
  gap: 15px;
}

#books .notes-list .single-notes {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}

#books .notes-list .single-notes .notes-wrapper {
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content: center;
}

#books .notes-list .single-notes h3 {
  width: 100%;
  text-align: right;
}

#books .notes-list .single-notes .single-card {
  width: 125px;
  height: 125px;
  background-color: #232931;
  border-radius: 20px;
  border: 2px solid grey;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: 300ms ease-in-out;
  cursor: pointer;
}

#books .notes-list .single-notes .single-card.selected {
  box-shadow: 0 0 10px white;
}

#books .notes-list .single-notes .single-card+.single-card {
  margin-left: -12%;
}

#books .notes-list .single-notes .single-card:hover {
  transform: rotate(-4deg);
}

#books .notes-list .single-notes .single-card:hover~.single-card {
  z-index: 1;
  translate: 60px;
}

#books .notes-list .single-notes .single-card>* {
  margin: 0;
  color: #B2B2B2;
}

#books .notes-list .single-notes .single-card h4 {
  font-size: 50px;
}

#books .book .edit-icons {
  position: absolute;
  top: 25px;
  right: 25px;
  scale: 0.7;
  transform: translateY(-2px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

#books .edit-icons svg {
  cursor: pointer;
  display: none;
}

#books .note-content textarea:enabled {
  color: black;
}

#books .note-content textarea:disabled {
  color: grey;
}

#books .filter {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgb(25, 25, 25);
  z-index: 98;
}

/* ------------- #11 ------------- */
/* ------------ Team ------------- */

#team {
  display: none;
  opacity: 0;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  position: absolute;
  right: 0;
  top: 0;
  width: 750px;
  height: 100vh;
  background-color: rgba(35, 41, 49, 0.95);
  transition: 0.2s ease-in-out;
}

#team .heading {
  margin: 0;
  width: 300px;
}

#team .cards-wrapper {
  display: flex;
  justify-content: center;
  align-items: normal;
  flex-wrap: wrap;
  width: 100%;
  height: 80%;
  gap: 25px;
}

#team .card {
  width: 280px;
  height: 350px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  box-shadow: 0px 0px 1px grey;
  background-color: white;
  border-radius: 20px;
  transition: 0.2s ease-in-out;
  z-index: 10;
}

#team .card .bg {
  position: absolute;
  width: 100%;
  height: 100px;
  top: 0;
  transition: all 0.4s ease;
  background: linear-gradient(90deg, rgba(27, 34, 49, 1) 0%, rgba(28, 59, 101, 1) 100%);
  z-index: 1;
}

#team .card .more {
  width: 24px;
  height: 24px;
  position: absolute;
  z-index: 2;
  right: 20px;
  top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transform: rotate(0deg);
  transition: all 0.4s ease;
  border-radius: 100%;
}

#team .card .more::before {
  content: '';
  width: 16px;
  height: 2px;
  background-color: white;
  content: "";
  position: absolute;
  border-radius: 4px;
  transition: all 0.4s ease;
}

#team .card .more::after {
  content: '';
  width: 16px;
  height: 2px;
  background-color: white;
  content: "";
  position: absolute;
  border-radius: 4px;
  transition: all 0.4s ease;
  transform: rotate(90deg);
}

#team .card .more:hover {
  transform: scale(1.1);
  background-color: rgba(255, 255, 255, 0.2);
}

#team .card .photo {
  width: 120px;
  height: 120px;
  border-radius: 100%;
  overflow: hidden;
  z-index: 1;
  position: absolute;
  top: 20px;
  border: 3px solid #FFFFFF;
  transition: all 0.4s ease;
  box-shadow: 0px 4px 10px rgb(111 112 115 / 30%);
}

#team .card .photo::before {
  content: '';
  background: #403E3E;
  z-index: 1;
}

#team .card .photo::after {
  content: '';
  background: linear-gradient(90deg, rgba(27, 34, 49, 1) 0%, rgba(28, 59, 101, 1) 100%);
  z-index: 2;
}

#team .card .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s ease-in-out;
}

#team .card .text {
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  transform: translateY(50px);
  transition: all 0.3s ease;
  font-family: 'Quicksand';
  z-index: 1;
}

#team .card .text .name {
  font-size: 20px;
  letter-spacing: 0.8px;
  font-weight: bold;
  color: #6F7073;
  font-weight: 300;
}

#team .card .text .role {
  font-size: 14px;
  font-weight: 600;
  color: #CBCBCB;
  letter-spacing: 0.8px;
  margin-top: 5px;
}

#team .card .text .desc {
  color: white;
  display: none;
  margin-top: 20px;
  font-size: 16px;
  letter-spacing: 0.6px;
  text-align: center;
  padding: 0 40px;
  font-weight: 400;
  line-height: 22px;
}

#team .card .social {
  z-index: 1;
  display: flex;
  align-items: center;
  background-color: rgba(234, 234, 234, 0.5);
  box-shadow: inset 0px 11px 13px -20px #6f7073;
  width: 100%;
  position: absolute;
  bottom: 0;
  height: 50px;
  padding: 0 20px;
  box-sizing: border-box;
  border-radius: 0px 0px 4px 4px;
  transition: all 0.4s ease;
}

#team .card .social:hover .pointer {
  opacity: 1;
  bottom: 45px;
}

#team .card .social .pointer {
  display: block;
  width: 10px;
  height: 10px;
  z-index: 2;
  bottom: 50px;
  position: absolute;
  transform: translateX(25px);
  transition: all 0.4s ease;
  opacity: 0;
}

#team .card .social .icons {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

#team .card .social .icon {
  width: 28px;
  opacity: 0.65;
  transition: all 0.4s ease;
}

#team .card .social .icon:hover {
  opacity: 0.9;
}

#team .card .social .icon img {
  width: 100%;
  height: 100%;
}

/* Show More */
#team .card.show-more {
  overflow: hidden;
}

#team .card.show-more .more {
  transform: rotate(45deg) scale(1);
}

#team .card.show-more .more:hover {
  transform: rotate(45deg) scale(1.1);
}

@media screen and (max-width: 799px) {
  .wrapper .module-team .team .team-cards .swiper-container .swiper-slide.show-more #team .card .more:hover {
    transform: rotate(45deg) scale(1);
  }
}

#team .card.show-more .social {
  transform: translateY(55px);
}

#team .card.show-more .text {
  color: white;
  transform: translateY(0px);
  transition: all 0.6s ease;
}

#team .card.show-more .text .name,
#team .card.show-more .text .role {
  color: white;
}

#team .card.show-more .text .desc {
  display: block;
}

#team .card.show-more .photo {
  width: 100%;
  height: 100%;
  top: -16px;
  border: solid 0px transparent;
  border-radius: 4px;
  box-shadow: 0px 4px 10px rgba(111, 112, 115, 0);
  transform: translateY(0px);
  transition: all 0.4s ease;
}

#team .card.show-more .photo:before {
  height: 100%;
  opacity: 0.5;
}

#team .card.show-more .photo:after {
  height: 100%;
  opacity: 0.8;
  border-radius: 4px;
}

#team .card.show-more .photo img {
  filter: grayscale(100%);
  opacity: 0.2;
}

#team .card.show-more .photo:hover {
  transform: translateY(0px);
}

#team .card.show-more .bg {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

#team .card.show-more .bg:before {
  opacity: 0.5;
}

#team .card.show-more .bg:after {
  opacity: 0.8;
}

/* Navigation Card */

#team .navigation-card {
  justify-content: space-around;
  height: 200px;
}

#team .navigation-card .bg {
  height: 50%;
}

#team .navigation-card .btn {
  display: flex;
  font-family: 'Quicksand';
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 50px;
  border-radius: 50px;
  border: 0;
  outline: 0;
  font-size: 18px;
  background: rgba(28, 59, 101, 1);
  color: #fff;
  z-index: 1;
  cursor: pointer;
}

#team .navigation-card .open-about {
  background: white;
  color: rgba(28, 59, 101, 1);
  font-weight: bold;
}

#team .navigation-card .btn svg {
  margin: 0 0 0 10px;
}

#team .navigation-card .btn:hover svg {
  margin: 0 0 0 25px;
  transition: 0.3s;
}

#team .navigation-card .btn:not(:hover) svg {
  transition: 0.3s;
}

@media only screen and (max-height: 880px) {
  #team .card {
    height: 280px;
  }

  #team .card .name,
  #team .card .role {
    transform: translateY(-10px);
  }

  #team .card .name {
    margin-bottom: 0;
  }

  #team .card .photo {
    transform: translateY(-20px);
  }

  #team .navigation-card {
    height: 200px;
  }

  #team .heading {
    display: none;
  }
}

/* ------------- #12 ---------------- */
/* ------------ Crédits ------------- */

#credits {
  display: none;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(35, 41, 49, 0.85);
  justify-content: center;
  align-items: center;
  transition: 0.3s ease-in-out;
  z-index: 100;
}

#credits .roll {
  color: white;
  width: 100%;
  text-align: center;
  transform: translateY(1550px);
  animation: endCredits 46s linear infinite;
}

@keyframes endCredits {
  from {
    transform: translateY(1650px);
    opacity: 0;
  }

  1% {
    opacity: 1;
  }

  99% {
    opacity: 1;
  }

  to {
    transform: translateY(-1650px);
    opacity: 0;
  }
}

#credits h3 {
  font-family: 'Reitam';
  font-size: 24px;
}

#credits p {
  font-family: 'Quicksand';
  font-size: 18px;
  font-weight: bold;
  margin-top: 0;
}

#credits .single-group {
  margin: 80px 0;
}

#credits .double-col {
  display: flex;
  justify-content: space-evenly;
  gap: 90px;
}

#credits .double-col .names {
  text-align: end;
  width: 45%;
}

#credits .double-col .roles {
  text-align: start;
  width: 45%;
}

/* ------------- #13 ------------- */
/* ------------ ABOUT ------------ */

#about {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  opacity: 0;
  transition: 0.3s ease-in-out;
  background: white;
}

#about .slideshow {
  height: 100vh;
  width: 100vw;
  background-color: #232931;
  position: relative;
  overflow: hidden;
}

#about .slideshow h1 {
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translate(-50%, -50%);
  color: white;
  font-family: 'Reitam';
  font-size: 40px;
  text-align: center;
  z-index: 10;
}

#about .slideshow p {
  position: absolute;
  left: 50%;
  top: calc(25% + 75px);
  transform: translate(-50%, -50%);
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  text-align: center;
  z-index: 10;
  max-width: 600px;
}

#about .rounded-box {
  background: #fff;
  padding: 45px 50px;
  position: relative;
  margin: 0 70px;
  box-shadow: 3px 0 62px rgb(13 3 3 / 18%);
  border-radius: 60px;
  margin-top: -80px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

#about .rounded-box:not(.second) .text {
  width: 55%;
}

#about .rounded-box:not(.second) .text h2 {
  font-family: 'Reitam';
  font-size: 34px;
  position: relative;
  z-index: 10;
  margin-bottom: 50px;
}

#about .rounded-box:not(.second) .text h2::after {
  content: "";
  position: absolute;
  bottom: -20px;
  background: #bc0303;
  width: 90px;
  height: 11px;
  left: 0;
  border-radius: 20px;
  z-index: -1;
}

#about .text p {
  font-family: 'Quicksand';
  margin-top: 45px;
  font-size: 18px;
  line-height: 27px;
}

#about .container_mouse {
  position: absolute;
  left: 50%;
  bottom: 15%;
  transform: translateX(-50%);
  z-index: 10;
  cursor: pointer;
  scale: 0.9;
  transform-origin: 10px;
}

#about .mouse-btn {
  margin: 10px auto;
  width: 40px;
  height: 80px;
  border: 3px solid rgba(122, 122, 124, 0.918);
  border-radius: 20px;
  display: flex;
}

#about .container_mouse span {
  color: lightgrey;
  font-family: 'Quicksand';
}

#about .mouse-scroll {
  display: block;
  width: 20px;
  height: 20px;
  background: linear-gradient(170deg, rgba(122, 122, 124, 0.918), rgb(123, 124, 124));
  border-radius: 50%;
  margin: auto;
  animation: scrolling13 1s linear infinite;
}

#about .footer {
  font-family: 'Quicksand';
  text-align: center;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

@keyframes scrolling13 {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    transform: translateY(20px);
  }
}

@media only screen and (min-width: 1401px) {
  #about .slideshow h1 {
    top: 30%;
  }

  #about .slideshow p {
    top: calc(30% + 75px);
  }

  #about .lamp {
    top: -200px;
  }
}

@media only screen and (max-width: 1188px) {
  #about .slideshow p {
    top: calc(25% + 100px);
  }
}

@media only screen and (max-width: 990px) {
  #about .container_mouse {
    bottom: 22%;
  }
}

@media only screen and (max-width: 911px) {
  #about .slideshow p {
    width: 90%;
  }
}

@media only screen and (max-width: 797px) {
  #about .slideshow p {
    top: calc(25% + 125px);
  }
}

@media only screen and (max-width: 465px) {
  #about .slideshow p {
    top: calc(25% + 150px);
  }
}

#about .rounded-box:not(.second) .trailer {
  width: 40%;
  max-width: 420px;
  height: 400px;
}

#about .rounded-box:not(.second) .trailer iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

@media only screen and (max-width: 990px) {
  #about .rounded-box:not(.second) {
    margin: 0 10px;
    margin-top: -130px;
  }
}

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

  #about .rounded-box:not(.second) .text,
  #about .rounded-box:not(.second) .trailer {
    width: 100%;
  }

  #about .rounded-box:not(.second) .text p {
    margin-bottom: 50px;
  }

  #about .rounded-box:not(.second) .trailer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-top: 45px;
  }
}

#about .rounded-box:not(.second) .buttons-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  gap: 30px;
  margin-top: 50px;
}

#about .rounded-box:not(.second) .more {
  font-size: 15px;
  padding: 0.7em 2.7em;
  letter-spacing: 0.06em;
  position: relative;
  font-family: 'Quicksand';
  border-radius: 0.6em;
  overflow: hidden;
  transition: all 0.3s;
  line-height: 1.4em;
  border: 2px solid #A20000;
  color: #A20000;
  cursor: pointer;
  margin-top: 30px;
  background-color: white;
  font-weight: bold;
  margin: 0;
}

#about .rounded-box:not(.second) .social {
  cursor: pointer;
}

#about .rounded-box:not(.second) .more:hover {
  color: #A20000;
  box-shadow: inset 0 0 5px rgba(210, 65, 65, 0.6), 0 0 9px 3px rgba(210, 65, 65, 0.2);
}

#about .rounded-box:not(.second) .more:before {
  content: "";
  position: absolute;
  left: -4em;
  width: 4em;
  height: 100%;
  top: 0;
  transition: transform .4s ease-in-out;
  background: linear-gradient(to right, transparent 1%, rgba(210, 65, 65, 0.1) 45%, rgba(210, 65, 65, 0.1) 55%, transparent 100%);
}

#about .rounded-box:not(.second) .more:hover:before {
  transform: translateX(15em);
}

#about .two-cols-section {
  padding-top: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 72%;
  margin: auto;
}

#about .two-cols-section .photo {
  width: 47%;
}

#about .two-cols-section .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 0.85;
}

@media only screen and (max-width: 900px) {
  #about .two-cols-section .photo img {
    scale: 1;
  }
}

#about .two-cols-section .text {
  width: 47%;
  height: 100%;
}

#about .two-cols-section .text h2 {
  font-family: 'Reitam';
  font-size: 34px;
  position: relative;
  z-index: 10;
  margin-bottom: 20px;
}

#about .two-cols-section .text p {
  margin-top: 0;
}

#about .two-cols-section.reverse {
  padding-top: 0;
}

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

  #about .two-cols-section .text,
  #about .two-cols-section .photo {
    width: 100%;
  }

  #about .two-cols-section:not(.reverse) .photo {
    order: 2;
  }

  #about .two-cols-section .text p {
    margin-bottom: 30px;
  }

  #about .two-cols-section .photo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 60px;
  }

  #about .two-cols-section .photo img {
    width: 70%;
  }

  #about .rounded-box:not(.second) .buttons-wrapper {
    margin: auto;
  }
}

@media only screen and (max-width: 573px) {
  #about .rounded-box:not(.second) .buttons-wrapper {
    flex-direction: column;
  }
}

#about .cards-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: normal;
  flex-wrap: wrap;
  width: 95%;
  margin: auto;
}

#about .card {
  width: 280px;
  height: 350px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  box-shadow: 0px 0px 1px grey;
  background-color: white;
  border-radius: 20px;
  transition: 0.2s ease-in-out;
  z-index: 10;
}

#about .card .bg {
  position: absolute;
  width: 100%;
  height: 100px;
  top: 0;
  transition: all 0.4s ease;
  background: linear-gradient(90deg, rgba(27, 34, 49, 1) 0%, rgba(28, 59, 101, 1) 100%);
  z-index: 1;
}

#about .card .more {
  width: 24px;
  height: 24px;
  position: absolute;
  z-index: 2;
  right: 20px;
  top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transform: rotate(0deg);
  transition: all 0.4s ease;
  border-radius: 100%;
}

#about .card .more::before {
  content: '';
  width: 16px;
  height: 2px;
  background-color: white;
  content: "";
  position: absolute;
  border-radius: 4px;
  transition: all 0.4s ease;
}

#about .card .more::after {
  content: '';
  width: 16px;
  height: 2px;
  background-color: white;
  content: "";
  position: absolute;
  border-radius: 4px;
  transition: all 0.4s ease;
  transform: rotate(90deg);
}

#about .card .more:hover {
  transform: scale(1.1);
  background-color: rgba(255, 255, 255, 0.2);
}

#about .card .photo {
  width: 120px;
  height: 120px;
  border-radius: 100%;
  overflow: hidden;
  z-index: 1;
  position: absolute;
  top: 20px;
  border: 3px solid #FFFFFF;
  transition: all 0.4s ease;
  box-shadow: 0px 4px 10px rgb(111 112 115 / 30%);
}

#about .card .photo::before {
  content: '';
  background: #403E3E;
  z-index: 1;
}

#about .card .photo::after {
  content: '';
  background: linear-gradient(90deg, rgba(27, 34, 49, 1) 0%, rgba(28, 59, 101, 1) 100%);
  z-index: 2;
}

#about .card .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s ease-in-out;
}

#about .card .text {
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  transform: translateY(50px);
  transition: all 0.3s ease;
  font-family: 'Quicksand';
  z-index: 1;
}

#about .card .text .name {
  font-size: 20px;
  letter-spacing: 0.8px;
  font-weight: bold;
  color: #6F7073;
  font-weight: 300;
}

#about .card .text .role {
  font-size: 14px;
  font-weight: 600;
  color: #CBCBCB;
  letter-spacing: 0.8px;
  margin-top: 5px;
}

#about .card .text .desc {
  color: white;
  display: none;
  margin-top: 20px;
  font-size: 16px;
  letter-spacing: 0.6px;
  text-align: center;
  padding: 0 40px;
  font-weight: 400;
  line-height: 22px;
}

#about .card .social {
  z-index: 1;
  display: flex;
  align-items: center;
  background-color: rgba(234, 234, 234, 0.5);
  box-shadow: inset 0px 11px 13px -20px #6f7073;
  width: 100%;
  position: absolute;
  bottom: 0;
  height: 50px;
  padding: 0 20px;
  box-sizing: border-box;
  border-radius: 0px 0px 4px 4px;
  transition: all 0.4s ease;
}

#about .card .social:hover .pointer {
  opacity: 1;
  bottom: 45px;
}

#about .card .social .pointer {
  display: block;
  width: 10px;
  height: 10px;
  z-index: 2;
  bottom: 50px;
  position: absolute;
  transform: translateX(25px);
  transition: all 0.4s ease;
  opacity: 0;
}

#about .card .social .icons {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

#about .card .social .icon {
  width: 26px;
  opacity: 0.65;
  transition: all 0.4s ease;
}

#about .card .social .icon:hover {
  opacity: 0.9;
}

#about .card .social .icon img {
  width: 100%;
  height: 100%;
}

/* Show More */
#about .card.show-more {
  overflow: hidden;
}

#about .card.show-more .more {
  transform: rotate(45deg) scale(1);
}

#about .card.show-more .more:hover {
  transform: rotate(45deg) scale(1.1);
}

@media screen and (max-width: 799px) {
  .wrapper .module-team .team .team-cards .swiper-container .swiper-slide.show-more #about .card .more:hover {
    transform: rotate(45deg) scale(1);
  }
}

#about .card.show-more .social {
  transform: translateY(55px);
}

#about .card.show-more .text {
  color: white;
  transform: translateY(0px);
  transition: all 0.6s ease;
}

#about .card.show-more .text .name,
#about .card.show-more .text .role {
  color: white;
}

#about .card.show-more .text .desc {
  display: block;
}

#about .card.show-more .photo {
  width: 100%;
  height: 100%;
  top: -16px;
  border: solid 0px transparent;
  border-radius: 4px;
  box-shadow: 0px 4px 10px rgba(111, 112, 115, 0);
  transform: translateY(0px);
  transition: all 0.4s ease;
}

#about .card.show-more .photo:before {
  height: 100%;
  opacity: 0.5;
}

#about .card.show-more .photo:after {
  height: 100%;
  opacity: 0.8;
  border-radius: 4px;
}

#about .card.show-more .photo img {
  filter: grayscale(100%);
  opacity: 0.2;
}

#about .card.show-more .photo:hover {
  transform: translateY(0px);
}

#about .card.show-more .bg {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

#about .card.show-more .bg:before {
  opacity: 0.5;
}

#about .card.show-more .bg:after {
  opacity: 0.8;
}

#about .rounded-box.second {
  width: 70%;
  margin: auto;
  margin-top: 100px;
}

#about .rounded-box.second h2 {
  font-family: 'Reitam';
  font-size: 34px;
  text-align: center;
  width: 80%;
  margin: auto;
  margin-bottom: 50px;
}

@media only screen and (min-width: 1600px) {
  #about .rounded-box.second {
    width: 65%;
  }

  #about .rounded-box.second .cards-wrapper {
    justify-content: center;
    gap: 50px;
  }
}

@media only screen and (max-width: 1360px) {
  #about .rounded-box.second {
    width: 60%;
  }

  #about .rounded-box.second .cards-wrapper {
    justify-content: center;
    align-items: center;
    gap: 50px;
  }
}

@media only screen and (max-width: 1094px) {
  #about .rounded-box.second {
    width: unset;
  }
}

#about .stats {
  width: 100%;
  background-color: #232931;
  margin-top: -200px;
  padding-top: 320px;
  color: white;
  padding-bottom: 150px;
}

#about .stats h2,
#about .stats h3 {
  font-family: 'Reitam';
  font-size: 34px;
  text-align: center;
  width: 75%;
  margin: auto;
}

#about .stats h3 {
  font-family: 'Quicksand';
  font-size: 22px;
  margin-top: 60px;
}

#about .stats .stats-wrapper {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  width: 75%;
  margin: auto;
  text-align: center;
  margin-top: 30px;
  gap: 30px;
}

#about .stats .stats-wrapper .single-stat {
  border-radius: 1in;
  border: 2px solid white;
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#about .stats .stats-wrapper .single-stat h3 {
  font-family: 'Reitam';
  font-size: 24px;
  margin: 0;
}

#about .stats .stats-wrapper .single-stat p {
  font-family: 'Quicksand';
  margin: 0;
}

@media only screen and (max-width: 942px) {
  #about .stats .stats-wrapper {
    width: 90%;
  }
}

/* Lamp */

.top-header:before {
  background-image: url(https://1.bp.blogspot.com/-gxsOcYWghHA/Xp_izTh4sFI/AAAAAAAAU8s/y637Fwg99qAuzW9na_NT_uApny8Vce95gCEwYBhgL/s1600/header-footer-gradient-bg.png);
}

.top-header:before {
  content: '';
  display: block;
  width: 100%;
  height: 4px;
  background-repeat: repeat-x;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.5;
}

.clearfix:before,
.clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  visibility: hidden;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
}

.lamp {
  position: absolute;
  left: 0px;
  right: 0px;
  top: -100px;
  margin: 0px auto;
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: center top;
  animation-timing-function: cubic-bezier(0.6, 0, 0.38, 1);
  animation: move 5.1s infinite;
}

@keyframes move {
  0% {
    transform: rotate(10deg);
  }

  50% {
    transform: rotate(-10deg);
  }

  100% {
    transform: rotate(10deg);
  }
}

.cable {
  width: 8px;
  height: 248px;
  background-color: #404040;
}

.cover {
  width: 200px;
  height: 80px;
  background: #666;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  position: relative;
  z-index: 200;
}

.in-cover {
  width: 100%;
  max-width: 200px;
  height: 20px;
  border-radius: 100%;
  background: #999;
  position: absolute;
  left: 0px;
  right: 0px;
  margin: 0px auto;
  bottom: -9px;
  z-index: 100;
}

.in-cover .bulb {
  width: 50px;
  height: 50px;
  background-color: #999;
  border-radius: 50%;
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: -20px;
  margin: 0px auto;
  -webkit-box-shadow: 0 0 15px 7px rgba(200, 200, 200, 0.8), 0 0 40px 25px rgba(200, 200, 200, 0.5), -75px 0 30px 15px rgba(200, 200, 200, 0.2);
  box-shadow: 0 0 25px 7px rgb(200 200 200 / 80%), 0 0 64px 47px rgba(200, 200, 200, 0.5), 0px 0 30px 15px rgba(200, 200, 200, 0.2);
}

.light {
  width: 1500px;
  height: 0px;
  border-bottom: 200vh solid rgb(69 80 86 / 60%);
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  position: absolute;
  left: -650px;
  right: 0px;
  top: 270px;
  margin: 0px auto;
  z-index: 1;
  border-radius: 90px 90px 0px 0px;
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0% 100%);
}

@media (max-width: 1400px) {
  .lamp {
    zoom: .5;
  }
}

@media (max-width: 950px) {
  .lamp__wrap {
    max-height: 100vh;
    overflow: hidden;
    max-width: 100vw;
  }
}

@media (max-width: 650px) {
  .lamp {
    zoom: .6;
  }
}