/*====================================================
				BASE CSS
====================================================*/

*, :after, :before {
    box-sizing: border-box;
}
html {
	position: relative;
	min-height: 100%;
}
body {
	margin: 0;
	padding: 0;
	height: 100%;
	min-height: 100%;
}
img {
	max-width: 100%;
	display: block;
	margin: 0 auto;
}
.port{
	display: none;
}

.mob_ls,.tab_ls{
	transform:rotate(90deg);
}
.phone_image{
    top: 7%;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0 auto;
    position: absolute;
    width: 320px;
    height: 500px;
    display:none;
    
}
.tablet_image{
    top: 7%;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0 auto;
    position: absolute;
    width: 768px;
    height: 500px;
    display:none;
    
}
.phone_image img{
	width:100%;
}
.tablet_image img {
    width: 60%;
}
.desktop{
    width: 1280px;
    height: 500px;
    top: 7%;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0 auto;
    overflow: hidden;
    position: absolute;
}


.banner{
    width: 1280px;
    height: 90px;
    position: absolute;
    display:none;
}


/*====================================================
				COMMON CSS
====================================================*/
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}
.hide {
	display: none;
}
.mobliemain{position:absolute; z-index:99; width:100%;}
.wrapper {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: #57c9e7;
	overflow: hidden;
}
.wrapper-tab{
	width:768px; 
	height:598px;
}
.desktopicon{
	width:100px; 
	height:auto;
	display:inline-block;
	}
.mobileicon{
	position:relative;
	z-index:999;
	border:solid 10px red;
	margin:0px auto;
	width:50%;
	}
.mobileland{ 
	width:100px; 
	height:auto; 
	display:inline-block;
}
.mobileport{
	width:auto;
	height:70px;
	max-width:70px;
	display:inline-block;
}
.mobileport img{
	height:auto;
	width:100%;
}
p {
	color:#fff;
	position: absolute;
	top: 10px;

}
.close{
    right: 0;
    margin: 0px 0px 0px 0px;
    position: absolute;
    width: 8%;
	z-index: 999;
  cursor: pointer;
}

.video-link img{
	margin:0px;
    width:100%;
}

.video_div{
	margin: 0px auto;
	max-width: 70%;
	margin-top: 4%;
	height: auto;
	position: relative;
	z-index: 9999;
	display:none;
}
.desktop{
	display:block;
}
.tab{
	display:none;
}
.mobliemain, .tablet, .tabletland{
	display:none;
}
.tabletland-show{
	display: block;
	position: absolute;
	top: 11%;
	left: 0;
	right: 0;
	bottom: 0;
	width: 55%;
	margin: 0px auto;
}
/*====================================================
				ANIMATION SECTION CSS
====================================================*/

