/* ------ Color Variables ------- */
:root { 
  --colorPrimary: 0,179,239;
  --colorSecondary: 1,85,165;
  --colorTertiary: 76,36,147;
  --colorAncillary: 214,88,4;
  --colorBlack: 68,68,68;
  --colorDkGray: 52,58,64;
  --colorLtGray: 239,244,249;
  --colorLtBlue: 244,249,254;
  --alpha: .6;
  --primaryFont: 'Montserrat', sans-serif;
  --secondaryFont: 'Open Sans', sans-serif;
  /* Layout widths: the header prints the Branding tab's values over these */
  --widthDefault: 1640px;
  --widthWide: 1555px;
  --widthNarrow: 1240px;
  --widthTitle: 1170px;
}

/* ------- Container widths ------- */
/* Each container type reads its layout width. From 1200px it's that width (or the screen, if narrower);
   below 1200px Bootstrap's caps for the screen size also apply (540 / 720 / 960px), as the columns stack there. */
.container          { --containerWidth: var(--widthWide); max-width: var(--containerWidth); }
.container-wide     { --containerWidth: var(--widthDefault); }
.container-narrow   { --containerWidth: var(--widthNarrow); }
.container-standard { --containerWidth: var(--widthTitle); }
@media (min-width: 576px)  { .container { max-width: min(540px, var(--containerWidth)); } }
@media (min-width: 768px)  { .container { max-width: min(720px, var(--containerWidth)); } }
@media (min-width: 992px)  { .container { max-width: min(960px, var(--containerWidth)); } }
@media (min-width: 1200px) { .container { max-width: var(--containerWidth); } }

.bg-primary     { background-color: rgb(var(--colorPrimary))!important; }
.bg-secondary   { background-color: rgb(var(--colorSecondary))!important; }
.bg-tertiary    { background-color: rgb(var(--colorTertiary))!important; }
.bg-ancillary, 
.bg-accent      { background-color: rgb(var(--colorAncillary))!important; }
.bg-black       { background-color: rgb(var(--colorBlack))!important; }
.bg-dkgray      { background-color: rgb(var(--colorDkGray))!important; }
.bg-ltgray      { background-color: rgb(var(--colorLtGray))!important; }
.bg-ltblue      { background-color: rgb(var(--colorLtBlue))!important; }
.bg-transparnt  { background-color: rgba(0,0,0,0); }
.bg-repeat      { background: url('./img/repeating-bg.png') repeat top rgba(255,255,255,.3); background-blend-mode: screen; }

.text-primary   { color: rgb(var(--colorPrimary))!important; }
.text-secondary { color: rgb(var(--colorSecondary))!important; }
.text-tertiary  { color: rgb(var(--colorTertiary))!important; }
.text-ancillary { color: rgb(var(--colorAncillary))!important; }
.text-black     { color: rgb(var(--colorBlack))!important; }
.text-dkgray    { color: rgb(var(--colorDkGray))!important; }
.text-ltgray    { color: rgb(var(--colorLtGray))!important; }
.text-ltblue    { color: rgb(var(--colorLtBlue))!important; }
.text-muted     { color: inherit!important; opacity: .5; }

