/* =========================================== */
/* LP FLEX styles.css - theme + colors + forms */
/* =========================================== */
/* v3.6.0 */
/* [1] theme.css  | framework, helpers, typography, responsive */
/* [2] colors.css | .primary, .secondary, .white, .light, .dark */
/* [3] forms.css  | Marketo form layout and fields */


/* ===================================================================================== */
/* ==================================[ [1] theme.css ]================================== */
/* ===================================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* NOTES: CSS Variables (version 360.21)
========================================
syntax: --element-(state)-property-value
======================================== */

/* Revision notes:  

TODO ___________________________________________________
>> find @@ -- range input border radius (line 785ish)
>> "white" color palette needs variables - use "--color-white", "--color-light" (active), "--color-dark" (reverse)

DONE ___________________________________________________

*/

:root {
	/* COLOR PALETTE */
	/* chromatic */
	--color-primary: #00c4fd;
	--color-primary-active: #0074fe;
	--color-primary-reverse: #ffffff;
	--color-secondary: #fef300;
	--color-secondary-active: #ffa400;
	--color-secondary-reverse: #ffffff;
	--color-error: #dd0000;
	--color-pink: #e033ff;
	--color-purple: #6d0080;
	/* grayscale */
	--color-dark: #000c61;
	--color-medium: #99979b;
	--color-light: #e6e6e6;
	--color-white: #ffffff;
	--color-white-active: #f2f2f3;
	--color-white-reverse: var(--color-dark);
	/* opacity */
	--color-opacity-light: rgba(0,0,0,0.3);
	--color-opacity-med: rgba(0,0,0,0.5);
	--color-opacity-dark: rgba(0,0,0,0.75);
	
	
	/* FONTS */
	--font-family-primary: 'Open Sans', sans-serif;
	--font-family-secondary: 'Open Sans', sans-serif;
	--font-size-desktop: 18px;
	--font-size-tablet: calc(var(--font-size-desktop) * 1.0);
	--font-size-mobile: calc(var(--font-size-desktop) * 1.0);
	--font-size-lg: 1.4rem;
  --font-size-sm: 0.8rem;

	/* ELEMENTS */
	/* text */
	--body-text-color: var(--color-light);
	--body-font-weight:  600;
	/* headlines */
  --headline-font-weight: 900;
  --h1-font-size: 2.3rem;
  --h2-font-size: 2rem;
  --h3-font-size: 1.75rem;
  --h4-font-size: 1.5rem;
  --h5-font-size: 1.25rem;
  --h6-font-size: 1.125rem;
  --font-size-lg: 1.2rem;

  @media screen and (min-width:991px) {
  	--h1-font-size: 3.25rem;
  	--h2-font-size: 3rem;
  	--h3-font-size: 2.125rem;
  	--h4-font-size: 1.75rem;
  	--h5-font-size: 1.25rem;
  	--h6-font-size: 1.125rem;
  }

	/* link */
	--link-color: var(--color-primary);
	--link-color-hover: var(--color-primary-active);

	/* button */
	--btn-font-size: 1rem;
  --btn-font-weight: 700;
  --btn-padding: .75rem 1.5rem;
  
  --btn-sm-font-size:  0.875rem;
  --btn-sm-font-weight: 700;
  --btn-sm-padding: 0.5rem 0.75rem;

	--btn-bgcolor-primary: var(--color-primary);
	--btn-bgcolor-primary-gradient: linear-gradient(var(--color-primary), var(--color-primary-active));
	--btn-bgcolor-primary-gradient-active: linear-gradient(var(--color-primary-active), var(--color-primary-active));
	--btn-border-color-primary: var(--color-primary);
	--btn-color-primary: var(--color-primary-reverse);
	--btn-bgcolor-primary-active: var(--color-primary-active);
	--btn-border-color-primary-active: var(--color-primary-active);
	--btn-color-primary-active: var(--color-primary-reverse);

	--btn-bgcolor-secondary: var(--color-secondary);
	--btn-border-color-secondary: var(--color-secondary);
	--btn-color-secondary: var(--color-secondary-reverse);
	--btn-bgcolor-secondary-active: var(--color-secondary-active);
	--btn-border-color-secondary-active: var(--color-secondary-active);
	--btn-color-secondary-active: var(--color-secondary-reverse);

	/* form */
	--form-input-text-color:  var(--body-text-color);
	--form-input-background-color: var(--color-white);
	--form-input-border-color:  var(--color-medium);
	--form-placholder-color: var(--color-medium);

	/* @@ consolidate as much as possible */
	--form-range-track-border-color: var(--color-medium);
  --form-range-track-background-color: var(--color-white);
  --form-range-track-focus-background-color: var(--color-light);  
  --form-range-track-height: 1rem;  
  --form-range-track-radius: .5rem;
  --form-range-input-border-color: var(--color-primary);
  --form-range-input-background-color: var(--color-primary);
  --form-range-input-height: var(--form-range-track-height);
  --form-range-input-radius: var(--form-range-track-radius);

  --form-checkbox-background-color:  var(--color-primary);
  --form-checkbox-color:  var(--color-primary-reverse);
  --form-radio-background-color:  var(--color-primary);
}

