/*

Massage Envy Nav/Footer Styles

Author: Deloitte Digital
Last updated: October 13, 2016

*/
@import url('https://fonts.googleapis.com/css?family=Lato:700,900');

@font-face {
    font-family: 'Venti';
    src: url('/common/refresh/font/venticf-extrabold-webfont.woff2') format('woff2'), url('/common/refresh/font/venticf-extrabold-webfont.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Venti';
    src: url('/common/refresh/font/venticf-bold-webfont.woff2') format('woff2'), url('/common/refresh/font/venticf-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

body {
    background: #fff;
    display: flex;
    flex-direction: column;
    margin: 0;
    /* stick the footer on the bottom even if very little body contents */
    min-height: 100vh;
}

a {
    text-decoration: none;
}

.main__content {
    flex: 1;
    padding-top: 4.6875rem;
    -ms-flex: 1;
}

@media screen and (min-width: 64em) {
    .main__content {
        padding-top: 6.5rem;
    }
}

/* ~~~~~~~~~~~~~~
MOBILE NAV BAR
~~~~~~~~~~~~~~ */
.title-bar {
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    -ms-flex-align: center;
    -ms-flex-pack: justify;
}

.me-nav--mobile {
    background: white;
    box-shadow: 0 1px 5px rgba(10, 10, 10, 0.2);
    height: 4.6875rem;
    left: 0;
    padding: 0 1.375rem;
    position: fixed;
    text-transform: uppercase;
    top: 0;
    width: 100%;
    z-index: 401;
}

@media screen and (min-width: 64em) {
    .me-nav--mobile {
        display: none !important;
    }
}

.me-nav--mobile__button {
    align-items: flex-start;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #635ba5;
    cursor: pointer;
    display: inline-block;
    font-family: "Lato", "Helvetica Neue", arial, sans-serif;
    font-weight: 900;
    line-height: 1;
    margin: 0;
    padding: 0;
    text-align: center;
    text-transform: uppercase;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.me-nav--mobile__logo {
    display: inline-block;
    height: auto;
    max-width: 100%;
    position: absolute;
    right: calc(50% - 22px);
    top: calc(50% - 21px);
    vertical-align: middle;
    -ms-interpolation-mode: bicubic;
}

/* ~~~~~~~~~~~~~~
MOBILE NAV OVERLAY
~~~~~~~~~~~~~~ */
.me-nav__overlay {
    background: rgba(44, 43, 44, 0.5);
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: none;
    width: 100vw;
    z-index: -1;
}

@media screen and (min-width: 64em) {
    .me-nav__overlay {
        display: none;
    }
}

/* ~~~~~~~~~~~~~~
DESKTOP NAV BAR
~~~~~~~~~~~~~~ */
.me-nav {
    align-items: center;
    background: white;
    box-shadow: 0 1px 5px rgba(10, 10, 10, 0.2);
    color: #635ba5;
    display: flex;
    display: -ms-flexbox;
    display: block;
    flex-wrap: wrap;
    font-family: 'Muli', Tahoma, sans-serif;
    font-weight: 700;
    height: 100%;
    justify-content: space-between;
    left: -100%;
    letter-spacing: 1px;
    opacity: 0;
    padding: 0;
    position: fixed;
    text-align: left;
    text-transform: capitalize;
    top: 0;
    transition: left .3s ease, opacity .3s ease;
    width: 80%;
    z-index: 401;
    -ms-flex-align: center;
    -ms-flex-pack: justify;
    -ms-flex-wrap: wrap;
}

@media screen and (min-width: 40em) {
    .me-nav {
        flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
    }

    .gift_card #feature {
        padding: 20px;
    }

        .gift_card #feature #page_title, .gift_card #feature #page_title h1 {
            font-size: 3.125rem
        }

    #page_name {
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: 2.5rem;
    }

    .gift_card #feature_content p {
        margin-bottom: 3.125rem;
    }
}

@media screen and (min-width: 64em) {
    .me-nav {
        display: block;
        height: auto;
        left: 0;
        opacity: 1;
        padding: 1.985rem 1.5rem 2rem;
        position: fixed;
        text-transform: uppercase;
        width: 100%;
    }

    .gift_card #feature {
        padding: 0;
    }

        .gift_card #feature #page_title, .gift_card #feature #page_title h1 {
            font-size: 3.625rem
        }

    .gift_card #feature_content p {
        font-size: 1.125rem
    }
}