.fill-primary, .bg-primary .section-transition      { fill: rgb(var(--colorPrimary))!important; }
.fill-secondary, .bg-secondary .section-transition  { fill: rgb(var(--colorSecondary))!important; }
.fill-tertiary, .bg-tertiary .section-transition    { fill: rgb(var(--colorTertiary))!important; }
.fill-ancillary, .bg-ancillary .section-transition  { fill: rgb(var(--colorAncillary))!important; }
.fill-ltgray, .bg-ltgray .section-transition        { fill: rgb(var(--colorLtBlue))!important; }
.fill-ltblue, .bg-ltblue .section-transition        { fill: rgb(var(--colorLtBlue))!important; }
.fill-white, .bg-white .section-transition          { fill: #FFF!important; }

.font-primary     { font-family: var(--primaryFont)!important; }
.font-secondary   { font-family: var(--secondaryFont)!important; }

/* ------ Basic Styling ------- */
* 				      { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* outline: 1px solid red;*/ }
html, body  	  { background: #FFF; margin: 0; padding: 0; position: relative; }
body       		  { background: #FFF; color: rgb(var(--colorDkGray)); font-family: var(--secondaryFont); font-weight: 400; font-size: 16px; line-height: 1.5; min-height: 100vh; counter-reset: section; }                

.hide-text      { text-indent: 100%; white-space: nowrap; overflow: hidden; }
.caps,
.uppercase      { text-transform: uppercase; }
.capitalize,
.captialize     { text-transform: capitalize; }  /* .captialize: the original misspelling, kept for page HTML that uses it */
.lowercase      { text-transform: lowercase; }

a    				    { color: rgb(var(--colorPrimary)); cursor: pointer; text-decoration: none !important; }
a:hover,
a:active 		    { color: rgb(var(--colorSecondary)); cursor: pointer; text-decoration: none !important; }

textarea:focus,
input:focus     { outline: none; }

h1, h2, h3,
h4, h5, h6      { color: rgb(var(--colorPrimary)); font-family: var(--primaryFont); font-style: normal; font-weight: 800; line-height: 1.2; text-align: center; }
#single-post-content h2,
#single-post-content h3,
#single-post-content h4,
#single-post-content h5,
#single-post-content h6  { color: rgb(var(--colorPrimary)); text-align: left; }
h1              { font-size: 25px; }
h2              { font-size: 23px; }
h3              { font-size: 20px; }
h4              { font-size: 18px; }
h5              { font-size: 16px; }
h6              { font-size: 16px; }
.h1-style       { font-size: 25px !important; }
.h2-style       { font-size: 23px !important; }
.h3-style       { font-size: 20px !important; }
.h4-style       { font-size: 18px !important; }
.h5-style       { font-size: 16px !important; }
.h6-style       { font-size: 15px !important; }
p               { font-size: 15px; margin-bottom: 1.250rem; }
.hp-lead        { font-weight: 600; }

h1.smaller      { font-size: 23px; }
h2.huge         { font-size: 40px }

.normal          { font-weight: 400; }
.bold, b, strong { font-weight: 700; }
.bolder          { font-weight: 800; }

.sup             { vertical-align: top; }

.min-vh-100      { min-height: 100vh; }
.lh-1            { line-height: .8 }

/* ------ Bootstrap Overrides ------- */
.close          { color: #000; font-size: 2.5rem; font-weight: 700; }
.close:active,
.close:focus    { outline: none; }

.shadow-none    { box-shadow: none!important; }
.shadow-sm-blue { box-shadow: 5px 5px 0 rgba(32,13,152,.17)!important; }
.shadow-blue    { box-shadow: 10px 10px 0 rgba(32,13,152,.17)!important; }
.shadow-black   { box-shadow: 10px 10px 0 rgba(0,0,0,.16)!important; }

.border-lg      { border: 2px solid rgb(var(--colorPrimary)); }
.border-primary { border: 2px solid; border-color:  rgb(var(--colorPrimary))!important; }
.border-secondary { border: 2px solid; border-color:  rgb(var(--colorSecondary))!important; }
.border-tertiary  { border: 2px solid; border-color: rgb(var(--colorTertiary))!important; }
.border-white   { border: 2px solid #FFF; }
.border-top     { border-top: 2px solid #FFF!important; }
.rounded        { border-radius: 27px!important; }
.rounded-sm     { border-radius: 10px!important; }
.rounded-bottom { border-top-left-radius: 0!important; border-top-right-radius: 0!important; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
.rounded-top    { border-top-left-radius: inherit; border-top-right-radius: inherit; border-bottom-left-radius: 0!important; border-bottom-right-radius: 0!important; }
.rounded-left   { border-top-left-radius: inherit; border-top-right-radius: 0!important; border-bottom-left-radius: inherit; border-bottom-right-radius: 0!important; }
.rounded-right  { border-top-left-radius: 0!important; border-top-right-radius: inherit; border-bottom-left-radius: 0!important; border-bottom-right-radius: inherit; }

.flex-fill      { flex:1 1 auto; }

.btn            { font-size: 20px; font-weight: 600; }
/* Bootstrap's .btn-sm / .btn-lg keep their own padding */
.btn:not(.btn-sm):not(.btn-lg) { padding: .75rem 2.5rem; }
.btn-huge       { font-size: 22px; line-height: 1.25; }
.btn-lg         { font-size: 12px; height: 73px; }
.btn-icon-wrapper { margin-right: 10px; width: 70px; }
.btn-white      { background: #FFF; }
/* {phone_link} inside a .btn: use the button's text colour and make the whole button dial */
.btn .phone-link, .btn .phone-link:hover, .btn .phone-link:focus { color: inherit; }
.btn:has(.phone-link) { position: relative; }
.btn .phone-link::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
/* Phone icon before a button's text, in the text colour: <a class="btn btn-primary btn-phone" href="{phone_tel}">{phone}</a> */
.btn-phone { display: inline-flex; align-items: center; justify-content: center; }
.btn-phone::before { content: ""; flex-shrink: 0; width: 1em; height: 1em; margin-right: .6em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M497.4 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.7 370.7 0 0 1 130.6 204.1l60.6-49.6a23.9 23.9 0 0 0 6.9-28l-48-112A24.2 24.2 0 0 0 122.6.6l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.3 24.3 0 0 0-14-27.6z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M497.4 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.7 370.7 0 0 1 130.6 204.1l60.6-49.6a23.9 23.9 0 0 0 6.9-28l-48-112A24.2 24.2 0 0 0 122.6.6l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.3 24.3 0 0 0-14-27.6z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* A full-width button (.btn-block) stays full width */
.btn-phone.btn-block { display: flex; }

/* {highlight circle_color="…"}word{/highlight}: a hand-drawn circle around the word (inc/settings.php). It draws on load;
   js/custom.js then fades it out and redraws it every 5 seconds (.highlight-off). Behind the text, never over it. */
.highlight { position: relative; display: inline-block; isolation: isolate; }
.highlight-mark { position: absolute; top: 50%; left: 50%; z-index: -1; width: calc(100% + 20px); height: calc(100% + 20px); transform: translate(-50%, -50%); overflow: visible; pointer-events: none; }
.highlight-mark path { fill: none; stroke: var(--highlight-color, rgb(var(--colorAncillary))); stroke-width: 12px; stroke-dasharray: 1500 1500; animation: highlight-draw 1.2s forwards; }
.highlight-off .highlight-mark path { animation: highlight-hide .4s forwards; }
@keyframes highlight-draw { from { stroke-dasharray: 0 1500; } to { stroke-dasharray: 1500 1500; } }
@keyframes highlight-hide { from { opacity: 1; } to { opacity: 0; filter: blur(10px); } }
@media (prefers-reduced-motion: reduce) { .highlight-mark path, .highlight-off .highlight-mark path { animation: none; } }

/* {br_md}: a line break from that screen size up; {br_md_down}: only below it. sm 576px, md 768px, lg 992px, xl 1200px */
br.br-sm, br.br-md, br.br-lg, br.br-xl { display: none; }
@media (min-width: 576px)  { br.br-sm { display: inline; } br.br-sm-down { display: none; } }
@media (min-width: 768px)  { br.br-md { display: inline; } br.br-md-down { display: none; } }
@media (min-width: 992px)  { br.br-lg { display: inline; } br.br-lg-down { display: none; } }
@media (min-width: 1200px) { br.br-xl { display: inline; } br.br-xl-down { display: none; } }
button:focus    { outline: 0; }
#downarrow      { width: 15px; }

a { cursor: pointer; text-decoration: none; transition: all 0.3s ease; }
a:hover { text-decoration: none; }
a.hover-primary:hover, button.hover-primary:hover { color: rgb(var(--colorPrimary))!important; }
a.hover-secondary:hover, button.hover-secondary:hover { color: rgb(var(--colorSecondary))!important; }
a.hover-tertiary:hover, button.hover-tertiary:hover { color: rgb(var(--colorTertiary))!important; }
a svg g { transition: all 0.3s ease; }
a:hover svg g { opacity: 1; transition: all 0.3s ease; }

a.bg-secondary:focus, a.bg-secondary:hover, button.bg-secondary:focus, button.bg-secondary:hover { background-color: rgb(var(--colorSecondary))!important; }
a.text-secondary:focus, a.text-secondary:hover { color: rgb(var(--colorSecondary))!important; }

.hover-up { transition: .3s ease all; }
.hover-up:hover { -webkit-transform: translateY(-20px); transform: translateY(-20px); transition: .3s ease all; }
#saving-steps .hover-up, #additional-features .hover-up, .icon-row .hover-up { min-height: 130px; }

ul.two-column { column-count: 2; -moz-column-count: 2; -webkit-column-count: 2; column-gap: 40px; -moz-column-gap: 40px; -webkit-column-gap: 40px; }
ul.three-column { column-count: 3; -moz-column-count: 3; -webkit-column-count: 3; column-gap: 40px; -moz-column-gap: 40px; -webkit-column-gap: 40px; }
ul.four-column { column-count: 4; -moz-column-count: 4; -webkit-column-count: 4; column-gap: 40px; -moz-column-gap: 40px; -webkit-column-gap: 40px; }
ul.five-column { column-count: 5; -moz-column-count: 5; -webkit-column-count: 5; column-gap: 40px; -moz-column-gap: 40px; -webkit-column-gap: 40px; }

/* ------- Icon Styling ------- */
.svg-wrapper { width: 60px; }
#partners svg { max-height: 50px; }

/* ------- Header / Navigation ------- */
#header { transition: all .5s ease; top: 0; }
#header.hide-nav { opacity: 0; top: -90px; }
/* Bootstrap drops the nav container's padding below 992px; keep it so the logo lines up with the content below */
#header > .container, #header > .container-fluid { padding-left: 15px; padding-right: 15px; }
.header-phone   { display: none; }  /* shown by themes that want a phone button beside the menu */
#logo { max-width: 200px; width: 100%; }
#logo img { max-height: 75px; width: auto; }
#logo svg { max-height: 75px; width: 100%; height: auto; }
.navbar { box-shadow: 0px 3px 5px rgba(0,0,0,0.1); }
.navbar-collapse { font-size: 24px; text-align: right; }
.navbar-expand-lg .navbar-nav .nav-link { color: rgb(var(--colorPrimary )); font-weight: bold; }
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover { color: rgb(var(--colorSecondary )); }
.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link { color: rgb(var(--colorSecondary )); }
/* Below 992px the menu button sits on the logo's row, centred with it, and the open menu wraps onto its own row
   underneath, so the button doesn't move when it opens. The negative margin lines the icon up with the content edge. */
.navbar-dark .navbar-toggler { border: none; outline: none; margin-right: -.75rem; }
@media (max-width: 991.98px) {
  #header .navbar-toggler { order: 1; }
  #navbar-collapse-header { order: 2; }
}
.navbar-toggler-icon { height: 18px; width: 25px; }
/* The three lines are a mask over the background colour, which the Branding tab's menu button colour can change (inc/header.php) */
.navbar-dark .navbar-toggler-icon { background: #00b0ef; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30.307' height='22.863'%3E%3Cdefs%3E%3Cstyle%3E .menu-1%7Bfill:none; stroke:%23000; stroke-linecap:round; stroke-width:5px%7D %3C/style%3E%3C/defs%3E%3Cg id='Group_3' data-name='Group 3' transform='translate(2.5 2.5)'%3E%3Cpath id='Line_1' data-name='Line 1' class='menu-1' d='M0 0h25.307'/%3E%3Cpath id='Line_2' data-name='Line 2' class='menu-1' transform='translate(0 8.932)' d='M0 0h25.307'/%3E%3Cpath id='Line_3' data-name='Line 3' class='menu-1' transform='translate(0 17.863)' d='M0 0h25.307'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30.307' height='22.863'%3E%3Cdefs%3E%3Cstyle%3E .menu-1%7Bfill:none; stroke:%23000; stroke-linecap:round; stroke-width:5px%7D %3C/style%3E%3C/defs%3E%3Cg id='Group_3' data-name='Group 3' transform='translate(2.5 2.5)'%3E%3Cpath id='Line_1' data-name='Line 1' class='menu-1' d='M0 0h25.307'/%3E%3Cpath id='Line_2' data-name='Line 2' class='menu-1' transform='translate(0 8.932)' d='M0 0h25.307'/%3E%3Cpath id='Line_3' data-name='Line 3' class='menu-1' transform='translate(0 17.863)' d='M0 0h25.307'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.dropdown-menu { background: none; border: none; text-align: right; }
.dropdown-item { color: #FFF; padding-right: 0; }

/* Menu dropdowns (sub-items). Mobile: listed under their link inside the open menu */
#menu-primary-menu .dropdown-menu { padding: 0 0 .5rem; margin: 0; }
#menu-primary-menu .dropdown-item { color: rgb(var(--colorPrimary)); font-size: 18px; white-space: normal; }
#menu-primary-menu .dropdown-item:hover, #menu-primary-menu .dropdown-item:focus { background: none; color: rgb(var(--colorSecondary)); }
#menu-primary-menu .dropdown-toggle::after { transition: transform .2s ease; }
#menu-primary-menu .show > .dropdown-toggle::after { transform: rotate(180deg); }

.nav-link img { transition: all .3s ease; }

#hero { background: url('./img/hp-bg-mobile.jpg') no-repeat center; background-size: cover; min-height: 100vh; }
#hero-short { padding: 5% 0; }
.provider-search { display: none; }
.home-top-spacer { height: 90px; }  /* clears the fixed header when the hero isn't the first homepage section */
/* Full-width band below a page (Pages tab); brand-colour backgrounds use white text */
.page-band.band-dark, .page-band.band-dark h1, .page-band.band-dark h2, .page-band.band-dark h3,
.page-band.band-dark h4, .page-band.band-dark h5, .page-band.band-dark h6, .page-band.band-dark p,
.page-band.band-dark a:not(.btn) { color: #fff; }
/* Accordions (e.g. FAQs): chevron on each question, down when closed, up when open.
   Bootstrap toggles .collapsed on the button, so no extra markup or JavaScript is needed. */
.accordion [data-toggle="collapse"] { position: relative; padding-right: 3rem !important; }
.accordion [data-toggle="collapse"]::after {
  content: "";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  width: .6rem;
  height: .6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(-135deg);
  transition: transform .2s ease;
}
.accordion [data-toggle="collapse"].collapsed::after { transform: translateY(-75%) rotate(45deg); }
#hero-short h1 { text-shadow: 2px 2px 6px rgba(255,255,255,0.8); }
.scroll-more { bottom: 85px; }

/* ------- Backgrounds ------- */
.bg-featured { background-size: cover; background-position: center; }
.section-transition { left: 0; position: absolute; top: 0; }
/* Full-width sections (Homepage and Pages tabs): the container has no side padding, so a row directly inside it
   drops its negative margins instead of sticking out past the screen. Columns keep their padding for text. */
.container-full > .row { margin-left: 0; margin-right: 0; }
/* Section spacing "Extra large" (Bootstrap's scale stops at 5 = 3rem) */
.pt-6 { padding-top: 5rem !important; }
.pb-6 { padding-bottom: 5rem !important; }
/* Page band spacing "None": also drop the edge margin of the content (e.g. a closing <p>'s 1rem), or the gap stays */
.page-band > .pt-0 > :first-child { margin-top: 0 !important; }
.page-band > .pb-0 > :last-child { margin-bottom: 0 !important; }
/* Section waves (Branding tab): body.waves-show/-hide override the theme's choice */
body.waves-hide .section-transition { display: none; }
body.waves-show .section-transition { display: block; }

/* ------- Content Styling ------- */
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(var(--colorPrimary),.15); }
.mark-wrapper { width: 30px; }

/* ------- Form Styling ------ */
input.form-control, textarea.form-control { border: none; border-bottom: 2px solid rgba(var(--colorPrimary)); border-radius: 0; }
/* Forms built in /admin: labelled fields, and a tinted box around each repeating-group copy */
.site-form label, .site-form legend { font-weight: 600; }
.site-form .form-check-label, .site-form .custom-control-label { font-weight: 400; }
.site-form .form-repeat-item { background: rgba(var(--colorPrimary), .05); }
/* Price Your Meds widget ({widget:med-prices}): search box with a suggestion list, then a price table */
.med-prices { max-width: 40rem; margin: 0 auto; }
.med-prices label { font-weight: 600; }
.med-prices-list { position: absolute; z-index: 20; left: 0; right: 0; max-height: 18rem; overflow-y: auto; margin: 0; background: #fff; border: 1px solid rgba(0,0,0,.15); border-top: 0; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); }
.med-prices-list li { padding: .5rem .75rem; cursor: pointer; }
.med-prices-list li.active, .med-prices-list li:hover { background: rgba(var(--colorPrimary), .1); }
.med-prices-result th { font-weight: 600; width: 50%; }
.btn-submit {
  background: rgb(var(--colorSecondary ));
  color: #FFF;
  display: inline-block;
  font-family: var(--primaryFont);
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.75em 3em;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

/* ------- Footer Styling ------- */
#footer p { color: rgba(255,255,255,var(--alpha)); font-size: 13px; }

/* ------- Tables in page content: scroll sideways inside themselves on phones instead of widening the page ------- */
@media (max-width: 767.98px) {
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ------- Contact bar (Contact tab): fixed along the bottom ------- */
body.has-contact-bar { padding-bottom: 56px; }
#contact-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020; box-shadow: 0 -3px 8px rgba(0,0,0,.1); }
#contact-bar .contact-bar-inner { min-height: 56px; color: rgb(var(--colorSecondary)); font-size: 18px; font-weight: 600; }
#contact-bar .contact-bar-phone { color: inherit; }
#contact-bar svg { width: 1em; height: 1em; fill: currentColor; margin-right: .5rem; vertical-align: -.125em; }
#contact-bar .contact-bar-call { display: block; padding: 1rem; font-size: 18px; font-weight: 600; text-align: center; line-height: 24px; }
#contact-bar .contact-bar-call:hover { text-decoration: none; }
#callModal .modal-content { background: url(././img/bg-modal.jpg) no-repeat scroll top center rgb(0,0,0,0); background-size: cover; }
#callModal .xmark-1, #callModal .xmark-2 { stroke: rgb(var(--colorSecondary)); stroke-width: 3px; }
#formModal .modal-content { background: url(././img/bg-modal-form.jpg) no-repeat scroll top center rgb(0,0,0,0); background-size: cover; }
#formModal .xmark-1, #formModal .xmark-2 { stroke: rgb(var(--colorSecondary)); stroke-width: 3px; }
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  #callModal.modal, #formModal.modal {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.6);
  }
}

/* ------- Small devices ------- */
@media (min-width: 576px) {}

/* ------- Medium devices ------- */
@media (min-width: 768px) {
  #logo { max-width: 300px; }
  #partners svg { max-height: 100px; }
  .hp-headline { font-size: 60px; }
  .hp-lead { font-size: 23px; padding: 0 1rem; }
}

/* ------- Large devices ------- */
@media (min-width: 992px) {
  body            { line-height: 1.75; }
  h1              { font-size: 55px; }
  h2              { font-size: 37px; }
  h3              { font-size: 30px; }
  h4              { font-size: 27px; }
  h5              { font-size: 24px; }
  h6              { font-size: 22px; }
  .h1-style       { font-size: 55px !important; }
  .h2-style       { font-size: 50px !important; }
  .h3-style       { font-size: 30px !important; }
  .h4-style       { font-size: 27px !important; }
  .h5-style       { font-size: 24px !important; }
  .h6-style       { font-size: 22px !important; }
  p               { font-size: 20px; margin-bottom: 1.250rem; }
  p.content       { font-size: 16px; margin-bottom: 1.20rem; }
  .small          { font-size: 15px; }
  
  strong.large    { font-size: 20px; }
  .btn-huge { font-size: 30px; }

  #hero { background-position: top; }

  .navbar-expand-lg .navbar-nav .nav-link { font-size: 20px; padding: 1rem 0; }
  .navbar-expand-lg .navbar-nav .nav-item { padding-left: 16px; padding-right: 16px; }
  .navbar-expand-lg .navbar-nav .nav-item:first-of-type { padding-left: 0; }
  .navbar-expand-lg .navbar-nav .nav-item:last-of-type { padding-right: 0; }
  .dropdown-item { color: rgb(var(--colorSecondary)); padding-right: inherit; }
  .dropdown-item.active, .dropdown-item:active { background-color: rgb(var(--colorPrimary)); }
  .navbar-expand-lg .navbar-nav .dropdown-menu { left: -70px; margin-top:0; padding: 30px 0 20px; }
  .navbar-expand-lg .navbar-nav .search-icon { width: 20px; }
  .dropdown-toggle::after { display: none; }
  
  .dropdown-menu { background: #FFF; border-top-left-radius: 0!important; border-top-right-radius: 0!important; border-bottom-left-radius: 27px; border-bottom-right-radius: 27px; display: none; text-align: left; }
  .dropdown-menu:before { border-bottom: 20px solid #FFF; border-left: 20px solid transparent; border-right: 20px solid transparent; content: ''; height: 0; left: 97px; position: absolute; top: -20px; width: 0; }
  .dropdown:hover>.dropdown-menu { display: block; }
  .dropdown-item { color: rgb(var(--colorSecondary)); }
  .navbar-expand-lg .navbar-nav .nav-item ul .nav-item { padding-bottom: 10px; padding-left: 46px; padding-right: 46px; padding-top: 10px; font-size: 20px; }

  /* Menu dropdowns: open on hover or click, centred under their link */
  #menu-primary-menu .dropdown-toggle::after { display: inline-block; margin-left: .35em; vertical-align: .2em; }
  #menu-primary-menu .dropdown-menu { left: 50%; transform: translateX(-50%); min-width: 220px; padding: .75rem 0; border-radius: 0 0 16px 16px; box-shadow: 0 6px 12px rgba(0,0,0,.1); }
  #menu-primary-menu .dropdown-menu:before { display: none; }
  #menu-primary-menu .nav-item:last-child .dropdown-menu { left: auto; right: 0; transform: none; }
  #menu-primary-menu .dropdown-item { font-size: 16px; padding: .5rem 1.5rem; white-space: nowrap; }
  #menu-primary-menu .dropdown-item:hover, #menu-primary-menu .dropdown-item:focus { background: rgba(var(--colorPrimary), .08); }

  #footer p.about-copy { font-size: 15px; }

  .modal-dialog { max-width: 778px; margin: 1.75rem auto; }
}

/* ------ Extra large ------- */
@media (min-width: 1200px) {
  #hero { background: url('./img/hp-bg4.jpg') no-repeat 30% top; background-size: cover; min-height: 100vh; }
  h1              { font-size: 45px; }
  h2              { font-size: 35px; }
  h3              { font-size: 30px; }
  h4              { font-size: 27px; }
  h5              { font-size: 24px; }
  h6              { font-size: 22px; }
  .h1-style       { font-size: 50px !important; }
  .h2-style       { font-size: 46px !important; }
  .h3-style       { font-size: 30px !important; }
  .h4-style       { font-size: 27px !important; }
  .h5-style       { font-size: 24px !important; }
  .h6-style       { font-size: 22px !important; }

  .navbar-expand-lg .navbar-nav .nav-link { font-size: 16px; }
  .navbar-expand-lg .navbar-nav .nav-item { padding-left: 16px; padding-right: 16px; }

  .hp-headline { font-size: 47px; }
  .hp-lead { font-size: 20px; padding: 0 1rem; }
  
}
/* ------ Extra large ------- */
@media (min-width: 1700px) {
  #hero { background-position: left top; }
  .d-xxl-none     { display: none; }
  .d-xxl-block    { display: block!important; }
  h1              { font-size: 55px; }
  h2              { font-size: 35px; }
  h3              { font-size: 30px; }
  h4              { font-size: 27px; }
  h5              { font-size: 24px; }
  h6              { font-size: 22px; }
  .h1-style       { font-size: 55px !important; }
  .h2-style       { font-size: 50px !important; }
  .h3-style       { font-size: 30px !important; }
  .h4-style       { font-size: 27px !important; }
  .h5-style       { font-size: 24px !important; }
  .h6-style       { font-size: 22px !important; }

  .btn-huge       { font-size: 35px; }

  .hp-headline { font-size: 60px; }
  .hp-lead { font-size: 23px; padding: 0 1rem; }
}
/* ------- Button shape (Branding tab): body.buttons-* outranks the themes' .theme-x .btn corners ------- */
body.buttons-square .btn { border-radius: 0; }
body.buttons-rounded .btn { border-radius: .375rem; }
body.buttons-pill .btn { border-radius: 50rem; }

/* ------- Header button (Branding tab): after the menu links; the last menu item on phones ------- */
#header .header-button { color: #fff; background-color: rgb(var(--colorPrimary)); border-color: rgb(var(--colorPrimary)); font-size: 15px; font-weight: 600; padding: .5rem 1rem; white-space: nowrap; }
#header .header-button:hover, #header .header-button:focus { color: #fff; filter: brightness(.92); }
#header > .container-fluid > .header-button, #header > .container > .header-button { margin-left: auto; }
.header-button-item { padding: .5rem 0 1rem; }
@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .header-button-item { display: flex; align-items: center; padding: 0 0 0 1.5rem; }
}

/* ------- Homepage hero options (Homepage tab). body outranks the themes' #hero rules ------- */
body #hero .hp-headline.hp-headline-as-typed { text-transform: none; }
body #hero.hero-align-center .hero-headline { flex: 0 0 100%; max-width: 900px; margin-left: auto; margin-right: auto; padding-left: 1.25rem; padding-right: 1.25rem; text-align: center; }
body #hero.hero-align-center .hp-headline, body #hero.hero-align-center .hp-lead { text-align: center !important; }
body #hero.hero-align-left .hero-headline { flex: 0 0 100%; max-width: 960px; margin-left: 0; text-align: left; }
body #hero.hero-align-left .hp-headline, body #hero.hero-align-left .hp-lead { text-align: left !important; }
.hero-button-wrap { margin-top: 2rem; }
#hero .hero-button { color: rgb(var(--colorPrimary)); background: #fff; border-color: #fff; font-size: 18px; font-weight: 600; padding: .75rem 2rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); }
#hero .hero-button:hover, #hero .hero-button:focus { color: rgb(var(--colorPrimary)); background: rgba(255,255,255,.9); }

/* ------- Homepage section backgrounds (Homepage tab → Homepage sections) ------- */
.section-bg-light { background-color: #f1f5f9; }
/* Opaque, so the curved edge doesn't show the section above through it (rgba is the fallback for older browsers) */
.section-bg-tint { background-color: rgba(var(--colorPrimary), .07); background-color: color-mix(in srgb, rgb(var(--colorPrimary)) 7%, #fff); }
/* The curved edge at the top takes the section's colour */
.section-bg-light .section-transition { fill: #f1f5f9 !important; }
.section-bg-tint .section-transition { fill: color-mix(in srgb, rgb(var(--colorPrimary)) 7%, #fff) !important; }

/* ------- Welcome section, Split layout ------- */
.welcome-split .welcome-split-text h2 { text-align: left; margin-bottom: .75rem; }
.welcome-split .welcome-subheading { font-weight: 600; margin-bottom: 1.25rem; }
.welcome-split .welcome-content p { line-height: 1.7; }
.welcome-split-img { width: 100%; border-radius: .5rem; box-shadow: 0 .25rem 1rem rgba(0,0,0,.12); }

/* ------- Compact footer (Branding tab → Footer layout) ------- */
/* body outranks the themes' footer text rules (e.g. Agency's bold 13px) */
body #footer.footer-compact p { margin-bottom: .5rem; font-size: 15px; font-weight: 400; }
#footer.footer-compact a { color: inherit; }
#footer.footer-compact a:hover, #footer.footer-compact a:focus { text-decoration: underline; }
#footer.footer-compact .footer-sep { margin: 0 .6rem; }
#footer.footer-compact .footer-links a { margin: 0 .5rem; }
body #footer.footer-compact .footer-copyright { font-size: 12px; opacity: .85; }
body #footer.footer-compact .footer-disclaimer { font-size: 12px; }

/* ------- Popup form (Forms tab) and multi-step forms ------- */
.popup-form-modal .modal-content { border: 0; border-radius: .5rem; }
.popup-form-modal .popup-form-close { position: absolute; top: .75rem; right: 1rem; z-index: 2; }
/* Keep the first step's heading clear of the close button */
.popup-form-modal .form-step-count, .popup-form-modal .form-step-title { padding-right: 2rem; }
.popup-form-modal .site-form-done { padding: 2rem 1rem !important; background: none !important; text-align: center; }
.form-step-count { margin-bottom: .25rem; color: rgb(var(--colorPrimary)); font-size: 12px !important; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.form-step-title { margin-bottom: .5rem; color: rgb(var(--colorPrimary)); font-size: 22px; text-align: left; }
.form-step-intro { margin-bottom: 1.25rem; color: #6c757d; font-size: 15px; }
.form-step-intro p { font-size: 15px; }
.form-step-buttons { gap: .75rem; }
.form-step[hidden] { display: none !important; }