/*/ ......((GLOBAL))...... /*/
/* order sections */
/* reorder sections up and down the layout using: #Sec_ {order:X;} where [-1 >= X <= 99] */
section {-ms-flex-order: 1; order: 1; z-index: 1;}
header {-ms-flex-order: 0; order: 0; z-index: 2;}
footer {-ms-flex-order: 100; order: 100; z-index: 2;}

/* smooth scrolling */
html {scroll-behavior: smooth;}

/*/ ......((HELPER CLASSES))...... /*/
/* flex-grow */
.flex-grow-2 {-ms-flex-positive: 2 !important; flex-grow: 2 !important;}
.flex-grow-3 {-ms-flex-positive: 3 !important; flex-grow: 3 !important;}
.flex-grow-4 {-ms-flex-positive: 4 !important; flex-grow: 4 !important;}
.flex-grow-5 {-ms-flex-positive: 5 !important; flex-grow: 5 !important;}
.flex-grow-6 {-ms-flex-positive: 6 !important; flex-grow: 6 !important;}

/* show/hide toggle */
.on  {/* do nothing */}
.off {display:none !important;}

/* fluid images */
img {max-width: 100%; height:auto;}

/* rounded images */
.rounded {border-radius: 0.75rem !important;}

.border-medium {
	border-width: 4px !important;
}
.border-heavy {
	border-width: 8px !important;
}

/* z-index */
.z-index-0 {z-index:0;}
.z-index-1 {z-index:1;}

/* responsive vertical spacers (mobile = 50% smaller than tablet +)*/
.spacer-0 {padding: 0;}
.spacer-1 {padding: .25rem 0;}
.spacer-2 {padding: .5rem 0;}
.spacer-3 {padding: .75rem 0;}
.spacer-4 {padding: 1rem 0;}
.spacer-5 {padding: 2rem 0;}


/*/ ......((TYPOGRAPHY))...... /*/
html {
font-size: var(--font-size-mobile);
line-height: 1.5;

}

body {
font-family: var(--font-family-primary);
color: var(--body-text-color);
font-weight: var(--body-font-weight);
text-align: left;
overflow-x:  hidden;
/* background-image: linear-gradient(35deg, var(--color-purple) 25%, var(--color-pink) 75%, var(--color-purple));   */
background-image: linear-gradient(35deg, rgb(0 5 248 / 60%) 70%, rgb(237 0 220 / 60%)), url('../images/bg-2.png');
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
background-attachment:scroll;
}

section {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
section .filter {
	padding-top: 2rem;
	padding-bottom: 2rem;
	padding-left: 15px;
	padding-right: 15px;
}

#SEC1 {}

#SEC2 {}

#SEC3 {}

#SEC4 {}

#SEC5 {}

#SEC6 {
	background-image: url('https://cdn.prod.website-files.com/6595e3f1b89359f575590bea/65b9766941435450a71c17ac_roof-softwash.webp');
	color: #fff;	
}
#SEC6 .filter {
	background-color: var(--color-opacity-light);
}

#SEC7 {}

/* DISPLAY HEADLINE (XL+) */
.display-1 { font-size: 6.0rem; font-weight: 300; line-height: 1.2;}
.display-2 { font-size: 5.5rem; font-weight: 300; line-height: 1.2;}
.display-3 { font-size: 4.5rem; font-weight: 300; line-height: 1.2;}
.display-4 { font-size: 3.5rem; font-weight: 300; line-height: 1.2;}

/* HEADLINES */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
margin-bottom: .5rem;
font-weight: var(--headline-font-weight);
font-family: var(--font-family-secondary);
line-height: 1.3;
color: var(--color-white);
}
h1, .h1 {font-size: var(--h1-font-size);}
h2, .h2 {font-size: var(--h2-font-size);}
h3, .h3 {font-size: var(--h3-font-size);}
h4, .h4 {font-size: var(--h4-font-size);}
h5, .h5 {font-size: var(--h5-font-size);}
h6, .h6 {font-size: var(--h6-font-size);}

.title {
	font-size: 2.5rem;
}

.eyebrow {
	color: var(--color-primary);
	text-transform: uppercase;
	font-size: var(--h6-font-size);
	margin-bottom: 0;
	font-weight: 900;
}
/* number w/ circle */
.step-number {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 8px solid #fff;
    border-radius: 50%;
}

/* BODY COPY */
p.lead { font-size: var(--font-size-lg); font-weight: inherit; line-height:  1.5;} /* large paragraph */
p { margin-top: 0; margin-bottom: 1rem;}
p.small {font-size: var(--font-size-sm);} /* small paragraph */

/* BOLD */
b, strong {font-weight:700;}

/* TEXT LINKS */
a {color:var(--link-color); font-weight:normal; text-decoration: underline;}
a:hover, a:focus, a:active {color: var(--link-color-hover); text-decoration: underline;}
.alert a, .alert a:hover, .alert a:focus, .alert a:active {color: inherit;}

