/*!
Theme Name: Exemplar
Author: Campaign Edge
Author URI: https://campaignedge.com.au
Description: Theme developed by Campaign Edge in October 2025
Version: 1.0.34
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: exemplar
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/*--------------------------------------------------------------
>>> exemplar:
---------------------------------------------------------------- */

/* General
--------------------------------------------- */
body .dashicons {
  width: 1em;
  height: 1em;
  font-size: inherit;
}

.first-no-margin> :first-child,
.fcnm> :first-child {
  margin-top: 0px;
}

.lcnm> :last-child {
  margin-bottom: 0px;
}

.mt0 {
  margin-top: 0;
}

.mb0 {
  margin-bottom: 0;
}

.pt0 {
  padding-top: 0;
}

.pb0 {
  padding-bottom: 0;
}

/* Colours
--------------------------------------------- */
.pc-color {
  color: var(--wp--preset--color--primary);
}

.sc-color {
  color: var(--wp--preset--color--secondary);
}

.tc-color {
  color: var(--wp--preset--color--tertiary);
}

.white-color {
  color: var(--wp--preset--color--white);
}

.black-color {
  color: var(--wp--preset--color--black);
}

.pc-bg {
  background-color: var(--wp--preset--color--primary);
}

.sc-bg {
  background-color: var(--wp--preset--color--secondary);
}

.tc-bg {
  background-color: var(--wp--preset--color--tertiary);
}

.white-bg {
  background-color: var(--wp--preset--color--white);
}

.black-bg {
  background-color: var(--wp--preset--color--black);
}

.pc-fill {
  fill: var(--wp--preset--color--primary);
}

.sc-fill {
  fill: var(--wp--preset--color--secondary);
}

.tc-fill {
  fill: var(--wp--preset--color--tertiary);
}

.white-fill {
  fill: var(--wp--preset--color--white);
}

.black-fill {
  fill: var(--wp--preset--color--black);
}

.pc-border {
  border-color: var(--wp--preset--color--primary);
}

.sc-border {
  border-color: var(--wp--preset--color--secondary);
}

.tc-border {
  border-color: var(--wp--preset--color--tertiary);
}

.white-border {
  border-color: var(--wp--preset--color--white);
}

.black-border {
  border-color: var(--wp--preset--color--black);
}

/* Full BG's
- To give an element a full sized background in code give it the class .full-bg along with the 
class wp color class eg .has-primary-background-color
--------------------------------------------- */
.full-bg,
.wp-block-group.has-background {
  position: relative;
  overflow: visible;
}

.full-bg,
.wp-block-group.has-background>* {
  position: relative;
  z-index: 2;
}

.full-bg:before,
.wp-block-group.has-background:before {
  content: "";
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: calc(100% / 2);
  transform: translateX(-50%);
  z-index: 0;
  background-position: 50% 50%;
  background-size: cover;
  background: inherit;
}

/* Disable full BG's on nested groups */
.wp-block-group .wp-block-group.has-background:before,
.wp-block-group .wp-block-group.has-background:after,
.wp-block-group .wp-block-group.has-background[style*=".webp')"]:before,
.wp-block-group .wp-block-group.has-background[style*=".webp')"]:after,
.wp-block-group .wp-block-group.has-background[style*=".png')"]:before,
.wp-block-group .wp-block-group.has-background[style*=".png')"]:after,
.wp-block-group .wp-block-group.has-background[style*=".jpg')"]:before,
.wp-block-group .wp-block-group.has-background[style*=".jpg')"]:after {
  width: 100%;
  transform: none;
  left: 0;
}

/* If the group has both a colour and image selected then the colour is moved to the :after placed ontop of the image*/
.wp-block-group.has-background[style*=".webp')"]:before,
.wp-block-group.has-background[style*=".jpg')"]:before,
.wp-block-group.has-background[style*=".png')"]:before {
  background-color: unset;
}

.wp-block-group.has-background[style*=".webp')"]:after,
.wp-block-group.has-background[style*=".jpg')"]:after,
.wp-block-group.has-background[style*=".png')"]:after {
  content: "";
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: calc(100% / 2);
  transform: translateX(-50%);
  z-index: 1;
  background-position: 50% 50%;
  background-size: cover;
  background-color: inherit;
}

.button-p,
.wp-block-button {
  margin-top: 0;
  font-size: 1em;

  a,
  .wp-block-button__link {
    color: black;
    background-color: var(--wp--preset--color--quinary);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.25em 0.7em;
    padding-right: 0.5em;
    border-radius: 0;

    &:after {
      background-color: transparent;
      clip-path: none;
      position: relative;
      top: unset;
      right: unset;
      transform: none;
      content: "";
      width: 0.6em;
      height: 0.6em;
      display: inline-block;
      background-image: url(../exemplar/images/single-arrow-right.svg);
      background-size: contain;
      background-repeat: no-repeat;
      margin-left: 0.4em;
      transition: transform 0.2s ease;
    }

    &:hover {
      color: inherit;

      &:after {
        transform: translateX(0.2em);
      }
    }
  }
}

/* Content Areas
--------------------------------------------- */
.site {
  padding-top: 6em;
}

.main-content {
  max-width: var(--wp--style--global--wide-size);
  width: 100%;
  margin: 0 auto;
}

.main-content .main-content-inner {
  padding: 0 4%;
}

.site-main .main-content .main-content-inner {
  &> :first-child {
    margin-top: 1rem;
  }
}