@font-face {
  font-family: 'DINCondensed-Bold';
  src: url('DINCondensed-Bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'CenturySchoolbook-Italic';
  src: url('CenturySchoolbook-Italic.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


.ever{display:none;}
.landscapeView{display:none;}
.lLogo{
	width:100%;     height:35%;
    text-align:center; float:left; position:relative;
 
}
.lLogo img{
width: 200px;
    position: absolute;
    top: 50%;
    margin: 0 -50% 0 0;
    left: 50%;
    transform: translate(-50%,-50%);
}
.portraitView{width:100%; height:35%; position:relative; float:left}
#NEXT_CLICKED_1, #PREV_CLICKED_1, #PREV_BUTTON_CLICKED, #NEXT_BUTTON_CLICKED{
  pointer-events: auto !important;
}

.mainBackground {
  width: 100%;
  top:0;
  right:0;
  position:absolute;
  height:100%;
 
}

.mainBackground .logo {
    position: absolute;
    z-index: 4;
    top: 3%;
    left: 3%;
}

.mainBackground .logo img{
	width:200px
}

.mainBackground .close-button{
    right: 0;
    top: 0;
    padding: 20px;
    z-index: 50;
    cursor: pointer;
}

.mainBackground .swiper-container {
	width: 100%;
    height: 65%;
    opacity:1; position:relative; float:left;  
     
}

.discountDiv{
	width:100%;
  height:82%;
  position:relative;
  background:#56c9e6; float:left
}

.buyCta{
	width:100%;
  height:16%;
  position:relative;
  background:#db5ca9; float:left; text-align:center
}
.midTxt{
    width: 70%;
    position: absolute;
    top: 50%;
    margin: 0 -50% 0 0;
    float: none;
    left: 50%;
    transform: translate(-50%,-50%);
  height: 79%;
}
.midLeft{
	width: 42%;
    height: 75%;
    float: left;
    position: relative;
    margin-left: 5%;
}
.midLeft img, .midRht img, .buyCta img{    width: 100%;
    position: absolute;
    top: 50%;
    margin: 0 -50% 0 0;
    left: 50%;
    transform: translate(-50%,-50%);}
.buyCta img {
    width: 440px;   
}
.buy {
  font-family:'DINCondensed-Bold'; font-size:40px;  color:#ffffff;
      position: relative;
    float: left;
    width: 47%;height: 100%;
    text-align: right;
    padding-top: 15px;
}


.midRht img{padding-left:45px; width:90%}
.midRht{
	width: 52%;
    height: 75%;
    float: right;  position: relative;
}

.prevNxt{ color:#ffffff; font-family:'DINCondensed-Bold';      width: 100%;
    height: 14%;
    font-size: 50px;
    float: left;
    position: absolute;
    bottom: 7%;
    cursor:pointer;}

.prev{width:49%;  float:left; position:relative; text-align:right; padding-right:30px }
.next{width:49%;  float:right; position:relative; text-align:left ;  padding-left:18px}

.product-extend,.product-ever{
  width: 100%;
    height: 100%;
}

.product-ever img, .product-extend img {
    width: 60%;
    position: absolute;
    top: 40%;
    margin: 0 -50% 0 0;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity:0;
}

  .swiper-pagination-bullet {
      width: 80px !important;
      height: 80px !important;
      opacity: 1 !important;
    transform: scale(0.6);
      background: #25418e !important;
        margin: 0px 30px !important;
        
    }
    .swiper-pagination-bullet-active {
     transform: scale(0.9);
      background: #db5ca9 !important;
       margin-bottom: -7px !important;
    }

.ctaBg {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #db5ca9;
    width: 110%;
    height: 12%;
}

.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    top: 57% !important;
      height: 7% !important;
      background: url(../images/line.jpg);
  background-repeat: no-repeat;
    background-position: center center;
 
}
.swiper-pagination {
    position: fixed !important;
}
.hidePortrait{display:none;}
.close-button img{width: 25px;}
.disDiv{
width: 100%;
    height: 100%;
    float: left;
    position: relative;}

.wLine{    width: 4px;
    height: 50px;
    float: left;
    position: relative;
    background: #ffffff;}
@media only screen and (max-width:900px)  and (orientation: portrait){

  .mainBackground .logo {
    top: 3%;
    left: 3%;
}
  .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
       top: 56%!important;
    height: 80px !important;     
}
  .product-ever img, .product-extend img {
    width: 60%;
    top: 45%;
  }
    .swiper-pagination-bullet {
   
    margin: 0 20px!important;
}
  
  .prevNxt{
  font-size: 35px;
  }
  .buyCta img {
    width: 400px;
}
  .wLine{    height: 40px;}
  .prev , .next{line-height:40px}
}

@media only screen and (max-width:450px)  and (orientation: portrait){

.mainBackground .logo img{
	width:100px
}
.mainBackground .close-button {
    padding: 12px;
  }
  .close-button img {
    width: 15px;
}
  
  .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
       top: 54%!important;  height:60px !important; 
}
    .swiper-pagination-bullet {
    width: 55px!important;
    height: 55px!important;
    margin: 0 12px!important;
}
   
   .prevNxt {
    font-size: 22px;
}
  
  .product-ever img, .product-extend img {
    width: 70%;     top: 43%;
  }
  .midTxt {
    width: 82%;
    top:48%;}
  .midRht img {
    padding-left: 15px;}
  .prev {
     padding-right:20px; line-height:27px}
  .next{padding-left:15px; line-height:27px}
  .wLine{    width: 3px; height:27px}
  .buyCta img {
    width: 242px;
}
     .buyCta {
    width: 100%;
    height: 18%;
    }
    
    .mainBackground .swiper-container {
        height:61%;
   background: #fff;
}
    .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    top: 50%!important;
    }
    
    .portraitView {
    width: 100%;
    height: 38%;
    }
    
