* {
  box-sizing: border-box;
}

.location {
  display: flex;
  flex-direction: row;
   background-color: #bfbbbb;
  text-align: center;
  padding: 20px 80px 20px 80px;
}

.address {
  background-color: #FFFFFF;
  font-size: 18px;
  flex: 50%;
  text-align: left;  
  font-family: Helvetica;
  padding: 75px 30px 0px 100px; 
}

.gmap {
  background-color: #FFFFFF;
  padding: 1px 1px 1px 1px; 
  flex: 50%;
  position: relative;
  padding-bottom: 5%; // This is the aspect ratio
  height: 0;
  overflow: hidden;
}
.gmap iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        
    }

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
  .location {
    flex-direction: column;
  }
}


/* Extra small devices (phones, 250px and down) */
@media only screen and (max-width: 280px) {
.location {
   flex-direction: column;
   padding: 1px 1px 1px 1px;
}

.address {
  background-color: #FFFFFF;
  font-size: 18px;
  flex: 50%;
  text-align: left;  
  font-family: Helvetica;
  padding: 1px 1px 0px 1px; 
}
.gmap {
  background-color: #FFFFFF;
  padding: 1px 1px 1px 1px; 
  flex: 50%;
  position: relative;
  padding-bottom: 75%; // This is the aspect ratio
  height: 0;
  overflow: hidden;
}
.gmap iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
   }