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

body.slideNav {overflow: hidden;}

/* HEADINGS ------------------------------ */
h1 {font-size:1.5em;}
h2 {font-size:1.45em}
h3 {font-size:1.3em}
h4, th{font-size:1.2em}
h5 {font-size:1.1em}
h6 {font-size:1.0em}
.intro {font-size: 1.25em;}

/* HEADER ------------------------------ */
body>header{position: sticky; top: 0; background:#fff; z-index: 5;}
body>header a#brand {display: block; margin: 1rem auto 1rem 30px; width: 25rem; max-width: 70%;}
body>header a#brand img {max-width: 100%; display: block;}
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:var(--dark-blue);z-index:3;-webkit-transition: left 200ms ease;transition: left 200ms ease;overflow:auto;-webkit-overflow-scrolling: touch;}
        body.slideNav #navContainer{left: 25%;}
#navContainer nav{display: inline}
#navContainer ul{display: block;float: left;width: 100%;margin: 0;padding-left: 0}
#navContainer li {display:block;float: left;width: 100%; position: relative; border-top: 1px solid rgba(255,255,255,0.125)}
#navContainer li li {border: 0}
#navContainer a, #navContainer .menu{color:#FFF;line-height: 1.5em;padding: .625em 1rem;display:block;float: left;width: 100%}
#navContainer a:hover,#navContainer .menu:hover,
#navContainer li.on a{background-color: var(--blue);color: #fff}
#navContainer li.open{background-color: var(--blue);}
#navContainer li>span{display: block; position: absolute;right: 0;top: 0;width:2.75em;height: 2.75em;}
#navContainer li>span:before{content: ""; display: block; width: 50%; height: 0.0625rem; background-color: #FFF; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); transform-origin: center center;}
#navContainer li>span:after{content: ""; display: block; width: 50%; height: 0.0625rem; background-color: #FFF; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transform-origin: center center;}
#navContainer li.open > span:before {transform: translate(-50%, -50%)rotate(0deg);}
#navContainer li > span::before { -webkit-transition: -webkit-transform .2s ease; transition: -webkit-transform .2s ease; transition: transform .2s ease; transition: transform .2s ease, -webkit-transform .2s ease;}
#navContainer ul ul {font-size: .8em;display: none}
#navContainer ul ul a {padding-left: 2rem}
#navContainer ul ul li.on a {background-color: var(--ws-red);}
#navContainer #ancillary {clear:both;display: block;}
#navContainer #ancillary .search {clear:both; display: block; overflow: auto; padding:1rem; border-top: 1px solid rgba(255,255,255,0.125)}
#navContainer #ancillary .search input {float: left;}
#navContainer #ancillary .search input[type="text"] {width: calc(100% - 5rem)}
#navContainer #ancillary .search input[type="submit"] {width: 5rem;}

#navContainer .cartCount {
	background: #FFF;
	border-radius: 50%;
	color: var(--blue) !important;
	display: inline-block;
	font-weight: 700;
	margin: 0 0 0 .5em;
	text-align: center;
	width: 1.5em;
}

#navContainer li button {
  display: none;
}

header > .mobile-cart {
        position: absolute;
        top: calc(50% - 0.625rem);
        transform: translateY(-50%);
        right: 30px;
        z-index: 3;
}
header > .mobile-cart:before {
        content: "";
        width: 1.125em;
        height: 1em;
        background: url(/images/icons/shopping-cart-dark-blue.svg) no-repeat center;
        background-size: contain;
        position: absolute;
        right: 0;
        bottom: 0;
        display: inline-block;
        transition: all .2s ease;
}
header > .mobile-cart .cartCount {
        width: 1.534em;
        height: 1.534em;
        font-size: 0.5625em;
        background: var(--blue);
        color: #fff;
        border-radius: 50%;
        position: absolute;
        right: -13px;
        bottom: 11px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
}

#alertApp #alertDesc, .interior.landing #alertApp #alertDesc  {overflow: hidden !important;}
/* mobilenav */
#mobilenav{background-color: var(--dark-blue);float: left;width: 100%;text-align: center; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; -ms-flex-align: center; -webkit-box-align: center; align-items: center;}
#mobilenav a, #mobilenav span{color: #fff;line-height: 2.5em; -ms-flex-order: 0; -webkit-box-ordinal-group: 1; order: 0; -ms-flex: 1 1 auto; -webkit-box-flex: 1; flex: 1 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;}
#mobilenav > a {border-right: 1px solid rgba(255,255,255,.125);}
#mobilenav a:hover, #mobilenav span:hover{color: #fff;background-color:var(--blue)}
#mobilenav .menu {display: flex; align-items: center; justify-content: center;}
#mobilenav .menu svg {width: 0.875rem;fill: #FFF;margin-left: .25rem;margin-top: -2px;pointer-events: none;}
/* hamburger */
.hamburger{height: 2em;width: 2em;display: block;position: fixed;right: 3px;top:3px;z-index:2;opacity: 0;background-color: var(--blue);padding: 3px 5px;}
.hamburger path {fill:#fff;font-size: 1.75em;}
.hamburger svg {pointer-events: none;}
.hamburger.on{opacity: .3}

.cart-dropdown {display: none;}

/* MAIN ------------------------------ */
.landing .pageHeader, .pageHeader {aspect-ratio: 5/1;}
.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: 1.5em;}

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


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

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




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

.interior main > .wrap {padding-top: 3rem;}

