/*
.apps {
  background-image: url("../../images/darklabbg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top, center;
}

@media only screen and (min-width: 2000px) {
  .apps {
  background-image: url("../../images/darklablarge.JPG");
  }
}
*/

.banner {
  margin-top: 14rem;
  width: 100%;
  height: 100vh;
  text-align: center;
  overflow: hidden;
  position: relative;
  opacity: 0.95;
}

.banner .slider {
  position: absolute;
  width: 20rem;
  height: 25rem;
  top: 10%;
  left: calc(50% - 100px);
  transform-style: preserve-3d;
  transform: perspective(50rem);
  animation: autoRun 15s linear infinite;
}

@keyframes autoRun {
  from {
      transform: perspective(50rem) rotateX(-10deg) rotateY(0deg);
  } to {
      transform: perspective(50rem) rotateX(-10deg) rotateY(360deg);
  }
}

.banner .slider .item {
  position: absolute;
  inset: 0 0 0 0;
  transform:
    rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
    translateZ(250px);
}

.banner .slider .item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media only screen and (max-width: 900px) {
  .banner {
    margin-top: 30rem;
  }
  
  .banner .slider .item img {
    width: 70%;
    height: 70%;
  }
  .banner .slider .item {
    transform:
      rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
      translateZ(175px);
  }
  .banner .slider {
    transform: perspective(25rem);
    animation: autoRun 15s linear infinite;
  }
  @keyframes autoRun {
    from {
        transform: perspective(40rem) rotateX(-12deg) rotateY(0deg);
    } to {
        transform: perspective(40rem) rotateX(-12deg) rotateY(360deg);
    }
  }
}

@media only screen and (max-width: 800px) {
  .banner {
    margin-top: 30rem;
  }
  
  .banner .slider .item img {
    width: 70%;
    height: 70%;
  }
  .banner .slider .item {
    transform:
      rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
      translateZ(175px);
  }
  .banner .slider {
    transform: perspective(25rem);
    animation: autoRun 15s linear infinite;
  }
  @keyframes autoRun {
    from {
        transform: perspective(40rem) rotateX(-12deg) rotateY(0deg);
    } to {
        transform: perspective(40rem) rotateX(-12deg) rotateY(360deg);
    }
  }
}

@media only screen and (max-width: 700px) {
  .banner {
    margin-top: 30rem;
  }
  
  .banner .slider .item img {
    width: 70%;
    height: 70%;
  }
  .banner .slider .item {
    transform:
      rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
      translateZ(175px);
  }
  .banner .slider {
    transform: perspective(25rem);
    animation: autoRun 15s linear infinite;
  }
  @keyframes autoRun {
    from {
        transform: perspective(40rem) rotateX(-12deg) rotateY(0deg);
    } to {
        transform: perspective(40rem) rotateX(-12deg) rotateY(360deg);
    }
  }
}

@media only screen and (max-width: 600px) {
  .banner {
    margin-top: 35rem;
  }
  
  .banner .slider .item img {
    width: 70%;
    height: 70%;
  }
  .banner .slider .item {
    transform:
      rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
      translateZ(110px);
  }
  .banner .slider {
    transform: perspective(25rem);
    animation: autoRun 15s linear infinite;
  }
  @keyframes autoRun {
    from {
        transform: perspective(30rem) rotateX(-15deg) rotateY(0deg);
    } to {
        transform: perspective(30rem) rotateX(-15deg) rotateY(360deg);
    }
  }
}

@media only screen and (max-height: 400px) {
  .banner .slider .item img {
    width: 50%;
    height: 50%;
  }
  .banner .slider .item {
    transform:
      rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
      translateZ(85px);
  }
  .banner .slider {
    transform: perspective(25rem);
    animation: autoRun 15s linear infinite;
  }
  @keyframes autoRun {
    from {
        transform: perspective(30rem) rotateX(-15deg) rotateY(0deg);
    } to {
        transform: perspective(30rem) rotateX(-15deg) rotateY(360deg);
    }
  }
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 15rem;
  background-color: black;
  color: #39b54a;
  text-align: center;
  padding: 7px 10px;
 
  position: relative;
  z-index: 1000;
  transition: all 0.5s ease-in-out;
}

.tooltiptext {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 12px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  transition: all 0.5s ease-in-out;
}