/*https://webdesign.tutsplus.com/tutorials/css-experiments-with-a-search-form-input-and-button--cms-22069*/








.container-1{
  width: 400px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}

.container-1  .search{
  width: 400px;
  height: 50px;
  background: #eee;
  border: none;
  font-size: 10pt;
  float: left;
  color: #000;
  padding-left: 45px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
    margin-top:15px;
  
   -webkit-transition: background .55s ease;
  -moz-transition: background .55s ease;
  -ms-transition: background .55s ease;
  -o-transition: background .55s ease;
  transition: background .55s ease;
}

.container-1 .search::-webkit-input-placeholder {
   color:  #666;
}
 
.container-1  .search:-moz-placeholder { /* Firefox 18- */
   color:  #666;  
}
 
.container-1  .search::-moz-placeholder {  /* Firefox 19+ */
   color:  #666;  
}
 
.container-1  .search:-ms-input-placeholder {
   color:  #666;  
}

.container-1 .icon{
  position: absolute;
  top: 40%;
  margin-left: 17px;
  margin-top: 26px;
  z-index: 1;
  color: #4f5b66;
}

.container-1 .search:hover, .container-1 .search:focus, .container-1 .search:active{
    outline:none;
    background: #ffffff;
    border: 1px solid #eeeeee;
  }


@media (max-width: 700px){
    .container-1  .search{
        width: 280px;
    }
}