:root {
  --primary: #0e497b;
  --primary-rgb: 14, 73, 123;
  --secondary: #e1c88f;
  --grey: #edf0f3;
  --primary-text: #0e497b;
  --secondary-text: #e1c88f;
}

/* Icon Alter */
div[class*=mode-] .container--icon svg *[fill="#ffb81c"] {
  fill: var(--secondary);
}

div[class*=mode-] .container--icon svg *[stroke="#ffb81c"] {
  stroke: var(--secondary);
}

/* Primary H2 */
body:not([class*=-cc]) a:not([id^=Hero]):not([id^=Sequential]) + div h2.title,
body:not([class*=-cc]) a[id^=Sequential] + div .container--title h2.title {
  font-size: 2.5rem;
  text-transform: uppercase;
  letter-spacing: 0.25rem;
}

body:not([class*=-cc]) a:not([id^=Hero]):not([id^=Sequential]) + div:not([class*=primary]) h2.title,
body:not([class*=-cc]) a[id^=Sequential] + div:not([class*=primary]) .container--title h2.title,
div.mode--primary[class*=Singular-Content-V-H-M-OptCTA] .container--title h2.title,
div.mode--primary[class*=Singular-Content-N-I][class*=-O-] .container--content h2.title,
div.mode--primary[class*=Singular-Content-I-H-M-OptCTA] .container--title h2.title,
div.mode--primary[class*=Singular-Content-Image][class*=-Overlay-] .container--content h2.title,
div.mode--primary[class*=Singular-Content-H-M-OptCTA-I] .container--title h2.title,
div.mode--primary[class*=Singular-Content-B-H-M-OptCTA] .container--title h2.title,
div.mode--primary:has(> .background--media) h2.title {
  color: var(--primary) !important;
}

body:not([class*=-cc]) a:not([id^=Hero]):not([id^=Sequential]) + div h2.title::after,
body:not([class*=-cc]) a[id^=Sequential] + div .container--title h2.title::after {
  display: none;
}