/* Header
--------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 5;

  .main-content-inner {
    position: relative;

    .header-main {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0em 0;
      transition: padding 0.25s ease;

      .header-logo {
        transition: flex 0.25s ease;
        flex: 0 1 300px;
        position: relative;
        padding: 1em 1.2em 1em 0;
        align-self: stretch;
        display: flex;
        align-items: center;

        &:before {
          content: "";
          width: calc(((100vw - var(--wp--style--global--wide-size)) + (var(--wp--style--global--wide-size) * 0.08)) / 2 + 100%);
          height: 100%;
          background: var(--wp--preset--color--senary);
          position: absolute;
          top: 0;
          right: 0;
        }

        a {
          display: flex;
          width: 100%;
          line-height: 0;
          padding-bottom: 20%;
          position: relative;
          transition: padding-bottom 0.25s ease;

          img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
          }
        }
      }

      .header-nav {
        flex: 1 0 auto;

        .menu-secondary {
          position: relative;
          padding: 0.5em 0;
          display: flex;
          align-items: baseline;
          transition: transform 0.25s ease, margin-bottom 0.25s ease;

          &:before {
            content: "";
            width: calc(((100vw - var(--wp--style--global--wide-size)) + (var(--wp--style--global--wide-size) * 0.08)) / 2 + 100%);
            height: 100%;
            background: var(--wp--preset--color--senary);
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
          }

          .menu-secondary-container {
            flex: 1 1 auto;
            background: var(--wp--preset--color--senary);

            .menu {
              margin: 0px;
              list-style: none;
              padding: 0px;
              display: flex;
              justify-content: right;

              .menu-item {
                margin-left: 0.5em;
                padding: 0.2em;
                margin-bottom: 0;

                a {
                  color: #333333;
                  font-weight: 400;
                  text-decoration: none;
                  transition: color 0.2s ease, background 0.2s ease,
                    border-color ease 0.2s;
                  font-size: 14px;
                  padding: 0.25em 0.5em;
                  display: block;
                  border-bottom: 1px solid transparent;
                }
              }
            }
          }
        }

        .menu-pullout {
          transition: transform 0.25s ease;
          position: relative;

          .menu-pullout-inner {
            display: flex;

            .menu-pullout-search {
              position: absolute;
              width: 1.2em;
              height: 1.2em;
              transition: width 0.25s ease;
              top: 50%;
              transform: translateY(-0.2em);
              right: -4vw;
              overflow: hidden;

              .search-form {
                width: 0;
                transition: width 0.25s ease;
                overflow: hidden;
              }

              svg {
                width: 1.2em;
                height: 1.2em;
                position: absolute;
                top: 0;
                right: -1.2em;
                transition: right 0.25s ease;
              }
            }
          }
        }
      }
    }
  }

  /* Scrolled down header transition */
  transition: padding-bottom 0.25s ease,
  background-color 0.25s ease,
  border-bottom 0.25s ease;

  &.site-header-border {
    background: var(--wp--preset--color--quaternary);
    padding-bottom: 2em;
    border-bottom: 0.5em solid var(--wp--preset--color--secondary);
  }

  &.site-header-border-temporary {
    background: var(--wp--preset--color--quaternary);
    padding-bottom: 2em;
    border-bottom: 0.5em solid var(--wp--preset--color--secondary);
  }

  &.site-header-scrolled:not(.site-header-border-temporary) {
    background: var(--wp--preset--color--quaternary);
    padding-bottom: 0em;
    border-bottom: 0.5em solid var(--wp--preset--color--secondary);

    .header-main .header-logo {
      padding-top: 0.25em;
      padding-bottom: 0.25em;

      a {
        padding-bottom: 10%;
      }
    }

    .menu-secondary {
      transform: translateY(-100%);
      margin-bottom: -2em;
    }

    .main-content-inner .header-main .header-nav .menu-pullout {
      transform: translateY(-1em);

      .menu-pullout-inner .menu-pullout-search {
        svg {
          right: 0;
          cursor: pointer;
        }
      }
    }
  }
}

/* Header - Menu
--------------------------------------------- */
.header-nav .menu-container {
  flex: 1 1 auto;

  .menu {
    margin: 0px;
    list-style: none;
    padding: 0px;
    display: flex;
    justify-content: right;

    .menu-item {
      margin-left: 1.25em;
      padding: 0.75em 0.2em 0em 0.2em;

      a {
        color: white;
        font-weight: 400;
        text-decoration: none;
        transition: color 0.2s ease, background 0.2s ease,
          border-color ease 0.2s;
        font-size: 17px;
        padding: 0.25em 0.5em;
        padding-bottom: 0;
        display: block;
        border-bottom: 1px solid transparent;
      }

      &:hover>a {
        font-weight: 400;
        border-bottom: 1px solid var(--wp--preset--color--quinary);
      }

      &.current-menu-item>a {
        font-weight: 400;
        border-bottom: 1px solid var(--wp--preset--color--quinary);
      }

      &:last-child a {
        padding-right: 0px;
      }

      /* Header - Sub Menu
			--------------------------------------------- */
      &.menu-item-has-children {
        position: relative;

        >a {
          padding-right: 1.25em;
        }

        &::before {
          width: 0.5em;
          height: 0.5em;
          background-color: white;
          clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
          position: absolute;
          top: calc(50% + 0.25em);
          right: 0em;
          content: "";
          transition: 0.2s ease;
          transform: rotate(-90deg);
        }

        &:hover::before {
          color: white;
          transform: rotate(0deg);
        }

        &.current-menu-item::before {
          border-bottom: 1px solid white;
        }

        &:hover>.sub-menu {
          opacity: 1;
          pointer-events: all;
        }

        .sub-menu .menu-item.menu-item-has-children>a {
          padding-right: 0.75em;
          padding-left: 2em;
        }
      }

      /* Sub Menu */

      .sub-menu {
        opacity: 0;
        transition: opacity 0.2s ease;
        pointer-events: none;
        padding: 1.2em 0;
        margin: 0px;
        position: absolute;
        top: 100%;
        left: 0px;
        z-index: 2;
        list-style: none;
        width: max-content;
        max-width: 200px;
        background: var(--wp--preset--color--senary);
        display: block;
        box-shadow: 2px 2px 6px 0px #00000087;
        color: #333333;

        .menu-item {
          margin-left: 0px;
          padding-left: 0em;
          padding-top: 0;
          padding-right: 0;
          margin-bottom: 0.75em;
          position: relative;

          &.menu-item-has-children:before {
            background-color: transparent;
            clip-path: none;
            position: absolute;
            top: 0.6em;
            left: 1em;
            right: unset;
            transform: none;
            content: "";
            width: 0.65em;
            height: 0.65em;
            display: inline-block;
            background-image: url(../exemplar/images/single-arrow-right.svg);
            background-size: contain;
            background-repeat: no-repeat;
          }

          &.current-menu-item::before {
            border-bottom: none;
          }

          &::after {
            content: "";
            width: 100%;
            height: 1.8em;
            position: absolute;
            top: 0;
            right: 0;
            transition: transform 0.2s ease;
            z-index: -1;
            transition: background-color 0.2s ease;
          }

          &:hover::after {
            background-color: var(--wp--preset--color--quinary);
          }

          &:last-child {
            margin-bottom: 0;

            a {
              padding-right: 0.75em;
            }
          }

          a {
            font-weight: 600;
            line-height: 1.2em;
            color: #333333;
            display: inline-block;
            border-bottom: 1px solid transparent;
            padding-left: 1em;
            padding-right: 1em;

            &:hover {
              border-bottom: 1px solid transparent;
            }
          }

          &.current-menu-item::after {
            background-color: var(--wp--preset--color--quinary);
          }

          .sub-menu {
            opacity: 1;
            position: relative;
            pointer-events: all;
            list-style-type: "–";
            padding: 0.5em 0em 0em 0em;
            background: none;
            box-shadow: none;
            width: 100%;

            .menu-item {
              margin-bottom: 0.5em;
              padding-right: 0.5em;
              padding-left: 2.5em;
              margin-left: 0em;
              width: 100%;

              &:before {
                content: none;
              }

              &::after {
                width: 100%;
                left: 0em;
                height: 100%;
              }

              &::marker {
                content: none;
              }

              &.menu-item-has-children {

                a {
                  padding-right: 0.75em;
                  padding-left: 0.5em;
                }

                &::before {
                  width: 0.5em;
                  height: 0.5em;
                  background-color: #333333;
                  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
                  position: absolute;
                  top: calc(50% - 0.15em);
                  right: 0.5em;
                  content: "";
                  transition: 0.2s;
                  transform: rotate(-90deg);
                  left: unset;
                }


                &:hover::before {
                  transform: rotate(0deg);
                }

              }

              a {
                font-weight: 400;
                width: 100%;
                position: relative;
                padding-left: 0.25em;

                &::after {
                  content: "–";
                  width: 1em;
                  height: calc(100% - 0.45em);
                  position: absolute;
                  top: 50%;
                  transform: translateY(-50%);
                  left: -0.5em;
                }

              }

              .sub-menu {
                left: 100%;
                top: 0%;
                width: max-content;
                position: absolute;
                opacity: 0;
                pointer-events: none;
                padding: 0.75em 0;
                padding-left: 0em;
                background: var(--wp--preset--color--senary);
                box-shadow: 2px 2px 6px 0px #00000087;

                .menu-item {
                  padding-left: 1.5em;
                  margin-left: 0em;
                  padding-right: 0.75em;

                  /*&::after {
                    width: calc(100% + 1.5em);
                    left: -1.5em;
                  }*/
                }
              }

              &:hover {
                .sub-menu {
                  opacity: 1;
                  pointer-events: all;
                }
              }
            }
          }
        }
      }
    }
  }
}

