/*
Theme Name: Travel Vail Baby Custom Theme
Theme URI: https://tandemdesignlab.com
Author: Tandem Design Lab
Author URI: https://tandemdesignlab.com
Description: Custom Theme for Travel Vail Baby
Version: 2.0.0
License: none
Tags:
*/

/* mulish-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/mulish-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* mulish-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 400;
  src: url('assets/fonts/mulish-v18-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* mulish-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  src: url('assets/fonts/mulish-v18-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* mulish-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 700;
  src: url('assets/fonts/mulish-v18-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* quicksand-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/quicksand-v37-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* quicksand-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  src: url('assets/fonts/quicksand-v37-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


:root{
  --primary-font: "Mulish";
  --primary-font-size: 24px;
  --primary-font-weight: 400;
  --primary-font-style: normal;

  --secondary-font: "Quicksand";
  --secondary-font-weight: 700;
  --secondary-font-style: normal;

  --header-font-weight: 700;

  --white: #FFF;
  --black: #050505;
  --yellow: #F3F199;
  --yellow-overlay: rgba(243, 241, 153, .3);
  --pale-yellow: #FFFDE9;
  --marroon: #561612;
  --marroon-overlay: rgba(86, 22, 18, .2);
  --blue: #50CDEC;
  --blue-overlay: rgba(80, 205, 236, .2);
  --orange: #F79D1D;
  --orange-overlay: rgba(247, 157, 29, .2);


  --content-width: 1200px;
  --column-gap: 70px;
  --default-margin: 50px;
  --small-margin: calc(var(--default-margin) / 2);
  --paragraph-margins: calc(var(--default-margin) / 3);

  --offset: calc((100vw - var(--content-width)) / 2 );

  --default-transition: ease-in-out all .5s;
}


/****************************************************************** Structure ******************************************************************/
body{ padding: 0; margin: 0; font-family: var(--primary-font); font-weight: var(--primary-font-weight); font-size: var(--primary-font-size); line-height: 1.5; color: var(--marroon); background: var(--pale-yellow);}
a, a:hover { color: var(--marroon); text-decoration: none; font-optical-sizing: auto;}

.headingWrapper {
  display: flex;

  :where(h2,h3,h4) { color: var(--marroon); font-family: var(--secondary-font); font-weight: var(--header-font-weight); font-style: var(--secondary-font-style);line-height: 1.25; margin: 0 0 var(--default-margin) 0; text-transform: uppercase;}
  :where(h1) { color: var(--marroon); font-family: var(--secondary-font); font-weight: var(--header-font-weight); font-style: var(--secondary-font-style);line-height: 1; margin: 0 0 var(--default-margin) 0; text-transform: uppercase;}
  :where(h1,h2,h3,h4) p { margin: 0; padding: 0;}

  &.blue :where(h1,h2,h3,h4) { color: var(--blue);}
  &.yellow :where(h1,h2,h3,h4) { color: var(--yellow);}
  &.pale-yellow :where(h1,h2,h3,h4) { color: var(--pale-yellow);}
  &.black :where(h1,h2,h3,h4) { color: var(--black);}
  &.orange :where(h1,h2,h3,h4) { color: var(--ornage);}
  &.marroon :where(h1,h2,h3,h4) { color: var(--marroon);}
  &.white :where(h1,h2,h3,h4) { color: var(--white);}

  &.center { justify-content: center; align-items: center; text-align: center;}
  &.multi-line.center { text-align: center;}
  &.right { justify-content: end;}

  &.balanced :where(h1,h2,h3,h4) { text-wrap: balance;}
  &.noMargins :where(h1,h2,h3,h4) { margin: 0 !important;}

  &.hasSubHeading {
    :where(h1,h2,h3,h4) { display: flex; flex-direction: column; align-items: center; gap: var(--paragraph-margins);}
    span.title { font-size: .6em; text-transform: uppercase;}
    span.sub-title { text-transform: initial;}
  }

  &.hasIcon {
    margin-top: calc(-1 * (var(--default-margin) * 1.5)); align-items: end;
    :where(h1,h2,h3,h4) { flex: 1; margin-top: var(--default-margin);}
    span.title { font-size: 1.5em; line-height: 1.25;}
    .icon-wrapper {
      flex: 0 0 25%; position: relative; top: calc(-1 * var(--default-margin)); aspect-ratio: 1;
      .tdl-icons { width: 100%; height: 100%;}
    }
  }

  &.hasInlineIcon {
    :where(h1,h2,h3,h4) { display: flex; gap: 20px; align-items: center;}

    h1 .icon-wrapper .tdl-icons { width: 140px; height: 140px;}
    h2 .icon-wrapper .tdl-icons { width: 120px; height: 120px;}
  }

  &.icon-top :where(h1,h2,h3,h4) { flex-direction: column; align-items: start;}
  &.light :where(h1,h2,h3,h4) { font-weight: normal !important; font-family: var(--primary-font);}

  &:has(+ .tdl-seasonal-dates) h1 { margin-bottom: 0 !important;}
}

/* Heading Defaults */
:where(h1,h2,h3,h4) { line-height: 1; font-weight: var(--header-font-weight); font-family: var(--secondary-font); text-transform: uppercase;}
h1 { font-size: 60px;}
h2 { font-size: 50px;}
h3 { font-size: 40px; }
h4 { font-size: 30px;}

.clear{clear:both;}

ul.tdlStyledNumberedList {
  counter-reset: number; list-style: none; margin-top: 70px; padding-left: 0;

  li { counter-increment: number; display: flex; flex-direction: row; gap: 40px; margin-bottom: 50px; align-items: center; font-weight: bold;}
  li:before { content: counter(number); width: 75px; height: 75px; border-radius: 50%; border: 2px solid var(--brown); font-size: 40px; font-family: var(--primary-font); flex: 0 0 75px; align-items: center; justify-content: center; display: flex;}
}

.tdl_text_column {
  ul {
    display: flex;
    flex-direction: column;
    gap: 20px;

    li::marker { color: var(--green);}
  }
}

.wpb_single_image {
  .vc_single_image-wrapper img { }
}

.matchAspect {
  .wpb_single_image {
    .vc_single_image-wrapper img { aspect-ratio: 3/4; object-fit: cover;}
  }
}

.wpb_single_image.tdlAspect {
  .vc_single_image-wrapper img { aspect-ratio: 3/4; object-fit: cover;}
}

.noBottomMargins { margin-bottom: 0 !important;}

.tdl_text_column {
    &.yellow {
      color: var(--yellow) !important;
      p { color: var(--yellow) !important;}
    }
    &.black {
      color: var(--black) !important;
      p { color: var(--black) !important;}
    }
    p a:hover { text-decoration: underline;}
}


/*************************************************************** General Styles ****************************************************************/

/* Header */
#header {
  &.sticky {
    position: fixed; z-index: 999; width: 100%; background: var(--pale-yellow); border-bottom: 1px solid var(--marroon); box-shadow: 0 0 20px var(--marroon);
    .menu-header-top-container { display: none;}
    .header-top { display: none;}
    .logo { height: 75px !important; transition: var(--default-transition);}
    #tdl_mm_button { bottom: 10px !important;}
    .header-top-wrapper { top: -5px;}
  }
}

.logged-in:not(.page-template-no-banner-page) #header {
  top: 12px;
  &.sticky {top: 32px;}
}

header { display: flex; width: var(--content-width); justify-content: space-between; padding: 0; align-items: end; margin: 0 auto; position: relative;}
.header-top-wrapper {
  position: absolute; top: 0; right: 0; display: flex; gap: var(--paragraph-margins); align-items: flex-end;

  /* Widgets */
  .wc-block-mini-cart__button { padding: 0 !important; font-size: .8em;}

  /* Header Top Menu */
  .menu-header-top-container {
    ul.tdl-header-menu-buttons {
      list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; gap: var(--paragraph-margins);
      li {
        &:not(.tdlButton) a { line-height: 2; font-size: .7em;}
        &.tdlButton a { display: inline-block; line-height: 2; padding: 0 1rem; color: var(--white); background-color: var(--marroon); text-transform: uppercase;}
        &.blue a {
          background-color: var(--blue);
          &:hover { background-color: var(--orange); }
        }
        &.orange a {
          background-color: var(--orange);
          &:hover { background-color: var(--blue); }
        }
      }
    }
  }

  .tdl-global-contacts {
    margin-bottom: 0 !important; display: flex; font-size: .7em; line-height: 2.5; gap: var(--paragraph-margins);
    p a {
      display: flex; gap: 5px;
      &:before { display: inline-block;}
    }
    .phone a:before { content: '\f095'; font-family: 'FontAwesome';}
    .email a:before { content: '\f0e0'; font-family: 'FontAwesome';}

  }
}

