/* Dynamic Webflow template category pages. Shared cards, filters, search and
   pagination come from /partials/webflow-templates. */

.template-category-page .header {
  background-color: #fff;
}

.template-category-hero__copy {
  position: relative;
  z-index: 2;
  max-width: 650px;
  animation: templateCategoryReveal .48s cubic-bezier(.22, 1, .36, 1) .08s both;
}

.template-category-hero__copy .heading {
  margin-bottom: 20px;
}

.template-category-hero__copy p {
  max-width: 620px;
}

.template-category-hero__image {
  filter: none !important;
  animation: templateCategoryImageReveal .56s cubic-bezier(.22, 1, .36, 1) .18s both;
  will-change: transform, opacity;
}

.template-category-listing {
  scroll-margin-top: 40px;
}

.template-category-listing .home-templates-g {
  display: block;
}

.template-category-listing .templates-cms-toolbar {
  margin-bottom: var(--mg-pd--s);
}

.template-category-listing .filters__category-head.second {
  padding-top: 0;
}

.template-category-not-found {
  min-height: 60vh;
  padding-top: var(--sizes--sz-18);
}

.template-category-back {
  display: inline-block;
  margin-bottom: 22px;
  color: var(--new--primary-color);
  font-weight: 700;
  text-decoration: none;
}

@keyframes templateCategoryReveal {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes templateCategoryImageReveal {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, 18px, 0);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@media screen and (min-width: 992px) {
  .template-category-page .templates-js .templates-cms-toolbar {
    grid-column-gap: 28px;
  }

  .template-category-page .templates-js .filters-container {
    max-width: 760px;
  }
}

@media screen and (max-width: 991px) {
  .template-category-hero {
    padding-bottom: var(--sizes--sz-12);
  }

  .template-category-hero__copy {
    max-width: none;
  }

  .template-category-hero__image {
    margin-top: 0;
  }
}

@media screen and (max-width: 767px) {
  .template-category-hero {
    padding-top: var(--sizes--sz-17) !important;
    padding-bottom: 0;
  }

  .template-category-hero__copy .heading {
    margin-bottom: 16px;
  }

  .template-category-hero__copy .btn {
    width: 100%;
  }

  .template-category-page .templates-js .templates-cms-title-wrap {
    margin-bottom: 22px;
  }
}

@media screen and (max-width: 479px) {
  .template-category-hero {
    padding-top: var(--sizes--sz-17) !important;
    padding-bottom: 0;
  }

  .template-category-hero .category-seo-icon-wrapper {
    margin-bottom: var(--mg-pd--xs);
  }

  .template-category-hero .category-seo-icon {
    max-width: 80px;
  }

  .template-category-hero__image {
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .template-category-hero__copy,
  .template-category-hero__image {
    animation: none;
  }
}