.me-nav.open {
    left: 0;
    opacity: 1;
    transition: left .3s ease;
}

@media screen and (min-width: 40em) {
    .me-nav.open {
        width: 350px;
    }
}

.me-nav.open .me-nav__overlay {
    opacity: 1;
    transition: .3s opacity ease .3s;
}

@media screen and (min-width: 64em) {
    .me-hide-for-large {
        display: none !important;
    }
}

.me-nav__container {
    background-color: #635ba5;
    background-image: url("/Extensions/common/refresh/img/me-bkg-pattern.png");
    background-size: 16rem;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 82.125rem;
    overflow-y: auto;
    padding: 1.5625rem 1.875rem;
    -webkit-overflow-scrolling: touch;
}

.me-nav .me-top-bar-left {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    max-width: 100%;
    -ms-flex: 1 1 0;
}

@media screen and (min-width: 64em) {
    .me-nav .me-top-bar-left {
        flex-direction: row;
    }
}

.me-nav__menu > ul {
    align-items: center;
    background: none !important;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    margin: 0.4375rem 0 0;
    padding: 0;
    width: 100%;
    -ms-flex-align: center;
    -ms-flex-wrap: wrap;
}

@media screen and (min-width: 64em) {
    .me-nav__menu > ul {
        background: inherit !important;
        flex-wrap: nowrap;
        line-height: 2.7;
        -ms-flex-wrap: nowrap;
    }
}

@media screen and (max-width: 63.9375em) {
    .me-nav__menu > ul {
        display: inline-block;
    }

    .me-nav__logo {
        margin-top: 0;
    }
}

.me-nav__logo {
    color: inherit;
    display: inline-block;
    flex: 0 0 auto;
    font-size: inherit;
    font-weight: bold;
    line-height: 1;
    margin-right: 1rem;
    margin-top: 1px;
    padding: 0;
}

    .me-nav__logo img {
        display: inline-block;
        height: auto;
        max-width: 100%;
        vertical-align: middle;
        -ms-interpolation-mode: bicubic;
    }

@media screen and (max-width: 63.9375em) {
    .me-nav__menu__logo {
        display: none !important;
    }
}

.me-nav__menu li {
    display: block;
    flex: 0 0 auto;
    margin: 0.35rem 0;
    position: relative;
    transition: padding .3s ease;
    width: 100%;
    -ms-flex: 0 0 auto;
}

.skip-for-content {
    position: static;
}

@media screen and (min-width: 64em) {
    .me-nav__menu li {
        display: inline-block;
        margin: 0 0.45rem;
        width: auto;
    }

        .me-nav__menu li:hover .down_arrow {
            display: block;
        }
}

.me-nav__menu li a {
    color: white;
    display: inline-block;
    flex-flow: row nowrap;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0;
    padding: 0.5rem 0;
    text-decoration: none;
}

@media screen and (min-width: 64em) {
    .me-nav__menu li a {
        color: #635ba5;
        position: relative;
    }

    .me-nav__menu li.current_cat > a:after {
        background: #ce9fc9;
        bottom: -6px;
        content: "";
        display: block;
        height: 4px;
        left: 0;
        margin: 0 auto;
        position: absolute;
        right: 0;
        width: 80%;
    }

    .me-nav__menu__item a:hover, .me-nav__menu__item a:active, .me-nav__menu__item a:visited, .me-nav__menu__item a:focus {
        color: #635ba5;
    }
}

/* Skip For Content Link */
.skip-for-content > a {
    top: -100%;
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    background: rgba(99, 91, 165, 0.9);
    padding: 15px;
    box-shadow: 0 7px 14px rgba(10, 10, 10, 0.2);
    color: white;
    width: 100%;
    text-align: center;
    display: block;
}

    .skip-for-content > a:focus {
        top: 0;
    }

.me-nav .me-top-bar-right {
    flex: 0 0 auto;
    margin: 0;
    margin-left: auto;
    max-width: 100%;
    padding: 0;
    -ms-flex: 0 0 auto;
}

@media screen and (min-width: 40em) {
    .top-bar .top-bar-left, .top-bar .top-bar-right {
        flex: 1 1 0px;
        -ms-flex: 1 1 0px;
    }
}

