@charset "UTF-8";

/* Web Solutions 4.0 Compatible */



:is(.button, button, input:is([type="button"], [type="submit"], [type="reset"])):is(:hover, :focus) {
	background-color: var(--ws-dk-blue);
	border-color: var(--ws-dk-blue);
	color: #FFF;
}


:is(.button, button):is(.dk-blue, .yellow):is(:hover, :focus) {
	background-color: var(--ws-blue);
	border-color: var(--ws-blue);
}


/* HEADINGS ------------------------------ */
h1 { font-size: clamp(2.25em, 1.24em + 2.15vw, 3.125em); }
h2 { font-size: clamp(2em, 1.423em + 1.23vw, 2.5em); }
h3 { font-size: 1.375em; }
h4, th { font-size: 1.3125em; }
h5 { font-size: 1.25em; }
h6 { font-size: 1.125em; }

h1>span {
	font-size: 80%;
}

h2>span {
	font-size: 75%;
}

.intro { font-size: clamp(1.125em, 0.764em + 0.77vw, 1.438em); }


/* HEADER ------------------------------*/
body>header {
	background: var(--ws-dk-blue);
	padding: 0 1.875em;
	position: sticky;
	top: 0;
	z-index: 3;
}

body.management>header {
	top: 35px;
}

body>header #brand {
	display: block;
	position: absolute;
	top: .5em;
	transition: all .5s ease;
	width: 15.625em;
}

body>header.scrolled #brand {
	opacity: 0;
	transform: translateX(-18em);
}

body>header #brand img {
	display: block;
	height: auto;
	width: 100%;
}

body>header::after {
	background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	content: '';
	left: 0;
	position: absolute;
	top: 100%;
	height: 0.1875em;
	width: 100%;
	z-index: -1;
}

body:not(.home)>header::after {
	background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}


/* nav */
body>header nav ul {
	margin: 0;
}

body>header #navContainer {
	display: contents;
	position: relative;
	width: 100%;
}

#mainnav {
	display: flex;
	justify-content: flex-end;
}

#mainnav>ul {
	display: flex;
}

#mainnav ul {
	margin: 0;
	overflow: visible;
	padding: 0;
	text-align: center;
}

#mainnav li {
	display: inline-block;
	position: relative
}

#mainnav a {
	color: #FFF;
	display: block;
	font-size: 1.125em;
	line-height: 1.209;
	padding: .8125em 1em;
	text-decoration: none;
}

#mainnav>ul>li:hover>a,
#mainnav>ul>li>a:focus,
#mainnav>ul>li:active>a,
#mainnav>ul>li.on>a,
#mainnav>ul>li:focus-within>a {
	background: var(--ws-orange);
	color: var(--ws-dark);
}

#mainnav>ul>li>ul {
	background: #FFF;
	height: auto !important;
	opacity: 0;
	overflow: auto;
	padding: .25em 0;
	position: absolute;
	top: -200vh;
	transition: ease .2s opacity .3s;
	visibility: hidden;
	width: 200px;
	z-index: -1;
}

#mainnav li:hover ul,
#mainnav>ul>li.tapped > ul,
#mainnav>ul>li>a:focus + ul,
#mainnav>ul>li>ul:focus-within {
	opacity: 1;
	top: auto;
	visibility: visible;
	z-index: 1;
}

#mainnav>ul>li>ul>li {
	display: block;
}

#mainnav>ul>li>ul>li>a {
	color: var(--ws-dk-blue);
	font-size: 1em;
	padding: .375em .75em;
	text-align: left;
}

#mainnav>ul>li>ul>li.on>a {
	background: var(--ws-blue);
	color: #FFF;
}

#mainnav>ul>li>ul>li>a:is(:hover, :focus) {
	background: var(--ws-dk-blue);
	color: #FFF;
}

/* mobile */
#mobilenav, .menu {
	display: none;
}

/* FOOTER ------------------------------ */
body>footer a.back:is(:hover, :focus) .button {
	background: var(--ws-blue);
	border-color: var(--ws-blue);
	color: #FFF;
}