/* Menu Main */
.menu-main-container {
  z-index: 9999;
  width: 100%;
  ul { list-style: none; padding: 0;}

  .tdl_menu {
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 20px;

    a { text-decoration: none; color: var(--marroon); font-size: 18px; font-family: var(--primary-font); font-weight: var(--primary-font-weight); font-style: var(--primary-font-style); text-transform: uppercase; line-height: 2 !important; padding: 0.625rem;}

    li {
      position: relative; padding-bottom: 30px;

      &:hover {
        a {
          color: var(--white); background: var(--orange);
        }
        .sub-menu { display: flex; flex-direction: column;}

        &.menu-item-has-children {
        }
      }

      &.active:hover .sub-menu { display: block !important;}

      &.current-menu-parent {
        a { color: var(--white); background: var(--orange); }
      }

      &.current_page_item {
        a {
          color: var(--white); background: var(--orange);
        }

        .sub-menu {
          li {}
          li:hover {}
        }

        &.menu-item-has-children {

        }
      }

      &.menu-item-has-children {
      }

      &.tdlButton {
        /* margin-left: 60px; */
        a { padding: 0 20px; border: 4px solid var(--black); border-radius: 15px;}
      }

      &.logo-spacer {
        width: 300px;
        a { display: none;}
      }

    }

    .sub-menu {
      position: absolute;
      display: none;
      width: fit-content;
      min-width: 200px;
      padding-top: 30px;

      li {
        padding-bottom: 0 !important; line-height: 1;
        a {
          color: var(--marroon) !important; background: var(--yellow) !important; line-height: 2 !important; padding: 0 10px !important; font-size: .7em; white-space: nowrap; width: calc(100% - 20px); display: inline-block;

          &:hover {
            background: var(--blue) !important;
            a { color: var(--marroon);}
          }
        }


        &.current_page_item {
          a {
            &:after { content: ''; display: none;}
          }
        }

        &.menu-item-has-children {
        }

        &:not(:last-of-type):after { display: none;}

      }
    }
  }

}

/* Mobile Menu */
#tdl_mm_container {
  background-color: var(--blue);
  line-height: 2em !important;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  ul li a { text-align: left; line-height: 2em !important; text-decoration: none;}
  a { color: var(--white);}

  .menu-item-has-children a:after{ border-color: transparent transparent transparent var(--white) !important;}

  &.dropdown { text-align: center; top: 150px !important;}
  &.slide, &.push { padding: 0px;}

  .sub-menu {
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    .menu-item-has-children a:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 10px; border-color: transparent transparent transparent var(--blue); display: inline-block; margin-left: 10px; position: relative; top: -1px;}

    li {
      background-color: var(--orange);
      line-height: 2em;

      &.mobileOnly { background-color: var(--white);}
    }

    a { color: var(--white); font-size: .9em;}

  }

  .tdl-mm-sidebar-content {
    background-color: var(--orange);
    .tdl-global-contacts {
      padding-left: 20px; margin-bottom: 0 !important; line-height: 2;
      p a {
        display: flex; gap: 5px; font-size: .75em;
        &:before { display: inline-block;}
      }
      .phone a:before { content: '\f095'; font-family: 'FontAwesome';}
      .email a:before { content: '\f0e0'; font-family: 'FontAwesome';}

    }
    .wc-block-mini-cart__button .wc-block-mini-cart__icon { color: var(--white) !important;}
  }

}

/* Mobile Button */
#tdl_mm_button {
  position: relative !important;
  z-index: 99;
  bottom: 30px;
  &:after, &:before, & > div { background-color: var(--marroon) !important;}
  &.active {
    &:after, &:before, & > div { background-color: var(--white) !important;}
  }
}

body.activeMobileMenu #tdl_mm_button {bottom: auto !important; top: 20px !important; position: absolute !important; right: 0px;}
body.activeMobileMenu #header.sticky {
  background: transparent; border-bottom: none; box-shadow: none;
  #tdl_mm_button { top: 0px !important;}
}

/* Add overlay when mobile menu is open */
body.activeMobileMenu { overflow: hidden;}
body.activeMobileMenu:after { content: ''; position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: rgba(0,0,0,.8); z-index: 9;}

/* Banner */
rs-slide {
  :where(h1,h2,h3,h4,p) { font-family: var(--primary-font) !important; font-weight: var(--primary-font-weight) !important;}
  :where(p) { font-family: var(--primary-font) !important; font-weight: var(--primary-font-weight) !important;}
}

/* Logo */
.logo {
  height: 125px;
  margin: 10px 0;
  transition: var(--default-transition);

  img { height: 100% !important; display: block; max-width: none !important;}
}

/* TDL Banner */
.tdl-banner-container {
 min-height: 400px; display: flex; justify-content: center;

 .tdl-banner-wrapper {
   width: var(--content-width); align-content: center; position: relative;

   .tdl-content-wrapper {
     display: flex;
     justify-content: space-between;

     .tdl-title-wrapper {
       h1 { color: var(--white); text-wrap: balance; max-inline-size: 430px; line-height: 1.25;}
     }
   }

   .icon-wrapper {
     position: absolute; bottom: -30px; right: 0;

     .tdl-icons { width: 200px; height: 200px;}
   }
 }

 &.blue { background: var(--blue);}
 &.green { background: var(--green);}
 &.light-green { background: var(--light-green);}
 &.black { background: var(--black);}

 &[data-line_arrow_color="green"], &[data-line_arrow_color="light-green"], &[data-line_arrow_color="blue"], &[data-line_arrow_color="black"] {
    position: relative; overflow: visable !important; margin-bottom: calc(var(--default-margin) * 2) !important;

    &:after { content: ''; width: 50px; height: 50px; transform: translate(-50%, 65px) rotate(45deg); left: 50%; position: absolute; bottom: 0;}
 }

 &[data-line_arrow_color="green"] {
    border-bottom: 40px solid var(--green);

    &:after { background: var(--green);}
  }
 &[data-line_arrow_color="light-green"] {
   border-bottom: 40px solid var(--light-green);

   &:after { background: var(--light-green);}
 }
 &[data-line_arrow_color="blue"] {
   border-bottom: 40px solid var(--blue);

   &:after { background: var(--blue);}
 }
 &[data-line_arrow_color="black"] {
   border-bottom: 40px solid var(--black);

   &:after { background: var(--black);}
 }

}

/* Buttons */
.tdlButtonWrapper {

  display: flex;

  .tdlButton {
    text-decoration: none;

    transition: ease-in-out  all .2s;
    position: relative;
    font-family: var(--primary-font);
    font-size: var(--primary-font-size);
    font-weight: 700 !important;
    text-transform: uppercase !important;
    line-height: 1;
  }

  &.outline {
    .tdlButton { border-width: 1px; border-style: solid; border-color: var(--orange); color: var(--orange); font-weight: bold !important; padding: 10px 60px;}
    .tdlButton:hover { color: var(--blue); transition: ease-in-out  all .2s;}
  }

  &.background {
    .tdlButton { text-decoration: none; text-transform: capitalize; background: var(--orange); color: var(--pale-yellow); padding: 10px 60px;}
    .tdlButton:hover { background: var(--blue); color: var(--white); transition: ease-in-out  all .2s;}
  }

  &.yellow {
    &.outline {
      .tdlButton { border-color: var(--yellow); color: var(--yellow);}
      .tdlButton:hover { border-color: var(--orange); color: var(--orange);}
    }
    &.background {
      .tdlButton { background: var(--yellow); color: var(--black);}
      .tdlButton:hover { background: var(--black); color: var(--yellow);}
    }
  }

  &.black {
    &.outline {
      .tdlButton { border-color: var(--black); color: var(--black);}
      .tdlButton:hover { border-color: var(--white); color: var(--white);}
    }
    &.background {
      .tdlButton { background: var(--black); color: var(--white);}
      .tdlButton:hover { background: var(--red); color: var(--white);}
    }
  }

  &.white {
    &.outline {
      .tdlButton { border-color: var(--white); color: var(--white);}
      .tdlButton:hover { background: var(--white); color: var(--blue);}
    }
    &.background {
      .tdlButton { background: var(--white); color: var(--blue);}
      .tdlButton:hover { background: var(--yellow); color: var(--blue);}
    }
  }

  &.blue {
    &.outline {
      .tdlButton { border-color: var(--blue); color: var(--blue);}
      .tdlButton:hover { border-color: var(--orange); color: var(--orange);}
    }
    &.background {
      .tdlButton { background: var(--blue); color: var(--white);}
      .tdlButton:hover { background: var(--orange); color: var(--white);}
    }
  }

  &.orange {
    &.outline {
      .tdlButton { border-color: var(--orange); color: var(--orange);}
      .tdlButton:hover { border-color: var(--blue); color: var(--blue);}
    }
    &.background {
      .tdlButton { background: var(--orange); color: var(--white);}
      .tdlButton:hover { background: var(--blue); color: var(--white);}
    }
  }

  &.right {
    justify-content: flex-end;
  }

  &.center {
    justify-content: center;
  }

  &.arrow {
    .tdlButton:after { content: '\2192'; display: inline-block; margin-left: 10px; position: relative; top: -3px;}
  }
  &.full-width {
    .tdlButton { width: 100%; text-align: center; padding: 10px 0;}
  }
}

