/* Global Styles */
html {
  font-family: "proxima-nova", sans-serif;
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
}

.uk-text-lighter {
  font-weight: 100;
}

.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, .uk-heading-2xlarge, .uk-heading-3xlarge, .uk-heading-large, .uk-heading-medium, .uk-heading-small, .uk-heading-xlarge, h1, h2, h3, h4, h5, h6 {
  font-family: "proxima-nova", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.uk-button {
  font-family: "proxima-nova", sans-serif;
  font-weight: 400;
  font-style: normal;
}

h1, .uk-h1 {
  font-size: 3.5rem;

  @media only screen and (max-width: 959px) {
    font-size: 2rem;
  }

  span {
    display: block;

    &:nth-child(1) {
      font-weight: 100;
    }
    
    &:nth-child(2) {
      font-size: 1.5rem;
      font-weight: 700;
    }
  }
}

h2, .uk-h2 {
  font-size: 1.65rem;
  font-weight: 400;
  text-transform: uppercase;

  @media only screen and (max-width: 959px) {
    font-size: 1.5rem;
  }
}

h3, .uk-h3 {
  font-size: 1.4rem;

  @media only screen and (max-width: 959px) {
    font-size: 1.2rem;
  }
}

h4, .uk-h4 {
  font-size: 1.3rem;

  @media only screen and (max-width: 959px) {
    font-size: 1.2rem;
  }
}

h5, .uk-h5 {
  font-size: 1rem;

  @media only screen and (max-width: 959px) {
    font-size: 1rem;
  }
}

h6, .uk-h6 {
  font-size: .85rem;

  @media only screen and (max-width: 959px) {
    font-size: .85rem;
  }
}

.uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle {
  font-family: "proxima-nova", sans-serif;
  font-weight: 400;
  font-style: normal;
}

strong, .text-bold {
  font-weight: 700;
}

.text-light {
  font-weight: 100;
}

@primary: #60d19d;
@primary-trans: fade(@primary, 75%);
@primary-ghost: fade(@primary, 30%);
@primary-dark: #006f3c;
@primary-dark-trans: fade(@primary-dark, 75%);
@primary-dark-ghost: fade(@primary-dark, 30%);
@primary-abyss: #003d21;
@primary-abyss-trans: fade(@primary-abyss, 75%);
@primary-abyss-ghost: fade(@primary-abyss, 30%);
@secondary: #FFCE8F;
@secondary-trans: fade(@secondary, 75%);
@secondary-ghost: fade(@secondary, 30%);
@secondary-dark: #E09637;
@secondary-dark-trans: fade(@secondary-dark, 75%);
@secondary-dark-ghost: fade(@secondary-dark, 30%);
@secondary-abyss: #915C16;
@secondary-abyss-trans: fade(@secondary-abyss, 75%);
@secondary-abyss-ghost: fade(@secondary-abyss, 30%);
@highlight: #9c5173;
@highlight-trans: fade(@highlight, 75%);
@highlight-ghost: fade(@highlight, 30%);
@highlight-dark: #6f0033;
@highlight-trans: fade(@highlight, 75%);
@highlight-ghost: fade(@highlight, 30%);
@muted: #EDFFF6;
@muted-trans: fade(@muted, 75%);
@muted-ghost: fade(@muted, 30%);
@white: #ffffff;
@white-trans: fade(@white, 80%);
@white-ghost: fade(@white, 30%);
@white-wisp: fade(@white, 15%);
@black: #080c0c;
@black-trans: fade(@black, 80%);
@black-ghost: fade(@black, 30%);
@gray-bleached: #f4f4f4;
@gray-light: #d5d5e3;
@gray: #96969e;
@gray-dark: #403a3c;

@focal-color: #ffc400; // Contrast to site colors
@focal-outline: {
  outline: 3px solid @focal-color;
  outline-offset: -3px;
  transition: 0s;
}
@focal-outline-important: {
  outline: 3px solid @focal-color!important;
  outline-offset: -3px;
  transition: 0s;
}

@radius: 2px;
@border-width: 1px;
@border-width-thick: 3px;
@border-default: @border-width solid @gray-light;
@border-primary: @border-width solid @primary;

.box-shadow(@shadows) {
  -webkit-box-shadow: @shadows;
  -moz-box-shadow: @shadows;
  box-shadow: @shadows;
}

.uk-button {
  &.spec {
    min-width: 235px;
    line-height: 43px;
  }

  &-default, &-primary, &-secondary {
    border-width: 1px;
  }
}

@media only screen and (max-width: 959px) {
  .uk-button {
    min-width: 0;
  }
}

.arrow {
  margin: 0 5px;
  border: 1.5px solid @white;
  background: @black-trans;
  color: @white;
  will-change: transform;
  transition: .8s;

  &:hover {
    border: 1.5px solid @black;
    background: @white;
    color: @black;
    transition: .2s;
  }

  &:focus, &:active {
    background-color: @primary-dark;
    color: @white;
  }
}

// For Button Text Irregularity w/Icon
// a.uk-button > span:nth-child(2) {
//   transform: translateY(2px);
// }

.bg-primary {
  background: @primary;
}

.bg-primary-trans {
  background: @primary-trans;
}

.bg-primary-ghost {
  background: @primary-ghost;
}

.bg-primary-dark {
  background: @primary-dark;
}

.bg-primary-dark-trans {
  background: @primary-dark-trans;
}

.bg-primary-dark-ghost {
  background: @primary-dark-ghost;
}

.bg-primary-abyss {
  background: @primary-abyss;
}

.bg-primary-abyss-trans {
  background: @primary-abyss-trans;
}

.bg-primary-abyss-ghost {
  background: @primary-abyss-ghost;
}

.bg-secondary {
  background: @secondary;
}

.bg-secondary-trans {
  background: @secondary-trans;
}

.bg-secondary-ghost {
  background: @secondary-ghost;
}

.bg-secondary-dark {
  background: @secondary;
}

.bg-secondary-dark-trans {
  background: @secondary-dark-trans;
}

.bg-secondary-dark-ghost {
  background: @secondary-dark-ghost;
}

.bg-secondary-abyss {
  background: @secondary;
}

.bg-secondary-abyss-trans {
  background: @secondary-abyss-trans;
}

.bg-secondary-abyss-ghost {
  background: @secondary-abyss-ghost;
}

.bg-white {
  background: @white;
}

.bg-white-trans {
  background: @white-trans;
}

.bg-white-ghost {
  background: @white-ghost;
}

.bg-black {
  background: @black;
}

.bg-black-trans {
  background: @black-trans;
}

.bg-black-ghost {
  background: @black-ghost;
}

.bg-muted {
  background: @muted;
}

.bg-muted-trans {
  background: fade(@muted, 75%);
}

.bg-muted-ghost {
  background: fade(@muted, 30%);
}

.bg-gray {
  background: @gray;
}

.bg-gray-bleached {
  background: @gray-bleached;
}

.bg-gray-light {
  background: @gray-light;
}

.bg-gray-dark {
  background: @gray-dark;
}

.bg-highlight {
  background: @highlight;
}

.bg-highlight-trans {
  background: @highlight-trans;
}

.bg-highlight-ghost {
  background: @highlight-ghost;
}

.bg-gray {
  background: @gray;
}

.bg-lines {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;

  &::before {
    position: absolute;
    content: "";
    background-color: lighten(@gray-light, 7%);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
  }

  &::after {
    position: absolute;
    content: "";
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgNTAwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjtzdHJva2Utd2lkdGg6MHB4O308L3N0eWxlPjwvZGVmcz48cmVjdCBjbGFzcz0iY2xzLTEiIHg9IjQ1MCIgd2lkdGg9IjI1IiBoZWlnaHQ9IjUwMCIvPjxyZWN0IGNsYXNzPSJjbHMtMSIgeD0iNDAwIiB3aWR0aD0iMjUiIGhlaWdodD0iNTAwIi8+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzNTAiIHdpZHRoPSIyNSIgaGVpZ2h0PSI1MDAiLz48cmVjdCBjbGFzcz0iY2xzLTEiIHg9IjMwMCIgd2lkdGg9IjI1IiBoZWlnaHQ9IjUwMCIvPjxyZWN0IGNsYXNzPSJjbHMtMSIgeD0iMjUwIiB3aWR0aD0iMjUiIGhlaWdodD0iNTAwIi8+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIyMDAiIHdpZHRoPSIyNSIgaGVpZ2h0PSI1MDAiLz48cmVjdCBjbGFzcz0iY2xzLTEiIHg9IjE1MCIgd2lkdGg9IjI1IiBoZWlnaHQ9IjUwMCIvPjxyZWN0IGNsYXNzPSJjbHMtMSIgeD0iMTAwIiB3aWR0aD0iMjUiIGhlaWdodD0iNTAwIi8+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSI1MCIgd2lkdGg9IjI1IiBoZWlnaHQ9IjUwMCIvPjxyZWN0IGNsYXNzPSJjbHMtMSIgd2lkdGg9IjI1IiBoZWlnaHQ9IjUwMCIvPjwvc3ZnPg==");
    background-position: center;
    background-size: 75px 75px;
    background-repeat: repeat;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: .5;
    z-index: -1;
  }
}

.bg-tex {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;

  &::before {
    position: absolute;
    content: "";
    background-color: @white;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
  }

  &::after {
    position: absolute;
    content: "";
    background-image: url(https://nativerank.dev/cheese-wedge/wp-content/uploads/2024/04/Black-Grain-Transparent.svg);
    background-size: 500px 500px;
    background-position: center center;
    background-repeat: repeat;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: .15;
    z-index: -1;
  }

  &.fixed {
    &::after {
      background-attachment: fixed;
    }
  }
}

hr.thick {
  border-top-width: 4px;
}

hr.narrow {
  width: 60%;
}

hr.center {
  margin-left: auto;
  margin-right: auto;
}

hr.primary {
  border-top-color: @primary;
}

hr.primary-dark {
  border-top-color: @primary-dark;
}

hr.primary-abyss {
  border-top-color: @primary-abyss;
}

hr.black {
  border-top-color: @black;
}

hr.white {
  border-top-color: @white;
}

hr.gray {
  border-top-color: @gray;
}

hr.gray-light {
  border-top-color: @gray-light;
}

hr.gray-dark {
  border-top-color: @gray-dark;
}

.border-default {
  border: @border-default;
  border-radius: @radius;
}

.border-primary {
  border: @border-primary;
  border-radius: @radius;
}

.text-primary {
  color: @primary-dark;
}

.text-primary-dark {
  color: @primary-dark;
}

.text-primary-abyss {
  color: @primary-abyss;
}

.text-secondary {
  color: @secondary;
}

.text-secondary-dark {
  color: @secondary-dark;
}

.text-secondary-abyss {
  color: @secondary-abyss;
}

.text-white {
  color: @white;
}

.text-white-trans {
  color: @white-trans;
}

.text-white-ghost {
  color: @white-ghost;
}

.text-black {
  color: @black;
}

.text-black-trans {
  color: @black-trans;
}

.text-black-ghost {
  color: @black-ghost;
}

.text-highlight {
  color: @highlight;
}

.text-highlight-dark {
  color: @highlight-dark;
}

.canvas-l {
  height: 650px;
  max-height: 650px;
}

.canvas-m {
  height: 450px;
  max-height: 450px;
}

.canvas-s {
  height: 250px;
  max-height: 250px;
}

.custom-cover {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
/* End Global Styles */

/* Header Format */
//  Floating Left Logo If Layout Is Not Stacked
// .tm-header .uk-navbar-container > .uk-container {
//   position: relative;
// }

// .tm-header .uk-navbar-container > .uk-container .uk-logo {
//   position: absolute;
//   content: "";
//   width: 325px;
//   left: -7px;
//   bottom: 0;
// }

// .tm-header .uk-navbar-container > .uk-container .uk-logo img {
//   padding: 7px;
//   width: 100%;
//   height: auto;
// }

.tm-header-mobile .uk-logo img {
  padding-top: 4px;
  height: 70px;
  width: auto;
}
//

// Floating Logo If Layout Is Stacked
.tm-header > .uk-navbar-container .uk-navbar .uk-navbar-left {
  margin: 0 0 0 auto;
  width: 100%;
}

.tm-header .tm-headerbar-top > .uk-container {
  position: relative;
  z-index: 2;
}

.tm-header .tm-headerbar-top > .uk-container .uk-logo {
  position: absolute;
  content: "";
  left: 15px;
  width: 150px;
  bottom: unset;
  top: 0;
}

.tm-header .tm-headerbar-top > .uk-container .uk-logo img {
  padding: 5px 3px 3px 3px;
  width: 100%;
  height: auto;
}


// Navbar Logo Center
// .tm-header .uk-navbar-center {
//   position: relative;
//   width: 170px;
//   height: 60px;
// }

// .tm-header .uk-navbar-center .uk-logo {
//   position: absolute;
//   padding: 10px;
//   width: 100%;
//   height: auto;
//   bottom: -44px;
//   left: 50%;
//   transform: translateX(-50%);
//   transition: .4s;
// }

/* End Header Format */

/* Header Menu Styles */

// If Toolbar Has Pseudoelements
// .tm-toolbar > .uk-container {
//   position: relative;
//   z-index: 1;
// }
// 

// Upper CTA
.upper-cta {
  overflow: hidden;
  // margin-right: -10px;
}

.upper-cta {
  margin-right: -13px;

  > div {
    > a {
      position: relative;
      padding: 5px 13px;
      font-size: 1rem;
      text-transform: uppercase;
      font-family: "proxima-nova", sans-serif;
      font-weight: 700;
      font-style: normal;
      z-index: 1;
      overflow: hidden;
      transition: .6s;

      // &::before {
      //   position: absolute;
      //   content: "";
      //   background: linear-gradient(90deg, rgba(96,209,157,1) 0%, rgba(96,209,157,1) 60px, rgba(0,111,60,1) 60px, rgba(0,111,60,1) 100px, rgba(0,61,33,1) 100px);
      //   width: ~"calc(100% + 101px)";
      //   height: 100%;
      //   left: -100px;
      //   top: 0;
      //   transform: translateX(100%);
      //   z-index: -1;
      //   transition: 1s ease-in-out;
      // }

      &:hover {
        color: @primary-dark;
        transition: .2s ease-in-out;

        // &::before {
        //   transform: translateX(0%);
        //   transition: .4s;
        // }
      }
    }

    > span {
      display: inline-block;
      position: relative;
      height: 25px;
      width: 1px;
      z-index: 3;

      &::after {
        position: absolute;
        content: "";
        background: @gray-light;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
      }
    }
  }
}

.upper-cta > a:hover {
  color: @secondary!important;
  transition: .5s;
}

.upper-cta > a::before {
  position: absolute;
  content: "";
  background: @white;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform-origin: center top;
  transform: scaleX(1) scaleY(0);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  transition: 1s;
  z-index: -1;
}

.upper-cta > a:hover::before {
  transform: scaleX(1) scaleY(1);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: .3s;
}
// 

// Header Styles for Regular Menu & Dropdowns
.tm-header {
  .box-shadow(0 3px 3px 0 fade(@black, 7%));

  .uk-navbar-container {
    padding-top: 5px;
    // Main Nav Items
    .uk-navbar-nav {
      display: flex;
      justify-content: space-between;
      width: 100%;

      > li {

        > a {
          font-size: clamp(.9rem, 1.3vw, 1.08rem);
          font-weight: 400;
          letter-spacing: .75px;
        }

        &.uk-active {
          > a {
            font-weight: 700;
          }
        }
      }
    }
  }

  // Dropdown Menu Items
  .uk-navbar-dropdown {
    border-top: 1px solid @gray-light;
    border-bottom: @border-width solid @primary-abyss;
    .box-shadow(0 30px 12px -20px fade(@black, 15%));
    will-change: transform;

    .uk-nav {
      > li {
        > a {
          padding: 10px 30px 10px 15px;
          font-family: "proxima-nova", sans-serif;
          font-weight: 400;
          transition: .4s;
        }

        &:not(:first-child):hover {
          > a {
            background: @primary-dark; 
            color: @white;
          }
        }

        &.uk-active {
          > a {
            border-left: 10px solid @primary-dark;
          }

          &:hover {
            > a {
              color: @white;
            }
          }
        }

        // Sub w/ Children
        &.uk-parent {
          > a.menu-item-has-children {
            position: relative;

            &::after {
              position: absolute;
              content: '\203A';
              font-size: 150%;
              font-weight: 700;
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              right: 15px;
              color: @primary-dark;
              transition: .4s;
            }

            &:hover {
              &::after {
                color: @white;
              }
            }
          }
        }
      }

      // Sub Children Dropdown
      .uk-nav-sub {
        background: @muted;

        a {
          padding: 12px 20px;
        }
      }
    }
  }
  //
}

// For Wide Dropdown Menus
.nav-title {
  &.uk-h3 {
    border-bottom: 1px solid @gray;
    background: @white;
    color: @primary-abyss;
    font-size: 2rem;
    font-weight: 400;
    text-transform: uppercase;
    padding: 8px 27px;

    &.uk-heading-line > ::after, &.uk-heading-line > ::before {
      z-index: 2;
    }
  }
}

.menu-content-grid {
  background-color: #f7f7f7;
  // background-image: url(https://nativerank.dev/cheese-wedge/wp-content/uploads/2024/04/Muted-Texture.svg);
  // background-size: 200px 200px;
  // background-repeat: repeat;
  // background-position: center center;
}

.menu-item-w-children {
  .uk-navbar-dropdown-nav {
    > li {
      &:first-child {
        position: relative;

        a {
          font-weight: 700;
        }

        &::before {
          position: absolute;
          content: "";
          background: @gray-light;
          width: 100%;
          height: @border-width;
          left: 0;
          bottom: 3px;
          transition: .3s;
        }
      }

      &:not(:first-child) {
        a {
          display: block;
          color: @black;
          position: relative;
          padding-left: 30px;

          &::before {
            position: absolute;
            content: "\25D7";
            color: @gray;
            font-size: .8rem;
            font-weight: 700;
            font-family: inherit;
            left: 10px;
            bottom: 50%;
            transform: translateY(50%) rotate(0deg);
            transition: .8s;
          }

          &:hover {
            color: @white;

            &::before {
              color: @white;
              transform: translateY(50%) rotate(180deg);
              transition: .3s;
            }
          }
        }
      }
    }
  }
}

.menu-image {
  margin-top: -70px;
}

// Mobile Menu Dropdown
#tm-mobile .toggle_sub, #tm-mobile .uk-nav > li > a, #tm-mobile>div .uk-nav>li.uk-active>a:hover {
  color: #8b8b8b;
}
// 
/* End Header Menu Styles */

/* Frontpage Styles */
// Header Front
.header-front {

  @media only screen and (max-width: 959px) {
    *+.uk-grid-margin, .uk-grid+.uk-grid, .uk-grid>.uk-grid-margin {
      margin-top: 20px;
    }
  }

  @media only screen and (max-width: 639px) {
    *+.uk-grid-margin, .uk-grid+.uk-grid, .uk-grid>.uk-grid-margin {
      margin-top: 10px;
    }
  }

  ul {
    > li.uk-overflow-hidden {
      > img {
        pointer-events: none;
      }
    }
  }

  .screen {
    background: fade(@white, 85%);
    pointer-events: none;
    transition: .6s;
  }

  .slide-title {
    margin-left: -30px;
    margin-bottom: -55px;
    font: unset;

    @media only screen and (max-width: 959px) {
      margin-left: 0;
      margin-bottom: -9px;
    }

    @media only screen and (max-width: 639px) {
      margin-bottom: 0;
    }

    > span {
      // display: inline-block;
      // position: relative;
      // background-size: 1100px auto;
      // background-attachment: fixed;
      // background-position: center center;
      // background-repeat: no-repeat;
      // font-family: "Bevan", serif;
      // font-size: 6rem;
      // font-weight: 400;
      // font-style: normal;
      // -webkit-background-clip: text;
      // color: fade(@primary-abyss, 50%);
      // -webkit-text-fill-color: fade(@primary-abyss, 50%);

      // @media only screen and (max-width: 959px) {
      //   font-size: clamp(3rem,13.5vw,7rem);
      //   background-size: cover;
      //   color: fade(@primary-abyss, 100%);
      //   -webkit-text-fill-color: fade(@primary-abyss, 100%);
      // }

      .link-sheath {
        position: relative;
        font-family: "proxima-nova", sans-serif;
        font-size: 1rem;
        font-weight: 400;
        height: fit-content;
        left: 0;
        bottom: 0;
        overflow: hidden;
        transform: translateY(-50%);
        z-index: 1;

        @media only screen and (max-width: 639px) {
          bottom: -10px;
        }
        
        .title-link {
          display: inline-block;
          border: @border-width solid @white;
          padding: 10px 20px;
          background-image: none;
          background-color: @black-trans;
          width: 220px;
          text-align: center;
          color: @white;
          -webkit-text-fill-color: @white;
          -webkit-background-clip: unset;
          font-family: "proxima-nova", sans-serif;
          font-size: 1rem;
          font-weight: 400;
          transition: .3s;

          &::before {
            position: absolute;
            content: "";
            background: @white;
            width: 100%;
            height: @border-width;
            left: 272px;
            top: 50%;
            transform: translateY(~"calc(-50% - .5px)");
            pointer-events: none;

            @media only screen and (max-width: 959px) {
              display: none;
            }
          }

          &::after {
            position: absolute;
            content: "";
            background: @black;
            width: 100%;
            height: @border-width;
            left: 272px;
            top: 50%;
            transform-origin: left;
            transform: scaleX(0) translateY(~"calc(-50% - .5px)");
            pointer-events: none;
            transition: .9s;

            @media only screen and (max-width: 959px) {
              display: none;
            }
          }

          &:hover {
            border: @border-width solid @black;
            background-color: @white;
            color: @black;
            -webkit-text-fill-color: @black;

            &::after {
              transform: scaleX(1) translateY(~"calc(-50% - .5px)");
              transition: .3s .2s;
            }
          }

          &:focus, &:active {
            background-color: @primary-dark;
            color: @white;
            -webkit-text-fill-color: @white;
          }
        }
      }
    }
  }

  .Kitchen {
    .slide-title {
      > span {
        // background-image: url('https://nativerank.dev/cheese-wedge/wp-content/uploads/2024/04/KitchenCabsB.webp');
      }

      @media only screen and (max-width: 959px) {
        background-image: none;
      }
    }
  }

  .Bathroom {
    .slide-title {
      > span {
        // background-image: url('https://nativerank.dev/cheese-wedge/wp-content/uploads/2024/04/Q3-2021-Bathroom_01.webp');
      }

      @media only screen and (max-width: 959px) {
        background-image: none;
      }
    }
  }

  .Cabinet {
    .slide-title {
      > span {
        // background-image: url('https://nativerank.dev/cheese-wedge/wp-content/uploads/2024/04/Ultracraft_Bar_Transitional_Photo-1-of-1-jpg.webp');
      }
      
      @media only screen and (max-width: 959px) {
        background-image: none;
      }
    }
  }

  .hover-target {
    .image-container {
      border: 10px solid @white;
      height: 450px;
      transition: .5s;

      @media only screen and (max-width: 959px) {
        height: 200px;
      }
  
      .service-name {
        position: relative;
        margin: 50px 0;
        padding: 15px;
        width: 100%;
        font-size: 1.3rem;
        font-weight: 400;
        text-transform: uppercase;
        transform: translateY(0);
        z-index: 1;
        transition: .9s;
  
        &::before {
          position: absolute;
          content: "";
          background: fade(@white, 90%);
          width: 100%;
          height: 100%;
          left: 50%;
          top: 0;
          will-change: transform;
          transform: translateX(-50%);
          z-index: -1;
          transition: .9s;
        }
      }
    }

    &:hover {
      .service-name {
        color: @white;
        transform: translateY(5px) !important;
        transition: .3s;

        @media only screen and (max-width: 959px) {
          transform: translateY(10px) !important;
        }
  
        &::before {
          background: @black;
          transition: .3s;
        }
      }
    }
  }

  .arrow-house {
    position: absolute;
    width: 100%;
    max-width: 1480px;
    margin: 0 40px;
    height: 40px;
    right: 50%;
    bottom: 40px;
    transform: translateX(50%);

    @media only screen and (max-width: 959px) {
      margin: 0;
    }
    
    .arrow {
      margin: 0 5px;
      border: 1.5px solid @white;
      background: @black-trans;
      color: @white;
      will-change: transform;
      transition: .8s;

      &:hover {
        border: 1.5px solid @black;
        background: @white;
        color: @black;
        transition: .2s;
      }

      &:focus, &:active {
        background-color: @primary-dark;
        color: @white;
      }
    }
  }

  .uk-slider-items {
    > li {
      padding-top: 90px;
      padding-bottom: 90px;

      @media only screen and (max-width: 959px) {
        padding-top: 40px;
        padding-bottom: 40px;
      }

      .hover-target {
        .image-container {
          img {
            filter: saturate(.2);
            transition: .5s;
          }

          .fog {
            background: fade(@white, 20%);
            transition: .8s;
          }
        }
      }

      &.uk-active {
        .screen {
          background: fade(@white, 50%);
        }

        .hover-target {
          .image-container {
            img {
              filter: saturate(1);
            }

            .fog {
              background: fade(@white, 0%);
              transition: .5s;
            }
          }

          &:hover {
            .image-container {
              img {
                filter: saturate(1.2);
              }
  
              .fog {
                background: fade(@secondary, 20%);
              }
            }
          }
        }
      }
    }
  }
}

.where-the-h1-lives {
  .overlay-target {
    z-index: 1;

    .uk-container {
      @media only screen and (max-width: 959px) {
        padding: 0 40px;
      }
    }

    .uk-card {
      position: relative;
      padding: 30px 40px;
      border-left: @border-width solid @gray;
      border-right: @border-width solid @gray;
      display: inline-block;
      width: auto;
      z-index: 1;

      &::before {
        position: absolute;
        content: "";
        background: @gray;
        width: 100vw;
        height: @border-width;
        left: 100%;
        top: 50%;
      }

      &::after {
        position: absolute;
        content: "";
        background: @gray;
        width: 100vw;
        height: @border-width;
        right: 100%;
        top: 50%;
      }

      h1 {
        line-height: 1.3;
        margin-bottom: 30px;
      }
    }
  }
}
// End Header Front

// Leaves
@keyframes leaves {
  0% {
    transform: translate(-50%, -150%) rotate(-40deg);
  }
  100% {
    transform: translate(-50%, 400%) rotate(250deg);
  }
}

@keyframes leaves2 {
  0% {
    transform: translate(-50%, -150%) rotate(40deg) scaleX(-1);
  }
  100% {
    transform: translate(-50%, 500%) rotate(-275deg) scaleX(-1);
  }
}

.leaves {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: 1;

  .one, .two, .three, .four, .five {
    position: absolute;
    content: "";
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHZpZXdCb3g9IjAgMCAzNjUgMTI5IiB4bWxuczp2PSJodHRwczovL3ZlY3RhLmlvL25hbm8iPjxwYXRoIGQ9Ik0zNTIuMDYgNzUuOTkxYy0yLjc3My0zLjMzMy03LjY3Ny04LjI5Mi02LjE0OC0xMi44MTggMi41MTUtNC44NDktOC45NS00LjY5Ni04LjI3OC04LjA3OC4wODctMi44NTUgMi40NjMtNC4yODEgNS4wODItNC40OTggNC43ODktNi40MTQtMzguMDc3LTQuOTAyLTIyLjUyNS0xMy41MDggNC44MjMtMi4zNTkgMTYuNjA3IDYuMzc2IDE1Ljg3LTMuMTQ0LTIuMDMxLTUuNTU1IDMuMjYyLTEyLjMzMyA3LjE2NC0xNS45MzggNi43MzctOS41OC0yNS43MiAzLjUwNy0yOS42MSAxLjA1OC00LjEzMy0uMjM0LTIuMzc0LTUuMjY2LTQuNzI4LTQuMTc1LTUuNDU1IDMuNTY0LTEyLjU2IDMuMjAyLTE4LjA1MyA2Ljc5Ni05LjU1MyA0LjIyNy04Ljc1Mi0xMy4yODYtOC41NjItMTguOTQ2LjYzMy03LjAyNC02LjM3MyAxLjQ1NS04LjAzIDMuMy0zLjczNiAzLjQzMS01LjU1NyA4LjA1My02LjIwMiAxMy4wMTctLjU5OSAyLjc2Mi00LjU5OSAxLjUwOS01LjU4IDQuMzI4LTEuODA5IDMuMS00LjE1MS0xLjY4OS01Ljc0Ni0yLjgwMS01LjI4MS0zLjMwMi0xLjU0MiAxMi4yMzUuMzI0IDE0LjExMi42NzkuNjE0LS4wODYgMS40NDMtLjg1MyAxLjA2NUMxNzIuNTM0IDExLjU3NyA4Mi45MTIgMjAuMDA4IDEuMzE4IDQ3Ljg4MWMtMy4yNzQgMS4xMDkuMzYxIDUuNDc4IDIuMTY3IDMuMDExQzgxLjg1MiAyNC44OCAxNzguNjIyIDEyLjE4OSAyNTUuMjQ4IDM5LjQwM2MtNC4yNjcgMS40OTctOS41NDkgMy44NDUtMTAuNTA5IDguNDg1LjI4My4zMzIuNTYuMTcxLjg3Ni4wNjIuOTUzLS41NTMgNC4xMDItMS4wMjggMi45NS45MS0xMS42MjUgNy43MS02LjI3IDE4LjcwMi0xMy43NjYgMjUuODU4LS4zNzIuMjgxLS41OTMuNjQ5LS4zOTIgMS4xOC45MzkgMi40OS44MTkgNC45NS0uMTQ5IDcuNDI0LjI4MiA1LjY5MiAxNC40OTMtNi4zNDQgMTUuNzE2LTguOTA5IDE2LjkzMS0xOC40NDQgNC40ODggMTguMjg4IDEwLjcxIDI0LjU3NSAyLjg2MyAzLjc2OS0uODEgMTAuNDE2IDIuMzAyIDEwLjgxOCAxMS41OTkuNzI2IDEzLjk1OCAxMy43MjYgMjMuMjE4IDE4LjY5OSAzLjUyNSAzLjAwOSAxLjAyMS04LjYxNSAxLjYzOC0xMC42NjEuNTgzLTQuODI2LS45ODctMTQuNjQzIDUuODk1LTE0LjY4OSA1LjkwNy01LjI2OC02Ljk2LTIwLjI3My00LjcyNy0yOC4yMDUuNDk3LTQuNjggNC44MzUtNC45MjQgNi41NzgtLjk4IDMuMjY3IDQuNzkgNi42MTUgOS40NzkgMTEuMzQ0IDEzLjAzIDMuNzE3IDQuNTMyIDMwLjI5MyAxNy42NDUgMjAuMTExIDIuNDg4LTIuMjMyLTIuNDY0LjE1NC01LjcxMyAzLjIxNS00LjQ1IDQuNzQxLS4wNDggMTUuOTggMTMuNTQ0IDE1LjQ2NiAyLjQ0Mi40MzEtNC4xNyAxMy42OTkgNS4xODggMTkuMjc2IDEuMjAyLTMuMTQ2LTQuNjQtOS4xODktOC4wNTgtMTIuOTM5LTEyLjY5M3ptLTkuNTY3IDMuNTYxYy0uODA1IDEuNTQtMy44NzQtLjczOS00LjAxMi0uODcxLTI0LjYwMS0xNi45NTMtNTAuNTI4LTI5LjYtNzUuMDg3LTM2LjYzMiAyLjAxMi0uMTMyIDIwLjU5MyA1NC4wNjggMTEuMjY2IDQzLjYxOS0zLjY0OS0xMy4zNTYtNi42ODYtMjcuOTA1LTE0LjE0OS0zOS4yNTQtLjk4MSAyLjU4OS05LjIyNSAyNC4xNi0xMi45NjUgMTkuNTM3IDEuNjYzLTQuODY5IDYuMTE4LTkuMjU3IDcuMjgzLTE0LjY4OSAxLjA1Mi0zLjAxNiAyLjQ5Mi03LjE0NiAxLjc3Mi04LjIxNy0uMTEtLjM4MS0yLjcyNS0uMjEyLTMuMDI0LS4zMjEgNC4zOTMtMi4zNTQgMy41NDktNy41NjggNS4wODgtMTEuNjQ3IDEuMzI2IDQuMzEgNC4yNDQgNi4zMzMgOC43NCA3LjM1OCAyNS4xOCA4LjUzNiA0OC43NjcgMjAuODk3IDc0Ljk3MSAzOS4zODEuMzA2LjU4Mi40NDMgMS4yOTQuMTE2IDEuNzM3aDB6IiBmaWxsPSIjZmZmIi8+PC9zdmc+");
    background-size: cover;
    background-repeat: no-repeat;
    filter: drop-shadow(0 10px 3px fade(@black, 10%));
  }

  .one {
    width: 200px;
    height: 71px;
    left: 5%;
    top: 0;
    transform: translate(-50%, -100%);
    animation: leaves2 12s cubic-bezier(0.3, 0.000, 0.7, 1.000) infinite;
  }

  .two {
    width: 365px;
    height: 129px;
    left: 10%;
    top: 0;
    transform: translate(-50%, -100%);
    animation: leaves 15s cubic-bezier(0.3, 0.000, 0.7, 1.000) infinite;
    animation-delay: -8s;
  }

  .three {
    width: 475px;
    height: 168px;
    left: 50%;
    top: 0;
    transform: translate(-50%, -100%);
    animation: leaves 16s cubic-bezier(0.3, 0.000, 0.7, 1.000) infinite;
    animation-delay: -5s;
  }

  .four {
    width: 300px;
    height: 106px;
    left: 80%;
    top: 0;
    transform: translate(-50%, -100%);
    animation: leaves2 10s cubic-bezier(0.3, 0.000, 0.7, 1.000) infinite;
    animation-delay: -3s;
  }

  .five {
    width: 450px;
    height: 159px;
    left: 90%;
    top: 0;
    transform: translate(-50%, -100%);
    animation: leaves 14s cubic-bezier(0.3, 0.000, 0.7, 1.000) -6s infinite;
    animation-delay: -10s;
  }

  @media only screen and (max-width: 959px) {
    .one, .two, .three, .four, .five {
      display: none;
      animation: none;
    }
  }
}
// End Leaves

// First Section
.first-front {
  .hero {
    position: relative;
    height: 550px;
    overflow: hidden;

    @media only screen and (max-width: 959px) {
      height: 400px;
    }

    > div {
      position: absolute;
      width: 100%;
      height: 100%;


      .mask {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;

        @media only screen and (max-width: 959px) {
          display: none;
        }
  
        &.top {
          position: absolute;
          content: "";
          background: @white;
          width: 100%;
          height: 21%;
          left: 0;
          top: 0;
        }
        &.middle {
          position: absolute;
          content: "";
          background: @white;
          width: 100%;
          height: 36%;
          left: 0;
          top: 20%;
        }
        &.bottom {
          position: absolute;
          content: "";
          background: @white;
          width: 100%;
          height: 46%;
          left: 0;
          top: 55%;
        }
      }
    }
  }

  .content {
    .uk-card {
      position: relative;
      margin-top: -50px;
      margin-bottom: 40px;
      border: @border-width solid transparent;
      background: fade(@white, 85%);
      z-index: 1;

      &::before {
        position: absolute;
        content: "";
        border: @border-width solid @gray;
        border-top: none;
        width: ~"calc(100% + 28px)";
        height: 50%;
        left: 50%;
        bottom: -14px;
        transform: translateX(-50%);
        z-index: -1;
      }

      h2 {
        position: relative;

        &::before {
          position: absolute;
          content: "";
          background: @primary-dark;
          width: 50%;
          height: @border-width;
          left: 50%;
          bottom: -5px;
          transform: translateX(-50%);
        }

        &::after {
          position: absolute;
          content: "";
          background: @primary-dark;
          width: 20%;
          height: @border-width-thick;
          left: 50%;
          bottom: -6px;
          transform: translateX(-50%);
        }
      }

      p {
        text-align: justify;
      }
    }
  }
}
// End First Section

// Body 1
.body-1 {
  .image-container {
    height: 700px;

    @media only screen and (max-width: 959px) {
      height: 350px;
    }
  }

  .content {
    .uk-card {
      margin-left: -50px;
      background: @white;

      @media only screen and (max-width: 959px) {
        margin: -30px auto 0 auto;
        width: 90%;
      }
    }
  }

  &.flip {
    .content {
      .uk-card {
        margin-left: unset;
        margin-right: -50px;
        background: @white;
  
        @media only screen and (max-width: 959px) {
          margin: -30px auto 0 auto;
          width: 90%;
        }
      }
    }
  }
}
// End Body 1

// Body Vid
@keyframes cascade {
  from {
    top: 0;
    transform: translate(0, -100%) rotate(90deg);
  }
  to {
    top: 100%;
    transform: translate(0, 100%) rotate(270deg);
  }
}

@keyframes cascade2 {
  from {
    top: 0;
    transform: translate(0, -100%) rotate(-90deg) scaleX(-1);
  }
  to {
    top: 100%;
    transform: translate(0, 100%) rotate(-270deg) scaleX(-1);
  }
}

.body-vid {
  min-height: 80vh;
  &.uk-flex {
    @media only screen and (max-width: 959px) {
      display: block;
    }
  }

  .uk-position-cover, video {
    @media only screen and (max-width: 959px) {
      position: static;
      left: unset;
      right: unset;
      top: unset;
      bottom: unset;
      transform: none;
    }
  }

  [data-uk-cover]:where(img,video), [uk-cover]:where(img,video) {
    top: 50%;
    transform: translateY(-50%);

    @media only screen and (max-width: 959px) {
      position: static;
      left: unset;
      right: unset;
      top: unset;
      bottom: unset;
      transform: none;
    }
  }

  .screen {
    background: fade(@white, 1%);
  }

  .uk-card {
    position: relative;
    padding: 40px;
    z-index: 1;

    @media only screen and (max-width: 959px) {
      margin-top: -50px;
    }

    &::before {
      position: absolute;
      content: "";
      background: @white-trans;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: -1;
      transition: .9s;
    }

    &::after {
      position: absolute;
      content: "";
      border: @border-width solid @gray;
      width: ~"calc(100% - 40px)";
      height: ~"calc(100% - 40px)";
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: -1;
    }

    h2 {
      position: relative;

      &::before {
        position: absolute;
        content: "";
        background: @primary-dark;
        width: 100%;
        height: @border-width;
        left: 0;
        bottom: -5px;
      }

      &::after {
        position: absolute;
        content: "";
        background: @primary-dark;
        width: 150px;
        height: @border-width-thick;
        left: 0;
        bottom: -6px;
        transform-origin: left;
        transform: scaleX(1);
        transition: .9s;
      }
    }

    .leaf-bin {
      position: absolute;
      width: 200%;
      height: 150%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) rotate(-45deg);

      .leaves {
        .one, .two, .three, .four, .five {
          @media only screen and (max-width: 959px) {
            animation: none;
          }
        }

        .one {
          width: 200px;
          height: 71px;
          left: 20%;
          top: 0;
          transform: translate(0, -100%);
          animation: cascade 10s cubic-bezier(0.3, 0.000, 0.7, 1.000) infinite;
        }

        .two {
          width: 300px;
          height: 107px;
          left: 16%;
          top: 0;
          transform: translate(0, -100%);
          animation: cascade2 20s cubic-bezier(0.3, 0.000, 0.7, 1.000) infinite;
          animation-delay: -3s;
        }

        .three {
          width: 250px;
          height: 89px;
          left: 30%;
          top: 0;
          transform: translate(0, -100%);
          animation: cascade 15s cubic-bezier(0.3, 0.000, 0.7, 1.000) infinite;
          animation-delay: -10s;
        }

        .four {
          width: 150px;
          height: 53px;
          left: 50%;
          top: 0;
          transform: translate(0, -100%);
          animation: cascade2 22s cubic-bezier(0.3, 0.000, 0.7, 1.000) infinite;
          animation-delay: -8s;
        }

        .five {
          width: 275px;
          height: 98px;
          left: 51%;
          top: 0;
          transform: translate(0, -100%);
          animation: cascade2 18s cubic-bezier(0.3, 0.000, 0.7, 1.000) infinite;
          animation-delay: -16s;
        }
      }
    }

    &:hover {
      &::before {
        background: fade(@white, 90%);
        transition: .2s;
      }

      h2 {
        &::after {
          transform: scaleX(1.1);
          transition: .3s;
        }
      }
    }
  }

  // Static image version
  &.alt {
    .background-box {
      @media only screen and (max-width: 959px) {
        position: static;
        height: 400px;
      }
    }
  }
}
// End Body Vid

// Body 2
.body-2 {
  h2 {
    position: relative;
    z-index: 1;
  }

  .card-right, .card-left {
    h2 {
      &::before {
        position: absolute;
        content: "";
        background: @primary-dark;
        width: ~"calc(100% + 20px)";
        height: @border-width;
        left: -20px;
        bottom: -5px;
        z-index: -1;
      }

      &::after {
        position: absolute;
        content: "";
        background: @primary-dark;
        width: @border-width;
        height: 150px;
        left: -20px;
        bottom: -5px;
        transform: translateY(70%);
        z-index: -1;
      }
    }
  }
}
// End Body 2

// Body Vid Alt (body_3)
.body-vid.alt {
  padding: 70px 0 100px 0;
}
// End Body Vid Alt

// Last Section
.last-section {
  margin-top: -41px;
  margin-bottom: -41px;
  padding: 70px 0 70px 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  clip-path: polygon(0 0, 50% 40px, 100% 0,100% 100%, 50% ~"calc(100% - 40px)", 0 100%);
  z-index: 1;

  .uk-card {
    position: relative;
    margin: 0 auto;
    padding: 70px 25px 90px 25px;
    max-width: 1088px;
    z-index: 1;

    &::before {
      position: absolute;
      content: "";
      background: @white;
      width: 110vw;
      height: 100%;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      clip-path: polygon(0 0, 50% 40px, 100% 0, 100% 100%, 50% ~"calc(100% - 40px)", 0 100%);
      z-index: -1;
    }

    h2 {
      position: relative;

      &::before {
        position: absolute;
        content: "";
        background: @gray;
        width: 70%;
        height: @border-width;
        left: 50%;
        bottom: -5px;
        transform: translateX(-50%);
      }
    }
  }
}
// End Last Section

/* End Frontpage Styles */

/* Footer Styles */
#footer {
  padding-top: 120px;

  .logo-container {
    display: inline-block;
    position: relative;
    margin: 0 auto;
    max-width: 410px;
    z-index: 1;

    &::before {
      position: absolute;
      content: "";
      background: @gray-light;
      width: 100%;
      height: @border-width;
      left: 50%;
      bottom: 10%;
      transform: translateX(-50%) scaleX(.8);
      z-index: -1;
      transition: .9s;
    }

    img {
      filter: drop-shadow(0 2px 2px fade(@black, 0%)) drop-shadow(0 10px 6px fade(@black, 0%));
      transition: .9s;
    }

    &:hover {
      img {
        filter: drop-shadow(0 2px 2px fade(@black, 60%)) drop-shadow(0 10px 6px fade(@black, 40%));
        transition: .4s;
      }

      &::before {
        background: @secondary;
        transform: translateX(-50%) scaleX(1);
        transition: .3s;
      }
    }
  }

  h3, .uk-h3 {
    font-size: clamp(1.1rem, 1.4vw, 1.3rem);

    @media only screen and (max-width: 639px) {
      font-size: 1.4rem;
    }
  }

  h3 {
    font-weight: 400;
  }

  a {
    transition: .3s;

    &:hover {
      text-decoration: none;
    }

    h3 {
      transition: .3s;
    }

    &:hover {
      h3 {
        color: @secondary;
      }
    }

    &.uk-accordion-title:hover {
      h3 {
        color: @primary;
      }
    }
  }

  .text-thicc {
    font-weight: 700;
  }

  .footer-link-group {
    > div:nth-child(n + 1) {
      margin-top: 20px;
    }
  }

  .column {
    .hover-target {
      .uk-h3 {
        position: relative;
        font-weight: 700;
    
        &::before {
          position: absolute;
          content: "";
          background: @gray-light;
          width: 100%;
          height: @border-width;
          left: 0;
          bottom: -10px;
          transform-origin: left center;
          transform: scaleX(.5);
          transition: .9s;
        }
      }

      .tick {
        a {
          display: inline-block;
          position: relative;
          padding-left: 18px;

          &::before {
            position: absolute;
            content: "\25D7";
            color: @gray;
            font-size: 0.8rem;
            font-weight: 700;
            font-family: inherit;
            left: -3px;
            bottom: 50%;
            transform: translateY(50%) rotate(0deg);
            transition: .8s;
          }

          &:hover {
            &::before {
              color: @secondary;
              transform: translateY(50%) rotate(180deg);
              transition: .3s;
            }
          }
        }
      }

      &:hover {
        .uk-h3 {
          &::before {
            background: @primary-dark;
            transform: scaleX(1);
            transition: .3s;
          }
        }
      }
    }
  }

  .services, .company, .contact {
    @media only screen and (max-width: 639px) {
      margin-top: 60px;
    }
  }

  .services {
    max-width: 362px;
  }

  .company {
    max-width: 362px;
  }

  .contact {
    max-width: 265px;
  }
}

