.carousel-button{
    position: absolute;
    background:none;
    border: none;
    font-size: 2rem;
    z-index: 999;
    top:50%;
    transform: translateY(-50%);
    color: rgba(255,255,255, .8);
    cursor: pointer;
    border-radius: .25rem;
    padding:0.5rem;
    background-color: rgba(0, 0, 0, 0.5);
    font-family: 'Tilt Neon', sans-serif;
    text-shadow: 3px 3px 4px black;
    width: 3rem;
}

.carousel-button:hover{
    color: rgb(255, 255, 255);
    background-color:rgba(253, 131, 0, 0.853);
}

@media (max-width:800px){
    .carousel-button{
        top:60%;
        transform: translateY(-60%);

    }
}

.carousel-button.prev{
    left:1rem;
}

.carousel-button.next{
    right: 1rem;
}

.carousel > ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

.bgPulse{
    width: 100%;
    height: 100%;
    position: relative;
}
.bgPulse span{
    position: absolute;
    width: 80px;
    height: 80px;
    background-color: #FFD93D;
}
.bgPulse span:nth-child(3n+1){
    background: transparent;
    border: 5px solid #FF8400;
}

.section-13 .bgPulse span{
  background-color: #5F8D4E;
}
.section-13 .bgPulse span:nth-child(3n+1){
  border: 5px solid #5F8D4E;
}

.section-13-non-desktop .bgPulse-background{
  z-index: 1;
}
.section-13-non-desktop .bgPulse span{
  background-color: #285430;
}
.section-13-non-desktop .bgPulse span:nth-child(3n+1){
  border: 5px solid #285430;
}


.section-6 .bgPulse span{
  background-color: white;
}
.section-6 .bgPulse span:nth-child(3n+1){
  border: 5px solid white;
}

.bgPulse span:nth-child(1){
    top:50%;
    left: 20%;
    animation: animate 10s linear infinite;
}

.bgPulse span:nth-child(2){
    top:80%;
    left: 40%;
    animation: animate 12s linear infinite;
}

.bgPulse span:nth-child(3){
    top:10%;
    left: 65%;
    animation: animate 15s linear infinite;
}

.bgPulse span:nth-child(4){
    top:50%;
    left: 70%;
    animation: animate 6s linear infinite;
}

.bgPulse span:nth-child(5){
    top:10%;
    left: 30%;
    animation: animate 9s linear infinite;
}

.bgPulse span:nth-child(6){
    top:90%;
    left: 95%;
    animation: animate 8s linear infinite;
}

.bgPulse span:nth-child(7){
    top:80%;
    left: 5%;
    animation: animate 5s linear infinite;
}

.bgPulse span:nth-child(8){
    top:35%;
    left: 50%;
    animation: animate 14s linear infinite;
}

.bgPulse span:nth-child(9){
    top:5%;
    left: 5%;
    animation: animate 11s linear infinite;
}

.bgPulse span:nth-child(10){
    top:25%;
    left: 90%;
    animation: animate 10s linear infinite;
}

.section-10 .bgPulse span{
  position: absolute;
  width: 80px;
  height: 80px;
  background-color: #4690d6;
}
.section-10 .bgPulse span:nth-child(3n+1){
  background: transparent;
  border: 5px solid #295680;
}


@keyframes animate{
    0%{
        transform: scale(0) translateY(0) rotate(0deg);
        opacity: 1;
    }
    100%{
        transform:  scale(1) translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}

.scroller[data-speed="fast"] {
    --_animation-duration: 20s;
  }
  
  .scroller[data-speed="slow"] {
    --_animation-duration: 60s;
  }
  
  @keyframes scroll {
    to {
      transform: translate(calc(-50% - 0.5rem));
    }
  }

  @keyframes moveAnimation {
    0% {
      left: 0;
    }
    10% {
      left: 0;
    }
    30% {
      left: 300px;
    }
    40% {
      left: 300px;
    }
    60% {
      left: 600px;
    }
    70% {
      left: 600px;
    }
    90% {
      left: 0;
    }
    100% {
      left: 0;
    }
  }

  @media (max-width:1000px){
    @keyframes moveAnimation {
        0% {
          left: 0;
        }
        10% {
          left: 0;
        }
        30% {
          left: 200px;
        }
        40% {
          left: 200px;
        }
        60% {
          left: 400px;
        }
        70% {
          left: 400px;
        }
        90% {
          left: 0;
        }
        100% {
          left: 0;
        }
      }
  }
  
  @media (max-width:700px){
    @keyframes moveAnimation {
        0% {
          left: 0;
        }
        10% {
          left: 0;
        }
        30% {
          left: 150px;
        }
        40% {
          left: 150px;
        }
        60% {
          left: 300px;
        }
        70% {
          left: 300px;
        }
        90% {
          left: 0;
        }
        100% {
          left: 0;
        }
      }
  }
  
  @media (max-width:450px){
    @keyframes moveAnimation {
        0% {
          left: 0;
        }
        10% {
          left: 0;
        }
        30% {
          left: 100px;
        }
        40% {
          left: 100px;
        }
        60% {
          left: 200px;
        }
        70% {
          left: 200px;
        }
        90% {
          left: 0;
        }
        100% {
          left: 0;
        }
      }
  }
  
  @media (max-width:350px){
    @keyframes moveAnimation {
        0% {
          left: 0;
        }
        10% {
          left: 0;
        }
        30% {
          left: 75px;
        }
        40% {
          left: 75px;
        }
        60% {
          left: 150px;
        }
        70% {
          left: 150px;
        }
        90% {
          left: 0;
        }
        100% {
          left: 0;
        }
      }
  }


.section-7 .bgPulse span{
    position: absolute;
    width: 80px;
    height: 80px;
    background-color: #5F8D4E;
}
.section-7 .bgPulse span:nth-child(3n+1){
    background: transparent;
    border: 5px solid #285430;
}


.section-11 .bgPulse span{
  position: absolute;
  width: 80px;
  height: 80px;
  background-color: #a00000;
}
.section-11 .bgPulse span:nth-child(3n+1){
  background: transparent;
  border: 5px solid #ed1515;
}