@charset "UTF-8";
/* Web Solutions 4.0 Compatible */

:root {
    
	--black: #000000;
	--blue: #1177C5;
    --grey: #666666;
    --lightest-grey: #EEEEEE;
    --light-grey: #AAAAAA;
    --light-red: #D13334;
    --red: #990000;
    --dark-red: #6c0000;
	
	--heading-1: clamp(2em, 1.818em + 0.91vw, 2.5em); /* 32-40px */
	--heading-2: clamp(1.75em, 1.568em + 0.91vw, 2.25em);  /* 28-36px */
	--heading-3: clamp(1.5em, 1.318em + 0.91vw, 2em);   /* 24-32px */
	--heading-4: clamp(1.25em, 1.023em + 1.14vw, 1.875em); /* 20-30px */
	--heading-5: clamp(1.125em, 0.92em + 1.02vw, 1.688em); /* 18-27px */	
	--large-text: clamp(1.125em, 1.034em + 0.45vw, 1.375em); /* 18-22px */	
	
    --ws-gap: 1em;
    --ws-max-content-width: calc(74em + 2 * var(--ws-gap));
    --ws-transition: all .3s ease;
}

@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('/includes/fonts/roboto-v50-latin-regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: url('/includes/fonts/roboto-v50-latin-italic.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('/includes/fonts/roboto-v50-latin-500.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 500;
    src: url('/includes/fonts/roboto-v50-latin-500italic.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('/includes/fonts/roboto-v50-latin-700.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 700;
    src: url('/includes/fonts/roboto-v50-latin-700italic.woff2') format('woff2');
}


html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
    background: var(--lightest-grey);
    margin: 0;
    overflow-x: hidden;
    padding: 0;
}

img {
    border: 0;
    height: auto;
    max-width: 100%;
}

ul {
    padding-left: 0;
}

ul li {
    list-style: none;
}

html, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, hr {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}

table {
    border-collapse: collapse;
}

td,
th {
    empty-cells: show;
    text-align: left;
    vertical-align: top;
}

#skipNavigation {
    background: #FFF;
    color: #000;
    left: 0;
    padding: .5em;
    position: absolute;
    top: -1000px;
    z-index: 10;
}

#skipNavigation:focus {
    top: 0;
}

/* text */
body, .text, input, button, select, textarea {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    color: #000;
    font-family: 'Roboto', sans-serif;
    line-height: 1.4;
}

.text {
    font-size: 1rem;
}

a {
    color: var(--red);
    text-decoration: none;
}

