/* The overlay effect with black background */
.search-overlay {
  height: 100%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  z-index: 4;
  top: 0;
  left: 0;
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  -ms-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

/* The content */
.overlay-content {
  position: absolute;
  top: 5%;
  left: 45px;
  width: 90%;
  text-align: center;
}

/* Close button */
.search-overlay .closebtn {
  position: absolute;
  top: 4%;
  right: 45px;
  font-size: 40px;
  cursor: pointer;
  color: white;
}

.search-overlay .closebtn:hover {
  color: #ccc;
}

/* Style the search field */
.search-overlay input[type=text] {
  padding: 15px;
  font-size: 18px;
  border: none;
  float: left;
  width: 90%;
  background: white;
  outline: none;
  border-radius: unset;
}

.search-overlay input[type=text]:hover {
  background: #fff;
}

/* Style the submit button */
.search-overlay button {
  float: left;
  width: 10%;
  padding: 15px;
  background: #A3B1A4;
  font-size: 18px;
  border: none;
  cursor: pointer;
  outline: none;
}

.search-overlay button:hover {
  background: #42695B;
}

.site-search-results {
  margin: 70px 140px;
}

.site-search-results h2 {
  font-size: 60px;
  font-family: CallunaRegular;
  line-height: 80px;
  color: #3C4543;
}

.site-search-results ul {
  padding: 0;
}

.site-search-results ul li a {
  font-size: 24px;
  line-height: 32px;
  color: #42695B;
  font-family: CallunaRegular;
}

.site-search-results ul li p {
  font-size: 18px;
  line-height: 24px;
  color: #3C4543;
  font-family: omnesnormal;
}

.search-overlay-bg {
  background-color: #3C4543;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

@media only screen and (max-width: 1366px) {
  .overlay-content {
    width: 90%;
    top: 4%;
  }
}

@media only screen and (max-width: 1024px) {
  .overlay-content {
    width: 85%;
    top: 4%;
  }
}

@media only screen and (max-width: 768px) {
  .overlay-content {
    width: 80%;
  }
}

@media only screen and (max-width: 767px) {
  .site-search-results {
    margin: 55px 37px;
  }
  .site-search-results h2 {
    font-size: 24px;
    line-height: 32px;
  }
  .site-search-results ul li a {
    font-size: 18px;
    line-height: 24px;
  }
  .overlay-content {
    width: 80%;
    top: 20%;
  }
  .search-overlay input[type=text] {
    width: 80%;
  }
  .search-overlay button {
    width: 20%;
  }
}