/* Widget Button */
.wp-block-button {

  &.tdlButton {
    width: 100%;

    .wp-element-button {
      text-decoration: none;
      padding: 20px 60px;
      transition: ease-in-out  all .2s;
      position: relative;
      font-family: var(--primary-font);
      font-size: var(--primary-font-size);
      font-weight: normal !important;
      text-transform: uppercase !important;
      line-height: 1;
    }

    &.outline {
      .wp-element-button { border-width: 6px !important; border-style: solid !important; border-color: var(--black) !important; color: var(--blue) !important; border-radius: 20px !important; font-weight: bold !important; font-size: 42px; text-transform: uppercase;}
      .wp-element-button:hover { color: var(--white); transition: ease-in-out  all .2s;}
    }

    &.green {
      .wp-element-button { background: var(--light-green) !important; color: var(--black) !important; width: 100%;}
    }

  }

}

/* Default Icon Sizing */
.tdl-icons {
  width: 40px; height: 40px;  display: block; background-position: center center; background-repeat: no-repeat;

  &.yellow { filter: brightness(0) saturate(100%) invert(95%) sepia(27%) saturate(3592%) hue-rotate(319deg) brightness(84%) contrast(100%);}
  &.white { filter: brightness(0) saturate(100%) invert(100%) sepia(30%) saturate(4847%) hue-rotate(228deg) brightness(132%) contrast(116%);}
}

/* Icon Buttons */
.tdl-icon-button {
  a { text-decoration: none;}
  h3 { font-size: clamp(1rem, 3vw, 3.5rem); text-align: center; text-transform: uppercase; transition: ease-in-out all .3s; margin: 0; position: relative; z-index: 2;}

  .button-wrapper {
    position: relative; z-index: 9;
    .button { display: flex; justify-content: center; text-transform: uppercase; font-weight: var(--header-font-weight); padding: 15px 0;}
  }

  .wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(var(--column-gap) / 2);
    background: var(--pale-yellow);
    position: relative;


    .overlay {
      width: 100%; height: 100%; left: 0; top: 0; position: absolute; overflow: clip;
      &:after { content: ''; display: block; width: 50%; aspect-ratio: 1; left: 25%; top: 0; background: rgba(0,0,0,0); position: absolute; z-index: 1; transition: var(--default-transition); transform: scale(1) translateY(-50%); border-radius: 50%; transform-origin: center;}
    }


    /* &:hover { transition: var(--default-transition); background: var(--black) !important;} */
    &:hover {
      transition: var(--default-transition);

      .overlay:after { background: rgba(0,0,0,.1); transition: var(--default-transition); transform: scale(4);}
    }

    .description-wrapper {
      font-size: .8em; text-align: center; padding: 20px; position: relative; z-index: 9;
    }
  }

  &.yellow {
    .button-wrapper {
      .button { background-color: var(--yellow);}
    }

    .icon-wrapper {
      .tdl-icons { background-color: var(--yellow);}
    }

    .wrapper:hover {
      .overlay:after { background: var(--yellow-overlay);}
    }
  }

  &.orange {
    .button-wrapper {
      .button { background-color: var(--orange);}
    }

    .icon-wrapper {
      .tdl-icons { background-color: var(--orange);}
    }

    .wrapper:hover {
      .overlay:after { background: var(--orange-overlay);}
    }
  }
  &.blue {
    .button-wrapper {
      .button { background-color: var(--blue);}
    }

    .icon-wrapper {
      .tdl-icons { background-color: var(--blue);}
    }

    .wrapper:hover {
      .overlay:after { background: var(--blue-overlay);}
    }

  }
  &.marroon {

    .button-wrapper {
      .button { background-color: var(--marroon);}
    }

    .icon-wrapper {
        background-color: var(--marroon); width: 50%; border-radius: 50%; aspect-ratio: 1; transition: var(--default-transition);
      .tdl-icons {
        width: 100%;
        filter: brightness(0) saturate(100%) invert(94%) sepia(8%) saturate(711%) hue-rotate(332deg) brightness(103%) contrast(110%); transition: var(--default-transition);
      }
      &:hover {
        background: var(--marroon-overlay);  transition: var(--default-transition);
        .tdl-icons {
          filter: none; transition: var(--default-transition);
        }
      }
    }

    .wrapper {
      align-items: center;
    }
  }

  .icon-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative; z-index: 2;

    .tdl-icons {
      width: 50%;
      height: 100%;
      aspect-ratio: 1;
      transition: ease-in-out all .3s;
      border-radius: 50%;
      background-size: 70%;
    }
  }

  .content-wrapper {
    .content {}
  }

  &.boxed-offset {
    .icon-wrapper {
      margin-top: -25%;
    }
  }

  &.basic {
    h3 { font-size: clamp(1rem, 1.5vw, 2rem); }
    .wrapper:hover {
      .tdl-icons { background-color: var(--marroon-overlay);}
    }
    .icon-wrapper {
      .tdl-icons { width: 75%;}
    }

    &.marroon {
      .icon-wrapper {
        width: 75%;
        .tdl-icons { width: 100%;}
      }
    }
  }


}

/* Icon Block */
.tdl-icon-block {
  &.cover {
    .wrapper {
      width: 100%;

      .icon-wrapper {
        width: 100%; padding-top: 0;

        .tdl-icons { width: 100%; height: 100%; aspect-ratio: 1;}
      }
    }
  }

  &.large {
    margin-bottom: var(--default-margin);
    .wrapper {
      .icon-wrapper {
        .tdl-icons { width: 100px; height: 100px; aspect-ratio: 1; margin: 0 auto;}
      }
    }
  }

  &.offset {
    margin-top: calc(-3 * var(--default-margin));
  }
}

/* Add padding to previous row for offset icon */
.tdl_row:has(+ .tdl_row .tdl-icon-block.offset) { padding-bottom: calc(2 * var(--default-margin));}
.tdl_row:has(+ .tdl_row.apple) { padding-bottom: calc(2 * var(--default-margin));}
.tdl_row:has(+ .tdl_row.apple-two) { padding-bottom: calc(1 * var(--default-margin));}


/* Image Button */
.tdl-image-button {
  cursor: pointer; border-radius: 10px; overflow: clip;
  .wrapper {
    text-decoration: none;

    .icon-wrapper {
      .tdl-icons { filter: brightness(0) saturate(100%) invert(95%) sepia(27%) saturate(3592%) hue-rotate(319deg) brightness(84%) contrast(100%); height: 60px; width: 60px;}
    }

    .image-wrapper {
      position: relative;
      img { width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover;}
      &:after { content: ''; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: rgba(214, 173, 59, 0); transition: var(--default-transition);}
    }

    .content-wrapper {
      position: relative;
      padding: calc(var(--default-margin) * 2) var(--default-margin) var(--default-margin) var(--default-margin); display: flex; flex-direction: column; gap: var(--paragraph-margins);
      background-size: cover; background-repeat: no-repeat;
      h3 { margin: 0; color: var(--white) !important; font-size: 2rem;}
      p { margin: 0;}
      .description {
        color: var(--white); display: flex; flex-direction: column; flex: 1; justify-content: space-between; gap: var(--paragraph-margins);

        .tdlButtonWrapper {
          .tdlButton {}
        }
      }

      &:after { content: ''; display: block; width: 100%; height: 130px; background-size: cover; position: absolute; top: -58px; left: 0; z-index: 9999;}

    }
  }

  &:hover {
    .image-wrapper {
      &:after { background: rgba(214, 173, 59, .5); transition: var(--default-transition);}
    }
    .content-wrapper {
      h3 { color: var(--yellow) !important;}
    }


  }
}