/* Search Form
--------------------------------------------- */
.search-form {
  position: relative;

  label {
    display: inline-block;
    position: relative;
    margin-left: 1em;
    border-radius: 5em;
    box-shadow: -6px -4px 6px -1px #ffffffc4;

    .search-field {
      padding: 0.4em 1em;
      border-radius: 5em;
      border-width: 0;
      box-shadow: 6px 4px 6px -1px #00000026;
      position: relative;
      background: var(--wp--preset--color--senary);
      transition: width 0.25s ease;
      width: 200px;

      &::placeholder {
        content: "SEARCH";
      }

      &:focus {
        outline: none;
        width: 275px;
      }
    }

    &::before {
      content: "";
      position: absolute;
      top: 25%;
      right: 0;
      width: 2.5em;
      height: 50%;
      background-image: url(../exemplar/images/search-icon-submit.svg);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      z-index: 1;
      pointer-events: none;
    }
  }

  .search-submit {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    cursor: pointer;
    width: 2.5em;
    padding: 0;
    height: 100%;
    opacity: 0;
  }
}

/* Header - Menu Hamburger
--------------------------------------------- */
.menu-center {
  display: none;
}

.show-on-mobile-menu {
  display: none;
}

/* Carousel
--------------------------------------------- */
#carousel {
  position: relative;
  margin-top: -3.5em;
  margin-bottom: 2rem;

  .carousel-slides {
    display: flex;
    overflow: hidden;
    background: var(--wp--preset--color--primary);

    .carousel-slide {
      position: relative;
      flex: 1 0 100%;
      padding: 8em 0 8em 0;
      transition: background 0.4s ease;
      background: none;

      .main-content-inner {
        opacity: 0;
        transition: opacity 0.5s ease;
      }

      .carousel-img {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: -1;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity 0.4s ease;
        opacity: 0;

        &.carousel-img-yellow {
          filter: grayscale(1);
          mix-blend-mode: multiply;
        }
      }

      h2 {
        color: white;
        font-size: 2.75em;
        line-height: 1.1em;
        margin: 0;
        margin-left: 4%;
        transition: margin-left 0.4s ease;
        max-width: 1000px;
      }

      .carousel-text {
        font-size: 1.1em;
        font-weight: 400;
        color: white;
        opacity: 0;
        margin: 1.5em 0;
        max-width: 500px;
      }

      .carousel-text .line-carousel {
        overflow: hidden;
        display: block;
      }

      .button-p {
        margin-top: 0;
        font-size: 1.2em;
        opacity: 0;
        transition: opacity 0.6s ease;

        a {
          color: black;
          background-color: var(--wp--preset--color--quinary);
          text-decoration: none;
          text-transform: uppercase;
          font-weight: 600;
          padding: 0.25em 0.7em;

          img {
            width: 0.5em;
            vertical-align: middle;
            margin-left: 0.2em;
          }
        }
      }

      .carousel-darken {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: -1;
        width: 100%;
        height: 100%;
        background: rgb(0, 0, 0);
        background: -moz-linear-gradient(90deg,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(0, 0, 0, 0) 65%,
            rgba(0, 0, 0, 0.25) 100%);
        background: -webkit-linear-gradient(90deg,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(0, 0, 0, 0) 65%,
            rgba(0, 0, 0, 0.25) 100%);
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(0, 0, 0, 0.1) 30%,
            rgba(0, 0, 0, 0.4) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#000000", GradientType=1);
      }

      &.carousel-slide-active {
        z-index: 1;

        .main-content-inner {
          opacity: 1;
        }

        .carousel-img {
          opacity: 1;
        }

        h2 {
          margin-left: 0;
        }

        .carousel-text {
          opacity: 1;
        }

        .button-p {
          opacity: 1;
        }

        &.carousel-slide-yellow {
          background: var(--wp--preset--color--primary);
        }
      }
    }
  }

  .carousel-navs-arrows {
    .carousel-nav {
      width: 1.5em;
      line-height: 0;
      position: absolute;
      color: white;
      font-size: 1.75em;
      pointer-events: all;
      z-index: 3;
      margin-left: 0.4em;
      cursor: pointer;
      transition: background 0.35s ease;
      top: 50%;
      padding: 0.2em;
      left: calc(((100vw - var(--wp--style--global--wide-size))) / 2 - 1.5em);

      &:hover {
        background: var(--wp--preset--color--quinary);
      }

      &.carousel-nav-left {
        margin-left: 0em;
        margin-right: 0.4em;

        img {
          transform: rotate(180deg);
        }
      }

      &.carousel-nav-right {
        left: unset;
        right: calc(((100vw - var(--wp--style--global--wide-size))) / 2 - 1.5em);
      }
    }
  }

  .carousel-navs {
    position: absolute;
    bottom: 5em;
    right: 0px;
    z-index: 1;
    width: 100%;
    text-align: center;

    .main-content-inner {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .carousel-nav-dot {
      width: 1em;
      height: 1em;
      background: var(--wp--preset--color--tertiary);
      margin: 0 0.3em;
      transition: background 0.3s ease;

      &.carousel-nav-dot-active {
        background: var(--wp--preset--color--quinary);
      }
    }
  }
}