/* BUTTONS */
/* button default state */
button, .btn {
text-decoration:none;
font-family: var(--font-family-secondary);
font-weight: var(--btn-font-weight);
max-width:100%;
border-radius: 2rem;
padding: var(--btn-padding);
font-size: var(--btn-font-size);
line-height:1.3;
margin-right: 1rem;
margin-bottom: 1rem;
border: 0px;
}
/* small buttons */
.btn-sm {
font-size: var(--btn-sm-font-size);
font-weight:  var(--btn-sm-font-weight);
line-height: 1.5;
padding:  var(--btn-sm-padding);
}
/* button focus state */
.btn.focus, .btn:focus, .btn:not(:disabled):not(.disabled).active:focus, .btn:not(:disabled):not(.disabled):active:focus, .show>.btn.dropdown-toggle:focus {
  box-shadow: none;
  outline: -webkit-focus-ring-color auto 1px;
}

/* HORIZONTAL RULE */
hr {
border-top: 1px solid var(--color-medium);
width:100%;
margin:20px 0;
}

/* LISTS */
/* align lists flush with text */
ul, ol {padding-inline-start: 1em;}
ol, ol li { margin-left: 0; padding-left: 0; }
ol { margin-left: 1.3em; }

/* BLOCKQUOTE */
/* vertical blockquote */
blockquote {
font-size:1.25rem;
line-height:1.3;
font-weight:600;
margin-top:45px;
position:relative;
}
blockquote::before {
content: open-quote no-close-quote;
background-size: auto;
background-repeat: no-repeat;
background-position: center;
position: absolute;
top: -63px;
left: -4px;
color: inherit;
font-size: 100px;
font-family: sans-serif;
}

/* horizontal blockquote */
blockquote.blockquote-horizontal {margin-top: 0px;}
blockquote.blockquote-horizontal, blockquote.blockquote-horizontal + figcaption {margin-left: 60px;}
blockquote.blockquote-horizontal::before {top:-1.5rem; left:-60px;}

/* TABLE */
.table-hover {cursor: default;}

/* TESTIMONIALS */
.testimonial-grid {
	column-count: 1;
  column-gap: 2rem;
  margin-bottom: 2rem;
}
@media (min-width: 768px) {
.testimonial-grid {column-count: 2;}
}
@media (min-width: 992px) {
.testimonial-grid {column-count: 3;}
}

.testimonial-item {
	background-color: var(--color-opacity-light);
	border-radius: 1rem;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
	margin-bottom: 2rem;
	padding: 2rem;
	display: inline-block;
}
.testimonial-rating {
	color: #fda43e;
}
.testimonial-image {
	border-radius: 50%;
	overflow: hidden;
}
.testimonial-name {
	margin-bottom: 0px;
}
.testimonial-title {
	margin-bottom: 0px;
}

/* ACCORDION */
.accordion-grid {
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	flex-flow: column;
	display: flex;
}
.accordion-item {
	background: var(--color-opacity-light);
	border-radius: 1rem;
	transition: ease all 0.3s;
}
.accordion-button {
    margin:0;
    padding: 1.25rem 1.5rem 1rem;
    font-size: 1.25rem;
    color: inherit !important;
    text-decoration: none !important;
    outline: none !important;
    display: flex;
    width: 100%;
    align-items: center;
}
.accordion-title {
	  cursor: pointer;
    border-radius: 1rem;
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
}
.accordion-content {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	padding-bottom: 1.5rem;

}
.accordion-button[aria-expanded="true"] i.fa-chevron-down {
	transform: rotate(180deg);
}

/*/ =======[Responsive Styles]======= /*/
/*/ Small devices (landscape phones, 576px and up) /*/
@media (min-width: 576px) {

}

/*/ Medium devices (tablets, 768px and up) /*/
@media (min-width: 768px) {
	html {font-size: var(--font-size-tablet);

}

/* responsive vertical spacers (tablet+ = 2x larger than mobile)*/
.spacer-0 {padding: 0;}
.spacer-1 {padding: .5rem 0;}
.spacer-2 {padding: 1rem 0;}
.spacer-3 {padding: 1.5rem 0;}
.spacer-4 {padding: 2rem 0;}
.spacer-5 {padding: 3rem 0;}

}

/*/ Large devices (desktops, 992px and up) /*/
@media (min-width: 992px) {
	.title {
		margin-right: -20rem;
		font-size: 5rem;
		padding-top:4rem;
	}
	section .filter {
		padding-top: 4rem;
		padding-bottom: 4rem;
	}
}

/*/ Extra large devices (large desktops, 1200px and up) /*/
@media (min-width: 1200px) {
html {font-size: var(--font-size-desktop);}
}

/*/ XXL devices (large desktops, 1400px and up) /*/
@media (min-width: 1400px) {
	/* XXL containers */
	.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
		max-width: 1320px;
	}
}

/* ====================================================================================== */
/* ==================================[ [2] colors.css ]================================== */
/* ====================================================================================== */

