/* searchform.css */
#ol-search{
  display:none;
}
.search-icon{
  cursor:pointer;
}
.search-icon::before{
  font-family:FontAwesome;
  content:'\f002';
}
.overlay, 
.ol-search-wrap{
  display:none;
  opacity:0;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  animation:fade_overlay .3s;
}
.ol-search-wrap{
  z-index:9990;
}
.overlay{
  z-index:9991;
  background:rgba(0,0,0,.4);
}
#ol-search:checked ~ .ol-search-wrap,
#ol-search:checked ~ .ol-search-wrap .overlay{
  display:block;
  opacity:1;
}
.ol-searchform .searchform{
  position:fixed;
  top:50%;
  left:50%;
  z-index:9999;
  width:80%;
  max-width:520px;
  border:solid 2px #fff;
  border-radius:4px;
  transform:translate(-50%,-50%);
  display:flex;
}
.ol-searchform .search-field, .ol-searchform .search-submit{
  height:48px;
  padding:4px 12px;
  border:none;
  background:rgba(0,0,0,.3);
  font-size:18px;
  color:#fff;
  transition:.3s;
  outline:none;
}
.ol-searchform .search-field{
  flex:1;
  width:80%;
  border-radius:4px 0 0 4px;
}
.ol-searchform .search-submit{
  cursor:pointer;
  border-radius:0 4px 4px 0;
}
.ol-searchform .search-field:focus,
.ol-searchform .search-field:focus + .search-submit{
  background:rgba(0,0,0,1);
}