body {
    margin: 0;
    padding: 0;
}

.viewPortBtns {
    height: 35px;
    text-align: center;
    padding: 0px;
    z-index:9999;
    position: relative;
}
.topBar {
    position: fixed;
    width: 100%;
    height: 35px;
    padding: 0.3% 2%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid #cecece;
    box-shadow: 2px 0px 13px 1px #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: arial;
  }
  
  .circlemode {
    padding: 8px 16px;
    float: left;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
  }
  .Landscape span:first-child {
    transform: rotate(90deg);
  }
  
  .circlemode span {
    vertical-align: middle;
    color: rgb(170, 170, 170);
    font-size: 16px;
  }

.circlemode i {
    font-size: 25px;
    color: rgb(170, 170, 170);

}

.circlemode:hover span,
.circlemode:hover i,  .circlemode.active span, .circlemode.active i{
  color: #fff;
}

.clearfix {
    clear: both;
}

.mainwrapper {
    width: 100%;
    height: 90%;
    position: absolute;
    top: 10%;
}
img{
    width: 100%; 
    height: auto;
}
.mobileContainer {
    top: 7%;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0 auto;
    position: absolute;
    width: 320px;
    height: 480px;
        }

.mobileLandContainer{
    width: 480px;
    height: 320px;
    position: relative;
    margin: 0 auto;
    top: 20%;
    left: 0;
    right: 0;
}

.mobileContainer img,
.mobileLandContainer img {
    width: 100%;
    height: auto;
}


.innermain {
    width: 76.2%;
    height: 91%;
    position: absolute;
    top: 18.4%;
    left: 11.4%;
}
.teaser {
     position: absolute;
     bottom: 0;
     width: 100%;
     height: 35%;
     background: #fff;
    overflow: hidden;
}
.expand{
     position: absolute;
     width: 100%;
     height: 100%;
     background: #fff;
}
.banner {
     position: absolute;
     bottom: 0;
     width: 100%;
     height: auto;
     display: none;
}
.bannerbg{
    height:40px;
    background: #fff;
}
.bannerlogo{
    width: 75px;
    left: 15px;
    position: absolute;
}
.bannercup{
    width: 40%;
    z-index: 2;
    left: 33%;
    position: absolute;
    bottom: -36%;
}
.bannertext{
    width: 39%;
    right: 1%;
    position: absolute;
    bottom: 39%;
}
.bannercondition{
    width: 25%;
    bottom: 10%;
    position: absolute;
    right: 9%;
}

.closeExpand,.closeTeaser,.close {
    position: absolute;
    width: 30px;
    height: 30px;
    right: 0;
    top: 0;
    z-index: 99 !important;
}
.close {
    width: 20px;
    height: 20px;
}
.closeExpand{
    width: 25px;
    height: 25px;
}
  .Teaserlogo {
    width: 25%;
    position: absolute;
    left: 40%;
}
.text1{
    width: 70%;
    left: 18%;
    position: absolute;
    top: 20%;
}
.text2{
    width: 60%;
    position: absolute;
    left: 23%;
    top: 22%;
}
.cupfirst,.cupsecond,.cupthird{
    width: 65%;
    top: 20%;
    position: absolute;
    left: 20%;
}
.teaserexplore{
    width: 50%;
    left: 28%;
    position: absolute;
    top: 77%;
}
.teaserdisclaimer{
    width: 35%;
    position: absolute;
    bottom: 3%;
    left: 35%;
}
.logo{
    width: 30%;
    left: 34%;
    position: absolute;
    top: 3%;
}
.Exploreblue{
    top: 16%;
    width: 85%;
    position: absolute;
    left: 9%;
}
.tap{
    width: 60%;
    left: 20%;
    position: absolute;
    top: 23%;
}
.cta{
    width: 35%;
    left: 30%;
    top: 31%;
    position: absolute;
}
.videocta{
    width: 45%;
    left: 27%;
    position: absolute;
    top: 35%;
}
.VideoOverlay{
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: none;
    position: absolute;
    opacity: 0.8;
    z-index: 12;
}
.ExpandVideo{
    width:100%;
    height: auto;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    position: absolute;
    z-index: 14;
}
.videoclose{
    width: 40px; 
    height: 40px;
    top:0;
    right:0;
    z-index:99;
    position: absolute;
    display: none;
}
video{
    width:100%;
}

  .mainLastFrame {
    left: 0%;
    position: absolute;
    bottom: 0%!important;
    width: 100%;
    height: 54%;
    cursor: pointer;
  } 
  .mainLastFrame img{width:100%;}
  .SwiperContainer {
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
  }
  .swiperWrapper{width: 100%; height: 100%;}
  .FlavorCup, .FlavorCupFront {
    left:-15%;
    width: 130%;
    height: 130%;
    top: 0;
    border-radius: 100%;
    border: 1px solid #fff;
    position: absolute;
}
  .virualHoverDiv{   
    width: 50%;
    left: 50%;
    height: 35%;
    top: 40%;
    transform: translateX(-50%);
    z-index: 9999;
  }
  