.bg-opacity-light {background-color: var(--color-opacity-light);}
.bg-opacity-medium {background-color: var(--color-opacity-medium);}
.bg-opacity-dark {background-color: var(--color-opacity-dark);}

/* :::::::::::::::::::::::: */
/* ::::::: primary :::::::: */
/* :::::::::::::::::::::::: */

/* ALERT */
.alert-primary {color: var(--color-primary-reverse); background-color: var(--color-primary); border-color: var(--color-primary);}
.alert-primary hr {border-top-color: var(--color-primary-reverse);}

/* BADGE */
.badge-primary { color: var(--color-primary-reverse); background-color: var(--color-primary);}

/* BACKGROUND */
.bg-primary {background-color: var(--color-primary) !important;}

/* BORDER */
.border-primary {border-color: var(--color-primary) !important;}

/* BUTTON */
/* static state */
.btn-primary, .btn-primary.disabled, .btn-primary:disabled { 
	color: var(--btn-color-primary);
	background: var(--btn-bgcolor-primary-gradient); 
	border-color: var(--btn-border-color-primary);
}
/* active states */
.btn-primary:hover, .btn-primary.focus, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle { 
	color: var(--btn-color-primary-active); 
	background: var(--btn-bgcolor-primary-gradient-active); 
	border-color: var(--btn-border-color-primary-active); 
}

/* LIST */
.list-primary li::marker {color: var(--color-primary);}
/* icon lists */
.fa-ul.list-primary li span[class^="fa"] {color: var(--color-primary);}
.fa-ul {margin-left: var(--fa-li-margin,1.5em);}

/* LIST GROUP ITEM */
.list-group-item-primary {color: var(--color-primary-reverse); background-color: var(--color-primary);}
.list-group-item-primary.list-group-item-action:focus, 
.list-group-item-primary.list-group-item-action:hover,
.list-group-item-primary.list-group-item-action.active {
	color: var(--color-primary-reverse); background-color: var(--color-primary-active);
}

/* TABLE */
.table-primary a {color: inherit;}
.table-primary, .table-primary>td, .table-primary>th { background-color: var(--color-primary); color: var(--color-primary-reverse);}
.table-primary tbody+tbody, .table-primary td, .table-primary th, .table-primary thead th { border-color: var(--color-primary-active);}
.table-primary tbody th, .table-primary tbody td { background-color: var(--color-primary-active); color: var(--color-primary-reverse);}
.table-primary thead th { border-bottom-color: var(--color-primary-reverse);}
/* hover table */
.table-hover.table-primary tbody tr:hover td, .table-hover.table-primary tbody tr:hover th { color: var(--color-primary-reverse); background-color: var(--color-primary);}
/* bordered table */
.table-primary.table-bordered tbody+tbody, .table-primary.table-bordered td, .table-primary.table-bordered th, .table-primary.table-bordered thead th { border-color: var(--color-primary-reverse);}

/* TEXT */
.text-primary {color: var(--color-primary) !important;}

/* TEXT LINKS */
a.text-primary:focus, a.text-primary:hover {color: var(--color-primary-active) !important;}


/* :::::::::::::::::::::::::: */
/* ::::::: secondary :::::::: */
/* :::::::::::::::::::::::::: */