/* MAIN ------------------------------ */
main.interior {
  background: url('/bring-the-light/images/lightbulb.svg') no-repeat calc(50% - clamp(39em, 15.667em + 26.67vw, 49em)) calc(100% + 2.5em) / clamp(18em, 10.139em + 16.77vw, 24.813em) auto;
}


main.interior>div.border-top>.wrap {
	max-width: clamp(calc(58.75em + 2 * var(--ws-gutter)), 65%, 75em); /* 750 - 1400 */
	overflow: auto;
}


main>div>div>aside {
	float: left;
	margin: 3.5em 0 0;
	overflow: hidden;
	padding: 1em 2em 0 0;
	width: 15em;
}

main>div>div>#content {
	float: right;
	min-height: 37.5em;
	overflow: hidden;
	padding: 4em 0 5em;
	position: relative;
	width: calc(100% - 15em);
}

body.fullWidth main>div>div>#content {
	float: none;
	margin: 0 auto;
	width: 100%;
}

.twoCol {
	columns: 2;
}

.threeCol {
	columns: 3;
}

.resCol {
	columns: auto;
	column-width: 13em;
}

.formTable td {
	padding: 0 0 .5em .5em;
	width: 50%;
}

.formTable td:first-child {
	padding: 0 .5em .5em 0;
}

.formTable td[colspan="2"] {
	padding-right: 0;
}

.photoright {
	margin: 0 0 2em 2em;
}

.photoleft {
	margin: 0 4em 3em 0;
}

.wsManagementLogin td:first-child {
	width: 40%;
	text-align: right;
}



/* PAGEHEADER ------------------------------ */
#pageheader::after {
	background-image: linear-gradient(270deg, rgba(255,255,255,0) 33%, #FFFFFF 89%);
	bottom: 0;
	content: '';
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}



/* WELCOME ------------------------------ */
#welcome .textbox {
	max-width: 30.25em;
	padding: clamp(4em, -4.654em + 18.46vw, 11.5em) 1.5em clamp(4em, -4.654em + 18.46vw, 11.5em) 0; /* 750 - 1400 */
	width: 49%;
}

#welcome .video {
	position: absolute;
	right: calc(50% + -1 * clamp(26em, 7.333em + 21.33vw, 34em));
	top: calc(-1 * clamp(7.5em, 16vw, 14em));
	transform: translateX(50%);
	width: clamp(30em, -6.346em + 77.54vw, 61.5em);
}



/* AT-RISK ------------------------------ */
#at-risk {
	padding-block: clamp(4em, 1.692em + 4.92vw, 6em) clamp(5em, 0.529em + 9.54vw, 8.875em); /* 750 - 1400 */
}

#at-risk::after {
	bottom: -1.125em;
	position: absolute;
	right: calc(50% - 45em);
	width: clamp(16em, 9.921em + 27.02vw, 33.563em); /* 750 - 1400 */
}

#at-risk .textbox {
	max-width: 29em;
}

#at-risk ul {
	--ws-gap: .5em;
	--ws-column-count: 2;
}

#at-risk .button:is(:hover, :focus) {
	background: var(--ws-blue);
	border-color: var(--ws-blue);
}



/* MYTHS ------------------------------ */
#myths {
	padding-block: 4em 5em;
}

#myths .textbox {
	margin: 0 auto 3em;
	max-width: 35em;
}

#myths .textbox p {
	font-size: clamp(1.125em, 0.837em + 0.62vw, 1.375em); /* 750 - 1400 */
}

#myths ul {
	--ws-columns: 3;
}

#myths li>div {
	padding: clamp(1em, 0.1em + 1.6vw, 1.5em); /* 750 - 1400 */
}

#myths div>strong:first-child {
	font-size: clamp(1.25em, 0.385em + 1.85vw, 2em); /* 750 - 1400 */
}

#myths li:hover>div:first-of-type {
	opacity: 0;
}

#myths li:hover>div:last-of-type {
	opacity: 1;
}

#myths li p {
	font-size: clamp(0.875em, 0.298em + 1.23vw, 1.375em); /* 750 - 1400 */
	max-width: 13.5em;
}

#myths li:nth-child(3n+2) {
	transition-delay: .15s;
}

#myths li:nth-child(3n+3) {
	transition-delay: .3s;
}


/* QUIZ ------------------------------ */
#quiz {
	padding-block: 5em 7em;
	position: relative;
}

