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

#brand  {
  display: block;
  padding-inline: 1em;
}

#brand img {
  display: block;
  height: auto;
  float: left;
  max-width: 29.375em;
  padding: 1em 0;
  width: 100%;
}


/* NAV ------------------------------ */
body {
  background: #FFF;
}

body>header {
  display: contents;
}

.slideNav{overflow: hidden;}

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

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

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

body.slideNav {overflow: hidden;}

.slideNav #navContainer{left: 25%;}

#navContainer nav{
  align-content: stretch;
  align-items: flex-start;
  display: inline-flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

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

#navContainer a,
#navContainer .menu {
	color:#ccc;
	line-height:2em;
	padding:0 1rem;
	display:block;
	width: 100%;
	border-top: solid 1px rgba(255,255,255,.1);
}

#navContainer .menu {
	background: transparent;
	border: 0;
	text-align: left;
	font-weight: 400;
}

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

#navContainer a:is(:hover,:focus-visible),
#navContainer .menu:is(:hover,:focus-visible),
#navContainer li.on a {
	background-color:var(--ws-purple);
	color: #fff;
}

#navContainer li.open{background-color:var(--ws-purple)}

#navContainer li li a {border: none}

#navContainer li>button {
    background-color:#fff;
    border: 0;
    border-radius: 50%;
    color: #000;
    opacity: .25;
    display: block;
    font-size: 1em;
    padding: 0;
    position: absolute;
    right: .25em;
    top: .25em;
    line-height: 1.5em;
    width:1.5em;
    height: 1.5em;
}

#navContainer li>button:is(:hover,:focus-visible),
#navContainer li.on>button {
	opacity: .75;
}

#navContainer li>button:before{
  content: "";
  display: block;
  width: 50%;
  height: .05em;
  background-color: #000;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center center;
}

#navContainer li>button:after{
  content: "";
  display: block;
  width: 50%;
  height: .05em;
  background-color: #000;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}

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

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

#navContainer ul ul { font-size: .8em; overflow: hidden; }
#navContainer ul ul a {padding-left: 1rem}
#navContainer ul ul li.on a {background-color:var(--ws-green)}
#navContainer ul ul ul {display: block;font-size: 1em}


#mobilenav {
  background-color: var(--ws-purple);
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  top: 0;
  align-items: center;
  position: sticky;
  z-index: 5;
}

#mobilenav :is(a, button) {
  background: transparent;
  border: 0;
  color: #fff;
  line-height: 2.5em;
  order: 0;
  flex: 1 1 auto;
  font-size: 1em;
  font-weight: 400;
  align-self: auto;
  padding: 0;
}

#mobilenav :is(a, button):is(:hover,:focus-visible) {
  color: var(--ws-purple);
  background-color:var(--ws-green);
}

#mobilenav button::before {
  background: #FFF;
  content: "";
  display: inline-block;
  height: 2.5em;
  margin-right: 0.5em;
  mask: url('/images/m/hamburger-white.svg') no-repeat center top .75em / contain;
  transition: var(--ws-transition);
  vertical-align: middle;
  width: 0.75em;
}

#mobilenav button:is(:hover,:focus-visible)::before {
	background: var(--ws-purple);
}


.hamburger{height: 2em;width: 2em;display: block;position: fixed;right: 3px;top:3px;z-index:2;opacity: 0;background-color:var(--ws-purple);padding: 1px 3px 3px 3px;}
.hamburger path {fill:#fff;font-size: 1.75em;}
.hamburger svg {pointer-events: none;}
.hamburger.on{opacity: .3}


#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;
}

#ancillary {
  width:100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: flex-start;
  }

  .search {
    padding:.25em 1em 0 1em;
    width: 100%;
    float: left;
    border-top: solid 1px rgba(255,255,255,.1);
    order: 2;
    flex: 0 1 auto;
    align-self: auto;
  }

  #ancillary div {
    width:100%;
    order: 1;
    flex: 0 1 auto;
    align-self: auto;
  }


