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

/* HEADER ------------------------------*/
body>header{position: sticky; top: 0; border-bottom: solid 1px var(--light-grey); background:#fff; height: 6.25rem; display: flex; align-items: center; justify-content: space-between; z-index: 3;}
body>header>.wrap{height:60px}
#navContainer {align-self: flex-end;}
#brand{display:block;margin-left: 1rem;float: left;}
#brand img{display: block; max-width: 100%; height: auto; width: 22.3125rem;}

body>header.fixed {
  position: fixed;
  top: 0;
  transform: translateY(-100%);
}

body>header.sticky {
  border-bottom: solid 1px var(--light-grey);
  transform: translateY(0);
}

.mobile-cart {display: none;}


/* nav */
nav ul{margin: 0}
#mainnav{overflow:visible}
#mainnav > ul > li > a {font-weight: 700; color: var(--grey); line-height: 3.75rem;}
#mainnav ul{text-align:center;overflow:visible;margin: 0;padding: 0 0 2px 0;}
#mainnav li{display:inline-block;position:relative}
#mainnav a{line-height:2em;padding:0 .7em;display:inline-block;color:#fff;text-decoration:none;}
#mainnav>ul>li:hover>a, #mainnav>ul>li:active>a{background:var(--ws-red);color:#fff}
#mainnav>ul>li.on>a{background:var(--blue); color:#FFF;}
/* drop-down menu */
#mainnav li ul{z-index:1;width:246px;padding:0;background:var(--light-grey);position:absolute;overflow:auto;height:auto; top: -200vh;opacity: 0;z-index: -1; visibility: hidden; transition: ease 200ms opacity 0.35s;}
#mainnav li ul li:nth-of-type(even) {background: #FFF;}
#mainnav li:hover ul, #mainnav>ul>li>a.tapped + ul, #mainnav>ul>li.expand>ul {opacity: 1; top:auto; visibility: visible; z-index: 1;}
#mainnav>ul>li:nth-last-child(-n+2) ul{right:0}
#mainnav li ul li{width:100%;display:block;float:left}
#mainnav ul li ul li a{background:none;color:var(--grey);}
#mainnav li ul li a{font-size:1rem;line-height:1.1em;padding:.563em 1em; display:block;width:100%;text-align:left;float:left}
#mainnav li ul li a:hover, .t1 li ul li a:active{color:#FFF;background:var(--blue);}

/* Accessible dropdowns */
#mainnav>ul>li>button {
	background: transparent;
	bottom: 0;
	border: 0;
	height: .5rem;
	opacity: 0;
	padding: 0;
	pointer-events: none;
	position: absolute;
	right: 50%;
	transform: translate(50%,-50%);
	width: 1.25rem;
}

#mainnav>ul>li>button:focus-visible {
	opacity: 1;
}

#mainnav>ul>li>button:before {
	background: url('/images/icons/misc/chevron-down.svg') no-repeat center / contain;
	content: '';
	height: .75rem;
	left: 0;
	position: absolute;
	right: 0;
	top: calc(50% - 6px);
}


/* ancillary */
#ancillary {position:absolute;right:0;top:0;font-size:1rem;}
#ancillary ul{display: flex}
#ancillary li{display: inline;}
#ancillary a {display: inline-block;padding: .41em .8em; text-decoration:none;color:#757575; position: relative;}
#ancillary > ul > li:nth-last-of-type(-n+2) > a {background: #EFEFEF; color: var(--blue); font-weight: 500;}
#ancillary > ul > li:nth-last-of-type(-n+2) > a:hover {background: var(--blue); color: #FFF;}
#ancillary > ul > li:nth-last-of-type(2) > a {border-radius: 0 0 0 2px; border-right: 1px solid #FFF; margin-left: .75rem;}
#ancillary > ul > li + li:nth-last-child(n+3) a:before {content: "|"; color: var(--light-grey-alt); position: absolute; left: -2px; top: 50%; transform: translateY(-50%);}
#ancillary a:hover, #ancillary a:active,#ancillary li.on a{color:var(--dark-blue);}
#ancillary li.on a {text-decoration:none;color:var(--dark-blue);}
#ancillary .search{display: inline;}
#ancillary .search input{display: inline-block}
#ancillary > ul > li:last-of-type > a:before {
        content: "";
        width: 1.125em;
        height: 1em;
        background: url(/images/icons/shopping-cart.svg) no-repeat center;
        background-size: contain;
        position: relative;
        display: inline-block;
        margin: 0 7px -3px 0;
        transition: all .2s ease;
}

