.search{width:50px;height:40px;position:relative;overflow:hidden}.search:before{content:"";display:block;width:3px;height:100%;position:relative;background-color:#00a195;transition:all .5s ease}.search.open{width:250px}.search.open:before{position:absolute}.search-box{width:100%;height:100%;box-shadow:none;border:0;background:#242628;color:#fff;padding:5px 40px 5px 20px;font-size:14px;border:0!important}.search-box:focus{outline:none}.search-button{width:50px;height:40px;display:block;position:absolute;right:0;top:0;padding:3px;cursor:pointer}.search-icon{width:25px;height:25px;border-radius:40px;border:3px solid #00a498;position:relative;margin-left:5px}.search-icon,.search-icon:before{display:block;transition:all .5s ease}.search-icon:before{right:-2px;top:16px}.search-icon:after,.search-icon:before{content:"";width:3px;height:10px;position:absolute;background-color:#00a498;transform:rotate(-45deg)}.search-icon:after{right:-7px;top:21px;display:block;transition:all .5s ease}.open .search-icon{width:25px;height:25px;border-radius:60px;margin:4px 5px 0 auto}.open .search-icon:before{transform:rotate(52deg);right:6px;top:7px;height:10px}.open .search-icon:after{transform:rotate(-230deg);right:6px;top:2px;height:10px}