@charset "UTF-8";
@layer templates.single-post {
  @media screen and (min-width: 768px) {
    :where(body.single-post) .article-header {
      grid-column: 3/span 6;
    }
  }
  @media screen and (min-width: 992px) {
    :where(body.single-post) .article-header {
      grid-column: 2/span 4;
    }
  }
  :where(body.single-post) .article-header .container {
    background: #fff;
    padding: 2rem;
  }
  @media screen and (min-width: 1280px) {
    :where(body.single-post) .article-header .container {
      padding: 3rem;
    }
  }
  :where(body.single-post) .article-header .date h4 {
    display: inline-block;
    color: #2d77f8;
    font-family: "Circular Std", sans-serif;
    font-weight: normal;
    font-size: clamp(0.66rem, 0.58rem + 0.48vw, 0.88rem);
    line-height: 1em;
    text-transform: capitalize;
  }
  :where(body.single-post) .article-header .post-title {
    padding: 0.5rem 0 2rem 0;
  }
  :where(body.single-post) .article-header .post-title h1 {
    font-size: clamp(2.16rem, 1.85rem + 1.54vw, 2.81rem);
    font-family: "Circular Std", sans-serif;
    font-weight: normal;
    color: #000;
    line-height: 1em;
  }
  @media screen and (min-width: 992px) {
    :where(body.single-post) .article-header .post-title h1 {
      font-size: clamp(1.8rem, 1.54rem + 1.29vw, 2.34rem);
    }
  }
  @media screen and (min-width: 1280px) {
    :where(body.single-post) .article-header .post-title h1 {
      font-size: clamp(2.16rem, 1.85rem + 1.54vw, 2.81rem);
    }
  }
  :where(body.single-post) .article-header .share-links {
    border-color: #000;
    flex-wrap: wrap;
    padding: 1rem 0;
  }
  @media screen and (min-width: 992px) {
    :where(body.single-post) .article-header .share-links h4 {
      width: 100%;
      padding-bottom: 0.5rem;
    }
  }
  @media screen and (min-width: 1280px) {
    :where(body.single-post) .article-header .share-links h4 {
      width: auto;
      padding-bottom: 0;
    }
  }
  :where(body.single-post) .article-header .share-links .share-link svg,
  :where(body.single-post) .article-header .share-links .share-link g,
  :where(body.single-post) .article-header .share-links .share-link path {
    fill: #2d77f8;
  }
  @media screen and (min-width: 992px) {
    :where(body.single-post) .article-header .share-links .share-link:first-of-type {
      margin-left: 0;
    }
  }
  @media screen and (min-width: 1280px) {
    :where(body.single-post) .article-header .share-links .share-link:first-of-type {
      margin-left: 1.5rem;
    }
  }
  :where(body.single-post) .article-header .authors {
    padding-bottom: 2rem;
  }
  :where(body.single-post) .article-header .authors .author {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: 0 1rem;
    align-items: center;
  }
  :where(body.single-post) .article-header .authors .author + .author {
    padding-top: 1rem;
  }
  :where(body.single-post) .article-header .authors .author .photo img {
    border-radius: 50%;
    filter: saturate(0%);
  }
  :where(body.single-post) .article-header .authors .author .info .name h3 {
    color: #2d77f8;
    font-size: clamp(1.04rem, 0.89rem + 0.74vw, 1.35rem);
    line-height: 1.125em;
  }
  :where(body.single-post) .article-header .authors .author .info .meta h4 {
    font-family: "Rubik", sans-serif;
    color: #5c5c5c;
    font-size: clamp(0.66rem, 0.58rem + 0.48vw, 0.88rem);
    line-height: 1.25em;
  }
  :where(body.single-post) .article-header .products-and-solutions.desktop {
    display: none;
  }
  @media screen and (min-width: 992px) {
    :where(body.single-post) .article-header .products-and-solutions.desktop {
      display: block;
    }
  }
  :where(body.single-post) .article-header .in-use .module-title {
    color: #45826a;
  }
  @media screen and (min-width: 768px) {
    :where(body.single-post) .article-body {
      grid-column: 3/span 6;
    }
  }
  @media screen and (min-width: 992px) {
    :where(body.single-post) .article-body {
      grid-column: 6/span 8;
      transform: translateY(-3rem);
    }
  }
  :where(body.single-post) .article-body .featured-image {
    padding-bottom: 2rem;
  }
  :where(body.single-post) .article-body .featured-image img {
    opacity: 1 !important;
  }
  :where(body.single-post) .article-body .featured-image .caption {
    padding-top: 0.5rem;
    font-weight: 300;
    font-size: clamp(0.66rem, 0.58rem + 0.48vw, 0.88rem);
    line-height: 1.5em;
    font-style: italic;
  }
  :where(body.single-post) .article-body .featured-image:not(.photo-color) .photo-wrapper {
    display: flex;
    flex: 1 1 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
  }
  :where(body.single-post) .article-body .featured-image:not(.photo-color) .photo-wrapper img {
    flex: 1 0 100%;
    height: 100%;
    max-width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    position: relative;
    width: 100%;
    transition: all 500ms ease;
  }
  :where(body.single-post) .article-body .copy-2 {
    line-height: 1.675em;
  }
  :where(body.single-post) .article-body a {
    color: #2d77f8;
    font-weight: bold;
  }
  :where(body.single-post) .article-body blockquote {
    background: #2d77f8;
    color: #fff;
    padding: 2rem;
  }
  @media screen and (min-width: 992px) {
    :where(body.single-post) .article-body blockquote {
      padding: 3rem;
    }
  }
  :where(body.single-post) .article-body blockquote p {
    font-size: clamp(0.87rem, 0.74rem + 0.62vw, 1.13rem);
    line-height: 1.75em;
    font-weight: 400;
  }
  @media screen and (min-width: 992px) {
    :where(body.single-post) .article-body blockquote p {
      font-size: clamp(1.04rem, 0.89rem + 0.74vw, 1.35rem);
    }
  }
  :where(body.single-post) .article-body blockquote p + p {
    margin-top: 1rem;
  }
  :where(body.single-post) .article-body blockquote h4 {
    padding-top: 2rem;
    text-transform: uppercase;
    font-family: "Rubik", sans-serif;
    font-size: clamp(0.72rem, 0.62rem + 0.52vw, 0.94rem);
    line-height: 1.5em;
  }
  :where(body.single-post) .article-body h1,
  :where(body.single-post) .article-body h2,
  :where(body.single-post) .article-body h3,
  :where(body.single-post) .article-body h4,
  :where(body.single-post) .article-body h5,
  :where(body.single-post) .article-body h6 {
    font-family: "Circular Std", sans-serif;
    font-weight: normal;
    color: #000;
    padding-top: 1rem;
  }
  :where(body.single-post) .article-body h1 + *,
  :where(body.single-post) .article-body h2 + *,
  :where(body.single-post) .article-body h3 + *,
  :where(body.single-post) .article-body h4 + *,
  :where(body.single-post) .article-body h5 + *,
  :where(body.single-post) .article-body h6 + * {
    margin-top: 0.5rem;
  }
  :where(body.single-post) .article-body h1 {
    font-size: clamp(3.11rem, 2.67rem + 2.22vw, 4.625em);
    line-height: 1.25em;
  }
  :where(body.single-post) .article-body h2 {
    font-size: clamp(2.16rem, 1.85rem + 1.54vw, 2.81rem);
    line-height: 1.25em;
  }
  :where(body.single-post) .article-body h3 {
    font-size: clamp(1.5rem, 1.29rem + 1.07vw, 1.95rem);
    line-height: 1.25em;
  }
  :where(body.single-post) .article-body h4,
  :where(body.single-post) .article-body h5,
  :where(body.single-post) .article-body h6 {
    font-size: clamp(1.04rem, 0.89rem + 0.74vw, 1.35rem);
  }
  :where(body.single-post) .article-body ol li::marker,
  :where(body.single-post) .article-body ul li::marker {
    font-weight: bold;
  }
  :where(body.single-post) .article-body .blog-table {
    font-size: clamp(0.66rem, 0.58rem + 0.48vw, 0.88rem);
    border-collapse: collapse;
    border: 1px solid #ddd;
  }
  :where(body.single-post) .article-body .blog-table thead {
    background: #2d77f8;
    color: #fff;
  }
  :where(body.single-post) .article-body .blog-table thead th {
    text-align: left;
    line-height: 1em;
    padding: 0.5rem 1rem;
  }
  :where(body.single-post) .article-body .blog-table tbody tr:nth-child(odd) td {
    background: #fff;
  }
  :where(body.single-post) .article-body .blog-table tbody td {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #ddd;
  }
  :where(body.single-post) section.back {
    padding-bottom: 2rem;
    padding-top: clamp(1.25rem, 5vh, 2.5rem);
  }
  @media screen and (min-width: 992px) {
    :where(body.single-post) section.back {
      padding-top: clamp(2.5rem, 7.5vh, 3.75rem);
    }
  }
  :where(body.single-post) section.back .link a {
    display: flex;
    align-items: center;
    font-size: clamp(1.8rem, 1.54rem + 1.29vw, 2.34rem);
    letter-spacing: 0.025em;
    color: #000;
    font-family: "Oooh Baby", cursive;
  }
  :where(body.single-post) section.back .link a::before {
    content: "← ";
    font-size: clamp(0.87rem, 0.74rem + 0.62vw, 1.13rem);
    font-family: "Circular Std", sans-serif;
    padding-right: 0.25rem;
  }
  :where(body.single-post) section.back .link a:hover {
    text-decoration: none;
  }
  :where(body.single-post) .article-footer {
    padding-top: 2rem;
    border-top: 2px solid #000;
  }
  @media screen and (min-width: 768px) {
    :where(body.single-post) .article-footer {
      grid-column: 3/span 6;
    }
  }
  @media screen and (min-width: 992px) {
    :where(body.single-post) .article-footer {
      grid-column: 2/span 12;
      padding-top: 4rem;
    }
  }
  :where(body.single-post) .article-footer .products-and-solutions.mobile {
    display: block;
    padding-bottom: 4rem;
  }
  @media screen and (min-width: 992px) {
    :where(body.single-post) .article-footer .products-and-solutions.mobile {
      display: none;
    }
  }
  :where(body.single-post) .article-footer .in-use {
    padding-top: 0;
  }
  :where(body.single-post) .article-footer .in-use + .in-use {
    padding-top: 4rem;
  }
  :where(body.single-post) .article-footer .in-use .module-title {
    color: #000;
  }
  :where(body.single-post) .article-footer .related {
    padding-bottom: clamp(2.5rem, 10vh, 5rem);
  }
  @media screen and (min-width: 992px) {
    :where(body.single-post) .article-footer .related {
      padding-bottom: clamp(5rem, 15vh, 7.5rem);
    }
  }
  @media screen and (min-width: 992px) {
    :where(body.single-post) .article-footer .related {
      padding-bottom: 0;
    }
  }
  :where(body.single-post) .article-footer .related .section-header {
    padding-bottom: 1rem;
  }
  @media screen and (min-width: 992px) {
    :where(body.single-post) .article-footer .related .section-header {
      padding-bottom: 2rem;
    }
  }
  :where(body.single-post) .article-footer .related .section-title {
    color: #000;
  }
  :where(body.single-post) .article-footer .related .item .info h4 {
    color: #2d77f8;
  }
}