.FlavorCupStrawberry{background:url('images/StrawberryPort.jpg') no-repeat  center bottom;  background-size:93%; }
.FlavorCupFrontStrawberry{background: url('images/strawberryFrontPort.png') center bottom no-repeat;
    background-size:93%; }

.FlavorCupVanilla{background:url('images/VanillaPort.jpg') no-repeat  center bottom;  background-size:93%; }
.FlavorCupFrontVanilla{background:url('images/VanillaFrontPort.png') no-repeat  center bottom;  background-size:93%; }

.FlavorCupPeach{background:url('images/PeachPort.jpg') no-repeat  center bottom;  background-size:93%; }
.FlavorCupFrontPeach{background:url('images/PeachFrontPort.png') no-repeat  center bottom;  background-size:93% }

.FlavorCupBlueberry{background:url('images/BlueBerryPort.jpg') no-repeat  center bottom;  background-size:93%; }
.FlavorCupFrontBlueberry{background:url('images/BlueBerryFrontPort.png') no-repeat  center bottom;  background-size:93%; }
  
  
.FlavorStrawberryin{background:url('images/StrawberryHoverPort1.png') no-repeat  center bottom; background-size: 93%; border: none; }
.FlavorVanillain{background:url('images/VanillaHoverPort1.png') no-repeat  center bottom; background-size: 93%; border: none; }
.FlavorPeachin{background:url('images/PeachHoverPort1.png') no-repeat  center bottom; background-size: 93%; border: none; }
.FlavorBlueberryin{background:url('images/BlueberryHoverPort1.png') no-repeat  center bottom; background-size: 93%; border: none; }

 
   .swiper-button-prev {
    top: 11.7%!important;
    left: 7%!important;
}
  
  .swiper-button-next {
    top: 10.5%!important;
    left: 80%!important;
    transform: rotate(66deg);
  }
  .swiper-button-next:after, .swiper-button-prev:after{
      display:none;
  }
  
  .swiper-pagination {
    top: 5%;
    left: 42%;
    height: 30%;
    width: 100%;
    transform: translate(-42% ,-50%)!important;
    position: absolute;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0,0,0);
    z-index: 10;
  }
  .swiper-pagination-bullet {
    width: 15px!important;
    height: 15px!important;
    margin: 15px 8px;
    border: 4px solid #cf6a7f!important;
    background: #fff!important;
    opacity: 1!important;
    outline: 0;
}
.swiper-pagination-bullet-active {
    opacity: 1;
     background: #162a72!important;
     border: 4px solid #162a72 !important;
     transform: scale(1.5);
 }
.borderClassStrawberry{

    border: 3px solid #cf6a7f   !important;
  }
  
  .borderClassVanilla{
  
    border: 3px solid #b7e2ee !important;
  }
  
  
  
  .borderClassPeach{
  
    border: 3px solid #ed8d65 !important;
  }
  
  .borderClassBlueberry{
  
    border: 3px solid #b5aed3  !important;
  }
  
  
  .activeBorderClassStrawberry{
  
   border: 3px solid #162a72 !important;
  }
  
  .activeBorderClassVanilla{
  
   border: 3px solid #162a72 !important;
  }
  
  .activeBorderClassPeach{
  
   border: 3px solid #162a72 !important;
  }
  
  .activeBorderClassBlueberry{
  
   border: 3px solid #162a72 !important;
  }
  
  .swiper-pagination-bullets .swiper-pagination-bullet:nth-child(1) {
    margin-bottom: 25px!important;
}
  
  .swiper-pagination-bullets .swiper-pagination-bullet:nth-child(2) {
    margin-bottom: 33px!important;
}
  
  .swiper-pagination-bullets .swiper-pagination-bullet:nth-child(3) {
    margin-bottom: 33px!important;
}
  
  .swiper-pagination-bullets .swiper-pagination-bullet:nth-child(4) {
    margin-bottom: 25px!important;
}


    
.placeholder {
    position: absolute;
    top: 9%;
    width: 72%;
    left: 14%;
    height: 61%;
    background-color: #000;
    z-index: 9999;
    text-align: center;
    font-size: 0;
    pointer-events: auto !important;

}


