/*
Theme Name: Brita Pro Custom Theme
Theme URI: https://www.britapro.com
Version: 1.0
Description: A custom theme for Brita Pro.
Author: Gerard Agency
Author URI: https://www.gerardagency.com
template: bb-theme
*/

/* Add your custom styles here... */ 

/* webfont https://use.typekit.net/hgf5aqx.css - added via Customize > Code > Head
Effra Bold
font-family: effra, sans-serif;
font-weight: 700;
font-style: normal;

Effra Medium
font-family: effra, sans-serif;
font-weight: 500;
font-style: normal;

Effra Regular
font-family: effra, sans-serif;
font-weight: 400;
font-style: normal;

Effra Light
font-family: effra, sans-serif;
font-weight: 300;
font-style: normal;
*/

:root
{
    --white: #ffffff;
    --white-rgb: 255,255,255;
    --white-rgba-82: rgba(255,255,255,0.82);
    --gray-100: #EAEAEA;
    --gray-125: #E5E5E5;
    --gray-150: #c1bcc2;
    --gray-200: #B5B5B5;
    --gray-400: #939393;
    --gray-500: #888888;
    --gray-550: #707070;
    --gray-600: #555555;
    --black: #000000;

    --cool-white: #e2eef1;
    --orange: #FC4C02;
    --aqua: #3D96EF;
    --blue: #036CD6;
    --navy: #012169;
    --blue-rgba-82: rgba(3,108,214,0.82);
    --blue-rgba-0: rgba(3,108,214,0);
    --turqoise: #31CED3;
    --turq-rgba-0: rgba(153,244,251,0);
    --neon-blue: #9FFAFD;
    --neon-blue-rgba: rgba(159,250,253,1.0);
    --neon-blue-rgba-0: rgba(159,250,253,0.0);

    --aqua-turq-grad: linear-gradient(0deg, var(--turqoise) 0%, var(--aqua) 100%);
    --blue-grad: linear-gradient(0deg, var(--blue-rgba-0) 0%, var(--blue-rgba-82) 100%);
    --blue-turq-grad: linear-gradient(0deg, var(--turq-rgba-0) 0%, var(--blue-rgba-82) 100%);
    --neon-blue-grad: linear-gradient(0deg, var(--neon-blue-rgba-0) 0%, var(--neon-blue-rgba) 100%);

    --shadow-color: rgba(0, 0, 0, 0.65);

    --primary: var(--accent-color); /*  - via functions.php - pulling from WP customizer */

	--wt-bold: 700;
    --wt-default: 500;
    --wt-regular: 400;
	--wt-light: 300;

	--spacer: 1rem; /* like Bootstrap, assumes 16px - we can calc rems, not px */

    --sctn-spacing: calc( var(--spacer) * 1.875 );  /* 30px */
    --cta-py: var(--spacer);

    --block-m: 20px;
    --cta-col-m: var(--block-m);
    
    --btn-wt: var(--wt-regular); /* weight - font weight - we can set this more specific than customizer options */
	--btn-fsz: var(--global-fsz);
    --btn-padding: calc( var(--btn-fsz) * 0.6 ); /* 12px - this is missing from overall customizer settings */
    --btn-radius: 6px;
    --btn-pt: calc( var(--spacer) * 0.55 );
    --btn-pr: calc( var(--spacer) * 0.75 ); /* button padding right */
    --btn-pb: calc( var(--spacer) * 0.55 );
    --btn-pl: var(--spacer); /* left button padding */
    --btn-py: calc( var(--spacer) * 0.55 ); /* top and bottom button padding */
    --btn-p: var(--btn-pt) var(--btn-pr) var(--btn-pb) var(--btn-pl);
    --btn-px: var(--spacer); /* left and right button padding */
    
    --page-title-fsz: var(--global-fsz);
    --page-subtitle-fsz: 28px;

    --lead-fsz: 125%;
    
    --transition: ease-in 0.2s;
    --txt-shadow: 1px 1px 7px var(--shadow-color);
}

@media (min-width: 768px)
{
	:root 
	{
        --sctn-spacing: calc( var(--spacer) * 2.8125 ); /* 45px */
        --cta-py: calc( var(--spacer) * 1.5 );

        --page-title-fsz: 20px;
        --page-subtitle-fsz: 36px;
	}
}

@media (min-width: 992px)
{
	:root 
	{
		--sctn-spacing: calc( var(--spacer) * 3.75 ); /* 60px */
        --cta-py: calc( var(--spacer) * 1.75 );

        --page-title-fsz: 22px;
        --page-subtitle-fsz: 42px;
	}
}



/* START general ------------------------------------------ */
.img-fluid img 
{
    max-width: 100%;
    height: auto;
}

