#map-locator-content {
  height: 450px;
  width: 100%;
  min-width: 300px;
}

#map-locator-modal-map {
  height: 350px;
  width: 100%;
  min-width: 250px;
}

/* for small phones like the iPhone 5 */
@media screen and (max-width: 481px) and (max-height: 600px) {
  #map-locator-content {
    height: 450px;
    width: 100%;
    min-width: 300px;
  }

  #map-locator-modal-map {
    height: 350px;
    width: 100%;
    min-width: 250px;
  }
}


/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
 */

@media screen and (min-width: 481px) and (max-width: 780px) {
  #map-locator-content {
    height: 600px;
    width: 550px;
  }

  #map-locator-modal-map {
    height: 500px;
    width: 500px;
  }
}


/*  
  ##Device = Tablets, Ipads 
  ##Screen = B/w 768px to 1000px
 */

@media screen and (min-width: 780px) {
  #map-locator-content {
    height: 600px;
    width: 700px;
  }

  #map-locator-modal-map {
    height: 500px;
    width: 650px;
  }
}



/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1001px to 1280px
 */

@media screen and (min-width: 1001px) {
  #map-locator-content {
    height: 600px;
    width: 700px;
  }

  #map-locator-modal-map {
    height: 500px;
    width: 650px;
  }
}



/* 
  ##Device = Desktops
  ##Screen = 1281px to 1980px
 */

@media screen and (min-width: 1281px) {
  #map-locator-content {
    height: 600px;
    width: 700px;
  }

  #map-locator-modal-map {
    height: 500px;
    width: 650px;
  }
}


/* 
    ##Device = High resolution 4k Desktops
    ##Screen = 1981px to 4k resolutions 
  */

@media screen and (min-width: 1981px) {
  #map-locator-content {
    height: 600px;
    width: 700px;
  }

  #map-locator-modal-map {
    height: 500px;
    width: 650px;
  }
}