@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,500;1,700&display=swap");
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

img {
  vertical-align: top;
}

/* #region ANIMATIONS =================================================================================================================*/
/* ANIMATIONS general =================================================================================================================*/
@-webkit-keyframes move_glare {
  0%, 0.0001% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  10%, 100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes move_glare {
  0%, 0.0001% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  10%, 100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@-webkit-keyframes blink_clouds-1 {
  0%, 0.0001% {
    -webkit-transform: translateY(4%) scale(1);
            transform: translateY(4%) scale(1);
    opacity: 0.7;
  }
  2% {
    opacity: 0.7;
  }
  4% {
    opacity: 0.76;
  }
  6% {
    opacity: 0.82;
  }
  8% {
    opacity: 0.88;
  }
  10% {
    opacity: 0.94;
  }
  12% {
    opacity: 1;
  }
  14% {
    opacity: 0.85;
  }
  16% {
    opacity: 0.7;
  }
  18% {
    opacity: 0.6;
  }
  20% {
    opacity: 0.5;
  }
  22% {
    opacity: 0.6;
  }
  24% {
    opacity: 0.7;
  }
  26% {
    opacity: 0.73;
  }
  28% {
    opacity: 0.77;
  }
  30% {
    opacity: 0.8;
  }
  32% {
    opacity: 0.84;
  }
  34% {
    opacity: 0.87;
  }
  36% {
    opacity: 0.9;
  }
  38% {
    opacity: 0.93;
  }
  40% {
    opacity: 0.97;
  }
  42% {
    opacity: 1;
  }
  44% {
    opacity: 0.85;
  }
  46% {
    opacity: 0.7;
  }
  48% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.5;
  }
  52% {
    opacity: 0.6;
  }
  54% {
    opacity: 0.7;
  }
  56% {
    opacity: 0.72;
  }
  58% {
    opacity: 0.75;
  }
  60% {
    opacity: 0.76;
  }
  62% {
    opacity: 0.79;
  }
  64% {
    opacity: 0.81;
  }
  66% {
    opacity: 0.83;
  }
  68% {
    opacity: 0.85;
  }
  70% {
    opacity: 0.87;
  }
  72% {
    opacity: 0.89;
  }
  74% {
    opacity: 0.91;
  }
  76% {
    opacity: 0.94;
  }
  78% {
    opacity: 0.96;
  }
  80% {
    opacity: 0.98;
  }
  82% {
    opacity: 1;
  }
  84% {
    opacity: 0.85;
  }
  86% {
    opacity: 0.7;
  }
  88% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.5;
  }
  92% {
    opacity: 0.6;
  }
  94% {
    opacity: 0.7;
  }
  96% {
    opacity: 0.7;
  }
  98% {
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translateY(0) scale(1.1);
            transform: translateY(0) scale(1.1);
    opacity: 0.7;
  }
}
@keyframes blink_clouds-1 {
  0%, 0.0001% {
    -webkit-transform: translateY(4%) scale(1);
            transform: translateY(4%) scale(1);
    opacity: 0.7;
  }
  2% {
    opacity: 0.7;
  }
  4% {
    opacity: 0.76;
  }
  6% {
    opacity: 0.82;
  }
  8% {
    opacity: 0.88;
  }
  10% {
    opacity: 0.94;
  }
  12% {
    opacity: 1;
  }
  14% {
    opacity: 0.85;
  }
  16% {
    opacity: 0.7;
  }
  18% {
    opacity: 0.6;
  }
  20% {
    opacity: 0.5;
  }
  22% {
    opacity: 0.6;
  }
  24% {
    opacity: 0.7;
  }
  26% {
    opacity: 0.73;
  }
  28% {
    opacity: 0.77;
  }
  30% {
    opacity: 0.8;
  }
  32% {
    opacity: 0.84;
  }
  34% {
    opacity: 0.87;
  }
  36% {
    opacity: 0.9;
  }
  38% {
    opacity: 0.93;
  }
  40% {
    opacity: 0.97;
  }
  42% {
    opacity: 1;
  }
  44% {
    opacity: 0.85;
  }
  46% {
    opacity: 0.7;
  }
  48% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.5;
  }
  52% {
    opacity: 0.6;
  }
  54% {
    opacity: 0.7;
  }
  56% {
    opacity: 0.72;
  }
  58% {
    opacity: 0.75;
  }
  60% {
    opacity: 0.76;
  }
  62% {
    opacity: 0.79;
  }
  64% {
    opacity: 0.81;
  }
  66% {
    opacity: 0.83;
  }
  68% {
    opacity: 0.85;
  }
  70% {
    opacity: 0.87;
  }
  72% {
    opacity: 0.89;
  }
  74% {
    opacity: 0.91;
  }
  76% {
    opacity: 0.94;
  }
  78% {
    opacity: 0.96;
  }
  80% {
    opacity: 0.98;
  }
  82% {
    opacity: 1;
  }
  84% {
    opacity: 0.85;
  }
  86% {
    opacity: 0.7;
  }
  88% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.5;
  }
  92% {
    opacity: 0.6;
  }
  94% {
    opacity: 0.7;
  }
  96% {
    opacity: 0.7;
  }
  98% {
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translateY(0) scale(1.1);
            transform: translateY(0) scale(1.1);
    opacity: 0.7;
  }
}
@-webkit-keyframes blink_clouds-2 {
  0%, 0.0001% {
    -webkit-transform: translate(5%, 7%) scale(1);
            transform: translate(5%, 7%) scale(1);
    opacity: 0.7;
  }
  2% {
    opacity: 0.7;
  }
  4% {
    opacity: 0.76;
  }
  6% {
    opacity: 0.82;
  }
  8% {
    opacity: 0.88;
  }
  10% {
    opacity: 0.94;
  }
  12% {
    opacity: 1;
  }
  14% {
    opacity: 0.85;
  }
  16% {
    opacity: 0.7;
  }
  18% {
    opacity: 0.6;
  }
  20% {
    opacity: 0.5;
  }
  22% {
    opacity: 0.6;
  }
  24% {
    opacity: 0.7;
  }
  26% {
    opacity: 0.73;
  }
  28% {
    opacity: 0.77;
  }
  30% {
    opacity: 0.8;
  }
  32% {
    opacity: 0.84;
  }
  34% {
    opacity: 0.87;
  }
  36% {
    opacity: 0.9;
  }
  38% {
    opacity: 0.93;
  }
  40% {
    opacity: 0.97;
  }
  42% {
    opacity: 1;
  }
  44% {
    opacity: 0.85;
  }
  46% {
    opacity: 0.7;
  }
  48% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.5;
  }
  52% {
    opacity: 0.6;
  }
  54% {
    opacity: 0.7;
  }
  56% {
    opacity: 0.72;
  }
  58% {
    opacity: 0.75;
  }
  60% {
    opacity: 0.76;
  }
  62% {
    opacity: 0.79;
  }
  64% {
    opacity: 0.81;
  }
  66% {
    opacity: 0.83;
  }
  68% {
    opacity: 0.85;
  }
  70% {
    opacity: 0.87;
  }
  72% {
    opacity: 0.89;
  }
  74% {
    opacity: 0.91;
  }
  76% {
    opacity: 0.94;
  }
  78% {
    opacity: 0.96;
  }
  80% {
    opacity: 0.98;
  }
  82% {
    opacity: 1;
  }
  84% {
    opacity: 0.85;
  }
  86% {
    opacity: 0.7;
  }
  88% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.5;
  }
  92% {
    opacity: 0.6;
  }
  94% {
    opacity: 0.7;
  }
  96% {
    opacity: 0.7;
  }
  98% {
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translate(0, 0) scale(1.1);
            transform: translate(0, 0) scale(1.1);
    opacity: 0.7;
  }
}
@keyframes blink_clouds-2 {
  0%, 0.0001% {
    -webkit-transform: translate(5%, 7%) scale(1);
            transform: translate(5%, 7%) scale(1);
    opacity: 0.7;
  }
  2% {
    opacity: 0.7;
  }
  4% {
    opacity: 0.76;
  }
  6% {
    opacity: 0.82;
  }
  8% {
    opacity: 0.88;
  }
  10% {
    opacity: 0.94;
  }
  12% {
    opacity: 1;
  }
  14% {
    opacity: 0.85;
  }
  16% {
    opacity: 0.7;
  }
  18% {
    opacity: 0.6;
  }
  20% {
    opacity: 0.5;
  }
  22% {
    opacity: 0.6;
  }
  24% {
    opacity: 0.7;
  }
  26% {
    opacity: 0.73;
  }
  28% {
    opacity: 0.77;
  }
  30% {
    opacity: 0.8;
  }
  32% {
    opacity: 0.84;
  }
  34% {
    opacity: 0.87;
  }
  36% {
    opacity: 0.9;
  }
  38% {
    opacity: 0.93;
  }
  40% {
    opacity: 0.97;
  }
  42% {
    opacity: 1;
  }
  44% {
    opacity: 0.85;
  }
  46% {
    opacity: 0.7;
  }
  48% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.5;
  }
  52% {
    opacity: 0.6;
  }
  54% {
    opacity: 0.7;
  }
  56% {
    opacity: 0.72;
  }
  58% {
    opacity: 0.75;
  }
  60% {
    opacity: 0.76;
  }
  62% {
    opacity: 0.79;
  }
  64% {
    opacity: 0.81;
  }
  66% {
    opacity: 0.83;
  }
  68% {
    opacity: 0.85;
  }
  70% {
    opacity: 0.87;
  }
  72% {
    opacity: 0.89;
  }
  74% {
    opacity: 0.91;
  }
  76% {
    opacity: 0.94;
  }
  78% {
    opacity: 0.96;
  }
  80% {
    opacity: 0.98;
  }
  82% {
    opacity: 1;
  }
  84% {
    opacity: 0.85;
  }
  86% {
    opacity: 0.7;
  }
  88% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.5;
  }
  92% {
    opacity: 0.6;
  }
  94% {
    opacity: 0.7;
  }
  96% {
    opacity: 0.7;
  }
  98% {
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translate(0, 0) scale(1.1);
            transform: translate(0, 0) scale(1.1);
    opacity: 0.7;
  }
}
@-webkit-keyframes blink_clouds-3 {
  0%, 0.0001% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1;
  }
  12% {
    opacity: 1;
  }
  14% {
    opacity: 0.85;
  }
  16% {
    opacity: 0.7;
  }
  18% {
    opacity: 0.8;
  }
  20% {
    opacity: 0.9;
  }
  22% {
    opacity: 1;
  }
  24% {
    opacity: 0.9;
  }
  26% {
    opacity: 0.8;
  }
  28% {
    opacity: 0.87;
  }
  30% {
    opacity: 0.93;
  }
  32%, 62% {
    opacity: 1;
  }
  64% {
    opacity: 0.85;
  }
  66% {
    opacity: 0.7;
  }
  68% {
    opacity: 0.8;
  }
  70% {
    opacity: 0.9;
  }
  72% {
    opacity: 1;
  }
  74% {
    opacity: 0.9;
  }
  76% {
    opacity: 0.8;
  }
  78% {
    opacity: 0.87;
  }
  80% {
    opacity: 0.93;
  }
  82% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-12%, -3%);
            transform: translate(-12%, -3%);
    opacity: 1;
  }
}
@keyframes blink_clouds-3 {
  0%, 0.0001% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1;
  }
  12% {
    opacity: 1;
  }
  14% {
    opacity: 0.85;
  }
  16% {
    opacity: 0.7;
  }
  18% {
    opacity: 0.8;
  }
  20% {
    opacity: 0.9;
  }
  22% {
    opacity: 1;
  }
  24% {
    opacity: 0.9;
  }
  26% {
    opacity: 0.8;
  }
  28% {
    opacity: 0.87;
  }
  30% {
    opacity: 0.93;
  }
  32%, 62% {
    opacity: 1;
  }
  64% {
    opacity: 0.85;
  }
  66% {
    opacity: 0.7;
  }
  68% {
    opacity: 0.8;
  }
  70% {
    opacity: 0.9;
  }
  72% {
    opacity: 1;
  }
  74% {
    opacity: 0.9;
  }
  76% {
    opacity: 0.8;
  }
  78% {
    opacity: 0.87;
  }
  80% {
    opacity: 0.93;
  }
  82% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-12%, -3%);
            transform: translate(-12%, -3%);
    opacity: 1;
  }
}
@-webkit-keyframes blink_clouds-4 {
  0% {
    opacity: 1;
  }
  2% {
    opacity: 1;
  }
  4% {
    opacity: 0.9;
  }
  6% {
    opacity: 0.8;
  }
  8% {
    opacity: 0.7;
  }
  10% {
    opacity: 0.8;
  }
  12% {
    opacity: 0.9;
  }
  14% {
    opacity: 1;
  }
  16% {
    opacity: 0.87;
  }
  18% {
    opacity: 0.73;
  }
  20% {
    opacity: 0.6;
  }
  22% {
    opacity: 0.73;
  }
  24% {
    opacity: 0.87;
  }
  26%, 48% {
    opacity: 1;
  }
  50% {
    opacity: 0.85;
  }
  52% {
    opacity: 0.7;
  }
  54% {
    opacity: 0.85;
  }
  56% {
    opacity: 1;
  }
  58% {
    opacity: 0.8;
  }
  60% {
    opacity: 0.6;
  }
  62% {
    opacity: 0.8;
  }
  64%, 88% {
    opacity: 1;
  }
  90% {
    opacity: 0.85;
  }
  92% {
    opacity: 0.7;
  }
  94% {
    opacity: 0.65;
  }
  96% {
    opacity: 0.6;
  }
  98% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blink_clouds-4 {
  0% {
    opacity: 1;
  }
  2% {
    opacity: 1;
  }
  4% {
    opacity: 0.9;
  }
  6% {
    opacity: 0.8;
  }
  8% {
    opacity: 0.7;
  }
  10% {
    opacity: 0.8;
  }
  12% {
    opacity: 0.9;
  }
  14% {
    opacity: 1;
  }
  16% {
    opacity: 0.87;
  }
  18% {
    opacity: 0.73;
  }
  20% {
    opacity: 0.6;
  }
  22% {
    opacity: 0.73;
  }
  24% {
    opacity: 0.87;
  }
  26%, 48% {
    opacity: 1;
  }
  50% {
    opacity: 0.85;
  }
  52% {
    opacity: 0.7;
  }
  54% {
    opacity: 0.85;
  }
  56% {
    opacity: 1;
  }
  58% {
    opacity: 0.8;
  }
  60% {
    opacity: 0.6;
  }
  62% {
    opacity: 0.8;
  }
  64%, 88% {
    opacity: 1;
  }
  90% {
    opacity: 0.85;
  }
  92% {
    opacity: 0.7;
  }
  94% {
    opacity: 0.65;
  }
  96% {
    opacity: 0.6;
  }
  98% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes blink_txt-accent {
  0% {
    opacity: 0.8;
  }
  2% {
    opacity: 1;
  }
  4% {
    opacity: 0.93;
  }
  6% {
    opacity: 0.87;
  }
  8% {
    opacity: 0.8;
  }
  10% {
    opacity: 0.85;
  }
  12% {
    opacity: 0.9;
  }
  14% {
    opacity: 0.95;
  }
  16% {
    opacity: 1;
  }
  18% {
    opacity: 0.95;
  }
  20% {
    opacity: 0.9;
  }
  22% {
    opacity: 0.85;
  }
  24%, 40% {
    opacity: 0.8;
  }
  42% {
    opacity: 0.85;
  }
  44% {
    opacity: 0.9;
  }
  46% {
    opacity: 0.95;
  }
  48% {
    opacity: 1;
  }
  50% {
    opacity: 0.96;
  }
  52% {
    opacity: 0.92;
  }
  54% {
    opacity: 0.88;
  }
  56% {
    opacity: 0.84;
  }
  58% {
    opacity: 0.8;
  }
  60% {
    opacity: 0.84;
  }
  62% {
    opacity: 0.88;
  }
  64% {
    opacity: 0.92;
  }
  66% {
    opacity: 0.96;
  }
  68% {
    opacity: 1;
  }
  70% {
    opacity: 0.96;
  }
  72% {
    opacity: 0.92;
  }
  74% {
    opacity: 0.88;
  }
  76% {
    opacity: 0.84;
  }
  78% {
    opacity: 0.8;
  }
  80% {
    opacity: 0.85;
  }
  82% {
    opacity: 0.9;
  }
  84% {
    opacity: 0.95;
  }
  86% {
    opacity: 1;
  }
  88% {
    opacity: 0.95;
  }
  90% {
    opacity: 0.9;
  }
  92% {
    opacity: 0.85;
  }
  94%, 100% {
    opacity: 0.8;
  }
}
@keyframes blink_txt-accent {
  0% {
    opacity: 0.8;
  }
  2% {
    opacity: 1;
  }
  4% {
    opacity: 0.93;
  }
  6% {
    opacity: 0.87;
  }
  8% {
    opacity: 0.8;
  }
  10% {
    opacity: 0.85;
  }
  12% {
    opacity: 0.9;
  }
  14% {
    opacity: 0.95;
  }
  16% {
    opacity: 1;
  }
  18% {
    opacity: 0.95;
  }
  20% {
    opacity: 0.9;
  }
  22% {
    opacity: 0.85;
  }
  24%, 40% {
    opacity: 0.8;
  }
  42% {
    opacity: 0.85;
  }
  44% {
    opacity: 0.9;
  }
  46% {
    opacity: 0.95;
  }
  48% {
    opacity: 1;
  }
  50% {
    opacity: 0.96;
  }
  52% {
    opacity: 0.92;
  }
  54% {
    opacity: 0.88;
  }
  56% {
    opacity: 0.84;
  }
  58% {
    opacity: 0.8;
  }
  60% {
    opacity: 0.84;
  }
  62% {
    opacity: 0.88;
  }
  64% {
    opacity: 0.92;
  }
  66% {
    opacity: 0.96;
  }
  68% {
    opacity: 1;
  }
  70% {
    opacity: 0.96;
  }
  72% {
    opacity: 0.92;
  }
  74% {
    opacity: 0.88;
  }
  76% {
    opacity: 0.84;
  }
  78% {
    opacity: 0.8;
  }
  80% {
    opacity: 0.85;
  }
  82% {
    opacity: 0.9;
  }
  84% {
    opacity: 0.95;
  }
  86% {
    opacity: 1;
  }
  88% {
    opacity: 0.95;
  }
  90% {
    opacity: 0.9;
  }
  92% {
    opacity: 0.85;
  }
  94%, 100% {
    opacity: 0.8;
  }
}
/* #endregion ANIMATIONS ==============================================================================================================*/
/* STYLES general =====================================================================================================================*/
.page {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-family: "Roboto", sans-serif;
  font-size: 1vw;
  font-weight: 500;
  font-style: italic;
  text-transform: uppercase;
  color: #fff;
  background-color: #002e5e;
  overflow: hidden;
  cursor: pointer;
}

.left-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  z-index: 20;
}

.right-section {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
}

.txt-container {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-48%, -68%);
      -ms-transform: translate(-48%, -68%);
          transform: translate(-48%, -68%);
  width: 100%;
  height: 7.5733333333em;
  font-size: 3.90625em;
  z-index: 11;
}