.content a:not(.button, .enrichmentButton) {
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

a[target="_blank"]::after {
    aspect-ratio: 1/1;
    background: currentColor;
    content: "";
    mask-image: url(/images/icons/external-link.svg);
    mask-position: center;
    mask-size: 100% 100%;
	opacity: 0.5;
    padding-left: 0.75em;
	margin-left: 0.25em;
	transition: var(--ws-transition);
}

a[target="_blank"]:is(:hover, :focus-visible)::after {
    opacity: 1;
}

a.footnote-link {
    min-width: 1.5rem;
    display: inline-block;
    text-align: center;
}

h1 {
	font-weight: 700;
    margin: 0 0 1rem;
}

h2, h3, h4, h5, h6, th:not([scope="row"]), table .th-style-black,
.heading-1, .heading-2, .heading-3, .heading-4, .heading-5  {
    line-height: 1.2;
	font-weight:700;
	margin: 0 0 0.5rem;
}

p {
	margin:0 0 1em;
}

:is(p, ul, ol, blockquote, aside, div, section)+ :is(h2, h3, h4, h5, h6) {
    margin-top: 2rem;
}

.textColor, h1, h2, h3, h4, h5, h6, th:not([scope="row"]), dt, table .th-style-black, legend.heading-4 {
    color: var(--red);
	line-height: 1.25em;
}

.heading-1, .heading-2, .heading-3, .heading-4, .heading-5 {
	display: block;
}







/* HEADINGS ------------------------------ */
h1, .heading-1 {
    font-size: var(--heading-1);
}

h2, .heading-2 {
	color: var(--black);
    font-size: var(--heading-2);
}

h3, .heading-3 {
    font-size: var(--heading-3);
}

h4, .heading-4 {
    font-size: var(--heading-4);
}

h5, .heading-5 {
    font-size: var(--heading-5);
}

p.intro {
    font-size: var(--large-text);
    font-weight: 500;
}

em, i, q, cite, .italic {
    font-style: italic;
}

b, strong {
    font-weight: 700;
}

u {
    text-decoration: none;
}

hr {
    border: 0;
    border-top: 1px solid rgba(0,0,0,0.125);
    clear: both;
    margin: 2.5em 0;
    padding-top: 1px;
}

p {
    font-size: 1em;
}

sup, sub {
    font-size: .6em;
    line-height: 1;
    position: relative;
    vertical-align: baseline;
}

sup {
    bottom: 1ex;
}

sub {
    top: .5ex;
}

.clearFloats {
    clear: both;
}

.nobr {
    white-space: nowrap;
}

.twoCol,
.threeCol,
.resCol {
    column-gap: 2em;
}

:is(.twoCol, .threeCol, .resCol) li {
    break-inside: avoid-column;
}

.req {
    color: #C00;
}

.content :is(.photoright, .photoleft) {
    height: auto;
    max-width: min(50%, 21.875em);
}

.content :is(.photoright, .photoleft) img {
    float: none;
    height: auto;
    margin: 0;
    max-width: 100%;
}

.content figure.photo-fullwidth {
    text-align: center;
    width: 100%;
}

.content figure.photo-fullwidth img {
    width: auto;
}

.photoright {
    clear: right;
    float: right;
}

.photoleft {
    clear: left;
    float: left;
}

figure figcaption {
	font-style: italic;
}

.photoright figcaption {
	text-align: right;
}

.muted {
    opacity: 0.5;
}

small,
.textSm {
    font-size: .8em;
}

.content table {
    width: 100%;
}

blockquote {
	background: var(--red);
	color: #fff;
    line-height: 1.1;
    margin: 2.5em 0;
	padding: clamp(1.563em, 1.29em + 1.36vw, 2.313em) clamp(1em, 0.591em + 2.05vw, 2.125em);
	position: relative;
}

blockquote p {
    font-size: clamp(1em, 0.909em + 0.45vw, 1.25em);
    font-style: italic;
    font-weight: 700;
    quotes: '\201c' '\201d';
	position: relative;
}

blockquote :is(cite, footer) {
	color: var(--dark-grey);
	font-size: clamp(1em, 0.955em + 0.23vw, 1.125em);
	text-align: right;
}

blockquote cite::before,
blockquote footer::before {
	content: '- ';
}

blockquote p:first-of-type::before {
	content: open-quote;
	position: absolute;
	transform: translateX(-100%);
}

blockquote p:last-of-type::after {
	content: close-quote;
}

.content .highlight {
    background: var(--lightest-grey);
    margin: 2.5em 0;
	padding: 1.25em clamp(1rem, 0.682rem + 1.59vw, 1.875rem) clamp(1rem, 0.682rem + 1.59vw, 1.875rem);
}

.content .highlight :is(h2, .heading-2, h3, .heading-3) {
	background: var(--red);
	color: #fff;
	font-size: var(--heading-3);
	margin: -1.25rem calc(clamp(1rem, 0.682rem + 1.59vw, 1.875rem) * -1) 1.25rem;
	padding: 0.25em clamp(1rem, 0.682rem + 1.59vw, 1.875rem);
}


.highlight :last-child,
.highlight ol:last-child li:last-child,
.highlight ul:last-child li:last-child {
    margin-bottom: 0;
}






/* WRAP ------------------------------ */
.wrap,
body>footer .fatFooter {
    margin-inline: auto;
    max-width: var(--ws-max-content-width);
    padding-inline: var(--ws-gap);
    width: 100%;
}






/* MAIN ------------------------------ */

main {
    background: #FFF;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

.interior main {
	padding: 1.5em 1em 4.875em;
}

.contentEditor {
    background: #FFF;
    min-width: 100%;
}

/* sidenav */
#sidenav {
    margin-block: 1em;
	width: 100%;
}

#sidenav ul {
	display: flex;
	flex-direction: column;
	gap: 1px;
    padding: 0;
}

#sidenav > ul {
	gap: 0.1875em;
}

#sidenav li {
    height: 1%;
	position: relative;
}

#sidenav li a {
    display: block;
    line-height: 1.1;
    padding: .5em 1.75em .5em .75em;
	font-size: 1.125em;
	font-weight: 700;
	color:#000;
}

#sidenav li a:is(:hover, :focus) {
    background: var(--red);
}

#sidenav li.on {
	box-shadow: 0 0 0 2px var(--light-grey);
}
#sidenav li li.on {
	box-shadow: none;
}

#sidenav li.on>a {
    background: var(--red);
    color: #fff;
}

#sidenav li  a:is(:hover, :focus-visible) {
	box-shadow: 0 0 0 2px var(--light-grey);
	color:#fff;
}

#sidenav li li>a:is(:hover, :focus-visible) {
	box-shadow: none;
}

/* t2 */
#sidenav li.on ul:before {
    border-left: 7.5px solid transparent;
    border-right: 7.5px solid transparent;
    border-top: 9px solid #fff;
    content: "";
    height: 0;
    pointer-events: none;
    position: absolute;
    right: 0.875em;
    top: 0.875em;
    width: 0;
}

