/*
Theme Name: South Park Ambulance
Theme URI: https://tandemdesignlab.com
Author: Tandem Design Lab
Author URI: https://tandemdesignlab.com
Description: Custom Theme for South Park Ambulance
Version: 2.0
License: none
Tags:
*/


:root{
  --primary-font: "Montserrat";
  --primary-font-size: 20px;
  --primary-font-weight: 400;

  --red: #ED4E42;
  --yellow: #FFD104;
  --blue: #223A71;
  --gray: #CCCCCB;
  --white: #FFF;
  --black: #000;

  --content-width: 1200px;
  --gutter: 100px;
  --default-vc-padding: 60px;
  --small-vc-padding: 20px;
  --column-gap: 50px;
  --default-transition: ease-in-out all .5s;

  --section-margins: 100px;
  --header-margins: 60px;
  --footer-margins: 150px;

  --line-height: 5px;
}


/****************************************************************** 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(--blue);}
a, a:hover { color: var(--blue);}

.headingWrapper {
  display: flex;

  :where(h1,h2,h3,h4) { color: var(--blue); font-family: var(--primary-font); font-weight: 800; line-height: 1; text-transform: uppercase; margin: var(--header-margins) 0 !important;}
  :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);}
  &.red :where(h1,h2,h3,h4) { color: var(--red);}
  &.black :where(h1,h2,h3,h4) { color: var(--black);}
  &.gray :where(h1,h2,h3,h4) { color: var(--gray);}
  &.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;}

  &.tdlNoBotomMargin :where(h1,h2,h3,h4) { margin-bottom: 0 !important;}
  &.tdlNoTopMargin :where(h1,h2,h3,h4) { margin-top: 0 !important;}

  + .wpb_text_column p:first-of-type { margin-top: 0 !important;}
}

h1 { font-size: 50px; line-height: 1;}
h2 { font-size: 40px; line-height: 1;}
h3 { font-size: 35px; line-height: 1;}
h4 { font-size: 30px; line-height: 1;}

/* Try to fix double margins */
.headingWrapper ~ .headingWrapper { margin-top: 0 !important;}
.headingWrapper ~ .tdl-icon-block.no-background .wrapper {
  & .icon-wrapper { padding-top: 0 !important;}
  & .content-wrapper {
    & h3 { margin-top: 0 !important;}
  }
}

.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;}

  a { text-decoration: none;}
}

ul {
  a { text-decoration: none;}
}

.wpb_content_element { margin-bottom: var(--default-vc-padding) !important;}
h2.wpb_singleimage_heading { font-size: 1em !important;}
.wpb_single_image.tdlNoBottomMargin { margin-bottom: 0 !important;}

#tdlIconRow {
  /* margin-top: var(--default-vc-padding); */

  .wpb_single_image {
    height: 100px;

    img { height: 100px; width: auto;}
  }
}

.page-id-3647 #footer { border-top: 4px solid var(--blue);}

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

/* Header */
#header { position: absolute; top: 0; left: 0; width: 100%; padding-top: var(--small-vc-padding);}
.page-template-no-banner-page #header { position: relative; background: var(--blue);}
.logged-in:not(.page-template-no-banner-page) #header { top: 12px;}
header { display: flex; align-items: flex-end; width: calc(100% - (var(--default-vc-padding) * 2)); justify-content: space-between; padding: var(--default-vc-padding);}

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

  #menu-main {
    margin: 0;
    display: flex;
    flex-direction: row;
    gap: 60px;

    a { text-decoration: none; color: var(--yellow); font-weight: bold; font-size: 16px; font-family: var(--primary-font); text-transform: uppercase;}

    li {
      position: relative; line-height: 2 !important;

      &:hover {
        .sub-menu { display: flex; flex-direction: column;}
      }

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

      &.current_page_item {
        a {}

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

    }

    .sub-menu {
      position: absolute;
      display: none;
      width: fit-content;
      min-width: 250px;
      background: var(--yellow);

      li {
        a { color: var(--blue); line-height: 2; padding: 0 10px; font-size: .7em; white-space: nowrap; width: calc(100% - 20px); display: inline-block;}
        &:hover { background: var(--blue);}
        &:hover a { color: var(--yellow);}
      }
    }
  }

}