.content {margin-bottom: 2.1875rem;}

/* HOME -------------------------------- */
.home .hero .slick-slide .slide {padding-bottom: 50%;}
.hero-header {
	transform: translate(50%, -50%);
	top: 50%;
        max-width: 100%;
}
.hero-header.animated-down.animated {width: 75%;}

.courses .callouts li + li, .resources .callouts li + li {margin-top: 2rem;}

.resources .callouts li {max-width: 28.125rem; margin-left: auto; margin-right: auto;}

.welcome-message .welcome-right {margin-top: 2rem;}
.welcome-message .wrap {padding: 3rem 1.5rem 3.5rem;}

.course-callouts section:nth-of-type(n+2) {margin-top: 1.875rem;}
.course-callouts .buttons {margin-left: 0;}
.course-callouts .buttons .button {margin: 5px 0px;}

.course-details-sidebar {margin-top: 2rem;}

.resources-top > .wrap {
	padding-top: 3rem;
	padding-bottom: 4rem;
}

ul.subcategory-list {gap: 2%;}
ul.subcategory-list li {width: 49%;}
.landing main ul.subcategory-list li:nth-of-type(n+3), #content ul.subcategory-list li:nth-of-type(n+3) {margin-top: 2%;}

/* STAFF ------------------------------- */
.staffApp hr, .staffApp section{clear:both;width:100%}

/* CART POPOVER ------------------------ */
#cartWindowPopover .cart-dropdown-bottom {
  text-align: center;
}

#cartWindowPopover .cart-dropdown-bottom .button {
  margin-top: 0.375rem;
}

/* FOOTER ------------------------------ */
body>footer .wrap{display: -ms-flexbox;display: -webkit-box;display: flex;-ms-flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-ms-flex-wrap: nowrap;flex-wrap: nowrap;-ms-flex-pack: start;-webkit-box-pack: start;justify-content: flex-start;-ms-flex-line-pack: stretch;align-content: stretch;-ms-flex-align: stretch;-webkit-box-align: stretch;align-items: stretch;}
#web-solutions{-ms-flex-order: 1;-webkit-box-ordinal-group: 2;order: 1;}
body>footer .wrap nav a+span:before {content: "|"; margin: 0 0.5em}
body>footer .fatFooter {flex-direction: column; align-items: center; justify-content: center; text-align: center; margin-bottom: 2rem;}
body>footer .fatFooter nav {margin-top: 1rem;}
body>footer .wrap {text-align: center;}

/* ANIMATIONS --------------------------- */
.hero-header.animate-down {top: 35%;}
.hero-header.animate-down.animated {top: 50%;}





/* EXAM ------------------------------ */

.exam .progress ol {
  padding-inline: 1em;
}

.exam .progress ol li {
  flex: 0;
  position: relative;
}

.exam .progress ol li>span {
  font-size: .6875em;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}

.exam .progress ol li::before {
  width: 2em;
}

.exam .progress ol li.current {
	top: .125em;
}

.exam .progress ol li:not(.current)::before {
	font-size: clamp(0.75em, 2.4vw, 1.125em); /* 500 - 750 */
	position: relative;
	top: calc(.5625em - clamp(0em, -0.875em + 2.8vw, 0.438em)); /* 500 - 750 */
}

.exam .progress ol li:not(.current)>span {
	clip: rect(0,0,0,0);
	height: 0;
	opacity: 0;
	overflow: hidden;
	width: 0;
}

.exam fieldset div.custom-radio:last-child {
  margin: 0;
}




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

/* 600 */
@media (max-width: 37.5em) {
  .hero-header {
    width: 80%;
  }

  .exam .controls {
    flex-wrap: wrap;
  }

  .exam .controls>div {
    flex: auto;
  }

  /* Save button */
  .exam .controls>div:nth-child(2) {
    margin: 1.5em 0 0;
    order: 3;
    text-align: center;
    width: 100%;
  }

  /* Prev */
  .exam .controls>div:nth-child(1) {
    order: 1;
    width: 50%;
  }

  /* Next */
  .exam .controls>div:nth-child(3) {
    order: 2;
    width: 50%;
  }

}


/* 500 */
@media (max-width: 31.25em) {
        .hero-header {width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(253,252,252,.75); padding: 1.125rem 1.5rem;}
        .hero-header h1 {font-size: 1.4rem; width: 90%;}

        #alertApp {padding: .44rem 1.5rem;}

        .courses .callouts .button {display: table; margin-left: auto; margin-right: auto;}
        .courses .callouts .button + .button {margin-left: auto; margin-top: .5rem;}

        .course-callouts .course-content {flex-direction: column-reverse; padding: 1.375rem 1.25rem;}
        .course-callouts .course-content .course-content-left {width: 7.25rem; margin: 1rem auto 0;}

        .photoright, .course-details .photoright {float: none; margin: 1rem auto; display: block; max-width: 100%;}

        .highlight .highlight-content .button {display: table;}
        .highlight .highlight-content .button + .button {margin-top: 1rem;}

        ul.subcategory-list {gap: 0;}
        ul.subcategory-list li {width: 100%;}
        .landing main ul.subcategory-list li:nth-of-type(n+2), #content ul.subcategory-list li:nth-of-type(n+2) {margin-top: 1rem;}

        footer address a {display: block; line-height: 1;}
}



/* ---------------------- STYLE-M.CSS ---------------------- */