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

body.slideNav {overflow: hidden;}

/* HEADINGS ------------------------------ */
h1 {font-size:2rem;}
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 ------------------------------ */
#brand {
    text-align: center;
    width: 100%;
    display: block;
    padding: 1.25rem 0;
    font-size: 5.75vw;
}
body>*:not(footer)>.wrap, body>footer>.fatFooter, #alertApp>*, .home .wrap {padding-left: 5vw; padding-right: 5vw;}
body>header{position: relative; background:#fff}
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:#191d4b;z-index:3;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 #363962;}
#navContainer li li {border: 0}
#navContainer a, #navContainer .menu{color:#fff;font-weight: 400;line-height:2.75em;padding:0 1rem;display:block;width: 100%}
#navContainer .menu {background: transparent; text-align: left; border-radius: 0;}
#navContainer a:hover,#navContainer .menu:hover,
#navContainer li.on a{background-color:#ccd62a;color: #191d4b;}
#navContainer a:hover ~ button:before, #navContainer a:hover ~ button:after,
#navContainer li.on > button:before,  #navContainer li.on > button:after {background-color: #192d4b;}
#navContainer li.open{background-color: #f05727}
#navContainer li>button{display: block;  position: absolute;right: 0;top: 0;width:2.75em;height: 2.75em;background: transparent; padding: 0; border-radius: 0;}
#navContainer li>button: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>button: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 > button:before {transform: translate(-50%, -50%)rotate(0deg);}
#navContainer li > button::before { transition: transform .2s ease;}
#navContainer ul ul {
        font-size: .8em;
        height: 0;
        overflow: hidden;
        transition: height .3s ease;
}
#navContainer ul ul a {padding-left: 2rem}
#navContainer ul ul li.on a {background-color: #f05727;color: #fff;}
#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;}
/* mobilenav */
#mobilenav{background-color: #ccd62a;border-bottom: 2px solid #fff;float: left;width: 100%;text-align: center; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-content: center; align-items: center;}
#mobilenav a, #mobilenav button{color: #191d4b;font-weight: 400;line-height: 2.5em; order: 0; flex: 1 1 auto; align-self: auto;}
#mobilenav button {padding: 0; border-radius: 0;}
#mobilenav a:hover, #mobilenav button:hover{color: #fff;background-color:#191d4b;}
/* hamburger */
.hamburger{height: 2em;width: 2em;display: block;position: fixed;right: 3px;top:3px;z-index:3;opacity: 0;background-color: #191d4b;padding: 1px 3px 3px 3px;}
.hamburger path {fill:#fff;font-size: 1.75em;}
.hamburger svg {
        pointer-events: none;
        width: 65%;
        position: absolute;
        top: 50%;
        right: 50%;
        transform: translate(50%, -50%);
}
.hamburger.on{opacity: .3}
#mobilenav > button.menu {display: flex; align-items: center; justify-content: center;}
#mobilenav > button.menu svg {
        height: 1rem;
        fill: #191d4b;
        margin-right: .5rem;
        transition: all .2s;
}
#mobilenav > button.menu:hover svg {fill: #fff}
main>div>#content {padding: 3rem 0 5rem;}
#ancillary li#ancillaryAccount {display: none;}
/* MAIN ------------------------------ */
.twoCol, .threeCol, .resCol{
-moz-column-rule:0;
column-rule:0;
-moz-columns: auto;
columns: auto;
-moz-column-width: 13em;
column-width: 13em;}

.content ul li {padding-left: 1.5em;}
.content ul li:before {left: .75em;}
.formTable, .formTable table{width:100%;display: block}
.formTable tbody{display: block}
.formTable:not(.noBlock) 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;}
.account-menu {display: none;}

/* HOME -------------------------------- */
.hero-section h1 {font-size: 6vw; padding: 0 1rem; top: calc(50% - 10px);}
.registration ul {flex-wrap: wrap;}
.registration ul li {width: calc(50% - .25rem);}
.registration ul li:nth-of-type(even) {margin-left: .5rem;}
.registration ul li:nth-of-type(n+3) {margin-top: 2rem;}
.registration ul li .button {margin: .5rem 0 0; padding: .575em .637em;}

.home .classes-list {background-image: linear-gradient(0deg, #FFFFFF 85%, rgba(25, 29, 75, 0.1));}
.classes-list ul li a {font-size:  1.125rem;}
.classes-list ul > li > a > div:after {height: 1rem;}
.classes-list ul li {
	width: calc(33.3333% - .75rem);
        margin-left: 1.125rem;
}
.classes-list section + section {margin-top: 3rem;}
.welcome-message {padding: 4rem 0;}
.welcome-message h2,
.welcome-message p {width: 31.25rem; max-width: 100%; margin-left: auto; margin-right: auto; display: block;}
.welcome-message h2 {    font-size: 2rem;}

/* INTERIOR CLASSES CALLOUTS ----------- */
.classes-list.interior ul li {padding-left: 0;}
.classes-list.interior ul li:nth-of-type(3n+1) {margin-left: 0;}
.classes-list ul li:nth-of-type(n+4) {margin-top: 2rem;}

/* INTERIOR CLASS PAGE ----------------- */
.category-class-list ul li.button-item {order: 9;}
.category-class-list dd {flex-direction: column; padding-bottom: 3.625rem;}
.category-class-list ul li.button-item {position: absolute; bottom: 1.125rem;}

.past-classes {padding: 1rem;}

.content .formTable tr td input + br + small {margin: -1rem 0 1rem; display: block;}

/* FOOTER ------------------------------ */
body>footer .wrap{display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: flex-start;align-content: stretch;align-items: stretch;text-align: center;}
#web-solutions{order: 1;}
body>footer .wrap nav a+span:before {content: "|"; margin: 0 0.5em}
body>footer .fatFooter {
        flex-direction: column;
        align-items: center;
        text-align: center;
}
footer .fatFooter .catalog img {
        max-width: 6.25rem;
        display: block;
        margin: .5rem auto;
}
.fatFooter .catalog .button {display: table; margin: 0 auto;}
.fatFooter > * + * {margin-top: 1rem;}
footer:before {width: 100%;}
.footer-logos a:first-of-type, .footer-logos a:nth-of-type(2) {
        width: 35%; 
        display: inline-block;
}
.footer-logos a:nth-of-type(2) {margin-left: 15%}
.footer-logos a:last-of-type {display: block;margin-top: 1rem;}
footer > .wrap .copyright {flex-direction: column;text-align: center;}
footer > .wrap .copyright span {order: 2;}
footer > .wrap .copyright img {order: 1;margin-bottom: 0.75rem;}

/* 500 */
@media (max-width: 31.25rem) {

        .classes-list ul li {width: calc(50% - .8125rem);}
        .home .classes-list ul li:nth-of-type(even), .classes-list.interior ul li:nth-of-type(even) {margin-left: 1.625rem;}
        .classes-list ul li:nth-of-type(odd) {margin-left: 0;}
        .classes-list ul li:nth-of-type(n+3) {margin-top: 1.5625rem;}

        .welcome-message h2, .welcome-message p {text-align: center;}
        .welcome-message h2 {font-size: 1.3125rem;}
        .welcome-message p {font-size: 1rem;}
        
}

/* 400 */
@media (max-width: 25rem) {
        .classes-list ul li a {font-size:  1rem;}

        .fatFooter nav ul {-moz-columns: 1;columns: 1;}

        .category-class-list ul li .button.register {font-size: 0.875rem;}

}