/* Footer */
#footer {
  width: 100%;
  background-color: var(--blue);
  color: var(--marroon);
  /* margin-top: var(--default-margin); */
  position: relative;
  padding: var(--default-margin) 0 !important;

  footer { width: var(--content-width); margin: 0 auto;}

  ul {
    list-style: none; padding-left: 0; margin-top: 0;
  }

  a {
    text-decoration: none; color: var(--marroon);
  }
  :where(h1,h2,h3,h4) { color: var(--white); margin-top: 0; margin-bottom: var(--default-margin);}
  h3 { font-size: 32px; text-transform: uppercase; color: var(--marroon);}

  .wp-block-social-link { background-color: var(--marroon) !important;}
  .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor svg { fill: var(--blue) !important;}

  ul.menu {
    display: flex; flex-direction: column; gap: 20px ;font-size: 40px; font-family: var(--primary-font); font-weight: var(--primary-font-weight); font-style: var(--primary-font-style); text-transform: uppercase; line-height: 1;
    a { padding: 0;}
  }

  .tdlIcons {
    .social-icon { color: var(--black) !important;}
  }

  .tdl-global-contacts {
    display: flex; gap: var(--paragraph-margins); margin-bottom: 0 !important; font-size: .8em; justify-content: center;
    & > * {
      display: flex; gap: var(--paragraph-margins);
      &:not(:last-of-type):after { content: '|';}
    }

    .address-wrapper {
      gap: 0;
      .address:after { content: ","; padding-right: 3px;}
      &:after { content: '';}
    }
  }

  .logo {
    display: flex; justify-content: center; margin-bottom: var(--paragraph-margins);
    a {
      display: flex; justify-content: center; width: 100%;
    }
  }

}

#sub_footer {
  background-color: var(--pale-yellow);
  color: var(--blue);

  footer {
    display: flex; flex-direction: column; text-align: center; padding: var(--paragraph-margins) 0;
    #credit, #copy { font-size: .7em; margin: 0; line-height: 1.5; font-weight: 400;}
  }
  a {text-decoration: none; color: var(--blue);}

}

/* Forms */
.nf-form-cont {

  .nf-form-content { padding: 0;}
  .nf-form-content input:not([type="button"], [type="submit"]), .nf-form-content textarea.ninja-forms-field { background: var(--white); font-family: var(--primary-font); font-weight: 400; color: var(--marroon) !important; border: 1px solid var(--marroon) !important; font-size: var(--primary-font-size) !important;}
  .nf-form-content input:not([type="button"], [type="submit"]) { height: 50px !important;}

  .submit-container {
    display: flex; flex-direction: row; justify-content: start; margin-bottom: var(--default-margin) !important;

    &.add-user {
      .submit-wrap {
          position: relative;
        }
    }

    input {
       background: var(--orange) !important; text-transform: uppercase !important; color: var(--white) !important; height: auto !important; font-weight: bold !important; padding: 10px 60px !important; transition: ease-in-out  all .2s; font-family: var(--primary-font); font-size: var(--primary-font-size); line-height: 1; border: none !important; border-radius: 0px !important;

      &.tdlButton { padding: 20px 60px 20px 110px !important; }
    }

    :hover input { color: var(--white) !important; transition: ease-in-out  all .2s; background: var(--blue) !important;}
  }

  .nf-error-msg { font-size: 14px !important;}
  .nf-error.field-wrap .nf-field-element:after { height: calc(100% - 2px) !important; aspect-ratio: 1 !important; width: auto; line-height: 1 !important; align-content: center !important;}
  .nf-form-fields-required { text-align: right; font-style: italic; color: var(--marroon) !important;}
  .nf-field-label label { font-weight: normal; color: var(--marroon) !important;}
  .nf-error-msg, .ninja-forms-req-symbol {}
  /* .nf-error.field-wrap .nf-field-element::after { background: var(--red);} */
}

footer {
  .nf-form-cont {
    .nf-form-fields-required { display: none !important;}
    .nf-form-content textarea.ninja-forms-field { height: 100px !important;}
    .nf-form-content input.ninja-forms-field:not([type="button"], [type="submit"]) { padding: 0 10px !important;}
  }
}


/* More Link */
.more-link { color: var(--brown);}

/* .vc_tta.vc_tta-accordion .vc_tta-controls-icon-position-left .vc_tta-controls-icon */

/* Accordion styles */
.vc_tta-accordion {
  .vc_tta-panel-heading, .vc_tta-panel-body { border: 0px !important;}
  .vc_tta-panel-body { background-color: var(--gray);}
  .vc_tta.vc_tta-accordion .vc_tta-controls-icon-position-right.vc_tta-panel-title > a { padding-right: 200px !important;}

  .vc_tta-panel {
    .vc_tta-panel-title > a { color: var(--black) !important; font-size: 24px !important;}
    .vc_tta-title-text { font-weight: 700 !important;}
    .vc_tta-panel-heading { background: var(--white) !important;}
    .vc_tta-panel-heading:focus { color: var(--white) !important; background-color: var(--white) !important;}
    .vc_tta-panel-heading:hover { color: var(--white) !important; background-color: var(--white) !important;}
    :where(h1,h2,h3,h4) { font-family: var(--primary-font) !important; font-weight: normal !important;}
  }

  .vc_active {
    .vc_tta-panel-title { background: var(--white) !important;}
    .vc_tta-title-text { font-weight: 700 !important;}
    .vc_tta-panel-body { color: var(--black) !important; margin-bottom: var(--default-margin) !important;}
    &.vc_tta-panel { border: none !important;}

    /* .vc_tta-controls-icon {
      padding: 5px; background: var(--green); border: 3px solid var(--black); border-radius: 10px;
      &:before { transform: rotate(180deg) translateY(40%) translateX(-40%) !important;}
    } */
  }

  /* .vc_tta-controls-icon {
    padding: 5px; background: var(--green); border: 3px solid var(--black); border-radius: 10px;
    &:before { border-color: var(--black) !important; width: calc(100% - 10px); transform: translateY(40%) translateX(30%) !important;}
  } */
}


/* Call To Action */
.tdlCTAWrapper.vc_hidden { opacity: 1 !important; padding-bottom: 0 !important;}
.tdlCallToActionContainer > .tdl_row { padding-left: 0 !important; width: 100% !important; padding-right: 0 !important; left: auto !important;}
.tdl_row.tdlCallToActionContainer { margin-bottom: 0 !important;}
.tdlCTAWrapper :where(h1, h2, h3, h4) { color: var(--white); font-size: 56px; line-height: 1.2em;}

.tdlCallToActionContainer .tdl_row .tdl_column .tdl_row { width: 100% !important;}


.tdlCTAWrapper:has(.tdlCallToActionContainer[data-cta-size="full"]) {
  display: flex; flex-direction: column; align-items: center;
}

.tdlCallToActionContainer {
  .tdl_row { padding-bottom: 0 !important;}

  &[data-cta-size="content"] {
    display: flex; align-items: center; border-radius: 10px; overflow: clip;

    .tdl_row { padding: var(--default-margin) !important;}
  }

  .tdlButtonWrapper {
    margin-bottom: var(--paragraph-margins) !important;
    .tdlButton {
      &:hover { background: var(--gray) !important; color: var(--black) !important;}
    }
  }
  p { margin-bottom: 0;}
  p.center { text-align: center;}
  p.right { text-align: right;}

  a.black { color: var(--black);}
  a.yellow { color: var(--yellow);}
  a.white { color: var(--white);}
  a.gray { color: var(--gray);}
}

/* TDL Custom Blocks */
.tdl-custom-block {

  &.yellow {
    background: var(--yellow);
  }
  &.pale-yellow {
    background: var(--pale-yellow);
  }
  &.orange {
    background: var(--orange);
  }
  &.blue {
    background: var(--blue);
  }
  &.white {
    background: var(--white);
  }
  &.marroon {
    background: var(--marroon);
  }

  &.black {
    background: var(--black);
    .headingWrapper:not(.white, .black) :where(h1,h2,h3,h4) { color: var(--yellow);}
    .tdl_text_column p { color: var(--white);}

    .tdlIconListContainer {
      .tdlListItem {
        .heading-wrapper {
          h3 { color: var(--white);}
        }
      }
    }
  }

}


/*************************************************************** Page Specific ****************************************************************/


/* Team Members */
.teamMemberTDLBlock {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--column-gap);

  .teamMemberTDL {
    margin-bottom: var(--default-margin);

    h3 { margin-bottom: 0;}
    h4 { font-size: .8em; font-weight: normal; margin: 0;}
    a { text-decoration: none;}

    .teamMemberTDL_image{
      img { width: 100%; aspect-ratio: 1; object-fit: cover;}
    }
  }
}