body:not([class*=-cc]) a:not([id^=Hero]):not([id^=Sequential]) + div .text--center h2.title::before,
body:not([class*=-cc]) a[id^=Sequential] + div .text--center .container--title h2.title::before,
div[class*=Sequential-Content-H-M-2Col-OTI] .container--title h2.title.title.title.title::before {
  content: "";
  display: block;
  width: 300px;
  max-width: 90%;
  height: 50px;
  background-image: url("/media/714373/fof-favicon-color.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0 auto 1rem;
}

/* invert (this is necessary because the pseudo-line is dark) */
body:not([class*=-cc]) a:not([id^=Hero]):not([id^=Sequential]) + div.mode--primary:not(div[class*=Singular-Content-V-H-M-OptCTA]):not(div[class*=Singular-Content-N-I][class*=-O-]):not(div[class*=Singular-Content-I-H-M-OptCTA]):not(div[class*=Singular-Content-Image][class*=-Overlay-]):not(div[class*=Singular-Content-H-M-OptCTA-I]):not(div[class*=Singular-Content-B-H-M-OptCTA]):not(:has(> .background--media)) h2.title::before {
  background-image: url("/media/714375/fof-favicon-white.png");
}

@media (max-width: 991px) {
  body:not([class*=-cc]) a:not([id^=Hero]):not([id^=Sequential]) + div h2.title,
  body:not([class*=-cc]) a[id^=Sequential] + div .container--title h2.title {
    font-size: 2.25rem;
  }
}
@media (max-width: 767px) {
  body:not([class*=-cc]) a:not([id^=Hero]):not([id^=Sequential]) + div h2.title,
  body:not([class*=-cc]) a[id^=Sequential] + div .container--title h2.title {
    font-size: 2rem;
  }
}
/* Subtitle */
div[class^=mode--]:not([class*=Hero]) .subtitle {
  display: block;
  margin-top: 0;
  text-transform: uppercase;
  font-weight: bold;
}

/* Primary H3 */
div[class*=Carousel-H-M-4Col-ImageAboveText] span.title.title,
div[class*=Counting-Numbers-H-M-3Col-DataPoints] .title-col.title-col,
div[class*=Insights-H-M] .title-col.title-col,
div[class*=Highlights-H-M-3Col-IconAboveText] .title-col.title-col,
div[class*=Highlights-H-M-3Col-IconAboveText] .text.text,
div[class*=Multi-Item-Content-H-M] .title-col.title-col,
div[class*=Multi-Item-Content-H-M-2Col-Text] .container--content.container--content > h2:first-child,
div[class*=Multi-Item-Content-H-M-2Col-Text] .container--content.container--content > h3:first-child,
div[class*=Multi-Item-Content-H-M-3Col-Text] .container--content.container--content > h2:first-child,
div[class*=Multi-Item-Content-H-M-3Col-Text] .container--content.container--content > h3:first-child,
div[class*=Resources-H-M-2ColGrid-IconTextCTA] .title-col.title-col,
div[class*=Singular-Content-H-M-1Col] .container--content.container--content > h2:first-child,
div[class*=Singular-Content-H-M-1Col] .container--content.container--content > h3:first-child {
  font-size: 1.5em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  letter-spacing: 0.15rem !important;
}

div[class*=Carousel-H-M-4Col-ImageAboveText]:not([class*=primary]) span.title.title,
div[class*=Counting-Numbers-H-M-3Col-DataPoints]:not([class*=primary]) .title-col.title-col,
div[class*=Insights-H-M] .title-col.title-col,
div[class*=Highlights-H-M-3Col-IconAboveText]:not([class*=primary]) .title-col.title-col,
div[class*=Highlights-H-M-3Col-IconAboveText]:not([class*=primary]) .text.text,
div[class*=Multi-Item-Content-H-M]:not([class*=primary]) .title-col.title-col,
div[class*=Multi-Item-Content-H-M-3Col-ImageAboveText] .title-col.title-col,
div[class*=Multi-Item-Content-H-M-2Col-Text]:not([class*=primary]) .container--content.container--content > h2:first-child,
div[class*=Multi-Item-Content-H-M-2Col-Text]:not([class*=primary]) .container--content.container--content > h3:first-child,
div[class*=Multi-Item-Content-H-M-3Col-Text]:not([class*=primary]) .container--content.container--content > h2:first-child,
div[class*=Multi-Item-Content-H-M-3Col-Text]:not([class*=primary]) .container--content.container--content > h3:first-child,
div[class*=Resources-H-M-2ColGrid-IconTextCTA]:not([class*=primary]) .title-col.title-col,
div[class*=Singular-Content-H-M-1Col]:not([class*=primary]) .container--content.container--content > h2:first-child,
div[class*=Singular-Content-H-M-1Col]:not([class*=primary]) .container--content.container--content > h3:first-child {
  color: var(--primary) !important;
}

div[class*=Carousel-H-M-4Col-ImageAboveText] span.title.title::after,
div[class*=Counting-Numbers-H-M-3Col-DataPoints] .title-col.title-col::after,
div[class*=Insights-H-M] .title-col.title-col::after,
div[class*=Highlights-H-M-3Col-IconAboveText] .title-col.title-col::after,
div[class*=Highlights-H-M-3Col-IconAboveText] .text.text::after,
div[class*=Multi-Item-Content-H-M] .title-col.title-col::after,
div[class*=Multi-Item-Content-H-M-2Col-Text] .container--content.container--content > h2:first-child::after,
div[class*=Multi-Item-Content-H-M-2Col-Text] .container--content.container--content > h3:first-child::after,
div[class*=Multi-Item-Content-H-M-3Col-Text] .container--content.container--content > h2:first-child::after,
div[class*=Multi-Item-Content-H-M-3Col-Text] .container--content.container--content > h3:first-child::after,
div[class*=Resources-H-M-2ColGrid-IconTextCTA] .title-col.title-col::after,
div[class*=Singular-Content-H-M-1Col] .container--content.container--content > h2:first-child::after,
div[class*=Singular-Content-H-M-1Col] .container--content.container--content > h3:first-child::after {
  background: var(--secondary) !important;
  height: 3px !important;
  width: 160px !important;
}

@media (max-width: 767px) {
  div[class*=Carousel-H-M-4Col-ImageAboveText] span.title.title,
  div[class*=Counting-Numbers-H-M-3Col-DataPoints] .title-col.title-col,
  div[class*=Insights-H-M] .title-col.title-col,
  div[class*=Highlights-H-M-3Col-IconAboveText] .title-col.title-col,
  div[class*=Highlights-H-M-3Col-IconAboveText] .text.text,
  div[class*=Multi-Item-Content-H-M] .title-col.title-col,
  div[class*=Multi-Item-Content-H-M-2Col-Text] .container--content.container--content > h2:first-child,
  div[class*=Multi-Item-Content-H-M-2Col-Text] .container--content.container--content > h3:first-child,
  div[class*=Multi-Item-Content-H-M-3Col-Text] .container--content.container--content > h2:first-child,
  div[class*=Multi-Item-Content-H-M-3Col-Text] .container--content.container--content > h3:first-child,
  div[class*=Resources-H-M-2ColGrid-IconTextCTA] .title-col.title-col,
  div[class*=Singular-Content-H-M-1Col] .container--content.container--content > h2:first-child,
  div[class*=Singular-Content-H-M-1Col] .container--content.container--content > h3:first-child {
    font-size: 1.25em !important;
  }
}
div[class*=Hero-Banners] .social-icon-list {
  display: none;
}

/* Hero Banner 3/8 - Gradient - Center */
/* pseudo-line */
div[class*=Hero-Banners-FullWidthBanner-TextLeftBg] .container--hero hgroup::after,
div[class*=Hero-Banners-WHB-V-T-OptCTA-NO-Overlay] .container--hero hgroup::after {
  content: "";
  display: block;
  width: 500px;
  max-width: 80%;
  height: 2px;
  margin: 15px 0;
  background: var(--secondary);
}

div[class*=Hero-Banners-FullWidthBanner-TextLeftBg] .container--hero.align--center hgroup::after,
div[class*=Hero-Banners-WHB-V-T-OptCTA-NO-Overlay] .container--hero.align--center hgroup::after {
  margin: 15px auto;
}

div[class*=Hero-Banners-FullWidthBanner-TextLeftBg] .container--hero.hero--not-slider.hero--banner > .container .hero-content {
  align-items: flex-end;
}

/* Singular Content 8/10 [Services for Businesses] */
div[class*=Singular-Content-Image][class*=Overlay] .section--textBanner-cta-2col-overlay:not(.section--textBanner-cta-2col-img-tall) {
  position: relative;
}

div[class*=Singular-Content-Image][class*=Overlay] .section--textBanner-cta-2col-overlay:not(.section--textBanner-cta-2col-img-tall) .container--media {
  z-index: 10;
}

div[class*=Singular-Content-Image][class*=Overlay] .section--textBanner-cta-2col-overlay .container--content {
  box-shadow: 0 0 100px rgba(0, 0, 0, 0.1) !important;
}

@media only screen and (min-width: 769px) {
  div[class*=Singular-Content-Image][class*=Overlay] .section--textBanner-cta-2col-overlay:not(.section--textBanner-cta-2col-img-tall)::before {
    content: "";
    display: block;
    position: absolute;
    left: -4px;
    top: 50%;
    transform: translateY(-50%);
    height: 85%;
    width: 60%;
    z-index: 1;
    border: 4px solid var(--primary);
  }
  div[class*=Singular-Content-Image][class*=Overlay].mode--primary .section--textBanner-cta-2col-overlay:not(.section--textBanner-cta-2col-img-tall)::before {
    border-color: var(--secondary);
  }
  div[class*=Singular-Content-Image][class*=Overlay].column-reverse .section--textBanner-cta-2col-overlay:not(.section--textBanner-cta-2col-img-tall)::before {
    left: initial;
    right: -4px;
  }
  div[class*=Singular-Content-Image][class*=Overlay] .container--content {
    padding: 80px;
    transform: translateX(-100px);
    width: calc(100% + 100px);
    max-width: calc(100% + 100px);
    position: relative;
    z-index: 101;
    display: flex;
    justify-content: center;
    flex-flow: column wrap;
  }
  div[class*=Singular-Content-Image][class*=Overlay].column-reverse .container--content {
    transform: translateX(100px);
  }
}
@media only screen and (max-width: 768px) {
  div[class*=Singular-Content-Image][class*=Overlay] .container--content {
    border: 2px solid var(--primary);
  }
  div[class*=Singular-Content-Image][class*=Overlay].mode--primary .container--content {
    border-color: var(--secondary);
  }
}
/* Singular Content 11 (Primary excluded) [About Our Firm] */
div[class*=Singular-Content-I-H-M-OptCTA] .container--title.container--title.container--title.container--title {
  background: rgba(255, 255, 255, 0.85);
  padding: 2rem;
  position: relative;
  margin-top: -150px;
  z-index: 101;
  max-width: 90%;
  border-bottom: 4px solid var(--primary);
}

/* Videos 3 [Home] */
div[class*=Singular-Content-V-H-M-OptCTA] .container--media {
  position: relative;
  overflow: visible;
}

div[class*=Singular-Content-V-H-M-OptCTA] .container--video {
  position: relative;
  z-index: 10;
}

div[class*=Singular-Content-V-H-M-OptCTA] .container--media::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 22.5%;
  transform: translate(-50%, 0);
  height: 90%;
  width: 110%;
  z-index: 1;
  border: 2px solid var(--primary);
}

div[class*=Singular-Content-V-H-M-OptCTA].mode--primary .container--media::before {
  border-color: var(--secondary);
}

/* Videos 4 [Services for Retirees] */
.section--video-library .container--col {
  position: relative;
}

.section--video-library .container--col .container--video {
  position: relative;
  z-index: 10;
}

.section--video-library .container--col::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 5rem;
  transform: translate(-50%, 0);
  height: calc(100% - 5rem);
  width: 110%;
  z-index: 1;
  border: 2px solid var(--primary);
}

.mode--primary .section--video-library .container--col::before {
  border-color: var(--secondary);
}