.table-secondary, .table-secondary>td, .table-secondary>th { background-color: #898989;}
.table-secondary tbody+tbody, .table-secondary td, .table-secondary th, .table-secondary thead th { border-color: #898989;}
.table-hover .table-secondary:hover { background-color: #898989;}
.table-hover .table-secondary:hover>td, .table-hover .table-secondary:hover>th { background-color: #898989;}

.btn-secondary { color: #fff; background-color: var(--color-secondary); border-color: var(--color-secondary);}
.btn-secondary:hover { color: #fff; background-color: #656565; border-color: #656565;}
.btn-secondary.focus, .btn-secondary:focus { box-shadow: none; color:#fff; background-color: #656565; border-color: #656565;}
.btn-secondary.disabled, .btn-secondary:disabled { color: #fff; background-color: var(--color-secondary); border-color: var(--color-secondary);}
.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle { color: #fff; background-color: #656565; border-color: #656565;}
.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show>.btn-secondary.dropdown-toggle:focus { box-shadow: none;}

.btn-outline-secondary { color: var(--color-secondary); border-color: var(--color-secondary);}
.btn-outline-secondary:hover { color: #fff; background-color: var(--color-secondary); border-color: var(--color-secondary);}
.btn-outline-secondary.focus, .btn-outline-secondary:focus { box-shadow: none; color:#fff; background-color: var(--color-secondary); border-color: var(--color-secondary);}
.btn-outline-secondary.disabled, .btn-outline-secondary:disabled { color: var(--color-secondary); background-color: transparent;}
.btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active, .show>.btn-outline-secondary.dropdown-toggle { color: #fff; background-color: var(--color-secondary); border-color: var(--color-secondary);}
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .show>.btn-outline-secondary.dropdown-toggle:focus { box-shadow: none;}

.badge-secondary { color: #fff; background-color: var(--color-secondary);}

.alert-secondary {color: #656565; background-color: #898989; border-color: #898989;}
.alert-secondary hr {border-top-color: #898989;}
.alert-secondary .alert-link {color: #656565;}

.list-group-item-secondary {color: #656565; background-color: #898989;}
.list-group-item-secondary.list-group-item-action:focus, .list-group-item-secondary.list-group-item-action:hover {color: #656565; background-color: #898989;}
.list-group-item-secondary.list-group-item-action.active {color: #fff; background-color: #656565; border-color: #656565}

.bg-secondary {background-color: var(--color-secondary)!important;}
.border-secondary {border-color: var(--color-secondary)!important;}
.text-secondary {color: var(--color-secondary)!important;}
a.text-secondary:focus, a.text-secondary:hover {color: #656565!important;}
ul.list-secondary li::before {color: var(--color-secondary);}

/* :::::::::::::::::::::: */
/* ::::::: white :::::::: */
/* :::::::::::::::::::::: */

.table-white, .table-white>td, .table-white>th { background-color: var(--color-white);}
.table-white tbody+tbody, .table-white td, .table-white th, .table-white thead th { border-color: var(--color-white);}
.table-hover .table-white:hover { background-color: var(--color-white);}
.table-hover .table-white:hover>td, .table-hover .table-white:hover>th { background-color: var(--color-white);}

.btn-white { color: var(--color-white-reverse); background-color: var(--color-white); border-color: var(--color-white);}
.btn-white:hover { color: var(--color-white-reverse); background-color: var(--color-white-active); border-color: var(--color-white-active);}
.btn-white.focus, .btn-white:focus { box-shadow: none; color:var(--color-white-reverse); background-color: var(--color-white-active); border-color: var(--color-white-active);}
.btn-white.disabled, .btn-white:disabled { color: var(--color-white-reverse); background-color: var(--color-white); border-color: var(--color-white);}
.btn-white:not(:disabled):not(.disabled).active, .btn-white:not(:disabled):not(.disabled):active, .show>.btn-white.dropdown-toggle { color: var(--color-white-reverse); background-color: var(--color-white-active); border-color: var(--color-white-active);}
.btn-white:not(:disabled):not(.disabled).active:focus, .btn-white:not(:disabled):not(.disabled):active:focus, .show>.btn-white.dropdown-toggle:focus { box-shadow: none;}

.btn-outline-white { color: var(--color-white); border-color: var(--color-white);}
.btn-outline-white:hover { color: var(--color-white-reverse); background-color: var(--color-white); border-color: var(--color-white);}
.btn-outline-white.focus, .btn-outline-white:focus { box-shadow: none; color:var(--color-white-reverse); background-color: var(--color-white); border-color: var(--color-white);}
.btn-outline-white.disabled, .btn-outline-white:disabled { color: var(--color-white); background-color: transparent;}
.btn-outline-white:not(:disabled):not(.disabled).active, .btn-outline-white:not(:disabled):not(.disabled):active, .show>.btn-outline-white.dropdown-toggle { color: var(--color-white-reverse); background-color: var(--color-white); border-color: var(--color-white);}
.btn-outline-white:not(:disabled):not(.disabled).active:focus, .btn-outline-white:not(:disabled):not(.disabled):active:focus, .show>.btn-outline-white.dropdown-toggle:focus { box-shadow: none;}

.badge-white { color: var(--color-white-reverse); background-color: var(--color-white);}

.alert-white {color: var(--color-white-active); background-color: var(--color-white); border-color: var(--color-white);}
.alert-white hr {border-top-color: var(--color-white);}
.alert-white .alert-link {color: var(--color-white-active);}

.list-group-item-white {color: var(--color-white-active); background-color: var(--color-white);}
.list-group-item-white.list-group-item-action:focus, .list-group-item-white.list-group-item-action:hover {color: var(--color-white-active); background-color: var(--color-white);}
.list-group-item-white.list-group-item-action.active {color: var(--color-white-reverse); background-color: var(--color-white-active); border-color: var(--color-white-active)}
.bg-white {background-color: var(--color-white)!important;}
.border-white {border-color: var(--color-white)!important;}
.text-white {color: var(--color-white)!important;}
a.text-white:focus, a.text-white:hover {color: var(--color-white-active)!important;}
ul.list-white li::before {color: var(--color-white);}


/* ======================================================================================== */
/* ==================================[ [3.11] forms.css ]================================== */
/* ======================================================================================== */

/* use form font-size (in terms of rem) to set the rest with "em" (labels, error text, checkbox and radio...) */

/* DEV NOTES: 

   ** TODO *************************************
   __ establish CSS var structure
   __ remove as many !important tags as possible - add a comment: "override inline style" to any !important tags
   __ check for "@@" notes

   ** ISSUES ***********************************
   __ Marketo form > <style> could be removed via script (??) (effects button outline) -- what's loaded there for sure? [button CSS maybe?]

   ** TESTING **********************************
   __ test with every combination of form theme
   __ test a few custom buttons
   __ test labels above and labels left
   __ test Chrome, Firefox, Edge and Safari


   ** COMPLETE *********************************
   ☑ incorporate Range field CSS from bottom to middle
*/


/* FORM */
form.mktoForm {
    font-family: inherit !important; /* override inline style */
    font-size: 0.8rem !important; /* override inline style */
    color: inherit !important; /* override inline style */
}

/* Make these element full-width */
/* @@ could this be "form.mktoForm .mktoHasWidth" instead of individual selectors? =========================================================== */
form.mktoForm, form.mktoForm input, 
form.mktoForm select, 
form.mktoForm textarea, 
form.mktoForm .mktoHtmlText, 
form.mktoForm .mktoCheckboxList, 
form.mktoForm .mktoRadioList, 
form.mktoForm label.mktoLabel {
    width: 100% !important; /* override inline style */
}

/* ROWS */
form.mktoForm .mktoFormRow {
    display: flex;
    margin: 0 -10px;
    flex-direction: column; /* stacked fields */
}
@media screen and (min-width:576px) {
    form.mktoForm .mktoFormRow {
        flex-direction: row; /* columned fields */
    }
}

/* COLUMN (including 'fieldset.mktoFormCol') */
form.mktoForm .mktoFormCol {
    margin-bottom: 0px !important; /* override inline style */
    flex-grow: 1;
    flex-basis: 0;
    padding: 0 10px !important; /* override inline style (fieldset) */
}
form.mktoForm .mktoFieldWrap {
    margin-bottom: 1rem;
}

/* LABELS */
form.mktoForm label.mktoLabel {
    display: flex;
    font-weight: bold;
    font-size: 1em;
    line-height: 1.25em;
    padding-bottom: 0.4rem;
    margin-bottom: 0;
}

/* ASTERIX */
form.mktoForm label.mktoLabel .mktoAsterix {
    /* color: var(--color-error); */ /* @@ remove error color */
    margin-right: 5px;
    display: none;
}
form.mktoForm .mktoRequiredField label.mktoLabel .mktoAsterix {
    display:  inline-block;
}

/* INPUTS */
/* Global (all inputs) */
/* @@ break this down by element - eliminate GLOBAL scope (or use CSS vars) */
form.mktoForm input, 
form.mktoForm select, 
form.mktoForm textarea {
    border-radius: 0px;
    background-color: var(--form-input-background-color);
    color: var(--form-input-text-color);
    border: 1px solid var(--form-input-border-color);
    -webkit-appearance: none;
    border-radius: 0;
}

form.mktoForm input, 
form.mktoForm select {
    height: 2.5rem;
    padding: .25rem .75rem;
}

/* SELECT ___________________ */
form.mktoForm select {
    background-image: linear-gradient(135deg, var(--form-placholder-color) 50%, transparent 50%), linear-gradient(45deg, transparent 50%, var(--form-placholder-color) 50%); /* downward triangle - match placeholder color */
    background-position: calc(100% - 15px) 1rem, calc(100% - 20px) 1rem;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
/* |>> Select not-valid states ............. */
form.mktoForm select:not(.mktoValid),
form.mktoForm select.mktoInvalid {
    color: var(--form-placholder-color);
}
/* |>> Select invalid states .................. */
form.mktoForm select.mktoInvalid:active,
form.mktoForm select.mktoInvalid:focus {
    color: initial;
}
/* |>> Select active states ........ */
form.mktoForm select.mktoValid,
form.mktoForm select:focus,
form.mktoForm select:active {
    background-image: linear-gradient(135deg, var(--body-text-color) 50%, transparent 50%), linear-gradient(45deg, transparent 50%, var(--body-text-color) 50%); /* downard triangle - :focus-color */
}

form.mktoForm select.mktoInvalid {
    background-image: linear-gradient(135deg, var(--color-error) 50%, transparent 50%), linear-gradient(45deg, transparent 50%, var(--color-error) 50%); /* downward triangle - error-red */
    color: var(--color-error);
}

/* MULTI-SELECT */
form.mktoForm select[multiple="multiple"],
form.mktoForm select[multiple="multiple"].mktoValid,
form.mktoForm select[multiple="multiple"].mktoInalid {
    height: initial;
    background-image: none; /* hide dropdown arrow */
    padding: 0;
}
/* multi-select options */
form.mktoForm select[multiple="multiple"] option {
    display: flex;
    min-height: 1.5rem;
    align-items: center;
    padding: 0 .5rem;
}


/* TEXTAREA */
form.mktoForm textarea {
    padding: .25rem .75rem;
}

/* CHECKBOX & RADIO */
form.mktoForm .mktoCheckboxList, form.mktoForm .mktoRadioList {
    display: grid;
    grid-template-columns: 20px 1fr;
    grid-gap: 5px 10px;
}
/* Checkbox & Radio labels */
form.mktoForm .mktoCheckboxList label, form.mktoForm .mktoRadioList label {
    font-size: 0.8rem;
    line-height: 20px;
    margin-bottom: 0px;
    cursor: pointer;
}
form.mktoForm .mktoCheckboxList input, form.mktoForm .mktoRadioList input {
    height: 20px;
    width: 20px;
    padding: 0px; 
    cursor: pointer;
}

/* RADIO INPUT */
form.mktoForm .mktoRadioList input {
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items:center;
}
form.mktoForm .mktoRadioList input:checked::before {
    content: "";
    width: 14px;
    height: 14px;
    background-color: var(--form-radio-background-color);
    border-radius: 50%; 
}

/* CHECKBOX INPUT */
form.mktoForm .mktoCheckboxList input:checked {
    border-color: var(--form-checkbox-background-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
form.mktoForm .mktoCheckboxList input:checked::before {
    content: "\2714";
    height: 100%;
    width: 100%;
    font-size: 0.8rem;
    line-height: 0.8rem;
    background-color: var(--form-checkbox-background-color);
    color: var(--form-checkbox-color);
    display: flex;
    align-items: center;
    justify-content: center;
    outline: 1px solid var(--form-checkbox-background-color);
}

/* FIELDSETS */
form.mktoForm fieldset.mktoFormCol {
    margin-bottom: 0px !important;
}

form.mktoForm legend {
    font-size: inherit;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

/* RANGE ______________________ */
form.mktoForm .mktoRangeField .mktoRangeValue {
    zoom: 1;
    float: left;
    display: none;
    text-align: center;
    position: absolute;
    z-index: 99;
    color: var(--body-text-color);
    top: -.75rem;
    width: 100%;
}
form.mktoForm .mktoRangeField {
    width: 100% !important; /* override inline style */
    position: relative;
}
form.mktoForm input[type="range"] {
    padding: 0px;
    height: calc(1rem - 1px); /* center indicator */
    box-sizing: content-box;
    border-radius: 0.5rem;
    border: 0px;
}

form.mktoForm .mktoRangeField .mktoRangeValueText {
    display: inline-block;
    width: 40px !important;
    text-align: center;
    background-color: var(--color-white);
    background-image: none;
    border: none;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    box-shadow: 0 0 0.5rem rgba(0,0,0,0.2);
    color: var(--body-text-color);
    font-size: 1em;
    line-height: 1.2em;
    padding: 0.4em 0.6em;
    text-shadow: none;
    font-weight: bold;
    text-align: center;
    margin: 1rem 0 0 0;
}

.mktoForm .mktoRangeField.mktoHover .mktoRangeValue {
    display: block;
}

input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: var(--form-range-track-height); 
  cursor: pointer;
  background: var(--form-range-track-background-color); 
  border-radius: var(--form-range-track-radius); 
  border: 1px solid var(--form-range-track-border-color); 
}
input[type=range]::-webkit-slider-thumb {
  border: 1px solid var(--form-range-input-border-color);
  height: var(--form-range-input-height);
  width: 1rem;
  border-radius: var(--form-range-input-radius);
  background: var(--form-range-input-background-color);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -1px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: rgb(170 170 170 / 15%); /* range-track-focus-background-color */
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 1rem;
  cursor: pointer;
  background: var(--form-range-track-background-color);
  border-radius: var(--form-range-track-radius); 
  border: 1px solid var(--form-range-track-border-color); 
}
input[type=range]::-moz-range-thumb {
  border: 1px solid var(--form-range-input-border-color);
  height: var(--form-range-input-height);
  width: 1rem;
  border-radius: var(--form-range-input-radius);
  background: var(--form-range-input-background-color);
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: var(--form-range-input-height);
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 1rem 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: var(--form-range-track-background-color);
  border: 1px solid var(--form-range-track-border-color);
  border-radius: var(--form-range-track-radius);
}

input[type=range]::-ms-fill-upper {
  background: var(--form-range-track-background-color);
  border: 1px solid var(--form-range-track-border-color);
  border-radius: var(--form-range-track-radius);
}
input[type=range]::-ms-thumb {
  border: 1px solid var(--form-range-input-border-color);
  height: var(--form-range-input-height);
  width: 1rem;
  border-radius: 3px; /* @@ should this be more dynamic? */
  background: var(--form-range-input-background-color);
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: var(--form-range-track-background-color);
}
input[type=range]:focus::-ms-fill-upper {
  background: var(--form-range-track-focus-background-color);
}

/* ERROR */
form.mktoForm .mktoError {
    margin-top: 0.25rem;
    /* color:  var(--color-error); */ /* @@ remove error color */
    font-size: 0.9em;
}

/* REQUIRED FIELDS */
form.mktoForm input.mktoInvalid, 
form.mktoForm select.mktoInvalid, 
form.mktoForm textarea.mktoInvalid {
    border-color: var(--color-error);
} 
form.mktoForm input.mktoInvalid:focus, 
form.mktoForm select.mktoInvalid:focus, 
form.mktoForm textarea.mktoInvalid:focus {
    outline: 1px auto var(--color-error);
    box-shadow: none;
} 

/* BUTTON ROW */
form.mktoForm .mktoButtonRow {
    display: flex;
}
/* BUTTON WRAP */
form.mktoForm .mktoButtonWrap {
    margin: 0 !important; /* override inline style */
    display: flex;
    justify-content: center; /* to align button use: 'flex-start' (left), 'center' (center), 'flex-end' (right) */
    flex-grow:1;
}

/* BUTTON */
/* static state */
form.mktoForm .mktoButtonWrap[class] .mktoButton {
    color: var(--btn-color-primary);
    border:1px solid var(--btn-border-color-primary);
    padding: var(--btn-padding);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    background: var(--btn-bgcolor-primary);
    flex-grow: 0; /* button width: '0' (inline), '1' (full-width) */
    margin-top: 10px;
    margin-right: auto; /* "0" for centered button */
}
/* active states */
form.mktoForm .mktoButtonWrap[class] .mktoButton:hover,
form.mktoForm .mktoButtonWrap[class] .mktoButton:active,
form.mktoForm .mktoButtonWrap[class] .mktoButton:focus {
    border:1px solid var(--color-primary-active);
    background: var(--color-primary-active);
    color: var(--btn-color-primary-active);
}
/* focus state */
form.mktoForm .mktoButtonWrap[class] .mktoButton:focus {
    box-shadow: none;
    outline: -webkit-focus-ring-color auto 1px;
}
/* reverse: static state */
body.formButton-reverse form.mktoForm .mktoButtonWrap[class] .mktoButton {
    color: var(--form-bgcolor);
    border:1px solid var(--form-bgcolor);
    background: var(--form-color);
}
/* reverse: active states */
body.formButton-reverse form.mktoForm .mktoButtonWrap[class] .mktoButton:hover,
body.formButton-reverse form.mktoForm .mktoButtonWrap[class] .mktoButton:active,
body.formButton-reverse form.mktoForm .mktoButtonWrap[class] .mktoButton:focus {
    border:1px solid var(--form-color);
    background: var(--form-bgcolor);
    color: var(--form-color);
}

/* PLACEHOLDERS ________________________ */
::-moz-placeholder{color: var(--form-placholder-color);}
::-webkit-input-placeholder{color: var(--form-placholder-color);}
:-ms-input-placeholder{color: var(--form-placholder-color);}
::placeholder{color: var(--form-placholder-color);}

/* :::::::::::::::::::::::::::::::: */
/* :::::[ Form Layout Styles ]::::: */
/* :::::::::::::::::::::::::::::::: */

/* Form Layout > Settings: LABELS-ABOVE ---------------- */
body.formLabels-above form.mktoForm .mktoFieldWrap {
    flex-direction: column;
    align-items: flex-start;
}

body.formLabels-above form.mktoForm label.mktoLabel {
    text-align: left;
    width: 100%;
}

/* Form Layout > Settings: LABELS-LEFT ------------------ */
body.formLabels-left form.mktoForm .mktoFormCol {
    flex-basis: 100%; /* full width columns */
}
body.formLabels-left form.mktoForm label.mktoLabel {
    display: block;
    padding: 0;
    text-align: right;
    min-width: 120px; /* set width for labels left */
    width: 120px !important; /* set width for labels left */
    flex-shrink: 2;
    align-self:center; /* vertically center labels */
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
@media screen and (min-width: 991px){
	body.formLabels-left form.mktoForm legend {
	    margin-left: 130px;
	}
	body.formLabels-left form.mktoForm .mktoButtonWrap[class] .mktoButton {
	    margin-left: 130px;
	}
}


/* Labels Left | mobile stack */
body.formLabels-left .mktoFieldWrap {
    flex-direction: column;
}
/* Labels left | mobile label text align */
body.formLabels-left form.mktoForm label.mktoLabel {
    text-align: left;    
}

@media screen and (min-width:576px) {
/* Labels left | label text align */
	body.formLabels-left form.mktoForm label.mktoLabel {
	    text-align: right;    
	}

	/* Labels left | fieldwrap grid */    
	body.formLabels-left form.mktoForm .mktoFieldWrap {
	    display: grid;
	    grid-template-areas:
	        "label input"
	        ". text"
	        "full full";
	    grid-template-columns: 120px auto;
	    grid-gap:0 10px;
	}
	/* Labels left | error text */
	body.formLabels-left form.mktoForm .mktoError {
	    grid-area: text;
	}
	/* Labels left | HtmlText */
	body.formLabels-left form.mktoForm div.mktoHtmlText {
	    grid-area: text;
	}
}

body.formLabels-left form.mktoForm .mktoGutter {
    display: none;
}
body.formLabels-left form.mktoForm .mktoFormRow {
    flex-direction: column; /* collapse 2+ column rows to 1-col */
}

/* :::::::::::::::::::::::::::::::: */
/* :::::[ Form Label Styles ]::::: */
/* :::::::::::::::::::::::::::::::: */
/* hidden labels */
body.formLabels-off form.mktoForm label.mktoLabel {
    display: none;
}
/* adjust grid for hidden labels */
@media screen and (min-width: 576px) {
body.formLabels-left.formLabels-off form.mktoForm .mktoFieldWrap {
    display: block;
    grid-template-areas:
        "label input"
        "text text"
        "full full";
    grid-template-columns: 100%;
    grid-gap: 0 10px;
}
}