#sidenav li.on ul {
    background: var(--lightest-grey);
	padding: 0.25em;
}

#sidenav li.on ul li a {
    color: var(--black);
    font-size: 1em;
	font-weight: 400;
    padding: .55em .55em .55em 1.75em;
}

#sidenav li ul li a:before {
	border-bottom: 4px solid transparent;
	border-left: 5px solid var(--red);
	border-top: 4px solid transparent;
    content: "";
    height: 0;
    pointer-events: none;
    position: absolute;
    left: 1em;
    top: 0.8125em;
	transition: var(--ws-transition);
    width: 0;
}

#sidenav li ul li.on>a,
#sidenav li ul li a:is(:hover, :focus) {
    background: #000;
    color: #fff;
}

#sidenav li ul li.on>a:before,
#sidenav li ul li a:is(:hover, :focus):before {
	border-left-color: #fff;
}



/* t3 */
#sidenav li ul li.on ul:before {
    display: none;
}

#sidenav li ul li.on ul {
	background: rgba(0,0,0,0.125);
    border: 0;
}

#sidenav li ul li.on ul li {
    border: 0;
}

#sidenav li ul li.on ul li a {
    font-size: .875em;
    padding-left: 1.65em;
	position: relative;
}

#sidenav li ul li.on ul li a:before {
    border: 0;
	content: "-";
	top: auto;
}

#sidenav li ul li ul li.on>a,
#sidenav li ul li ul li a:is(:hover, :focus) {
	background: #fff;
	box-shadow: none;
    color: #000;
}

/* t4 */
#sidenav li ul li ul li.on ul {
	background: #fff;
	gap: 0;
	padding: 0;
}

#sidenav li ul li ul li.on ul li {
    border-top: 1px solid var(--lightest-grey);
}

#sidenav li ul li ul li.on ul li a {
    color: #333;
    font-size: .75em;
	padding-left: 1.875em;
}

#sidenav li ul li ul li.on ul li a:before {
    display: none;
}

#sidenav li ul li ul li a:is(:hover, :focus),
#sidenav li ul li ul li ul li.on>a,
#sidenav li ul li ul li ul li a:is(:hover, :focus) {
    background: #fff;
    color: var(--red);
}

/* breadcrumbs */
.breadcrumb {
    margin-bottom: 1em;
}
.breadcrumb a {text-decoration: none!important;}
.breadcrumb a:hover {color:#000000;}
.breadcrumb a::after {
    content: "\00A0\00A0\203A\00A0";
}

/* content */
.content {
    word-wrap: break-word;
}

.shareIcons {
    display: inline-block;
    overflow: auto;
    position: relative;
}

.shareIcons a {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: .2em;
    display: block;
    float: left;
    height: 20px;
    margin: 0 .5em 1em 0;
    width: 20px;
}

.shareFacebook {
    background-color: #1877F2;
    background-image: url('/images/icons/social/facebook.svg');
}

.shareTwitter {
    background-color: #1DA1F2;
    background-image: url('/images/icons/social/twitter.svg');
}

.shareLinkedin {
    background-color: #0A66C2;
    background-image: url('/images/icons/social/linkedin.svg');
}

/* do people still use google+ ? */
.shareGoogle {
    background-color: #DD4B39;
    background-image: url('/images/icons/social/google-plus.svg');
}

/* list */
.content ol ol li {
    list-style: lower-alpha;
}

.content ul li + li {
    margin-top: 0.5em;
}

.content ul li {
    padding-left: 2em;
    position: relative;
}

.content ul li::before {
    border-bottom: 5px solid transparent;
    border-left: 6px solid currentColor;
    border-top: 5px solid transparent;
    content: '';
    display: inline-block;
    height: 0;
    left: 1em;
    position: absolute;
    top: 0.4em;
    width: 0;
}

.content ul li ul li:before {
    opacity: .5;
}

.content :is(ol, ul) li :is(ol, ul) {
    margin-top: 0.5em;
}

.content :is(ol, ul) li li {
    font-size: 1em;
}

/* addon classes */
.clearfix::after {
    clear: both;
    content: '';
    display: table;
}

.videoContainer {
    aspect-ratio: 16 / 9;
    line-height: 0;
    position: relative;
    width: 100%;
}

.videoContainer.ratio-4-3 {
    aspect-ratio: 4 / 3;
}

/* Build out the space for videos when editing a CMS page */
#tinymce .videoContainer {
    aspect-ratio: 16 / 9 !important;
}

#tinymce .videoContainer.ratio-4-3 {
    aspect-ratio: 4 / 3 !important;
}

.videoContainer iframe,
#tinymce .mce-preview-object {
    border: 0;
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}

