@charset "utf-8";

@keyframes tonext {  
    75% { left: 0; }
    95% { left: 100%; }
    98% { left: 100%; }
    99% { left: 0; }
  }
  
  @keyframes tostart {
    75% { left: 0; }
    95% { left: -300%; }
    98% { left: -300%; }
    99% { left: 0; }
  }
  
  @keyframes snap {
    96% { scroll-snap-align: center; }
    97% { scroll-snap-align: none; }
    99% { scroll-snap-align: none; }
    100% { scroll-snap-align: center; }
  }
  

   * {  box-sizing: border-box;  scrollbar-color: transparent transparent; /* thumb and track color */  scrollbar-width: 0px;}
  
  *::-webkit-scrollbar {  width: 0;}
  
  *::-webkit-scrollbar-track {  background: transparent;}
  
  *::-webkit-scrollbar-thumb {  background: transparent;  border: none;
  }
  
  * {  -ms-overflow-style: none;}
  
  ol, li {  list-style: none;  margin: 0;  padding: 0;}
  
  .carousel {   position: relative;  padding-top: 75%;  filter: drop-shadow(0 0 10px #0003);  perspective: 100px;}
  .carousel__viewport {  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;  display: flex;  overflow-x: hidden;  counter-reset: item;  scroll-behavior: smooth;  scroll-snap-type: x mandatory;}
  .carousel__snapper img { width:100%; height:100%;}
  .carousel__slide {  position: relative;  flex: 0 0 100%;  width: 100%;   counter-increment: item;}
  .carousel__slide:before {  content: counter(item);  position: absolute;  top: 50%;  left: 50%;  transform: translate3d(-50%,-40%,70px);  color: #fff;  font-size: 2em;}
  .carousel__snapper {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  scroll-snap-align: center;}
  
  @media (hover: hover) { 
     .carousel__snapper {    animation-name: tonext, snap;    animation-timing-function: ease;    animation-duration: 4s;    animation-iteration-count: infinite;  }
  
    .carousel__slide:last-child .carousel__snapper {    animation-name: tostart, snap;  }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .carousel__snapper {    animation-name: none;  }
  }
  
  .carousel:hover .carousel__snapper,
  .carousel:focus-within .carousel__snapper {  animation-name: none;}
  .carousel__navigation {  position: absolute;  right: 0;  bottom: 0;  left: 0;  text-align: center;}
  .carousel__navigation-list,
  .carousel__navigation-item {  display: inline-block;}
  .carousel__navigation-button {  display: inline-block;  width: 30px;  height: 30px;  background-color: #e9e9e9;  background-clip: content-box;  border: 0.25rem solid transparent;  border-radius: 50%;  font-size: 0;  transition: transform 0.1s;}
  .carousel::before,
  .carousel::after,
  .carousel__prev,
  .carousel__next {  position: absolute;  top: 0;  margin-top: 37.5%;  width: 8vw;  height: 8vw;  transform: translateY(-50%);  border-radius: 50%;  font-size: 0;  outline: 0;}
  .carousel::before,
  .carousel__prev {  left: 0;}
  .carousel::after,
  .carousel__next {  right: 0;}
  .carousel::before,
  .carousel::after {  content: '';  z-index: 1;  background-color: #c76e6e;  background-size:cover;  background-repeat: no-repeat;  background-position: center center;  color: #fff;  font-size: 2vw;  line-height: 4rem;  text-align: center;  pointer-events: none;}
  .carousel::before {
    background-image: url('/resources/images/20/slide_prev.png');
  }
  .carousel::after {
    background-image: url('/resources/images/20/slide_next.png');
  }