.search{width:40px;height:40px;margin:0 0 0 auto;position:relative;overflow:hidden;transition:all .5s ease}.search.open{width:420px}@media(max-width:576px){.search.open{width:100%}}.search.open:before{height:60px;margin:20px 0 20px 30px;position:absolute}.search-box{width:100%;height:40px;box-shadow:none;border:none;background:0 0;color:#fff;padding-right:50px;padding-left:15px;font-size:22px}.search-box:focus{outline:0}.search-button{display:block;position:absolute;right:10px;top:3px;cursor:pointer}.search-icon{width:25px;height:25px;border-radius:40px;border:3px solid #fff;display:block;position:relative;transition:all .5s ease}.search-icon:before{content:'';width:3px;height:15px;position:absolute;right:-5px;top:16px;display:block;background-color:#fff;transform:rotate(-45deg);transition:all .5s ease}.search-icon:after{content:'';width:3px;height:15px;position:absolute;right:-12px;top:40px;display:block;background-color:#fff;transform:rotate(-45deg);transition:all .5s ease}.open .search-box{border-radius:10px;background:#ffffff3d;border:#fff 1px solid}.open .search-button{top:-5px;right:5px}.open .search-icon{margin:0;width:40px;height:40px;border-radius:60px;border:none}.open .search-icon:before{transform:rotate(45deg);right:15px;top:12px;height:25px}.open .search-icon:after{transform:rotate(-225deg);right:15px;top:12px;height:25px}