.sr-only {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
}

#wysiwygBody {
    background: #FFF;
}

.wsNew {
    background-color: #FFC700;
    color: #222;
    display: inline-block;
    font-size: .7em;
    font-style: italic;
    height: 1.5em;
    line-height: 1.5em;
    margin: .3em 0;
    overflow: visible;
    padding: 0 .3em;
    vertical-align: top;
}

td.right,
th.right {
    text-align: right;
}






/* FORMS AND INPUTS ------------------------------ */
input,
button,
select,
textarea, select option  {
    font-size: 1em;
    line-height: 1.2em;
}

input:is([type="button"], [type="date"], [type="submit"], [type="text"], [type="reset"], [type="password"], [type="tel"], [type="number"], [type="email"], [type="url"], [type="search"]),
textarea,
select {
    border-radius: 0;
    outline: none;
}

input:is([type="text"], [type="date"], [type="password"], [type="tel"], [type="number"], [type="email"], [type="url"], [type="search"]),
textarea,
select {
    background-color: rgba(0, 0, 0, .05);
    border: 1px solid rgba(0, 0, 0, .2);
    box-shadow: none;
    padding: 0.5em;
}

:is(input:is([type="text"], [type="date"], [type="password"], [type="tel"], [type="number"], [type="email"], [type="url"], [type="search"]), textarea, select):focus-visible {
    border-color: var(--black);
}

textarea {
    display: block;
}

select option {
    padding: 0 .2em;
}

button,
.button,
input:is([type="button"], [type="submit"], [type="reset"]) {
    background: var(--red);
    border: 0;
	border-radius: 0.375rem;
    color: #FFF;
    cursor: pointer;
    display: inline-block;
    font-size: clamp(1em, 0.909em + 0.45vw, 1.25rem);
	font-weight: 700;
    line-height: 1;
    padding: .625rem 1rem;
	text-transform: uppercase;
}

.content p .button {
	margin: 0 0.1875em 0.6em 0;
}

button.black, .button.black {
	background: var(--black);
}

button.grey, .button.grey {
	background: var(--grey);
}

button.hollow, .button.hollow {
	background: #fff;
	box-shadow: inset 0 0 0 2px var(--red);
	color:var(--red);
}

/* p .button {
	font-size: 1em;
}*/ 

input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.button {
    display: inline-block;
}

button img {
    height: 1em;
    vertical-align: top;
    width: auto;
}

input.bulky,
.bulky {
    font-size: 1.2em;
    padding: .4em .6em;
}

.formTable,
:where(.formTable, .form-flex) :where(input:where([type="text"], [type="password"], [type="tel"], [type="number"], [type="email"], [type="url"], [type="search"]), table, textarea, select) {
    width: 100%;
}

.input-container {
	position: relative;
}

.input-container .dollar-sign {
	left: 0.625em;
	top: 0.4375em;
	position: absolute;
}

.input-container .dollar-sign + input {
	padding-left: 1.5em;
}

#ContactForm fieldset {
    border: 0;
    margin: .5em 0 0;
    padding: 0;
}

#ContactForm fieldset legend {
    padding: 0;
}

#ContactForm th,
#ContactForm td {
	padding: 0 0.5em 1em 0;
}
#ContactForm th:last-child,
#ContactForm td:last-child {
	padding-right: 0;
}

#ContactForm p + :is(input, select, textarea) {
	margin-top: -1em;
}

.subjClass {
    display: none !important;
}

#Captcha label {
    padding-left: 0;
}

:is(.formEdit, .formBuilder) select {
    width: 40%;
}

.formTable table td {
    padding-bottom: 0;
}

.formTable.right td:first-child {
    text-align: right;
    width: 1%;
}

.formTable.right td {
    width: auto;
}

fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Forms - without tables ----- */
form.narrow .form-flex,
.narrow.form-flex {
    max-width: 18.75em;
}

.form-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.form-flex fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    width: 100%;
}

.form-flex fieldset legend {
    float: left;
    width: 100%;
}

.form-flex>div {
    margin: 0 0 .75em;
}

.form-flex .full {
    width: 100%;
}

.form-flex>div>label:first-of-type {
    display: block;
}

.form-flex .text-center {
    text-align: center;
}

.form-flex > div.bottom-align {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}


/* Checkboxes, radios */
.form-flex>div>fieldset>label {
    display: inline-block;
}






/* MANAGEMENT ------------------------------ */
hr+.manage {
    margin-top: -1em;
}

.manage {
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    line-height: 1.3;
    width: 100%;
}

.manage th {
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    text-align: left;
}

.manage th.right {
    text-align: right;
}

.manage th.sort {
    cursor: pointer;
}

.manage th.sort img {
    margin-left: 5px;
}

