.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: 35px;
  height: 35px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  background: #ba2026 url(https://www.annicon.com/files/theme/search.png) no-repeat;
}
.search-box + label .search-icon {
  color: black;
}
.search-box:hover {
  color: white;
  background: #f19244 url(https://www.annicon.com/files/theme/search.png) no-repeat;
}
.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: none;
  outline: none;
  box-shadow: none;
  padding-left: 15px;
  cursor: text;
  width: 300px;
  border-radius: auto;
  background: #ebebeb url(https://www.annicon.com/files/theme/search2.png) no-repeat;
  background-position: right;
  color: black;
}
.search-box:focus + label .search-icon {
  color: black;
}
.search-box:not(:focus) {
  text-indent: -5000px;
}

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

.search-icon {
  position: relative;
  left: -30px;
  color: white;
  cursor: pointer;
}