:root {
  --transition-slide: 0.5s;
  --transition-fade: 1.5s;
}



.mobius-slider-inner {
    position: relative;
    width: 100%;
  }

  .mobius-slider-inner .show {
    position: absolute;
    cursor: pointer;
    top: 50%;
    background: #000;
    color: #fff;
    z-index: 100;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 7px;
    opacity: 0;
    transition: 0.3s;
  }
  .mobius-slider-inner:hover .show {
    opacity: 1;
  }
  .mobius-slider-inner .show.prev {
    left: 0;
  }
  .mobius-slider-inner .show.next {
    right: 0;
  }

  .mobius-slider-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    opacity: 0;
  }

  .mobius-slider-slide img {
    max-height: 100%;
    object-fit: contain;
    object-position: center;

  }

  /* Fading animation */
  .mobius-slider-inner .mobius-slider-slide.fade {
    animation: fade var(--transition-slide);
  }

  .mobius-slider-inner .mobius-slider-slide.fadeIn {
    animation: fadeIn var(--transition-slide);
    z-index: 99;
    animation-fill-mode: forwards;
  }


  .mobius-slider-inner .mobius-slider-slide.fadeOut {
    animation: fadeOut var(--transition-slide);
    z-index: 1;
  }

  @keyframes fade {
    from {
      opacity: .4;
      display: block;
    }

    to {
      opacity: 1;
      display: block;
    }
  }


  @keyframes fadeIn {
    0% {
      opacity: 0;
    }

    25% {
      opacity: 0.25;
    }

    50% {
      opacity: 0.5;
    }

    75% {
      opacity: 0.75;
    }

    100% {
      opacity: 1;
    }
  }


  @keyframes fadeOut {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }