body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
div {
  position: absolute;
}
img {
  width: 100%;
  height: auto;
}
.container {
  max-width: 1170px;
  margin: auto;
  position: relative;
  height: 100vh;
}
#jar {
  width: 20%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#spoon-lying {
  width: 37%;
}
#bg img {
height: 100vh;
}
#newtxt-d {
  width: 18%;
  left: 5%;
}
.right-text {width: 20%;right: 5%;height: 100%;}
#subtly {
top: 34%;
}
#learn-more {
top: 54%;
}
.diff-flv-wrap {
width: 100%;
height: 20%;
bottom: 5%;
}
.diff-flv-wrap .diff-flv-container li {
  width: 10%;
  float: left;
  height: 100%;
  position: relative;
}
.diff-flv-wrap .diff-flv-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
}
.diff-flv-wrap .diff-flv-container .diff-flv-jar {
width: 100%;
float: left;
cursor: pointer;
/* height: 100%; */
}
.hover-txt {left: 0;right: 0;margin: auto;width: 15%}

#vanilla-l {
  top: -11%;
  left: 13%;
  width: 100%;
}
#blackcherry-l {
  top: -11%;
  left: -17%;
  width: 100%;
}
#blueberry-l { 
  top: 0%;
}

.swiper-container, .swiper-button-next, .swiper-button-prev {
  display: none;
}

.swiper-container {
    position: absolute!important;
    bottom: 19%;
    width: 50%;
    right: 0;
    left: 0;
    height: 20%;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
.swiper-slide img {
  width:100%;
  height:auto;
  transition: 300ms all;
}
  .swiper-slide-active img{
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
    transition: 300ms all;
    z-index: 99;
  }

.swiper-button-next, .swiper-button-prev {
    background-image: url('../images/leftArrow.png') !important;
    top: 70% !important;
    background-size: 17px 25px !important;
}
.swiper-button-next {
  right: 5px  !important;
  left: auto;
  transform: rotate(-180deg);
}
.swiper-button-prev {
  left: 5px !important;
  right: auto;
}



@media screen and (max-width: 550px) {
  .hover-txt {
    width: 25%;
  }
  .diff-flv-wrap {
    height: 16%;
    bottom: 6%;
}
} 

@media screen and (max-width: 460px) {
  .diff-flv-wrap {
    height: 22%;
    bottom: 6%;
  }
  #subtly {
    top: 40%;
  }
}
@media screen and (max-width: 400px) {
  .swiper-container, .swiper-button-next, .swiper-button-prev {
    display: block;
  }
  .diff-flv-wrap {
    display: none;

  }
  .right-text {
    right: 0;
    left: 0;
    margin: auto;
}
#newtxt-d {
  left: 0;
  right: 0;
  margin: auto;
  top: 10%;
  width: 25%;
}
#subtly {
  top: 85%;
}
#learn-more {
  top: 92%;
}
}