@media screen and (max-width: 63.9375em) {
    .me-nav .me-top-bar-right {
        display: none !important;
    }
}

.me-top-bar-right .me-menu {
    align-items: center;
    background-color: white;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: nowrap;
    line-height: 1.6;
    list-style-position: outside;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    -ms-flex-wrap: nowrap;
    -ms-flex-align: center;
}

.me-menu > li {
    flex: 0 0 auto;
}

.me-nav__schedule {
    background-color: transparent;
    border: 2px solid #635ba5;
    border-radius: 5px;
    color: #635ba5;
    cursor: pointer;
    display: inline-block;
    font-family: 'Muli', Tahoma, sans-serif;
    font-weight: 700;
    line-height: 1;
    margin: 0;
    padding: 0.8125rem 1.875rem 0.75rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.25s ease-out, color 0.25s ease-out;
    vertical-align: middle;
    -webkit-appearance: none;
}

    .me-nav__schedule:hover {
        background: #635ba5;
        color: white;
    }

.show-for-sr {
    clip: rect(0, 0, 0, 0);
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    width: 1px;
}

.me-nav__profile {
    background: url("/Extensions/common/refresh/img/me-icon-profile-logged-out.svg") 100% center no-repeat;
    border: 1px solid transparent;
    border-radius: 0;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-family: "Venti", "Helvetica Neue", arial, sans-serif;
    font-weight: 700;
    height: 2.375rem;
    line-height: 1;
    padding: 1em 1.875rem 0.75rem;
    text-align: center;
    text-transform: uppercase;
    transition: background-color 0.25s ease-out, color 0.25s ease-out;
    vertical-align: middle;
    width: 2.375rem;
    -webkit-appearance: none;
}

/* mobile drawer close button */
.me-nav__close-btn {
    background: transparent url("/Extensions/common/refresh/img/me-icon-close.svg") no-repeat 100% center;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    height: 27px;
    line-height: 1;
    margin-bottom: 1.25rem;
    min-height: 27px;
    padding: 0;
    width: 27px;
    -moz-appearance: none;
    -webkit-appearance: none;
}

@media screen and (min-width: 64em) {
    .me-nav__close-btn {
        display: none !important;
    }
}

.me-nav__menu__item--bottom > ul {
    background: none !important;
    border-top: 1px solid white;
    margin-top: 10px;
    margin-left: 0;
    padding: 1rem 0;
}

/* ~~~~~~~~~~~~~~
FOOTER STYLES
~~~~~~~~~~~~~~ */
#footer_text {
    color: #fff;
    padding-top: 30px;
}

.me-footer {
    background-color: #635ba5;
    background-size: 16rem;
    padding: 4.375rem 1.875rem;
}

@media screen and (min-width: 40em) {
    .me-footer {
        padding: 5.625rem 9.75rem;
    }
}

/* regular links */
.me-footer__links > ul {
    list-style: none;
    margin: 0 0 3.75rem 0;
    padding: 0;
    text-align: center;
    text-transform: uppercase;
}

.me-footer a {
    color: white;
    font-family: 'Muli', Tahoma, sans-serif;
    font-weight: 700;
    text-decoration: none;
}

    .me-footer a:hover, .me-footer a:active, .me-footer a:visited, .me-footer a:focus {
        color: white;
    }

@media screen and (min-width: 40em) {
    .me-footer__links li {
        border-right: 2px solid #544d8c;
        display: inline-block;
        line-height: 1;
        margin-bottom: .54rem;
        padding: 0 0.625rem;
    }

        .me-footer__links li:last-child {
            border-right: none;
        }
}

