.spotlight.courses-spotlight-turquoise {
	
    left: -50%;
    top: 50vh;
    /* bottom: -75%; */
}

.courses-pink-spotlight {
	position: absolute;
    right: -30%;
    top: -20%;
    scale: 150%;
}


/* Courses Swiper CSS*/
.courses-swiper {
    width: 100%;
    height: fit-content;
    text-align: left !important;
      max-width: 1400px;
      margin: 0 auto;
      z-index: 2;
      position: relative;
  }

.hover-animation-bg {
    background: #020417;
    position: absolute;
    width: 180px;
    height: 180px;
    margin-left: 10px;
    margin-top: -10px;
    /* padding: 10px; */
    top: calc(-50%);
    z-index: -2;
    margin-right: auto;
}

.course-thumb-slider-mobile .thumb-slider-mobile-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: -50%;
    bottom: -50%;
    z-index: 1;
    background: rgb(2,4,23);
    pointer-events: none;
background: -moz-linear-gradient(90deg, rgba(2,4,23,1) 0%, rgba(2,4,23,0) 40%, rgba(2,4,23,0) 60%, rgba(2,4,23,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(2,4,23,1) 0%, rgba(2,4,23,0) 40%, rgba(2,4,23,0) 60%, rgba(2,4,23,1) 100%);
background: linear-gradient(90deg, rgba(2,4,23,1) 0%, rgba(2,4,23,0) 40%, rgba(2,4,23,0) 60%, rgba(2,4,23,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020417",endColorstr="#020417",GradientType=1);
}

.course-thumb-slider-desktop {
    display: block !important;
}


  :root {
  --swiper-navigation-size: 28px !important;
  }
  .swiper-button-next, .swiper-button-prev {
      padding: 0 4rem;
  }
  .swiper-button-next::after, .swiper-button-prev::after {
      padding: 0 12px;
  }
  .swiper-button-prev {
      direction: rtl;
  }
  
  .swiper-pagination-bullet {
      background: white !important;
  }
  
  .courses-swiper .courses-row {
      display: flex;
      padding:4rem;
      max-width: 1000px;
      margin: 0 auto;
      gap: 4rem;
  }
  
  
  .courses-swiper .courses-row .courses-col {
      flex-basis: 50%;
  }
  
  .courses-swiper .courses-row .courses-col.courses-info {
      margin: 2rem 0px;
      z-index: 2;
  }
  
  .courses-swiper .courses-row .courses-col .slide-headline {
      /* width: 150%; */
      /* width: 120%; */
      margin-top: 2rem;
  }
  .courses-swiper .courses-row .courses-col .slide-img {
      height: 100%;
      /*width: 350px;*/
      margin: 0 auto;
      background-size: cover;
  }
  .course-thumb-slider {
      max-width: 1000px;
      margin: 4rem auto 0px auto;
  }
  .course-thumb-slider .swiper-slide {
      position: relative;
      cursor: pointer;
  }

  .courses-swiper .mobile-navigation {
    display: none;
  }


  .course-thumb-slider-mobile {
    display: none !important;
    margin-left: 0px;
    margin-right: 0px;
}

  @media (max-width: 1150px) {   
    .courses-swiper .courses-row {
        padding:4rem 8rem;
    }
}

.course-thumb-slider .courses-icon {
    height: 42px;
    transform: translateZ(1px);
    -webkit-transform: translateZ(1px);
    -moz-transform: translateZ(1px);
}

.course-thumb-slider p {
    transform: translateZ(1px);
    -webkit-transform: translateZ(1px);
    -moz-transform: translateZ(1px);
}

@media (max-width: 1000px) {
    .course-thumb-slider .courses-icon {
        height: 32px;
        z-index: 4;
    }
    .course-thumb-slider-mobile {
        display: block !important;
        z-index: 0;
        position: relative;
        /* max-width: 800px; */
    }

    .course-thumb-slider-desktop {
        display: none !important;
    }

    .courses-swiper .desktop-navigation {
        display: none;
    }

    .courses-swiper .mobile-navigation {
        display: block;
        position: relative;
        padding: 0 1rem;
    }

    .courses-swiper .mobile-navigation.swiper-button-next {
        margin-right: 2rem;
    }

    .courses-swiper .mobile-navigation.swiper-button-prev {
        margin-left: 2rem;
    }

    .courses-swiper  {
        max-width: 800px;
        margin-top: 1rem;
    }
    .courses-swiper .w-btn-wrapper.align_none {
        margin-right: 0px;
    }

    .courses-col.courses-image {
    display: flex;
    align-items: center;
}


    .courses-swiper .courses-row {
        flex-direction: column-reverse;
        gap: 0px;
        text-align: center;
        padding: 2rem 1rem 1rem 1rem;
        position: relative;
        /* margin-left: -0.5rem; */
    }
    .courses-swiper .courses-row .courses-col .slide-img {
        width: 300px ;
        /* height: 500px ; */
        aspect-ratio: 3/4;
    }
    .courses-swiper .courses-row .courses-col .slide-headline {
        width: 100% ;
        font-size: 2em;
    }

    .courses-swiper .courses-row .courses-col.courses-info {
        margin-top: -3rem;
    }

    .courses-swiper .swiper-button-label {
        display: none;
    }
}

@media (max-width: 480px) {
    .courses-swiper .courses-row .courses-col .slide-img {
        width:200px;
        /* height: 300px; */
        aspect-ratio: 3/4;
    }
    .spotlight.courses-spotlight-turquoise {
	
        left: -50%;
        top: 70vh;
        width: 150%;
        /* bottom: -75%; */
    }
}
  
  /* Thumbnail Hover */
  .course-thumb-slider .swiper-slide .hover-animation{
      content: '';
      position: absolute;
      width: 170px;
      height: 180px;
      margin-left: auto;
      margin-right: auto;
      transform: scale(0);
      opacity: 0;
      left: 0;
      right: 0;
      /* top: calc(-50%); */
      /* margin-top:8px; */
      z-index:-2;
      /* border: 2px solid white;
      border-radius: 1000px; */
      /* background: url("/__h/ep-talent-academy.de/wp-content/uploads/2023/06/epta_dance_hover.gif"); */
      background-size: cover !important;
      transition: all 0.4s cubic-bezier(0.410, 0.005, 0.505, -0.470);
      mix-blend-mode: lighten;

  }
  
  .course-thumb-slider .swiper-slide:hover .hover-animation{
      transform:scale(1);
      opacity: 1;
      /* border: 2px solid white;
      border-radius: 1000px; */
      transition: all 0.7s cubic-bezier(0.300, 1.550, 0.450, 1.005);
  }

  /* Thumbnail Mobile */
  .course-thumb-slider .swiper-slide .active-mobile-animation{
    content: '';
    position: absolute;
    width: 120px;
      height: 120px;
      margin-left: auto;
      margin-right: auto;
      transform: scale(0);
      margin-top: -10px;
      opacity: 0;
      left: 0;
      right: 0;
      top: calc(-50% - 4px);
    /* margin-top:8px; */
    z-index:-2;
    /* border: 2px solid white;
    border-radius: 1000px; */
    /* background: url("/__h/ep-talent-academy.de/wp-content/uploads/2023/06/epta_dance_hover.gif"); */
    background-size: cover !important;
    transition: all 0.7s cubic-bezier(0.410, 0.005, 0.505, -0.470);

}

.course-thumb-slider .swiper-slide .active-mobile-animation video{
    mix-blend-mode: lighten;
}

.course-thumb-slider .swiper-slide.swiper-slide-active .active-mobile-animation{
    transform:scale(1);
    opacity: 1;
    /* border: 2px solid white;
    border-radius: 1000px; */
    z-index: -1;
    transition: all 0.7s cubic-bezier(0.300, 1.550, 0.450, 1.005);
}

.course-thumb-slider-mobile .swiper-slide p {
    margin: 0px;
    margin-top: -8px;
    font-size: 12px;
    font-weight: 500;
}
  
  .course-thumb-slider .swiper-slide.swiper-slide-thumb-active .active-animation{
      position: absolute;
      width: 150px;
      height: 150px;
      margin-left: auto;
      margin-right: auto;
      transform: scale(1);
      left: 0;
      right: 0;
      top: calc(-50%);
      z-index: -1;
      margin-top:8px;
      background: rgb(0,255,255);
      background: -moz-radial-gradient(circle, rgba(0,255,255,0.5) 0%, rgba(0,255,255,0) 70%);
      background: -webkit-radial-gradient(circle, rgba(0,255,255,0.5) 0%, rgba(0,255,255,0) 70%);
      background: radial-gradient(circle, rgba(0,255,255,0.5) 0%, rgba(0,255,255,0) 70%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffff",endColorstr="#00ffff",GradientType=1);
      opacity: 1.0;
      transition: all 0.4s cubic-bezier(0.300, 1.550, 0.450, 1.005);
  }
  
  .course-thumb-slider .swiper-slide > .active-animation {
      position: absolute;
      width: 150px;
      height: 150px;
      margin-left: auto;
      margin-right: auto;
      transform: scale(0);
      opacity: 0.0;
      left: 0;
      right: 0;
      top: calc(-50%);
      margin-top:8px;
      
      
      transition: all 0.4s cubic-bezier(0.410, 0.005, 0.505, -0.470);
  }