@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);


.searchTerm {
  float: left;
  width: 400px;
  border: 3px solid #0F9796;
  padding: 5px;
  height: 40px;
  outline: none;
  color: #0F9796;
}
.searchTerm:focus{
  color: #00B4CC;
}
.searchButton {
  position: relative;  
  width: 40px;
  height: 37px;
  border: 1px solid #00B4CC;
  background: #0F9796;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  font-size: 20px;
}

/*Resize the wrap to see the search bar change!*/
.wrap{
  width: 36%;
 }
.search_box{
  width: 400px;
  background: #fff;
}
.search_box ul{
  list-style: none;
  padding: 0px;
  width: 400px;
  box-shadow: 0px 0px 4px 0px #00B4CC;
  margin-left: 0px;
}
.search_box ul li{
  padding: 5px 10px;
  box-shadow: 0px 0px 1px 0px #00B4CC;
}
.search_box ul li:hover{
  background: #E2FCFF;
}
.search_box ul li a{
  text-decoration: none;
}