#quiz::before {
	background: url('/bring-the-light/images/lightbulb.svg') no-repeat center / contain;
	bottom: -5.8125em;
	content: '';
	height: 41.25em;
	left: calc(50% - 52.5em);
	position: absolute;
	width: 24.8125em;
	z-index: 1;
}

#quiz .wrap {
	max-width: calc(61.25em + 2 * var(--ws-gutter))
}

#quiz .inner {
	margin-left: auto;
	max-width: 48.75em;
}

#quiz form>div {
	padding: 1.5em 1em;
	margin: 0 0 2em;
}

#quiz legend p {
	font-size: clamp(1.125em, 0.837em + 0.62vw, 1.375em); /* 750 - 1400 */
}

#quiz .custom-radio {
	margin-left: 3em;
	min-width: 25em;
	padding: .5em 4em .5em 1.25em;
}

#quiz fieldset.answered>div[data-correct='1'] {
	background-position: right 1.5em top .875em;
}

#quiz label {
	font-size: clamp(1.063em, 0.846em + 0.46vw, 1.25em); /* 750 - 1400 */
}

#quiz fieldset.answered>div[data-correct='1'] label {
	color: #000;
}

#quiz label::before {
	height: 1.125rem;
	left: 0;
	top: .1875em;
	width: 1.125rem;
}

#quiz label:after {
	height: .625rem;
	left: 0.25rem;
	top: 0.375em;
	width: .625rem;
}



/* IDEAS ------------------------------ */
#ideas {
	padding-block: 3.5em 5em;
}

#ideas .textbox {
	margin: 0 auto 3.5em;
	max-width: 36.5em;
}

#ideas :is(.textbox p, h3) {
	font-size: clamp(1.125em, 0.837em + 0.62vw, 1.375em); /* 750 - 1400 */
}

#ideas ul {
	--ws-gap: 2.375em;
	--ws-columns: 3;
}

#ideas li p {
	font-size: clamp(1em, 0.856em + 0.31vw, 1.125em); /* 750 - 1400 */
}

#ideas li:nth-child(3n+2) {
	transition-delay: .15s;
}

#ideas li:nth-child(3n+3) {
	transition-delay: .3s;
}



/* RESOURCES ------------------------------ */
#resources>div {
	padding-block: 5em;
}

#resources>div:last-of-type {
	padding-bottom: 8em;
}

#resources ul {
	--ws-gap: 1.125em;
	--ws-columns: 3;
}

#resources h3 {
	font-size: 1.5em;
}

#resources li {
	border-radius: 50%;
}

#resources li:nth-child(3n+2) {
	transition-delay: .15s;
}

#resources li:nth-child(3n+3) {
	transition-delay: .3s;
}

#resources li::before {
	content: '';
	display: block;
	padding: 0 0 100%;
}

#resources li>div {
	padding: 4em clamp(1.5em, 0.143em + 2.12vw, 2em); /* 750 - 1400 */
}

#resources li>div {
	display: flex;
	flex-direction: column;
	height: auto;
	justify-content: flex-start;
	left: 0;
	margin: 0 auto;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
}

#resources h4 {
	font-size: clamp(1em, -1.25em + 3vw, 1.375em); /* 750 - 1400 */
	margin-inline: auto;
	max-width: 12em;
}

#resources p {
	font-size: clamp(.875em, .587em + .62vw, 1.125em); /* 750 - 1400 */
}



/* BOXES RIBBON (Interior pages) ------------------------------ */
ul.boxes {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	--ws-column-count: 2;
	--ws-gap: clamp(1em, 0.567em + 0.92vw, 1.375em); /* 750 - 1400 */
}

ul.boxes li {
	margin: 0 0 3em;
	width: calc( 100% / var(--ws-column-count) - ( var(--ws-gap) * ( var(--ws-column-count) - 1 ) / var(--ws-column-count) ) );
}

ul.boxes li>:is(div, a) {
	padding-inline: clamp(1.25rem, 0.385rem + 1.85vw, 2rem); /* 750 - 1400 */
}

ul.boxes li::before {
	display: none;
}

/* 2nd to last box, but only if there's an even number of boxes */
ul.boxes li:nth-last-child(2):nth-of-type(odd) { margin-bottom: 0; }