/* Single Team Member */
.single-team_member {
  article { width: var(--content-width); margin: 0 auto; padding-top: var(--default-margin);

    .tdl-team-member {
      display: flex;
      gap: var(--column-gap);


      .left-column {
        flex: 0 0 30%;
        img { width: 100%; display: block;}
      }
      .right-column {
        flex: 1;

        h1 { margin-bottom: 0px; color: #0A0F1C; font-size: 60px; margin: 10px 0;}
        h4 { margin-bottom: 0; font-weight: var(--primary-font-weight);}
        h4.meet { color: var(--brown); font-size: 23px; margin-top: 0; font-weight: 700;}
        h4.contact { font-size: 40px; margin: 30px 0; font-weight: 700;}
        h2.posloc { font-size: 20px; color: rgba(10,15,28, .8); font-weight: var(--primary-font-weight);}
        .member-header { padding-bottom: 20px; border-bottom: 1px solid #0A0F1C;  margin-bottom: 20px;}
        .contact-info p { margin-bottom: 0;}
        .contact-info a { color: var(--brown);}
        .contact-info p { line-height: 1.8em;}
        ul#expertise { list-style: none; padding-left: 0;}
        ul#expertise li { display: inline-block; border: 2px solid #0A0F1C; padding: 10px 30px; margin-right: 20px; font-weight: 700;}

        p:last-of-type { margin-bottom: 0;}
      }
    }
  }
}

/* TDL News Article */
.tdlNewsArticle {
  padding-bottom: 35px; margin-bottom: 35px; border-bottom: 1px solid var(--blue);

  h3 { margin-bottom: 0; font-size: 2em; margin: 15px 0 40px 0;}
  .sourceDate { color: var(--brown); font-weight: bold;}
}


/* Testimonials */
.tdl-testimonial-container {
  .testimonialTDL {
    display: flex; flex-direction: column; gap: var(--paragraph-margins);
    .testimonial_image {
      text-align: center;

      img { border-radius: 50%; width: 50%; aspect-ratio: 1; object-fit: cover;}
    }
    .header {
      display: flex; justify-content: center;
      .icon-wrapper {
        margin-bottom: var(--default-margin);
        .tdl-icons { width: 50px; height: 50px;}
      }
      h3 { font-family: var(--primary-font); margin: 0; text-wrap: balance;}
    }
    .testimonial_content { white-space: break-spaces; font-size: 20px;}
    .credit {
      h4 {
        display: flex; gap: var(--paragraph-margins); font-family: var(--primary-font); font-size: 1.25rem; margin: var(--paragraph-margins) 0 0 0;
        /* &:before { content: '–';} */
      }
    }
  }
  &.center {
    .testimonialTDL { text-align: center;}
    .credit h4 { justify-content: center;}
  }

  &.list {
    .testimonialTDL:not(:last-of-type) { margin-bottom: var(--default-margin);}
  }

  &.carousel {

  }

  &.coverflow {

    .swiper-container.tdl-coverflow { overflow: clip;}
    .swiper-wrapper {
      align-items: center;
      .swiper-slide {
        .content-wrapper { padding: 20px; border: 3px solid var(--blue-overlay); border-radius: 50px;}
        .star-rating { display: none;}

        &.swiper-slide-active {
          .content-wrapper { padding: 50px; border: 3px solid var(--blue);}
          .star-rating {
            margin-bottom: var(--default-margin); display: flex; gap: 5px; justify-content: center;
            .star { display: inline-flex; color: #FF7B00; font-size: 1.75em;}
          }
          &:has(.star-rating) h4.name { margin-bottom: 0;}
        }
        h4.name { text-align: center; margin-top: 0;}
        .testimonial_image { margin-bottom: var(--default-margin);}

      }
    }
  }
}

/* Blog Posts */
.tdl-post-container {

  .tdl-blog-post {
    display: flex;
    gap: var(--default-margin);
    margin: 0 auto;

    a { text-decoration: none;}
    h3 { margin-top: 0 !important; margin-bottom: var(--default-margin) !important;}

    img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;}
    .tdlButton { text-transform: uppercase; margin-top: var(--default-margin);}

    .content-wrapper { padding: 0 var(--default-margin);}
  }

  &.columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--column-gap);

    .tdl-blog-post {
      flex-direction: column;
    }
  }

  &.list, &.alt-list {
      display: flex;
      flex-direction: column;

      .tdl-blog-post {
        padding: 50px 0;
        width: var(--content-width);

        .image-wrapper { flex: 0 0 33%;}
        .content-wrapper { flex: 1;}

        &:nth-of-type(even) {
          background: var(--yellow);
          .tdlButton:hover { background: var(--red); color: var(--white);}

        }
      }
  }

  &.list {
    .tdl-blog-post {
      flex-direction: row;
      .tdlButtonWrapper { justify-content: flex-end;}
    }
  }

  &.alt-list {
    .tdl-blog-post:nth-of-type(odd) {
      flex-direction: row;
      .tdlButtonWrapper { justify-content: flex-end;}
    }
    .tdl-blog-post:nth-of-type(even) {
      flex-direction: row-reverse;
      .tdlButtonWrapper { justify-content: flex-start;}
    }
  }

  .tdl-blog-post.circle {
    img { border-radius: 50%;}
  }

  .tdl-blog-post.featured {
    width: 100%;
    margin-bottom: var(--default-margin);
    img { width: 40%; float: left; padding-right: 70px;}
  }

  .tdl-blog-post.toggle {
    .readMore:after { content: 'Read More'; cursor: pointer;}
    .readMore.active:after { content: 'Read Less';}
    &.active .content { display: inline-block;}
    &.active .excerpt { display: none;}
  }
}

/* Posts on Colored Blocks */
.tdlBlueBlock, .tdlRedBlock, .tdlBlackBlock, .tdlGrayBlock {
  .tdl-post-container {

    .tdl-blog-post {
      color: var(--white);

      h3 { color: var(--white);}
      .tdlButton {
        background: var(--yellow); color: var(--blue);
        &:hover { background: var(--red); color: var(--white);}
      }
    }
  }
}


/* Posts on Full Width Row */
.vc_row[data-vc-stretch-content="true"] .tdl-post-container {
  .tdl-blog-post {
    margin: 0 auto;
    padding: 50px calc((100% - var(--content-width)) / 2);

    &:first-of-type { padding-top: 0 !important;}
  }
}

/* Post Categories */
.archive.category {
  h1.catTitle { color: var(--blue) !important; margin-top: 70px; margin-bottom: 70px}
  article { width: calc(var(--content-width) - 20px); margin: 0 auto; padding-bottom: 100px;}
}

/* Single Post */
.single-post {
  article { width: calc(var(--content-width) - 20px); margin: 0 auto; padding-bottom: 100px;}
  h1 { color: var(--blue);}
  h3 { color: var(--brown);}
  h4 { color: var(--brown);}
  .post-header { text-align: center; padding-top: 100px;}
  .post-wrapper { width: calc(var(--content-width) - 20px); margin: 0 auto; padding: 100px 0;}

  .recent-post-container {
    background: #ECECEC;
    h4 { margin-bottom: 0; text-align: center;}
    h2 { margin-top: 5px; text-align: center; margin-bottom: 70px;}
    .post { display: inline-block; vertical-align: top; width: 29%; margin-right: 6%}
    .post:nth-of-type(3n+3) { margin-right: 0;}
    .post img { width: 100%; height: auto;}
    .post h3 { color: var(--blue);}
    .post .postCatContainer { margin-top: 15px;}
    .post .postCatContainer a { color: var(--brown);}
    .post .readMore { color: var(--brown);}
  }
}

/* Numbered Section List */
.tdlIconListContainer {
  margin: var(--default-margin) 0;

  .tdlListItem {
    &:not(:last-of-type) { margin-bottom: var(--default-margin);}

    .heading-wrapper {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: calc(var(--default-margin) / 2);

      h3 {
        margin: 0; font-family: var(--primary-font); font-size: 30px; color: var(--green);
      }

      .icon-wrapper {
        .tdl-icons { width: 60px; height: 60px;}
      }
    }

    .description {}
  }

  &.numbered-list {
    .contentWrapper {
      counter-reset: number;

      .tdlListItem {
        counter-increment: number;
        margin-bottom: var(--default-margin);

        .heading-wrapper {

          h3 {
            &:before { content: counter(number) ". ";}
          }
        }

        .description {}
      }
    }
  }

  &.numbered-columns {
    .contentWrapper {
      counter-reset: number; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--column-gap);

      .tdlListItem {
        counter-increment: number;
        margin-bottom: var(--default-margin);

        .heading-wrapper {
          flex-direction: column;

          h3 {
            &:before { content: counter(number) ". ";}
          }

          .icon-wrapper {
            .tdl-icons { width: 100px; height: 100px;}
          }

        }

        .description {}
      }
    }

    &.three-col .contentWrapper { grid-template-columns: repeat(3, 1fr);}
    &.four-col .contentWrapper { grid-template-columns: repeat(4, 1fr);}

  }

  &.list {

  }

  &.alternating .contentWrapper .tdlNumberedtItem:nth-of-type(even) { flex-direction: row-reverse;}
}