.img-fw img
{
    max-width: auto;
    width: 100%;
    height: auto;
}

.mw-1140 
{
    max-width: 1140px;
}

.mx-auto * 
{
	margin-left: auto;
	margin-right: auto;
}

hr 
{
    border-top-color: var(--gray-550);
}
/* END general -------------------------------------------- */



/* START typography --------------------------------------- */
.lead 
{
    font-size: calc( var(--body-fsz) * 1.5);
    line-height: calc( var(--body-lh) * 0.8);
}

h2, .h2 
{
    text-transform: uppercase;
}

.h2 .fl-heading 
{
    font-size: var(--h2-fsz);
    line-height: var(--h2-lh);
}

.h3 .fl-heading 
{
    font-size: var(--h3-fsz);
    line-height: var(--h3-lh);
}

.h4 .fl-heading 
{
    font-size: var(--h4-fsz);
    line-height: var(--h4-lh);
}

.h5 .fl-heading 
{
    font-size: var(--h5-fsz);
    line-height: var(--h5-lh);
}

.fl-heading a:hover,
.fl-heading a:focus 
{
    text-decoration: underline;
}

.text-uc 
{
    text-transform: uppercase;
}

.text-lc 
{
    text-transform: lowercase;
}

.li-d-inline-block li 
{
    display: inline-block;
}

.text-wt-reg 
{
    font-weight: var(--wt-regular);
}

.tt-unset,
.tt-unset .fl-heading 
{
    text-transform: unset;
}

.text-orange 
{
    color: var(--orange);
}

.text-white,
.text-white .fl-heading
{
    color: var(--white);
}

.text-white a 
{
    color: rgba(var(--white-rgb), 1.0);
    transition: color var(--transition);
    text-decoration: underline;
}

.text-white a:hover 
{
    color: rgba(var(--white-rgb), 0.5);
}

.text-navy,
.text-navy .fl-heading 
{
    color: var(--navy);
}

/* END typography ----------------------------------------- */



/* START buttons --------------------------------------------- */
.fl-button,
.fl-button:visited 
{
    display: inline-block;
    font-size: 16px;
    font-weight: normal;
    line-height: 18px;
    padding: 12px 24px;
    transition: background-color var(--transition), border-color var(--transition) !important;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--btn-radius) !important;
}

.fl-button:hover,
.fl-button:focus 
{
    text-decoration: none;
}

.btn-link .fl-button,
.btn-link .fl-button:visited
{
    background-color: transparent;
    padding: 0 0 5px 0 !important;
    text-transform: unset;
    border-radius: 0 !important;
    border-width: 0 0 1px 0;
    border-bottom-color: var(--navy);
    font-size: var(--body-fsz) !important;
    text-decoration: underline !important;
}

.btn-link .fl-button *,
.btn-link .fl-button:visited *
{
    color: var(--navy) !important;
}

.btn-link .fl-button:hover,
.btn-link .fl-button:focus
{
    background-color: transparent !important;
    border-width: 0 0 1px 0;
    border-bottom-color: var(--orange) !important;
}

.btn-link .fl-button:hover *,
.btn-link .fl-button:focus *
{
    color: var(--orange) !important;
}

/* END buttons ----------------------------------------------- */



/* START forms ----------------------------------------------- */

/* reinforce Bootstrap form styling */
input[type=text].form-control,
input[type=password].form-control,
input[type=email].form-control,
input[type=tel].form-control,
input[type=date].form-control,
input[type=month].form-control,
input[type=week].form-control,
input[type=time].form-control,
input[type=number].form-control,
input[type=search].form-control,
input[type=url].form-control
{
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
}

button, input[type=button], input[type=submit] 
{
    line-height: 1.5;
}

@media (min-width: 576px) 
{
    .form-inline .form-control 
    {
        width: auto !important; /* override BB */
    }
}


/* END forms ------------------------------------------------- */



/* START backgrounds ----------------------------------------- */
.bg-blue 
{
    background-color: var(--blue);
}

.bg-navy 
{
    background-color: var(--navy);
}

.bg-grad-blue 
{
    background: rgba(3,108,214,0.38);
    background: linear-gradient(180deg, rgba(3,108,214,0.38) 0%, rgba(159,250,253,0.1) 100%);
}

.bg-grad-aqua-turq 
{
    background: var(--aqua);
    background: var(--aqua-turq-grad);
}

.bg-wave-b 
{
    background: rgba(250,252,255,1);
    
    background: 
        url("imgs/edge-wave-b.svg") bottom center/100% auto no-repeat,
        linear-gradient(0deg, rgba(242,246,252,1) 0%, rgba(249,251,255,1) 20%, rgba(226,231,237,1) 50%, rgba(250,252,255,1) 100%);

    padding-bottom: calc( var(--sctn-spacing) * 2);
}
/* END backgrounds ------------------------------------------- */



