html, body {
  height: 100%;
  background: #ffccff; 
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: #fff;
}

.index2 {
    background: #ffccff;
    }
    
.overlaybtn {
  position: absolute;
  background: #89c8d7;
  opacity: 0;
  color: #fff;
  font-size: 2px;
}

  
.ctr
{ position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); }

@media only screen and (max-width: 480px) {
.home {
  /* The image used */
  background: #ffccff;
  background: url("images/Gogopano-mobile.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  max-width:100%;

}
    
.btn1location { margin-top:8%; width:100px;}
.btn2 { width:100px; }
.btn2location { position:absolute; bottom:0; height:80px;width:100%;}
.btn3 { width:90%; }
.btn3location { width:100%; margin:auto; }
}





@media (min-width: 481px) and (max-width: 1023px) {
    
.home {
  
  background: #ffccff;
  background: url("images/Gogopano-mobile.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  max-width:100%;
}    
    
.btn1location { z-index:1;position:relative;margin-top: 3%; margin-left:-50%; width:100px; }
.btn2 { width:100px; }
.btn2location { position:absolute; bottom:0; height:60px;width:100%;}
.btn3 { width:100%; }
.btn3location { margin:auto;width:60%; }
}

@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: portrait) { 

.home {
  
  background: #ffccff;
  background: url("images/Gogopano-mobile.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  max-width:100%;
}    
    
.btn1location { z-index:10;margin-top: 3%; margin-left:-50%; width:100px; }
.btn2 { width:100px; }
.btn2location { position:absolute; bottom:0; height:60px;width:100%;}
.btn3 { width:100%; }
.btn3location { margin:auto;width:65%; }
}



@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {
  
  .home {
  /* The image used */
  background: url("images/Gogopano.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

} 

.btn1location { z-index:1; position:relative;margin-top: 3%; margin-left:-50%; width:100px; }
.btn2 { width:100px; }
.btn2location { position:absolute;  bottom:0; height:60px;width:100%;}
.btn3 { width:100%; }
.btn3location { margin:auto;width:75%; }
}
  
  
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation:landscape) {
  
  .home {
  /* The image used */
  background: url("images/Gogopano.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

} 

.btn1location { z-index:1; position:relative;margin-top: 3%; margin-left:-50%; width:100px; }
.btn2 { width:100px; }
.btn2location { position:absolute;  bottom:0; height:60px;width:100%;}
.btn3 { width:100%; }
.btn3location { margin:auto;width:75%; }
}
  
  

/* Extra large devices (large laptops and desktops, 1025px and up) */
@media only screen and (min-width: 1025px) {
    
    
    .home {
  background: url("images/Gogopano.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

} 

.btn1location { z-index:10; margin-top: 3%; margin-left:-50%; width:100px; }
.btn2 { width:100px; }
.btn2location { position:absolute;  bottom:0; height:60px;width:100%;}
.btn3 { width:100%; }
.btn3location { margin:auto;width:50%; }
}