:root {
 
    /* Font Sizes */
--fine-print: 11px; 
--small-size: 12px; 
--base-small: 14px;
--base-size: 16px;
--h6: 16px;
--h5: 17px;
--h4: 18px;
--h3: 20px;
--h2: 22px;
--h1: 26px;
--hero: 78px;

/* colors */
--blue: #238fbe;
--white: #fff;
--black: #000;
--sand: #F8EFE5;
--navy: #1a3441;
--gray: #EAEAEA;

--forest-green: #415F6B;
--lavender: #CBCFE4;

--brick: #975121;
--pink: #F49BB5;

--lemon: #CFDA16;

--peach: #FFCAAC;
--olive: #717658;

--lilac: #D9C1D6;
--sea-green: #308E7A;

	/* Font Styles */
    --header-style: 'Open Sans', Helvetica, Arial, sans-serif;
    --body-style: 'Open Sans', Helvetica, Arial, sans-serif;
    --alt-style: 'Open Sans', Helvetica, Arial, sans-serif;

    /********* SPACING ********/
   --grid-gutter: 35px;
   --grid-gutter-half: calc(0.5 * var(--grid-gutter));
    --grid-gutter-quarter: calc(0.25 * var(--grid-gutter));
    --grid-gutter-2x: calc(2 * var(--grid-gutter));
    --grid-gutter-3x: calc(3 * var(--grid-gutter));
   --section-spacing: 55px;
   --width-site: 1200px;
   --narrow-width: 860px;
   --extra-narrow-width: 560px;

   /************* MISC *************/
   --input-radius: 5px;
   --min-height: 44px;
   --button-radius: 3px;
   --border-radius: 10px;
   --border-width: 1px;
   --header-line-height: 1.1;
   --header-weight: 600;
   --duration-short: 0.33s;
  }

   @media only screen and (max-width:749px) {
  :root {
  	/* Font Sizes */
  	--small-size: 12px;
  	--base-size: 14px;
  	--h6: 15px;
  	--h5: 17px;
  	--h4: 18px;
  	--h3: 19px;
  	--h2: 20px;
   	--h1: 22px;
   	--hero: 40px;

   --grid-gutter: 20px;
   --section-spacing: 25px;
  }
   }

/* COLORS */
.lavender {
    color: var(--lavender);
}
.lavender-back {
    background-color: var(--lavender);
}
.forest-green {
    color: var(--forest-green);
}
.forest-green-back {
    background-color: var(--forest-green);
} 
.brick {
    color: var(--brick);
}
.brick-back {
    background-color: var(--brick);
}
.pink {
    color: var(--pink);
}
.pink-back {
    background-color: var(--pink);
}
 


.q1 {
    color: var(--forest-green);
}
.q1 .faq-question {
    color: var(--lavender);
}
.q1 .btn {
    color: var(--forest-green);
    background-color: var(--lavender);
}
.q1 .faq-answer .header {
    color: var(--forest-green);
    background-color: var(--lavender);
}
.q1 .image, .q1 .sub-image{
    border-color: var(--lavender)
}

.q2 {
    color: var(--brick);
}
.q2 .faq-question {
    color: var(--pink);
}
.q2 .btn {
    color: var(--brick);
    background-color: var(--pink);
}
.q2 .faq-answer .header {
    color: var(--brick);
    background-color: var(--pink);
}
.q2 .image, .q2 .sub-image{
    border-color: var(--pink)
}

.q3 {
    color: var(--navy);
}
.q3 .faq-question {
    color: var(--lemon);
}
.q3 .btn {
    color: var(--navy);
    background-color: var(--lemon);
} 
.q3 .faq-answer .header {
    color: var(--navy);
    background-color: var(--lemon);
}
.q3 .image, .q3 .sub-image{
    border-color: var(--lemon)
}