.logo {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  width: 3.9866666667em;
  height: 0.8666666667em;
  background: url(logo.svg) no-repeat center;
  background-size: contain;
  z-index: 10;
}

.btn-frame {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 13.5018050542em;
  height: 2.6714801444em;
  font-size: 0.3693333333em;
  font-weight: 700;
  color: #32373d;
  text-align: center;
  border-radius: 10em;
  -webkit-box-shadow: 0 0 1.2em #9de604;
          box-shadow: 0 0 1.2em #9de604;
  z-index: 10;
}
.btn-frame::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  padding: 0.35em;
  border-radius: 10em;
  border: 0.1em solid #9ce601;
}

.btn {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: #9ee607;
  border-radius: 10em;
  -webkit-box-shadow: inset 0 0.1em 0 #c5ff8d;
          box-shadow: inset 0 0.1em 0 #c5ff8d;
  overflow: hidden;
}
.btn::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
  background: linear-gradient(116deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 30%, rgb(255, 255, 255) 45%, rgb(255, 255, 255) 55%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%);
  -webkit-animation: move_glare 5s 2s infinite;
          animation: move_glare 5s 2s infinite;
}

.txt-btn {
  position: relative;
  width: 100%;
}

.txt {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-47.5%, -53%);
      -ms-transform: translate(-47.5%, -53%);
          transform: translate(-47.5%, -53%);
  width: 100%;
  font-size: 1.01em;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-align: center;
}

