.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;
    }
  }
}