.map_wrapper{
  font-size:20px;
}

.h2{
  font-size:.7em;
  font-family:'akkurat';
  font-weight:bolder;
  margin-bottom:7px;
}


.h3{
  font-size:.6em;
  font-family:'akkurat';
  font-weight:lighter;
  padding-bottom:0px;
  margin-bottom:7px;
}

.p{
  font-size:.7em;
  font-family:'harriet';
  font-weight:lighter;
  padding-bottom:0px;
  margin-bottom:7px;
}

.p-link{
  font-size:.6em;
  font-family:'harriet';
  font-weight:lighter;
  padding-bottom:0px;
  margin-bottom:7px;
}


#map {
  top:110px;
  left:0px;
  position:absolute;
  width: 99vw;
  height: 70vh;
  }
#map svg {
  float:left;
  position:absolute;
  width: 100%;
  height: 100%;
}
.map-path{
  fill:none;
  stroke:black;
  stroke-width:.5px;
  opacity: .5;
}
.circle{
  stroke-width:1px;
  stroke:#e84040;
  fill:#e84040;
}


.circle:hover{
    cursor:default;
}
.circle-hover{
  stroke-width:12px;
  stroke:#e84040;
  opacity:.7;


}
.circle-clicked{
  stroke-width:1px;
  stroke:#e84040;
}
/* ---------------- dropdown menus -------------- */
.map_topper{
  width:95%;
  margin:auto;
  margin-top:0px;
}

.left-float{
  margin-top:30px;
  float:left;
  display:inline-block;
}

.map_topper .controls{
  float:right;

}
.map_topper .controls .select{
  position:relative;
  display:inline-block;
  width:12%;
  min-width:120px;
  margin:0 0 0 0;
}

.map_topper .controls .select .form-control{
  width:100%;
  height:auto;
}


/* ----------------- list of events ---------------- */
.list-wrapper{
  top:111px;
  width:40vw;
  height:100vh;
}

#list-container{
  font-size:1em;
  position:absolute;
  top:111px;
  height:calc(70vh - 2px);
  float:left;
  overflow-y:auto;
  left:0px;
}

#list-container .list-item{
      width:100%;
      background-color:white;
      margin-bottom:5px;
      width:500px;
      padding:10px;
    }

        #list-container .list-item .image-thumb{
          display:inline-block;
          width:50px;
          height:50px;
          margin-right:10px;
        }

          #list-container .list-item .image-thumb .image{
              width:100%;
              height:100%;
            }

#list-container .list-info{
  display:inline-block;
  width:70%;
  vertical-align:top;
}


#list-container .focus-item .h2{
  font-size:1em;
}


#list-container .focus-item .image-thumb{
  width:150px;
  height:150px;
 }


#list-container .focus-item .image-thumb .image{
  width:150px;
  height:150px;
}

#list-container .focus-item .list-info{
  display:inline-block;
  width:60%;
  vertical-align:top;
}


#list-container .hover-item{
background-color:rgba(255,255,255,.5);

}




.date{
  color:red;
}
select {
  font: 400 12px/1.3 "akkurat", sans-serif;
  -webkit-appearance: none;
  appearance: none;
  border: .3px solid black;
  line-height: 1;
  outline: 0;
  color: black;
  border-color: #ddd;
  padding: 0.65em 2.5em 0.55em 0.75em;
  border-radius: 1px;
  background: linear-gradient(#ddd, #ddd) no-repeat,
              linear-gradient(-135deg, rgba(255,255,255,0) 50%, white 50%) no-repeat,
              linear-gradient(-225deg, rgba(255,255,255,0) 50%, white 50%) no-repeat,
              linear-gradient(#ddd, #ddd) no-repeat;
  background-color: white;
  background-size: 1px 100%, 20px 20px, 20px 20px, 20px 60%;
  background-position: right 20px center, right bottom, right bottom, right bottom;   
}
.mapboxgl-ctrl-bottom-right{
display:none;
}
.mapboxgl-ctrl-bottom-left{
  display:none;
  opacity: 0;
}


.mapboxgl-canvas{
  border:1px solid rgba(0,0,0,.1);
}
@media (max-width: 1350px) {}
@media (max-width: 1200px) {}
@media (max-width: 1024px) {}


@media (max-width: 860px) {

.left-float{
  margin-top:0px;
}


    .map_topper{
      font-size:20px;
      height:150px;
      margin: 0 auto;
    }


    .h2{
      font-size:.7em;
      font-family:'akkurat';
      font-weight:bolder;
      margin-bottom:7px;
    }


    .h3{
      font-size:.6em;
      font-family:'akkurat';
      font-weight:lighter;
      padding-bottom:0px;
      margin-bottom:7px;
    }

    .p{
      font-size:.7em;
      font-family:'harriet';
      font-weight:lighter;
      padding-bottom:0px;
      margin-bottom:7px;
    }

    #map{
      top:190px;
      height:200px;
      width:100%;
    }

    #list-container{
      font-size:1.3em;
      top:420px;
      height:300px;
      border:1px solid rgba(0,0,0,.1);

    }

      #list-container .list-item {
      width:100%;
      background-color:rgba(0,0,0,.05);;
      margin:auto;
      margin-bottom:5px;

    }

          #list-container .list-info{
            display:inline-block;
            width:78%;
            margin:auto;
            padding:0px;
          }


    #list-container .focus-item h3{
      font-size:1.3em;
    }

    #list-container .focus-item .image-thumb{
      width:50px;
      height:50px;

     }

    #list-container .focus-item .list-info{
      width:78%;
      margin:auto;
    }

    .map_topper .controls{
      width:90%;
      float:left;
    }


    .select p{
      margin-bottom:5px;
    }

      #list-container .hover-item{
          background-color:rgba(0,0,0,.05);

      }

    .mapboxgl-canvas{
      border:1px solid rgba(0,0,0,.1);
    }


}