.search label {color: #fff}
#navContainer a.search-button,button.search-button{display: none}
.search input[type="text"],.search input[type="submit"] {display: inline-block;height: 2em;border: 0;float: left}
.search input[type="text"]{background-color:#fff;width: calc(100% - 2.5em);display: inline-block}
.search input[type="submit"] {width:2.5em;padding:.5em .5em;border-radius: 0;display: inline-block}
.videoContainer {width: 100%;height:0;line-height:0;position: relative;padding-top:56.25%;margin-bottom: 1em /* 16:9 */}
.videoContainer.ratio-4-3 {padding-top:75%; /* 4:3 full-frame */}
.videoContainer iframe {position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;border:0}
#ancillary a.calendars, #ancillary a.employment, #ancillary a.contact {display: none}
.resourcesNews .wrap{padding:2em 1em}
#photoRotator{float: left}
.resourcesNews section {float: left; width: 100%; margin: 2.5% 0 5% 0;padding:3em 1em 1em 1em;}
.resourcesNews section+section{margin-top: 15%}
.polaroid.left, .polaroid.right {display: none}
.schoolLogos h2{width: 100%}
#logo-slider .carousel-wrapper #wrapper-div a {width:100%}

#alertApp{padding: .5em 0}
.alertOpen #alertDesc{text-align: center;padding:.5em 1em}
.welcome .button {margin-top:1em}
/* MAIN ------------------------------ */
#globalAlertApp {clear: both;}

main {padding-top: 1em}
main, body>footer{padding-left: 1rem;padding-right: 1rem}
.home main h1{font-size: 1.5em;margin-top: -2em;}
.m {background-size: 57px 68px;z-index: 2;width: 57px;height:68px;top: -3em;}
.home main{padding-left:0;padding-right: 0}

.benigni {width: 90%;height: 16em;margin: 1em auto}
.benigniMessage,.purpleBkg {padding: 2em;text-align: center;font-size: 1rem}
.benigniMessage h2{color:#fff}

main, body>footer{padding-left: 1rem;padding-right: 1rem}

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

.content ul li{padding-left: 2em;margin-bottom: .5em;}
.content ul li:before {left: 1em;}

.formTable, .formTable table{width:100%;display: block}
.formTable tbody{display: block}
.formTable tr{display: block}
.formTable td{display: block;width:100%;padding: 0}
.formTable input[type="text"], .formTable input[type="password"], .formTable input[type="tel"], .formTable input[type="number"], .formTable input[type="email"], .formTable input[type="url"], .formTable textarea{margin-bottom:1em}
.formTable table td + td {padding-left: 0 !important;}

/* Contact Form - table removed ----- */
.form-flex :where(.half, .third) {
	width: 100%;
}

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


.photoright{margin:0 0 .75em 1em;}
.photoleft{margin:0 1em .75em 0;}
.button{margin-top: .5em}


.footerImagesContainer{width: 100%;overflow: hidden}
.footerImages{position:relative;width: 110%;max-width: 1600px; overflow:visible;display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;}
.footerImages img{width:33.33%;border:solid 5px #fff;}
.footerImages .four, .footerImages .five {display: none}

.footerImages .one{-moz-transform: rotate(-7deg) translateX(0);position: relative;bottom:-1em;left: .5em;
-webkit-transform: rotate(-7deg) translateX(0);
-o-transform: rotate(-7deg) translateX(0);
-ms-transform: rotate(-7deg) translateX(0);
transform: rotate(-7deg) translateX(0);}

.footerImages .two{-moz-transform: rotate(2deg) translateX(-2em);position: relative;bottom:-1em;left: 1em;z-index: 2;
-webkit-transform: rotate(2deg) translateX(-2em);
-o-transform: rotate(2deg) translateX(-2em);
-ms-transform: rotate(2deg) translateX(-2em);
transform: rotate(2deg) translateX(-2em);}

.footerImages .three{-moz-transform: rotate(-2deg) translateX(-3em);position: relative;bottom:-1em;left: 1em;
-webkit-transform: rotate(-2deg) translateX(-3em);
-o-transform: rotate(-2deg) translateX(-3em);
-ms-transform: rotate(-2deg) translateX(-3em);
transform: rotate(-2deg) translateX(-3em);}

/* School Landing Page ------------------------------ */
.pageHeader { height:15em;}
#schools main{padding:0 0 0 0}
#schools .welcome{padding:2em 2em 0 2em}
.schoolCallouts{margin: 0 auto;text-align: center;padding: 1em 0 0 0;}
.schoolCallouts .wrap{padding:1em 1em;}
.schoolCallouts section{margin-bottom: 1.5em}
.stats{padding-top: 3em}
.stats .stat {padding:2em 2em;width: 100%;}
.stat:nth-child(even){background-color: #fff}
.fourCallouts div {width: 100%; height:100vw;}
.fourCallouts div {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
  }
.fourCallouts div{border-top: 3px solid #fff;}

/* FOOTER ------------------------------ */
.fatFooter,body > footer .wrap{text-align: center}
a.twitter{text-align:center;width: 100%;padding: 1em 1em;margin-bottom: 1em}
.google {margin-top: 1em}
.fatFooter ul{margin: 0}

body>footer .wrap{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: stretch;
}
#web-solutions-exposure{
  order: 1;
}