*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --black: #000000;
  --white: #ffffff;
  --charcoal: #3a3a3c;
  --orange-light: #febe10;
  --orange: #eca920;
  --contentHeight: 160px;
  --dotsHeight: 35px;
  --systemUI: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.reset, .ppl-app .ppl-info-item h3,
.ppl-app .ppl-info-item p {
  margin: 0;
  padding: 0;
}

.ppl-app {
  width: 100%;
  padding: 5rem 0;
  position: relative;
  font-family: var(--systemUI);
  overflow: hidden;
}
.ppl-app::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--black) url(../images/background.jpg) no-repeat center center;
  background-size: cover;
}
@media all and (max-width: 900px) {
  .ppl-app::before {
    background: var(--black) url(../images/background-mobile-tiled.jpg) repeat center top;
    background-size: 50%;
  }
}
@media all and (max-width: 900px) {
  .ppl-app {
    padding: 0 5rem;
  }
}
.ppl-app .ppl-info {
  width: 100%;
  display: flex;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0;
  background: var(--charcoal);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 25%, rgb(58, 58, 60) 25%, rgb(58, 58, 60) 75%, rgba(217, 217, 218, 0) 75%);
  color: var(--white);
  position: relative;
}
.ppl-app .ppl-info::before {
  --thickness: 0.5rem;
  content: "";
  background: var(--orange-light);
  width: 87.5%;
  height: var(--thickness);
  position: absolute;
  top: calc(50% - var(--thickness) / 2);
}
@media all and (max-width: 900px) {
  .ppl-app .ppl-info::before {
    --thickness: 0.5rem;
    width: var(--thickness);
    height: 100%;
    top: 0;
    left: calc(50% - var(--thickness) / 2);
    bottom: 0;
    display: none;
  }
}
@media all and (max-width: 900px) {
  .ppl-app .ppl-info {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 3rem 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 10%, rgb(58, 58, 60) 10%, rgb(58, 58, 60) 90%, rgba(217, 217, 218, 0) 90%);
  }
}
.ppl-app .ppl-info-item {
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
  text-align: center;
  position: relative;
  transition: all 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
.ppl-app .ppl-info-item:hover .ppl-info-count, .ppl-app .ppl-info-item:hover .ppl-info-content {
  scale: 1.05;
}
@media all and (max-width: 800px) {
  .ppl-app .ppl-info-item:hover .ppl-info-count, .ppl-app .ppl-info-item:hover .ppl-info-content {
    scale: 1;
  }
}
.ppl-app .ppl-info-item:hover .ppl-info-content {
  scale: 1.1;
}
@media all and (max-width: 800px) {
  .ppl-app .ppl-info-item:hover .ppl-info-content {
    scale: 1;
  }
}
.ppl-app .ppl-info-item:hover .number {
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.85);
}
.ppl-app .ppl-info-item:hover .number::before {
  transform: translateY(-8px);
}
@media all and (max-width: 800px) {
  .ppl-app .ppl-info-item:hover .number::before {
    transform: translateY(0);
  }
}
.ppl-app .ppl-info-item:hover .number::after {
  transform: translateY(8px);
}
@media all and (max-width: 800px) {
  .ppl-app .ppl-info-item:hover .number::after {
    transform: translateY(0);
  }
}
.ppl-app .ppl-info-item::after {
  --thickness: 0.5rem;
  --width: 50px;
  content: "";
  background: var(--orange-light);
  width: var(--width);
  height: var(--thickness);
  display: block;
  position: absolute;
  top: calc(50% + 1rem);
  right: calc(var(--width) / 2 * -1);
}
@media all and (max-width: 1500px) {
  .ppl-app .ppl-info-item::after {
    --width: 25px;
  }
}
@media all and (max-width: 900px) {
  .ppl-app .ppl-info-item::after {
    display: none;
  }
}
.ppl-app .ppl-info-item[data-id="8"]:after, .ppl-app .ppl-info-item[data-id="9"]:after {
  display: none;
}
.ppl-app .ppl-info-item[data-id="9"] {
  justify-content: center;
}
.ppl-app .ppl-info-item:nth-child(odd) .ppl-info-count {
  order: 2;
}
@media all and (max-width: 900px) {
  .ppl-app .ppl-info-item:nth-child(odd) .ppl-info-count {
    order: 1;
  }
}
.ppl-app .ppl-info-item:nth-child(odd) .ppl-info-content {
  order: 1;
  padding-bottom: var(--dotsHeight);
}
@media all and (max-width: 900px) {
  .ppl-app .ppl-info-item:nth-child(odd) .ppl-info-content {
    padding-bottom: 0;
  }
}
.ppl-app .ppl-info-item:nth-child(odd) .number::after {
  display: none;
}
@media all and (max-width: 900px) {
  .ppl-app .ppl-info-item:nth-child(odd) .number::after {
    display: block;
  }
}
.ppl-app .ppl-info-item:nth-child(even) .ppl-info-count {
  margin-top: var(--contentHeight);
  order: 1;
}
@media all and (max-width: 900px) {
  .ppl-app .ppl-info-item:nth-child(even) .ppl-info-count {
    margin-top: 0;
  }
}
.ppl-app .ppl-info-item:nth-child(even) .ppl-info-content {
  order: 2;
  padding-top: calc(var(--dotsHeight) * 2);
}
.ppl-app .ppl-info-item:nth-child(even) .number::before {
  display: none;
}
.ppl-app .ppl-info-item .ppl-info-count {
  transition: all 0.4s ease;
}
.ppl-app .ppl-info-item .ppl-info-content {
  padding: 1.25rem 0.625rem;
  margin: 0 auto;
  height: var(--contentHeight);
  text-align: center;
  transition: all 0.4s ease;
}
@media all and (max-width: 900px) {
  .ppl-app .ppl-info-item .ppl-info-content {
    padding: var(--dotsHeight) 0.625rem 0 !important;
    height: auto;
    width: 80%;
  }
}
.ppl-app .ppl-info-item .number {
  --circleSize: 7rem;
  width: var(--circleSize);
  height: var(--circleSize);
  margin: 0 auto;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgb(238, 72, 36);
  background: linear-gradient(90deg, rgb(238, 72, 36) 0%, rgb(240, 143, 46) 100%);
  color: white;
  font-size: 2.75rem;
  text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.5);
  position: relative;
  transition: all 0.25s ease;
}
@media all and (max-width: 1500px) {
  .ppl-app .ppl-info-item .number {
    --circleSize: 5rem;
    font-size: 2rem;
  }
}
@media all and (max-width: 900px) {
  .ppl-app .ppl-info-item .number {
    --circleSize: 7rem;
    font-size: 2.75rem;
  }
}
.ppl-app .ppl-info-item .number::before, .ppl-app .ppl-info-item .number::after {
  content: "";
  width: 8px;
  height: 35px;
  display: block;
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iNzAiIHZpZXdCb3g9IjAgMCAxNiA3MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSI4IiBjeT0iOCIgcj0iOCIgZmlsbD0iI0VDQTkyMCIvPjxjaXJjbGUgY3g9IjgiIGN5PSIzNSIgcj0iOCIgZmlsbD0iI0VDQTkyMCIvPjxjaXJjbGUgY3g9IjgiIGN5PSI2MiIgcj0iOCIgZmlsbD0iI0VDQTkyMCIvPjwvc3ZnPgo=") no-repeat center center;
  background-size: 50%;
  position: absolute;
  transition: all 0.4s ease;
  transition: translateY(0);
}
.ppl-app .ppl-info-item .number::before {
  top: -35px;
}
@media all and (max-width: 900px) {
  .ppl-app .ppl-info-item .number::before {
    display: none;
  }
}
.ppl-app .ppl-info-item .number::after {
  top: 100%;
}
.ppl-app .ppl-info-item h3,
.ppl-app .ppl-info-item p {
  line-height: normal;
  color: var(--white);
}
.ppl-app .ppl-info-item h3 {
  font-family: var(--systemUI);
  font-size: 1rem;
  text-transform: uppercase;
  font-style: italic;
  font-weight: 700;
  margin-bottom: 0.375rem;
}
@media all and (max-width: 1500px) {
  .ppl-app .ppl-info-item h3 {
    font-size: 0.875rem;
  }
}
@media all and (max-width: 900px) {
  .ppl-app .ppl-info-item h3 {
    font-size: 1.25rem;
  }
}
.ppl-app .ppl-info-item p {
  font-family: var(--systemUI);
  font-size: 0.875rem;
}
@media all and (max-width: 1500px) {
  .ppl-app .ppl-info-item p {
    font-size: 0.75rem;
  }
}
@media all and (max-width: 900px) {
  .ppl-app .ppl-info-item p {
    font-size: 0.875rem;
  }
}

