#gis-map {
  display: none;
}
#gis-list {
  display: block;
}
.dlbutton {
  width: 200px;
  padding: 10px;
  margin-bottom: 20px;
  background: #33bbff;
  font-size: 1.1em;
  border: none;
  border-radius: 5px;
  color: white;
  border-bottom: 3px solid #006699;
}
.dlbutton:hover {
  background: #0088cc;
  cursor: pointer;
}
.dlbutton:active {
  background: #006699;
}
.clbutton {
  padding: 10px;
  margin-bottom: 20px;
  background: #9e9e9e;
  font-size: 1.1em;
  border: none;
  border-radius: 5px;
  color: white;
  border-bottom: 3px solid #6a6a6a;
}
.clbutton:hover {
  background: #7e7e7e;
  cursor: pointer;
}
.clbutton:active {
  background: #6a6a6a;
}
li {
  margin-bottom: 10px;
  list-style: none;

}
@media screen and (min-width: 500px) {  
  ul {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-gap: 20px;
    column-gap: 20px;
  }   
}
@media screen and (min-width: 800px) {
  #gis-list {
    display: none;
  }
  #gis-map {
    display: block;
  }
  ul {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }    
}
.modal {
  background:rgba(0,0,0,0.7);
  position:fixed;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  bottom:0px;
  transition:all .5s ease-in-out;
  opacity:0;
  z-index:-1;
}
.modal:target {
  opacity:1;
  transition:all .5s ease-in-out;
  z-index:+1;
}
.modal-content {
  position:fixed;
  top:50%;
  left:50%;
  width:100%;
  max-width:700px;
  background:#fff;
  transform:translate(-50%, -50%);
  transition:all .5s ease-in-out;
  perspective: 1000;
  outline:1px solid transparent;
  opacity:0;
}
.modal:target .modal-content {
  transform:translate(-50%, -50%);
  transition:all .5s ease-in-out;
  transition-delay:.5s;
  z-index:9999;
  opacity:1;
}
.modal-close {
  float:right;
  text-decoration:none;
  padding:22px 22px;
  color:#fff;
  font-weight:800;
  z-index:+1;
  background:rgba(0,0,0,0.1);
  text-align:center;
  text-decoration: none;
}
.modal-close:hover {
  color: #fff;
  background:rgba(0,0,0,0.5);
}
.modal-content h3 {
  padding:20px;
  margin:0;
  display:block;
  border-bottom:1px solid #e0e0e0;
  text-transform:uppercase;
  background:rgba(2,162,239,1);
  color:#fff;
}
.modal-area {
  padding:20px;
}
fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}