.search-box {
  -webkit-transition: width 0.6s, border-radius 0.6s, background 0.6s, box-shadow 0.6s;
  transition: width 0.6s, border-radius 0.6s, background 0.6s, box-shadow 0.6s;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  background: transparent;
  z-index:20!important;
  position:relative;
}
.search-box + label .search-icon {
  color: black;
  
}
.search-box:hover {
  color: white;
  background: transparent; /*#c8c8c8*/
  box-shadow: 0 0 0 3px #0d466e;
}
.search-box:hover + label .search-icon {
  color: white;
}

.search-box:focus {
  -webkit-transition: width 0.6s cubic-bezier(0, 1.22, 0.66, 1.39), border-radius 0.6s, background 0.6s;
  transition: width 0.6s cubic-bezier(0, 1.22, 0.66, 1.39), border-radius 0.6s, background 0.6s;
  border: 1px solid #3d4752;
  outline: none;
  box-shadow: none;
  padding-left: 15px;
  cursor: text;
  width: 250px;
  border-radius: auto;
  background: transparent; /*#f7f7f7*/
  color: black;
  box-shadow: 0px 0px 3px #3d4752;
}
.search-box:focus + label .search-icon {
  color: black;
}

.search-box:not(:focus) {
  text-indent: -5000px;
}

#search-submit {
  position: relative;
  right: -5000px;
}

.search-icon {
  position: relative;
  top: 3px;
  left: -35px;
  color: #fff;
  cursor: pointer;
  z-index:19!important;
}