/* START sections -------------------------------------------- */

/* tweaking an existing class wrapper with css, so removing the class goes back to theme defaults - no need to manually edit this in BB */
/* my = margin top & bottom, just like Bootstrap - this is meant for transparent background sections without background images */
.sctn-my > .fl-row-content-wrap
{
	padding-top: 0px;
	padding-bottom: 0px;
}

.sctn-mt > .fl-row-content-wrap 
{
	padding-top: 0;
}

.sctn-mb > .fl-row-content-wrap 
{
	padding-bottom: 0;
}

.sctn-my
{
	margin-top: var(--sctn-spacing); /* --sctn-spacing has built in responsive support, see :root above */
	margin-bottom: var(--sctn-spacing);
	transition: margin-top var(--transition), margin-bottom var(--transition);
}

/* standard section padding, py = padding top & bottom */
.sctn-py > .fl-row-content-wrap
{
	padding-top: var(--sctn-spacing);
	padding-bottom: var(--sctn-spacing);
	transition: padding-top var(--transition), padding-bottom var(--transition);
}

/* a section that has typical section spacing, but lg breakpoint uses md spacing */
.sctn-py-lgmd > .fl-row-content-wrap
{
	padding-top: var(--sctn-spacing);
	padding-bottom: var(--sctn-spacing);
	transition: padding-top var(--transition), padding-bottom var(--transition);
}

@media (min-width: 992px)
{
    .sctn-py-lgmd 
    {
        --sctn-spacing: calc( var(--spacer) * 2.8125 ); /* 45px */
    }
}

.sctn-pt > .fl-row-content-wrap 
{
	padding-top: var(--sctn-spacing) !important;
	transition: padding-top var(--transition);
}

.sctn-pb > .fl-row-content-wrap 
{
	padding-bottom: var(--sctn-spacing) !important;
	transition: padding-bottom var(--transition);
}

.sctn-pb-lgmd > .fl-row-content-wrap
{
	padding-bottom: var(--sctn-spacing) !important;
	transition: padding-bottom var(--transition);
}

@media (min-width: 992px)
{
    .sctn-pb-lgmd 
    {
        --sctn-spacing: calc( var(--spacer) * 2.8125 ); /* 45px */
    }
}

/* END sections ---------------------------------------------- */



/* START blocks / columns ------------------------------------ */
.fl-col-m-20 .fl-col,
.block-m .fl-col
{
    margin: var(--block-m);
}

.block-p 
{
    padding: var(--sctn-spacing);
	transition: padding var(--transition);
}

.block-py 
{
    padding-top: var(--sctn-spacing);
    padding-bottom: var(--sctn-spacing);
	transition: padding-top var(--transition), padding-bottom var(--transition);
}

.block-px 
{
    padding-left: var(--sctn-spacing);
    padding-right: var(--sctn-spacing);
	transition: padding-left var(--transition), padding-right var(--transition);
}

.block-pt 
{
    padding-top: var(--sctn-spacing);
	transition: padding-top var(--transition);
}

.block-pr 
{
    padding-right: var(--sctn-spacing);
	transition: padding-right var(--transition);
}

.block-pb 
{
    padding-bottom: var(--sctn-spacing);
	transition: padding-bottom var(--transition);
}

.block-pl-0 
{
    padding-left: 0 !important;
}
/* END blocks / columns -------------------------------------- */




/* START menus ----------------------------------------------- */

/* keep menus horizontal on mobile */
.menu-hz .menu li
{
    display: inline-block;
}
/* END menus ------------------------------------------------- */



/* START site-top-bar ---------------------------------------- */
#site-topbar 
{
    background-color: #b2caef;
    font-size: 75%;
}

#site-topbar p 
{
    margin-bottom: 0;
    text-align: center;
}

#site-topbar a,
#site-topbar a:visited 
{
    color: var(--body-color);
    transition: color var(--transition);
}

#site-topbar a:hover,
#site-topbar a:focus 
{
    color: var(--white);
    text-decoration: none;
}

/* END site-top-bar ---------------------------------------- */



/* START site-header ----------------------------------------- */
#site-header 
{
    --hdr-bgc: var(--white);
    background-color: var(--hdr-bgc);
    box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.15);
}

#menu-primary-hdr a,
#menu-primary-hdr a:visited
{
    --link-color: var(--gray-600);
    --link-fsz: calc( var(--body-fsz) * 0.8);
    color: var(--link-color);
    font-size: var(--link-fsz);
    text-transform: uppercase;
}


