body,html{
    width:100%;
    height:100%;
    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;
}
.mob_ls{transform:rotate(90deg);}
.phone_image{
    top: 7%;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0 auto;
    position: absolute;
    width: 320px;
    height: 480px;
    
}
.ls_mob_image{display:none;}
.phone_image img{width:100%;}
.mobile{
    width: 86%;
    height: 100%;
    position: absolute;
    top: 19.5%;
    left: 7.3%;
}
.expandclose{
    position: absolute;
    width: 4%;
    padding: 25px;
    right: -4%;
    left: auto;
    top: 5%;
    z-index: 999 !important;
}
.teaserclose{
    position: absolute;
    width: 4%;
    right: 0%;
    left: auto;
    top: 0;
    z-index: 999 !important;
    padding: 10px;
}
.ls_close{
    padding:10px;
    width:3%;    
    position: absolute;
    right: 0%;
    left: auto;
    top: 0;
    z-index: 999 !important;
}
.bannerclose{
        position: absolute;
    width: 4%;
    right: 0%;
    left: auto;
    top: 0;
    z-index: 999 !important;
    padding: 10px;
}
.bannerclose img,.teaserclose img,.expandclose img,.ls_close img{width:100%;}

/*teaser*/
.teaser{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30%;
}
.tiny{
    width: 30%;
    height: auto;
    position: absolute;
    left: 2%;
    top: 2%;
}
.tiny img{
    width:100%;
}
.tap{
    width: 30%;
    height: auto;
    position: absolute;
    top: 60%;
    left: 2%;
}
.tap img{width:100%;}
.blood_orange{
    width: 19%;
    height: auto;
    position: absolute;
    right:40%;
    top:5%;
}
.red_cherry{    
    right: 23%;
    width: 20%;
    top: 2%;
    height: auto;
    position: absolute;
}
.black_berry{
    width: 19%;
    height: auto;
    position: absolute;
    top:5%;
    right:7%;
}
.blood_orange img,.red_cherry img,.black_berry img{width:100%;}
.teaser_bubble{
    width: 100%;
    position: absolute;
    overflow: hidden;
    height: 100%;
    z-index:-1;
}

/*banner*/
 .banner{
    width: 100%;
    height: 9%;
    bottom: 0;
    position: absolute;
    display:none;
}

.banner_bubble{
    width: 100%;
    position: absolute;
    overflow: hidden;
    height: 100%;
    display:block;
}
#bubbles5_1,#bubbles1_1 {
    width:100%;
    left:0%;
    top:0;
    position: absolute;
}
#bubbles5_1 img,#bubbles1_1 img{width:50%;}
.bg{
    width:100%;
    height:100%;
    position:absolute;
}
.bg img{width:100%;}

/*expanded*/
.expanded{
    width:100%;
    height:100%;    
    overflow:hidden;
   position:absolute; 
    display:none;
}
.expand_ls{
    background-color:#ed143d66; 
    width:100%; 
    height:100%; 
    display:none;
}
.text{
    color: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
#rotate{width:100%; height:100%}
.placeholder {
	cursor:none;	
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color:#3e93cf;
	z-index: 9999;
	text-align: center;
	font-size: 0;
	pointer-events: auto !important;
  
}

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


.placeholder .plzrotate .rotate {
	position: relative;
	top: 20px;
	color: white;
	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;
  }
}

.swiper-container {
     width: 100%;
     height: 100%;
     overflow:hidden;
}
.swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
}
.slide1{
    width: 100%;
    height: 100%;
    background: url(images/slide1_trans.png) no-repeat;
    background-size: 100% auto;
    background-position: center center;  
}
.slide2{
    width: 100%;
    height: 100%;
    background: url(images/slide2_trans.png) no-repeat;
    background-size: 100% auto;
    background-position: center center;  
}
.slide3{
    width: 100%;
    height: 100%;
    background: url(images/slide3_trans.png) no-repeat;
    background-size: 100% auto;
    background-position: center center;  
}
.swiper-button-next,.swiper-button-prev{
    outline: none;
    pointer-events:auto;
    background:none !important;
    top:60% !important;
    width:6% !important;
}
.swiper-button-next img,.swiper-button-prev img{
    width:100% !important;
}
.swiper-button-next{
    right:6% !important;
    left:auto !important;
}
.swiper-button-prev{
    left:25% !important; 
    right:auto !important;
}
.BubbleContainer {
    width: 100%;
    height: 100%;
    z-index: 0;
    top:0%;
}
.BubbleContainer img {
  max-width: 100%;
  height: auto;
}
.bubble1 {
  animation: up1 8s infinite forwards linear;
}
.bubble2 {
  animation: up2 9s 3s infinite forwards linear;
}
.bubble3 {
  animation: up3 8.5s 8s infinite forwards linear;
}
.bubble4 {
  animation: up4 9.5s 4s infinite forwards linear;
}
@keyframes up1 {
  20% {transform: translate(40px, -130px)}
  40% {transform: translate(80px, -260px)}
  60% {transform: translate(110px, -390px)}
  80% {transform: translate(150px, -520px)}
  100% {transform: translate(190px, -650px)}
}
@keyframes up2 {
  20% {transform: translate(40px, -200px)}
  40% {transform: translate(50px, -300px)}
  60% {transform: translate(60px, -400px)}
  80% {transform: translate(70px, -600px)}
  100% {transform: translate(80px, -800px)} 
}
@keyframes up3 {
  20% {transform: translate(30px, -200px)}
  40% {transform: translate(90px, -300px)}
  60% {transform: translate(120px, -400px)}
  80% {transform: translate(160px, -600px)}
  100% {transform: translate(190px, -800px)}
}
@keyframes up4 {
  20% {transform: translate(20px, -200px)}
  40% {transform: translate(50px, -300px)}
  60% {transform: translate(90px, -400px)}
  80% {transform: translate(130px, -600px)}
  100% {transform: translate(170px, -800px)} 
}
::-webkit-scrollbar { 
    display: none; 
}