// Mobile CTA
.mobile-cta {
  display: none;
}

@media only screen and (max-width: 959px) {
  .mobile-cta {
      display: flex;
      position: fixed;
      top: 70px;
      left: 0;
      border-radius: 0;
      width: 100%;
      z-index: 555;
  }
  .mobile-cta a:nth-child(1) {
    padding: 0;
    border-radius: 0;
    border-right: 1px solid @white;
  }
  .mobile-cta a:nth-child(2) {
    padding: 0;
    border-radius: 0;
    border-left: 1px solid @white;
  }
  .tm-main {
    margin-top: 40px;
  }  
}
//
/* End Footer Styles */

/* Mainpage Styles */
.header-main {
  // overflow: hidden;

  > .uk-container {
    height: 75vh;

    @media only screen and (max-width: 959px) {
      min-height: 700px;
    }

    .uk-card {
      position: relative;
      margin-bottom: -30px;
      padding-bottom: 0;
      z-index: 1;

      @media only screen and (max-width: 959px) {
        padding: 50px;
      }

      &::before {
        position: absolute;
        content: "";
        background: @white;
        background: linear-gradient(0deg, rgba(255,255,255,1) 30px, rgba(255,255,255,.8) 160px, rgba(255,255,255,.05) 460px);
        width: 200vw;
        height: 80vh;
        left: -100px;
        bottom: 0;
        transform-origin: bottom left;
        transform: skewX(-20deg);
        z-index: -1;

        @media only screen and (max-width: 959px) {
          background: linear-gradient(0deg, rgba(255,255,255,.6) 160px, rgba(255,255,255,0) 560px);
          left: 50%;
          transform: skewX(0deg) translateX(-50%);
        }
      }

      h1 {
        position: relative;
        font-size: 2.6rem;
        text-shadow: 0 1px 0 @white, 0 2px 0 @white;

        &::before {
          position: absolute;
          content: "";
          background: @black;
          width: ~"calc(100% + 60px)";
          height: @border-width;
          right: -30px;
          bottom: 0;
        }

        span {
          &:nth-child(1) {
            font-weight: 400;
            
            @media only screen and (max-width: 959px) {
              font-size: 2rem;
            }
          }
          &:nth-child(2) {
            font-weight: 400;
            text-shadow: 0 1px 0 @white, 0 2px 0 @white;
          }
        }
      }
    }
  }
}