.txt-content {
  font-size: 0.68em;
}

.txt-white {
  opacity: 0;
}

.txt-accent {
  position: relative;
  left: -0.06em;
  color: #85fafa;
  text-shadow: 0 0 0.17em #0079f3, 0 0 0.17em #0079f3, 0 0 0.17em #0079f3, 0 0 0.17em #0079f3, 0 0 0.17em #0079f3;
  -webkit-animation: blink_txt-accent 5s infinite;
          animation: blink_txt-accent 5s infinite;
}

.steps-container {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-46%, 260.5%);
      -ms-transform: translate(-46%, 260.5%);
          transform: translate(-46%, 260.5%);
  font-size: 0.9895833333em;
  width: 47.8947368421em;
  height: 5.6315789474em;
  z-index: 10;
}

.steps {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1em;
}

.step {
  position: relative;
  width: 15.4210526316em;
  height: 5.6315789474em;
}

.step-number-bottom {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-117%, -50%);
      -ms-transform: translate(-117%, -50%);
          transform: translate(-117%, -50%);
  width: 6.5263157895em;
  height: 7.5789473684em;
}

.step-number-top {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-117%, -50%);
      -ms-transform: translate(-117%, -50%);
          transform: translate(-117%, -50%);
  width: 6.5263157895em;
  height: 7.5789473684em;
}