/* Mobile Menu */
#tdl_mm_container {
  background-color: var(--yellow);
  line-height: 2em !important;
  text-align: left;

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

  .menu-item-has-children a:after{ border-color: transparent transparent transparent var(--blue) !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(--blue);
      line-height: 2em;

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

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

  }

}

/* Mobile Button */
#tdl_mm_button {
  position: relative !important;
  z-index: 999999;

  &:after, &:before, & > div { background-color: var(--yellow) !important;}
}

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

/* Top Menu Bar */
.headerTop {
  position: absolute;
  top: var(--default-vc-padding);
  right: var(--default-vc-padding);
  z-index: 9999;

  ul { list-style: none; display: flex; gap: 10px;}
  li a {
    text-decoration: none;
    background: var(--red);
    color: var(--white);
    padding: 8px 20px;
    font-weight: 700;

    &:hover {
      background: var(--yellow);
      color: var(--blue);
    }
  }

}

/* Banner */
rs-slide { position: relative;}
rs-slide:after { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; content: ''; display: inline-block; background: linear-gradient(180deg, rgba(34, 58, 113, 1) 0%, rgba(34, 58, 113, 0) 100%);}
/* body:not(.home) rs-fullwidth-wrap { margin-bottom: var(--default-vc-padding) !important;} */
/* rs-layer { line-height: 1 !important;} */

/* Logo */
.logo {
  height: 100px;
  position: relative;
  z-index: 9;

  img { height: 100%; display: block;}
  a { display: block;}
}

/* Buttons */
.tdlButtonWrapper {
  margin-bottom: var(--default-vc-padding);
  display: flex;

  .tdlButton {
    text-decoration: none;
    text-transform: capitalize;
    padding: 8px 20px;
    transition: ease-in-out  all .2s;
    position: relative;
    font-size: var(--primary-font-size);
    font-weight: 700;
  }

  &.full-width {
    .tdlButton { width: 100%;}
  }

  &.outline {
    .tdlButton { border-width: 2px; border-style: solid; border-color: var(--blue); color: var(--blue); }
    .tdlButton:hover { color: var(--white); transition: ease-in-out  all .2s;}
  }

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

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

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

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

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

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

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

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

  &.center {
    justify-content: center;
  }

}

.tdl-icon-button {
  margin: var(--column-gap) 0;
  &:hover .icon-wrapper .icon { transition: ease-in-out all .3s;}
  &:hover .icon-wrapper .icon:before { transform: scale(1.3); transition: ease-in-out all .3s; color: var(--yellow);}

  a { text-decoration: none;}
  h3 { font-size: 20px; text-align: center; color: var(--white); text-transform: uppercase; transition: ease-in-out all .3s;}
  &:hover h3 { color: var(--yellow); transition: ease-in-out all .3s;}

  .wrapper {
    display: flex;
    gap: var(--column-gap);
  }

  .icon-wrapper {

    .icon {
      color: var(--white);
      font-size: 100px;
      display: flex;
      justify-content: center;
      align-items: end;
      transition: ease-in-out all .3s;

      /* Assign Icons */
      &:before { transform: translateY(0%) scale(1.2); transition: ease-in-out all .3s;}
    }
  }

  .content-wrapper {
    flex: 1;
    .content {}
  }

}


/* Footer */
#footer {
  width: 100%;
  color: var(--blue);
  position: relative;
  /* padding-top: var(--footer-margins) !important; */

  footer { width: var(--content-width); margin: 0 auto;}
  .footer_column_wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--column-gap);
    margin-bottom: 100px;

    .footer_column:first-of-type {
      display: flex; flex-direction: column; justify-content: center;

      img { padding-bottom: 65px !important;}
    }
  }

  ul { list-style: none; padding-left: 0; margin-top: 0;}
  ul li.red a { color: var(--red);}
  ul li a { font-weight: normal; text-transform: uppercase;}
  a { text-decoration: none; color: var(--blue);}
  a:hover { color: var(--green);}
  :where(h1,h2,h3,h4) { color: var(--blue);}
  h3 { font-size: 42px; text-transform: uppercase; margin: var(--header-margins) 0;}
  #credit, #copy { text-align: center; font-size: .75em; margin: 0;}

  #sub_footer {
    color: var(--blue); margin: var(--small-vc-padding) 0;
    a {text-decoration: none; color: var(--blue);}
  }

  .wp-block-social-links {
    margin-top: var(--default-vc-padding);

    .wp-block-social-link {
      position: relative;
      .wp-block-social-link-anchor svg { fill: var(--white) !important; color: var(--white) !important; z-index: 2; padding: 5px 8px;}
      &:hover:before { background: var(--green);}
    }
  }

}