// Children Ribbon
.children {
  .hover-target {
    .uk-card-media {
      height: 110px;

      .bg-black-ghost {
        opacity: 1;
        transition: 1s;
      }
  
      h3 {
        position: relative;
        margin: -4px 0 0 10px;
        max-width: 154px;
        font-size: 1.4rem;
        line-height: 1;
        text-shadow: 0 1px 0 @black, 0 2px 0 @black, 0 3px 0 @black, 0 0 2px @black;
        z-index: 1;
        will-change: transform;
        transform-origin: left;
        transform: translateY(0) scale(1);
        transition: transform .5s;
    
        &::before {
          position: absolute;
          content: "";
          background: @white;
          width: 100%;
          height: @border-width-thick;
          left: 0;
          bottom: -7px;
          box-shadow: 0 2px 0 0 @black;
          will-change: transform;
          transform: translateX(0);
          opacity: 1;
          transition: transform 0s, opacity .5s .5s;
        }
      }
    }

    &:hover {
      .bg-black-ghost {
        opacity: 0;
        transition: .3s 0s;
      }

      h3 {
        transform: translateY(4px) scale(1.1);
        transition: transform .5s;
    
        &::before {
          transform: translateX(600px);
          opacity: 0;
          transition: transform .3s, opacity 0s .3s;
        }
      }
    }
  }


  .arrow {
    top: 50%;
    transform: translateY(-50%);

    &.left {
      margin-right: -15px;
    }

    &.right {
      margin-left: -15px;
    }
  }
}
// End Children Ribbon