.step-main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0.3em solid #00fefe;
  border-radius: 1.1em;
  background-color: #0f315a;
}

.step-number {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-247%, -50%);
      -ms-transform: translate(-247%, -50%);
          transform: translate(-247%, -50%);
  font-size: 3.9473684211em;
  color: #85fafa;
  text-shadow: 0 0 0.17em #0079f3, 0 0 0.17em #0079f3, 0 0 0.17em #0079f3, 0 0 0.17em #0079f3, 0 0 0.17em #0079f3, 0.06em 0 #fff;
}

.step-txt {
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translate(-3%, -50%);
      -ms-transform: translate(-3%, -50%);
          transform: translate(-3%, -50%);
  width: 60%;
  font-size: 1em;
  text-align: center;
}

.person-container {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-47.8%, -45%);
      -ms-transform: translate(-47.8%, -45%);
          transform: translate(-47.8%, -45%);
  width: 59.53125em;
  height: 60.2604166667em;
}

.person {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.clouds-4 {
  position: absolute;
  top: 4%;
  left: -28%;
  width: 124.4969378828%;
  height: 91.8755401901%;
  -webkit-animation: blink_clouds-4 5s infinite;
          animation: blink_clouds-4 5s infinite;
}

.clouds-1-container {
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-transform: translate(-1%, 7%);
      -ms-transform: translate(-1%, 7%);
          transform: translate(-1%, 7%);
  width: 88.9583333333em;
  height: 47.03125em;
}

.clouds-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: left bottom;
      -ms-transform-origin: left bottom;
          transform-origin: left bottom;
  -webkit-animation: blink_clouds-1 5s infinite;
          animation: blink_clouds-1 5s infinite;
}