/* Address Widget */
#tdl_contact_widget_container {
  position: relative;
  left: -15px;

  > div { margin-bottom: var(--small-vc-padding); display: flex; gap: 10px; align-items: center;}
  >:before { font-family: 'icomoon'; display: inline-flex; font-size: 80px; line-height: 1;}
  #addressContainer { align-items: start;}
  #addressContainer:before { content: '\e900';}
  #emailContainer:before { content: '\e901';}
  #phoneContainer:before { content: '\e902';}
  p { padding: 0; margin: 0;}
  strong { }
}

/* TLD Contact Links */
.tdlContactWrapper {
  padding-left: 50px;

  .tdlContact { display: flex; flex-direction: row; align-items: center; text-decoration: none;}
  .tdlContact:hover { color: var(--blue);}
  .tdlContact:before { font-family: 'icomoon'; display: inline-block; margin-right: 10px; font-size: 40px; width: 50px;}
  &.phone .tdlContact:before { content: '\e908';}
  &.email .tdlContact:before { content: '\e905'; font-size: 30px;}
  &.facebook .tdlContact:before { content: '\e906';}
  &.location .tdlContact:before { content: '\e907';}
}

/* Social Media Widget */
#tdl_social_widget_container {
  display: inline-block;
  a { color: var(--white); text-decoration: none;}

  .icon {
    margin-right: 20px;

    &:before { color: var(--white); font-size: 16px;}
    &:hover:before { color: var(--brown);}
  }
}

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

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

  .submit-container {
    display: flex; flex-direction: row; justify-content: end;

    input { padding: 8px 40px !important; background: var(--yellow) !important; text-transform: uppercase !important; border: none !important; color: var(--blue) !important; height: auto !important; font-weight: 400 !important;}

    :hover input { background: var(--red) !important; color: var(--white) !important;}
  }

  .nf-error-msg { color: var(--red) !important; 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;}

}

footer {
  .nf-form-cont {
    .nf-form-fields-required { display: none !important;}
    .nf-form-content textarea.ninja-forms-field { height: 100px !important;}
  }
}


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


/* Accordion styles */
.vc_tta-container[data-vc-action="collapse"] {
  margin-bottom: var(--default-vc-padding) !important;

  .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(--blue) !important; font-size: 24px !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;}
  }

  .vc_active {
    .vc_tta-panel-title { background: var(--yellow) !important;}
    .vc_tta-panel-body { background-color: var(--gray) !important;}
    &.vc_tta-panel { border: 1px solid var(--gray) !important;}
  }
}

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

.tdlCallToActionContainer .vc_row .wpb_column .vc_row { width: 100% !important;}


