.home-search-box { width: 100%; font-family: numeralLight; margin: 0px auto; * { transition: all 0.5s; } form { button { background-color: #39383d; margin-right: 3px; border-top-left-radius: 9px; border-bottom-left-radius: 9px; border: 0px; } input { width: 100%; background-color: #46454a; border: 0px; border-top-right-radius: 9px; border-bottom-right-radius: 9px; color: #ddd; &::placeholder { padding-right: 0px; color: #ddd; opacity: 0.4; } &:focus { outline: 2px solid #9cdf52 !important; } } } footer{ ul{ li{ cursor: pointer; } } strong{ color: #9cdf52; font-weight: 300; margin-left: 20px; } } } @media screen and (min-width: 1441px) { .home-search-box { width: 100%; max-width: 1350px; padding: 40px 0px 10px; &__voice { display: none; } form { width: 900px; input { font-size: 16px; padding-right: 20px; &::placeholder { font-size: 16px; } } button { width: 70px; height: 60px; img{ width: 35px; } } } footer { width: 900px; padding: 10px 0px !important; strong{ font-size: 14px; } ul{ li { color: #a2b4cb; margin-left: 25px; font-size: 14px; } } } } } @media screen and (min-width: 1008px) and (max-width: 1440px) { .home-search-box { max-width: 1250px; padding: 40px 0px 10px; &__voice { display: none; } form { width: 850px; input { font-size: calc(100vw / 85); padding-right: 20px; &::placeholder { font-size: calc(100vw / 95); } } button { width: 65px; height: 55px; & img{ width: 30px; } } } ul { width: 850px; padding: 10px 0px !important; li { color: #a2b4cb; margin-left: 25px; font-size: calc(100vw / 110); } } } } @media screen and (min-width: 641px) and (max-width: 1007px) { .home-search-box { max-width: 900px; padding: 50px 0px 10px; &__voice { display: none; } &__searchIcon{ display: none; } form { width: 85%; input { font-size: calc(100vw / 40); padding-right: 20px; &::placeholder { font-size: calc(100vw / 45); } } button { width: 80px; height: 60px; } } ul { width: 85%; padding: 10px 0px !important; li { color: #a2b4cb; margin-left: 25px; font-size: calc(100vw / 75); } } } } @media screen and (max-width: 640px) { .home-search-box { max-width: 500px; padding: 10px 0px 0px; flex: 1; &__voice { display: flex !important; justify-content: center; align-items: center; width: 55px; background : inherit !important; & img{ width: 28px; } } &__searchIcon { position: absolute; left: 62px; top: 50%; transform: translateY(-50%); width: 20px; } form { width: 100%; margin: 0px 10px !important; position: relative; border-radius: 8px; input { width: 100%; padding: 5px 10px; font-size: calc(100vw / 30); padding-right: 20px; border-radius: 8px; background: #383838; &::placeholder { font-size: calc(100vw / 34); color: white !important; } } button { display: none; } } ul { display: none !important; } } }