.clouds-2-container {
  position: absolute;
  bottom: 0;
  right: 0;
  -webkit-transform: translate(36%, 33%);
      -ms-transform: translate(36%, 33%);
          transform: translate(36%, 33%);
  width: 81.6145833333em;
  height: 65.9375em;
}

.clouds-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: right bottom;
      -ms-transform-origin: right bottom;
          transform-origin: right bottom;
  -webkit-animation: blink_clouds-2 5s infinite;
          animation: blink_clouds-2 5s infinite;
}

.clouds-3-container {
  position: absolute;
  top: 0;
  right: 0;
  -webkit-transform: translate(25%, -1.5%);
      -ms-transform: translate(25%, -1.5%);
          transform: translate(25%, -1.5%);
  width: 65.5208333333em;
  height: 45.78125em;
}

.clouds-3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-animation: blink_clouds-3 5s infinite;
          animation: blink_clouds-3 5s infinite;
}

/* MEDIA QUERIES ======================================================================================================================*/
@media screen and (min-aspect-ratio: 1920/830) {
  .page {
    font-size: 0.92vw;
  }
  .txt-container {
    -webkit-transform: translate(-43.5%, -68%);
        -ms-transform: translate(-43.5%, -68%);
            transform: translate(-43.5%, -68%);
  }
  .clouds-1-container {
    font-size: 1.1em;
    -webkit-transform: translate(-1%, 3%);
        -ms-transform: translate(-1%, 3%);
            transform: translate(-1%, 3%);
  }
  .person-container {
    -webkit-transform: translate(-46.8%, -45.6%);
        -ms-transform: translate(-46.8%, -45.6%);
            transform: translate(-46.8%, -45.6%);
  }
  .clouds-3-container {
    -webkit-transform: translate(20%, -4%);
        -ms-transform: translate(20%, -4%);
            transform: translate(20%, -4%);
  }
  .steps-container {
    -webkit-transform: translate(-42%, 251.5%);
        -ms-transform: translate(-42%, 251.5%);
            transform: translate(-42%, 251.5%);
    font-size: 1.2251148545em;
    width: 48.9130434783em;
    height: 4.6195652174em;
  }
  .step {
    position: relative;
    width: 15.4891304348em;
    height: 4.6195652174em;
  }
  .step-number-bottom {
    -webkit-transform: translate(-152%, -50%);
        -ms-transform: translate(-152%, -50%);
            transform: translate(-152%, -50%);
    width: 4.8913043478em;
    height: 5.9782608696em;
  }
  .step-number-top {
    -webkit-transform: translate(-152%, -50%);
        -ms-transform: translate(-152%, -50%);
            transform: translate(-152%, -50%);
    width: 4.8913043478em;
    height: 5.9782608696em;
  }
  .step-number {
    -webkit-transform: translate(-359%, -50%);
        -ms-transform: translate(-359%, -50%);
            transform: translate(-359%, -50%);
    font-size: 2.9891304348em;
  }
  .step-txt {
    width: 69%;
  }
}
@media screen and (max-aspect-ratio: 1366/900) {
  .page {
    font-size: 1.02vw;
  }
  .txt-container {
    -webkit-transform: translate(-49%, -77%);
        -ms-transform: translate(-49%, -77%);
            transform: translate(-49%, -77%);
    height: 9.9056603774em;
    font-size: 3.8038641518em;
  }
  .txt {
    line-height: 1.43;
  }
  .steps-container {
    -webkit-transform: translate(-47%, 286.5%);
        -ms-transform: translate(-47%, 286.5%);
            transform: translate(-47%, 286.5%);
  }
  .person-container {
    -webkit-transform: translate(-43.6%, -43.6%);
        -ms-transform: translate(-43.6%, -43.6%);
            transform: translate(-43.6%, -43.6%);
    font-size: 1.35em;
  }
  .clouds-3-container {
    -webkit-transform: translate(23%, -1.5%);
        -ms-transform: translate(23%, -1.5%);
            transform: translate(23%, -1.5%);
    font-size: 1.2em;
  }
  .clouds-2-container {
    -webkit-transform: translate(36%, 39%);
        -ms-transform: translate(36%, 39%);
            transform: translate(36%, 39%);
    font-size: 1.5em;
  }
  .clouds-1-container {
    -webkit-transform: translate(-1%, 3%);
        -ms-transform: translate(-1%, 3%);
            transform: translate(-1%, 3%);
    font-size: 1.4em;
  }
}
@media screen and (max-aspect-ratio: 1024/1120) {
  .page {
    font-size: calc(0.35vw + 0.49vh);
  }
  .left-section {
    width: 100%;
  }
  .right-section {
    width: 100%;
  }
  .txt-container {
    -webkit-transform: translate(-50%, -58%);
        -ms-transform: translate(-50%, -58%);
            transform: translate(-50%, -58%);
    height: 13.472972973em;
    font-size: 7.2265625em;
  }
  .txt {
    -webkit-transform: translate(-50%, -134%);
        -ms-transform: translate(-50%, -134%);
            transform: translate(-50%, -134%);
    line-height: 1.2;
  }
  .steps-container {
    -webkit-transform: translate(-50%, 467%);
        -ms-transform: translate(-50%, 467%);
            transform: translate(-50%, 467%);
    font-size: 1.85546875em;
  }
  .person-container {
    -webkit-transform: translate(-20.2%, -26.2%);
        -ms-transform: translate(-20.2%, -26.2%);
            transform: translate(-20.2%, -26.2%);
    font-size: 1.8em;
  }
  .clouds-3-container {
    -webkit-transform: translate(32%, -6.5%);
        -ms-transform: translate(32%, -6.5%);
            transform: translate(32%, -6.5%);
    font-size: 1.83em;
  }
  .clouds-2-container {
    -webkit-transform: translate(42%, 38%);
        -ms-transform: translate(42%, 38%);
            transform: translate(42%, 38%);
    font-size: 1.86em;
  }
  .clouds-1-container {
    -webkit-transform: translate(-1%, 1%);
        -ms-transform: translate(-1%, 1%);
            transform: translate(-1%, 1%);
    font-size: 1.88em;
  }
}
@media screen and (max-aspect-ratio: 1024/1366) {
  .page {
    font-size: 1vw;
  }
}
@media screen and (max-aspect-ratio: 320/568) {
  .page {
    font-size: 1vw;
  }
  .txt-container {
    -webkit-transform: translate(-50%, -136%);
        -ms-transform: translate(-50%, -136%);
            transform: translate(-50%, -136%);
    height: 8.7619047619em;
    font-size: 6.5625em;
  }
  .logo {
    width: 5.1904761905em;
    height: 1.1428571429em;
  }
  .btn-frame {
    font-size: 0.4761904762em;
  }
  .txt {
    -webkit-transform: translate(-50%, -53%);
        -ms-transform: translate(-50%, -53%);
            transform: translate(-50%, -53%);
  }
  .steps-container {
    -webkit-transform: translate(-50%, 56%);
        -ms-transform: translate(-50%, 56%);
            transform: translate(-50%, 56%);
    font-size: 3.571875em;
    width: 13.6482939633em;
    height: 15.2230971129em;
  }
  .steps {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
    height: 100%;
  }
  .step {
    width: 100%;
    height: 3.8495188101em;
  }
  .step-number-bottom {
    -webkit-transform: translate(-151%, -50%);
        -ms-transform: translate(-151%, -50%);
            transform: translate(-151%, -50%);
    width: 4.3744531934em;
    height: 5.3368328959em;
  }
  .step-number-top {
    -webkit-transform: translate(-151%, -50%);
        -ms-transform: translate(-151%, -50%);
            transform: translate(-151%, -50%);
    width: 4.3744531934em;
    height: 5.3368328959em;
  }
  .step-number {
    -webkit-transform: translate(-352%, -50%);
        -ms-transform: translate(-352%, -50%);
            transform: translate(-352%, -50%);
    font-size: 2.7147856518em;
  }
  .step-txt {
    font-size: 0.9em;
    width: 69%;
  }
  .person-container {
    -webkit-transform: translate(-25.4%, -24.5%);
        -ms-transform: translate(-25.4%, -24.5%);
            transform: translate(-25.4%, -24.5%);
    font-size: 2.1em;
  }
  .clouds-3-container {
    -webkit-transform: translate(32%, -14.5%);
        -ms-transform: translate(32%, -14.5%);
            transform: translate(32%, -14.5%);
    font-size: 1.6em;
  }
  .clouds-2-container {
    -webkit-transform: translate(48%, 41%);
        -ms-transform: translate(48%, 41%);
            transform: translate(48%, 41%);
    font-size: 2.9em;
  }
  .clouds-1-container {
    -webkit-transform: translate(-1%, 7%);
        -ms-transform: translate(-1%, 7%);
            transform: translate(-1%, 7%);
    font-size: 2.6em;
  }
}
@media screen and (max-aspect-ratio: 280/635) {
  .page {
    font-size: 1.16vw;
  }
  .txt-container {
    -webkit-transform: translate(-50%, -132%);
        -ms-transform: translate(-50%, -132%);
            transform: translate(-50%, -132%);
  }
  .steps-container {
    -webkit-transform: translate(-50%, 73%);
        -ms-transform: translate(-50%, 73%);
            transform: translate(-50%, 73%);
  }
  .person-container {
    -webkit-transform: translate(-25.5%, -23.5%);
        -ms-transform: translate(-25.5%, -23.5%);
            transform: translate(-25.5%, -23.5%);
    font-size: 2.13em;
  }
  .clouds-3-container {
    -webkit-transform: translate(37.8%, -4%);
        -ms-transform: translate(37.8%, -4%);
            transform: translate(37.8%, -4%);
    font-size: 2.2em;
  }
  .clouds-2-container {
    -webkit-transform: translate(46%, 40%);
        -ms-transform: translate(46%, 40%);
            transform: translate(46%, 40%);
  }
  .clouds-1-container {
    -webkit-transform: translate(-4%, 0.5%);
        -ms-transform: translate(-4%, 0.5%);
            transform: translate(-4%, 0.5%);
    font-size: 2.7em;
  }
}