.tdlCTAWrapper:has(.tdlCallToActionContainer[data-cta-size="full"]) {
  display: flex; flex-direction: column; align-items: center;
  /* min-height: 500px;  */

  &:has([data-cta-background="blue"]) { background: var(--blue);}
  &:has([data-cta-background="yellow"]) { background: var(--yellow);}
  &:has([data-cta-background="white"]) { background: var(--white);}
  &:has([data-cta-background="arrows"]) {
    background-image: url('assets/images/southpark_arrow-bg.svg');
    background-size: cover;
    background-position: center center;
    padding: var(--default-vc-padding) 0 !important;
    border: 15px solid var(--red);
    width: calc(100% - 30px);

    a:not(.tdlButton) { color: var(--red); font-weight: 700; text-decoration: none;}
    .wpb_single_image img { max-width: 75% !important; margin-top: 20px;}
  }
  &:has([data-cta-background="email"]) {
    background: var(--blue);
    padding-bottom: var(--default-vc-padding) !important;
  }
  [data-cta-background="email"] {
    background: var(--blue);
    color: var(--white);
    background-image: url('assets/images/southpark_email-bg.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    padding-bottom: 200px;

    a { color: var(--white); text-decoration: none;}
    h2 { margin-bottom: 0 !important;}
    p { margin: 0 !important;}
  }
}

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

  &[data-cta-size="content"] {
    min-height: 500px; display: flex; align-items: center;

    &[data-cta-background="blue"] { background: var(--blue);}
    &[data-cta-background="yellow"] { background: var(--yellow);}
    &[data-cta-background="white"] { background: var(--white);}
    &[data-cta-background="arrows"] {
        background-image: url('assets/images/southpark_arrow-bg.svg');
        background-size: cover;
        background-position: center center;
        padding: var(--default-vc-padding) 0 !important;
        border: 15px solid var(--red);
        width: calc(100% - 30px);

        a:not(.tdlButton) { color: var(--red); font-weight: 700; text-decoration: none;}
        .wpb_single_image img { max-width: 75% !important; margin-top: 20px;}
    }
    &[data-cta-background="email"] {
      background: var(--blue);
      color: var(--white);
      background-image: url('assets/images/southpark_email-bg.svg');
      background-size: cover;
      background-position: bottom center;

    a { color: var(--white); text-decoration: none;}
      h2 { margin-bottom: 0 !important;}
      p { margin: 0 !important;}
    }
  }

  /* &[data-cta-size="content"] {}
  &[data-cta-size="full"] { width: 100vw; padding: 0 calc((100% - var(--content-width)) / 2);}
  &[data-cta-size="streched"] { width: 100vw; margin-left: calc(-1 * ((100% - var(--content-width)) / 2));} */
}

/* TDL Custom Blocks */
.tdlBlueBlock, .tdlRedBlock, .tdlYellowBlock, .tdlGrayBlock, .tdlArrowBlock {
  .wpb_text_column :last-child, .wpb_text_column p:last-child { margin-top: 0 !important;}
  .wpb_content_element:last-of-type { margin-bottom: var(--header-margins) !important;}
}

.tdlExtraPadding > .vc_column_container {
  /* margin-top: 100px !important;
  margin-bottom: 100px !important; */
}


.tdlBlueBlock {
  /* min-height: 500px; */
  background: var(--blue);
  :where(h1,h2,h3,h4) { color: var(--yellow);}
  :where(p) { color: var(--white);}
}

.tdlRedBlock {
  /* min-height: 500px; */
  background: var(--red);
  :where(h1,h2,h3,h4,p) { color: var(--white);}
}

.tdlYellowBlock {
  /* min-height: 500px; */
  background: var(--yellow);
  :where(h1,h2,h3,h4,p) { color: var(--blue);}

  .tdlButtonWrapper {
    &.background {
      .tdlButton:hover { background: var(--red) !important; color: var(--white) !important; }
    }
  }
}

.tdlGrayBlock {
  /* min-height: 500px; */
  background: var(--gray);
  :where(h1,h2,h3,h4,p) { color: var(--blue);}
}

.tdlArrowBlock {
  /* min-height: 500px; */
  background-image: url('assets/images/southpark_arrow-bg.svg');
  background-size: cover;
  background-position: center center;
  :where(h1,h2,h3,h4,p) { color: var(--blue);}
}

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


/* Team Members */
.teamMemberTDLBlock {
  .teamMemberTDL { display: inline-block; width: 20%; margin-right: 6%; vertical-align: top; margin-bottom: 70px;}
  .teamMemberTDL:nth-of-type(4n+4) { margin-right: 0;}
  .teamMemberTDL .teamMemberTDL_image {}
  .teamMemberTDL .teamMemberTDL_image img { width: 100%; height: auto;}
  .teamMemberTDL h3 { font-size: 20px; margin: 10px 0 5px 0;}
  .teamMemberTDL h4 { font-size: 16px; font-weight: 400; color: var(--brown); margin: 0;}
  .teamMemberTDL h5 { color: rgba(10,15,28, .5); font-weight: 400; font-size: 16px; margin: 0}
  .teamMemberTDL h4, .teamMemberTDLBlock .teamMemberTDL h5 { font-size: 12px;}
  .teamMemberTDL a:link { text-decoration: none;}
}