.manage th img {
    bottom: -2px;
    position: relative;
}

.manage td,
.manage th {
    padding: 5px 5px 5px 0;
}

.manage td:first-child {
    padding-left: .8em;
}

.manage img.preload {
    border: solid 1px #fff;
    display: none;
    position: absolute;
    top: 0;
    z-index: 10;
}

.manage td.icons img {
    bottom: -2px;
    margin-left: 5px;
    position: relative;
}

.manage td:first-child.icons img {
    margin-left: 0;
}

.manage td:first-child.icons {
    padding-inline: 3px;
}

.manage td:nth-child(2) {
    hyphens: auto;
    overflow-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word;
}

.manage td.icons a:first-child img {
    margin-left: 0;
}

.manage td.icons input {
    bottom: 2px;
    margin-left: 5px;
    position: relative;
}

.manage .hidden {
    color: #900;
    font-style: italic;
}

.manageButton {
    padding: 10px 0;
    text-align: right;
}

.alternate tbody tr:nth-child(even),
.even {
    background: #FFF;
}

.alternate tbody tr:nth-child(odd),
.odd {
    background: rgba(0, 0, 0, .06);
}

.manage+hr,
.manage+.manageLinks+hr {
    margin-top: 50px;
}

.manageLinks {
    margin-top: 10px;
}

.manageLinks select {
    max-width: 20em;
}

.manageLinks a {
    white-space: nowrap;
}

.manageLinks a img {
    bottom: -2px;
    position: relative;
}

.manageLinks button {
    margin-left: 5px;
    margin-bottom: .5rem;
}

.manageButtons {
    padding: 10px 0;
    text-align: right;
}

.wsReturnToButton {
    float: right;
    margin-top: -3.5em;
}

.manage.rightFirstChild td:first-child {
    text-align: right;
}

.sortRow th {
    cursor: pointer;
}

.manageEllipsis {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 200px;
}

.manage colgroup col {
    width: auto !important;
}

#wsManagementBar a[target="_blank"]::after {
    display: none;
}

/* pagination */
.pagination {
    font-size: .95em;
    text-align: right;
}






/* ALERT ------------------------------ */
#alertApp {
	background: var(--blue);
	color:#fff;
}

.site-alert__details[hidden] {
 display: none;
}

#alertApp .site-alert__text {
    color:#fff;
    font-weight: 500;
}

#alertApp a:is(:hover, :focus-visible) span {
    text-decoration-color: currentColor;
}

#alertApp a:is(:hover, :focus-visible) .site-alert__text span {
    color:#fff;
}

#alertApp .flex {
    align-items: center;
    display: flex;
	flex-wrap: wrap;
    gap: 0.5em 1em;
    justify-content: center;
}

#alertApp .site-alert__link,
#alertApp .site-alert__toggle {
    align-items: center;
    background: none;
    border: 0;
	border-radius: 0.375rem;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.25);
    display: inline-flex;
    font-size: 1em;
    justify-content: center;
	line-height: 1;
    padding: 0.75em 1em;
    text-transform: none;
}

#alertApp .site-alert__toggle {
    white-space: nowrap;
}

#alertApp .site-alert__dismiss {
    align-items: center;
    background: none;
    border: 0;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.25);
    display: flex;
    font-size: 1.25em;
    height: 2.5rem;
    justify-content: center;
    padding: 0;
    width: 2.5rem;
}




/* PAGEHEADER ------------------------------ */
.pageHeader {
    background: url(/images/repeating-bg.png) repeat center left / 2.75em auto;
    height: 4.375em;
    width: 100%;
}






/* DIALOG POPOVER ------------------------------ */
dialog.popover {
    align-content: center;
    align-items: center;
    background: rgba(0,0,0,0.85);
    border: 0;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    margin: 0;
    min-height: 100%;
    min-width: 100%;
    opacity: 0;
    padding: 1em;
    pointer-events: none;
    position: fixed;
    top: 0;
    transition: ease all 200ms;
    width: 100%;
    z-index: 10;
}

dialog.popover[open] {
    opacity: 1;
    pointer-events: all;
}

dialog.popover .center {
    background: #fff;
	border-radius: 0.5em;
    max-width: 55rem;
    padding: 2em;
    position: relative;
    z-index: 2;
}

dialog.popover .center .close {
    background: none;
    color: #fff;
    font-size: 3rem;
	font-weight: 400;
    line-height: 2rem;
    padding: 1rem;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateY(-100%);
}

dialog.popover .popover-content {
    max-height: calc(100vh - 12.375em);
    overflow: auto;
	text-align: center;
}  

dialog.popover .popover-content .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center;
}  

dialog.popover .popover-content .actions :is(button, .button) {
    font-size: 1em;
}  

dialog.popover .popover-mask {
    cursor: default;
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
}