.q4 {
    color: var(--olive);
}
.q4 .faq-question {
    color: var(--peach);
}
.q4 .btn {
    color: var(--olive);
    background-color: var(--peach);
} 
.q4 .faq-answer .header {
    color: var(--olive);
    background-color: var(--peach);
}
.q4 .image, .q4 .sub-image{
    border-color: var(--peach)
}


.q5 {
    color: var(--sea-green);
}
.q5 .faq-question {
    color: var(--lilac);
}
.q5 .btn {
    color: var(--sea-green);
    background-color: var(--lilac);
} 
.q5 .faq-answer .header {
    color: var(--sea-green);
    background-color: var(--lilac);
}
.q5 .image, .q5 .sub-image{
    border-color: var(--lilac)
}


.q6 {
    color: var(--forest-green);
}
.q6 .faq-question {
    color: var(--lavender);
}
.q6.btn {
    color: var(--forest-green);
    background-color: var(--lavender);
}
.q6 .faq-answer .header {
    color: var(--forest-green);
    background-color: var(--lavender);
}
.q6 .image, .q6 .sub-image{
    border-color: var(--lavender)
}


.q7 {
    color: var(--brick);
}
.q7 .faq-question {
    color: var(--pink);
}
.q7 .btn {
    color: var(--brick);
    background-color: var(--pink);
}
.q7 .faq-answer .header {
    color: var(--brick);
    background-color: var(--pink);
}
.q7 .image, .q7 .sub-image{
    border-color: var(--pink)
}

 
.q8 {
    color: var(--navy);
}
.q8 .faq-question {
    color: var(--lemon);
}
.q8 .btn {
    color: var(--navy);
    background-color: var(--lemon);
} 
.q8 .faq-answer .header {
    color: var(--navy);
    background-color: var(--lemon);
}
.q8 .image, .q8 .sub-image{
    border-color: var(--lemon)
}


.q9 {
    color: var(--olive);
}
.q9 .faq-question {
    color: var(--peach);
}
.q9 .btn {
    color: var(--olive);
    background-color: var(--peach);
} 
.q9 .faq-answer .header {
    color: var(--olive);
    background-color: var(--peach);
}
.q9 .image, .q9 .sub-image{
    border-color: var(--peach)
}


.q10 {
    color: var(--sea-green);
}
.q10 .faq-question {
    color: var(--lilac);
}
.q10 .btn {
    color: var(--sea-green);
    background-color: var(--lilac);
} 
.q10 .faq-answer .header {
    color: var(--sea-green);
    background-color: var(--lilac);
}
.q10 .image, .q10 .sub-image{
    border-color: var(--lilac)
}


.q11 {
    color: var(--forest-green);
}
.q11 .faq-question {
    color: var(--lavender);
}
.q11 .btn {
    color: var(--forest-green);
    background-color: var(--lavender);
}
.q11 .faq-answer .header {
    color: var(--forest-green);
    background-color: var(--lavender);
}
.q11 .image, .q11 .sub-image{
    border-color: var(--lavender)
}


.q12 {
    color: var(--brick);
}
.q12 .faq-question {
    color: var(--pink);
}
.q12 .btn {
    color: var(--brick);
    background-color: var(--pink);
}
.q12 .faq-answer .header {
    color: var(--brick);
    background-color: var(--pink);
}
.q12 .image, .q12 .sub-image{
    border-color: var(--pink)
}

.faq-answer .header {
	padding: 0.5em;
	font-weight: 600;
    font-size: var(--h5);
}

   .faq-item {
	border-bottom: 1px solid var(--gray);
	padding: 1em 0.5em 0.5em;
}

.faq-item ul,   .faq-item  li, .faq-item h3, .faq-item p {
    color: unset;
  }

  .faq-item button {
    background: transparent;
    border: none;
    padding: 0;
    font-style: inherit;
    font-weight: inherit;
    font-family: inherit;
    color: inherit;
  }

 

