/*************************************/
/************ SECTION HERO ***********/
/*************************************/
.section-hero {
  padding-bottom: 3.2rem;
}
.hero-animation {
  width: 100%;
  max-width: 125.2rem;
  padding-top: 7.4rem;
  position: relative;
}
.hero-container {
  position: relative;
  height: 0;
  padding-top: 55.91%;
}
/*************************************/
/*************** PART 1 **************/
/*************************************/
.hero-title {
  opacity: 0;
  transition: opacity 400ms ease-in-out;
}
/*************************************/
/*************** PART 2 **************/
/*************************************/
.hero-car {
  width: 87.85%;
  max-width: 87.85%;
  filter: grayscale(100%);
  top: -11.42%;
  left: 4.79%;
  position: absolute;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}
.car-badge {
  top: 32.14%;
  left: 47.92%;
  position: absolute;
  z-index: 2;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}
/*************************************/
/*************** PART 3 **************/
/*************************************/
.lights-wrapper {
  position: absolute;
  top: 5%;
  left: 17%;
  width: 64.13%;
  height: 0;
  padding-top: 56.28%;
  transition: opacity 100ms ease-in-out;
  opacity: 0;
}
.lights-l,
.lights-r {
  width: 70%;
  position: absolute;
  top: 0;
}
.lights-r {
  position: absolute;
  right: -24%;
}
.lights-l {
  position: absolute;
  left: -23%;
}
/*************************************/
/********* Tyre Pressure Box *********/
/*************************************/
.landing-lines {
  width: 42.49%;
  max-width: 42.49%;
  height: 42.28%;
  background: linear-gradient(90deg, #55555529, #00000026);
  border-radius: 4rem;
  backdrop-filter: blur(1rem);
  z-index: 1;
  position: absolute;
  overflow: hidden;
  left: 1.59%;
  bottom: 17.14%;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}
.landing-carline {
  width: 100% !important;
  max-width: 60rem !important;
  height: auto !important;
}
/*************************************/
/************* Delta Box *************/
/*************************************/
.delta-box {
  width: 19.64%;
  max-width: 19.64%;
  padding: 4.2rem 0;
  background: linear-gradient(90deg, #55555529, #00000026);
  border-radius: 4rem;
  backdrop-filter: blur(2rem);
  z-index: 1;
  position: absolute;
  right: 4.79%;
  top: -4.28%;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}
.delta-box-inner {
  width: 60.16%;
  height: 74.81%;
}
.delta {
  position: relative;
}
.delta-bar-brake,
.delta-bar-throttle {
  position: absolute;
  width: 60.16%;
  max-width: 60.16%;
  height: 11.85%;
  top: 9.25%;
  left: 0;
  z-index: -3;
}
.delta-active-brake,
.delta-active-throttle {
  width: 100%;
  max-width: 14.8rem;
}
.visible {
  opacity: 1;
  transform: translate(0, 0);
}
.active {
  display: flex;
  opacity: 1;
  z-index: 5;
}
/*************************************/
/******* ANIMATION SLIDES START ******/
/*************************************/
.section-setup-autoinstall {
  position: relative;
  margin-bottom: 15rem;
}
#main-animation-container {
  width: 100%;
  min-width: 35rem;
}
.animation-container {
  position: relative;
}
.animation-container-features {
  position: relative;
  width: 100%;
  max-width: 60.3rem;
}
.setup-optimizer-wrapper,
.fuel-slide-wrapper,
.pressure-tool-wrapper,
.session-wrapper,
.installer-wrapper {
  position: absolute;
  width: 100%;
  max-width: 90.5rem;
  height: 27.8rem;
}
.setup-optimizer-wrapper-feature,
.fuel-slide-wrapper-feature,
.pressure-tool-wrapper-feature,
.session-wrapper-feature,
.installer-wrapper-feature {
  position: absolute;
  width: 100%;
  max-width: 90.5rem;
  height: 27.8rem;
}
.setup-optimizer-wrapper-feature {
  position: absolute;
  width: 100%;
  max-width: 90.5rem;
  height: 27.8rem;
}
.fuel-slide-wrapper-feature,
.session-wrapper-feature,
.setup-optimizer-wrapper-feature {
  position: absolute;
  width: 100%;
  max-width: 90.5rem;
  height: 27.8rem;
  left: 0;
  top: 9rem;
}
.circles-p1,
.boxes-p1,
.session,
.pressure-tool,
.fuel-slide,
.setup-optimizer {
  width: 100%;
  max-width: 90.5rem;
  height: 27.8rem;
  position: absolute;
  opacity: 0;
  transition: opacity 600ms ease-in-out;
}
.fuel-slide {
  width: 100%;
  max-width: 90.5rem;
  height: 27.8rem;
  position: absolute;
}
.pressure-tool-feature {
  width: 100%;
  max-width: 90.5rem;
  height: 27.8rem;
  position: absolute;
}
.circles-p1.visible,
.boxes-p1.visible,
.session.visible,
.pressure-tool.visible,
.fuel-slide.visible,
.setup-optimizer.visible {
  display: flex;
  opacity: 1;
  transition: opacity 600ms ease-in-out;
}
.side-911-img {
  position: absolute;
  width: 100%;
  max-width: 90.5rem;
  filter: grayscale(100%) blur(1rem);
}
.side-911-img-feature {
  position: absolute;
  width: 100%;
  max-width: 90.5rem;
}
.circle-box {
  width: 100%;
  max-width: 10rem;
  height: 10rem;
  position: relative;
}
.circle-box-feature {
  width: 100%;
  max-width: 10rem;
  height: 10rem;
  position: relative;
  scale: 0.7;
}
.green-circle-outer,
.green-circle-inner,
.green-circle-mid {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}
.green-circle-outer {
  width: 100%;
  height: 100%;
}
.green-circle-inner {
  width: 57.5%;
  height: 57.5%;
}
.green-circle-mid {
  width: 1.6rem;
  height: 1.6rem;
  background-color: #27e88d;
  border-radius: 50%;
}
/*************************************/
/*********** SLIDE HEADINGS **********/
/*************************************/
.setup-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all 0.5s ease;
  white-space: nowrap;
}
.title-box {
  position: relative;
  height: 7rem;
  width: 100%;
  max-width: 52.2rem;
  overflow: hidden;
  transition: opacity 0.5s ease-in-out;
  z-index: 5;
}
.title-box.is-hidden {
  opacity: 0;
}
@keyframes slideInLeft {
  from {
    transform: translate(calc(-50% - 2.3rem), -50%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}
@keyframes slideInRight {
  from {
    transform: translate(calc(-50% + 2.3rem), -50%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}
@keyframes slideInTop {
  from {
    transform: translate(-50%, calc(-50% - 2.3rem));
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}
@keyframes slideInBottom {
  from {
    transform: translate(-50%, calc(-50% + 2.3rem));
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}
.slide-in-left {
  animation: slideInLeft 0.6s forwards;
}
.slide-in-right {
  animation: slideInRight 0.6s forwards;
}
.slide-in-top {
  animation: slideInTop 0.6s forwards;
}
.slide-in-bottom {
  animation: slideInBottom 0.6s forwards;
}
/*************************************/
/*** SLIDE 1 - SETUP AUTO INSTALLER **/
/*************************************/
.loader {
  font-family: "Satoshi Medium", sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.4rem;
  width: 100%;
  max-width: 41.2rem;
  height: 4.2rem;
  position: absolute;
  top: 20rem;
  z-index: 9;
  display: flex;
  opacity: 0;
  transition: 0.3s ease-out all;
}
.loader.visible {
  opacity: 1;
  pointer-events: auto;
}
.install-loader {
  width: 100%;
  max-width: 41.2rem;
  height: 1.6rem;
  border-radius: 5rem;
  background-color: #ffffff30;
  overflow: hidden;
  position: relative;
}
.fill-loader {
  height: 100%;
  width: 0%;
  background-color: #27e88d;
  border-radius: 5rem 0 0 5rem;
  position: absolute;
  left: 0;
  top: 0;
}
.circle-wing,
.circle-rear,
.circle-front {
  position: absolute;
  transform-origin: center center;
}
.circle-wing {
  top: 0;
  left: 2.5rem;
  z-index: 1;
}
.circle-front {
  top: 16rem;
  right: 12rem;
  z-index: 1;
}
.circle-rear {
  top: 16rem;
  left: 19rem;
  z-index: 1;
}
.circle-wing-feature,
.circle-rear-feature,
.circle-front-feature {
  position: absolute;
  transform-origin: center center;
}
.circle-wing-feature {
  top: 3rem;
  left: 0;
  z-index: 1;
}
.circle-front-feature {
  top: 13.8rem;
  right: 6.5rem;
  z-index: 1;
}
.circle-rear-feature {
  top: 13.8rem;
  left: 10.8rem;
  z-index: 1;
}
.wing-lvl-box {
  position: absolute;
  width: 100%;
  max-width: 18.7rem;
  height: 5.8rem;
  bottom: 25.5rem;
  left: 16rem;
  border-radius: 2rem;
}
.rear-car-box {
  position: absolute;
  width: 100%;
  max-width: 21rem;
  height: 7.2rem;
  top: 24rem;
  left: 30rem;
  border-radius: 2rem;
  backdrop-filter: blur(0.5rem);
  z-index: 1;
}
.front-car-box {
  position: absolute;
  width: 100%;
  max-width: 21rem;
  height: 7.2rem;
  top: 7.5rem;
  right: -9rem;
  border-radius: 2rem;
  backdrop-filter: blur(0.5rem);
  z-index: 1;
}
.wing-lvl-box-feature {
  position: absolute;
  width: 100%;
  max-width: 18.7rem;
  height: 5.8rem;
  top: 1.5rem;
  left: 8rem;
  border-radius: 2rem;
  scale: 0.7;
}
.rear-car-box-feature {
  position: absolute;
  width: 100%;
  max-width: 21rem;
  height: 7.2rem;
  top: 20rem;
  left: 16.5rem;
  border-radius: 2rem;
  backdrop-filter: blur(0.5rem);
  z-index: 1;
  scale: 0.7;
}
.front-car-box-feature {
  position: absolute;
  width: 100%;
  max-width: 21rem;
  height: 7.2rem;
  top: 8rem;
  right: -8rem;
  border-radius: 2rem;
  backdrop-filter: blur(0.5rem);
  z-index: 1;
  scale: 0.7;
}
@keyframes rotateClockwise {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.rotate {
  animation: rotateClockwise 10s linear infinite;
}
@keyframes rotateAntiClockwise {
  from {
    transform: translate(-50%, -50%) rotate(360deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}
.rotateAnti {
  animation: rotateAntiClockwise 10s linear infinite;
}
/*************************************/
/***** SLIDE 2 - TELEMETRY DATA ******/
/*************************************/
.session {
  position: relative;
}
.session-img {
  width: 2rem;
  height: 2rem;
}
.session-stats {
  position: absolute;
  width: 100%;
  max-width: 29.9rem;
  height: 10.6rem;
  top: -11rem;
  left: -6rem;
  z-index: 1;
}
.session-lines {
  width: 100%;
  max-width: 24.1rem;
  height: 16.6rem;
  position: absolute;
  backdrop-filter: blur(1rem);
  border-radius: 1.6rem;
  top: 17rem;
  left: -5.5rem;
  z-index: 9;
}
.session-data-feature {
  position: absolute;
  width: 100%;
  max-width: 34.7rem;
  height: 22.7rem;
  border-radius: 2rem;
  backdrop-filter: blur(1rem);
  top: -5rem;
  right: -10rem;
  z-index: 1;
  scale: 0.5;
}
.session-stats-feature {
  position: absolute;
  width: 100%;
  max-width: 29.9rem;
  height: 10.6rem;
  top: -3rem;
  left: -8rem;
  z-index: 1;
  scale: 0.6;
}
.session-lines-feature {
  width: 100%;
  max-width: 24.1rem;
  height: 16.6rem;
  position: absolute;
  backdrop-filter: blur(1rem);
  border-radius: 1.6rem;
  top: 13rem;
  left: -6rem;
  z-index: 9;
  scale: 0.6;
}
.session-data {
  position: absolute;
  width: 100%;
  max-width: 34.7rem;
  height: 22.7rem;
  border-radius: 2rem;
  backdrop-filter: blur(1rem);
  top: -12.5rem;
  right: -12rem;
  z-index: 1;
}
.session-numbers {
  font-size: 0.8rem;
}
.stats-box {
  width: 6rem;
  height: 6.2rem;
  background-color: #232326;
  border-radius: 1.6rem;
}
.stats-box-opti {
  width: 6.7rem;
  height: 6.2rem;
  background-color: #27e88d1a;
  border-radius: 1.6rem;
}
.session-opti {
  width: 6rem;
  height: 6.2rem;
  background-color: #27e88d1a;
  border-radius: 1.6rem;
}
.box1,
.box2,
.box3,
.box4 {
  opacity: 0;
  transition: opacity 0.7s ease-in;
}
.box1-feature,
.box2-feature,
.box3-feature,
.box4-feature {
  opacity: 0;
  transition: opacity 0.7s ease-in;
}
.box1.visible,
.box2.visible,
.box3.visible,
.box4.visible {
  z-index: 10;
  opacity: 1;
}
.box1-feature.visible,
.box2-feature.visible,
.box3-feature.visible,
.box4-feature.visible {
  z-index: 10;
  opacity: 1;
}
/*************************************/
/****** SLIDE 3 - TYRE PRESSURE ******/
/*************************************/
.psi-box.visible {
  display: flex;
  opacity: 1;
  transition: opacity 0.9s ease-in;
}
.psi-box {
  width: 9.5rem;
  height: 7rem;
  border-radius: 2rem;
  backdrop-filter: blur(0.8rem);
  position: absolute;
  top: 24rem;
  left: 34rem;
  z-index: 1;
  position: absolute;
  opacity: 0;
  transition: opacity 0.9s ease-in;
}
.psi-box-feature {
  width: 9.5rem;
  height: 7rem;
  border-radius: 2rem;
  backdrop-filter: blur(0.8rem);
  position: absolute;
  top: 20rem;
  left: 21rem;
  z-index: 1;
  position: absolute;
  scale: 0.7;
}
.large-circle-box {
  position: absolute;
  top: 12rem;
  left: 14rem;
}
.large-circle-box-feature {
  position: absolute;
  top: 9.5rem;
  left: 6.5rem;
  scale: 0.7;
}
.large-circle-wrapper {
  position: relative;
  width: 18.5rem;
  height: 18.5rem;
}
.large-red-circle {
  width: 100%;
  height: 100%;
}
.large-white-circle {
  width: 73.5%;
  height: 73.5%;
}
.large-red-circle,
.large-white-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.large-red-circle circle {
  stroke: #ff3c22;
  transition: stroke 0.7s ease-in-out, stroke-dasharray 0.5s ease;
}
@keyframes rotateFast {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.rotateFast {
  animation: rotateFast 1s linear infinite;
}
/*************************************/
/***** SLIDE 4 - FUEL CALCULATOR *****/
/*************************************/
.fuel-box {
  width: 31.3rem;
  height: 7.5rem;
  border-radius: 2rem;
  backdrop-filter: blur(0.8rem);
  position: absolute !important;
  top: 25.5rem !important;
  left: -6rem;
  z-index: 9;
}
.fuel-needed {
  display: flex;
  gap: 2rem;
  flex-direction: column;
  text-align: center;
  padding: 3.3rem;
  position: absolute !important;
  background: linear-gradient(90deg, #55555529, #00000026);
  border-radius: 2rem;
  backdrop-filter: blur(0.8rem);
  top: -13rem !important;
  right: 6rem;
  z-index: 9;
}
.fuel-box-feature {
  width: 31.3rem;
  height: 7.5rem;
  border-radius: 2rem;
  backdrop-filter: blur(0.8rem);
  position: absolute !important;
  top: 20rem !important;
  left: -9rem;
  z-index: 9;
  scale: 0.7;
}
.fuel-needed-feature {
  display: flex;
  gap: 2rem;
  flex-direction: column;
  text-align: center;
  padding: 4rem 3.3rem;
  position: absolute !important;
  background: linear-gradient(90deg, #55555529, #00000026);
  border-radius: 2rem;
  backdrop-filter: blur(0.8rem);
  top: -9rem !important;
  right: 2rem;
  z-index: 9;
  scale: 0.7;
}
.fuel-img {
  width: 2rem;
  height: 2rem;
}
.fuel-bar {
  width: 14.8rem;
  height: 1rem;
  border-radius: 2.8rem;
  background-color: #ffffff30;
  overflow: hidden;
  position: relative;
}
.fuel-bar-feature {
  width: 14.8rem;
  height: 1rem;
  border-radius: 2.8rem;
  background-color: #ffffff30;
  overflow: hidden;
  position: relative;
}
.fuel-loader {
  height: 100%;
  width: 0%;
  background-color: #27e88d;
  border-radius: 2.8rem 0 0 2.8rem;
  position: absolute;
  left: 0;
  top: 0;
  transition: width 0.2s linear;
}
.fuel-loader-feature {
  height: 100%;
  width: 0;
  background-color: #27e88d;
  border-radius: 2.8rem 0 0 2.8rem;
  position: absolute;
  left: 0;
  top: 0;
  transition: width 1500ms linear;
}
.is-filled {
  width: 100%;
}
/*************************************/
/***** SLIDE 5 - SETUP OPTIMIZER *****/
/*************************************/
.setup-wing-box,
.setup-spring-box,
.setup-wing-box-feature,
.setup-spring-box-feature {
  position: absolute;
  border-radius: 2rem;
  backdrop-filter: blur(2rem);
  z-index: 9;
}
.setup-wing-box {
  top: -11.9rem;
  left: 13rem;
  width: 18.7rem;
  height: 16.2rem;
}
.setup-spring-box {
  top: 0.5rem;
  right: -10rem;
  width: 22.9rem;
  height: 16.3rem;
}
.setup-wing-box-feature {
  top: -6rem;
  left: 6rem;
  width: 18.7rem;
  height: 16.2rem;
  scale: 0.7;
}
.setup-spring-box-feature {
  top: 1.5rem;
  right: -11rem;
  width: 22.9rem;
  height: 16.3rem;
  scale: 0.7;
}
.spring-rate {
  width: 19.3rem;
  height: 10.8rem;
}
.wing-level {
  width: 14.3rem;
  height: 13.2rem;
}
.opti-img {
  width: 2.4rem;
  height: 2.4rem;
}
/*************************************/
/*********** SLIDE NUMBERS ***********/
/*************************************/
.installer-line {
  width: 7.1rem;
  height: 0.2rem;
  background-color: #ffffff;
  border-radius: 5rem;
}
.installer:hover {
  opacity: 1 !important;
  cursor: pointer;
}
.installer-line:hover,
.installer:hover .installer-line {
  background-color: #27e88d;
}
.wing-box {
  width: 10.84rem;
  height: 9.4rem;
  border-radius: 2rem;
  backdrop-filter: blur(0.8rem);
  z-index: 1;
  top: 7.83rem;
  left: 0;
}
.front-box {
  width: 13.28rem;
  height: 9.45rem;
  border-radius: 2rem;
  backdrop-filter: blur(0.8rem);
  z-index: 1;
  top: 14.5rem;
  left: 0;
}
.carousel-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel-scroll::-webkit-scrollbar {
  display: none;
}