.placeholder .plzrotate {
     display: inline-block;
     text-align: center;
     text-transform: none;
     vertical-align: middle;
     font-size: 14px;
     position: relative;
}

.placeholder .plzrotate .logo {
     position: relative;
     margin: 0 auto;
     left: 80px !important;
     top: 0 !important;
}

.placeholder .plzrotate .rotate {
     position: relative;
     top: 20px;
     /*left: -25px;*/
     color: #fff;
     font-family: Helvetica, Arial, sans-serif;
}

.placeholder .plzrotate .spinner {
     position: relative;
     top: 30px;
     width: 17px;
     margin: 0 auto;
     -webkit-animation: rotating 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
     -moz-animation: rotating 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
     -ms-animation: rotating 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
     -o-animation: rotating 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
     animation: rotating 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
     -webkit-animation-direction: alternate;
     -moz-animation-direction: alternate;
     -ms-animation-direction: alternate;
     animation-direction: alternate;
     -webkit-animation-delay: 1s;
     -moz-animation-delay: 1s;
     -ms-animation-delay: 1s;
     animation-delay: 1s;
}

.placeholder:after {
     content: "";
     display: inline-block;
     height: 100%;
     vertical-align: middle;
}

@-webkit-keyframes rotating {
     0% {
         -webkit-transform: rotate(0deg);
     }

     100% {
         -webkit-transform: rotate(90deg);
     }
}

@-moz-keyframes rotating {
     0% {
         -moz-transform: rotate(0deg);
     }

     100% {
         -moz-transform: rotate(90deg);
     }
}

@-o-keyframes rotating {
     0% {
         -o-transform: rotate(0deg);
     }

     100% {
         -o-transform: rotate(90deg);
     }
}

@keyframes rotating {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(90deg);
     }
}

@-webkit-keyframes btn-rotating {
     0% {
         -webkit-transform: rotate(-45deg) translate3d(0, 0, 0);
     }

     100% {
         -webkit-transform: rotate(90deg) translate3d(0, 0, 0);
     }
}

@-moz-keyframes btn-rotating {
     0% {
         -moz-transform: rotate(-45deg);
     }

     100% {
         -moz-transform: rotate(90deg);
     }
}

@-o-keyframes btn-rotating {
     0% {
         -o-transform: rotate(-45deg);
     }

     100% {
         -o-transform: rotate(90deg);
     }
}

@keyframes btn-rotating {
     0% {
         transform: rotate(-45deg);
     }

     100% {
         transform: rotate(90deg);
     }
}

@-webkit-keyframes btn-opacity {
     0% {
         opacity: 0;
     }

     100% {
         opacity: 1;
     }
}

@-moz-keyframes btn-opacity {
     0% {
         opacity: 0;
     }

     100% {
         opacity: 1;
     }
}

@-o-keyframes btn-opacity {
     0% {
         opacity: 0;
     }

     100% {
         opacity: 1;
     }
}

@keyframes btn-opacity {
     0% {
         opacity: 0;
     }

     100% {
         opacity: 1;
     }
}

.mobileLandContainer .banner {
     width: 320px;
     height: 50px;
     left: 50%;
     transform: translate(-50%);
}

.mobileLandContainer .teaser {
     width: 320px;
     height: 200px;
     left: 50%;
     transform: translate(-50%);
}

.mobileLandContainer,
.placeholder,
.wintxt,
.expand {
     display: none;
}
::-webkit-scrollbar{
    display: none;
}

.landscapeMain .banner{
    bottom: 85px;
    transform: translate(-50%) scale(0.5);
}
.landscapeMain .teaser {
    bottom: 50px;
    transform: translate(-50%) scale(0.5);
}