.search-field {
  background-color: transparent;
  background-image: url(../img/search-dark.svg);
  background-repeat: no-repeat;
  background-size: 24px 24px;
  border: none;
  cursor: pointer;
  height: 40px;
  margin: 3px 0;
  padding: 0 40px 0 0;
  background-position: right 10px center;
  position: relative;
  -webkit-transition: width 400ms ease, background 400ms ease;
  transition:         width 400ms ease, background 400ms ease;
  width:0px;
   cursor: pointer;
}

.search-field:focus {
  border: 2px solid #09203D;
  border-radius: 50px;
  cursor: text;
  outline: 0;
  width: 250px;
  background-image: none;
  padding-left: 10px;
  -webkit-transition: width 400ms ease, background 400ms ease;
  transition:         width 400ms ease, background 400ms ease;  
}

.search-form { 
  display:none;
}

.search-submit {
  background-color: transparent;
  background-image: url(../img/search-dark.svg);
  background-repeat: no-repeat;
  background-size: 24px 24px;
  height: 40px;
  width: 24px;
  border:0;
  background-position: center;
  background-repeat: no-repeat;
}

.search-box form {
  position: relative;
}

.search-box .search-submit {
  position: absolute;
  top: 3px;
  right: 10px;
  display: none;
  background-color: transparent;
}

.search-field:focus + .search-submit {
  display: block;
}