/* TDL Masonry Image Grid */
#tdl_masonry_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 20px;
  margin-bottom: var(--default-margin);

  .tdl-masonry-item {
    img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;}

    &:nth-of-type(9n + 1) { grid-column-end: span 3; grid-row-end: span 2;}
    &:nth-of-type(9n + 2) {}
    &:nth-of-type(9n + 3) {}
    &:nth-of-type(9n + 4) {}
    &:nth-of-type(9n + 5) { grid-column-end: span 2; grid-row-end: span 2;}
    &:nth-of-type(9n + 6) {
      grid-column-end: span 1; grid-row-end: span 2;
      img { height: 100%;}
    }
    &:nth-of-type(9n + 7) {}
    &:nth-of-type(9n + 8) {}
    &:nth-of-type(9n + 9) {}

  }
}

/* Counter */
.tdlCounterWrapper {
  display: flex; position: relative; justify-content: center; align-items: center; flex-direction: column; gap: calc(var(--column-gap) / 2);
  * { text-align: center;}

  .content-wrapper {
    display: flex; flex-direction: column; gap: 5px;

    .count { font-size: 40px; font-weight: bold; color: var(--white); line-height: 1;}
    h4 { font-size: 16px; text-transform: uppercase; margin: 0; color: var(--white); font-weight: normal;}
  }

  .background-wrapper {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
    &:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--black-overlay);}
    img { width: 100%; object-fit: cover; height: 100%; aspect-ratio: 1;}
  }

  .icon-wrapper {
    .tdl-icons { width: 100px; height: 100px;}
  }

}

/* Featured Case Study */
.tdl-featured-case-study {

  margin-bottom: var(--default-margin);
  p { color: var(--white);}

  .featured-image-wrapper {
    margin-bottom: 50px;
    img { width: 100%; aspect-ratio: 16/9; object-fit: cover;}
  }

  .content-wrapper {

    display: flex;
    gap: 50px;
    h3 {}

    .left-content-wrapper {
      flex: 1;
      h3:first-of-type { margin-top: 0 !important;}
    }

    .right-content-wrapper {
      flex: 0 0 25%;
      border: 2px solid var(--white);
      padding: var(--default-margin);

      h3:first-of-type { margin-top: 0 !important;}
      ul { display: flex; flex-direction: column; gap: var(--default-margin);}
      li { color: var(--white);}
      li::marker { color: var(--green);}
    }
  }

  .tdlButtonWrapper { margin-top: var(--default-margin);}

}

/* Case Studies */
.tdlCaseStudyBlock {

  margin-top: var(--default-margin);

  .tdlCaseStudyWrapper {

    .case-study-item {

      &:not(:last-of-type) {margin-bottom: var(--default-margin);}
      h3 { margin-top: 0;}
      a { text-decoration: none;}

      .wrapper {
        display: flex;
        gap: 50px;

        .image-wrapper {
          flex: 0 0 30%;
          img { width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover;}
        }
        .content-wrapper {
          flex: 1;
        }
      }

    }
    &.columns{

      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 50px;

      .case-study-item {
        .wrapper {
          flex-direction: column;
        }
      }
    }

    &.list{
      .case-study-item {
        .wrapper {
          flex-direction: row;
        }
      }
    }

    &.alt-list{
      .case-study-item:nth-of-type(even) {
        .wrapper {
          flex-direction: row-reverse;
        }
      }
      .case-study-item:nth-of-type(odd) {
        .wrapper {
          flex-direction: row;
        }
      }
    }

  }
}


/* Logos */
.tdl-logos {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 70px;
  margin-bottom: 70px;
  justify-content: space-evenly;

  .tdl-logo-item {
    height: 70px;
    img { height: 100%; width: auto;}
  }
}

/* TDL Split Block */
.tdl_split_block_container {
  display: flex; gap: calc(var(--column-gap) * 3); align-items: center;

  .content_wrapper {
    .tdlButtonWrapper { margin-top: var(--default-margin);}
  }

  &.background_left { flex-direction: row;}
  &.background_right { flex-direction: row-reverse;}

  .background_wrapper {
    flex: 0 0 calc(33% - (var(--column-gap) /2) - 3px);

    img { width: 100%; height: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; border-radius: 10px;}
  }

}

/* Icon Block */
/* .tdl-icon-block {
  &:nth-of-type(even) { background: var(--yellow);}

  .wrapper {
    display: flex;
    flex-direction: row;
    gap: var(--column-gap);
    padding-bottom: 45px;
    width: var(--content-width);
    margin: 0 auto;

    .icon-wrapper {
      padding-top: 45px;

      .icon {
        color: var(--blue);
        font-size: 150px;
        display: flex;
        justify-content: center;
        align-items: end;
      }
    }

    .content-wrapper {

      h3 { color: var(--blue);}
      .content { color: var(--blue);}
    }
  }

} */

/* User Contact */
.tdlUserContactWrapper {
  display: flex;
  flex-direction: column;

  h3 { margin-bottom: 0;}
  a {
    line-height: 1.2;

    &.email {}
    &.phone {}
  }
}

/* Fancy TDL Background Image Block */
.tdl-fancy-background-image-block {
  position: relative;
  margin-bottom: calc(var(--default-margin) * 2) !important;

  .background-wrapper {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; border-radius: 50px; overflow: hidden;

    .background-image {
      position: relative; height: 100%;

      &:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--red-overlay);}
      &.red:before { background: var(--red-overlay);}
      &.blue:before { background: var(--blue-overlay);}
      &.black:before { background: var(--black-overlay);}

      img { width: 100%; height: 100%; object-fit: cover; display: block;}
    }
  }

  .content-wrapper {
    padding-top: var(--default-margin);
    color: var(--white);

    :where(h1,h2,h3,h4) { color: var(--white);}

    .top-heading-wrapper {
      .headingWrapper h2 { text-transform: uppercase; font-size: 50px;}
    }

    .main-content-wrapper {
      display: flex;
      flex-direction: row;
      gap: calc(var(--column-gap) * 2);
      padding: 0 calc(var(--default-margin) * 2);

      .featured-image-wrapper {
        flex: 0 0 40%;
        img { width: 100%; height: calc(100% + (var(--default-margin) * 1)); object-fit: cover; border-radius: 10px; display: block;}
      }

      .main-content {

        .headingWrapper h3 { font-size: 65px !important;}

        .content {}
      }
    }
  }

  &:has(.background-image.red) {
    .tdlButtonWrapper {
      &.white {
        &.outline .tdlButton:hover { background: var(--white); color: var(--red);}
        &.background .tdlButton:hover { background: var(--red); color: var(--white);}
      }
    }
  }

  &:has(.background-image.black) {
    .tdlButtonWrapper {
      &.white {
        &.outline .tdlButton:hover { background: var(--white); color: var(--black);}
        &.background .tdlButton:hover { background: var(--black); color: var(--white);}
      }
    }
  }
}

.tdl_video_wrapper {
  iframe { width: 100%; height: 100%; aspect-ratio: 16/9;}
}

/* Video Embed */
.tdl-video-container {
  iframe { width: 100%; height: 100%; aspect-ratio: 16/9; }
  video { width: 100%; height: 100%; aspect-ratio: 16/9;}
}

