/********** Carousel **********/

/* RESET CSS */
* {
  margin: 0;
  padding: 0;}

/* CAROUSEL CSS */
.carousel {
  position: relative;
}

.carousel::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.carousel ul {
  overflow: auto; 
  display: flex; 
  height: 100vh;
  scroll-snap-type: x mandatory;
  scroll-snap-points-y: repeat(100%);
  scroll-snap-align: left;
  scroll-behavior: smooth;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.carousel ul::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome, Safari and Opera */
} 

.carousel ul li {
  width: 100%; 
  min-width: 100%;
  list-style: none; 
  scroll-snap-align: start;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #00ff44;
  font-family: Type-1-Bold;
  letter-spacing: 0px;
  font-size: 36px;
  text-align: center;
  margin-right: calc(-100% + 300px);
  transition: transform 0.2s linear;
  opacity: 1.0;
  line-height: 1;
  position: relative;
  bottom: 15px;
}

.carousel ul li.selected {
  opacity: 1;
  z-index: 9;
}

.carousel ul li.selected > div {
  transform: scale(1.2);
  }
  
.carousel ul li > div {
  z-index: 9; 
  margin: 0 auto; 
  max-width: 190px;
  transition: all 0.2s linear;
  transform: scale(0.95);
  padding: 20px 15px;
}

.carousel ul li > div > div {
  background: url(../../svg/carousel/carousel-01.svg) center center / cover no-repeat; 
  height: 190px;
  width: 190px;
  margin-bottom: 15px;
  margin: -20px -15px 15px;
}

.carousel ul li:nth-child(2) > div > div {
  background-image: url(../../svg/carousel/carousel-02.svg);
}

.carousel ul li:nth-child(3) > div > div {
  background-image: url(../../svg/carousel/carousel-03.svg);
}

.carousel ul li:nth-child(4) > div > div {
  background-image: url(../../svg/carousel/carousel-04.svg);
}

.carousel ul li:nth-child(5) > div > div {
  background-image: url(../../svg/carousel/carousel-05.svg);
}

.carousel ul li div a {
  font-family: Type-1-Bold;
  color: #00ff44;
  display: inline-block;
  padding: 8px 18px 5px 18px;
  font-size: 16px;
  letter-spacing: 0px;
  text-decoration: none;
  border-radius: 0px;
  margin-top: 17px;
  background: #333333;
}

.carousel ol {
  position: absolute;
  bottom: 15px;
  display: flex;
  justify-content: center;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
}

.carousel ol li {
  list-style: none;
  padding: 0 5px;
}

.carousel ol li a {
  display: block;
  height: 10px;
  width: 10px;
  border: 2px solid white;
  background: transparent;
  border-radius: 100%;
}

.carousel ol li.selected a {
  background: white;
}

.carousel .prev, .carousel .next {
  user-select:none;
  cursor: pointer;
  font-size: 50px;
  color: white;
  position: absolute;
  left: 0;
  padding: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
}

.carousel .next {
  left: auto;
  right: 0;}

h2 {
  margin: 15px auto;
  padding: 0 15px;
  max-width: 800px;
}

h2 {
  margin-top: 30px;
}

/**************************************** Mediascreen ****************************************/

@media screen and (max-width: 1124px) {

}