/*====================================================
				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: #0a54d1;
	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{
	position: absolute;
    z-index: 9999;
    width: 6%;
    right: 0;
    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
====================================================*/


.bg1{
    position: absolute; 
    width:100%;
    height:100%;
    background:url('../images/FrameFirst.jpg');
    background-position: center;
    background-size: cover;   
}

.bg2{
    position: absolute; 
    width:100%;
    height:100%;
    background:url('../images/FrameSecond.jpg');
    background-position: center;
    background-size: cover; 
     opacity:0;
}

.bg3{
    position: absolute; 
    width:100%;
    height:100%;
    background:url('../images/FrameThird.jpg');
    background-position: center;
    background-size: cover;   
     opacity:0;
}

.endFrame{
    
    position: absolute; 
    width:100%;
    height:100%;
    background-color:#fff;
    opacity:0;
}

.text{
    position: absolute;
    width:100%;  height:100%; color:#fff;  font-size: 9vw;
    font-family: SamsungSharpSans-Bold;
    justify-content: center;
    align-items: center;    
  padding-top: 4%;
  text-align:center;
  opacity:0;
}

.text1 {
    position: absolute;
    top: 18%;
    left: 10%;
    width:30%;
    
}

.mobile {
    position: absolute;
    top: 15%;
    right: 10%;
    width: 22%;
}

.verizonLogo {
    width: 12%;
    top: 0;
    right: 5%;
    position: absolute;
}
.logo{
    height:4%;
}

.text2 {
    position: absolute;
    top: 60%;
    left: 10%;
    width: 20%;
}

.offerDetails{
    width: 10%;
    position: absolute;
    top: 82%;
    left: 10%;
}

.text1>img,.mobile>img,.logo>img,.verizonLogo>img,.text2>img,.offerDetails>img,.cta>img,.box>img,.blackCta>img{
    width : 100%;   
}


.logo {
    width: 8%;
    top: 3%;
    left: 5%;
    position: absolute;
}

.cta,.blackCta{
    width: 3%;
    position: absolute;
    top: 66%;
    left: 10%;
}

.box {
    width: 30%;
    position: absolute;
    top: 79.5%;
    left: 21%;
}


@media only screen and (max-width: 350px) and (orientation: portrait){
.port{
	display: block;
}
.land{
	display: none;
}
.Desktopmain{
	top:0%;
}
.logo{
	width: 35%;
	right: 5%;  
	top: 7%;            
}
.close{
	width: 8%;
	right: 2%;       
}
 .text{ width:80%;  font-size: 15vw; left:10%; word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word; }
    
    .bg1{
    position: absolute; 
    width:100%;
    height:100%;
    background:url('../images/FrameFirstPort.jpg');
    background-position: center;
    background-size: cover;   
}

.bg2{
    position: absolute; 
    width:100%;
    height:100%;
    background:url('../images/FrameSecondPort.jpg');
    background-position: center;
    background-size: cover;   
}

.bg3{
    position: absolute; 
    width:100%;
    height:100%;
    background:url('../images/FrameThirdPort.jpg');
    background-position: center;
    background-size: cover;   
}
    
    .text{ width:80%;  font-size: 15vw; left:10%; word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word; }
    
   .mobile {
    top: 42%;
    right: 4%;
    width: 60%;
}
   
.text1 {
    top: 13%;
    left: 10%;
    width: 75%;
}
    .text2 {
    top: 41%;
    left: 10%;
    width: 48%;
}
    .cta, .blackCta {
     width: 8%;
     top: 52%;
}
    
    .verizonLogo {
    width: 30%;
    top: 4%;
    right: 6%;
    }
    .logo {
    width: 25%;
    left: 10%;
    top: 8%;
}
    
    .offerDetails {
      opacity: 0;
    }
}
@media only screen and (min-width: 350px) and (max-width: 500px) and (orientation: portrait){
	.port{
		display: block;
	}
	.land{
		display: none;
	}
	.Desktopmain{
		top:0%;
	}
	.logo{
		width: 35%;
		right: 5%;  
		top: 7%;            
	}
	.close{
		width: 6%;
		right: 2%;       
	}
.bg1{
    position: absolute; 
    width:100%;
    height:100%;
    background:url('../images/FrameFirstPort.jpg');
    background-position: center;
    background-size: cover;   
}

.bg2{
    position: absolute; 
    width:100%;
    height:100%;
    background:url('../images/FrameSecondPort.jpg');
    background-position: center;
    background-size: cover;   
}

.bg3{
    position: absolute; 
    width:100%;
    height:100%;
    background:url('../images/FrameThirdPort.jpg');
    background-position: center;
    background-size: cover;   
}
    
    .text{ width:80%;  font-size: 15vw; left:10%; word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word; }
    
   .mobile {
    top: 42%;
    right: 4%;
    width: 52%;
}
    
    .text1 {
    top: 14%;
    left: 10%;
    width: 65%;
}
    .text2 {
    top: 46%;
    left: 10%;
    width: 45%;
}
    .cta, .blackCta {
     width: 8%;
     top: 52%;
}
    
    .verizonLogo {
    width: 30%;
    top: 4%;
    right: 6%;
    }
    .logo {
    width: 25%;
    left: 10%;
    top: 8%;
}
     .offerDetails {
      opacity: 0;
    }
}




@media only screen and (max-width: 600px) and (orientation: landscape){
.logo{
	width:15%;
    top: 6%;
    left: 10%;
}
.verizonLogo {
    width: 18%;
    top: 3%;
    right: 6%;
    }
.Desktopmain {
	top:0%;
}
    .mobile {
     width: 35%;
    }
    .text1 {
    width: 35%;
    }
    .text2 {
    top: 50%;
    width: 25%;
    }
    .cta, .blackCta {
    width: 5.5%;
    top: 56%;
    }
    .box {
    width: 60%;
    position: absolute;
    top: 87%;
    left: 26%;
}
    .offerDetails {
    width: 15%;
    position: absolute;
    top: 90%;
    left: 10%;
}
}

@media only screen and (max-width: 700px) and (max-height:300px) and (orientation: landscape) {
 .text2 {
    top: 56%;
    width: 28%;
}
    
    .mobile {
    top: 16%;
    right: 8%;
    width: 28%;
}
    
    .cta, .blackCta {
    width: 6%;
    top: 62%;
}
    
    .text1 {
      top: 16%;
    }
    
    .offerDetails {
     width: 14%;
     top: 90%;
    }
    
    .box {
    width: 48%;
    top: 87%;
    left: 26%;
}
}

 
@media only screen and (max-width: 899px) and (min-width: 630px) and (orientation: landscape){
.Desktopmain {
	top:0%;
	}

}