ul.boxes.resources li:is(:nth-child(4n+1), :nth-child(4n+4)) > a:is(:hover, :focus) {
	border-color: var(--ws-blue);
}

ul.boxes.resources li:is(:nth-child(4n+2), :nth-child(4n+3)) > a:is(:hover, :focus) {
	border-color: var(--ws-dk-blue);
}


/* Colors */
ul.boxes:not(.resources) li:nth-child(4n+1)>:is(div, a) { background: var(--ws-lt-blue);  }
ul.boxes:not(.resources) li:nth-child(4n+2)>:is(div, a) { background: rgba(var(--ws-orange-rgb), .2); }
ul.boxes:not(.resources) li:nth-child(4n+3)>:is(div, a) { background: rgba(var(--ws-orange-rgb), .1); }
ul.boxes:not(.resources) li:nth-child(4n+4)>:is(div, a) { background: #E6E8EC; }

ul.boxes:not(.resources) li:nth-child(4n+1) span { background: var(--ws-blue-3); }
ul.boxes:not(.resources) li:nth-child(4n+2) span { background: var(--ws-orange); }
ul.boxes:not(.resources) li:nth-child(4n+3) span { background: var(--ws-orange-2); }
ul.boxes:not(.resources) li:nth-child(4n+4) span { background: var(--ws-dk-blue); }

ul.boxes.resources li:is(:nth-child(4n+1), :nth-child(4n+4)) > :is(div, a) {
	background: rgba(var(--ws-lt-gray-rgb), .3);
	border: 7px solid var(--ws-lt-gray);
}

ul.boxes.resources li:is(:nth-child(4n+2), :nth-child(4n+3)) > :is(div, a) {
	background: rgba(var(--ws-lt-blue-rgb), .4);
	border: 7px solid var(--ws-lt-blue);
}

ul.boxes.resources li:is(:nth-child(4n+1), :nth-child(4n+4)) :is(a>span, span) {
	background-color: var(--ws-blue-3);
	border: 7px solid var(--ws-lt-gray);
}

ul.boxes.resources li:is(:nth-child(4n+2), :nth-child(4n+3)) :is(a>span, span) {
	background-color: var(--ws-dk-blue);
	border: 7px solid var(--ws-lt-blue);
}



/* MAX WIDTH MEDIA QUERIES ------------------------------ */
@media (max-width: 1400px) {
	#welcome .video {
		right: calc(50% + -1 * clamp(17em, 6.615em + 22.15vw, 26em)); /* 750 - 1400 */
	}

	#at-risk::after {
		right: -2em;
	}

	main.interior {
		background-position: calc(50% - clamp(20rem, -2.5rem + 48vw, 39.5rem)) calc(100% + 2.5em);
	}

}


@media (max-width: 1200px) {
	#resources li {
		border-radius: 2.5em;
	}

	#resources li::before {
		display: none;
	}

	#resources li>div {
		height: auto !important;
		padding: 3em 1.5em 5em;
		position: static;
		transform: none;
	}

	#resources h4 {
		font-size: clamp(1.125em, 0.917em + 0.44vw, 1.25em); /* 750 - 1400 */
	}
}


@media (max-width: 1023px) {
	body>header {
		padding: 0 1em;
	}

	body>header #brand {
		left: 1em;
		width: 12em;
	}

	 #mainnav a {
		font-size: .9375em;
		padding-inline: .75em;
	}

	#mainnav>ul>li>ul>li>a {
		font-size: .9em;
	}

}


@media (max-width: 900px) {
	#myths ul {
		--ws-columns: 2;
	}

	#myths li:nth-child(1n) {
		transition-delay: 0s;
	}

	#myths li:nth-child(2n+2) {
		transition-delay: .15s;
	}

	#myths li p {
		font-size: 1.125em;
	}

	#at-risk ul.buttons {
		max-width: 20.8125em;
	}
}



/* MIN WIDTH MEDIA QUERIES ------------------------------ */
@media (min-width: 1800px) {
	body { font-size: 1.1em; }
}

@media (min-width: 2400px) {
	body { font-size: 1.2em; }
}


/* ************ STYLE-D.CSS ************ */