div {
    position: absolute;
}
.closed{
    display:none;
}
.close{
    right: 0.5%;
    top: 1%;
    width: 2%;
    cursor:pointer;
    z-index: 99;
}
.uppersection{
    width: 100%;
    height: 80%;
    background: #e31e3c;
}
.pills{
    width: 25%;
    bottom: -10%;
}
.zerotext{
    width: 20%;
    top: 5%;
    left: 30%;
}
.zerotextport{
    display: none;
}

.y{
    width: 2.5%;
    left: 27.3%;
    top: 48%;
}
.s,.ytab,.stab{
    display:none;
}
.e{
    width:2.6%;
    right: 53.8%;
    top: 47.6%;
}
.sdesk{
    right: 37.7%;
    width: 2.5%;
    top: 47.5%;
}
.astrik{
    right: 47%;
    width: 25px;
    top: 44%;
}
.doyou{
    width: 60%;
    top: 45%;
    right: 20%;
}
.see-details{
    bottom: 1%;
    width: 7%;
    right: 10%;
}
.thumbnail{
    width: 30%;
    top: 25%;
    right: 10%;
}
.lowersection{
    width: 100%;
    height: 20%;
    background: #fff;
    bottom:0;
}
.cta{
    width: 20%;
    bottom: 20%;
    left: 10%;
}
.logo{
    width: 25%;
    right: 10%;
    bottom: 34%;
}
.logoport{
    display:none;
}
.overlay{
    width:100%;
    height:100%;
    background: #000000;
    opacity:0.8;
    z-index:990;
}
video{
    width:100%;
}
.videoplayer{
    width: 55%;
    top: 20%;
    left: 25%;
}
.videoclose{
    right: 0.5%;
    top: 1%;
    width: 2%;
    cursor:pointer;
    z-index: 991;
}
img{
    width:100%;
    height:auto;
}
.doyouport{
    display:none;
}
.yport,.eport,.sport,.astrikport{
    display:none;
}
/* Tab Land */
  @media only screen and (max-width: 533px) and (max-width: 533px) {
    .zerotext {
        width: 23%;
        top: 18%;
        left: 30%;
    }
    .thumbnail {
        width: 35%;
        top: 35%;
        right: 5%;
    }
    .close,.videoclose{
        width: 3%;
    }
    .y{
        width: 13px;
        left: 27.2%;
        top: 46.7%;
    }
    .e {
        width: 13px;
        right: 53.8%;
        top: 46.2%;
    }
    .s {
        right: 37.7%;
        width: 13px;
        top: 46.2%;
        display:block;
    }
    .sdesk{
        display:none;
    }
    .astrik {
        right: 46%;
        width: 10px;
        top: 44%;
    }
    .videoplayer {
        width: 55%;
        top: 30%;
        left: 22%;
    }
    .zerotext {
        width: 20%;
        top: 21%;
        left: 30%;
    }   
    .see-details {
        bottom: 1%;
        width: 10%;
        right: 5%; 

  }
}
  /* Mobile landscape */
  @media only screen and (max-width: 458px) and (max-width: 458px) {
    .zerotext {
        width: 20%;
        top: 15%;
        left: 30%;
    }
    .thumbnail {
        width: 30%;
        top: 35%;
        right: 10%;
    }
    .close,.videoclose{
        width: 3%;
    }
    .y{
        width: 11px;
        left: 27.4%;
        top: 46.9%;
    }
    .e {
        width: 12px;
        right: 53.6%;
        top: 46.5%;
    }
    .s {
        right: 37.7%;
        width: 11px;
        top: 46.5%;
        display:block;
    }
    .sdesk{
        display:none;
    }
    .astrik {
        right: 46%;
        width: 10px;
        top: 42%;
    }
    .videoplayer {
        width: 55%;
        top: 23%;
        left: 22%;
    }
    

}
/* Tab Potrait */
@media only screen and (min-width: 400px) and (max-width: 400px) {
    .close{
        right: 0.5%;
        top: 1%;
        width: 4%;
        cursor:pointer;
        z-index: 999;
    }
    .pills{
            width: 40%;
            bottom: -1%;
            left: -10%;
    }
    .thumbnail {
        width: 60%;
        top: 42%;
        right: 6%;
    }
    .see-details {
        bottom: 18%;
        width: 20%;
        right: 6%;
    }
    .zerotext{
      display:none
    }
    .zerotextport {
        display: block;
        width: 65%;
        top: 12%;
        right: 5%;
    }
      .lowersection {
        width: 100%;
        height: 20%;
        background: #fff;
        bottom: 10%;
      }
      .cta {
        width: 40%;
        bottom: 10%;
        left: 2%;
      }
      .logo{
        display:none;
      }
      .logoport {
        display: block;
        width: 30%;
        right: 6%;
        bottom: 6%;
      }
      .videoclose{
        right: 0.5%;
        top: 1%;
        width: 6%;
        cursor:pointer;
        z-index: 991;
    }
    .close{
        right: 0.5%;
        top: 1%;
        width: 6%;
        cursor:pointer;
        z-index: 99;
    }
    .doyouport{
        display:block;
        width: 55%;
        top: 32%;
        left: 27%;
    }
    .doyou{
        display:none;
    }
    .y,.e,.s,.sdesk,.astrik,.yport,.sport{
        display:none;
    }
    .ytab {
        width: 23px;
        left: 44.2%;
        top: 33.7%;
        display: block;
    }
    .eport {
        width: 24px;
        right: 51.8%;
        top: 45.5%;
        display: block;
    }
    .stab {
        right: 57.7%;
        width: 22px;
        top: 57.9%;
        display: block;
    }
    .astrikport{
        width: 7%;
        top: 40%;
        display: block;
        left: 58%;
    }
    .videoplayer {
        width: 100%;
        top: 30%;
        left: 0%;
    }
}
/* Mobile Portrait*/
@media only screen and (min-width: 257px) and (max-width: 257px) {
    .close{
        right: 0.5%;
        top: 1%;
        width: 4%;
        cursor:pointer;
        z-index: 999;
    }
    .pills{
            width: 40%;
            bottom: -1%;
            left: -10%;
    }
    .thumbnail {
        width: 60%;
        top: 50%;
        right: 6%;
    }
    .see-details {
        bottom: 18%;
        width: 20%;
        right: 6%;
    }
    .zerotext{
      display:none
    }
    .zerotextport{
            display: block;
            width: 65%;
            top: 26%;
            right: 5%;
      }
      .lowersection {
        width: 100%;
        height: 20%;
        background: #fff;
        bottom: 10%;
      }
      .cta {
        width: 40%;
        bottom: 10%;
        left: 2%;
      }
      .logo{
        display:none;
      }
      .logoport {
        display: block;
        width: 30%;
        right: 6%;
        bottom: 6%;
      }
      .videoclose{
        right: 0.5%;
        top: 1%;
        width: 6%;
        cursor:pointer;
        z-index: 991;
    }
    .close{
        right: 0.5%;
        top: 1%;
        width: 6%;
        cursor:pointer;
        z-index: 99;
    }
    .doyouport{
        display:block;
        width: 55%;
        top: 32%;
        left: 27%;
    }
    .doyou{
        display:none;
    }
    .y,.e,.s,.sdesk,.astrik,.ytab,.stab{
        display:none;
    }
    .yport {
        width: 15px;
        left: 44.2%;
        top: 33.7%;
        display:block;
    }
    .eport {
        width: 16px;
        right: 50.8%;
        top: 42.2%;
        display:block;
    }
    .sport {
        right: 57.7%;
        width: 15px;
        top: 50.9%;
        display:block;
    }
    .astrikport{
            width: 6%;
            top: 40%;
            display: block;
            left: 60%;
    }
    .videoplayer {
        width: 100%;
        top: 30%;
        left: 0%;
    }

}