@charset "UTF-8";
/* Web Solutions 4.0 Compatible */
#alertApp + header {margin-top: 2.5rem;}

/* 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: fixed; background:#fff; z-index: 10;}
#alertApp {position: fixed;height: 2.5rem; z-index: 10;}
body>header>.wrap{height:60px}
.header-upper {
        position: relative;
        height: 5.25rem;
        display: flex;
        align-items: center;
}
#brand{display:block;margin-left: 1rem;position: absolute;top: 50%;right: 50%; transform: translate(50%, -50%); width: 31.875rem; text-align: center;}
#brand img{display: block; max-width: 100%; height: auto;width: auto;}
form.search input[type="text"] {display: none;}
/* nav */
nav ul{margin: 0}
#mainnav{overflow:visible;position: relative;}
#mainnav:before, #mainnav:after, #mainnav > ul > li:after, #mainnav > ul > li > ul:after {
        content: "";
        position: fixed;
        height: 4rem;
        left: 0;
        z-index: -1;
        right: 0;
        display: block;
        background-attachment: fixed;
        background-size: auto 4.125rem;
        background-repeat: repeat-x;
}
#mainnav:after {
        background-image: url(../../images/navigation/new/t1-green.svg);
        top: 5.25rem;
        background-position: 0 5.25rem;
}
#wsManagementBar + header #mainnav:after {top: calc(5.25rem + 34px); background-position: 0 calc(5.25rem + 34px);}

#mainnav:before {
        background-image: url(../../images/navigation/new/t1-on-white.svg);
        top: 5.375rem;
        background-position: 0 5.375rem;
}
#wsManagementBar + header #mainnav:before {top: calc(5.375rem + 34px); background-position: 0 calc(5.375rem + 34px);}

#mainnav > ul > li:after, #mainnav > ul > li > ul:after {
        background-image: url(../../images/navigation/new/t1-navy-hover.svg);
        background-position: 0 5.25rem;
        position: absolute;
        top: 0;
        opacity: 0;
        transition: all .2s;
}
#wsManagementBar + header #mainnav > ul > li:after, #wsManagementBar + header #mainnav > ul > li > ul:after {top: -1px; background-position: 0 calc(5.25rem + 34px);}


#mainnav > ul > li.on:after {
        background-image: url(../../images/navigation/new/t1-on-white.svg);
        opacity: 1;
}
#mainnav > ul > li > ul:after {
        background-image: url(../../images/navigation/new/t1-dhtml-rev.svg);
        opacity: 1;
        top: -.75em;
}
#wsManagementBar + header #mainnav > ul > li > ul:after {top: -.75em;}

#mainnav > ul > li:hover, #mainnav > ul > li.on {z-index: 3;}
#mainnav > ul > li:hover:after {opacity: 1;}


#alertApp + header #mainnav:before {top: 7.875rem; background-position: 0 7.875rem}
#alertApp + header #mainnav:after {top: 7.75rem; background-position: 0 7.75rem}
#alertApp + header #mainnav > ul > li:after, #alertApp + header #mainnav > ul > li > ul:after {background-position: 0 7.75rem;}

#wsManagementBar + #alertApp + header #mainnav:before {top: calc(7.875rem + 34px); background-position: 0 calc(7.875rem + 34px)}
#wsManagementBar + #alertApp + header #mainnav:after {top: calc(7.75rem + 34px); background-position: 0 calc(7.75rem + 34px)}
#wsManagementBar + #alertApp + header #mainnav > ul > li:after, #wsManagementBar + #alertApp + header #mainnav > ul > li > ul:after {background-position: 0 calc(7.75rem + 34px);}