/* Single Team Member */
.single-team_member {
  article { width: 1080px; margin: 100px auto;}
  img {}
  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;}
  .left-column { width: 30%; display: inline-block; vertical-align: top;}
  .right-column { width: 62%; display: inline-block; padding-left: 7%; vertical-align: top;}
  .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;}
}

/* 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 */
.testimonialRow { height: 420px; margin-top: 100px;}
.tdl-testimonial-container { margin: 70px 0;}
.tdl-testimonial-container .testimonial_content { color: var(--white) !important; padding: 0px 140px; position: relative; font-size: var(--primary-font-size); line-height: 1.6em; text-align: center; }
.tdl-testimonial-container .testimonial_content:before, .tdl-testimonial-container .testimonial_content:after { content: '"';}
.tdl-testimonial-container .testimonialAuthor { margin-top: 20px !important; color: var(--white) !important; text-align: center;}
.tdl-testimonial-container .testimonialAuthor:before { content: ''; width: 20px; height: 1px; background: var(--white); display: inline-block; margin-right: 10px; position: relative; top: -7px;}
.tdl-testimonial-container.carousel .testimonialTDL { display: none;}
.tdl-testimonial-container.carousel .testimonialTDL:first-of-type { display: block;    }

.tdl-testimonial-container.list .testimonialTDL { margin-bottom: 70px; }
.tdl-testimonial-container.list .testimonial_content { font-size: 1em;}

