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

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

.homebkg {
  /* The image used */
  background-image: url("images/Melodia2.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center top;    
  background-size:100%;
  /* Full height */
  height: 100%;

}   

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.homebkg {
  /* The image used */
  background: #00b59d;
  background-image: url("images/Melodia2-Mobile.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center top;    
  background-size:100%;
  /* Full height */
  height: 100%; }
    
    
.btn1location { top: 31%;   left: 1%;   width: 80px;    height: 80px;   }
.btn2location { top: 30%;   left: 27%;  width: 85px;    height: 80px;   }
.btn3location { top: 35%;   left: 67%;  width: 115px;   height: 80px;   }
.btn4location { top: 0%;    left: 0%;   width: 1px;     height: 1px;    }
}


/* Small devices (portrait tablets and large phones, 600px and up) MATE LANDSCAPE iPX */
@media only screen and (min-width: 600px) {
.btn1location { top: 48%;   left: 35%;  width: 60px;    height: 100px;   }
.btn2location { top: 48%;   left: 49%;  width: 70px;    height: 100px;   }
.btn3location { top: 58%;   left: 64%;  width: 110px;   height: 100px;   }
.btn4location { top: 48%;   left: 7%;   width: 75px;    height: 100px;   }
}


/* Medium devices (landscape tablets, 768px and up) ipad potrait*/
@media only screen and (min-width: 768px) {
.btn1location { top: 15%;   left: 34%;  width: 75px;    height: 90px;   }
.btn2location { top: 15%;   left: 49%;  width: 80px;    height: 90px;   }
.btn3location { top: 17%;   left: 64%;  width: 120px;   height: 90px;   }
.btn4location { top: 15%;   left: 7%;   width: 85px;    height: 90px;   }
}

/* Large devices (laptops/desktops, 992px and up) IPAD LANDSCAPE */
@media only screen and (min-width: 992px) {
.btn1location { top: 31%;   left: 35%;  width: 100px;   height: 80px; }
.btn2location { top: 31%;   left: 49%;  width: 110px;   height: 80px; }
.btn3location { top: 35%;   left: 63%;  width: 170px;   height: 80px; }
.btn4location { top: 31%;   left: 6%;   width: 150px;   height: 80px; }
}


/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.btn1location { top: 36%;   left: 35%;  width: 100px;   height: 120px; }
.btn2location { top: 36%;   left: 49%;  width: 110px;   height: 120px; }
.btn3location { top: 40%;   left: 64%;  width: 170px;   height: 120px; }
.btn4location { top: 36%;   left: 6%;   width: 150px;   height: 120px; }
}