#hero .overlay {
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   background-color: #000;
   opacity: 0;
}

#hero .overlay.visible {
  opacity: .5;
}

@media screen and (max-width: 767px){

} 

@media screen and (max-width: 567px){
  
}