/* Featured Block */
.tdl-featured-block {
  background: rgba(0,0,0,.4); color: var(--white); border-radius: 10px; overflow: clip;
  display: flex;
  /* align-items: center; */

  p { color: var(--white);}

  .heading-wrapper {
    h3 { color: var(--yellow); margin: 0;}
  }

  .gallery-wrapper {
    flex: 0 0 33%; overflow: clip; position: relative; display: flex; align-items: center;

    ul {
      list-style: none; margin: 0; padding: 0; height: 100%; width: 100%;
      li {
        flex: 0 0 100%;
        height: 100%; width: 100%;
        img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: 10px;}
      }
    }

    .nav-wrapper {
      position: absolute; width: 90%; padding: 0 5%; display: flex; justify-content: space-between; z-index: 1;
      .nav {
        height: 40px; width: 40px; border-radius: 50%; background: rgba(255,255,255,.7); transition: var(--default-transition); display: flex; justify-content: center; align-items: center; font-size: 24px; cursor: pointer;
        &:hover { background: rgba(255,255,255,1); transition: var(--default-transition); color: var(--yellow);}
      }
    }
  }

  .wrapper {
    padding: var(--default-margin); display: flex; flex-direction: column; gap: var(--paragraph-margins); justify-content: center;

    /* .content { font-size: 20px; } */
  }

  &.black {
    background: var(--black);
    .tdlButtonWrapper {
      .tdlButton {
        &:hover { background: var(--gray); color: var(--black);}
      }
    }
  }
  &.yellow {
    background: var(--yellow); color: var(--black);
    .heading-wrapper {
      h3 { color: var(--black);}
    }
    .tdlButtonWrapper {
      .tdlButton {
        background: var(--black); color: var(--yellow);
        &:hover { background: var(--gray); color: var(--black);}
      }
    }

  }

  &.alt {
    &:nth-of-type(even) {
      background: var(--black);
      .tdlButtonWrapper {
        .tdlButton {
          &:hover { background: var(--gray); color: var(--black);}
        }
      }
    }
    &:nth-of-type(odd) {
      background: var(--yellow); color: var(--black);
      .heading-wrapper {
        h3 { color: var(--black);}
      }
      .tdlButtonWrapper {
        .tdlButton {
          background: var(--black); color: var(--yellow);
          &:hover { background: var(--gray); color: var(--black);}
        }
      }
    }
  }
}

/* Events */
.tdlEventBlock {
  .tdlEventWrapper {
    .event {

      &:not(:last-of-type) { border-bottom: 1px solid var(--black); padding-bottom: var(--default-margin);}
      &:last-of-type) { margin-bottom: var(--default-margin);}
      #dateTime {
        h4 { margin-bottom: calc(var(--default-margin) / 2); font-size: 24px;}
      }
      #content {}

    }
  }
}

/* Checklists */
.tdlChecklist {
  ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 0;

    li {
      line-height: 30px; font-size: 24px; display: flex; gap: 10px; align-items: center;
      &:before { content: ''; width: 15px; height: 15px; border: 2px solid var(--black); display: inline-block;}
    }
  }
}

/* Board Members */
.tdlBoardMemberWrapper {

  .member { color: var(--green); font-weight: bold;}
  .position {}

  &.center { text-align: center;}
  &.right { text-align: right;}

  &:not(:last-of-type) { margin-bottom: var(--paragraph-margins);}

}

/* Numbered Icons */
.tdl-number-icon {
  .wrapper {
    .icon-wrapper {
      margin-bottom: var(--paragraph-margins);

      .tdl-icons { width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; font-size: 32px; color: var(--black);}
    }
  }
}

/* Handle Generic TDL Slider */
#slider-container { position: relative; transition: var(--default-transition); left: 0; display: flex; flex-direction: row;}

/* Seasonal Gallery */
.tdl-seasonal-gallery {

  .gallery-wrapper {
    width: 100%; margin: var(--default-margin) auto 0 auto;

    .gallery-container {
      display: grid; grid-template-rows: repeat(3, 300px); grid-template-columns: repeat(6,1fr); gap: 20px;
      &:not(.active) { display: none;}

      .tdl-gallery-item {
        width: 100%; overflow: hidden;
        &.hidden { display: none;}

        &:nth-of-type(6n + 1) { grid-row: auto / span 2; grid-column: auto / span 6;}
        &:nth-of-type(6n + 2) { grid-row: auto / span 1; grid-column: auto / span 2;}
        &:nth-of-type(6n + 3) { grid-row: auto / span 1; grid-column: auto / span 2;}
        &:nth-of-type(6n + 4) { grid-row: auto / span 1; grid-column: auto / span 2;}
        &:nth-of-type(6n + 5) { grid-row: auto / span 2; grid-column: auto / span 3;}
        &:nth-of-type(6n + 6) { grid-row: auto / span 2; grid-column: auto / span 3;}

        img { width: 100%; height: 100%; object-fit: cover; transition: ease-in-out all .2s; opacity: 1;}
        &:hover img { opacity: .7; transition: ease-in-out all .2s;}
      }
    }
  }
  #gallery-selector {
    display: grid; grid-template-columns: repeat(2,1fr); gap: var(--column-gap);

    .season {
      cursor: pointer; font-size: 40px; text-transform: uppercase; color: var(--yellow); display: flex; line-height: 80px; justify-content: center; background: var(--black); border-radius: 5px;
      &.active { background: var(--yellow); color: var(--black);}
      &:hover { background: var(--gray); color: var(--black);}
    }

  }
  .view-more-wrapper {
    width: 100%; grid-column: auto / span 6;
    .tdlButtonWrapper {
      margin-top: var(--default-margin);
      .tdlButton { cursor: pointer;}
    }
  }
}

/* Global Contacts */
.tdl-global-contacts {
  margin-bottom: var(--default-margin);
  p { margin: 0;}

  .name {}
  .email {}
  .phone {}

  .address-wrapper {
    margin-bottom: var(--paragraph-margins);

    .address {}
    .mailing {}

    .address-csz {
      display: flex;
      p:not(:last-of-type):after { content: ','; padding-right: 5px;}

      .city {}
      .state {}
      .zip {}
    }
  }

  &.white { color: var(--white);}
  &.black { color: var(--black);}
  &.yellow { color: var(--yellow);}
  &.gray { color: var(--gray);}
}

a.include-icons {
  display: inline-block;

  &.phone {
    &:before { content: ''; display: inline-block; position: relative; top: 3px; margin-right: 10px; width: 20px; height: 20px; background-size: cover; filter: brightness(0) saturate(100%) invert(96%) sepia(36%) saturate(3057%) hue-rotate(321deg) brightness(86%) contrast(94%);}
  }
  &.email {}

  /* &.white { filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(269deg) brightness(105%) contrast(103%);}
  &.yellow { filter: brightness(0) saturate(100%) invert(96%) sepia(36%) saturate(3057%) hue-rotate(321deg) brightness(86%) contrast(94%);}
  &.gray { filter: brightness(0) saturate(100%) invert(92%) sepia(43%) saturate(4817%) hue-rotate(192deg) brightness(146%) contrast(81%);} */
}

.wpb_gmaps_widget { margin-bottom: 0 !important;}
.wpb_raw_code.center .wpb_wrapper { display: flex; justify-content: center;}

/* FAQ */
.tdl-faq-container {
  .wrapper {
    .faq {
      &:not(:last-of-type) {margin-bottom: var(--default-margin);}
      h4 { margin: 0; font-size: 1em;}
      p { margin: 0;}
    }
  }

  &.center {
    .wrapper {
      .faq {
        display: flex; flex-direction: column; gap: var(--paragraph-margins);
        h4 { text-align: center;}
        p { text-align: center; font-size: 20px;}
      }
    }
  }

  &.icons {
    .icon-wrapper {
      display: flex; justify-content: center; margin-bottom: var(--default-margin);
      .tdl-icons {
        display: block; height: 50px; width: 50px;
      }
    }
  }
}

/* WooCommerce Styles */
.woocommerce form .form-row .input-text, .woocommerce form .form-row select {
  background-color: var(--white) !important; border: 1px solid var(--marroon) !important; border-radius: 0 !important; line-height: 2 !important;
}
.select2-container .select2-dropdown, .select2-container .select2-selection { background: var(--white) !important;}
.select2-container--default .select2-results__option[aria-selected="true"], .select2-container--default .select2-results__option[data-selected="true"] { background-color: var(--pale-yellow) !important;}
.select2-container .select2-selection--single .select2-selection__rendered { color: var(--marroon) !important;}
.select2-search--dropdown .select2-search__field { line-height: 2 !important; background-color: var(--pale-yellow) !important;}
.select2-results__options { color: var(--marroon) !important;}
.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] {
  background-color: var(--marroon) !important; color: var(--pale-yellow) !important;
}

#add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box { background-color: var(--marroon) !important; color: var(--pale-yellow) !important;}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--marroon) !important;}
#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment { background: var(--yellow) !important;}

#add_payment_method table.cart td.actions .coupon .input-text, .woocommerce-cart table.cart td.actions .coupon .input-text, .woocommerce-checkout table.cart td.actions .coupon .input-text { width: 300px !important; padding: 15px 10px !important;}