#ancillary > ul > li:last-of-type > a:hover:before {filter: grayscale(1) brightness(0) invert(1);}
#ancillary > ul > li:last-of-type > a .cartCount {
        color: var(--grey);
        width: 1.534em;
        height: 1.534em;
        font-size: 0.9375em;
        background: #FFF;
        border-radius: 50%;
        margin-left: 7px;
        text-align: center;
        display: inline-block;
}
#ancillary ul li a.item {background: var(--blue); color: #FFF;}
#ancillary > ul > li:last-of-type > a.item:before {filter: grayscale(1) brightness(0) invert(1);}

/* Using !important so that ancillary T2 items will always be hidden on desktop */
#ancillary > ul > li > ul {display: none !important;}

.cart-dropdown .cart-dropdown-bottom {
        position: relative;
        text-align: center;
        padding: 20px 25px 25px;
}
.cart-dropdown .cart-dropdown-bottom:before {
        content: "";
        background: url(/images/icons/star.svg) no-repeat center;
        background-size: contain;
        right: 50%;
        transform: translateX(50%);
        width: 1.25rem;
        height: 1.1875rem;
        top: -0.5rem;
        position: absolute;
}
#ancillary .cart-dropdown .cart-dropdown-bottom .button {
        display: block;
        color: #FFF;
        text-transform: uppercase;
        margin-top: 0.8125rem;
        padding: .625em;
}
#ancillary .cart-dropdown .cart-dropdown-bottom .button:hover {
        color: var(--pale-red);
}

#ancillary .cart-dropdown ul + p {
    text-align: center;
    margin: .5rem 0 .75rem;
}

.cart-dropdown .cart-dropdown-bottom .subtotal {
        font-size: 1.125rem;
}
.cart-dropdown .cart-dropdown-bottom .subtotal b {
        color: var(--dark-blue);
}

header:not(.sticky) #ancillary > ul > li:last-of-type.hover > div.cart-dropdown {
        position: fixed;
        top: 0;
}
header.fixed:not(.sticky) #ancillary > ul > li:last-of-type.hover > div.cart-dropdown {
        top: 100px;
}
/* mobile */
#mobilenav,.menu{display: none}

#ancillary .cart-dropdown {
        z-index:1;
        width:300px;
        padding:0;
        background:var(--light-grey);
        position:absolute;
        overflow:auto;
        height:auto;
        top: -200vh;
        right: 0;
        opacity: 0;
        z-index: -1;
        visibility: hidden;
        transition: ease 200ms opacity 0.35s;
        border: 1px solid var(--light-grey-alt);
}
#ancillary .cart-dropdown ul {
        padding: 0.875rem;
        background: #FFF;
        display: block;
}
#ancillary .cart-dropdown ul li {display: block;}
#ancillary > ul > li:last-of-type:hover > div, #ancillary > ul > li:last-of-type.hover > div {opacity: 1; top:auto; visibility: visible; z-index: 1;}
.cart-dropdown ul li + li {
        border-top: 1px solid var(--light-grey-alt);
        margin-top: 0.5rem;
        padding-top: 0.5rem;
}
.cart-dropdown ul li span {
        display: block;
        padding: 3px 10px;
        line-height: 1.3;
}
.cart-dropdown .code {
        font-size: 0.875rem;
        font-weight: 300;
}
.cart-dropdown .price, .cart-dropdown .quantity {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--ws-red);
}
/* MAIN ------------------------------ */
.landing .pageHeader {aspect-ratio: 7/1;}
main>div>aside {width:24rem;padding-right: 11.5rem; margin-top: 1.75rem; float: none;}
main>div>#content{float:none;width:calc(100% - 24rem);padding:0 0 50px;overflow:hidden;min-height:600px;position:relative;}
main>div>aside>#sidenav {position: sticky; top: 7rem;}
body.fullWidth main>div>#content {width:calc(100% - 4rem);margin: 0 0 0 auto;float: none;}
body.fullWidth.landing main>div>#content {margin: 0 auto;}
.twoCol, .threeCol, .resCol{
-webkit-column-rule:0;
   -moz-column-rule:0;
        column-rule:0;
}