#menu-primary-hdr a:hover,
#menu-primary-hdr a:focus,
#menu-primary-hdr li.menu-item-has-children:hover > .fl-has-submenu-container > a 
{
    --link-color-hover: var(--blue);
    color: var(--link-color-hover);
}

#menu-primary-hd .fl-active a,
#menu-primary-hd .fl-active a:visited
{
    --link-color: var(--blue);
    color: var(--link-color) !important;
}

/* !!! - make active page top link a bold weight - !!!

#menu-primary-hdr .menu > li.menu-item > a:hover,
#menu-primary-hdr .menu > li.menu-item > a:focus,
#menu-primary-hdr .menu > li.menu-item-has-children:hover > .fl-has-submenu-container > a 
{
    font-weight: var(--wt-bold);
} */

#menu-primary-hdr .sub-menu 
{
    --sm-bgc: var(--white-rgba-82);
    background-color: var(--sm-bgc);
}

#menu-primary-hdr .sub-menu a,
#menu-primary-hdr .sub-menu a:visited
{
    font-weight: var(--wt-regular);
}

@media (max-width: 991px)
{
    /* on mobile, the menu is rebuilt by the system and is an adjacent sibling to .navbar-expand-lg */
    .navbar-expand-lg + #menu-primary-hdr .sub-menu 
    {
        border-top: 1px solid var(--gray-125);
        border-bottom: 1px solid var(--gray-125);
    }
}

@media (min-width: 992px) 
{
    /* remove arrows on menu expansion */
    .navbar-expand-lg #menu-primary-hdr .fl-menu-toggle 
    {
        display: none;
    }

    /* normalize padding on menu expansion */
    .navbar-expand-lg #menu-primary-hdr .fl-menu-horizontal.fl-toggle-arrows .fl-has-submenu-container a 
    {
        padding-right: 14px;
    }

    /* align top of dropdown with bottom of navbar */
    .navbar-expand-lg #menu-primary-hdr .sub-menu 
    {
        padding-top: 20px;
    }
    
    .navbar-expand-lg #menu-primary-hdr .sub-menu .menu-item:not(:last-child) a 
    {
        border-bottom: 1px solid var(--gray-125);
    }
}

#menu-primary-hdr .sub-menu a:hover,
#menu-primary-hdr .sub-menu a:focus 
{
    --link-hover-bgc: #F2F6FC;
    --link-color-hover: var(--accent-color-hover);
    color: var(--link-color-hover);
}

#menu-primary-hdr .svg-container
{
	display: none !important;
}

#menu-primary-hdr .fl-menu-mobile-toggle.hamburger::before
{
    font-family: "Font Awesome 5 Pro";
    content: "\f0c9";
	width: 1.4em;
	height: 1.4em;
	font-size: 1.4em;
	font-weight: 300;
}

