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

:root {
	--ws-grid: minmax(.5em,1fr) [wrap-start] repeat(2,minmax(0,var(--ws-column-width))) [wrap-end] minmax(.5em,1fr);
}

body {
	background: #FFF;
}

body.slideNav {
	overflow: hidden;
}

/* HEADINGS ------------------------------ */
h1 {
		margin-top:1em;
		font-size: 1.75em;
}

h2, :is(.content .highlight, .highlight) :is(h1, h2), .heading-style {
	font-size: 1.45em
}

h3 {
	font-size: 1.3em
}

h4 {
	font-size: 1.2em
}

h5 {
	font-size: 1.1em
}

h6 {
	font-size: 1.0em
}

.intro {
	font-size: 1.25em;
}

/* HEADER ------------------------------ */
body>header {
  background: #FFF;
  display: contents;
  position: relative;
  z-index: 1;
}

body>header:before {
  background-color: #000;
	content: '';
	display: block;
  height: 100vh;
	left: 100vw;
  opacity: 0;
  position: fixed;
	top: 0;
	transition: left 0ms ease 200ms, opacity 200ms ease;
  width: 100vw;
  z-index: 3;
}

body.slideNav>header:before {
	left: 0;
  opacity: .5;
  transition: left 0ms ease 0ms, opacity 200ms ease;
}

#brand {
	display: block;
	margin: 0 auto;
	max-width: 14em;
	padding: .75em .5em .1em .5em;
}

#navContainer {
  background-color: var(--ws-blue);
  bottom: 0;
  left: 100%;
  max-height: 100vh;
  overflow: auto;
  position: fixed;
  top: 0;
  transition: left 200ms ease;
  width: 75%;
  z-index: 3;
  -webkit-overflow-scrolling: touch;
}

#navContainer .toggleNav {
  background: transparent;
  border: 0;
  border-radius: 0;
  font-weight: 400;
  text-align: left;
  text-transform: none;
}

#navContainer .toggleNav::before {
  background: url('/images/icons/close.svg') no-repeat left center / contain;
  content: '';
  line-height: 1;
  margin: 0 .25em 0 0;
  padding-right: .875em;
}

body.slideNav #navContainer {
	left: 25%;
}

#navContainer nav {
	display: inline;
}

#navContainer ul {
	display: block;
	margin: 0;
	padding-left: 0;
	width: 100%;
}

#navContainer li {
  border-top: 1px solid rgba(255,255,255,0.125);
	display: block;
	position: relative;
  width: 100%;
}

#navContainer li li {
	border: 0;
}
#navContainer aside.menu > span {margin-right: 5px;}
#navContainer :is(a, .menu) {
	color: #fff;
  display: block;
	line-height: 2.75em;
  padding: 0 1rem;
	width: 100%;
}
#navContainer #ancillary ul li a {padding-left: 2.0625rem;}
#navContainer #ancillary ul li a:before {filter: grayscale(1) brightness(5);}

#navContainer li.on,
#navContainer li.open {
	background-color: rgba(255,255,255,.1);
}


#navContainer .menu-item-has-children > div {
	display: grid;
	grid-template-rows: 0fr;
	transition: var(--ws-transition);
}

#navContainer .menu-item-has-children.open > div {
	grid-template-rows: 1fr;
}


#navContainer ul ul {
  font-size: .8em;
  overflow: hidden;
  transition: var(--ws-transition);
}

#navContainer ul ul a {
	padding-left: 2rem;
}

#navContainer ul ul li.on a {
	background-color: rgba(255,255,255,.05)
}

#navContainer li>button {
  background: rgba(255,255,255,0.5);
  display: block;
  height: 2.5em;
  position: absolute;
  right: 0;
  top: 0;
  width: 2.5em;
}


#navContainer li>button::before,
#navContainer li>button::after {
  background-color: #000;
	content: '';
	display: block;
	height: 0.0625rem;
	left: 50%;
	position: absolute;
	top: 50%;
	transform-origin: center center;
	transition: transform .2s ease;
	width: 50%;
}

#navContainer li>button::before {
	transform: translate(-50%, -50%) rotate(90deg);
}

#navContainer li>button::after,
#navContainer li.open>button:before {
	transform: translate(-50%, -50%) rotate(0deg);
}


/* ANCILLARY ------------------------------ */
#ancillary {
	display: block;
}

#ancillary .search {
  border-top: 1px solid rgba(255,255,255,0.125);
	overflow: auto;
	padding: 1rem;
}
#ancillary .search label {
	left: 1.5625rem;
}
#ancillary .search input[type="text"] {
	width: calc(100% - 2.375rem);
	height: 2.375rem;
}

