.sb-search {
position: relative;
margin-top: 10px;
width: 0%;
min-width: 60px;
height: 60px;
float: right;
overflow: hidden;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
transition: width 0.3s;
-webkit-backface-visibility: hidden;
}
.sb-search-input {
position: absolute;
top: 0;
right: 0;
border: none;
outline: none;
background: #f8f9fa;
width: 100%;
height: 60px;
margin: 0;
z-index: 10;
padding: 20px 65px 20px 20px;
font-family: inherit;
font-size: 15px;
color: #333;
}
 .sb-search-input::-webkit-input-placeholder {
 color: #333;
 font-size: 13px;
}
 .sb-search-input:-moz-placeholder {
 color: #333;
  font-size: 13px;
}
 .sb-search-input::-moz-placeholder {
 color: #333;
  font-size: 13px;
}
 .sb-search-input:-ms-input-placeholder {
 color: #333;
  font-size: 13px;
}
.sb-icon-search, .sb-search-submit {
width: 40px;
height: 30px;
display: block;
position: absolute;
right: 0;
top: 0;
padding: 0;
margin: 0;
line-height: 60px;
text-align: center;
cursor: pointer;
}
.sb-search-submit {
background: #fff; /* IE needs this */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
filter: alpha(opacity=0); /* IE 5-7 */
opacity: 0;
color: transparent;
border: none;
outline: none;
z-index: -1;
}
.sb-icon-search {
z-index: 90;
font-size: 22px;
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
.sb-icon-search .fa{
    line-height: 50px;
    color: #8e8e8e;
    font-size: 20px;
}

/* Open state */
.sb-search.sb-search-open, .no-js .sb-search {
width: 100%;
}
.sb-search.sb-search-open .sb-icon-search, .no-js .sb-search .sb-icon-search {
color: #000;
z-index: 11;
}
.sb-search.sb-search-open .sb-search-submit, .no-js .sb-search .sb-search-submit {
z-index: 90;
}