/* Header Banner
--------------------------------------------- */
.header-banner {
  position: relative;
  z-index: 1;
  margin-top: 2.5em;
  padding-top: 7em;
  padding-bottom: 0em;

  .header-banner-inner {
    .header-banner-shapes {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 120%;
      z-index: -1;
      background-image: url(../exemplar/images/header-banner-shapes.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: top right;
      pointer-events: none;
    }

    .header-banner-info {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      column-gap: 1em;

      .cart-icon {
        width: 3em;
        height: 3em;
        position: relative;
        cursor: pointer;

        &:hover {
          .cart-icon-fill-1 {
            fill: var(--wp--preset--color--white);
          }

          .cart-icon-fill-2 {
            fill: var(--wp--preset--color--quinary);
          }
        }

        .cart-icon-count {
          position: absolute;
          top: 0.25em;
          right: 0.25em;
          background-color: var(--wp--preset--color--white);
          color: var(--wp--preset--color--black);
          font-size: 0.8em;
          font-weight: 600;
          width: 1.5em;
          height: 1.5em;
          padding: 0.3em;
          border-radius: 50%;
          z-index: 1;
          line-height: 1em;
          text-align: center;
          vertical-align: middle;
        }

        .cart-inner {
          position: absolute;
          top: 100%;
          right: 0;
          background-color: var(--wp--preset--color--white);
          box-shadow: 2px 2px 6px 0px #00000087;
          padding: 1em;
          z-index: 1;
          opacity: 0;
          visibility: hidden;
          width: 350px;
          transition: opacity 0.3s ease, visibility 0.3s ease;

          .cart-item {
            display: flex;
            align-items: center;
            column-gap: 1em;

            .cart-item-thumbnail {
              flex: 1 0 100px;
            }

            .cart-item-title {
              font-size: 0.9em;
              font-weight: 600;

              a {
                text-decoration: none;
                color: var(--wp--preset--color--black);
              }
            }

            .cart-item-details {
              display: flex;
              align-items: center;
              column-gap: 1em;
              justify-content: space-between;
              width: 100%;
            }
          }

          .cart-buttons {
            display: flex;
            align-items: center;
            column-gap: 1em;
            justify-content: space-between;
            width: 100%;
            margin-top: 0.5em;
          }
        }

        &:hover {
          .cart-inner {
            opacity: 1;
            visibility: visible;
          }
        }
      }
    }

    h1 {
      position: relative;
      margin-top: 0;
      margin-bottom: 0;
      padding-bottom: 1rem;
    }

    .header-banner-excerpt {
      font-size: 1.2em;
      font-weight: 300;
      max-width: 1000px;
      padding-bottom: 1.5em;
      margin-top: -0.25em;
    }
  }

  .header-banner-thumbnail {
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      object-fit: cover;
      background-position: center;
    }

    .banner-darken {
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: -1;
      width: 100%;
      height: 100%;
      background: rgb(0, 0, 0);
      background: linear-gradient(180deg,
          rgba(0, 0, 0, 0.8) 0%,
          rgba(0, 0, 0, 0.4) 30%,
          rgba(0, 0, 0, 0.8) 100%);
    }
  }

  &.banner-has-thumbnail {
    margin-top: -3em;
    padding-top: 15em;
    color: white;

    .header-banner-excerpt {
      max-width: 700px;
    }
  }

  &.banner-has-no-thumbnail {
    .header-banner-info {
      position: relative;

      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: -8%;
        width: 15em;
        height: 15em;
        transform: translate(-100%, -15%);
        background-image: url(../exemplar/images/title-decal-half.svg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        pointer-events: none;
      }
    }

    .banner-darken {
      display: none;
    }
  }

  &.banner-single {
    h1 {
      padding-bottom: 0;
    }

    .news-date {
      font-weight: 300;
      font-size: 0.9em;
      padding-bottom: 0.75em;
      display: inline-block;

      span {
        margin-left: 1em;
        display: inline-block;
        color: #999999;
      }
    }
  }

  .breadcrumbs span {
    font-weight: 300;

    span,
    .breadcrumb_last {
      margin-right: 0.5em;
      margin-left: 0.5em;

      &:first-child {
        margin-left: 0;
      }

      &:hover {
        color: inherit;
      }
    }

    a {
      color: inherit;
    }
  }
}

/* Footer
--------------------------------------------- */