// Ideas Ribbon
.ideas-ribbon {
  h2.break {
    font-size: clamp(1.4rem, 2.6vw, 2.4rem);
    font-weight: 700;
    span {
      display: inline-block;

      @media only screen and (max-width: 703px) {
        display: block
      }

      &:nth-child(2) {
        position: relative;
        margin-left: 45px;

        @media only screen and (max-width: 703px) {
          margin-left: 0;
        }

        &::before {
          position: absolute;
          content: "\25A3";
          color: @primary-abyss;
          font-size: 1.2rem;
          right: ~"calc(100% + 13px)";
          top: 50%;
          transform: translateY(-50%);

          @media only screen and (max-width: 703px) {
            content: "";
            background: @primary-abyss;
            width: 150px;
            height: @border-width;
            right: 50%;
            top: -2px;
            transform: translateX(50%);
          }
        }
      }
    }
  }

  .hover-target {
    .uk-card-media {
      height: 110px;

      .bg-black-ghost {
        background: fade(@black, 40%);
        opacity: 1;
        transition: 1s;
      }
  
      h3 {
        position: relative;
        margin: -4px 0 0 10px;
        max-width: 160px;
        font-size: 1.4rem;
        line-height: 1;
        text-shadow: 0 1px 0 @black, 0 2px 0 @black, 0 3px 0 @black, 0 0 2px @black;
        z-index: 1;
        will-change: transform;
        transform-origin: left;
        transform: translateY(0) scale(1);
        transition: transform .5s;
    
        &::before {
          position: absolute;
          content: "";
          background: @white;
          width: 100%;
          height: @border-width-thick;
          left: 0;
          bottom: -7px;
          box-shadow: 0 2px 0 0 @black;
          will-change: transform;
          transform: translateX(0);
          opacity: 1;
          transition: transform 0s, opacity .5s .5s;
        }
      }
    }

    &:hover {
      .bg-black-ghost {
        opacity: 0;
        transition: .3s 0s;
      }

      h3 {
        transform: translateY(4px) scale(1.1);
        transition: transform .5s;
    
        &::before {
          transform: translateX(600px);
          opacity: 0;
          transition: transform .3s, opacity 0s .3s;
        }
      }
    }
  }


  .arrow {
    top: unset;
    top: 20px;
    transform: translateY(50%);

    &.left {
      margin-right: -15px;
    }

    &.right {
      margin-left: -15px;
    }
  }
}
// End Ideas Ribbon