.testimonialRow #dotsNavigation { text-align: center; }
.testimonialRow #dotsNavigation ul { list-style: none; padding-left: 0;}
.testimonialRow #dotsNavigation ul li { display: inline-block; height: 5px; width: 5px; background: var(--white); margin: 0 5px; border-radius: 50%;}
.testimonialRow #dotsNavigation ul li:hover { background: var(--brown);}
.testimonialRow #dotsNavigation ul li.active { background: var(--brown);}
.testimonialRow{height: 420px;}


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

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

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

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

    /* .content-wrapper { padding: 0 var(--default-vc-padding);} */
  }

  &.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);}

        }

        .tdlButtonWrapper { margin-bottom: 0;}
      }
  }

  &.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-vc-padding);
    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 {
  #header { position: relative; background: var(--blue);}
  &.logged-in #header { top: -12px;}
  &.logged-in .featured-image-wrapper { top: -12px; position: relative;}

  .featured-image-wrapper {

    img { width: 100%; height: 500px; aspect-ratio: 16/9; object-fit: cover;}
  }

  article {
    width: var(--content-width); margin: 0 auto;
    &:not(:has(.vc_row)) {padding-bottom: 35px;}

    .vc_row[data-vc-stretch-content="true"] { left: initial !important;}
  }
  h1 { color: var(--blue);}
  h3 { color: var(--blue); }
  h4 { color: var(--blue);}
  .post-header { text-align: center;
    h1 { margin-top: 0;}
    h3 { font-size: var(--primary-font-size); margin-bottom: 0;}
  }
  .post-wrapper { width: var(--content-width); margin: 0 auto; padding: 100px 0;}

  .recent-post-container {
    background: var(--blue);
    color: var(--white);
    padding: 0 calc((100% - var(--content-width)) / 2);

    h2 { color: var(--yellow) !important;}

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

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

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

/* Single Project */
.single-project article { width: var(--content-width); margin: 0 auto; padding-bottom: 70px;}

/* TDL Events Interactive */
.tdlEventBlock.interactive { margin: 100px 0;}
.tdlEventBlock.interactive .tdlEventWrapper { display: flex; flex-direction: row-reverse; gap: 50px;}
.tdlEventBlock.interactive .tdlEventWrapper .preview { flex: 1; display: flex; align-items: end; position: relative}
.tdlEventBlock.interactive .tdlEventWrapper .preview .tdlEvent:not(.active) { display: none;}
.tdlEventBlock.interactive .tdlEventWrapper .preview .tdlEvent .contentWrapper { padding: 50px;}
.tdlEventBlock.interactive .tdlEventWrapper .preview .tdlEvent .contentWrapper h4 { margin-bottom: 0; font-size: 60px; line-height: 1; padding-right: 150px; font-family: var(--primary-font); color: var(--white); text-shadow: 2px 2px 2px var(--black);}
.tdlEventBlock.interactive .tdlEventWrapper .preview .tdlEvent .imageWrapper { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1;}
.tdlEventBlock.interactive .tdlEventWrapper .preview .tdlEvent .imageWrapper img { width: 100%; object-fit: cover; height: 100%;}
.tdlEventBlock.interactive .tdlEventWrapper .preview .tdlEvent .contentWrapper .date { color: var(--white); text-shadow: 2px 2px 2px var(--black);}
.tdlEventBlock.interactive .tdlEventWrapper .sidebar { flex: 0 0 33%;}
.tdlEventBlock.interactive .tdlEventWrapper .sidebar ul { list-style: none; padding-left: 0;}
.tdlEventBlock.interactive .tdlEventWrapper .sidebar ul li { cursor: pointer; padding: 5px; display: flex; flex-direction: row; gap: 20px;}
.tdlEventBlock.interactive .tdlEventWrapper .sidebar ul li:before { content: '\e904'; font-family: 'icomoon'; display: inline-block; font-size: 40px; color: var(--blue);}
.tdlEventBlock.interactive .tdlEventWrapper .sidebar ul li .eventWrapper {}
.tdlEventBlock.interactive .tdlEventWrapper .sidebar ul li .eventWrapper:after { content: ''; display: inline-block; margin-top: 20px; text-align: center; width: 100%; height: 10px; background-repeat: no-repeat; background-position: center center; background-size: 70%;}
.tdlEventBlock.interactive .tdlEventWrapper .sidebar ul li:not(:first-of-type) { }
.tdlEventBlock.interactive .tdlEventWrapper .sidebar ul li:hover:before { color: var(--brown);}
.tdlEventBlock.interactive .tdlEventWrapper .sidebar ul li.active:before { color: var(--brown);}
.tdlEventBlock.interactive .tdlEventWrapper .sidebar ul li h4 { margin: 0;}
.tdlEventBlock.interactive .tdlEventWrapper .sidebar ul li:hover h4 { color: var(--blue);}
.tdlEventBlock.interactive .tdlEventWrapper .sidebar ul li.active h4 { color: var(--blue);}
.tdlEventBlock.interactive .tdlEventWrapper .sidebar ul li .date { font-size: 14px;}
.tdlEventBlock.interactive .tdlEventWrapper .sidebar ul li .content { font-size: 14px;}
.tdlEventBlock.interactive .tdlButton { text-align: center; padding-left: 67px;}

/* TDL Events List */
.tdlEventBlock.list {
  .tdlEventWrapper {
    ul { padding: 0; width: 100%; margin: 0;}
    .tdlEvent { list-style: none; padding: 70px calc((100% - var(--content-width)) / 2);}
    .tdlEvent:last-of-type { padding-bottom: 135px !important;}
    .tdlEvent .eventWrapper { display: flex; flex-direction: row; gap: 35px; justify-content: space-between;}
    .tdlEvent .eventWrapper h4 { color: var(--blue); font-size: 45px; font-family: var(--primary-font); margin: 0; line-height: 1;}
    .tdlEvent:nth-of-type(odd) .eventWrapper h4 { color: var(--brown);}
    .tdlEvent .contentWrapper { flex: 1;}
    .tdlEvent .iconWrapper:before { content: '\e904'; font-family: 'icomoon'; display: inline-block; font-size: 40px; color: var(--blue); position: relative; top: -5px;}
    .tdlEvent:nth-of-type(odd) .iconWrapper:before { color: var(--brown);}
    .tdlEvent .iconWrapper { }
    .tdlEvent .imageWrapper { flex: 0 0 40%; position: relative;}
    .tdlEvent .imageWrapper:before { content: ''; width: 100%; height: 100%; top: 20px; left: -20px; position: absolute; background: var(--green); z-index: 1;}
    .tdlEvent .imageWrapper img { width: 100%; object-fit: cover; height: 100%; position: relative; z-index: 2;}
    .tdlEvent .eventWrapper .date { margin-bottom: 35px;}
    .tdlEvent#event-1 { padding-top: 0;}
  }
}

/* BOD Members */
.tdlBODMember {
  padding-bottom: var(--small-vc-padding);

  .memberContainer { display: flex; flex-direction: row; gap: 20px; margin-bottom: var(--small-vc-padding);}
  h3 { color: var(--blue); margin-bottom: 20px;}
  h4 { margin: 0;}
  a.email { margin: 0; text-decoration: none;}
  a.email:before { content: '\e905'; font-family: 'icomoon';}
  .contentWrapper {}
  .employmentWrapper {}
  .term { margin-top: var(--small-vc-padding);}
}

/* Board Agendas */
.tdlAgendaWrapper {
  .tdlAgenda { text-decoration: none; display: flex; flex-direction: row; }
  .tdlAgenda:before { content: '\e909'; font-family: 'icomoon'; display: inline-block; margin-right: 5px;}
  .tdlAgenda:hover { color: var(--blue);}
}

/* TDL Partner Images */
.tdl-partners {
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 70px; margin-bottom: 70px; justify-content: space-evenly;

  .tdl-partner-item { height: 140px;}
  .tdl-partner-item img { height: 100%; width: auto;}
}

/* Numbered Section List */
.tdlNumberedSectionContainer { margin: 35px 0;}
.tdlNumberedSectionContainer .contentWrapper { counter-reset: number;}
.tdlNumberedSectionContainer .contentWrapper .tdlNumberedtItem { display: flex; flex-direction: row; gap: 50px; justify-content: space-between; margin-bottom: 70px; counter-increment: number; }
.tdlNumberedSectionContainer .contentWrapper .tdlNumberedtItem h3 { margin-top: 0; font-family: var(--primary-font); font-size: 35px;}
.tdlNumberedSectionContainer .contentWrapper .tdlNumberedtItem .description {}
.tdlNumberedSectionContainer .contentWrapper .tdlNumberedtItem .iconWrapper .icon { width: 150px; height: 150px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--brown); font-size: 75px; font-family: var(--primary-font); margin-top: 50px;}
.tdlNumberedSectionContainer .contentWrapper .tdlNumberedtItem .iconWrapper .icon:before{ content: counter(number);}

.tdlNumberedSectionContainer .contentWrapper .tdlNumberedtItem:nth-of-type(4n + 1) .iconWrapper .icon { border: 2px solid var(--blue); color: var(--blue);}
.tdlNumberedSectionContainer .contentWrapper .tdlNumberedtItem:nth-of-type(4n + 1) h3 { color: var(--blue);}
.tdlNumberedSectionContainer .contentWrapper .tdlNumberedtItem:nth-of-type(4n + 2) .iconWrapper .icon { border: 2px solid var(--mustard); color: var(--mustard);}
.tdlNumberedSectionContainer .contentWrapper .tdlNumberedtItem:nth-of-type(4n + 2) h3 { color: var(--mustard);}
.tdlNumberedSectionContainer .contentWrapper .tdlNumberedtItem:nth-of-type(4n + 3) .iconWrapper .icon { border: 2px solid var(--rust); color: var(--rust);}
.tdlNumberedSectionContainer .contentWrapper .tdlNumberedtItem:nth-of-type(4n + 3) h3 { color: var(--rust);}
.tdlNumberedSectionContainer .contentWrapper .tdlNumberedtItem:nth-of-type(4n + 4) .iconWrapper .icon { border: 2px solid var(--green); color: var(--green);}
.tdlNumberedSectionContainer .contentWrapper .tdlNumberedtItem:nth-of-type(4n + 4) h3 { color: var(--green);}

.tdlNumberedSectionContainer.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-vc-padding);

  .tdl-masonry-item {
    img { width: 100%; height: 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;}
    &:nth-of-type(9n + 7) {}
    &:nth-of-type(9n + 8) {}
    &:nth-of-type(9n + 9) {}

  }
}