#ancillary .search button {
	height: 2.375rem;
	width: 2.375rem;
}


/* MOBILE NAV ------------------------------ */
#mobilenav {
  align-items: center;
  background-color: var(--ws-blue);
  display: flex;
  justify-content: center;
  position: sticky;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 1;
}

#mobilenav :is(a, button) {
  color: #FFF;
  flex: 1 1 auto;
  line-height: 2.25;
}

#mobilenav a {
	border-right: 1px solid #888;
}

#mobilenav button {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 0;
	display: flex;
	font-weight: 400;
	justify-content: center;
	padding: 0;
	text-transform: none;
	font-size: 0.9375rem;
}

#mobilenav button::after {
  aspect-ratio: 1;
  background: #FFF;
  content: '';
  display: inline-block;
  margin: 0 0 0 .25em;
  mask:  url('/images/icons/bars.svg') no-repeat center / contain;
  height: 1em;
}

/* MAIN ------------------------------ */
.twoCol, .threeCol, .resCol {
	columns: auto;
  column-rule: 1px outset rgba(0,0,0,.15);
	column-width: 13em;
}

.content ul li {
	padding-left: 1.5em;
}

.formTable, .formTable table {
  display: block;
	width: 100%;
}

.formTable tbody {
	display: block;
}

.formTable tr {
	display: block;
}

.formTable td {
	display: block;
	padding: 0em 1em;	
  width: 100%;
}

.formTable :is(input:is([type="text"], [type="password"], [type="tel"], [type="number"], [type="email"], [type="url"]), textarea) {
	margin-bottom: 1em
}

.formTable table td + td {
	padding-left: 0 !important;
}

/* Contact Form - table removed ----- */
.form-flex .half,
.form-flex fieldset label {
	width: 100%;
}

.form-flex .quarter {
	width: calc(50% - .5em);
}


.photoright {
	margin: 0 0 .75em 1em;
}

.photoleft {
	margin: 0 1em .75em 0;
}
.twoImages img {margin-bottom: 1rem;}

#ContactForm input[type="date"] {
	margin: 0 0 1em;
}

.interior main::before {
	left: -2.1em;
	content: "";
	width: 18.75em;
	height: 14.5625rem;
  }

/* HOME -------------------------------- */
.home .hero {
	position: relative;
}

.home .hero button.pause {
	bottom: .75em;
	left: .75em;
}

.home .hero .hero-text {
	padding: 2rem 1rem 4.5rem;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--ws-green);
}



/* MOVE AHEAD ------------------------------ */

.move-ahead .image {
	margin: 0 auto 1.5em;
	max-width: 100%;
	width: 25em;
}


/* CALLOUTS ------------------------------ */

.home .callouts .wrap,
.home .callouts.enrichment-classes .wrap {
	padding-bottom: 3rem;
}

.home .callouts.enrichment-classes .wrap {
	padding-top: 2.25em;
}

.home .callouts h2 {
	font-size: 1.75rem;
}

.home .callouts ul, .interior .callouts ul {
	gap: 2rem;
}
.home .callouts ul li, .interior .callouts ul li {
	width: calc(100% - 1rem);
}
.enrichment-callout .wrap {
	flex-direction: column;
}

.home .welcome h2 {
	font-size: 1.75rem;
}

.home .welcome .welcome-content {
	margin: 0 0 2.5em;
}

.home .slick-slide .slide {
	padding-bottom: 60%;
}



/* FOOTER ------------------------------ */
body>footer .fatFooter {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
body>footer .fatFooter :is(nav, .email-socials) {
	text-align: center;
}
.fatFooter .socials {
	align-items: center;
	justify-content: center;
}
body>footer .wrap {
  align-items: stretch;
  align-content: stretch;
	display: flex;
	flex-direction: column;
	text-align: center;
}

#web-solutions {
	order: 1;
}

body>footer address {
	text-align: center;
}

body>footer .wrap nav a+span:before {
	content: "|";
	margin: 0 0.5em;
}
.fatFooter nav ul {margin: 1.5rem 0;}
.fatFooter h2, .fatFooter h3 {margin-top: 0;}

/* 500 */
@media (max-width: 31.25rem) {
	.home .callouts ul li {width: 100%;}
	.home .slick-slide .slide {padding-bottom: 75%;}
	.enrichment-callout .wrap {width: calc(100% - 1rem); border: 0.5rem solid #FFF;}
	.enrichment-callout :is(p, a) {font-size: 1rem;}

	#mobilenav :is(a, span) {font-size: 0.9375rem;}

	.fatFooter input[type="email"] {width: calc(100% - 3rem);}
	.fatFooter-left {flex-direction: column; text-align: center; align-items: center; justify-content: center;}
}