.swiper-pagination-bullet-active {
    transform: scale(0.85);
    background: #db5ca9 !important;
}
}



@media only screen and (max-width:340px)  and (orientation: portrait){

  .mainBackground .logo img {
    width: 82px;
}
  .close-button img {
    width: 15px;
}
  .mainBackground .close-button {
    padding: 10px;
}
  
.prevNxt {
    font-size: 20px; height:13%
  
  }
  .prev {
    padding-right: 15px; height: 21px; line-height:21px
}
  .next {
    padding-left: 11px;     height: 21px; line-height:21px
}
  .wLine{
  height: 21px; width:2px;
  }
  .buyCta img {
    width: 200px;
}
  
  .swiper-pagination-bullet {
    width: 38px!important;
    height: 38px!important;
        margin: 0 10px!important;
    transform:scale(0.7)

  }
    .midTxt {
    width: 90%;
    top: 53%;
}
  
  .swiper-pagination-bullet-active {
     transform: scale(1);
  }
   .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
       top: 54%!important;  height:38px !important; 
}
  .product-ever img, .product-extend img {
    width: 85%;
    top: 45%;
}
}


@media only screen and (max-width:1400px) and (orientation:landscape){
  
  .mainBackground {
    width: 62%;
    height: 100%;
    border-bottom: 0;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 6% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 6% 100%);
    background-color:none !important;  overflow:hidden
      
}
  .landscapeView{display:block; }
   .landscapeView{    width: 38%;height: 100%;
    float: left;
    position: relative;}
  
  .discountDiv{
	
  height:90%;
     background:none !important
  
}

  .mainBackground .swiper-container {
   
    border: 0;    height: 100%; background:#ffffff !important;     width: 100%;
   
    float: right; 
}
  .midTxt{text-align:center; padding:0; height:51%; position:relative ; 
      width: 100%;top: 0;
    left: 0;
    transform: translate(0%,0%);}
  
  .midWrap{
  position: absolute;
    top: 50%;
    margin: 0 -50% 0 0;
    left: 50%;
    transform: translate(-50%,-50%);
    width:100%;
      height:auto
  }
  .prevNxt{
        position: absolute;
    left: 0; bottom:0
  }
  
  .midTxt img{    padding-bottom: 7%;
    margin: auto;
    width: 70%;}
  .extend, .ever{padding-top: 0 !important;
    }
.buyCta{
	background:none !important;
  height:9% ;
 
}
  .product-extend img, .product-ever img{
width: 60%;
    position: absolute;
    top: 45%;
    margin: 0 -50% 0 0;
    left: 50%;
    transform: translate(-50%,-50%);
}
  .portraitView{display:none;}
  .mainBackground .logo{display:none;}
  .product-extend .product1-text {
    left: 74%;
}
  
  .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    top: auto !important;
    bottom:10px !important;
    height: 13%!important;
    background:url('../images/line2.jpg');
        background-position: center center !important;
    background-repeat: no-repeat !important;
}
  .swiper-pagination-bullet {
    margin: 0 15px!important;
}
  
 
  .swiper-pagination {
    position: absolute !important;
}
.hidePortrait{display:block;    
  width: 71% !important;
    top: 47% !important;
    left: 57% !important;}
  .hideLandscape{display:none;}  
  
  .prev, .next{line-height:50px}
  .wLine{    height: 50px;}
}

@media only screen and (max-width:1100px) and (orientation:landscape){
 

  .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    top: 85%!important;
    height: 82px !important;
    
}
    