.faq-item .image {
	border-style: solid;
    border-width: 2px; 
	overflow: hidden;
	width: auto;
	margin: auto;
	max-width: 100%;
}
button.faq-question {
	display: flex;
	position: relative;
	width: 100%;
	font-size: var(--h4);
	padding: 0 1.5em 0 0;
    text-align: left;
}
  .faq-question.active .indicator {
    transform: rotate(315deg);
  }
  .faq-question .indicator {
    position: absolute;
    right: 0;
    transform: rotate(0deg);
    transition: transform 0.5s ease;
  }
  .faq-answer.active {
	margin-top: var(--grid-gutter);
	display: grid;
	gap: var(--grid-gutter);
}

.image video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--black);
}
.image-with-sub {
    position: relative;
    margin-bottom: 80px;
}
.faq-item .sub-image {
	position: absolute;
	z-index: 1;
	bottom: -40px;
	left: -200px;
	width: 300px;
	border-style: solid;
    border-width: 2px; 
}

.video-modal {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column;
}
.video-modal .inner {
	width: var(--width-site);
	max-width: calc(100% - (2 * var(--grid-gutter)));
	margin: auto;
	aspect-ratio: 16/9;
	position: relative;
}
.video-modal video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 25px;
	border: 1.5px solid var(--gray);
	box-shadow: 0.2vw 0.2vw 0.4vw var(--gray);
}
.video-modal .close {
	background: var(--blue);
	width: 3em;
	height: 3em;
	border-radius: 100%;
	color: var(--white);
	position: absolute;
	right: -1.5em;
	top: -1.5em;
}

.video-thumb {
    position: relative; 
	aspect-ratio: 16/9;
}


.video-thumb:hover::before {
    opacity: 0;
}
.video-thumb::before {
	content: "";
	display: flex;
	height: 100%;
	width: 100%;
	position: absolute; 
	background: var(--black);
	opacity: 0.2;
    transition: opacity 0.33s ease;
}


.video-thumb::after {
	width: 48px;
	height: 48px;
	display: flex;
	content: "";
	-webkit-mask: url("data:image/svg+xml;base64,PHN2ZyAgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9Ii0zIDAgMjIuMDAxIDI4LjAyOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxwYXRoIGQ9Im0xOC40MTUgMTIuNTczLTE4Ljk5Ny0xMi4yNDNjLTEuMTI3LTAuNjA3LTIuNDE4LTAuNTQ0LTIuNDE4IDEuNjM1djI0LjEwOGMwIDEuOTkyIDEuMzg1IDIuMzA2IDIuNDE4IDEuNjM1bDE4Ljk5Ny0xMi4yNDNjMC43ODItMC43OTkgMC43ODItMi4wOTMgMC0yLjg5MiIvPgo8L3N2Zz4K") no-repeat 50% 50%;
	mask: url("data:image/svg+xml;base64,PHN2ZyAgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9Ii0zIDAgMjIuMDAxIDI4LjAyOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxwYXRoIGQ9Im0xOC40MTUgMTIuNTczLTE4Ljk5Ny0xMi4yNDNjLTEuMTI3LTAuNjA3LTIuNDE4LTAuNTQ0LTIuNDE4IDEuNjM1djI0LjEwOGMwIDEuOTkyIDEuMzg1IDIuMzA2IDIuNDE4IDEuNjM1bDE4Ljk5Ny0xMi4yNDNjMC43ODItMC43OTkgMC43ODItMi4wOTMgMC0yLjg5MiIvPgo8L3N2Zz4K") no-repeat 50% 50%;
	background-color: var(--white);
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	bottom: 0;
}

 

   /* SITE OVERRIDES */
   video::-webkit-media-controls-panel {
     
    background-image: linear-gradient(0deg, rgba(35,143,190,0.6) 0%, rgba(35,143,190,0.6) 70%, rgba(255,255,255,0) 50%);
}

   .cms-content ul li {
    list-style: inherit;
   }
   .facets-facet-browse h4 {
    font-size: var(--base-size);
  }