/* Masonry Captions */
.featherlight-content { position: relative;}
.featherlight-content .caption {
  position: absolute; background: rgba(0,0,0,.5); color: var(--white); bottom: 0; width: calc(100% - 50px); padding: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  &.active { white-space: normal;}
}


/* Counter */
.tdlCounterWrapper {
  * { text-align: center;}
  .count { font-size: 56px;}
  h4 { font-size: 24px; text-transform: uppercase; margin-bottom: 0 !important;}
}

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

  margin-bottom: var(--default-vc-padding);
  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-vc-padding);

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

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

}

/* Case Studies */
.tdlCaseStudyBlock {

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

  .tdlCaseStudyWrapper {

    .case-study-item {

      &:not(:last-of-type) {margin-bottom: var(--default-vc-padding);}
      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) / 2); background: var(--yellow);

  &.background_left {
    flex-direction: row;

    .content_wrapper { padding-right: calc((100vw - var(--content-width) - 10px) / 2); padding-left: 25px; padding-top: 50px; padding-bottom: 50px;}
  }

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

    .content_wrapper { padding-left: calc((100vw - var(--content-width) - 10px) / 2); padding-right: 25px; padding-top: 50px; padding-bottom: 50px;}
  }

  .background_wrapper {
    flex: 0 0 50%;

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

  &.yellow { background: var(--yellow);}
  &.red { background: var(--red);}
  &.black { background: var(--black);}
  &.white { background: var(--white);}
  &.gray { background: var(--gray);}
  &.none { background: none;}

  .content_wrapper {
    display: flex; flex-direction: column; justify-content: center; width: 100%;
    p:empty { display: none;}

    h2 {
      margin-top: 0; margin-bottom: var(--default-vc-padding); color: var(--blue); line-height: 1; font-weight: 800; text-transform: uppercase;

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

    h4 { margin-top: 0; margin-bottom: var(--default-vc-padding); color: var(--blue); line-height: 1; text-transform: uppercase; font-size: 30px; letter-spacing: 4px;}
  }

}

.vc_row:not([data-vc-stretch-content="true"]) .tdl_split_block_container {
  &.background_left .content_wrapper { padding-right: 25px; padding-left: 25px; padding-top: 50px; padding-bottom: 50px;}
  &.background_right .content_wrapper { padding-left: 25px; padding-right: 25px; padding-top: 50px; padding-bottom: 50px;}
}

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

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

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

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

    .content-wrapper {
      p:empty { display: none;}
      h3 { color: var(--blue); margin: var(--header-margins) 0;}
      .content { color: var(--blue);}
    }
  }

  &:not(:has(h3)) .wrapper .icon-wrapper { padding-top: 0;}
  &.tdlNoTopMargin {
    .icon-wrapper { padding-top: 0 !important;}
    .content-wrapper h3 { margin-top: 0 !important;}
  }

}

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

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

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