// Services Main
.services-main {
  > .container {
    .uk-cover-container {
      height: 300px;
    }
    .uk-slider-container {
      overflow: visible;

      .uk-slider-items {
        margin-top: 0;
      }
    }

    .width-adjust {
      max-width: 439px;
      
      @media only screen and (max-width: 959px) {
        padding: 0 50px;
        max-width: none;
      }

      @media only screen and (max-width: 639px) {
        margin-top: 10px;
        max-width: 439px;
      }

      .butt-on {
        position: relative;
        padding: 15px 20px 15px 35px;
        font-weight: 700;
        overflow: hidden;
        z-index: 1;

        &.small {
          padding: 10px 20px 10px 35px;

          &::before {
            position: absolute;
            content: "";
            background: @white-ghost;
            border: @border-width solid @gray;
            width: 20px;
            height: 20px;
            left: 0;
            bottom: 13px;
            opacity: 1;
            transition: all .4s .2s, opacity 0s .2s;
  
            @media only screen and (max-width: 959px) {
              opacity: 1 !important;
              height: 20px !important;
              bottom: 50%;
              transform: translateY(50%);
            }
          }

          &::after {
            position: absolute;
            content: "";
            background: @gray;
            width: 22px;
            height: 1px;
            left: 0;
            top: 50%;
            transform-origin: left;
            transform: translateY(9px) scaleX(1);
            transition: .6s;
  
            @media only screen and (max-width: 959px) {
              opacity: 0 !important;
            }
          }
          
        }

        &::before {
          position: absolute;
          content: "";
          background: @white-ghost;
          border: @border-width solid @gray;
          width: 20px;
          height: 20px;
          left: 0;
          bottom: 18px;
          opacity: 1;
          transition: all .4s .2s, opacity 0s .2s;

          @media only screen and (max-width: 959px) {
            opacity: 1 !important;
            height: 20px !important;
            bottom: 50%;
            transform: translateY(50%);
          }
        }

        &::after {
          position: absolute;
          content: "";
          background: @gray;
          width: 22px;
          height: 1px;
          left: 0;
          top: 50%;
          transform-origin: left;
          transform: translateY(10px) scaleX(1);
          transition: .6s;

          @media only screen and (max-width: 959px) {
            opacity: 0 !important;
          }
        }

        &:hover {
          &::before {
            background: @primary-dark;
            border-color: @primary-dark;
            height: 0;
            opacity: 0;
            transition: all .2s, opacity 0s .2s;
          }

          &::after {
            background: @primary-dark;
            transform: translateY(10px) scaleX(30);
            transition: .8s;
          }
        }
      }

      &.bathroom {
        .butt-on {
          position: relative;
          padding: 15px 20px 15px 35px;
          font-weight: 700;
          overflow: hidden;
          z-index: 1;
  
          &::before {
            bottom: 18px;

            @media only screen and (max-width: 959px) {
              bottom: 17px;
              height: 20px !important;
              bottom: 50%;
              transform: translateY(50%);
              opacity: 1 !important;
            }
          }
  
          &::after {
            @media only screen and (max-width: 959px) {
              opacity: 0 !important;
            }
          }
        }
      }
    }
  }

  .uk-h2 {
    &.float {
      display: inline-block;
      position: absolute;
      padding: 20px;
      text-align: center;
      right: 0;
      bottom: 25%;
      transform: translateY(50%);
      z-index: 1;

      &::before {
        position: absolute;
        content: "";
        background: fade(@white, 85%);
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: -1;
      }

      @media only screen and (max-width: 959px) {
        right: 50%;
        width: 100%;
        font-size: 1.2rem;
        transform: translateX(50%) translateY(50%);
      }
    }
  }
}
// End Services Main

// Body 2
.body-2-main {
  padding-bottom: 100px;

  @media only screen and (max-width: 959px) {
    padding-bottom: 80px;
  }

  .uk-card {
    // padding: 30px 0;

    &.uk-cover-container {
      min-height: 550px;
    }
  }
}
// End Body 2

