html, body {
  position: relative;
  /*height: 100%;*/
}
body {
  margin: 0;
  padding: 0;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.key-swiper-slide {
  text-align: left;
  visibility: hidden;
}

.swiper-slide-active {
  opacity: 1;
  visibility: visible;
}

.imgSize{
  width: 400px;
  height: 50px;
}

.full-height{
  position: relative;
  display: block;
}

.image-holder{
  position: relative;
  height: 70vh;
  overflow: hidden;
}

.image-holder img {
  height: 70vh;
  display : block;
}

#key-benefits-carousel .image-holder{
  position: relative;
  height: 95vh;
  overflow: hidden;
}

#key-benefits-carousel .image-holder img {
  height: 95vh;
  display: block;
}

.demo-icon{
  color: #0094de;
  font-size: 20px;
}

.swiper-pagination-bullet {
  text-align: center;
  color: #000;
  opacity: 0.3;
}

.swiper-pagination-bullet-active {
  color: #fff;
  background: #007aff;
  opacity: 1;
}


* {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
  -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important;
  outline: none !important;
}

@media (min-width: 321px) and (max-width: 420px) {
  .imgSize{
    width: 250px;
    height: 50px;
  }
  #key-benefits-carousel .image-holder{
    height: 65vh;
  }

  #key-benefits-carousel .image-holder img {
    height: 65vh;
  }
}

@media (min-width: 420px) and (max-width: 480px) {
  .imgSize{
    width: 300px;
    height: 50px;
  }
}

@media (min-width: 767px) and (max-width: 1024px) {
  .imgSize{
    width: 300px;
    height: 50px;
  }
  #key-benefits-carousel .image-holder{
    height: 60vh;
  }

  #key-benefits-carousel .image-holder img {
    height: 60vh;
  }
}

@media(max-width: 320px) {
  .imgSize{
    width: 250px;
    height: 50px;
  }
  #key-benefits-carousel .image-holder{
    height: 65vh;
  }

  #key-benefits-carousel .image-holder img {
    height: 65vh;
  }
}