.site-footer {
  padding: 3em 0 1em 0;
  background-color: var(--wp--preset--color--senary);
  color: #333333;
  overflow: hidden;

  .search-form {
    margin-bottom: 2em;

    label {
      margin-left: 0em;
    }
  }

  .footer-menu {
    padding-bottom: 1em;

    .menu {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      width: 100%;
      list-style: none;
      padding: 0;
      margin: 0;
      column-gap: 2em;

      .menu-item {
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
        flex: 1 1 auto;

        &.menu-item-has-children {
          flex: 1 1 auto;

          a:first-child {
            display: block;
            border-bottom: 1px solid #333333;
            padding-bottom: 0.25em;
          }
        }

        a {
          text-decoration: none;
        }

        .sub-menu {
          margin-top: 0.75em;
          list-style: none;
          margin-left: 0;
          padding-left: 0;

          .menu-item {
            position: relative;

            &:before {
              background-color: transparent;
              clip-path: none;
              position: relative;
              top: unset;
              right: unset;
              transform: none;
              content: "";
              width: 0.6em;
              height: 0.6em;
              display: inline-block;
              background-image: url(../exemplar/images/single-arrow-right.svg);
              background-size: contain;
              background-repeat: no-repeat;
            }

            a {
              display: inline-block;
              margin-left: 0.75em;

              &:first-child {
                border-bottom: none;
              }
            }
          }
        }
      }
    }
  }

  .footer-connect {
    color: white;
    padding: 1.5em 0;
    display: flex;
    column-gap: 4em;
    font-weight: 300;

    &:before {
      z-index: -1;
    }

    .contact-block {
      .contact-title {
        border-bottom: 1px solid white;
        padding-bottom: 0.25em;
        margin-bottom: 0.75em;
      }

      .contact-links {
        display: flex;
        column-gap: 2em;
      }

      p {
        font-size: 1em;
        margin-bottom: 0em;

        .contact-icon {
          background-color: transparent;
          position: relative;
          display: inline-block;
          content: "";
          width: 1em;
          height: 1.1em;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          vertical-align: middle;
          margin-right: 0.2em;

          &.contact-icon-pin {
            background-image: url(../exemplar/images/icon-pin.svg);
          }

          &.contact-icon-phone {
            background-image: url(../exemplar/images/icon-phone.svg);
          }

          &.contact-icon-at {
            background-image: url(../exemplar/images/icon-at.svg);
          }

          &.contact-icon-mail {
            background-image: url(../exemplar/images/icon-mail.svg);
          }
        }

        a {
          text-decoration: none;
          vertical-align: middle;

          &:hover {
            color: inherit;
          }
        }
      }
    }

    .socials {
      flex: 1 1 0%;

      .contact-title {
        display: block;
      }

      p {
        display: inline-block;

        .contact-icon {
          width: 1.25em;
          height: 1.3em;
          margin-right: 0.5em;

          &.contact-icon-fb {
            background-image: url(../exemplar/images/icon-fb.svg);
          }

          &.contact-icon-twitter {
            background-image: url(../exemplar/images/icon-twitter.svg);
          }
        }

        a {
          text-decoration: none;
          vertical-align: middle;

          &:hover {
            color: inherit;
          }
        }
      }
    }
  }

  .footer-autho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1.5em 0;
    color: #999999;

    .footer-logo {
      width: 100%;
      max-width: 200px;

      a {
        display: inline-flex;
        width: 100%;
        line-height: 1em;

        img {
          display: block;
          width: 100%;
          line-height: 1em;
        }
      }
    }

    .footer-mini-menu {
      p {
        display: inline-block;
        margin-bottom: 0;
        margin-right: 0.5em;
      }

      a {
        display: inline-block;
        margin-left: 0.5em;
        margin-right: 0.5em;

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
}

/* WP Blocks
--------------------------------------------- */

.column-align-bottom {
  display: flex;
  align-items: flex-end;
}

.wp-block-cover a {
  text-decoration: none;
  transition: all 0.3s ease;
}

.wp-block-column {
  position: relative;
}

.is-layout-flow>*,
.is-layout-constrained>* {
  margin-block-start: 1em;
}

/* Youtube */
.is-provider-youtube .wp-block-embed__wrapper,
.is-provider-vimeo .wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%;
  width: 100%;
}

.is-provider-youtube .wp-block-embed__wrapper iframe,
.is-provider-vimeo .wp-block-embed__wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* image fixing */

.wp-block-group.is-nowrap.is-layout-flex.wp-block-group-is-layout-flex img {
  max-width: unset;
  vertical-align: unset;
}

.wp-block-image.size-full.is-resized img {
  max-width: unset;
}

/* Forms
--------------------------------------------- */

#primary .gform_wrapper {
  .gform_heading {
    .gform_title {
      font-size: 1.5em;
      margin-top: 0;
      margin-bottom: 0em;
    }

    .gform_description {
      color: #666666;
    }
  }

  form {
    .gform-body {
      .gform_fields {
        row-gap: 1em;

        .gfield {
          .gfield_label {}

          input {
            border-color: #808080;
            border-radius: 0em;

            &::placeholder {
              color: #808080;
            }
          }
        }
      }
    }

    .gform-footer {
      margin-top: 1em;

      .gform_button {
        background-color: var(--wp--preset--color--quinary);
        text-decoration: none;
        text-transform: uppercase;
        font-weight: 600;
        padding: 0.25em 0.7em;
        padding-right: 0.5em;
        border-radius: 0;
        border: 1px solid #808080;
        color: var(--wp--preset--color--black);
        width: 100%;
      }
    }
  }
}

.gform_required_legend {
  display: none;
}

/* Archive
--------------------------------------------- */

.news-filter-options {
  margin-top: 1em;
  margin-bottom: 3em;

  .news-filter-options-title {
    font-size: 0.9em;
    font-weight: 300;

    color: #999999;
  }

  label {
    display: inline-block;
    position: relative;
    margin-left: 0em;
    border-radius: 5em;
    box-shadow: -6px -4px 6px -1px #ffffffc4;

    margin-right: 3em;

    input {
      padding: 0.4em 1em;
      border-radius: 5em;
      border-width: 0;
      box-shadow: 7px 5px 6px 1px #00000026;
      position: relative;
      background: var(--wp--preset--color--senary);
      transition: width 0.25s ease;
      width: 250px;

      &::placeholder {
        content: "SEARCH";
      }

      &:focus {
        outline: none;
        width: 360px;
      }
    }

    &::before {
      content: "";
      position: absolute;
      top: 25%;
      right: 0;
      width: 2.5em;
      height: 50%;
      background-image: url(../exemplar/images/search-icon-submit.svg);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      z-index: 1;
      pointer-events: none;
    }
  }

  select {
    padding: 0.25em 0.5em;
    border-radius: 0em;
    margin-right: 1em;
    border-color: #666666;
    color: #666666;
    background-color: var(--wp--preset--color--senary);
  }
}