.twoCol {-webkit-columns:2;-moz-columns:2;columns:2;}
.threeCol {-webkit-columns:3;-moz-columns:3;columns:3;}
.resCol { -webkit-columns: auto;-moz-columns: auto;columns: auto; -webkit-column-width: 13em;-moz-column-width: 13em;column-width: 13em;}

.formTable td{width:50%}
.formTable td{padding:0 0 .5em .5em}
.formTable td:first-child{padding:0 .5em .5em 0}
.formTable td[colspan="2"]{padding-right:0}
.formTable.formLoose,.formTable.formLoose td{width:auto}


/* Forms - table removed ----- */
.form-flex .half {
	width: calc(50% - .5em); /* Full on mobile */
}

.form-flex .third {
	width: calc(33.33% - .625em); /* Full on mobile */
}

.form-flex .quarter {
	width: calc(25% - .5em); /* Half on mobile */
}





.loginForm section {
        width: 50%;
        float: left;
        padding-right: 1.5em;
    }

.photoright{margin:0 0 3em 4em;}
.photoleft{margin:0 4em 3em 0;}

.wsManagementLogin td:first-child {width:40%; text-align: right}

main {position: relative;}
.interior:not(.landing) main {
        overflow: clip;
}
.interior:not(.landing) main .wrap:before {
        content: "";
        position: absolute;
        left: 6%;
        top: 0;
        width: 100vw;
        transform: translateX(-100%);
        bottom: 0;
	background-image: url(/images/pattern-background.png);
	background-repeat: repeat;
        background-size: 3.375rem auto;
	background-color: #fafafa;
}
.interior:not(.landing) main .wrap:after {
        content: "";
        position: absolute;
        right: 5%;
        top: 0;
        width: 100vw;
        transform: translateX(103%);
        bottom: 0;
	background-image: url(/images/pattern-background.png);
	background-repeat: repeat;
        background-size: 3.375rem auto;
	background-color: #fafafa;
        overflow: hidden;
}
.interior main > .wrap {
        padding-top: 3.75rem;
        display: flex;
        flex-direction: row-reverse;
        flex-wrap: wrap;
        justify-content: space-between;
        overflow: visible;
}

/* HOME */
.hero-header {
	transform: translateX(50%);
	top: 57%;
}

.courses .callouts ul {
	display: flex;
	flex-wrap: wrap;
}
.courses .callouts ul li {
	width: calc(33.33% - .67rem);
	margin-left: 1rem;
}

.resources .callouts {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
}
.resources .callouts li {
	margin-left: 1rem;
	width: calc(33.33% - .67rem);
}
.resources .callouts li:nth-of-type(3n+1) {
	margin-left: 0;
}


.welcome-message .wrap {
        padding: 4.3125rem 1.5rem 5.3125rem;
	display: flex;
	align-items: center;
        justify-content: space-between;
}
.welcome-message .welcome-left {width: 44.2%;}
.welcome-message .welcome-right {width: 43.8%;}
.welcome-message p {padding-right: 2rem;}

.course-callouts section {width: calc(50% - 0.625rem);}
.course-callouts section:nth-of-type(even) {margin-left: 1.25rem;}
.course-callouts section:nth-of-type(n+3) {margin-top: 1.875rem;}

.course-detail-landing > .wrap, .course-detail-landing > .wrap > #productForm {display: flex; overflow: visible;}
.course-detail-landing > .wrap .course-details {width: 54%;}
.course-detail-landing > .wrap .course-details-sidebar {margin-left: 10%; width: 36%;}

.management .course-detail-landing .sticky-sidebar {top: 3rem;}


.course-register :is(button, .button).white-outline:is(:hover, :focus-visible) {
  background: var(--ws-red);
  border-color: var(--ws-red);
}

.course-register.dark-blue :is(button, .button).white-outline:is(:hover, :focus-visible) {
  background: var(--dark-blue);
  border-color: var(--dark-blue);
}

.course-register :is(button, .button):focus-visible {
	background: #FFF !important;
	color: var(--pale-red) !important;
}

.course-register.dark-blue :is(button, .button):focus-visible {
	color: var(--dark-blue) !important;
}