/* social links */
.me-footer__social {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.me-footer__social__button {
    background: white;
    border-radius: 50%;
    display: inline-block;
    height: 2.5625rem;
    margin: 0 0.3125rem;
    width: 2.5625rem;
}

    .me-footer__social__button a {
        background-position: center;
        background-repeat: no-repeat;
        background-size: auto 22px;
        display: block;
        height: 100%;
        width: 100%;
    }

        .me-footer__social__button a.twitter {
            background-image: url("/Extensions/common/refresh/img/me-icon-twitter.svg");
            background-size: auto 18px;
        }

        .me-footer__social__button a.facebook {
            background-image: url("/Extensions/common/refresh/img/me-icon-facebook.svg");
        }

        .me-footer__social__button a.instagram {
            background-image: url("/Extensions/common/refresh/img/me-icon-instagram.svg");
        }

        .me-footer__social__button a.youtube {
            background-image: url("/Extensions/common/refresh/img/me-icon-youtube.svg");
            background-size: auto 18px;
        }

@media screen and (min-width: 90em) {
    .hide-for-xxlarge {
        display: none !important;
    }
}

@media screen and (max-width: 89.9375em) {
    .show-for-xxlarge {
        display: none !important;
    }
}

/* Legal Footer Text/Links */
.me-footer__links--legal {
    margin: 3.75rem 0 0 0;
}

    .me-footer__links--legal > ul {
        margin-bottom: 0;
        text-transform: none;
    }

    .me-footer__links--legal li a {
        font-family: "Lato", "Helvetica Neue", arial, sans-serif;
        text-transform: none;
    }

.me-footer__legal-text {
    color: white;
    font-family: "Lato", "Helvetica Neue", arial, sans-serif;
    font-weight: 700;
    margin: 20px 0;
    padding-bottom: 0;
    text-align: center;
}

@media screen and (min-width: 40em) {
    .me-footer__legal-text {
        margin: 0 auto;
        max-width: 78.625rem;
    }
}

@media screen and (min-width: 64em) {
    .hide-for-large {
        display: none !important;
    }
}

@media (max-width: 640px) {
    #scrolling_cart_bottom {
        box-sizing: content-box;
    }

    .gift_card.thank_you #feature {
        height: auto !important;
    }
}

/* Navigation Overlay styles */
a.content_folder {
    cursor: pointer;
}

.link_overlay {
    background-color: #fff;
    display: none;
    left: -15px;
    min-width: 35rem;
    padding: 0 3% 3% 3%;
    position: absolute;
    top: 60px;
}

li.nav_membership .link_overlay {
    left: -40px;
    min-width: 15rem;
}

.memb_overlay {
    height: 100px;
    max-width: 50.125rem;
}

.mass-container {
    position: relative;
}

    .mass-container:hover .hidden {
        @include breakpoint(large) {
            display: inline-block;
        }
    }

.down_arrow {
    display: none;
    position: absolute;
    top: 30px;
    left: 44%;
}

.mem-container:hover .hidden {
    @include breakpoint(large) {
        display: inline-block;
    }
}

.mem-container {
    position: relative;
}

.hidden {
    display: none;
}

.show {
    /*display: block;*/
}

.subhdr-item ul {
    list-style-type: none;
}

.sublist {
    list-style-type: none !important;
    margin-left: 0px !important;
    padding-bottom: 0;
}

    .sublist li {
        display: block;
        margin: 0 0 5px 0;
        text-transform: none;
    }

.subhdr-item a {
    text-decoration: none;
    text-transform: none;
}

.subhdr {
    border-left: 1px solid;
    padding: 1%;
    padding-left: 3%;
    position: relative;
    float: left;
    line-height: 1.6;
    width: 50%;
    background: transparent;
    color: #8E8E90;
}

    .subhdr:first-child {
        border-left: none;
        padding-left: 1%;
    }

@media screen and (min-width: 64em) {
    li.nav_membership .subhdr {
        float: right;
        width: 90%;
    }
}

.subhdr-memb {
    position: relative;
    float: left;
    width: 90%;
    padding: 1%;
    background: transparent;
    color: #8E8E90;
}

.subhdr-item {
    position: relative;
    background: transparent;
}

.under-nav-mas {
    width: 157px
}

.sublist a:hover {
    border-bottom-color: #ce9fc9;
}

.disp_link_overlay {
    display: block;
}

.top-bar-right {
    flex: 0 0 auto;
    margin-left: auto;
}

@media (max-width: 1023px) {
    .link_overlay {
        background: none;
        display: block;
        min-width: 0;
        padding: 0;
        position: static;
    }

    .subhdr {
        border-left: none;
        float: none;
        padding: 0 1% 0;
        width: auto;
    }

    .subhdr_title {
        display: none;
    }

    .sublist {
        padding-bottom: 0;
    }

    .me-nav__menu li {
        margin: 0;
    }

        .me-nav__menu li a {
            padding: 0.5rem;
        }

        .me-nav__menu li .sublist a {
            line-height: 1.6;
            margin-left: 10%;
            padding: 0.5rem 0;
        }
}