/* Mobile devices (S) (M) (L) */
@media (min-width: 320px) and (max-width: 374px) {
  nav {
    display: none;
  }

  .center-search {
    width: 90%;
    top: 6rem;
  }

  .headline {
    font-size: 1.8rem;
    line-height: 32px;
    margin: 8px 0 0 0;
  }

  .center-search input[type="text"] {
    width: 100%;
    margin: 10px 0 0 0;
  }

  .center-search button {
    width: 100%;
    padding: 15px 0;
    margin: 10px 0 0 0;
  }

  .bottom-fade {
    display: none;
  }

  .grid {
    display: inline;
  }

  .category-box {
    margin: 15px 0;
    padding: 20px 0;
    width: 100%;
    float: left;
  }

  .catdrawer {
    top: 14rem;
  }

  .cta-button {
    padding: 15px;
    width: 100%;
  }

  .bgp {
    height: 250vh;
  }
}

@media (min-width: 375px) and (max-width: 424px) {
  nav {
    display: none;
  }

  .center-search {
    width: 90%;
    top: 6rem;
  }

  .headline {
    font-size: 1.8rem;
    line-height: 32px;
    margin: 8px 0 0 0;
  }

  .center-search input[type="text"] {
    width: 100%;
    margin: 10px 0 0 0;
  }

  .center-search button {
    width: 100%;
    padding: 15px 0;
    margin: 10px 0 0 0;
  }

  .bottom-fade {
    display: none;
  }

  .grid {
    display: inline;
  }

  .category-box {
    margin: 15px 0;
    padding: 20px 0;
    width: 100%;
    float: left;
  }

  .catdrawer {
    top: 14rem;
  }

  .cta-button {
    padding: 15px;
    width: 100%;
  }

  .bgp {
    height: 250vh;
  }
}

@media (min-width: 425px) and (max-width: 767px) {
  nav {
    display: none;
  }

  .center-search {
    width: 90%;
    top: 6rem;
  }

  .headline {
    font-size: 2rem;
    line-height: 36px;
    margin: 8px 0 0 0;
  }

  .center-search input[type="text"] {
    width: 100%;
    margin: 10px 0 0 0;
  }

  .center-search button {
    width: 100%;
    padding: 15px 0;
    margin: 10px 0 0 0;
  }

  .bottom-fade {
    display: none;
  }

  .grid {
    display: inline;
  }

  .category-box {
    margin: 15px 0;
    padding: 20px 0;
    width: 100%;
    float: left;
  }

  .catdrawer {
    top: 24rem;
  }

  .cta-button {
    padding: 15px;
    width: 100%;
  }

  .bgp {
    height: 250vh;
  }
}

/* Tablets devices */
@media (min-width: 768px) and (max-width: 824px) {
  .icon {
    display: none;
  }

  .mobcat {
    display: none;
  }

  .center-search input[type="text"] {
    width: 375px;
  }

  .category {
    width: 75px;
    height: 80px;
    font-size: small;
  }

  .grid {
    display: flex;
    flex-wrap: wrap;
  }

  .category-box {
    flex: 0 0 calc(23% - 10px);
    align-items: center;
    justify-content: center;
  }

  .catdrawer {
    top: 25rem;
  }

  .category-title {
    word-break: break-all;
  }

  .bgp {
    height: 175vh;
  }
}

@media (min-width: 825px) and (max-width: 920px) {
  .icon {
    display: none;
  }

  .mobcat {
    display: none;
  }

  .category {
    width: 85px;
    height: 90px;
    font-size: small;
  }

  .center-search input[type="text"] {
    width: 410px;
  }

  .grid {
    display: flex;
    flex-wrap: wrap;
  }

  .category-box {
    flex: 0 0 calc(24% - 10px);
    align-items: center;
    justify-content: center;
  }

  .catdrawer {
    top: 25rem;
  }

  .category-title {
    word-break: break-all;
  }

  .bgp {
    height: 175vh;
  }
}

@media (min-width: 921px) and (max-width: 1023px) {
  .icon {
    display: none;
  }

  .mobcat {
    display: none;
  }

  .category {
    width: 95px;
    height: 90px;
    font-size: small;
  }

  .center-search input[type="text"] {
    width: 475px;
  }

  .grid {
    display: flex;
    flex-wrap: wrap;
  }

  .category-box {
    flex: 0 0 calc(24% - 10px);
    align-items: center;
    justify-content: center;
  }

  .catdrawer {
    top: 20rem;
  }

  .category-title {
    word-break: break-all;
  }

  .bgp {
    height: 110vh;
  }
}

@media (min-width: 1024px) and (max-width: 1034px) {
  .icon {
    display: none;
  }

  .mobcat {
    display: none;
  }

  .grid {
    display: flex;
    flex-wrap: wrap;
  }

  .category-box {
    flex: 0 0 calc(24% - 10px);
    align-items: center;
    justify-content: center;
  }

  .catdrawer {
    top: 20rem;
  }

  .category-title {
    word-break: break-all;
  }

   .bgp {
    height: 110vh;
  }
}

/* Desktops devices (S) */
@media (min-width: 1024px) and (max-width: 1070px) {
  .icon {
    display: none;
  }

  .mobcat {
    display: none;
  }

  .grid {
    display: flex;
    flex-wrap: wrap;
  }

  .category-box {
    flex: 0 0 calc(24% - 10px);
    align-items: center;
    justify-content: center;
  }

  .category-title {
    word-break: break-all;
  }

}

/* Desktops devices */
@media (min-width: 1071px) {
  .icon {
    display: none;
  }

  .mobcat {
    display: none;
  }

  .grid {
    display: flex;
    flex-wrap: wrap;
  }

  .category-box {
    flex: 0 0 calc(24% - 10px);
    align-items: center;
    justify-content: center;
  }

}