/* FORM ERRORS ------------------------------ */
.form-error {
    color: var(--red);
    font-size: 1rem;
	text-transform: lowercase;
}

.form-error::first-letter {
	text-transform: capitalize;
}

.reverse .form-error {
    background: var(--red);
    color: #FFF;
}

fieldset label:first-of-type input:focus {
    outline: 1px solid var(--red);
}

.formError {
    background-color: #000;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 2px 2px #333;
    color: #FFF;
    display: none;
    margin: 0 0 2px;
    padding: .3125em .625em;
    z-index: 5;
}

.formError p {
    font-size: .9em;
    margin: 0;
}

.formError em {
    border: 10px solid;
    border-color: #000 transparent transparent;
    bottom: -1.0625em;
    display: block;
    height: 0;
    left: 2.5em;
    position: absolute;
    width: 0;
}







/* HOMEPAGE ------------------------------ */

/* Hero */
#hero {
	background: var(--red);
	color: #fff;
	text-align: center;
	aspect-ratio: 20/9;
	max-height: 60vh;
	width: 100%;
}

#hero .text-container {
    align-items: center;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    justify-content: center;
	padding: clamp(2em, 1.25em + 3.75vw, 4.063em) clamp(1.25em, 0.932em + 1.59vw, 2.125em) clamp(2em, 1.818em + 0.91vw, 2.5em);
	position: relative;
}

#hero .text-container:before {
    background: url(/images/home/hero-text-border.svg) no-repeat center / 100% 100%;
    content: "";
    display: block;
    position: absolute;
	top: 0.625em;
	left: 0.625em;
	right: 0.625em;
	bottom: -2.5em;
	z-index: 1;
	pointer-events: none;
}

#hero .text-container:after {
    background: url(/images/home/text-container-bottom.svg) no-repeat center / calc(100% + 2px) calc(100% + 2px);
    content: "";
    display: block;
    position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100% + 1.6875em);
	pointer-events: none;
}

#hero .text-container .inner-wrap {
	background: url(/images/fox.svg) no-repeat center / contain;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
    grid-column: 1;
    grid-row: 1;
	height: 100%;
    margin: 0 auto;
    max-width: 26.375em;
	position: relative;
	z-index: 1;
}

#hero .text-container .inner-wrap span {
    color:#fff;
    display: block;
}

#hero .text-container .inner-wrap .button {
	background: #fff;
	color: var(--black);
	font-size: clamp(1em, 0.909em + 0.45vw, 1.25em);
    margin-top: 1em;
	padding: 1em;
}

/* Callouts */
#callouts {
	background: var(--lightest-grey);
	text-align: center;
	padding: clamp(3em, 2.727em + 1.36vw, 3.75em) 1em;
}

#callouts h2 {
	color: var(--red);
	font-size: var(--heading-1);
}

#callouts li a {
    align-items: center;
    background: #fff;
    border-radius: 0.625em;
    display: flex;
    flex-direction: column;
	position: relative;
}

#callouts li a:before {
    border: 2px solid var(--red);
    border-radius: 0.625em;
    content: "";
    display: block;
    inset: 0.625em;
    pointer-events: none;
    position: absolute;
    transition: var(--ws-transition);
    z-index: 1;
}

#callouts .image-container {
    aspect-ratio: 384/300;
    border-radius: 0.625em 0.625em 0 0;
	background: var(--red);
    overflow: hidden;
    position: relative;
    width: 100%;
}

#callouts .image-container img {
    height: 100%;
    left: 0;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
	transition: var(--ws-transition);
    width: 100%;
}

#callouts .text-container {
	color: var(--black);
    padding: 1.5625em 2em 3.388em;
}

#callouts .text-container strong {
	display: block;
	color: var(--red);
    font-size: clamp(1.25em, 1.159em + 0.45vw, 1.5em);
	margin-bottom: 0.25em;
}

#callouts .text-container span {
	font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem);
}

#callouts .text-container .button {
    bottom: -0.625rem;
    color: var(--black);
    font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
    left: 50%;
	max-width: 100%;
    position: absolute;
    text-transform: none;
    transform: translateX(-50%);
    width: max-content;
    z-index: 2;
}

/* Counters */
#counters {
	display: flex;
	text-align: center;
}

#counters section {
    align-items: center;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: clamp(2.25em, 1.023em + 6.14vw, 5.625em) clamp(1em, 0.455em + 2.73vw, 2.5em);
    position: relative;
    width: 100%;
}

#counters section:before {
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

#counters section:nth-of-type(odd):before {
    background:linear-gradient(180deg, rgba(153,0,0,0.95) 0%, rgba(153,0,0,0.00) 100%), rgba(153,0,0,0.80);
}

