@charset "UTF-8";:root {
	--ws-grid: .5em [wrap-start] repeat(2, 1fr) [wrap-end] .5em
}

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

.formTable tbody {
	display: block
}

.formTable tr {
	display: block
}

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

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

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

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

.photoleft {
	margin: 0 1em .75em 0
}

body>header.ws-grid {
	background: #fff;
	display: contents;
	position: relative;
	text-align: center;
	z-index: 5
}

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: 4
}

body.slideNav {
	overflow: hidden
}

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

body>header #brand {
	display: block;
	margin-inline:auto;max-width: 20em;
	padding: 1.25em 1em .75em;
	width: 100%
}

body>header #brand svg {
	display: block;
	height: auto;
	margin: 0 auto;
	max-width: 12.5rem;
	width: 100%
}

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

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,.125);
	display: block;
	position: relative;
	width: 100%
}

#navContainer li li {
	border: 0
}

#navContainer a,#navContainer .menu {
	color: #fff;
	display: block;
	font-size: 1.125em;
	line-height: 1.5;
	padding: .625em 1em;
	width: 100%
}

#navContainer .menu span {
	font-size: 2em;
	line-height: 0;
	margin: 0 .125em 0 0;
	position: relative;
	top: .1875em
}

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

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

#navContainer li>span {
	background: var(--ws-yellow);
	display: block;
	height: 3.125em;
	position: absolute;
	right: 0;
	top: 0;
	width: 3.125em
}

#navContainer li>span:before,#navContainer li>span:after {
	background-color: var(--ws-blue);
	content: '';
	display: block;
	height: .0625rem;
	left: 50%;
	position: absolute;
	top: 50%;
	transform-origin: center center;
	width: 55%
}

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

#navContainer li>span:after {
	transform: translate(-50%,-50%)
}

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

#navContainer li>span::before {
	transition: transform .2s ease
}

#navContainer ul ul {
	font-size: .875em;
	height: 0;
	overflow: hidden;
	transition: all .3s ease
}

#navContainer ul ul a {
	font-size: 1.125em;
	padding-left: 2rem
}

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

#mobilenav {
	align-items: center;
	background: var(--ws-blue);
	display: flex;
	position: sticky;
	text-align: center;
	top: 0;
	width: 100%;
	z-index: 3
}

#mobilenav a,#mobilenav span {
	color: #fff;
	line-height: 2;
	order: 0;
	flex: 1 1 auto;
	font-size: 1.125em
}

#mobilenav span svg {
	fill: #fff;
	margin-left: .25em;
	pointer-events: none;
	position: relative;
	top: .125em;
	width: .8125em
}

#mobilenav *+* {
	border-left: 1px solid rgba(255,255,255,.25)
}

#ancillary {
	clear: both;
	display: flex;
	flex-direction: column
}

#ancillary a,#mainnav>ul>li:last-child>a,#ancillary strong {
	font-weight: 400
}

#ancillary .social {
	display: none
}

#ancillary .email-signup {
	border-top: 1px solid rgba(255,255,255,.125);
	padding: .625em 1.25em 0
}

#ancillary form {
	display: flex;
	flex-wrap: wrap
}

#ancillary strong {
	color: #fff;
	display: block;
	margin: 0 0 .375em;
	width: 100%
}

#ancillary form input {
	width: calc(100% - 4.5em)
}

#ancillary form button {
	width: 5em
}

#ancillary .social strong {
	display: none
}

.social ul,#navContainer .social ul {
	align-items: stretch;
	display: flex;
	justify-content: center
}

#navContainer .social ul {
	border-top: 1px solid rgba(255,255,255,.25)
}

#navContainer .social a {
	height: 100%
}

#navContainer .social li {
	border-top: 0
}

#navContainer .social a {
	align-items: center;
	display: flex;
	justify-content: center
}

body>footer .wrap {
	display: flex;
	flex-direction: column;
	justify-content: flex-start
}

#web-solutions {
	order: 1;
	font-size: .875em;
	text-align: center
}

body>footer .fatFooter {
	align-items: center;
	flex-direction: column;
	text-align: center
}

body>footer .fatFooter>* {
	margin: 0 0 2.5em
}

body>footer .logos {
	align-items: center;
	display: flex;
	flex-direction: column
}

body>footer .logos>img {
	margin: 0 0 1.5em;
}

body>footer .logos a:not(:first-of-type) img {
	margin: .5em 0 0
}

body>footer .copyright {
	margin: 0 0 .75em;
	text-align: center
}

body>footer .footer-bottom {
	display: flex;
	flex-direction: column
}

body>footer nav span:first-of-type {
	display: none
}

body>footer .social a {
	display: block;
	padding: .5em .625em
}

main>div>#content {
	padding: 2em 0 3em
}

#sidenav {
	margin: 0 0 3.5em
}

.pageHeader .image {
	aspect-ratio: 3
}

.pageHeader strong {
	left: 0;
	margin: -2.5em 0 0;
	padding: 0 1.5em
}




/* SHARED ------------------------------ */
ul.ws-columns.ws-flex {
  --ws-column-count: 2;
}




/* HERO RIBBON ------------------------------ */
#hero {
	background: var(--ws-blue);
	padding-top: .3125em
}

#hero::before {
	background: url('/theme-two/images/multicolor-border.svg') repeat-x left top/auto 100%;
	content: '';
	height: .3125em;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1
}

#hero h1 {
	font-size: clamp(1.5em,1em + 1.6vw,1.75em);
}


/* AT-A-GLANCE RIBBON------------------------------ */
#at-a-glance ul {
	grid-gap: 3.5em 1.5em;
	grid-template-columns: 1fr 1fr;
}

#at-a-glance ul li p .info {
	padding: 2.125em 1em 2.5em;
}


/* TEXT-IMAGE RIBBON ------------------------------ */
.text-image .textbox {
	margin-bottom: 2.5em;
}


/* BLOG RIBBON ------------------------------ */
#blog ul {
	grid-template-columns: 1fr;
	grid-gap: 4rem;
}

#media .left {
	margin: 0 0 3.5em;
}


/* VALUES RIBBON ------------------------------ */
#values .textbox {
	margin: 0 0 2.5em;
}

#values .circle-image {
	margin: 0 auto;
}


/* GRID SECTION RIBBON ------------------------------ */
#grid-section {
	display: block;
}

#grid-section>div {
	grid-gap: 3em;
	padding-inline: 1.5em;
}

.section-body {
	padding: 1.5em 0 0;
}



/* BG-CALLOUT (LANDING) ----------------------------- */
#bg-callout::after {
	background: rgba(var(--ws-off-white-rgb),.85)
}

#bg-callout .image {
	grid-column: none;
	left: 0;
	width: 100%;
}



/* CTA RIBBON ------------------------------ */
#cta>div {
	display: grid;
}

#cta .textbox {
	grid-row: 1/2;
}

#cta .circle-image {
	grid-row: 2/3;
	margin: 2em auto 0;
	max-width: 35.75em;
}

#colored-squares.ws-flex {
	--ws-column-count: 2;
	max-width: 35em;
	margin-inline: auto;
}



/* MEDIA QUERIES ---------------------------- */

@media(max-width: 31.25em) {
	#hero .textbox {
		margin-top:-2em;
		padding-top: 0;
	}

	#hero h1>span:nth-of-type(1n) {
		margin-left: 0;
	}

	.fader {
		position: relative;
	}

	.fader>div {
		aspect-ratio: 3;
	}

	#at-a-glance ul {
		grid-template-columns: 1fr;
	}

	#colored-squares.ws-flex {
		--ws-column-count: 1;
		max-width: 15em;
	}
}