/* dealer site-header specific */
#hdr-contact 
{
    text-align: right;
    color: var(--blue);
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

@media (max-width: 991px)
{
    .navbar-expand-lg #hdr-contact .hdr-contact-msg 
    {
        display: none;
    }
}

#hdr-contact .fl-button,
#hdr-contact .fl-button:visited
{
    margin-left: calc( var(--spacer) * 0.5);
    background-color: var(--blue);
    border-color: var(--blue);
    font-weight: var(--wt-bold);
}

#hdr-contact .fl-button:hover,
#hdr-contact .fl-button:focus 
{
    background-color: var(--orange);
    border-color: var(--orange);
}

@media (max-width: 991px)
{
    .navbar-expand-lg #hdr-contact .fl-button 
    {
        font-size: 14px;
    }
}


/* END site-header ------------------------------------------- */



/* START hero ------------------------------------------- */
#hero 
{
    --hero-color: var(--white);
    --hdr-d1-fsz: calc(1.325rem + .9vw); /* 42px, 36, */
    --hero-hdg-fsz: 147%; /* normally 42, 62, formerly 147% */
    --hero-hdg-lh: 1;
    --hdg-sub-fsz: 87%; /* 54px */
    --hero-grad: var(--blue-turq-grad);
}

@media (min-width: 768px) 
{
    #hero 
    {
        --hdr-d1-fsz: 48px;
    }
}

@media (min-width: 992px) 
{
    #hero 
    {
        --hdr-d1-fsz: 56px;
    }
}

@media (min-width: 1200px) 
{
    #hero 
    {
        --hdr-d1-fsz: 62px;
    }
}

#hero .fl-row-content-wrap 
{
    padding-top: 0;
    padding-bottom: 0;
    transition: min-height var(--transition);
}

@media (min-width: 1200px)
{
    body:not(.home) #hero .fl-row-content-wrap 
    {
        min-height: 500px; /* adjust visible area on largest screen */
    }
}

#hero .fl-row-content
{
    padding-top: var(--spacer);
    padding-bottom: calc( var(--sctn-spacing) * 0.5); /* --sctn-spacing */
    padding-left: 0;
    padding-right: 0;
    background: var(--hero-grad);
    transition: padding-bottom var(--transition);
}

@media (max-width: 575px)
{
    #hero .fl-row-content
    {
        padding-bottom: calc( var(--sctn-spacing) * 2);
    }
}

/* @media (min-width: 992px) 
{
    #hero .fl-row-content
    {
        min-height: 200px;
    }
} */

#hero .fl-heading 
{
    color: var(--hero-color);
    text-shadow: var(--txt-shadow);
}

/* set width here since we can't assign a background color to a full width inner row using BB */
#hero .fl-col-group 
{
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

/* default page title & subtitle */
#hero #page-title .fl-heading
{
    font-size: var(--page-title-fsz);
    font-weight: var(--wt-regular);
    line-height: 1;
    transition: font-size var(--transition);
}

#hero #page-subtitle .fl-heading
{
    font-size: var(--page-subtitle-fsz);
    font-weight: var(--wt-regular);
    line-height: 1;
    text-transform: unset;
    transition: font-size var(--transition);
}

#hero #page-subtitle .fl-heading .dlr-sub 
{
    font-size: 75%;
}

#hero #hero-link .fl-heading 
{
    text-shadow: unset;
}

#hero #hero-link a
{
    color: var(--white);
    text-shadow: var(--txt-shadow);
    transition: text-shadow var(--transition);
}

#hero #hero-link a:hover 
{
    text-shadow: none;
    text-decoration: none;
}


/* main page homepage specific */
#hero #page-title.hdr-display-1 .fl-heading
{
    font-size: var(--hdr-d1-fsz);
    text-transform: uppercase;
    font-weight: var(--wt-light);
    line-height: var(--hero-hdg-lh);
}

#hero #page-title.hdr-display-1 .fl-heading .hdg-sub 
{
    text-transform: initial;
    font-weight: var(--wt-default);
    font-size: var(--hdg-sub-fsz);
}

.hero-grad-b 
{
    position: relative;
}

.hero-grad-b:after 
{
    position: relative;
    height: calc( var(--spacer) * 1.5);
    left: 0;
    right: 0;
    display: block;
    content: " ";
    background: rgb(61,150,239);
    background: linear-gradient(180deg, rgba(61,150,239,1) 0%, rgba(49,206,211,1) 100%);
}


/* post item hero */
#hero-item 
{
    background-color: var(--navy);
    color: var(--white);
}

#hero-item .item-title,
#hero-item .item-title .fl-heading
{
    color: var(--neon-blue);
    font-size: calc( var(--body-fsz) * 1.5 );
    text-transform: uppercase;
}

#hero-item .item-title .fl-heading a,
#hero-item .item-title .fl-heading a:visited 
{
    color: var(--neon-blue);
}

#hero-item .item-title .fl-heading a:hover,
#hero-item .item-title .fl-heading a:focus
{
    color: var(--orange);
}

#hero-item .fl-post-info-date 
{
    color: var(--white);
    text-transform: uppercase;
    font-size: 80%;
}

#hero-item .item-subtitle,
#hero-item .item-subtitle .fl-heading 
{
    font-weight: 300;
    font-size: var(--h2-fsz);
    color: var(--white);
    text-transform: unset;
}

#hero-item > .fl-row-content-wrap
{
	padding-top: var(--sctn-spacing);
	padding-bottom: var(--sctn-spacing);
	transition: padding-top var(--transition), padding-bottom var(--transition);
}


/* quiz page hero */
#hero-quiz 
{
    background: var(--aqua);
    background: var(--aqua-turq-grad);
    color: var(--white);    
}

#hero-quiz > .fl-row-content-wrap
{
	padding-top: var(--sctn-spacing);
	padding-bottom: var(--sctn-spacing);
	transition: padding-top var(--transition), padding-bottom var(--transition);
}

#hero-quiz .item-title,
#hero-quiz .item-title .fl-heading
{
    color: var(--neon-blue);
    font-size: calc( var(--body-fsz) * 1.5 );
    text-transform: uppercase;
}

#hero-quiz .item-subtitle,
#hero-quiz .item-subtitle .fl-heading 
{
    font-weight: 300;
    font-size: var(--h2-fsz);
    color: var(--white);
    text-transform: unset;
}

/* product page hero */
#hero-product 
{
    background: rgb(8,108,207);
    background: linear-gradient(180deg, rgba(8,108,207,1) 0%, rgba(49,138,222,1) 100%);
    color: var(--white);
}

#hero-product > .fl-row-content-wrap
{
	padding-top: var(--sctn-spacing);
	padding-bottom: 0;
	transition: padding-top var(--transition);
}

#hero-product .item-subtitle .fl-heading 
{
    color: var(--white);
    font-size: calc( var(--body-fsz) * 1.5 );
    text-transform: unset;
    font-weight: 300;
    text-shadow: var(--txt-shadow);
}

#hero-product .item-title .fl-heading
{
    font-weight: 500;
    font-size: var(--h2-fsz);
    color: var(--white);
    text-transform: unset;
    text-shadow: var(--txt-shadow);
}

/* search results hero */
#hero-search-result 
{
    background-color: var(--navy);
    color: var(--white);
}

#hero-search-result #page-title,
#hero-search-result #page-title .fl-heading
{
    color: var(--white);
    font-size: var(--body-fsz);
}

#hero-search-result #page-subtitle,
#hero-search-result #page-subtitle .fl-heading 
{
    font-weight: 300;
    font-size: var(--h2-fsz);
    color: var(--white);
    text-transform: unset;
}

#hero-search-result > .fl-row-content-wrap
{
	padding-top: var(--sctn-spacing);
	padding-bottom: var(--sctn-spacing);
	transition: padding-top var(--transition), padding-bottom var(--transition);
}

/* END hero ------------------------------------------- */



/* START CTA ------------------------------------------------- */
.cta 
{
    --cta-color: var(--white);
    --cta-hdg-color: var(--neon-blue);
    --cta-bgc: var(--aqua);
    --cta-bg: var(--aqua-turq-grad);
    background: var(--cta-bgc); /* fallback */
    background: var(--cta-bg);
    color: var(--cta-color);
    text-shadow: var(--txt-shadow);
    box-shadow: 0px 10px 35px 0px var(--neon-blue);
    position: relative;
    z-index: 1;
}

.cta .fl-heading 
{
    color: var(--cta-hdg-color);
    text-transform: unset;
}

/* END cta --------------------------------------------------- */



/* START images ---------------------------------------------- */
.w-img-100 img
{
    width: 100% !important;
}

.h-img-auto img
{
    height: auto !important;
}

.img-circle .fl-photo-content
{
    position: relative;
}

.img-circle img 
{
    border-radius: 50%;
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.15);
}

[class*="icon-"] .fl-photo-content:before,
[class*="icon-"] .fl-photo-content:after
{
    position: absolute;
    z-index: 1;
    width: 135px;
    height: 135px;
    content: " ";
}

.icon-tl-faucet .fl-photo-content:before 
{   
    top: 0px;
    left: 0px;
    background: url("imgs/icon-Faucet_circle.svg") no-repeat center;
}

.icon-tl-filter .fl-photo-content:before 
{   
    top: 0px;
    left: 0px;
    background: url("imgs/filter-circle.png") no-repeat center;
}

.icon-tl-titan .fl-photo-content:before 
{   
    top: 0px;
    left: 0px;
    background: url("imgs/titan-circle.png") no-repeat center;
}

.icon-tl-house .fl-photo-content:before 
{   
    top: 0px;
    left: 0px;
    background: url("imgs/icon-House_circle.svg") no-repeat center;
}

.icon-tr-water-drop .fl-photo-content:before 
{   
    top: 0px;
    right: 0px;
    background: url("imgs/icon-Water-Drop_circle.svg") no-repeat center;
}

.icon-tr-filter .fl-photo-content:before 
{   
    top: 0px;
    right: 0px;
    background: url("imgs/filter-circle.png") no-repeat center;
}

.icon-tr-money .fl-photo-content:before 
{   
    top: 0px;
    right: 0px;
    background: url("imgs/icon-Money_circle.svg") no-repeat center;
}

.icon-bl-wave .fl-photo-content:after 
{
    bottom: 0px;
    left: 0px;
    background: url("imgs/icon-Wave.svg") no-repeat center;
}

.icon-br-wave .fl-photo-content:after 
{
    bottom: 0px;
    right: 0px;
    background: url("imgs/icon-Wave.svg") no-repeat center;
}
/* END images ------------------------------------------------ */



/* START accordion ------------------------------------------- */
.fl-accordion-item 
{
    border-width: 0 !important;
}

.fl-accordion-button 
{
    background-color: var(--blue);
}

.fl-accordion-button a 
{
    color: var(--white);
    font-size: 24px;
}

.fl-accordion-button-label:focus,
.fl-accordion-button-label:active,
.fl-accordion-button-icon:focus,
.fl-accordion-button-icon:active
{
    outline-color: transparent;
    outline-style: none;
}

.fl-accordion-button-icon 
{
    color: var(--white);
}

.fl-accordion-item dl 
{
    margin-top: var(--spacer);
}

.fl-accordion-item dt 
{
    color: var(--navy);
}

/* END accordion --------------------------------------------- */


/* START site-footer ----------------------------------------- */
#site-footer 
{
    --ftr-brdr-color: var(--blue);
    --ftr-fsz: calc( var(--body-fsz) * 0.8);
    --ftr-grad: var(--neon-blue-grad);
    font-size: var(--ftr-fsz);
    border-top: 60px solid var(--ftr-brdr-color);
    position: relative;
}

#site-footer:before 
{
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: calc( var(--spacer) * 2);
    background: var(--ftr-grad);
}

#site-footer > .fl-row-content-wrap
{
	padding-top: var(--sctn-spacing);
	padding-bottom: var(--sctn-spacing);
	transition: padding-top var(--transition), padding-bottom var(--transition);
}

#menu-primary-ftr .menu 
{
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}

#menu-primary-ftr .menu > .menu-item 
{
    flex: 0 0 50%;
    max-width: 50%;
}
 
@media (min-width: 576px) 
{
    #menu-primary-ftr .menu > .menu-item 
    {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 20%;
    }
}

#menu-primary-ftr a,
#menu-primary-ftr a:visited 
{
    --link-color: var(--gray-500);
    color: var(--link-color);
    transition: color var(--transition);
}

#menu-primary-ftr a:hover,
#menu-primary-ftr a:focus 
{
    --link-color-hover: var(--accent-color-hover);
    color: var(--link-color-hover);
}

#menu-primary-ftr .menu > .menu-item > a, 
#menu-primary-ftr .menu > .menu-item > .fl-has-submenu-container a 
{
    text-transform: uppercase;
    font-weight: var(--wt-bold);
}

#menu-primary-ftr .sub-menu 
{
    visibility: visible;
    display: flex !important;
    opacity: 1 !important;
    position: relative !important;
    top: auto;
    left: auto;
    z-index: 1;
    background-color: transparent;
    flex-direction: column;
    min-width: 100%;
}

#ftr-contact a,
#ftr-contact a:visited
{
    --link-color: var(--gray-600);
    color: var(--link-color);
}

#ftr-contact a:focus,
#ftr-contact a:hover
{
    --link-color-hover: var(--accent-color-hover);
    color: var(--link-color-hover);
}

#menu-social span,
#menu-social-fresh-water span
/* WTF1 */
{
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
	visibility: hidden;
}

[class*="socialicon-"] > a
{
    position: relative;
    text-align: center;
}

[class*="socialicon-"] > a:before
{
    font-family: "Font Awesome 5 Brands";
    font-size: 20px;
    width: 40px;
    height: 40px;
    padding: 10px;
    display: inline-block;
    color: var(--white);
    background-color: var(--gray-400);
    transition: color var(--transition), background-color var(--transition);
    line-height: 1.1;
    margin: 0 auto;
    border-radius: 50%;
}

[class*="socialicon-"] > a:hover:before,
[class*="socialicon-"] > a:focus:before
{
    color: var(--black);
    background-color: var(--gray-100);
}

.socialicon-facebook > a:before
{
    content: "\f09a";
}

.socialicon-instagram > a:before
{
    content: "\f16d";
}

.socialicon-linkedin > a:before
{
    content: "\f0e1";
}

.socialicon-pinterest > a:before
{
    content: "\f231";
}

.socialicon-twitter > a:before
{
    content: "\f099";
}

.socialicon-tiktok > a:before
{
    content: "\e07b";
}

.socialicon-spotify > a:before
{
    content: "\f1bc";
}


/* END site-footer ----------------------------------------- */




/* START site-copyright -------------------------------------- */
#site-copyright 
{
    --sc-fsz: calc( var(--body-fsz) * 0.8);
    --sc-color: var(--gray-500);
    font-size: var(--sc-fsz);
    color: var(--sc-color);
}
/* END site-copyright ---------------------------------------- */



/* START blog page stuff ------------------------------------- */
.fl-post-grid-post 
{
    font-size: var(--body-fsz) !important;
}

.fl-post-meta 
{
    color: var(--navy);
    padding-bottom: 0 !important;
    font-weight: 300;
    font-size: var(--body-fsz);
    text-transform: uppercase;
    margin-bottom: 0;
}

.single .widget_recent_entries .post-date 
{
    display: block;
}

.single .fl-module-post-grid.recent-posts-list .fl-post-feed-post 
{
    border-bottom: none;
    margin-bottom: var(--spacer);
}

/* fake a new image dimension for the featured image */
.single .fl-module-post-grid.recent-posts-list .fl-post-feed-image a 
{
    display: flex;
    position: relative;
    max-height: 115px;
    align-items: center;
    overflow: hidden;
}

.single .fl-module-post-grid.recent-posts-list .fl-post-feed-image a > .wp-post-image
{
    /* position: absolute;
    top: 50%;
    transform: translateY(-50%); */
    height: 100% !important; /* fix a flex bug in chrome that smashes images */
}

.single .fl-module-post-grid.recent-posts-list .fl-post-feed-title 
{
    font-size: var(--body-fszs);
    text-transform: unset;
    margin-bottom: 5px;
}

/* END blog page stuff --------------------------------------- */



/* START quiz stuff ------------------------------------------ */
.wq_quizProgressBar 
{
    background-color: transparent;
    border: 1px solid var(--gray-500);
    box-shadow: unset;
}

.wq_quizProgressBar > span
{
    background-color: var(--blue);
    box-shadow: unset;
    border: none;
    line-height: 19px;
}

.wq-quiz.wq-skin-flat .wq_questionTextCtr 
{
    background-color: transparent;
}

body .wq_questionTextCtr 
{
    padding-left: 0;
    padding-right: 0;
}

body .wq_questionTextCtr h4 
{
    color: var(--navy);
    font-size: var(--h4-fsz);
}

.wq-quiz.wq-skin-flat .wq_singleAnswerCtr 
{
    background-color: transparent;
    border-width: 0;
    margin-bottom: 5px;
}

.wq_questionMediaCtr 
{
    margin-bottom: 0;
}

.wq-quiz.wq-skin-flat .wq_singleAnswerCtr:hover,
.wq-quiz.wq-skin-flat .wq_singleAnswerCtr.chosen,
.wq-quiz.wq-skin-flat .wq_singleAnswerCtr.wq_answerSelected 
{
    background-color: #DEEEFB;
    border-color: transparent;
    border-width: 0;
}

.wq_singleAnswerCtr .wq_answerTxtCtr 
{
    font-size: var(--body-fsz);
    font-weight: var(--wt-light);
}

.wq_singleQuestionWrapper .wq_continue button
{
    background-color: var(--accent-color);
    font-weight: var(--btn-wt);
    text-transform: uppercase;
    font-size: var(--btn-fsz);
    border-radius: var(--btn-radius);
    padding: var(--btn-p);
    transition: background-color var(--transition);
}

.wq_singleQuestionWrapper .wq_continue button:hover,
.wq_singleQuestionWrapper .wq_continue button:focus 
{
    background-color: var(--accent-color-hover);
}

.wq-result-title 
{
    font-weight: var(--wt-regular);
    margin-top: calc( var(--spacer) * 0.5);
}

.wq_resultDesc 
{
    margin-bottom: var(--spacer);
}

.wq-results .wq-checked-answers-list > div:not(:last-child)
{
    margin-bottom: var(--spacer) !important;
}

.wq_triviaQuestionExplanation 
{
    border-color: transparent;
    background-color: #CFF9FA;
}

.wq_triviaQuestionExplanation span 
{
    font-size: var(--body-fsz);
    font-weight: var(--wt-regular);
    margin-right: 0.5rem;
}

.wq_triviaQuestionExplanation .wq-explanation-head-correct,
.wq_triviaQuestionExplanation .wq-explanation-head-incorrect 
{
    color: #434141;
    float: left;
}

p.wq_QuestionExplanationText 
{
    margin-top: 0;
}

/* END quiz stuff ------------------------------------------- */



/* START search results page -------------------------------- */
.search-result-item:not(:last-child) 
{
    margin-bottom: var(--sctn-spacing);
}

.search-no-results .fl-archive .fl-post 
{
    border-bottom: 0;
    margin-bottom: 0;
    /* padding-bottom: 0; */
}

.search-no-results .form-wrap .fl-builder-module-template 
{
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    max-width: 1140px;
}

.search-no-results .form-wrap .fl-builder-module-template .fl-module-content 
{
    margin-left: 0;
    margin-right: 0;
}

/* END search results page ---------------------------------- */



/* FRESH WATER JUNK */

@media (min-width: 360px) and (max-width: 1200px) {
  .c-fw-product-box {
    background: url(/uploads/2025/10/stripes-1.png) no-repeat center top / auto 350px, 
                linear-gradient(in sRGB 0deg, rgb(255, 255, 255) 25%, rgba(168, 215, 255, 0.45) 100%);
  }
}

/* //FRESH WATER JUNK */