.white-spacer {
  height: 80px;

  @media only screen and (max-width: 959px) {
    height: 50px;
  }
}
/* End Mainpage Styles */

/* Related Ribbon */
  .related-ribbon {
    .uk-container {
      padding: 0 40px;

      .uk-slider-items {
        margin-left: 5px;
        margin-right: 5px;
      }

      .slider-grid {
        a {
          display: flex;
          position: relative;
          padding: 10px 15px;
          font-size: .9rem;
          text-decoration: none;
          vertical-align: middle;
          justify-content: center;
          align-items: center;
          z-index: 1;

          &::before {
            position: absolute;
            content: "";
            background: lighten(@black, 9%);
            width: 100%;
            height: ~"calc(100% + 40px)";
            left: 0;
            top: 0;
            will-change: transform;
            transform-origin: top center;
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 ~"calc(100% - 40px)");
            transform: translateY(-100%);
            z-index: -1;
            transition: .7s .1s;
          }

          &::after {
            position: absolute;
            content: "";
            background: lighten(@black, 9%);
            width: 100%;
            height: ~"calc(100% + 40px)";
            left: 0;
            top: 0;
            will-change: transform;
            transform-origin: top center;
            clip-path: polygon(0 0, 100% 0, 100% ~"calc(100% - 40px)", 0 100%);
            transform: translateY(-100%);
            z-index: -1;
            transition: .7s;
          }

          &:hover {
            text-decoration: none;

            &::before {
              transform: translateY(0%);
              transition: .2s;
            }

            &::after {
              transform: translateY(0%);
              transition: .2s .2s;
            }
          }

          &.current {
            font-weight: 700;
            color: @primary-dark;

            &::before, &::after {
              background: @black;
              transform: translateY(0%);
            }
          }

          span {
            display: inline-block;
          }
        }
      }

      .arrow {
        &.left {
          margin-right: 0;
        }
        &.right {
          margin-left: 0;
        }
      }
    }
  }
/* End Related Ribbon */

/* Subpage Styles */
.first-sub {
  .uk-card {
    border: @border-width solid @gray-light;
  }
}