.news-posts {
  .news-post {
    padding-bottom: 2em;
    border-bottom: 0.2em solid var(--wp--preset--color--tertiary);
    margin-bottom: 2em;

    h5 {
      font-family: var(--wp--preset--font-family--paragraph);
      font-weight: 600;
      margin-top: 0;
      display: inline-block;
      font-style: normal;

      a {
        text-decoration: none;
      }
    }

    .news-post-content {
      display: flex;
      gap: 1em;

      .news-post-thumbnail {
        flex: 0 1 220px;
        position: relative;

        .news-post-thumbnail-inner {
          padding-bottom: 60%;

          img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }

      .news-post-excerpt {
        flex: 1 1 auto;

        .news-post-excerpt-inline {
          max-width: 700px;
        }

        a {
          text-decoration: none;
        }

        .news-date {
          margin-bottom: 0.5em;
        }

        .news-post-categories {
          color: #999999;
          margin-top: 1em;
        }
      }

      .news-post-read-more {
        flex: 1 1 auto;
        text-align: right;
        white-space: nowrap;
        align-self: flex-end;
      }
    }
  }
}

.news-share {
  margin: 1em 0;

  p {
    margin-bottom: 0em;
    font-weight: 600;
    font-size: 15px;
    color: var(--wp--preset--color--primary);
    font-weight: 300;
  }

  .a2a_button_facebook {
    padding-left: 0;
  }
}

/* Pagination
--------------------------------------------- */

.news-pagination {
  text-align: center;
  font-weight: 700;
  margin: 1em 0;
}

.page-numbers {
  padding: 0;
  text-align: right;
  list-style: none;
  margin: 0px;
  display: inline-block;
}

.page-numbers li {
  display: inline-block;
  width: 1.2em;
  height: 1.25em;
  line-height: 1.25em;
  font-weight: 600;
  margin: 0;
  text-align: center;
}

.page-numbers.current {
  text-decoration: underline;
  color: var(--wp--preset--color--primary);
}

.page-numbers a {
  color: var(--wp--preset--color--text);
}

.page-numbers li span,
.page-numbers li a {
  text-decoration: none;
}

.page-numbers li .next,
.page-numbers li .prev {
  display: block;
  position: relative;
  color: transparent;
  margin: 0px;
}

.page-numbers li .next:after,
.page-numbers li .prev:after {
  content: "";
  border-right: 0.2em solid var(--wp--preset--color--black);
  border-bottom: 0.2em solid var(--wp--preset--color--black);
  display: block;
  line-height: 1;
  font-weight: 400;
  font-style: normal;
  speak: never;
  text-decoration: inherit;
  text-transform: none;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 0.6em;
  height: 0.6em;
  font-size: 0.9em;
  vertical-align: top;
  text-align: center;
  transition: color 0.1s ease-in;
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: 2;
  pointer-events: none;
  cursor: pointer;
}

.page-numbers li .prev:after {
  transform: translate(-50%, -50%) rotate(135deg);
  left: 60%;
}

/* Woocommerce
--------------------------------------------- */

#primary .product {
  .summary {
    float: none;
    width: 100%;
    display: flex;
    gap: 3em;

    .product-content {
      flex: 1 1 auto;
    }

    .product-add {
      flex: 0 1 30%;

      .price {
        color: var(--wp--preset--color--black);
        font-size: 1.5em;
      }

      .cart {
        .quantity {
          float: none;
          margin-bottom: 0.5em;
        }

        .single_add_to_cart_button {
          color: black;
          background-color: var(--wp--preset--color--quinary);
          text-decoration: none;
          text-transform: uppercase;
          font-weight: 600;
          padding: 0.5em 0.7em;
        }
      }
    }
  }

  .products.related {
    > :first-child {
      font-size: 1.5em;
      font-family: var(--wp--preset--font-family--paragraph);
      font-weight: 600;
      margin-bottom: 1em;
      margin-top: 0;
      text-align: left;
      color: var(--wp--preset--color--black);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .products {
      .product {
        h2 {
          font-style: normal;
          font-weight: 600;
          line-height: 1.4;
          margin-bottom: 0rem;
          font-family: var(--wp--preset--font-family--paragraph);
          font-size: var(--wp--preset--font-size--s);
        }

        .price {
          font-size: 1em;
        }

        .add_to_cart_button {
          color: black;
          background-color: var(--wp--preset--color--quinary);
          text-decoration: none;
          text-transform: uppercase;
          font-weight: 600;
          padding: 0.5em 0.7em;
        }
      }
    }
  }
}

.wc-block-product {
  .wp-block-button.wc-block-components-product-button {
    flex-direction: column;

    br {
      display: none;
    }
  }
}

.cart-icon-fill-1 {
  fill: var(--wp--preset--color--black);
  transition: fill 0.25s ease;
}

.cart-icon-fill-2 {
  fill: var(--wp--preset--color--quinary);
  transition: fill 0.25s ease;
}

.wc-block-cart__submit {
  a {
    color: black;
    background-color: var(--wp--preset--color--quinary);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.5em 0.7em;
  }
}

.wp-block-woocommerce-checkout {
  button {
    color: black;
    background-color: var(--wp--preset--color--quinary);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.5em 0.7em;
  }
}

/* Search
--------------------------------------------- */

.search h3 {
  margin-top: 0;
}

.search .site-main-default .search-form {
  margin-bottom: 3em;
  text-align: center;
}


/* GSAP
--------------------------------------------- */
.site h1 {
  opacity: 0;
}

.site .splittext-target {
  opacity: 0;
  will-change: transform;
}

/* MOBILE
--------------------------------------------- */

/* MENU MOBILE TRIGGER - Move last submenus to the left */

@media only screen and (max-width: 1675px) {
  .menu-container .menu .menu-item:last-child>.sub-menu {
    left: unset;
    right: 0;
  }
}

@media only screen and (max-width: 1380px) {
  .menu-container .menu .menu-item:last-child>.sub-menu .menu-item {
    position: relative;
  }

  .menu-container .menu .menu-item:last-child>.sub-menu .menu-item>.sub-menu {
    top: 0;
    left: 0;
    transform: translateX(-100%);
  }


  /* Carousel
	--------------------------------------------- */

  #carousel {
    .carousel-navs-arrows {
      .carousel-nav {
        left: 0;
        width: 1.25em;

        &.carousel-nav-right {
          left: unset;
          right: 0;
        }
      }
    }
  }
}

@media only screen and (max-width: 1300px) {
  .site-header {
    .main-content-inner {
      .header-main {
        .header-logo {
          flex: 0 1 250px;

          &:before {
            content: "";
            width: calc(100% + (100vw * 0.04));
          }
        }

        .header-nav {
          .menu-secondary {
            &:before {
              width: calc(100% + (100vw * 0.04));
            }
          }
        }
      }
    }
  }


  /* Footer
--------------------------------------------- */
  .site-footer .footer-connect {
    flex-wrap: wrap;
    column-gap: 0em;
    row-gap: 1em;

    .contact-block {
      flex: 1 1 100%;

      &.socials .contact-title {
        display: inline-block;
      }
    }
  }






}


