.block{
  display:inline-block;
  vertical-align:top;
}

#zoomin:hover{
  text-decoration:underline;
  cursor: pointer;
}
#zoomout:hover{
  text-decoration:underline;
  cursor: pointer;
}

.mapboxgl-ctrl-bottom-right{
  display:none;
}
.mapboxgl-ctrl-bottom-left{
  display:none;
  opacity: 0;
}
.mapboxgl-canvas{
  border:1px solid rgba(0,0,0,.1);
}
.article-content{
  margin-top:0px;
}

.cont{
  width:85%;
  margin:auto;


}

.cont-full{
  margin-top:30px;
  margin-bottom:30px;
}

.h1{
  font-size:35px;
  font-family:'akkurat';
  font-weight:800;
}

.h2{
  font-size:20px;
  font-family:'akkurat';
  font-weight:800;
}
.h3{
  font-size:14px;
  font-family:'akkurat';
  font-weight:500;
  margin:0px;
  line-height: 16px;
}
.h4{
  font-size:18px;
  font-family:'akkurat';
  font-weight:100;
  margin:0px;
}

.p{
  font-size:17px;
  font-family:"harriet";
}
.list-container{
  width:100%;
}

.li, .libtn{
  display:inline-block;
  border-radius:5px;
  margin:5px;
  padding:5px;
  padding-left:6px;
  padding-right:6px;
  margin-bottom:5px;
  text-align:center;
}
.libtn{
  border:1px solid rgb(190,190,190);
  display:block;
  margin:auto;
  width:150px;
}

.li:hover, .libtn:hover{
  cursor: pointer;
}
li{
  list-style: none;
}
.map-container{
  position:relative;
  width: 100%;
  height: 70vh;
  margin:auto;
}
#infobox{
  position:absolute;
  top:0px;
  left:33.25%;
  width:35%;
  z-index:10000;
  border-radius:5px;
  padding:20px;


}
.info-sel{
   background-color:white; 
}
  #map {
    top:10px;
    left:0px;
    position:absolute;
    width: 100%;
    height: calc(100% - 10px);
    }

  #map svg {
    float:right;
    position:absolute;
    width: 100%;
    height: 100%;
  }
.circle:hover{
  cursor: pointer;
}



.center{
  text-align:center;
}
.viewing{
  border-bottom: 2px solid #6cb6ac;
}
.experience{
  border-bottom: 2px solid #f27178;
}
.bold{
  font-weight:800;
}
.mapCircles:hover, .mapIcons:hover, .li:hover, .libtn:hover{
  cursor: pointer;
}
.li-active{
  opacity:.5;
}
.li-active:hover{
  opacity:1;
}
#reset{
  margin-top:15px;
}
/*this is for between 480 and 770 tablet*/
@media screen and (min-width: 781px) and (max-width: 1024px) {


}

/*this is for between 480 and 770 tablet*/
@media screen and (min-width: 450px) and (max-width: 780px) {
  .cont-head{
    width:92.5%;
    margin:auto;
    padding-left:0px;
  }

  .article-footer{
    width:92.5%;
    margin:auto;
  }
  #infobox{
    width:60%;
    left:20%;
    margin:0px;

  }
  .map-container{
    width:100%;
    height:70vh;
    margin:0px;
  }
  #list-container{
    width:100%;
  }

}
/*this is only for iphone*/
@media only screen and (max-width: 449px) {
  .cont-head{
    width:92.5%;
    margin:auto;
    padding-left:0px;
  }

  .article-footer{
    width:92.5%;
    margin:auto;
  }
  #infobox{
    width:100%;
    left:0px;
    margin:0px;
    padding:10px;
  }
  .map-container{
    width:100%;
    height:350px;
    margin:0px;
  }
  #list-container{
    width:100%;
  }

}