#mainnav ul{text-align:center;overflow:visible;margin: 0;padding: 0;}
#mainnav li{display:inline-block;position:relative}
#mainnav a{line-height:2.5em;padding:0 1em;display:inline-block;text-decoration:none;font-size: 1.125rem;color: #191D4B; font-weight: 400;}
#mainnav>ul>li:hover>a, #mainnav>ul>li:active>a{color:#FFF;}
#mainnav>ul>li.on>a{color:#191D4B;}
header + main {padding-top: 8.0625rem;}
#ancillary ul a {
        font-size: 0.875rem;
        border-radius: 3px;
        background: rgba(25,29,75,0.07);
        padding: .48em .65em;
        position: relative;
        color: #191d4b;
        text-transform: uppercase;
        font-weight: 600;
}
#ancillary ul a:hover, #ancillary ul a:active, #ancillary ul a:focus, #ancillary a.active {
        background: #191d4b;
        color: #fff;
}
#ancillary ul a:before {
        content: "";
        height: 0.625rem;
        width: 0.625rem;
        display: inline-block;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        margin-right: .5em;
        opacity: .5;
        transition: all .2s;
}
#ancillary ul a:hover:before,  #ancillary ul a:active:before, #ancillary ul a:focus:before, #ancillary a.active:before {
        -webkit-filter: brightness(0) invert(1);
                filter: brightness(0) invert(1);
        opacity: 1;
} 
#ancillary li:first-of-type {
        position: absolute;
        left: 1.1875rem;
}
#ancillary li#ancillarySearch a:before {
        background-image: url(../../images/search.svg);
}
#ancillary li#ancillaryAccount a:before {
        background-image: url(../../images/user.svg);
}
#ancillary li#ancillaryLogout a:before {
        background-image: url(../../images/sign-out-alt.svg);
}
#ancillary li#ancillaryCart a:before {
        background-image: url(../../images/shopping-cart.svg);
}
#ancillary li#ancillaryAdultsAccount, #ancillary li#ancillaryKidsAccount {display: none;}
/* drop-down menu */
#mainnav li ul{z-index:1;width:275px;padding:.5em 0 .75em; margin-top: .5em;background:#e8e9ed;position:absolute;color:#333;overflow:visible;height:auto; top: -200vh;opacity: 0;z-index: -1; visibility: hidden; transition: ease 200ms opacity 0.35s;}
#mainnav li:hover ul,
#mainnav>ul>li.tapped > ul,
#mainnav>ul>li>a:focus + ul,
#mainnav>ul>li.expand:not(.open)>ul {opacity: 1; top:auto; visibility: visible; z-index: 1;}
#mainnav>ul>li:last-child ul{right:0}
#mainnav li ul li{width:100%;display:block;float:left}
#mainnav ul li ul li a{background:none;color:#333}
#mainnav li ul li a{line-height:1.1em;padding:.3em 1.1875rem;font-size: 1rem; display:block;width:100%;text-align:left;float:left}
#mainnav li ul li a:hover, .t1 li ul li a:active{color:#fff;background:#f05727;}
/* 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;padding:1.875rem 1.1875rem 1.875rem 0;width: 100%; text-align: right;}
#ancillary ul{display: inline}
#ancillary li{display: inline;}
#ancillary li + li {margin-left: .5rem;}
#ancillary li.on a {text-decoration:none;color:#666}
#ancillary .search{display: inline;}
#ancillary .search input{display: inline-block}
/* mobile */
#mobilenav,.menu{display: none}