/* MENU MOBILE TRIGGER */
@media only screen and (max-width: 1100px) {
  /* Menu - pullout */

  .menu-pullout-mask {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: var(--wp--preset--color--quaternary);
    z-index: 10;
    display: block;
  }

  .site-header {
    background: var(--wp--preset--color--senary);

    .main-content-inner {
      .header-main {
        .header-nav {

          .menu-secondary {
            align-items: center;

            .menu-secondary-container {
              flex: 0 1 auto;
            }
          }

          .menu-pullout {
            transition: transform 0.4s ease;
            position: fixed;
            overflow-x: hidden;

            .menu-pullout-inner {
              flex-wrap: wrap;

              .menu-container {
                flex: 1 1 100%;


                .menu {
                  .menu-item {
                    margin-left: 0px;

                    >a {
                      display: inline-block;
                      width: auto;
                      border-bottom: none;
                    }

                    &.menu-item-has-children {
                      
                      .sub-menu {
                        opacity: 0;
                        pointer-events: none;
                        display: none;
                      }

                      &.menu-item-active {

                        >a {
                          border-bottom: 1px solid var(--wp--preset--color--quinary);
                        }

                        .sub-menu {
                          position: initial;
                          display: block;
                          top: unset;
                          max-width: unset;
                          width: 100%;
                          opacity: 1;
                          pointer-events: all;

                          .menu-item {
                            z-index: 1;

                            > a {
                              width: 100%;
                            }

                            &.menu-item-has-children > a {
                              width: auto;
                            }
                          }
                        }
                      }

                      &::before {
                        top: 1.5em;
                      }

                      .menu-item.menu-item-has-children {
                        &::before {
                          top: 0.6em;
                        }
                      }

                    }

                    &.menu-item-active .sub-menu {
                      position: relative;
                      display: block;

                      .menu-item:hover::after {
                        display: none;

                        .menu-item::after {
                          display: block;
                        }
                      }

                    }

                    .sub-menu {
                      width: 100%;
                      max-width: unset;


                    }

                    &.current-page-ancestor>a {
                      border-bottom: 1px solid var(--wp--preset--color--quinary);
                    }
                  }
                }

              }
            }
          }
        }
      }
    }

    .menu-item.menu-item-has-children:not(.sub-menu > .menu-item-has-children) {
      z-index: 2;
    }

    /* Scrolled down header transition */
    transition: padding-bottom 0.25s ease,
    background-color 0.25s ease,
    border-bottom 0.25s ease;

    &.site-header-border {
      background: var(--wp--preset--color--senary);
      padding-bottom: 0em;
      border-bottom: 0.25em solid var(--wp--preset--color--secondary);
    }

    &.site-header-border-temporary {
      background: var(--wp--preset--color--senary);
      padding-bottom: 0em;
      border-bottom: 0.25em solid var(--wp--preset--color--secondary);
    }

    &.site-header-scrolled:not(.site-header-border-temporary) {
      background: var(--wp--preset--color--senary);
      padding-bottom: 0em;
      border-bottom: 0.25em solid var(--wp--preset--color--secondary);

      .header-main .header-logo {
        padding: 1em 1.2em 1em 0;

        a {
          padding-bottom: 12%;
        }
      }

      .main-content-inner .header-main .header-nav .menu-secondary {
        transform: translateY(0);
        margin-bottom: 0em;
        margin-right: 0em;

        .menu-center {
          border-color: #333333;
          margin-right: 0.5em;

          &:before,
          &:after,
          div {
            background: #333333;
          }
        }
      }

      .main-content-inner .header-main .header-nav .menu-pullout {
        transform: translateY(0);

        .menu-pullout-inner .menu-pullout-search {
          display: none;

          svg {
            right: 0;
            cursor: pointer;
          }
        }
      }
    }
  }

  .menu-pullout {
    display: block;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    transform: translateX(-101%);
    transition: transform 0.5s ease;
    z-index: 11;
    padding: 3em;
    box-shadow: 1px 1px 7px 0 #00000045;
    background: var(--wp--preset--color--primary);
    height: 100vh;
  }

  .site-header {
    &.site-header-scrolled:not(.site-header-border-temporary) {
      .main-content-inner .header-main .header-nav .menu-pullout {
        transform: translateX(-101%);
        border-bottom: 0.25em solid var(--wp--preset--color--secondary);

        &.menu-pullout-active {
          transform: translateX(0%);
        }
      }
    }
  }

  .menu-pullout-active {
    transform: translateX(0%);
    overflow-y: scroll;
  }

  .menu-pullout .menu-container .menu .menu-item a {
    padding: 0.25em 0em;
  }

  /* Hamburger */
  .menu-center {
    position: relative;
    width: 2.3em;
    text-align: center;
    margin: 0 auto;
    margin-right: 0.5em;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #333333;
    border-radius: 100%;
    height: 2.3em;
    padding: 0.5em;
  }

  .menu-center:before,
  .menu-center:after,
  .menu-center div {
    background: #333333;
    content: "";
    display: block;
    height: 1px;
    border-radius: 0px;
    margin: 3px 0;
    margin-top: 4px;
    transition: 0.5s;
  }

  .menu-center.menu-center-active:before {
    transform: translateY(5px) rotate(135deg);
  }

  .menu-center.menu-center-active:after {
    transform: translateY(-5px) rotate(-135deg);
  }

  .menu-center.menu-center-active div {
    transform: scale(0);
  }

  .menu-center:hover {
    background: var(--wp--preset--color--tertiary);
  }

  .menu-center:hover::before,
  .menu-center:hover::after,
  .menu-center:hover div {
    background: white;
  }

  .menu-pullout-inner .menu-center:before,
  .menu-pullout-inner .menu-center:after,
  .menu-pullout-inner .menu-center div {
    background: white;
  }

  .menu-pullout-inner .menu-center {
    border-color: white;
  }

  .site-header-scrolled .menu-center:before,
  .site-header-scrolled .menu-center:after,
  .site-header-scrolled .menu-center div,
  .site-header-bg .menu-center:before,
  .site-header-bg .menu-center:after,
  .site-header-bg .menu-center div {
    background: var(--wp--preset--color--tertiary);
  }

  .site-header-scrolled .menu-center,
  .site-header-bg .menu-center {
    border-color: var(--wp--preset--color--tertiary);
  }

  .menu-pullout .menu-center {
    margin: 0 auto;
    display: block;
    margin-top: 3em;
  }

  .single-campaign .menu-center {
    z-index: 5;
    margin: 0 auto;
    display: block;
  }

  /* menu */

  .site-header .main-content .main-content-inner .header-main .header-logo {
    flex: 0 1 200px;
  }

  .menu-container .menu {
    flex-wrap: wrap;
    font-size: 16px;
  }

  .menu-container .menu .menu-item {
    flex: 1 1 100%;
    padding-right: 0px;
    padding-left: 0px;
    margin-bottom: 0.75em;
    margin-left: 0;
  }

  .menu-container .menu .menu-item a {
    display: inline-block;
  }

  .menu-container .menu .menu-item .sub-menu {
    position: relative;
    top: unset;
    left: unset;
    display: none;
    width: 100%;
    max-width: unset;
  }

  .menu-container .menu .menu-item .sub-menu li {
    margin-bottom: 0px;
  }

  .menu-container .menu .menu-item.menu-item-has-children:hover>.sub-menu {
    display: block;
    border: 0px;
  }

  .menu-container .menu .menu-item .sub-menu .menu-item .sub-menu {
    left: unset;
    top: unset;
    width: 100%;
  }

  .menu-container .menu .menu-item.menu-item-has-children::before,
  .menu-container .menu .menu-item.menu-item-has-children:hover::before {
    top: 1.5em;
  }

  .site-header .main-content .main-content-inner .header-main .menu-container .menu .menu-item a {
    border-right: none;
  }



  /* Footer
--------------------------------------------- */
  .site-footer .footer-connect {
    flex-wrap: wrap;
    column-gap: 0em;
    row-gap: 1em;

    .contact-block {
      flex: 1 1 100%;

      .contact-links p {
        text-align: center;

        .contact-icon {
          display: block;
          margin: 0 auto;
          font-size: 1.25em;
          margin-bottom: 0.25em;
        }
      }
    }
  }


  .header-banner {
    &.banner-has-no-thumbnail {
      margin-top: -1.4em;
    }
  }


}