.clickable {
  cursor: pointer;
}
.clickable h3 {
  text-decoration: underline;
  position: relative;
}
.clickable h3::after {
  --size: 1rem;
  content: "";
  background: url(../images/svg/arrow-up-right-from-square-solid.svg) no-repeat center center;
  background-size: contain;
  display: inline-block;
  width: var(--size);
  height: var(--size);
  position: relative;
  filter: invert(1);
  margin-left: 0.375rem;
}

a.ppl-motorcycle-cta {
  width: 100%;
  padding: 1.25rem 0 0;
  text-decoration: none;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-end;
  justify-content: center;
  background: var(--charcoal);
  background-size: 10%;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  z-index: 10;
}
a.ppl-motorcycle-cta::before {
  --size: 8px;
  content: "";
  width: 100%;
  height: var(--size);
  background: var(--orange);
  display: block;
  position: absolute;
  top: calc(50% - var(--size) / 2);
  left: 0;
  right: 0;
}
a.ppl-motorcycle-cta .ppl-animation-track {
  width: 100%;
  height: 8rem;
  position: relative;
  overflow-x: hidden;
  z-index: 100;
}
a.ppl-motorcycle-cta .ppl-animation-track img {
  display: block;
  margin: 1rem auto;
}
a.ppl-motorcycle-cta .ppl-animation-content {
  position: relative;
  z-index: 100;
}
a.ppl-motorcycle-cta .ppl-animation-content h3 {
  width: 100%;
  display: block;
  text-align: center;
  padding-bottom: 1rem;
  color: var(--white);
  font-size: 1.5rem;
  padding: 0 1.25rem;
}
a.ppl-motorcycle-cta .ppl-animation-content .ppl-mini-num {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  gap: 1rem;
  display: none;
}
@media all and (max-width: 600px) {
  a.ppl-motorcycle-cta .ppl-animation-content .ppl-mini-num {
    gap: 0.5rem;
  }
}
a.ppl-motorcycle-cta .ppl-animation-content .ppl-mini-num li {
  --circleSize: 4rem;
  width: var(--circleSize);
  height: var(--circleSize);
  margin: 0 auto;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgb(238, 72, 36);
  background: linear-gradient(90deg, rgb(238, 72, 36) 0%, rgb(240, 143, 46) 100%);
  color: white;
  font-size: 2rem;
  text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.5);
  position: relative;
  transition: all 0.25s ease;
}
@media all and (max-width: 600px) {
  a.ppl-motorcycle-cta .ppl-animation-content .ppl-mini-num li {
    --circleSize: 2.5rem;
    font-size: 1rem;
  }
}
a.ppl-motorcycle-cta:hover::before, a.ppl-motorcycle-cta:hover::after {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease;
}
a.ppl-motorcycle-cta::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  background: rgba(0, 0, 0, 0.25);
  transition: all 0.4s linear;
}

@-webkit-keyframes moveMotorcycle {
  0% {
    left: -50%;
  }
  25% {
    transform: rotate(0deg);
  }
  35% {
    transform: rotate(-15deg);
  }
  85% {
    transform: rotate(0deg);
  }
  100% {
    left: 100%; /* Loop back to off-screen to the left */
  }
}

@keyframes moveMotorcycle {
  0% {
    left: -50%;
  }
  25% {
    transform: rotate(0deg);
  }
  35% {
    transform: rotate(-15deg);
  }
  85% {
    transform: rotate(0deg);
  }
  100% {
    left: 100%; /* Loop back to off-screen to the left */
  }
}
.ppl-modal {
  display: none;
  position: fixed;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.65);
  font-family: var(--systemUI);
}
.ppl-modal-content {
  background-color: var(--charcoal);
  border-radius: 10px;
  color: var(--white);
  margin: 0 auto;
  padding: 1.25rem;
  width: 100%;
  max-width: calc(600px - 1.25rem);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.ppl-modal-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.ppl-modal-close:hover, .ppl-modal-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
/*# sourceMappingURL=style.css.map */