.woocommerce-info {
  border-top-color: var(--marroon) !important; background-color: var(--yellow) !important; color: var(--marroon) !important; outline: none !important;
  &:before { color: var(--marroon) !important;}
}

.woocommerce-message {
  border-top-color: var(--marroon) !important; background-color: var(--yellow) !important; color: var(--marroon) !important; outline: none !important;
  &:before { color: var(--marroon) !important;}
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price, .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price { color:
  var(--marroon) !important;
}

.woocommerce-notices-wrapper { outline: none !important; border: none !important;}

.woocommerce-error[role="alert"] {
  border-top-color: var(--marroon) !important; background: var(--yellow) !important; outline: none !important;
  li { font-weight: 700 !important; font-style: italic !important; color: var(--marroon) !important;}
  &:before { color: var(--marroon) !important;}
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { font-weight: 700 !important;}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button {
  border-radius: 0 !important;
  color: var(--pale-yellow) !important;
  background: var(--orange) !important;
  padding: 0 1rem !important;
  line-height: 2 !important;
  font-weight: var(--primary-font-weight) !important;
  text-transform: uppercase !important;
  font-size: var(--primary-font-size) !important;

  &:hover { background: var(--blue) !important;}
  &.added { display: none !important;}
}


/* Cart Totals */
.cart_totals {
  float: none !important;
  width: 100% !important;
  h2 { font-size: 40px !important;}
}

.woocommerce-cart .cart-collaterals .cart_totals table th { width: auto !important;}

.woocommerce a.added_to_cart {
  margin-top: 1em;
  color: var(--pale-yellow) !important;
  background: var(--orange) !important;
  padding: 0 1rem !important;
  line-height: 2 !important;
  font-weight: var(--primary-font-weight) !important;
  text-transform: uppercase !important;
  font-size: var(--primary-font-size) !important;

  &:hover {
    background: var(--blue) !important;
  }
}

#ship-to-different-address  { display: none !important;}

.woocommerce ul.products li.product a img { mix-blend-mode: darken !important;}

ul.products { margin-top: var(--default-margin) !important;}

.wcri-checkout-rental-info {
  margin-top: var(--default-margin);
  background: var(--yellow);
  padding: 20px;
  margin-bottom: 25px;
  border: 1px solid var(--marroon);
  /* border-radius: 8px; */
  box-shadow: 0 2px 4px rgba(0,115,170,0.1);

  h3 {
    margin-bottom: 25px;
    margin-top: 0;
    display: flex;
    gap: var(--paragraph-margins);
  }

  .wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    gap: 20px;
    margin-bottom: 15px;

    .date {
      background: var(--pale-yellow);
      padding: 15px;
      /* border-radius: 6px; */
      border: 1px solid #e0e0e0;

      strong { color: var(--marroon); display: block; margin-bottom: 5px;}
      /* span { font-size:16px;font-weight:500;} */
    }
  }

  .note {
    background: var(--pale-yellow); padding: 12px; border-radius: 4px; border-left: 4px solid var(--marroon);
    p { margin: 0; font-size: 14px; font-style: italic;}
  }
}

.tdl-rental-notification {
  /* padding: 1em 2em 1em 3.5em; background: var(--yellow); border-top: 3px solid var(--marroon); */
  font-style: italic; font-weight: var(--primary-font-weight);
}

.wcri-checkout-days {
  background-color: var(--marroon-overlay);

  th { padding: 12px; color: var(--marroon); font-weight: bold;}
  td { padding: 12px;}
  strong { color: var(--marroon);}
  small { color: var(--marroon); font-style: italic;}
}

.wcri-cart-dates {
  color: var(--marroon); margin-bottom: calc(2 * var(--default-margin));

  h3 { margin-top: 0;}
  .form-fields {
    display: flex;
    align-items: center;
    gap: var(--paragraph-margins);
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 5px;
    padding: 20px;

    label {}
    input { line-height: 2; border: 1px solid var(--marroon); font-size: var(--primary-font-size) !important;}
  }
  button#wcri_update_dates { margin: var(--default-margin) 0; display: block;}
}

.woocommerce-cart .woocommerce table.shop_table { margin-bottom: var(--default-margin) !important;}

.ui-datepicker .ui-datepicker-header { background-color: var(--marroon);}
.ui-widget-header a { color: var(--pale-yellow);}
.ui-datepicker-title { color: var(--pale-yellow);}
.ui-datepicker .ui-datepicker-next span { color: var(--marroon-overlay);}
.ui-widget-header .ui-icon { filter: brightness(0) saturate(100%) invert(94%) sepia(8%) saturate(711%) hue-rotate(332deg) brightness(103%) contrast(110%);}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { background: var(--orange) !important; border: 1px solid var(--orange) !important;}

/* Woo Single Product */
.single-product {
  #header { background: var(--blue) !important; top: 0;}

  .menu-header-top-container {
    & ul.tdl-header-menu-buttons {
      li {
        &.blue a {
          background-color: var(--orange) !important;
          &:hover { background-color: var(--yellow) !important; color: var(--marroon) !important;}
        }
      }
    }
  }
  .woocommerce-notices-wrapper {
    .woocommerce-message {
      padding: 1em var(--offset) !important;
      &:before { position: initial !important;}
    }
  }
  .product { width: var(--content-width); margin: var(--default-margin) auto 0 auto;}
  .woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--pale-yellow) !important; color: var(--marroon) !important;}
  .meta { display: none;}
  .product_meta { display: none;}
  #comments { display: none;}
  .woocommerce-product-gallery__image { mix-blend-mode: darken !important;}
  .entry-summary .price { font-style: italic !important;}
  .title { display: none !important;}
  .woocommerce .quantity .qty { padding: 14px 0 !important;}

  section.related {
    clear: both !important; background-color: var(--yellow) !important; padding-top: var(--default-margin) !important; width: 100vw !important; left: calc(-1 * var(--offset)); position: relative;
    h2 { text-align: center !important; margin-top: 0 !important;}
    ul.products {
      margin: 0 auto !important; width: var(--content-width) !important;
      li.product a img { mix-blend-mode: normal !important; aspect-ratio: 1; object-fit: cover;}
      .price { text-align: center !important;}
      .button { text-align: center; padding: 0 !important; width: 100%;}
    }
  }
}

/* Email/Order Confirmation */
.woocommerce-order-rental-details {
  margin-top:30px;
  h2 {}
  .wrapper {
    background: var(--marroon-overlay); padding: 20px; border: 1px solid var(--marroon); margin-bottom: 20px;

    .rental-header { display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 20px;}
    .date {
      strong { color: var(--marroon);}
    }
    .rental-notes {
      background: var(--pale-yellow); padding: 15px; margin-top: 15px; border-left: 4px solid var(--marroon);

      h4 { margin-top: 0; color: var(--marroon);}
      ul { margin: 0; color: var(--marroon);}
    }
  }

}


/* Checkout Fields */
.woocommerce-checkout {
  .woocommerce-privacy-policy-text { font-size: .6em !important; font-style: italic !important;}
  #agreement_text_field {
    padding: 0 !important;
    p { margin: 0 !important;}
  }

}

/* Agreement Popup */
.tdl-agreement {margin-bottom: 0;}
.tdl-agreement-popup-container {
  display: none;
  &.active {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 9999;

  font-size: 16px;
  h2 { font-size: 24px;}
  h3 { font-size: 20px;}
  h4 { font-size: 18px;}

  .button-wrapper {
    display: flex; gap: var(--paragraph-margins); justify-content: end; margin-top: var(--default-margin);
    #agree-button { line-height: 2; padding: 0 1rem; background: var(--blue); color: var(--white); cursor: pointer;}
    #cancel-button { line-height: 2; padding: 0 1rem; background: var(--orange); color: var(--white); cursor: pointer;}
  }
}
}
.popup-content { background: white; padding: 20px; max-width: 600px; max-height: 80vh; overflow-y: auto;}

/* Mini Cart */
.wc-block-components-button,.wp-element-button,.wp-block-woocommerce-mini-cart-cart-button-block,.wc-block-mini-cart__footer-cart,.outlined { color: var(--white) !important; background: var(--orange); !important}
.wc-block-components-button:not(.is-link).is-style-outline, .wc-block-components-button:not(.is-link).outlined {
  background: var(--orange) !important; color: var(--white) !important;
  &:hover {
    background: var(--blue) !important; color: var(--white) !important;
  }
}

.woocommerce-cart #wc-square-digital-wallet { display: none !important;}

/* 404 Page */
.error404 {
  article {
    margin: var(--default-margin) 0;
    header {
      display: block;
      h1 {margin: 0;}
      p {margin: 0;}
    }
  }
}