.resources-top > .wrap {
	padding-top: 4.125rem;
	padding-bottom: 6.25rem;
}

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

/* FOOTER ------------------------------ */
.fatFooter>nav{margin-left: 9.375rem;}
.fatFooter>nav li + li {margin-top: .25rem;}
#web-solutions {float:right;margin-left:11px}
body>footer .wrap nav span:before {content: "|"; margin: 0 0.5em}
body>footer .fatFooter {align-items: flex-end; justify-content: flex-start; margin-bottom:4.1875rem;}
.footer-social {position: absolute; right: 1.5rem;}

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

.delay-2 {-webkit-transition-delay:.3s;  transition-delay:.3s;}
.delay-3 {-webkit-transition-delay:.45s; transition-delay:.45s;}
.delay-4 {-webkit-transition-delay:.6s;  transition-delay:.6s;}
.delay-5 {-webkit-transition-delay:.75s; transition-delay:.75s;}
.delay-6 {-webkit-transition-delay:.9s;  transition-delay:.9s;}
.delay-7 {-webkit-transition-delay:1.05s; transition-delay:1.05s;}
.delay-8 {-webkit-transition-delay:1.2s; transition-delay:1.2s;}
.delay-9 {-webkit-transition-delay:1.35s; transition-delay:1.35s;}
.delay-10 {-webkit-transition-delay:1.5s; transition-delay:1.5s;}




/* EXAM ( Layout ) ------------------------------ */

main.exam .flex {
  display: flex;
  justify-content: space-between;
}

main.exam .flex .inputs {
  width: 48%;
}

main.exam .flex .block {
  padding-left: clamp(1.5em, -2.538em + 8.62vw, 5em);
  width: 52%;
}



/* EXAM ( Progress indicator ) ------------------------------ */

.exam .progress ol li::before {
	font-size: 1.125em;
	width: 2.3125rem;
}




/* EXAM ( Questions ) ------------------------------ */

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

.exam fieldset .custom-radio {
  width: 50%;
}




/* EXAM ( Controls ) ------------------------------ */

.exam .controls a:is(:hover, :focus) {
  color: var(--ws-red);
}




/* EXAM RESULTS ( Score Box ) ------------------------------ */

.score-box .button:is(:hover, :focus) {
  background: #FFF;
  color: var(--ws-red);
}





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

/* 1350 */
@media (max-width: 1350px) {
        .hero-header.animate-down.animated {
                top: 21%;
        }
}

/* 1200 */
@media (max-width: 75em) {
        #brand img {width: 29vw;}
        #mainnav a {padding: 0 .3em}
        #ancillary, #mainnav a {font-size: 0.8125rem;}
        #ancillary > ul > li:last-of-type > a:after {width: 1.45em; height: 1.45em;}

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

        .resources .callouts li a {padding: 1.5625rem 1rem;}
        .resources .callouts li .callout-title {font-size: 1.5rem;}
}


/* 900 */
@media (max-width: 56.25em) {
        body>header {justify-content: center; height: 6.5rem;}
        #brand {position: absolute; display: flex; left: 0; top: 0; height: 3.5rem; align-items: center; justify-content: center;}
        #mainnav > ul > li > a {line-height: 2.75rem;}
        #navContainer {width: 100%; background: var(--light-grey);}
        #mainnav a {padding: 0 .75em}

        main>div>aside {width: 18rem; padding-right: 5.5rem;}
        body:not(.fullWidth)>main>div>#content {width: calc(100% - 18rem);}

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

        .welcome-message .wrap {flex-direction: column;}
        .welcome-message .welcome-left,
        .welcome-message .welcome-right {width: 100%;}
        .welcome-message .welcome-right {margin-top: 2rem;}

        .courses .callouts ul li {padding-left: .5rem; padding-right: .5rem;}

        .course-callouts .course-content {flex-direction: column-reverse;}
        .course-callouts .course-content .course-content-left {width: 50%; margin: 1rem auto 0;}

        .resources .callouts li a {margin: -2rem .5rem 0;}
        .resources .callouts li .callout-title {font-size: 1.4rem;}
        .resources .callouts li p, .resources .callouts li p b {font-size: 1rem;}

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

}

@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
	.interior:not(.landing) main .wrap:before {background-size: 2.5rem auto;}
}




/* ---------------------- STYLE-D.CSS ---------------------- */