@media only screen and (max-width: 768px) {

  .site {
    padding-top: 4em;
  }

  /* Flex Styling
	--------------------------------------------- */
  body .is-layout-grid.wp-block-group-is-layout-grid {
    display: flex;
    flex-direction: column;
  }



  /* Menu
	--------------------------------------------- */
  .site-header {
    .main-content-inner {
      .header-main {
        .header-nav {
          .menu-secondary {
            margin-right: 3em;

            .menu-secondary-container {
              .menu {
                .menu-item {
                  margin-left: 0em;

                  a {
                    padding: 0.25em 0.2em;
                  }
                }
              }
            }

            .search-form {
              position: absolute;
              right: calc(-4% + (-2.5em));
              left: unset;
              width: 2.5em;
              transition: width 0.35s ease, padding-right 0.35s ease;

              &::before {
                content: "";
                position: absolute;
                top: 0;
                right: 0;
                width: 100%;
                height: 100%;
                background: var(--wp--preset--color--senary);
                pointer-events: none;
              }

              label {
                width: 100%;
                margin-left: 0em;

                .search-field {
                  width: 100%;

                  &::placeholder {
                    opacity: 0;
                  }

                }
              }

              .search-submit {
                right: -3em;
                pointer-events: none;
                transition: right 0.35s ease;
              }

              &:hover {
                width: 100%;

                label {
                  .search-field {
                    width: 100%;
                    pointer-events: all;
                    padding-right: 2.5em;
                  }
                }

                .search-submit {
                  right: 0em;
                  pointer-events: visible;
                }
              }

            }
          }
        }
      }
    }

    &.site-header-scrolled:not(.site-header-border-temporary) {

      .main-content-inner {
        .header-main {
          .header-nav {
            .menu-secondary {
              margin-right: 3em;
              position: static;
            }
          }
        }
      }

    }
  }


  #carousel {
    margin-top: 0;

    .carousel-slides {
      .carousel-slide {
        padding: 6em 0 6em 0;

        h2 {
          font-size: 2.25em;
        }

        .button-p {
          font-size: 1.1em;
        }
      }
    }

    .carousel-navs {
      bottom: 3em;
    }

    .carousel-navs-arrows {
      .carousel-nav {
        left: 0;
        width: 2em;
        font-size: 1em;
        top: unset;
        bottom: 2.75em;
      }
    }
  }



  /* Footer
--------------------------------------------- */
  .site-footer {

    .footer-connect .contact-block {
      .contact-links {
        flex-wrap: wrap;
        column-gap: 0em;
        row-gap: 1em;


        p {
          text-align: center;
          flex: 1 0 50%;

          .contact-icon {
            display: block;
            margin: 0 auto;
            font-size: 1.25em;
            margin-bottom: 0.25em;
          }
        }
      }
    }

    .footer-autho {
      flex-wrap: wrap;
      text-align: center;
      justify-content: center;
      row-gap: 1em;

      .footer-mini-menu {
        flex: 1 1 100%;
      }
    }

  }

  /* Header Banner
--------------------------------------------- */
  .header-banner {
    &.banner-has-thumbnail {
      padding-top: 10em;
    }

    &.banner-has-no-thumbnail {
      margin-top: 0;
      padding-top: 6em;
    }
  }



  /* Products
--------------------------------------------- */
  #primary .product {
    .summary {
      flex-wrap: wrap;
      row-gap: 0em;
      margin-top: 0;

      .product-content {
        flex: 1 0 100%;
        order: 2;
      }

      .product-add {
        flex: 1 0 100%;
        order: 1;
        justify-content: left;
        text-align: left;
        display: flex;
        align-items: center;
        margin-bottom: 1.5em;

        .price {
          margin: 0;
        }

        .cart {
          display: flex;
          margin: 0;
          margin-left: 1em;
          align-items: center;

          .quantity {
            margin: 0;
            margin-right: 0.5em;
          }
        }

      }
    }
  }

}

@media only screen and (max-width: 500px) {
  /* Flex Styling
	--------------------------------------------- */

  /* Menu
	--------------------------------------------- */
  .menu-pullout {
    padding-left: 5%;
    padding-right: 5%;
  }

  .menu-container .menu .menu-item:hover>a {
    border-bottom: unset;
  }

  .menu-container .menu .menu-item .sub-menu {
    padding-top: 0.5em;
    margin-bottom: 1em;
  }


  .site-header .main-content .main-content-inner .header-main .header-logo {
    flex: 0 1 175px;
  }


  /* Menu
	--------------------------------------------- */
  .site-header {
    .main-content-inner {
      .header-main {
        .header-logo {}

        .header-nav {
          .menu-secondary {
            margin-right: 3em;

            .menu-secondary-container {
              .menu {
                display: none;
              }
            }

            .search-form {
              &:hover {
                width: 92vw;
              }
            }
          }
        }
      }
    }
  }

  /* Carousel
	--------------------------------------------- */
  #carousel {
    .carousel-slides {
      .carousel-slide {
        padding: 5em 0 4em 0;

        h2 {
          font-size: 2em;
        }

        .button-p {
          font-size: 1em;
        }

        .carousel-darken {
          background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.6) 100%);
        }
      }
    }

    .carousel-navs {
      bottom: 1em;
    }

    .carousel-navs-arrows {
      .carousel-nav {
        left: 0;
        width: 2em;
        font-size: 1em;
        top: unset;
        bottom: 0.75em;
      }
    }
  }


  /* Footer
	--------------------------------------------- */
  .site-footer {

    .search-form {

      label,
      .search-field {
        width: 100%;
      }
    }

    .footer-menu .menu {
      flex-wrap: wrap;
      justify-content: left;

      .menu-item,
      .menu-item.menu-item-has-children {
        flex: 0 1 auto;
        margin-bottom: 0.5em;

        a:first-child {
          border-bottom: 1px solid #333333;
          padding-bottom: 0.25em;
        }
      }
    }

    .footer-connect .contact-block .contact-links {
      row-gap: 0.5em;
    }

  }


  /* Header Banner
--------------------------------------------- */
  .header-banner {
    &.banner-has-thumbnail {
      padding-top: 6em;
    }

    &.banner-has-no-thumbnail {
      padding-top: 4em;
    }

    .header-banner-inner {
      .header-banner-excerpt {
        font-size: 1.1em;
      }
    }
  }

  .site-main .main-content .main-content-inner {
    &> :first-child {
      margin-top: 2rem;
    }
  }



}