#counters section:nth-of-type(even):before {
    background: rgba(31,31,31,0.90);
}

#counters section :is(h3, div, p) {
    color:#fff;
    max-width: 25rem;
    position: relative;
    z-index: 1;
}

#counters section h3 {
    font-size: var(--heading-1);
	margin: 0;
}

#counters section div {
    border-top: 2px solid #fff;
    margin: 0.75em auto;
    width: 2.375em;
}

#counters section p {
    font-size: clamp(1.25em, 1.159em + 0.45vw, 1.5em);
    line-height: 1.25em;
    margin: 0;
}

#counters section img {
    height: 100%;
    left: 0;
    mix-blend-mode: luminosity;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    width: 100%;
}

/* Welcome Message */
#welcome {
    background:#1F1F1F;
    color:#fff;
    position: relative;
}

#welcome .text-container {
    position: relative;
    z-index: 1;
}

#welcome .text-container h2 {
    color: #fff;
}

#welcome .text-container p {
    font-size: clamp(1em, 0.909em + 0.45vw, 1.25em);
}

#welcome .text-container .button {
    font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
    margin-top: 0.5em;
    text-transform: none;
}

#welcome .background-image {
    background:#1F1F1F;
}

#welcome .background-image:after {
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

#welcome .background-image img {
    height: 100%;
    left: 0;
    mix-blend-mode: luminosity;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    width: 100%;
}







/* IMAGE GALLERY (cms pages) ------------------------------ */
.content figure:not(.photoright, .photoleft) {
	margin: 0 0 2.5em;
}

.gallery {
    display: grid;
    gap: 1em;
	grid-template-columns: repeat(auto-fill, minmax(15.625em, 1fr));
    margin: 2.5em 0;
}

figure .gallery {
    margin: 0 0 0.5em;
}

:is(.gallery) :is(button[type=button]) {
    background: none;
    border: 0;
    box-shadow: none;
    overflow: hidden;
    padding: 0;
}

:is(.gallery) :is(button[type=button]):is(:hover,:focus-visible) {
    background: none;
    border: 0;
    box-shadow:0 0 0 4px var(--light-grey);
    padding: 0;
}

.gallery img {
    aspect-ratio: 275 / 200;
    display: block;
    height: auto;
    object-fit: cover;
    object-position: center;
    transition: var(--ws-transition);
    width: 100%;
}

:is(.gallery) :is(button[type=button]):is(:hover,:focus-visible) img {
    transform: scale(1.1);
}

.lightbox {
    align-items: center;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    height: 100vh;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    transition: ease all 200ms;
    width: 100vw;
    z-index: 1000;
}

.management .lightbox,
.management .lightbox-content {
	top: 35px;
	height: calc(100vh - 35px);
}

.management2 .lightbox,
.management2 .lightbox-content {
	top: 70px;
	height: calc(100vh - 70px);
}

.lightbox[hidden] {
    opacity: 0;
    pointer-events: none;
}

.lightbox-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1em;
    height: 100vh;
    justify-content: space-between;
    padding: 1em;
    width: 100vw;
}

.lightbox button {
	aspect-ratio: 1/1;
	border: 0;
	font-size: 1.25rem;
	line-height: 1;
	padding: 0;
	text-align: center;
	width: 3rem;
}

.lightbox button:disabled,
.lightbox button:disabled:is(:hover, :focus-visible) {
    background: var(--slate-blue);
    color: #fff;
    box-shadow: none;
    opacity: 0.5;
    filter: grayscale(1);
    cursor: not-allowed;
}

.lightbox-image-wrapper {
    align-items: center;
    display: flex;
    justify-content: center;
    max-height: 80%;
    max-width: 100%;
}

.lightbox img {
    display: block;
    height: auto;
    max-height: 100%;
    max-width: 100%;
    width: auto;
}

.lightbox-controls {
    display: flex;
    gap: 1em;
    justify-content: center;
}

.lightbox .lightbox-close {
    align-self: flex-end;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 1.75rem;
}



/* ENRICHMENT ------------------------------ */
.interior .content #enrichment-courses {
  text-align: center;
  margin-top: 3em;
}

.ws-flex {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ws-gap);
  }

  .ws-flex>:is(article,div,li) {
    width: calc( 99.9% / var(--ws-columns) - ( var(--ws-gap) * ( var(--ws-columns) - 1 ) / var(--ws-columns) ) );
  }

.content ul.ws-flex li + li {
  margin-top: 0;
}
  .interior .content #enrichment-courses ul li::before {
  display: none;
}

.interior .content #enrichment-courses ul li{
  padding-left: 0;
}

.interior .content #enrichment-courses ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ws-gap);
  justify-content: center;
}

