@media screen and (min-width: 500px) {
  #map {
    grid-column: 2;
  }
}

@media screen and (max-width: 500px) {
  body{
    display: grid;
    grid-template-columns: 1fr; 
    grid-auto-rows: minmax(5px, auto);
    /* grid-template-rows: .2fr .4fr .4fr; */
    grid-template-areas: "header" "mappanel" "sidebar";
    /* grid-template-areas: ". header header" "contentspanel mappanel sidepane" ; */
    overflow: hidden;    /* hides any overflow so our page doesn't extend beyond the window height*/
    height: 100vh; /* this makes our page cover the whole browser window*/
    width: 99vw;
    background-color:burlywood; 
  }

}



body{
  display: grid;
  grid-template-columns: 1fr 1fr; 
  /* grid-auto-rows: minmax(5px, auto); */
  grid-template-rows: .2fr .6fr ;
  grid-template-areas: "header header" "mappanel sidebar" "footer footer";
  /* grid-template-areas: ". header header" "contentspanel mappanel sidepane" ; */
  overflow: hidden;    /* hides any overflow so our page doesn't extend beyond the window height*/
  height: 100vh; /* this makes our page cover the whole browser window*/
  width: 99vw;
  /* background-color:burlywood;  */
}

header{
  grid-area: header;
}
#theHeader{
  grid-area: header;
  display: grid;
  grid-template-columns: .8fr .1fr .1fr;
  padding:10px;
}

#map{
  height: 70vh;
  /* width: 150vh; */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(min-content, max-content));
  grid-area: mappanel;
  /* align-items: center; */
  justify-items: center; 
} 

#contents{

    /* grid-area: sidebar;
    display:grid;
    grid-template-columns: repeat(2, 1fr); */
    grid-area: footer;
    display:grid;
    grid-template-columns: repeat(2, 2fr);
    /* grid-auto-rows: 100px; */
    /* overflow-y:scroll; adds a vertical scroll-bar to this div */
    grid-auto-rows: minmax(min-content,max-content);    
    overflow-y: scroll;
    padding: 20px;
}

.card{
  padding:20px;
}

/* fix for survey to fit in the iframe */
#survey {
  overflow: hidden;
  /* 16:9 aspect ratio */
  padding-top: 0%;
  width: 1250px;
  position: relative;
  height: 700px;
}

#go_back {
  position: absolute;
  top: 10px;
  right: 50px;
}
#BtnSurvey {
  position: absolute;
  top: 10px;
  right: 275px;

}
#survey iframe {
 border: 0;
 height: 100%;
 left: 0;
 position: absolute;
 top: 0;
 width: 100%;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

.goog-te-banner-frame {
  visibility: hidden
  !important;
  
}
#google_translate_element {
  position: absolute;
  right: 350px;
  top: 7px;

}

#recenter {
  grid-column: 1/span1;
  grid-row: 1;
  padding-top: 10px;
  z-index: 1000;
}

.about_content {
  position: fixed;
  top: 60px;
  /* text-align: center; */
  margin-left: 100px;
  margin-right: 100px;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
} 

/*Legend specific*/
/* .legend {
  padding: 6px 8px;
  font: 14px Arial, Helvetica, sans-serif;
  background: white;
  background: rgba(255, 255, 255, 0.8);
  line-height: 24px;
  color: #555;
} */

#legend{
  grid-column: 4;
  grid-row: 1;
  align-items: right;
  justify-items: right;
  z-index: 9999;
  padding:9px;
  display:none;
  background: white;
}

i {
  width: 12px;
  height: 12px;
  float: left;
  margin: 5px 5px 0 0;
  opacity: 0.7;
}

i.icon {
  background-size: 12px;
  background-color: rgba(255, 255, 255, 1);
}

/* .text-labels {
  font-size: 2em;
  font-weight: 700;
  color: black;
} */