.search-container {
  position: relative; margin:10px auto 20px; color:#f4f4f4;
}

.search-container label {
  font-size: 20px;
  position: absolute;
  z-index: 999;
  margin: auto;
  height: 25px;
  top: 0;
  bottom: 0;
  left: -80;
  right: 0;
  cursor: pointer;
}

.search-container input[type=search] {
  outline: none; border:#f4f4f4 0px solid;
  position: absolute;
  height: 25px;
  margin-top: auto;
  margin-bottom: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 25px;
  opacity: 0;
  transition: all 0.5s ease-out;
}

.search-container input[type=search]:focus {
  opacity: 1;
  left: -225px; background-color:#f4f4f4;
  width: 200px; 
  padding: 8px;
  -moz-border-radius: 3px
-webkit-border-radius: 3px;
border-radius: 3px;
}


@media screen and (max-width: 768px) {
.search-container {
   margin:0px; color:#f4f4f4;
}
.search-container input[type=search]:focus {
  opacity: 1;
  left: 0px; background-color:#fff;
  width: 200px; 
  padding: 8px;
  -moz-border-radius: 3px
  -webkit-border-radius: 3px;
  border-radius: 3px;
}


}