.container{
 width:80%;
 margin:50px auto;
}
.searchbox{
 position:relative;
 min-width:50px;
 width:0%;
 height:50px;
 float:right;
 overflow:hidden;
 -webkit-transition: width 0.3s;
 -moz-transition: width 0.3s;
 -ms-transition: width 0.3s;
 -o-transition: width 0.3s;
 transition: width 0.3s;
}
/*......*/
/*......*/
/*......*/
.searchbox-open{
 width:100%;
}
.searchbox-input{
 position:absolute;
 top:0;
 right:0;
 border:0;
 outline:0;
 background:#dcddd8;
 width:80%;
 height:50px;
 margin:0;
 padding-left: 20px;
 font-size:20px;
 color:red;
}
.searchbox-input::-webkit-input-placeholder {
 color: #d74b4b;
}
.searchbox-input:-moz-placeholder {
 color: #d74b4b;
}
.searchbox-input::-moz-placeholder {
 color: #d74b4b;
}
.searchbox-input:-ms-input-placeholder {
 color: #d74b4b;
}
.searchbox-icon,
.searchbox-submit{
 width:50px;
 height:50px;
 display:block;
 position:absolute;
 top:0;
 font-family:verdana;
 font-size:22px;
 right:0;
 padding:0;
 margin:0;
 border:0;
 outline:0;
 line-height:50px;
 text-align:center;
 cursor:pointer;
 color:#dcddd8;
 background:#172b3c;
}