:root {
  --color-lightblue: #61affd;
  --color-darkblue: #034ea2;
  --color-yellow: #ffcb05;
  --color-red: #c72127;
  --color-darkred: #990508;
  --color-darkgray: #161616;
  --color-gray: #272727;
}
body {
  background: url("../../../../../wp-content/uploads/2020/08/tile-large.svg") center center repeat #61affd;
  background-size: 900px auto;
}
@keyframes clouds-move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes clouds-move-mobile {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-150%);
  }
}
.cloud-animation {
  position: relative;
  overflow: hidden;
}
.cloud-animation .elementor-column {
  width: 100% !important;
}
.cloud-animation .bg-clouds {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.cloud-animation .bg-clouds:before, .cloud-animation .bg-clouds:after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  width: 100%;
  background-size: calc(100% + 1px) auto;
}
.cloud-animation .bg-clouds:before {
  left: 0;
}
.cloud-animation .bg-clouds:after {
  left: 100%;
}
.cloud-animation .bg-clouds.bg-clouds-big {
  z-index: 3;
  opacity: 0.8;
  animation: clouds-move 35s linear infinite;
  pointer-events: none;
}
.cloud-animation .bg-clouds.bg-clouds-big:before, .cloud-animation .bg-clouds.bg-clouds-big:after {
  background-image: url("../../../../../wp-content/uploads/2020/08/tile-large.svg");
}
.cloud-animation .bg-clouds.bg-clouds-small {
  z-index: 1;
  opacity: 0.9;
  animation: clouds-move 70s linear infinite;
}
.cloud-animation .bg-clouds.bg-clouds-small:before, .cloud-animation .bg-clouds.bg-clouds-small:after {
  background-image: url("../../../../../wp-content/uploads/2020/08/tile-small.svg");
}
.cloud-animation .fg {
  z-index: 2;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 50px 0 50px;
}
.cloud-animation.night {
  background: #01101f;
}
.cloud-animation.night .bg-clouds {
  opacity: 0.2;
}
@media (max-width: 900px) {
  .cloud-animation .bg-clouds:before, .cloud-animation .bg-clouds:after {
    width: 150%;
  }
  .cloud-animation .bg-clouds:after {
    left: 150%;
  }
  .cloud-animation .bg-clouds.bg-clouds-big {
    animation: clouds-move-mobile 35s linear infinite;
  }
  .cloud-animation .bg-clouds.bg-clouds-small {
    animation: clouds-move-mobile 70s linear infinite;
  }
}
.header-clouds.cloud-animation .bg-clouds:before, .header-clouds.cloud-animation .bg-clouds:after {
  background-size: calc(25% + 1px) auto;
}
.header-clouds.cloud-animation .fg {
  min-height: 0;
  padding: 10px 0;
}
.header-clouds.cloud-animation .fg .logo img {
  margin: 10px 0;
  width: 140px;
}
@media (max-width: 1500px) {
  .header-clouds.cloud-animation .bg-clouds:before, .header-clouds.cloud-animation .bg-clouds:after {
    background-size: calc(50% + 1px) auto;
  }
}
.button-red a, .button-blue a {
  line-height: 1.4;
  background-position: center center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  transition: transform 0.2s;
}
.button-red a {
  background-image: url("../../../../../wp-content/uploads/2020/08/button-red.svg");
}
.button-blue a {
  background-image: url("../../../../../wp-content/uploads/2020/08/button-blue.svg");
}
.boy-stats {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background-image: url("../../../../../wp-content/uploads/2020/08/stat-chart.png");
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.boy-stats > svg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}
.tip {
  position: absolute;
  bottom: -69px;
  left: calc(50% + 534px);
  width: 68px;
  height: 114px;
  transition: opacity 0.2s;
}
.tip:before {
  position: relative;
  z-index: 2;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../../../../../wp-content/uploads/2021/04/tip.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: auto 100%;
  transform-origin: 50% 80%;
  transform: translateZ(0);
  transition: transform 0.2s;
  cursor: pointer;
}
.tip:hover:before {
  transform: translateY(-20px) rotate(-18deg);
}
.tip.squishing:before {
  transform: translateY(-20px) rotate(-18deg) scale(0.7, 1);
}
.tip .splat {
  z-index: 1;
  position: absolute;
  top: -234px;
  left: -250px;
  width: 506px;
  height: 448px;
  pointer-events: none;
  transition: transform 1s;
}
.tip .splat .splat-inner {
  opacity: 0.9;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../../../../../wp-content/uploads/2021/04/tip-splat.png");
  background-position: center top;
  background-repeat: no-repeat;
  transform: scale(0.01, 0.01);
  transition: 1s;
}
@media (max-width: 1220px) {
  .tip {
    transform: translate(-60px);
  }
}
@media (max-width: 1070px) {
  .tip {
    opacity: 0;
  }
}
