div {
    position: absolute;
}
.closed{
    display:none;
}
.close{
    right: 0.5%;
    top: 1%;
    width: 2%;
    cursor:pointer;
    z-index: 999;
}
.header{
    width: 100%;
    height: 15%;
    background: #039045;
} 
.logo{
    width: 40%;
    left: 32%;
}
.introText1{
    width: 30%;
    position: absolute;
    left: 37%;
    top: 38%;
}
.introText2{
    width: 30%;
    position: absolute;
    left: 37%;
    top: 38%;
}
.introText3{
    width: 30%;
    position: absolute;
    left: 37%;
    top: 38%;
}
.drink{
    width: 30%;
    position: absolute;
    left: 35%;
    top: -3%;
}
.fruit1{
    width: 50%;
    position: absolute;
    left: 28%;
    bottom: -20%;
}
.fruit2{
    width: 35%;
    position: absolute;
    left: 33%;
    top: -13%;
}
.fruit3{
    width: 35%;
    position: absolute;
    left: 34%;
    top: -9%;
}
.fruit4{
    width: 35%;
    position: absolute;
    left: 31%;
}
.lines{
    width: 40%;
    position: absolute;
    right: 10%;
    bottom: 20%;
}
.productleft{
    width: 23%;
    position: absolute;
    right: 26%;
    bottom: 2%;
}
.productright{
    width: 23.5%;
    position: absolute;
    right: 8%;
    bottom: -3%;
}
.headText1{
    position: absolute;
    top: 37%;
    left: 4%;
}
.headText2{
    position: absolute;
    top: 37%;
    left: 4%;
}
.headText3{
    position: absolute;
    top: 37%;
    left: 4%;
}
.cta{
    position: absolute;
    opacity: 1;
    bottom: 20%;
    left: 14%;
}
.hotspot1{
    position: absolute;
    top: 16%;
    right: 27.5%;
}
.hotspot1open{
    position: absolute;
    top: 10%;
    right: 25%;
}
.hotspot1close{
    width: 4%;
    height: 5%;
    position: absolute;
    top: 23%;
    right: 27.3%;
}
.hotspot2{
    position: absolute;
    bottom: 31%;
    right: 36.5%;
}
.hotspot2open{
    position: absolute;
    bottom: 25%;
    right: 33%;
}
.hotspot2close{
    width: 4%;
    height: 5%;
    position: absolute;
    bottom: 26%;
    right: 35.3%;
}
.hotspot3{
    position: absolute;
    bottom: 21%;
    right: 18.5%;
}
.hotspot3open{
    position: absolute;
    bottom: 13%;
    right: 16%;
}
.hotspot3close{
    width: 4%;
    height: 5%;
    position: absolute;
    bottom: 15%;
    right: 18.3%;
}
.hotspot4{
    position: absolute;
    top: 39%;
    right: 18.5%;
}
.hotspot4open{
    position: absolute;
    top: 35%;
    right: 16%;
}
.hotspot4close{
    width: 4%;
    height: 5%;
    position: absolute;
    top: 49%;
    right: 18.3%;
}
/* Tab Land */
  @media only screen and (max-width: 533px) and (max-width: 533px) {
    .close{
        right: 0.5%;
        top: 1%;
        width: 4%;
        cursor:pointer;
        z-index: 999;
    }
    .header{
        width: 100%;
        height: 15%;
        background: #039045;
    } 
    .logo{
        width: 50%;
        left: 28%;
        top: 2%;    
    }
    .introText1{
        width: 40%;
        position: absolute;
        left: 32%;
        top: 38%;  
    }
    .introText2{
        width: 45%;
        position: absolute;
        left: 29%;
        top: 37%;
    }
    .introText3{
        width: 40%;
        position: absolute;
        left: 32%;
        top: 39%;  
    }
    .drink{
        width: 40%;
        position: absolute;
        left: 35%;
        top: -3%;
    }
    .fruit1{
        width: 50%;
        position: absolute;
        left: 35%;
        bottom: 9%;
    }
    .fruit2{
        width: 35%;
        position: absolute;
        left: 42%;
        top: 4%;
    }
    .fruit3{
        width: 35%;
        position: absolute;
        left: 42%;
        top: 5%;
    }
    .fruit4{
        width: 45%;
        position: absolute;
        left: 30%;
        top: 0%;
    }
    .lines{
        width: 40%;
        position: absolute;
        right: 10%;
        bottom: 40%;
    }
    .productleft{
        width: 23%;
        position: absolute;
        right: 26%;
        bottom: 20%;
    }
    .productright{
        width: 23.5%;
        position: absolute;
        right: 8%;
        bottom: 17%;
    }
    .headText1{
        width:45%;
        position: absolute;
        top: 37%;
        left: 4%;
    }
    .headText2{
        width:45%;
        position: absolute;
        top: 37%;
        left: 4%;
    }
    .headText3{
        width:45%;
        position: absolute;
        top: 37%;
        left: 4%;  
    }
    .cta{
        bottom: 28%;
        left: 17%;
        width: 20%;
        position: absolute;
    }
    .hotspot1{
        width: 6%;
        position: absolute;
        top: 28%;
        right: 26.5%;
    
    }
    .hotspot1open{
        width: 15%;
        position: absolute;
        top: 22%;
        right: 22%;
    }
    .hotspot1close{
        width: 10%;
        height: 6%;
        position: absolute;
        top: 36%;
        right: 24.3%;
    }
    .hotspot2{
        width: 6%;
        position: absolute;
        bottom: 40%;
        right: 36.5%;
    }
    .hotspot2open{
        width: 15%;
        position: absolute;
        bottom: 34%;
        right: 33%;
    }
    .hotspot2close{
        width: 10%;
        height: 6%;
        position: absolute;
        bottom: 34%;
        right: 35.3%;
    }
    .hotspot3{
        width: 6%;
        position: absolute;
        bottom: 33%;
        right: 15.5%;
    }
    .hotspot3open{
        width: 15%;
        position: absolute;
        bottom: 27%;
        right: 12%;
    }
    .hotspot3close{
        width: 10%;
        height: 6%;
        position: absolute;
        bottom: 28%;
        right: 13.3%;
    }
    .hotspot4{
        width: 6%;
        position: absolute;
        top: 42%;
        right: 16.5%;
    }
    .hotspot4open{
        width: 15%;
        position: absolute;
        top: 35%;
        right: 16%;
    }
    .hotspot4close{
        width: 10%;
        height: 6%;
        position: absolute;
        top: 49%;
        right: 18.3%;
    }
  }
  /* Mobile landscape */
  @media only screen and (max-width: 458px) and (max-width: 458px) {
    .logo{
        width: 50%;
        left: 28%;
        top: 0%;
    }
    .cta{
        bottom: 22%;
        left: 17%;
        width: 20%;
        position: absolute;
    }
    .lines{
        width: 40%;
        position: absolute;
        right: 10%;
        bottom: 30%;
    }
    .productleft {
        width: 23%;
        position: absolute;
        right: 26%;
        bottom: 15%;
    }
    .productright {
        width: 23.5%;
        position: absolute;
        right: 8%;
        bottom: 11%;
    }
    .hotspot1{
        width: 6%;
        position: absolute;
        top: 16%;
        right: 26.5%;
    
    }
    .hotspot1open{
        width: 15%;
        position: absolute;
        top: 15%;
        right: 22%;
    }
    .hotspot1close{
        width: 10%;
        height: 8%;
        position: absolute;
        top: 34%;
        right: 24.3%;
    }
    .hotspot2{
        width: 6%;
        position: absolute;
        bottom: 40%;
        right: 36.5%;
    }
    .hotspot2open{
        width: 15%;
        position: absolute;
        bottom: 34%;
        right: 33%;
    }
    .hotspot2close{
        width: 10%;
        height: 9%;
        position: absolute;
        bottom: 34%;
        right: 35.3%;
    }
    .hotspot3{
        width: 6%;
        position: absolute;
        bottom: 30%;
        right: 15.5%;
    }
    .hotspot3open{
        width: 15%;
        position: absolute;
        bottom: 20%;
        right: 12%;
    }
    .hotspot3close{
        width: 10%;
        height: 9%;
        position: absolute;
        bottom: 20%;
        right: 14.3%;
    }
    .hotspot4{
        width: 6%;
        position: absolute;
        top: 34%;
        right: 16.5%;
    }
    .hotspot4open{
        width: 15%;
        position: absolute;
        top: 30%;
        right: 14%;
    }
    .hotspot4close{
        width: 10%;
        height: 9%;
        position: absolute;
        top: 49%;
        right: 15.3%;
    }
}
/* 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;
    }
    .header{
        width: 100%;
        height: 15%;
        background: #039045;
    } 
    .logo{
        position: absolute;
        width: 80%;
        top: 3%;
        left: 12%; 
    }
    .introText1{
        width: 50%;
        position: absolute;
        left: 25%;
        top: 38%;
    }
    .introText2{
        width: 50%;
        position: absolute;
        left: 25%;
        top: 38%;
    }
    .introText3{
        width: 45%;
        position: absolute;
        left: 27%;
        top: 40%;
    }
    .drink{
        width: 70%;
        position: absolute;
        left: 15%;
        top: 12%;  
    }
    .fruit1{
        width: 80%;
        position: absolute;
        left: 16%;
        bottom: -3%;
    }
    .fruit2{
        width: 70%;
        position: absolute;
        left: 17%;
        top: 10%;
    }
    .fruit3{
        width: 55%;
        position: absolute;
        left: 23%;
        top: 23%;
    }
    .fruit4{
        width: 75%;
        position: absolute;
        left: 10%;
        top: 14%;
    }
    .lines{
        width: 70%;
        position: absolute;
        right: 14%;
        bottom: 16%;
    }
    .productleft{
        width: 35%;
        position: absolute;
        right: 43%;
        bottom: 8%;
    }
    .productright{
        width: 36.5%;
        position: absolute;
        right: 15%;
        bottom: 4%;
    }
    .headText1{
        width: 60%;
        position: absolute;
        top: 19%;
        left: 20%;
    }
    .headText2{
        width: 60%;
        position: absolute;
        top: 19%;
        left: 21%;
    }
    .headText3{
        width: 55%;
        position: absolute;
        top: 20%;
        left: 23%;    
    }
    .cta{
        bottom: 6%;
        left: 42%;
        width: 20%;
        position: absolute;
    }
    .hotspot1{
        width: 6%;
        position: absolute;
        top: 49%;
        right: 45%;
    }
    .hotspot1open{
        width: 15%;
        position: absolute;
        top: 45%;
        right: 41%;
    }
    .hotspot1close{
        width: 10%;
        height: 4%;
        position: absolute;
        top: 52%;
        right: 43.3%;
    }
    .hotspot2{
        width: 6%;
        position: absolute;
        bottom: 23%;
        right: 59.5%;
    }
    .hotspot2open{
        width: 15%;
        position: absolute;
        bottom: 20%;
        right: 53%;
    }
    .hotspot2close{
        width: 10%;
        height: 6%;
        position: absolute;
        bottom: 18%;
        right: 55.3%;
    }
    .hotspot3{
        width: 6%;
        position: absolute;
        bottom: 21%;
        right: 31%;
        
    }
    .hotspot3open{
        width: 15%;
        position: absolute;
        bottom: 19%;
        right: 27%;       
    }
    .hotspot3close{
        width: 10%;
        height: 6%;
        position: absolute;
        bottom: 18%;
        right: 28.3%;
    }
    .hotspot4{
        width: 6%;
        position: absolute;
        top: 62%;
        right: 30.5%;
    }
    .hotspot4open{
        width: 15%;
        position: absolute;
        top: 58%;
        right: 27%;
    }
    .hotspot4close{
        width: 10%;
        height: 6%;
        position: absolute;
        top: 66%;
        right: 28.3%;
    }
}
/* 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;
    }
    .header{
        width: 100%;
        height: 15%;
        background: #039045;
    } 
    .logo{
        position: absolute;
        width: 100%;
        top: 3%;
        left: 0%;
    }
    .introText1{
        width: 60%;
        position: absolute;
        left: 20%;
        top: 38%;
    }
    .introText2{
        width: 60%;
        position: absolute;
        left: 20%;
        top: 38%;
    }
    .introText3{
        width: 55%;
        position: absolute;
        left: 22%;
        top: 40%;
    }
    .drink{
        width: 70%;
        position: absolute;
        left: 15%;
        top: 12%;  
    }
    .fruit1{
        width: 80%;
        position: absolute;
        left: 16%;
        bottom: 18%;
    }
    .fruit2{
        width: 70%;
        position: absolute;
        left: 17%;
        top: 10%;
    }
    .fruit3{
        width: 55%;
        position: absolute;
        left: 23%;
        top: 23%;
    }
    .fruit4{
        width: 75%;
        position: absolute;
        left: 10%;
        top: 14%;
    }
    .lines{
        width: 80%;
        position: absolute;
        right: 9%;
        bottom: 19%;
    }
    .productleft{
        width: 35%;
        position: absolute;
        right: 43%;
        bottom: 8%;
    }
    .productright{
        width: 36.5%;
        position: absolute;
        right: 15%;
        bottom: 6%;
    }
    .headText1{
        width: 80%;
        position: absolute;
        top: 30%;
        left: 10%;
    }
    .headText2{
        width: 80%;
        position: absolute;
        top: 30%;
        left: 10%;
    }
    .headText3{
        width: 80%;
        position: absolute;
        top: 30%;
        left: 10%;    
    }
    .cta{
        bottom: 2%;
        left: 42%;
        width: 20%;
        position: absolute;
    }
    .hotspot1{
        width: 6%;
        position: absolute;
        top: 60%;
        right: 45%;
    }
    .hotspot1open{
        width: 15%;
        position: absolute;
        top: 57%;
        right: 41%;
    }
    .hotspot1close{
        width: 10%;
        height: 4%;
        position: absolute;
        top: 63%;
        right: 43.3%;
    }
    .hotspot2{
        width: 6%;
        position: absolute;
        bottom: 23%;
        right: 59.5%;
    }
    .hotspot2open{
        width: 15%;
        position: absolute;
        bottom: 20%;
        right: 53%;
    }
    .hotspot2close{
        width: 10%;
        height: 6%;
        position: absolute;
        bottom: 18%;
        right: 55.3%;
    }
    .hotspot3{
        width: 6%;
        position: absolute;
        bottom: 21%;
        right: 31%;
        
    }
    .hotspot3open{
        width: 15%;
        position: absolute;
        bottom: 19%;
        right: 27%;       
    }
    .hotspot3close{
        width: 10%;
        height: 6%;
        position: absolute;
        bottom: 18%;
        right: 28.3%;
    }
    .hotspot4{
        width: 6%;
        position: absolute;
        top: 62%;
        right: 30.5%;
    }
    .hotspot4open{
        width: 15%;
        position: absolute;
        top: 58%;
        right: 27%;
    }
    .hotspot4close{
        width: 10%;
        height: 6%;
        position: absolute;
        top: 64%;
        right: 28.3%;
    }
}