.input-box{position:relative;width:100%;max-width:60px;height:55px;margin:0 50px;background-color:#fff;border-radius:6px;transition:all .5s ease-in-out}.input-box.open{max-width:350px}.input-box input{position:relative;width:100%;height:100%;font-size:16px;font-weight:400;color:#333;padding:0 15px;border:none;border-radius:6px;outline:0;transition:all .5s ease-in-out}.input-box.open input{padding:0 15px 0 65px}.input-box .search{position:absolute;top:0;left:0;width:60px;height:100%;display:flex;justify-content:center;align-items:center;background-color:#fff;border-radius:6px;cursor:pointer}.input-box.open .search{border-radius:6px 0 0 6px}.search .search-icon{font-size:23px;color:#1c1c1c}.input-box .close-icon{position:absolute;top:50%;right:-45px;font-size:23px;color:#fff;padding:5px;transform:translateY(-50%);transition:all .5s ease-in-out;cursor:pointer;pointer-events:none;opacity:0}.input-box.open .close-icon{transform:translateY(-50%) rotate(180deg);pointer-events:auto;opacity:1}