.header-sub {
  min-height: 45vh;

  .overlay {
    position: absolute;
    background: fade(@gray-bleached, 60%);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

  h1 {
    position: relative;
    font-weight: 100;
    text-shadow: 0 .5px 0 fade(@white, 50%), 0 1px 0 fade(@white, 45%), 0 1.5px 0 fade(@white, 40%), 0 2px 0 fade(@white, 40%), 0 2.5px 0 fade(@white, 35%), 0 3px 0 fade(@white, 30%), 0 3.5px 0 fade(@white, 25%);

    &::before {
      position: absolute;
      content: "";
      background: @black;
      width: 80%;
      max-width: 350px;
      height: @border-width;
      left: 50%;
      bottom: -5px;
      transform: translateX(-50%);
    }

    &::after {
      position: absolute;
      content: "";
      background: @black;
      width: 50%;
      max-width: 200px;
      height: @border-width-thick;
      left: 50%;
      bottom: -6px;
      transform: translateX(-50%);
    }
  }
}

.nr-content {
  .content-cell {
    .uk-card {
      padding: 40px;
    
      h2 {
        position: relative;

        &::before {
          position: absolute;
          content: "";
          overflow: hidden;
          backface-visibility: hidden;
          background: linear-gradient(90deg, @primary-dark 50%, @primary-abyss 50%);
          background-size: 200% 100%;
          background-position: 100% 50%;
          width: 30px;
          height: 100%;
          right: ~"calc(100% + 40px)";
          top: 0;
          transform-origin: top left;
          transform: skewY(30deg);
          transition: .5s;
        }
  
        &::after {
          position: absolute;
          content: "";
          overflow: hidden;
          backface-visibility: hidden;
          background: linear-gradient(90deg, @primary-dark 50%, @primary 50%);
          background-size: 200% 100%;
          background-position: 0 50%;
          width: 50px;
          height: 100%;
          right: ~"calc(100% + 20px)";
          top: 0;
          transition: .5s .5s;
        }
      }

      &:hover {
        h2 {

          &::before {
            background-position: 0 50%;
            transition: .2s .2s;
          }

          &::after {
            background-position: 100% 50%;
            transition: .2s;
          }
        }
      }
    }
  }

  // Sub CTA
  .cta-ribbon-sub {

    > .uk-card {
      border: @border-width solid @gray-light;
    }

    .uk-h2 {
      position: relative;
      font-size: 2rem;
      margin-bottom: 40px;

      @media only screen and (max-width: 680px) {
        font-size: 1.6rem;
      }

      &::before {
        position: absolute;
        content: "";
        background: @primary-dark;
        width: ~"calc(50% + 80px)";
        height: @border-width-thick;
        left: ~"calc(50% + 20px)";
        bottom: -15px;

        @media only screen and (max-width: 639px) {
          width: ~"calc(50% + 40px)";
        }
      }

      &::after {
        position: absolute;
        content: "";
        background: @primary-dark;
        width: ~"calc(50% + 80px)";
        height: @border-width-thick;
        right: ~"calc(50% + 20px)";
        bottom: -15px;

        @media only screen and (max-width: 639px) {
          width: ~"calc(50% + 40px)";
        }
      }

      span {
        display: block;

        &:nth-child(1) {
          text-transform: unset;
          font-weight: 700;
        }

        &:nth-child(2) {
          font-weight: 100;
          font-size: 3rem;

          @media only screen and (max-width: 680px) {
            font-size: 2rem;
          }
        }
      }
    }
  }
  // End Sub CTA

  // Sidebar
  .thumb-image {
    width: 60px;
  }
  
  .thumb-image img {
    border-radius: 0;
  }
  
  .thumb-link {
    font-weight: 700;
  }

  aside {
    margin-top: 40px;
  }
  
  aside nav > a {
    h3.uk-h5 {
      background: @black;
      padding: 10px;
      font-size: .95rem;
      font-weight: 700;
      color: @white;
      text-align: center;
      text-transform: uppercase;
      transition: .3s;
    }
  
    &:hover {
      text-decoration: none;
  
      h3.uk-h5 {
        color: @secondary-dark;
      }
    }
  }
  
  aside nav ul {
    background: @white;
    margin-top: 10px;
    border-top: 2px solid @primary-dark;
    transition: .4s;
  }
  
  aside nav ul > li {
    padding: 8px 10px;
    margin: 0!important;
    transition: .3s;

    .thumb-image {
      img {
        backface-visibility: hidden;
        will-change: transform;
        transform: scale(1);
        transition: .4s;
      }
    }

    &:hover {
      background: @gray-light;

      .thumb-image {
        img {
          transform: scale(1.1);
        }
      }
    }
  }
  
  aside nav ul > li:not(:first-child) {
    border-top: 2px solid @gray-light;
  }
  
  aside nav ul li a {
  color: @black;
  transition: .5s;
  }
  
  // aside nav ul li:hover a {
  //   color: @secondary-dark;
  // }
  
  .widget-menu .uk-list {
    margin-top: 0;
  }
  
  .widget-menu h3 {
    margin-bottom: 0;
  }
}
/* End Subpage Styles */

/* Gallery Sub */
.gallery-sub {
  .nr-content {
    overflow: hidden;

    .uk-container {
      position: relative;
      padding-top: 50px;
      z-index: 1;

      &::before {
        position: absolute;
        content: "";
        background: @white;
        width: 100%;
        height: ~"calc(100% + 200px)";
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: -1;
      }

      h2 {
        position: relative;
        z-index: 1;

        &::before {
          position: absolute;
          content: "";
          background: @primary-dark;
          width: @border-width;
          height: ~"calc(100% + 50px)";
          left: -15px;
          top: -10px;
        }

        &::after {
          position: absolute;
          content: "";
          background: @primary-dark;
          width: 50%;
          height: @border-width;
          left: -35px;
          bottom: 0;
        }
      }
    }

    .uk-subnav-pill {
      position: relative;
      margin-bottom: 40px;

      &::before {
        position: absolute;
        content: "";
        background: @gray-light;
        width: ~"calc(100% - 20px)";
        height: @border-width;
        right: 0;
        bottom: -20px;
      }

      > li {
        &:not(.uk-active) {
          > a {
            border: @border-width solid @gray;
            color: @gray-dark;
          }
        }

        &.uk-active {
          a {
            border-color: @primary-abyss;
          }
        }
      }
    }

    .hover-target {
      .uk-cover-container {
        height: 200px;
      }

      .uk-icon {
        padding: 6px 5px 5px 6px;
        background: @black-ghost;
        color: @white;
        transition: .9s;
      }

      &:hover {
        .uk-icon {
          background: @white;
          color: @black;
          transition: .3s;

          &:hover {
            background: @primary-dark;
            color: @white;
            transition: .3s;
          }
        }
      }
    }
  }
}
/* End Gallery Sub */

/* Cabinet Lines */
.cabinet-lines {
  .nr-content {
    padding-bottom: 30px;
  }

  .ideas-ribbon {
    position: relative;
    // border-bottom: @border-width solid @gray-light;
    z-index: 2;

    &::before {
      position: absolute;
      content: "";
      background: @white;
      width: 100vw;
      height: 100%;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      z-index: -1;
    }
  }
}

.design-inspiration {
  .content-card {
    border: @border-width solid @gray-light;
  }

  .hover-target {
    .uk-cover-container {
      min-height: 360px;

      .custom-cover {
        transition: .6s .3s;
      }
  
      > .uk-panel {
        background: fade(@black, 40%);
        width: 100%;

        &::before {
          position: absolute;
          content: "";
          background: fade(@black, 80%);
          width: ~"calc(100% + 50px)";
          height: 100%;
          left: 0;
          top: 0;
          clip-path: polygon(0 0, 100% 0, ~"calc(100% - 49px)" 100% , 0 100%);
          transform-origin: left;
          transform: translateX(-100%);
          z-index: -1;
          transition: .9s;
        }
  
        h4 {
          padding: 15px;
          z-index: 1;
          transition: .4s;
  
          span {
            display: inline-block;
            max-width: 200px;
            transition: .4s;
          }
        }
      }
    }

    &:hover {
      .uk-cover-container {
        .custom-cover {
          background: fade(@black, 0%);
          transition: .3s 0s;
        }

        > .uk-panel {
          &::before {
            transform: translateX(0%);
            transition: .3s;
          }
    
          h4 {
            span {
              color: @primary;
              transition: .4s;
            }

            transition: .4s;
          }
        }
      }
    }
  }

  .arrow.right {
    margin-left: -18px;
  }
}

.gallery-ribbon {
  .uk-button {
    position: relative;
    font-size: 1.3rem;
    text-transform: uppercase;
    margin-top: -20px;
    z-index: 1;
  }

  .hover-target {
    .uk-cover-container {
      height: 250px;
    }

    .uk-icon {
      padding: 6px 5px 5px 6px;
      background: @black-ghost;
      color: @white;
      transition: .9s;
    }

    &:hover {
      .uk-icon {
        background: @white;
        color: @black;
        transition: .3s;

        &:hover {
          background: @primary-dark;
          color: @white;
          transition: .3s;
        }
      }
    }
  }
}
/* Cabinet Lines */

/* Showroom */
.showroom {
  .main-content {
    .first-section {
      margin-top: 20px;
    }

    
    .content-card {
      margin-top: 0 !important;
      margin-bottom: 0;

      h2 {
        position: relative;
        z-index: 1;

        &::before {
          position: absolute;
          content: "";
          background: @primary-dark;
          width: @border-width;
          height: ~"calc(100% + 50px)";
          left: -15px;
          top: -10px;
        }

        &::after {
          position: absolute;
          content: "";
          background: @primary-dark;
          width: 50%;
          height: @border-width;
          left: -35px;
          bottom: -10px;
        }
      }
    }
  }
}
/* End Showroom */

/* Company */
.company, .showroom {
  .main-content {
    overflow: hidden;

    > .uk-container {
      position: relative;
      max-width: 1190px;
      z-index: 1;
  
      &::before {
        position: absolute;
        content: "";
        background: @white;
        width: 100%;
        min-height: 247px;
        height: 600vh;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: -1;
      }

      &.uk-container-small {
        max-width: 960px;
      }

      > .first-section.uk-card {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 35px;
        border-left: @border-width solid @gray;
        border-right: @border-width solid @gray;
        max-width: 80%;

        @media only screen and (max-width: 639px) {
          max-width: 100%;
        }
      }
    }
  }
}

// About
.about {
  .main-content {
    video {
      border: 20px solid @white;
      border-bottom-width: 5px;
    }

    .uk-card {
      padding: 40px;
    }

    .story {
      position: relative;
      margin-top: -280px;
      width: 409px;
      z-index: 1;

      @media only screen and (max-width: 900px) {
        margin-top: 0;
        width: 100%;
      }

      &::before {
        position: absolute;
        content: "";
        background: @gray;
        width: @border-width;
        height: ~"calc(100% + 1px)";
        left: 20px;
        top: 20px;
      }

      h2 {
        position: relative;

        &::before {
          position: absolute;
          content: "";
          background: @gray;
          width: 100%;
          height: @border-width;
          left: -80px;
          bottom: -5px;
        }
      }

      p {
        margin-bottom: -20px;

        @media only screen and (max-width: 900px) {
          margin-bottom: 20px;
        }
      }
    }

    .story-body {
      position: relative;

      // &::before {
      //   position: absolute;
      //   content: "";
      //   background: @gray;
      //   width: ~"calc(100% - 350px)";
      //   height: @border-width;
      //   left: 20px;
      //   top: 20px;

      //   @media only screen and (max-width: 900px) {
      //     display: none;
      //   }
      // }

      &::after {
        position: absolute;
        content: "";
        background: @gray;
        width: @border-width;
        height: ~"calc(100% - 20px)";
        left: 20px;
        top: 20px;
      }
    }

    h2 {
      position: relative;

      &::before {
        position: absolute;
        content: "";
        background: @gray;
        width: 100%;
        height: @border-width;
        left: -80px;
        bottom: -5px;
      }
    }

    .experience {
      padding-bottom: 10px;

      .uk-h1 {
        color: @primary-dark;
        font-size: 2.5rem;

        span {
          display: inline-block;
          position: relative;

          &::before {
            position: absolute;
            content: "";
            background: @black;
            width: 100%;
            height: @border-width;
            right: 0;
            bottom: -5px;
          }
        }
      }
      .uk-h5 {
        font-weight: 700;
      }
    }

    .service {
      position: relative;

      &::before {
        position: absolute;
        content: "";
        background: @gray;
        width: @border-width;
        height: ~"calc(100% - 50px)";
        left: 20px;
        bottom: 25px;
      }

      &::after {
        position: absolute;
        content: "";
        background: @gray;
        width: 50%;
        height: @border-width;
        left: 20px;
        bottom: 25px;
      }

      h2 {
        span {
          display: inline-block;
          position: relative;

          &::before {
            position: absolute;
            content: "";
            background: @gray;
            width: ~"calc(100% + 40px)";
            height: @border-width;
            right: 0;
            bottom: -5px;
          }
        }
      }
    }
  }
}
// End About

// Team
.team {
  .main-content {
    > .uk-container {
      .core-section {
        .hover-target {
          > div {
            transition: .9s;
          }

          .uk-cover-container {
            height: 400px;

            .bg-white-ghost {
              opacity: 0;
              transition: .9s;
            }

            .leaf {
              position: absolute;
              content: "";
              background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNjUgMTI5Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjtzdHJva2Utd2lkdGg6MHB4O308L3N0eWxlPjwvZGVmcz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0zNTIuMDYxLDUzLjAxYzMuNzUtNC42MzUsOS43OTMtOC4wNTMsMTIuOTM5LTEyLjY5My01LjU3Ny0zLjk4Ni0xOC44NDUsNS4zNzItMTkuMjc2LDEuMjAyLjUxNC0xMS4xMDItMTAuNzI1LDIuNDktMTUuNDY2LDIuNDQyLTMuMDYxLDEuMjYzLTUuNDQ3LTEuOTg2LTMuMjE1LTQuNDUsMTAuMTgyLTE1LjE1Ny0xNi4zOTQtMi4wNDQtMjAuMTExLDIuNDg4LTQuNzI5LDMuNTUxLTguMDc3LDguMjQtMTEuMzQ0LDEzLjAzLTEuNzQzLDMuOTQ0LTYuMDgxLDMuNy02LjU3OC0uOTgtMi4yMzMtNy45MzIsMTAuNjM0LTIyLjkzNyw0LjcyNy0yOC4yMDUtNi44ODItLjA0Ni01LjMxMi05Ljg2My01Ljg5NS0xNC42ODktLjYxNy0yLjA0NiwxLjg4Ny0xMy42Ny0xLjYzOC0xMC42NjEtOS4yNiw0Ljk3My0xMS42MTksMTcuOTczLTIzLjIxOCwxOC42OTktMy4xMTIuNDAyLjU2MSw3LjA0OS0yLjMwMiwxMC44MTgtNi4yMjIsNi4yODcsNi4yMjEsNDMuMDE5LTEwLjcxLDI0LjU3NS0xLjIyMy0yLjU2NS0xNS40MzQtMTQuNjAxLTE1LjcxNi04LjkwOS45NjgsMi40NzQsMS4wODgsNC45MzQuMTQ5LDcuNDI0LS4yMDEuNTMxLjAyLjg5OS4zOTIsMS4xOCw3LjQ5Niw3LjE1NiwyLjE0MSwxOC4xNDgsMTMuNzY2LDI1Ljg1OCwxLjE1MiwxLjkzOC0xLjk5NywxLjQ2My0yLjk1LjkxLS4zMTYtLjEwOS0uNTkzLS4yNy0uODc2LjA2Mi45Niw0LjY0LDYuMjQyLDYuOTg4LDEwLjUwOSw4LjQ4NS03Ni42MjYsMjcuMjE0LTE3My4zOTYsMTQuNTIzLTI1MS43NjMtMTEuNDg5LTEuODA2LTIuNDY3LTUuNDQxLDEuOTAyLTIuMTY3LDMuMDExLDgxLjU5NCwyNy44NzMsMTcxLjIxNiwzNi4zMDQsMjU0Ljg2NywxMi4xMi43NjctLjM3OCwxLjUzMi40NTEuODUzLDEuMDY1LTEuODY2LDEuODc3LTUuNjA1LDE3LjQxNC0uMzI0LDE0LjExMiwxLjU5NS0xLjExMiwzLjkzNy01LjkwMSw1Ljc0Ni0yLjgwMS45ODEsMi44MTksNC45ODEsMS41NjYsNS41OCw0LjMyOC42NDUsNC45NjQsMi40NjYsOS41ODYsNi4yMDIsMTMuMDE3LDEuNjU3LDEuODQ1LDguNjYzLDEwLjMyNCw4LjAzLDMuMy0uMTktNS42Ni0uOTkxLTIzLjE3Myw4LjU2Mi0xOC45NDYsNS40OTMsMy41OTQsMTIuNTk4LDMuMjMyLDE4LjA1Myw2Ljc5NiwyLjM1NCwxLjA5MS41OTUtMy45NDEsNC43MjgtNC4xNzUsMy44OS0yLjQ0OSwzNi4zNDcsMTAuNjM4LDI5LjYxLDEuMDU4LTMuOTAyLTMuNjA1LTkuMTk1LTEwLjM4My03LjE2NC0xNS45MzguNzM3LTkuNTItMTEuMDQ3LS43ODUtMTUuODctMy4xNDQtMTUuNTUyLTguNjA2LDI3LjMxNC03LjA5NCwyMi41MjUtMTMuNTA4LTIuNjE5LS4yMTctNC45OTUtMS42NDMtNS4wODItNC40OTgtLjY3Mi0zLjM4MiwxMC43OTMtMy4yMjksOC4yNzgtOC4wNzgtMS41MjktNC41MjYsMy4zNzUtOS40ODUsNi4xNDgtMTIuODE4di4wMDJaTTM0Mi40OTIsNDkuNDQ2aDBjLjMyNy40NDMuMTksMS4xNTUtLjExNiwxLjczNy0yNi4yMDQsMTguNDg0LTQ5Ljc5MSwzMC44NDUtNzQuOTcxLDM5LjM4MS00LjQ5NiwxLjAyNS03LjQxNCwzLjA0OC04Ljc0LDcuMzU4LTEuNTM5LTQuMDc5LS42OTUtOS4yOTMtNS4wODgtMTEuNjQ3LjI5OS0uMTA5LDIuOTE0LjA2LDMuMDI0LS4zMjEuNzItMS4wNzEtLjcyLTUuMjAxLTEuNzcyLTguMjE3LTEuMTY1LTUuNDMyLTUuNjItOS44Mi03LjI4My0xNC42ODksMy43NC00LjYyMywxMS45ODQsMTYuOTQ4LDEyLjk2NSwxOS41MzcsNy40NjMtMTEuMzQ5LDEwLjUtMjUuODk4LDE0LjE0OS0zOS4yNTQsOS4zMjctMTAuNDQ5LTkuMjU0LDQzLjc1MS0xMS4yNjYsNDMuNjE5LDI0LjU1OS03LjAzMiw1MC40ODYtMTkuNjc5LDc1LjA4Ny0zNi42MzIuMTM4LS4xMzIsMy4yMDctMi40MTEsNC4wMTItLjg3MWgtLjAwMVoiLz48L3N2Zz4=");
              width: 700px;
              height: 249px;
              right: -109px;
              bottom: -32%;
              transform: rotate(-5deg) scale(.8);
              opacity: .5;
              filter: drop-shadow(-2px 4px 3px fade(@black, 30%)) blur(5px);
              transition: .4s;
            }
          }

          .uk-card {
            .uk-h3 {
              margin: 0;
              font-size: 1.8rem;
              font-weight: 100;
              text-transform: uppercase;
            }

            .uk-h5 {
              position: relative;
              margin-top: 10px;
              transition: .9s;

              &::before {
                position: absolute;
                content: "";
                background: @white;
                width: 30%;
                height: @border-width;
                left: 50%;
                top: -8px;
                transform: translateX(-50%) scaleX(.1);
                transition: .9s .4s;
              }
            }
          }

          &:hover {
            > div {
              background: @primary-abyss;
              transition: .3s;
            }
            .uk-cover-container {  
              .bg-white-ghost {
                opacity: 1;
                transition: .3s;
              }
              .leaf {
                opacity: .8;
                transform: rotate(-8deg) scale(.8);
                filter: drop-shadow(-2px 4px 3px fade(@black, 30%)) blur(0);
              }
            }
            .uk-h5 {
              color: @white;
              transition: .3s;

              &::before {
                background: @black;
                transform: translateX(-50%) scaleX(1);
                transition: .3s;
              }
            }
          }
        }
      }
    }
  }
}
// End Team

// Testimonials
.testimonials {
  .main-content {
    .uk-card {
      > .uk-card {
        padding: 40px 100px;
        border: @border-width solid @gray;

        .blurb {
          position: relative;
          z-index: 1;

          &::before {
            position: absolute;
            content: "\201C";
            color: @gray-light;
            width: 120px;
            height: 120px;
            font-size: 17rem;
            line-height: 1;
            left: -85px;
            top: -100px;
            z-index: -1;
          }

          &::after {
            position: absolute;
            content: "\201D";
            color: @gray-light;
            width: 120px;
            height: 120px;
            font-size: 17rem;
            line-height: 1;
            right: -85px;
            bottom: -52px;
            z-index: -1;
          }
        }
      }
    }
  }
}
// End Testimonials

// Partnerships
.partnerships {
  .main-content {
    .uk-card {
      h2 {
        position: relative;
        // margin-bottom: 30px;

        @media only screen and (max-width: 639px) {
          text-align: center;
        }

        &::before {
          position: absolute;
          content: "";
          background: @primary-dark;
          width: 100%;
          height: @border-width-thick;
          left: 0;
          bottom: -10px;
          transform-origin: left;
          transform: scaleX(.8);
          transition: .9s;

          @media only screen and (max-width: 639px) {
            left: 50%;
            transform-origin: center;
            transform: translateX(-50%) scaleX(1);
          }
        }
      }

      .hover-target {
        p {
          font-size: 1.1rem;
          text-transform: uppercase;
          font-weight: 700;
          color: @gray-dark;
          margin-bottom: 10px;
          transition: .9s;

          @media only screen and (max-width: 639px) {
            text-align: center;
          }
        }

        .image-container {
          color: @black;
          transition: .9s;

          @media only screen and (max-width: 639px) {
            text-align: center;
          }
    
          &.moros {
            padding: 10px;
            background: @black;
          }
    
          > * {
            display: inline-block;
            width: 100%;
            max-width: 290px;
            height: auto;
          }
        }

        &:hover {
          p {
            color: @black;
            transition: .3s;
          }

          .image-container {
            color: @secondary-dark;
            transition: .3s;
      
            &.moros {
              background: @secondary-dark;
            }
          }
        }
      }

      &:hover {
        h2 {
          &::before {
            transform: scaleX(1);
            transition: .3s;

            @media only screen and (max-width: 639px) {
              transform: translateX(-50%) scaleX(1);
            }
          }
        }
      }
    }
  }
}
// End Partnerships

// Custom Cabinet Builder
.custom-builder {
  .main-content {
    padding-bottom: 120px;

    @media only screen and (max-width: 959px) {
      padding-bottom: 50px;
    }

    .uk-grid-collapse {
      &:not(.flip) {
        .uk-cover-container {
          margin-right: -80px;
          height: 550px;

          @media only screen and (max-width: 959px) {
            margin-right: 0;
            height: 400px;
          }
        }
      }

      &.flip {
        .uk-cover-container {
          margin-left: -80px;
          height: 550px;

          @media only screen and (max-width: 959px) {
            margin-left: 0;
            height: 400px;
          }
        }
      }

      .uk-card {
        padding: 40px;

        @media only screen and (max-width: 639px) {
          padding: 20px;
        }
        
        p {
          position: relative;
          z-index: 1;

          @media only screen and (max-width: 959px) {
            margin-bottom: 30px;
          }

          &::before {
            position: absolute;
            content: "";
            border: @border-width solid @gray;
            border-right: none;
            width: 50%;
            height: ~"calc(100% + 20px)";
            left: -20px;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }
  }
}
// End Custom Cabinet Builder

// Image Spacer
.image-spacer {
  height: 350px;
}
// End Image Spacer

// Eco-Products
.eco-products {
  .main-content {
    .content-cell {
      .content-card {
        margin-top: 0 !important;
        margin-bottom: 0;

        h2 {
          position: relative;
          z-index: 1;

          &::before {
            position: absolute;
            content: "";
            background: @primary-dark;
            width: @border-width;
            height: ~"calc(100% + 50px)";
            left: -15px;
            top: -10px;
          }

          &::after {
            position: absolute;
            content: "";
            background: @primary-dark;
            width: 50%;
            height: @border-width;
            left: -35px;
            bottom: -10px;
          }
        }
      }
    }
  }
}
// End Eco-Products

// Warranty
.warranty {
  .main-content {
    .uk-h4 {
      position: relative;
      
      &::before {
        position: absolute;
        content: "";
        background: @gray;
        width: 50%;
        height: @border-width;
        left: -10px;
        bottom: -8px;
      }
    }
    .first-card {
      position: relative;
      z-index: 1;

      &::before {
        position: absolute;
        content: "";
        border: @border-width solid @gray;
        border-top: none;
        width: 100%;
        height: 50%;
        left: 50%;
        bottom: 0;
        will-change: transform;
        transform: translateX(-50%);
        z-index: -1;
      }
    }
  }
}
// End Warranty
/* End Company */

/* Misc Styles */
.plain-jane {
  &.alter {
    padding-bottom: 140px;
  }

  h2 {
    position: relative;

    &::before {
      position: absolute;
      content:"";
      background: @black;
      width: 200px;
      height: 1px;
      left: -2%;
      bottom: -6px;
    }
  }
}

// Other Locations
.other-locations {
  position: relative;
  padding: 90px 0 0 0;

  .uk-card {
    border: @border-width solid @gray-light;

    .uk-accordion-title::before {
      margin-top: 3.2%;
    }

    .uk-text-lighter {
      font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    }
  }
}
// End Other Locations

// Contact
.contact {
  .uk-tile {
    padding-bottom: 110px;
  }

  .first-section {
    p {
      position: relative;
      padding: 20px;
      text-align: justify;
      z-index: 1;

      &::before {
        position: absolute;
        content: "";
        border: @border-width solid @gray-light;
        width: 100%;
        height: 100%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
      }
    }
  }
}
// End Contact

// Service Area
#serviceMap {
  z-index: 0;
}

.service-list a {
  text-decoration: none;
  border-bottom: 1px solid @secondary;
}

.service-list a:hover {
  border-bottom: 1px solid @white;
}
// 

// Egg
#egg {
  z-index: 9999;
}

.egg-stuff {
  position: absolute;
  content: "";
  display: block;
  background: rgba(0,0,0,.3);
  width: 3px;
  height: 3px;
  bottom: 25px;
  left: 25px;
  transform: translateX(-50%) translateY(-50%);
  opacity: .2;
}

.that-body {
  width: 510px;
}

@media only screen and (max-width: 959px) {
  .egg-stuff {
    top: unset;
    bottom: 30px;
    transform: unset;
  }
}
//

// For uk-heading-line Correction
.uk-heading-line > ::after, .uk-heading-line > ::before {
  top: 50%;
  border-bottom: @border-width-thick solid @primary-dark;
}
//

// Gravity Form Styles
.grecaptcha-badge {
  display: none;
}

.gfield_select option {
  line-height: 4;
}

.gform-theme-button.button {
  padding: 5px 15px;
  font-family: 'Nunito Sans';
  font-size: 1rem;
  font-weight: 900;
}

.gform_next_button.gform-theme-button.button {
  border: 1px solid @primary-dark;
  border-radius: 0;
  background: @white;
  color: @primary-abyss;
  transition: .3s;
}

.gform_next_button.gform-theme-button.button:hover {
  background: @primary-abyss;
  color: @white;
}

.gform_previous_button.gform-theme-button.button {
  border: 1px solid fade(gray, 50%);
  transition: .3s;
}

.gform_previous_button.gform-theme-button.button:hover {
  background: fade(gray, 80%);
  color: @white;
}

.gform_wrapper .gform_footer input[type=Submit] {
  background-color: @gray-dark;
  border: @border-width solid @black;
  border-radius: 0;
  color: @white;
  font-family: "proxima-nova", sans-serif;
  font-size: 1rem;
  font-weight: 900;
  transition: .4s;
}

.gform_wrapper .gform_footer input[type=Submit]:hover {
  background-color: @black;
  color: @white;
}

.gform_wrapper.gravity-theme .gfield_required {
  font-size: 1rem;
  color: lighten(red, 30%);
}

.gform_wrapper .gform_footer input[type=Submit]:focus-visible {
  @focal-outline-important();
}

.gform_wrapper .gfield_error label {
  color: red;
  opacity: 1!important;
}

h2.gform_submission_error.hide_summary {
  color: red;
}
// Move Submit Button to Right
// .wake-wednesday .gform_footer {
//   justify-content: right;
// }
//
/* End Misc Styles */

/* Media Queries For Phones and Tablets and Styles for Accessibility*/
@media (hover: none) and (pointer: coarse) {
  .leaves {
    .one, .two, .three, .four, .five {
      display: none;
      animation: none;
    }
  }

  .uk-scrollspy-inview, .uk-scrollspy {
    animation-delay: 0s !important;
    animation: none !important;
    visibility: initial !important;
  }
}

@media (prefers-reduced-motion) {
  .leaves {
    .one, .two, .three, .four, .five {
      display: none;
      animation: none;
    }
  }

  .uk-scrollspy-inview, .uk-scrollspy {
    animation-delay: 0s !important;
    animation: none !important;
    visibility: initial !important;
  }
}

// Focus Styles - Remember to use non-generic selectors to avoid conflicts with 3rd-party API styles
.tm-toolbar-default :focus-visible, .uk-card-primary.uk-card-body :focus-visible, .uk-card-primary>:not([class*=uk-card-media]) :focus-visible, .uk-card-secondary.uk-card-body :focus-visible, .uk-card-secondary>:not([class*=uk-card-media]) :focus-visible, .uk-light :focus-visible, .uk-offcanvas-bar :focus-visible, .uk-overlay-primary :focus-visible, .uk-section-primary:not(.uk-preserve-color) :focus-visible, .uk-section-secondary:not(.uk-preserve-color) :focus-visible, .uk-tile-primary:not(.uk-preserve-color) :focus-visible, .uk-tile-secondary:not(.uk-preserve-color) :focus-visible {
  outline-color: @focal-color;
}

.tm-header a:focus-visible, .tm-main a:focus-visible, #footer a:focus-visible, .uk-button:focus-visible, a:focus-visible .uk-position-cover, .attribution a:focus-visible {
  @focal-outline();
}

// MAY BE NECESSARY
// .uk-navbar-dropdown a:focus-visible, .tm-main #inventory a:focus-visible, .tm-main #inventory .uk-button:focus-visible, a.uk-link-reset:focus-visible h2 {
//   @focal-outline-important();
// }
/* End Media Queries For Phones and Tablets */