/* Meetings & Agendas */
.tdl-meetings-agendas {

  h4 { margin-bottom: 0 !important;}
  a {
    display: flex;
    gap: 10px;
    text-decoration: none;

    &:before { content: '\e908'; font-family: 'icomoon';}
    &:hover { color: var(--red);}
  }
}

/* Patient Transport */
.tdl-split-logo {
  margin-bottom: var(--default-vc-padding) ;

  .wrapper {
    display: flex;
    flex-direction: row;
    gap: 100px;
    min-height: 200px;

    .image-wrapper{
      flex: 0 0 33%;
      align-content: center;

      img { width: 100%; object-fit: contain; height: 100%;}
    }
    .content-wrapper {
      flex: 1;
      align-content: center;

      .content {}
    }
  }

}

/* TDL Video Player */
.tdl-video-container {
  margin-bottom: var(--default-vc-padding);
  video { width: 100%; aspect-ratio: 16/9;}
  iframe { width: 100%; aspect-ratio: 16/9;}
}

/* 404 Page */
.error404 {
  #content { background: var(--yellow);}
  article {
    width: var(--content-width);
    margin: 0 auto;
    padding: 60px;

    header {
      width: 100%;
      padding: 0;
      display: block;
      h1 { margin: 0;}
      p { margin-top: 0;}
    }
  }
}