/* ==========================================
   MACBOOK PRELOADER ANIMATION
   ========================================== */
.preloader-wrapper { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; flex-direction: column; }
.macbook { position: relative; width: 228px; height: 260px; transform: scale(0.8); }
@media (min-width: 768px) { .macbook { transform: scale(1); } }

.macbook__topBord { position: absolute; z-index: 0; top: 34px; left: 0; width: 128px; height: 116px; border-radius: 6px; transform-origin: center; background: linear-gradient(-135deg, #475569 52%, #1e293b 56%); transform: scale(0) skewY(-30deg); animation: topbord 0.4s 0.5s ease-out forwards; }
.macbook__topBord::before { content: ""; position: absolute; z-index: 2; top: 8px; left: 6px; width: 100%; height: 100%; border-radius: 6px; background: #020617; }
.macbook__topBord::after { content: ""; position: absolute; z-index: 1; bottom: -7px; left: 8px; width: 168px; height: 12px; transform-origin: left bottom; transform: rotate(-42deg) skew(-4deg); background: linear-gradient(-135deg, #475569 52%, #1e293b 56%); }
.macbook__display { position: absolute; z-index: 10; top: 17px; left: 12px; width: calc(100% - 12px); height: calc(100% - 18px); background: #0f172a; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 2px; }
.macbook__display::before { content: ""; position: absolute; z-index: 5; top: -9px; left: -6px; width: calc(100% + 12px); height: calc(100% + 18px); border-radius: 6px; background: linear-gradient(60deg, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.1) 60%); pointer-events: none; }
.macbook__load { position: absolute; width: 100%; height: 100%; background: rgba(2, 6, 23, 0.9); animation: displayFade 0.4s 2.8s ease forwards; z-index: 20; }
.macbook__load:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 80px; height: 4px; border-radius: 2px; border: solid 1px rgba(255,255,255,0.2); }
.macbook__load:after { content: ""; position: absolute; top: 0; left: 18px; bottom: 0; margin: auto; width: 0; height: 4px; border-radius: 2px; background: #3b82f6; animation: loadBar 1.5s 1.2s ease-out forwards; }
.macbook__logo { width: 40px; height: auto; z-index: 15; opacity: 0; animation: fadeInLogo 0.5s 3.0s forwards; filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.5)); }
.macbook__underBord { position: relative; left: 42px; bottom: -145px; width: 150px; height: 90px; border-radius: 6px; transform-origin: center; transform: rotate(-30deg) skew(30deg); background: linear-gradient(-45deg, #475569 61%, #1e293b 66%); animation: modal 0.5s 0.2s ease-out forwards; opacity: 0; }
.macbook__underBord::before { content: ""; position: absolute; z-index: 3; top: -8px; left: 8px; width: 100%; height: 100%; border-radius: 6px; background: #334155; }
.macbook__underBord::after { content: ""; position: absolute; z-index: 2; top: -8px; left: 12px; width: 170px; height: 15px; transform-origin: top left; background: linear-gradient(-45deg, #475569 61%, #1e293b 66%); transform: rotate(31deg) skew(-16deg); }
.macbook__keybord { position: relative; top: 0; left: 16px; z-index: 3; border-radius: 3px; width: calc(100% - 16px); height: 45px; background: #1e293b; }
.macbook__keybord::before { content: ""; position: absolute; bottom: -30px; left: 0; right: 0; margin: 0 auto; width: 40px; height: 25px; border-radius: 3px; background: #1e293b; }
.keybord { position: relative; top: 2px; left: 2px; display: flex; flex-direction: column; width: calc(100% - 3px); height: calc(100% - 4px); }
.keybord__touchbar { width: 100%; height: 6px; border-radius: 3px; background: #000; }
.keybord__keyBox { display: grid; grid-template-rows: 3fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; width: 100%; height: 24px; margin: 1px 0 0 0; padding: 0 0 0 1px; box-sizing: border-box; list-style: none; }
.keybord__key { position: relative; width: 8px; height: 7px; margin: 1px; background: #020617; }
.keybord__keyBox .keybord__key { transform: translate(60px, -60px); animation: keyAnim 0.2s 1.4s ease-out forwards; opacity: 0; }
.keybord__keyBox .keybord__key::before, .keybord__keyBox .keybord__key::after { content: ""; position: absolute; left: 0; width: 100%; height: 100%; background: #020617; }
.keybord__key::before { top: 8px; transform: translate(20px, -20px); animation: keyAnim1 0.2s 1.5s ease-out forwards; }
.keybord__key::after { top: 16px; transform: translate(40px, -40px); animation: keyAnim2 0.2s 1.6s ease-out forwards; }
.keybord__keyBox .key--12::before { width: 10px; } .keybord__keyBox .key--13::before { height: 10px; }
.key--01 { grid-row: 1 / 2; grid-column: 1 / 2; } .key--02 { grid-row: 1 / 2; grid-column: 2 / 3; } .key--03 { grid-row: 1 / 2; grid-column: 3 / 4; } .key--04 { grid-row: 1 / 2; grid-column: 4 / 5; } .key--05 { grid-row: 1 / 2; grid-column: 5 / 6; } .key--06 { grid-row: 1 / 2; grid-column: 6 / 7; } .key--07 { grid-row: 1 / 2; grid-column: 7 / 8; } .key--08 { grid-row: 1 / 2; grid-column: 8 / 9; } .key--09 { grid-row: 1 / 2; grid-column: 9 / 10; } .key--10 { grid-row: 1 / 2; grid-column: 10 / 11; } .key--11 { grid-row: 1 / 2; grid-column: 11 / 12; } .key--12 { grid-row: 1 / 2; grid-column: 12 / 13; } .key--13 { grid-row: 1 / 2; grid-column: 13 / 14; }
.keybord__keyBox--under { margin: 0; padding: 0 0 0 1px; box-sizing: border-box; list-style: none; display: flex; }
.keybord__keyBox--under .keybord__key { transform: translate(80px, -80px); animation: keyAnim3 0.3s 1.6s linear forwards; opacity: 0; }
.key--19 { width: 28px; }

@keyframes topbord { 0% { transform: scale(0) skewY(-30deg); } 30% { transform: scale(1.1) skewY(-30deg); } 45% { transform: scale(0.9) skewY(-30deg); } 60% { transform: scale(1.05) skewY(-30deg); } 75% { transform: scale(0.95) skewY(-30deg); } 90% { transform: scale(1.02) skewY(-30deg); } 100% { transform: scale(1) skewY(-30deg); } }
@keyframes displayFade { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes loadBar { 0% { width: 0; } 20% { width: 40px; } 30% { width: 40px; } 60% { width: 60px; } 90% { width: 60px; } 100% { width: 80px; } }
@keyframes fadeInLogo { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); } }
@keyframes modal { 0% { transform: scale(0) rotate(-30deg) skew(30deg); opacity: 0; } 30% { transform: scale(1.1) rotate(-30deg) skew(30deg); opacity: 1; } 45% { transform: scale(0.9) rotate(-30deg) skew(30deg); opacity: 1; } 60% { transform: scale(1.05) rotate(-30deg) skew(30deg); opacity: 1; } 75% { transform: scale(0.95) rotate(-30deg) skew(30deg); opacity: 1; } 90% { transform: scale(1.02) rotate(-30deg) skew(30deg); opacity: 1; } 100% { transform: scale(1) rotate(-30deg) skew(30deg); opacity: 1; } }
@keyframes keyAnim { 0% { transform: translate(60px, -60px); opacity: 0; } 100% { transform: translate(0px, 0px); opacity: 1; } }
@keyframes keyAnim1 { 0% { transform: translate(20px, -20px); opacity: 0; } 100% { transform: translate(0px, 0px); opacity: 1; } }
@keyframes keyAnim2 { 0% { transform: translate(40px, -40px); opacity: 0; } 100% { transform: translate(0px, 0px); opacity: 1; } }
@keyframes keyAnim3 { 0% { transform: translate(80px, -80px); opacity: 0; } 100% { transform: translate(0px, 0px); opacity: 1; } }

/* From Uiverse.io by Juanes200122 */ 
.loader {
  --duration: 3s;
  --primary: rgb(0, 204, 255);
  --primary-light: #00a6ff;
  --primary-rgba: rgba(204, 0, 255, 0.04);
  width: 200px;
  height: 320px;
  position: relative;
  transform-style: preserve-3d;
}

@media (max-width: 480px) {
  .loader {
    zoom: 0.44;
  }
}

.loader:before, .loader:after {
  --r: 20.5deg;
  content: "";
  width: 320px;
  height: 140px;
  position: absolute;
  right: 32%;
  bottom: -11px;
  /* change the back groung color on switching from light to dark mood */
  background: #e8e8e8;
  transform: translateZ(200px) rotate(var(--r));
  -webkit-animation: mask var(--duration) linear forwards infinite;
  animation: mask var(--duration) linear forwards infinite;
}

.loader:after {
  --r: -20.5deg;
  right: auto;
  left: 32%;
}

.loader .ground {
  position: absolute;
  left: -50px;
  bottom: -120px;
  transform-style: preserve-3d;
  transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
}

.loader .ground div {
  transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
  width: 200px;
  height: 200px;
  background: var(--primary);
  background: linear-gradient(45deg, var(--primary) 0%, var(--primary) 50%, var(--primary-light) 50%, var(--primary-light) 100%);
  transform-style: preserve-3d;
  -webkit-animation: ground var(--duration) linear forwards infinite;
  animation: ground var(--duration) linear forwards infinite;
}

.loader .ground div:before, .loader .ground div:after {
  --rx: 90deg;
  --ry: 0deg;
  --x: 44px;
  --y: 162px;
  --z: -50px;
  content: "";
  width: 156px;
  height: 300px;
  opacity: 0;
  background: linear-gradient(var(--primary), var(--primary-rgba));
  position: absolute;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));
  -webkit-animation: ground-shine var(--duration) linear forwards infinite;
  animation: ground-shine var(--duration) linear forwards infinite;
}

.loader .ground div:after {
  --rx: 90deg;
  --ry: 90deg;
  --x: 0;
  --y: 177px;
  --z: 150px;
}

.loader .box {
  --x: 0;
  --y: 0;
  position: absolute;
  -webkit-animation: var(--duration) linear forwards infinite;
  animation: var(--duration) linear forwards infinite;
  transform: translate(var(--x), var(--y));
}

.loader .box div {
  background-color: var(--primary);
  width: 48px;
  height: 48px;
  position: relative;
  transform-style: preserve-3d;
  -webkit-animation: var(--duration) ease forwards infinite;
  animation: var(--duration) ease forwards infinite;
  transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
}

.loader .box div:before, .loader .box div:after {
  --rx: 90deg;
  --ry: 0deg;
  --z: 24px;
  --y: -24px;
  --x: 0;
  content: "";
  position: absolute;
  background-color: inherit;
  width: inherit;
  height: inherit;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));
  filter: brightness(var(--b, 1.2));
}

.loader .box div:after {
  --rx: 0deg;
  --ry: 90deg;
  --x: 24px;
  --y: 0;
  --b: 1.4;
}

.loader .box.box0 {
  --x: -220px;
  --y: -120px;
  left: 58px;
  top: 108px;
}

.loader .box.box1 {
  --x: -260px;
  --y: 120px;
  left: 25px;
  top: 120px;
}

.loader .box.box2 {
  --x: 120px;
  --y: -190px;
  left: 58px;
  top: 64px;
}

.loader .box.box3 {
  --x: 280px;
  --y: -40px;
  left: 91px;
  top: 120px;
}

.loader .box.box4 {
  --x: 60px;
  --y: 200px;
  left: 58px;
  top: 132px;
}

.loader .box.box5 {
  --x: -220px;
  --y: -120px;
  left: 25px;
  top: 76px;
}

.loader .box.box6 {
  --x: -260px;
  --y: 120px;
  left: 91px;
  top: 76px;
}

.loader .box.box7 {
  --x: -240px;
  --y: 200px;
  left: 58px;
  top: 87px;
}

.loader .box0 {
  -webkit-animation-name: box-move0;
  animation-name: box-move0;
}

.loader .box0 div {
  -webkit-animation-name: box-scale0;
  animation-name: box-scale0;
}

.loader .box1 {
  -webkit-animation-name: box-move1;
  animation-name: box-move1;
}

.loader .box1 div {
  -webkit-animation-name: box-scale1;
  animation-name: box-scale1;
}

.loader .box2 {
  -webkit-animation-name: box-move2;
  animation-name: box-move2;
}

.loader .box2 div {
  -webkit-animation-name: box-scale2;
  animation-name: box-scale2;
}

.loader .box3 {
  -webkit-animation-name: box-move3;
  animation-name: box-move3;
}

.loader .box3 div {
  -webkit-animation-name: box-scale3;
  animation-name: box-scale3;
}

.loader .box4 {
  -webkit-animation-name: box-move4;
  animation-name: box-move4;
}

.loader .box4 div {
  -webkit-animation-name: box-scale4;
  animation-name: box-scale4;
}

.loader .box5 {
  -webkit-animation-name: box-move5;
  animation-name: box-move5;
}

.loader .box5 div {
  -webkit-animation-name: box-scale5;
  animation-name: box-scale5;
}

.loader .box6 {
  -webkit-animation-name: box-move6;
  animation-name: box-move6;
}

.loader .box6 div {
  -webkit-animation-name: box-scale6;
  animation-name: box-scale6;
}

.loader .box7 {
  -webkit-animation-name: box-move7;
  animation-name: box-move7;
}

.loader .box7 div {
  -webkit-animation-name: box-scale7;
  animation-name: box-scale7;
}

@-webkit-keyframes box-move0 {
  12% {
    transform: translate(var(--x), var(--y));
  }

  25%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@keyframes box-move0 {
  12% {
    transform: translate(var(--x), var(--y));
  }

  25%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@-webkit-keyframes box-scale0 {
  6% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  14%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale0 {
  6% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  14%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move1 {
  16% {
    transform: translate(var(--x), var(--y));
  }

  29%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@keyframes box-move1 {
  16% {
    transform: translate(var(--x), var(--y));
  }

  29%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@-webkit-keyframes box-scale1 {
  10% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  18%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale1 {
  10% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  18%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move2 {
  20% {
    transform: translate(var(--x), var(--y));
  }

  33%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@keyframes box-move2 {
  20% {
    transform: translate(var(--x), var(--y));
  }

  33%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@-webkit-keyframes box-scale2 {
  14% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  22%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale2 {
  14% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  22%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move3 {
  24% {
    transform: translate(var(--x), var(--y));
  }

  37%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@keyframes box-move3 {
  24% {
    transform: translate(var(--x), var(--y));
  }

  37%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@-webkit-keyframes box-scale3 {
  18% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  26%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale3 {
  18% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  26%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move4 {
  28% {
    transform: translate(var(--x), var(--y));
  }

  41%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@keyframes box-move4 {
  28% {
    transform: translate(var(--x), var(--y));
  }

  41%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@-webkit-keyframes box-scale4 {
  22% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  30%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale4 {
  22% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  30%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move5 {
  32% {
    transform: translate(var(--x), var(--y));
  }

  45%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@keyframes box-move5 {
  32% {
    transform: translate(var(--x), var(--y));
  }

  45%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@-webkit-keyframes box-scale5 {
  26% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  34%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale5 {
  26% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  34%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move6 {
  36% {
    transform: translate(var(--x), var(--y));
  }

  49%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@keyframes box-move6 {
  36% {
    transform: translate(var(--x), var(--y));
  }

  49%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@-webkit-keyframes box-scale6 {
  30% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  38%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale6 {
  30% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  38%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move7 {
  40% {
    transform: translate(var(--x), var(--y));
  }

  53%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@keyframes box-move7 {
  40% {
    transform: translate(var(--x), var(--y));
  }

  53%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@-webkit-keyframes box-scale7 {
  34% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  42%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale7 {
  34% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  42%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes ground {
  0%, 65% {
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
  }

  75%, 90% {
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);
  }

  100% {
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
  }
}

@keyframes ground {
  0%, 65% {
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
  }

  75%, 90% {
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);
  }

  100% {
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
  }
}

@-webkit-keyframes ground-shine {
  0%, 70% {
    opacity: 0;
  }

  75%, 87% {
    opacity: 0.2;
  }

  100% {
    opacity: 0;
  }
}

@keyframes ground-shine {
  0%, 70% {
    opacity: 0;
  }

  75%, 87% {
    opacity: 0.2;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes mask {
  0%, 65% {
    opacity: 0;
  }

  66%, 100% {
    opacity: 1;
  }
}

@keyframes mask {
  0%, 65% {
    opacity: 0;
  }

  66%, 100% {
    opacity: 1;
  }
}

/* ==========================================
   SVG RING REDIRECT LOADER (EXACT ORIGINAL CODE)
   ========================================== */
/* From Uiverse.io by Nawsome */ 
.pl {
  width: 8em;
  height: 8em;
}

.pl circle {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.pl__ring1 {
  animation: ring1_ 4s 0s ease-in-out infinite;
}

.pl__ring2 {
  animation: ring2_ 4s 0.04s ease-in-out infinite;
}

.pl__ring3 {
  animation: ring3_ 4s 0.08s ease-in-out infinite;
}

.pl__ring4 {
  animation: ring4_ 4s 0.12s ease-in-out infinite;
}

.pl__ring5 {
  animation: ring5_ 4s 0.16s ease-in-out infinite;
}

.pl__ring6 {
  animation: ring6_ 4s 0.2s ease-in-out infinite;
}

/* Animations */
@keyframes ring1_ {
  from {
    stroke-dashoffset: -376.237129776;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }

  23% {
    stroke-dashoffset: -94.247778;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }

  46%, 50% {
    stroke-dashoffset: -376.237129776;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }

  73% {
    stroke-dashoffset: -94.247778;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }

  96%, to {
    stroke-dashoffset: -376.237129776;
    transform: rotate(4.75turn);
  }
}

@keyframes ring2_ {
  from {
    stroke-dashoffset: -329.207488554;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }

  23% {
    stroke-dashoffset: -82.46680575;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }

  46%, 50% {
    stroke-dashoffset: -329.207488554;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }

  73% {
    stroke-dashoffset: -82.46680575;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }

  96%, to {
    stroke-dashoffset: -329.207488554;
    transform: rotate(4.75turn);
  }
}

@keyframes ring3_ {
  from {
    stroke-dashoffset: -288.4484661616;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }

  23% {
    stroke-dashoffset: -72.2566298;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }

  46%, 50% {
    stroke-dashoffset: -288.4484661616;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }

  73% {
    stroke-dashoffset: -72.2566298;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }

  96%, to {
    stroke-dashoffset: -288.4484661616;
    transform: rotate(4.75turn);
  }
}

@keyframes ring4_ {
  from {
    stroke-dashoffset: -253.9600625988;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }

  23% {
    stroke-dashoffset: -63.61725015;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }

  46%, 50% {
    stroke-dashoffset: -253.9600625988;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }

  73% {
    stroke-dashoffset: -63.61725015;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }

  96%, to {
    stroke-dashoffset: -253.9600625988;
    transform: rotate(4.75turn);
  }
}

@keyframes ring5_ {
  from {
    stroke-dashoffset: -225.7422778656;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }

  23% {
    stroke-dashoffset: -56.5486668;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }

  46%, 50% {
    stroke-dashoffset: -225.7422778656;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }

  73% {
    stroke-dashoffset: -56.5486668;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }

  96%, to {
    stroke-dashoffset: -225.7422778656;
    transform: rotate(4.75turn);
  }
}

@keyframes ring6_ {
  from {
    stroke-dashoffset: -203.795111962;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }

  23% {
    stroke-dashoffset: -51.05087975;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }

  46%, 50% {
    stroke-dashoffset: -203.795111962;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }

  73% {
    stroke-dashoffset: -51.05087975;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }

  96%, to {
    stroke-dashoffset: -203.795111962;
    transform: rotate(4.75turn);
  }
}