/* account menu */
.account-menu {
    z-index: 3;
    display: none;
    width: 21.5rem;
    max-width: 50%;
    background: #191D4B;
    color: #fff;
    text-align: left;
    position: absolute;
    right: 5.95rem;
}
.account-menu-wrap {
        padding: 1.5rem;
}
.account-menu legend {
        font-size: 1.0625rem;
        font-weight: 600;
        margin-bottom: .5rem;
}
.account-menu label {
        font-size: 0.875rem;
        font-weight: 400;
}
.account-menu fieldset label:first-of-type {margin-right: .8rem;}
.account-menu .account-menu-input {margin: .5rem 0;}
.account-menu .account-menu-input label {display: block; margin-bottom: .125rem;}
.account-menu .account-menu-input input {width: 100%;height: 2.1875rem;background-color: #fff;border: 0;}
.account-menu .account-menu-input + .account-menu-input {margin-bottom: .75rem;}
.account-menu .button {text-transform: uppercase;padding: .75em .675em;}
.account-menu button {background: #D73E0F; color: #fff;}
.account-menu a.button:hover, .account-menu button:hover {background: #fff; color: #191d4b;}
.account-menu .button + .button {margin-left: 0.4rem;}

/* custom radio buttons on account menu */
.account-menu fieldset {margin:0 0 1rem;border: 0; padding: 0;}
.account-menu fieldset input[type='radio'] {opacity: 0;}
.account-menu fieldset input[type='radio'] + label {
        position: relative;
        display: inline-block;
        cursor: pointer;
}
.account-menu fieldset input[type='radio'] + label:before {
        content: "";
        top: 2px;
        position: absolute;
        display: inline-block;
        left: -22px;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #D8D8D8;
}
.account-menu fieldset input[type='radio'] + label:after {
        content: "";
        position: absolute;
        display: inline-block;
        left: -18px;
        top: 6px;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        border: 1px solid #D8D8D8;
}
.account-menu fieldset input[type='radio']:checked + label:after {
        border: 1px solid #4a90E2;
        background: #4A90E2;
}
.account-menu fieldset input[type='radio']:checked + label:before {
        border: 1px solid #979797;
        box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.5);
}
/* MAIN ------------------------------ */
main>.wrap {padding-top: 3.5rem;}
main>div>aside {width:14.8125rem;padding-right: 2.3125rem; overflow:hidden;float: left; padding-top: 2.25rem;position: relative; z-index: 1;}
main>div>#content{float:right;width:calc(100% - 14.8125rem);padding:0 0 6.25rem;overflow:hidden;min-height:600px;position:relative}
body.fullWidth main>div>#content {width: 100%;margin: 0 auto;float: none}

.twoCol, .threeCol, .resCol{
-moz-column-rule:0;
     column-rule:0;
}

.twoCol {-moz-columns:2;columns:2;}
.threeCol {-moz-columns:3;columns:3;}
.resCol {-moz-columns: auto;columns: auto;-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}


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

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

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

.photoright{margin:0 0 1.5em 2em;}
.photoleft{margin:0 2em 1.5em 0;}

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

/* HOME -------------------------------- */
.hero-section h1 {font-size: 2.75rem;}

.registration ul {align-items: flex-end;}
.registration ul li {width: 25%; text-align: center;}
.registration ul li + li {margin-left: .5rem;}
.registration ul li .button {margin: .5rem auto 0;}


.home .classes-list {background-image: linear-gradient(0deg, #FFFFFF 75%, rgba(25, 29, 75, 0.1));}
.classes-list > .wrap {
	display: flex;
	justify-content: space-between;
}
.classes-list ul li a {font-size:  1.25rem;}
.classes-list > .wrap > section {width: calc(50% - 3.125rem);}
.classes-list > .wrap > section + section{ margin-left: 6.25rem}
.classes-list ul > li > a > div:after {height: 1rem;}
.home .classes-list ul li:nth-of-type(n+4) {margin-top: 1rem;}

.home .classes-list ul li {
	width: calc(33% - 1rem);
        margin-left: 1.5rem;
	min-height: 13rem;
}

.welcome-message {padding: 7.625rem 0;}
.welcome-message h2 {font-size: 2.5rem;}
.welcome-message .circle-outline:before, .welcome-message .circle-filled:before, .welcome-message .circle-filled:after {
	content: "";
	width: 26px;
	height: 24px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
        position: absolute;
        transform: scale(0);
        transition: all .5s;
}
.welcome-message .circle-outline:before {
	background-image: url(../../images/oval-outline.svg);
	left: 29%;
        bottom: 2rem;
        transition-delay: .75s;
}
.welcome-message .circle-filled:before,.welcome-message .circle-filled:after {background-image: url(../../images/oval-fill.svg);}
.welcome-message .circle-filled:before {
	left: 0;
        top: -2.5rem;
        transition-delay: .5s;
}
.welcome-message .circle-filled:after {
	right: 0;
        top: 50%;
        transition-delay: 1.25s;
}
.welcome-message .circle-outline.animated:before, .welcome-message .circle-filled.animated:before, .welcome-message .circle-filled.animated:after {
        transform: scale(1);
}

.green-lines:before, .green-lines:after, body:not(.home) main:after {
	content: "";
	background-image: url(../../images/green-callout.svg);
	width: 15rem;
        height: 1rem;
        transition: all 1.5s;
        position: absolute;
	background-repeat: repeat-x;
        background-position: center;
        z-index: 0;
}
.green-lines:before {
	left: -15rem;
        bottom: 3rem;
        opacity: 0;
}
.green-lines:after {
	right: -15rem;
        bottom: 2rem;
        opacity: 0;
        transition-delay: .5s;
}
body:not(.home) main:after {
      left: -3.5rem;
      top: 26rem;
}
.green-lines.animated:before {left: 0; opacity: 1;}
.green-lines.animated:after {right: 0; opacity: 1;}



/* INTERIOR CLASSES LIST -------------- */
.classes-list.interior ul > li > a > div:after {height: 1.625rem;}
.classes-list.interior ul > li {
        width: calc(20% - 1.25rem);
        margin-left: 1.5625rem;
        padding-left: 0;
}
.classes-list.interior ul > li:nth-of-type(5n+1) {margin-left: 0;}
.classes-list.interior ul > li:nth-of-type(n+6) {margin-top: 2rem;}

/* INTERIOR CLASS PAGE ----------------- */
.past-classes ul {-moz-columns: 2;columns: 2;}
.category-class-list dd {display: flex;}
.category-class-list ul.list-left {width: 45%;}
.category-class-list ul.list-right {width: 55%;}

.past-classes {padding: 1.875rem;}


/* FOOTER ------------------------------ */
.fatFooter>nav{float: left;}
/* .fatFooter>nav>ul{float: left;} */
#web-solutions {float:right;margin-left:11px}
body>footer .wrap nav span:before {content: "|"; margin: 0 0.5em}
footer .fatFooter .catalog {max-width: 5.9375rem; width: 100%;}
footer .fatFooter .address-social {max-width: 11.25rem; width: 100%;}
footer .footer-signup {max-width: 13.4375rem; width: 100%;}
.fatFooter .footer-logos a {display: block;line-height: 1;}
.fatFooter .footer-logos a + a {margin-top: 1.875rem;}
.fatFooter .footer-logos {max-width: 6.5rem}
footer:before {width: 40%; opacity: 0; transition: all 1s;;}
footer.animated:before {width: 64%;opacity: 1;}
footer > .wrap .copyright {width: 75%;}
footer > .wrap .copyright img {margin-left: 0.75rem;}

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


/* 1350 */
@media (max-width: 84.375em) {
        .welcome-message h2 {width: 50%;}
        .welcome-message p {width: 44%;}

        body.fullWidth:not(.home) main:after {content: none;}
}

/* 1100 */
@media (max-width: 68.75em) {
        #brand {font-size: 1.5rem;}

        .classes-list > .wrap > section + section {margin-left: 3rem;}
        .classes-list > .wrap > section {width: calc(50% - 1.5rem);}
        .classes-list > .wrap > section > ul li {min-height: 17.5vw;}

        .welcome-message h2,
        .welcome-message p {width: 31.25rem; max-width: 100%; margin-left: auto; margin-right: auto; display: block;}

        .classes-list.interior ul > li {width: calc(20% - .8rem); margin-left: 1rem;}

        footer .fatFooter .catalog {max-width: 12%;}
        footer .fatFooter .address-social {max-width: 20%;}
        .fatFooter nav {max-width: 20%;}
        .fatFooter nav ul {-moz-columns: 1;columns: 1;}
        .fatFooter .footer-logos {max-width: 10%;}
        footer .footer-signup {max-width: 18%;}
        
        footer .fatFooter > * + * {margin-left:5%;}

        footer .footer-signup .button-group .button {display: table;}
        footer .footer-signup a + a {margin-left: 0; margin-top: .75rem;}

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

/* 900 */
@media (max-width: 56.25em) {
        #brand {font-size: 1.25rem;}
        #mainnav a {padding: 0 .5em;}

        .registration ul li {font-size: 0.875rem;}
        .registration ul li .button {font-size: 0.8125rem;}

        .classes-list > .wrap > section + section {margin-left: 2rem;}
        .classes-list > .wrap > section {width: calc(50% - 1rem);}
        .classes-list > .wrap > section > ul li {width: calc(33% - .67rem); margin-left: 1rem;}
        .classes-list ul li a {font-size: 1.125rem;}

        .content .classes-list.interior ul > li {width: calc(25% - .9375rem); margin-left: 1.25rem;}
        _:-ms-input-placeholder, :root .content .classes-list.interior ul > li { width: calc(25% - 1rem); }
        .content .classes-list.interior ul > li:nth-of-type(4n+1) {margin-left: 0;}
        .classes-list.interior ul > li:nth-of-type(n+5) {margin-top: 2rem;}

        .past-classes ul {-moz-columns: 1;columns: 1;}

        .fatFooter .footer-logos a + a {margin-top: 2rem;}

        .category-class-list dd {flex-direction: column; padding-bottom: 3.625rem;}
        .category-class-list ul.list-left, .category-class-list ul.list-right {width: 100%;}
        .category-class-list ul li.button-item {position: absolute; bottom: 1.125rem;}
        .category-class-list ul li .button.register {font-size: 1rem;}
}

/* IE */
@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {
        footer::before, .registration::before, .welcome-message::before, .past-classes::before, #mainnav::before, #mainnav::after, #mainnav > ul > li::after, #mainnav > ul > li > ul::after, .kids.classes ul > li:nth-of-type(2n) a div::after, .adult.classes ul > li:nth-of-type(2n+1) a div::after, .kids.classes ul > li:nth-of-type(2n+1) a div::after, .adult.classes ul > li:nth-of-type(2n) a div::after {content: none;}
        #mainnav {background: #ccd62a;}
        #mainnav > ul > li:hover > a, #mainnav > ul > li:active > a {background: #191d4b;}
        #mainnav li ul {margin-top: 0;}
        .fatFooter .footer-logos {width: 100%;}
        .category-class-list ul {display: block; -moz-columns: 2; columns: 2;}
        .category-class-list ul li.button-item {-moz-column-break-after: column;break-after: column;}
        wbr:after { content: "\00200B"; }
        footer .social-links svg {width: 1rem;}
        body > footer > .fatFooter, body.home > footer > .wrap {overflow: visible;}
}

/* iOS SAFARI */
@supports (-webkit-touch-callout: none) {
      body>header, #alertApp {position: relative;}
      body>header + main {padding-top: 0;}   
      #alertApp + header {margin-top: 0;}
      body>header #mainnav {z-index: 3;}
      body>header #mainnav:before, #alertApp + header #mainnav:before, #alertApp + header #mainnav:after, body>header #mainnav:after, #mainnav > ul > li:after {top: 0; position: absolute; z-index: 1;}
      body>header #mainnav a {position: relative; z-index: 2;}      
      #mainnav > ul > li > ul:after {position: absolute; top: -.75em;}
}