.hero-overly{
  display:none;
}

@media (max-width: 767px) {
  .hero-overly{
  display:block;
}
  
  h1, h3, p, button, a, img {
    z-index:1;
    position:relative;
  }
  
  .hero-overly{
    height:42%;
    top:6%;
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), 
       only screen and (-min--moz-device-pixel-ratio: 2), 
       only screen and (-o-min-device-pixel-ratio: 2/1), 
       only screen and (min-device-pixel-ratio: 2)
{ 
  
  .hero-overly{
    height:90%;
    top:8%;
  }

}


@media only screen and (min-width: 375px) and (orientation: landscape)
{ 
  
  .hero-overly{
    height:93%;
    top:14%;
  }

}

@media only screen and (-webkit-min-device-pixel-ratio: 2.6), 
       only screen and (-min--moz-device-pixel-ratio: 2.6), 
       only screen and (-o-min-device-pixel-ratio: 2.6/1), 
       only screen and (min-device-pixel-ratio: 2.6) {
  
      .hero-overly{
    height:52%;
    top:6%;
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 3), 
       only screen and (-min--moz-device-pixel-ratio: 3), 
       only screen and (-o-min-device-pixel-ratio: 3/1), 
       only screen and (min-device-pixel-ratio: 3)
{ 
  .hero-overly{
    height:90%;
    top:8%;
  }


}

@media only screen and (-webkit-min-device-pixel-ratio: 3) {
  .hero-overly{
    height:90%;
    top:8%;
  }
}

}