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;
  }
.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%;}
.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: 3%;
    right: 0%;
    left: auto;
    top: 0;
    z-index: 999 !important;
    padding: 5px;
}
.bannerclose img,.teaserclose img,.expandclose img,.ls_close img{width:100%;}

.mobile{
    width: 86.5%;
    height: 100%;
    position: absolute;
    top: 19.5%;
    left: 7%;
}
 .banner{
    width: 100%;
    height: auto;
    bottom: 0;
    position: absolute;
    display:none;
     overflow:hidden;
}
.teaser{
    width:100%;
    height:34.2%;
    bottom:0;
    position:absolute;
    background-color: #1965cf;
    overflow:hidden;
}
.teaser_man_img{
    width:55%;
    height:auto;
    left:0;
    position: absolute;
    bottom:0;
}
.teaser_man_img img{
    width:100%;
}
.teaser_txt{
    right: 0%;
    width: 55%;
    top: 5%;
    position: absolute;
}
.teaser_txt img,.teaser_logo img,.teaser_cta img{width:100%;}
.teaser_logo{
    right: 2%;
    width: 47%;
    height: auto;
    top: 74%;
    position: absolute;
}
.teaser_cta{
    width: 48%;
    right: 0%;
    top: 43%;
    position: absolute;
}
.expand{
    width:100%;
    height:100%;
    position:absolute;
    display:none;
}
.navy_blue_shape{
    width: 100%;
    height: 100%;
    background-color: #03273d;
    position: absolute;
    top: 0%;
}
.main{width:100%;height:100%;}
.upper_curve{
    width:100%;
    height:50%;
    top:7%;
    position:absolute;
    overflow:hidden;
}
.man_img{
    width: 74%;
    height: auto;
    top: 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
}
.man_img img{
    width:100%;
}
.bottom_curve{
    width: 100%;
    height: auto;
    bottom: 9%;
    position: absolute;
    overflow: hidden;
}
.bottom_curve img{width:100%;}
.text{
width: 85%;
    height: auto;
    top: 22%;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 0;
}
.text img,.cta img,.logo img{
    width:100%;
}
.cta{
    width: 65%;
    height: auto;
    top: 55%;
    position: absolute;
    margin: 0 auto;
    bottom: 0;
    right: 0;
    left: 0;
}
.logo{
    width: 70%;
    height: auto;
    top: 80%;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    margin: 0 auto;
}
.uppershape{
    width: 100%;
    height: 100%;
    top: 0%;
    background-color: white;
    position: absolute;
}
.bottomshape{
    width:100%;
    height:100%;
    bottom:0%;
    background-color: white;
    position: absolute;
}
.expand_ls{
    width:100%;
    height:100%;
    background-color: #0072ce;
    display:none;
}
.rotate_text{
    width: 100%;
    position: absolute;
    text-align: center;
    color: white;
}
.mob{
   width: 8%;
    height: auto;
    position: absolute;
    top: 40%;
    left:50%;
}
.mob img{
    width:100%;
}
 .spinner {
	-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;
}

@-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);
  }
}