.header-search-form {
   background: $brand-secondary;
   padding: 15px 0;

   .search-wrapper {
      display: inline-block;
      margin-right: 10px;
      position: relative;
      text-align: left;
   }

   button {
      text-align: center;
   }

   @media screen and (min-width: 1660px) {
      display: inline-block;

      button {
         padding-right: 10px;
         padding-left: 10px;
         width: 100px;
      }

      input {
         min-width: 270px;
      }
   }
}


@media screen and (max-width: 1659px) {
   .header-search-wrapper {
      transition: all .5s;
      position: absolute;
      left: 0;
      top: -100%;
      z-index: 0;
      opacity: 0;
      padding: 0;

      form {
         left: 0;
         text-align: center;
      }

      &.active {
         opacity: 1;
         transition: all .5s;
         top: 100%;
         z-index: 11;
      }

      .search-wrapper {
         width: 50%;
      }

      .form-control {
         width: 100%;
      }
   }
}


@media screen and (max-width: 544px) {
   .header-search-wrapper .search-wrapper {
      display: inline-block;
      width: 65%;
   }
}

@media screen and (max-width: 499px) {
   .header-search-wrapper .search-wrapper {
      position: static;
      text-align: left;
   }
}