.interior .content #enrichment-courses li a {
  font-weight: 700;
  line-height: 1em;
  display: block;
  text-decoration: none;
  transition: var(--ws-transition);
}
.interior .content #enrichment-courses div {
    overflow: hidden; 
    border-radius: 0.625em;
}
.interior .content #enrichment-courses .image {
width: 100%;
  padding-bottom: 67%;
  background-size: cover;
  background-position: center;
  position: relative;
  margin-bottom: 7px;
  border-radius: 0.625em;
  border:#ffffff 2px solid;

}

.interior .content #enrichment-courses a:is(:hover, :focus) .image {
border: #900 2px solid;
}
/* FOOTER ------------------------------ */
body>footer {
	display: flex;
	flex-direction: column;
    padding: 3.5em 1em 2.1875em;
    position: relative;
    z-index: 0;
}

body>footer .fatFooter,
body>footer .wrap {
    display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

body>footer span {
	display: block;
}

body>footer .heading {
    font-weight: 700;
}

body>footer .fatFooter address,
body>footer .fatFooter .help-links > *,
body>footer .fatFooter .contact > *,
body>footer .fatFooter .contact > * form {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 0.65em;
}

body>footer .fatFooter address a {
    font-weight: 500;
}

body>footer .fatFooter :is(.help-links, .contact) {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 1.875em;
}

body>footer .button {
    font-size: 1em;
    padding: 0.4375em 0.75em;
    text-transform: none;
}

body>footer .fatFooter form div {
    display: flex;
}

body>footer .fatFooter form input {
    background: #fff;
    border: 0;
    font-size: 0.875em;
    height: 1.875rem;
    padding: 0 0.75em;
}

body>footer .fatFooter form ::placeholder {color: var(--grey); opacity: 1; font-style: italic;}
body>footer .fatFooter form ::-webkit-input-placeholder {color: var(--grey); opacity: 1; font-style: italic;}
body>footer .fatFooter form :-moz-placeholder {color: var(--grey); opacity: 1; font-style: italic;}
body>footer .fatFooter form ::-moz-placeholder {color: var(--grey); opacity: 1; font-style: italic;}
body>footer .fatFooter form :-ms-input-placeholder {color: var(--grey); opacity: 1; font-style: italic;}
body>footer .fatFooter form ::-ms-input-placeholder {color: var(--grey); opacity: 1; font-style: italic;}

body>footer .fatFooter form button {
	border-radius: 0 0.25em 0.25em 0;
	padding: 0;
	font-size: 1em;
	height: 1.875em;
	aspect-ratio: 1/1;
	position: relative;
}

body>footer .fatFooter form button:before {
	background: #fff;
    content: "";
    display: block;
    height: 100%;
    left:0;
    mask-image: url(/images/icons/chevron-down.svg);
    mask-position: center;
    mask-repeat: no-repeat;
	mask-size: 0.75em auto;
    position: absolute;
    top: 0;
	transform: rotate(-90deg);
    width: 100%;
}

body>footer .fatFooter .social ul {
	display: flex;
	gap: 0.75em;
	margin: 0;
}

body>footer .fatFooter .social a {
	background: var(--red);
    display: block;
    height: 1.6875em;
    mask-position: center;
    mask-repeat: no-repeat;
    width: 1.6875rem
}

body>footer .fatFooter .social a.facebook {
	mask-image: url(/images/icons/facebook.svg);
}

body>footer .fatFooter .social a.instagram {
	mask-image: url(/images/icons/instagram.svg);
}

body>footer .wrap .copyright,
body>footer .wrap nav {
	display: flex;
}

body>footer .wrap .copyright {
	flex-wrap: wrap;
}

body>footer>.wrap {
    clear: both;
	gap: 0.5em 2em;
    overflow: visible;
}

body>footer>.wrap a {
    color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: rgba(0,0,0,0.25);
}






/* TRANSITIONS ------------------------------ */

a,
a *,
button,
.button,
input:is([type="button"], [type="submit"], [type="reset"]),
:is(input, select, textarea):focus,
#navContainer li,
#popover .close {
    transition: var(--ws-transition);
}

.stop-transitions * {
    transition: none !important;
}






/* ANIMATIONS ------------------------------ */

@media screen and (prefers-reduced-motion: no-preference) {

    .translate-up,
    .translate-down,
    .translate-left,
    .translate-right {
        opacity: 0;
        transition: all 1s ease;
    }

    .translate-up {
        transform: translate(0, 3rem);
    }

    .translate-down {
        transform: translate(0, -3rem);
    }

    .translate-left {
        transform: translate(3rem, 0);
    }

    .translate-right {
        transform: translate(-3rem, 0);
    }

    :is(.translate-up, .translate-down, .translate-left, .translate-right).animated {
        opacity: 1;
        transform: translate(0, 0);
    }
	
}