.prevNxt {
    font-size: 40px;
  }
 
  .buyCta img {
    width: 350px;
    padding-left: 20px;
}
  .product-ever img, .product-extend img {
    top: 45%;
  }
  .midTxt img {
    width: 80%;padding-bottom: 10%;
}
  .wLine{    height: 40px;}
  .prev, .next{
  line-height:40px
  }
}


@media only screen and (max-width:850px) and (orientation:landscape){

.mainBackground .close-button {
    padding: 10px;
}
  .close-button img {
    width: 20px;
}
.hidePortrait {
    width: 59% !important;
      top: 41%!important;
  }
  .lLogo img{
      width: 100px;
  }
  .midTxt img {
    width: 56% !important;
    padding-bottom: 3%;
}
  
  .ever, .extend {
    width: 70%!important;
}
  .prevNxt {
    
    font-size: 25px; 
}
  
  .prev {
     padding-right: 18px;
  }
  .next {
   padding-left: 18px;
}
  .wline{width:2px}
 .buyCta img {
    width: 200px;
  }
  
  .buyCta {
    height: 12%;
}
  .discountDiv {
    height: 88%;
}
   .swiper-pagination-bullet {
    width: 45px!important;
    height: 45px!important;
        margin: 0 10px!important;

  }
 
  
  .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    top: auto !important;
    
      bottom: 10px !important;      height: 45px!important;
}
  .next, .prev, .wLine {
    height: 25px; line-height:25px
}
  
  .product-ever img, .product-extend img {
    width: 55%;   
    top: 40%;
   
  }

  
}

@media only screen and (max-width:738px) and (orientation:landscape){
 .hidePortrait {
    width: 65% !important;
      top: 43%!important;
  }

.mainBackground .close-button {
    padding: 10px;
}
  .close-button img {
    width: 20px;
}
  
  .prevNxt {
    
    font-size: 25px; 
}
  
  .prev {
    padding-right: 18px;
  }
  .next {
   padding-left: 15px;
}
  .wLine{width:3px;  height: 28px; }
 .buyCta img {
    width: 200px;
  }
  
  .buyCta {
    height: 12%;
}
  .discountDiv {
    height: 88%;
}
  
  .next, .prev {
    height: 28px; line-height:28px
}
  
  .mainBackground .close-button {
    padding: 10px;
 
}
  .close-button img {
    width: 20px;
}
  
  .product-ever img, .product-extend img {
    width: 63%;     top: 38%;  left: 55%;
  }
 
.midTxt img {
    width: 65% !important;
    padding-bottom: 5%;
}
}


@media only screen and (max-width:650px) and (orientation:landscape){

  .close-button img {
    width: 15px;
}
  
    .hidePortrait {
    width: 55% !important;
      top: 43%!important;
  }
  .prevNxt {
    font-size: 23px;
}
 
.wLine {
    width: 2px;}
  .hidePortrait {
    width: 67%!important;
     top: 37%!important;

}
    
    .product-ever img, .product-extend img {
    width: 78%;
    top: 46%;
    left: 48%;
}
  
}
@media only screen and (max-width:600px) and (orientation:landscape){
  
 
  .mainBackground .close-button {
    padding: 10px;
}
  .swiper-pagination-bullet {
   
        margin: 0 10px!important;
  }
  .prevNxt {
    font-size: 20px;
  }
  
  .buyCta img {
    width: 180px;
}
    .midTxt img {
    width: 65% !important;
    padding-bottom: 22%;
}
    
    .close{
        
        width:7%;
    }
}



@media only screen and (max-width:450px) and (orientation:landscape){
    
 .midTxt img {
    padding-bottom: 10%;
}
    .prevNxt {
    height: 18%;
    }
    
    .product-ever img, .product-extend img {
    width: 55%;
    }
    
    .swiper-pagination-bullet {
    width: 40px!important;
    height: 40px!important;
    }
    
    .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    top: auto !important;
    bottom: 0px !important;
    }
}


@media only screen and (max-width: 768px) and (orientation:portrait){
    
   
}