@import "../QuickstartBase/base.css";
/* DOC RiSE theme style by ASI subcontractor Phil Varady, III - phil@philstack.com - created 4/25/2024 */

/* DOC color vars */

:root {
    --doc-red: #b40937;
    --doc-black: #404040;
    --doc-green: #b7bf10;
    --doc-blue: #77c5d5;
    --doc-teal: #6eceb2;
    --doc-yellow: #eed484;
}

/* ASI base.css colors */

/***colour variables***/

:root {
    --qs-red: #d03528;
    --qs-red-light: #fcf1f1;
    --qs-red-dark: #761209;
    --qs-pink: #ee96ad;
    --qs-orange: #e4a92b;
    --qs-brown: #6d461c;
    --qs-yellow: #f4eaa6;
    --qs-green: #68bd49;
    --qs-lime: #c1e4ac;
    --qs-blue: #1F63A3;
    --qs-sky: #9cd8df;
    --qs-navy: #020937;
    --qs-purple: #600e8b;
    --qs-violet: #b888d0;
    --qs-light-grey: #f5f5f5;
    --qs-grey: #d6d6d6;
    --qs-charcoal: #333333;
    --max-width: 1170px;

    --form-tracker-line-width: 10px;
    --form-tracker-size: 40px;
    --form-tracker-color: #fff;
    --form-tracker-border-color: var(--qs-blue);
    --form-tracker-text-color: var(--qs-blue);
    --form-tracker-active-color: var(--qs-blue);
    --form-tracker-active-text-color: #fff;
    --form-tracker-active-border-color: var(--qs-blue);
    --form-tracker-hover-color: var(--qs-navy);
    --form-tracker-hover-text-color: #fff;
}

/* DOC fonts */

/* Primary font - Meta Offc. */

@font-face {
    font-family: 'Meta Offc.';
    src: url('doc-fonts/TBD.tbd') format('tbd');
    font-weight: normal;
    font-style: normal;
}

/* more here once font files are recieved */

/* ==========================================================================
   Basic setup
   ========================================================================== */
body {
    font-family: 'Meta Offc.', 'Arial', sans-serif;
    font-size: 18px;
    line-height: 2;
    color: var(--doc-black);
}


/************************* HEADER FONTS *************************/

h1,
.h1 {
    font-family: 'Meta Offc.', 'Arial', sans-serif;
    font-size: 40px;
    color: var(--doc-black);
}

h2,
.h2,
.PanelTitle {
    font-family: 'Meta Offc.', 'Arial', sans-serif;
    font-size: 36px;
    color: var(--doc-black);
}

h3,
.h3,
.SectionTitle {
    font-family: 'Meta Offc.', 'Arial', sans-serif;
    font-size: 28px;
    color: var(--doc-black);
}

h4,
.h4,
.SectionLabel {
    font-family: 'Meta Offc.', 'Arial', sans-serif;
    font-size: 20px;
    color: var(--doc-black);
}

h5,
.h5,
.SectionLabelSmaller {
    font-family: 'Meta Offc.', 'Arial', sans-serif;
    font-size: 20px;
    color: var(--doc-black);
}

h6,
.h6 {
    font-family: 'Meta Offc.', 'Arial', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    color: var(--doc-black);
}

p {
    font-family: 'Meta Offc.', 'Arial', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--doc-black);
}

/* menu fonts */
.RadMenu.RadMenu_Coffee .rmRootLink,
.header-dark .RadMenu.RadMenu_Coffee .rmRootLink,
.footer-column,
.RadMenu_Coffee .rmSlide .rmLink,
.header-dark .RadMenu_Coffee .rmSlide .rmLink {
    font-family: 'Meta Offc.', 'Arial', sans-serif;
}

.Wrapper-HomePage .header-background-container {
    background-color: #fff;
    /* fall back to make the header dark in case the carousel does not load */
}

.header-aux-container {
    background: #252E38;
}

.RadMenu.RadMenu_Coffee .rmRootLink {
    color: var(--doc-black)
}

.Wrapper-HomePage .header-background-container:before {
    display: none;
}

.Wrapper-HomePage header.header .header-background-container {
    height: auto;
}

.UtilitySection.UtilityAccountArea {
    padding-top: 5px
}

/* cart text */
.nav-auxiliary .nav-aux-button.nav-aux-cart .nav-text:hover,
.nav-auxiliary .nav-aux-button.nav-aux-cart .nav-text:focus,
/* aux nav */
.header-aux-container .UtilityAuthentication a:hover,
.header-aux-container .UtilityAuthentication a:focus,
.header-aux-container .UtilityAuthentication a:hover span,
.header-aux-container .UtilityAuthentication a:focus span,
.header-aux-container a.NavigationLink:hover,
.header-aux-container a.NavigationLink:focus,
.header-aux-container a.NavigationLink:hover span,
.header-aux-container a.NavigationLink:focus span,
.header-aux-container .UtilityNavigation .account-menu>li>a.sign-in-link:hover,
.header-aux-container .UtilityNavigation .account-menu>li>a.sign-in-link:focus,
.header-aux-container .UtilityNavigation .account-menu>li>a.sign-in-link:hover span,
.header-aux-container .UtilityNavigation .account-menu>li>a.sign-in-link:focus span,
.header-aux-container .account-toggle .nav-text:hover,
.header-aux-container .account-toggle .nav-text:focus,
.header-aux-container .account-toggle .nav-text:hover span,
.header-aux-container .account-toggle .nav-text:focus span {
    /* root item hover and focus styles */
    background-color: transparent;
    color: var(--doc-teal);
}

/* cart icon */
.nav-auxiliary .nav-aux-button.nav-aux-cart .nav-text:hover:before,
.nav-auxiliary .nav-aux-button.nav-aux-cart .nav-text:focus:before {
    background-color: var(--doc-teal);
}

/*secondary nav */
.RadTreeView.RadTreeView_Coffee .rtSelected>a.rtIn,
.RadTreeView.RadTreeView_Coffee .child-is-selected.rtIn,
.RadTreeView.RadTreeView_Coffee .rtSelected>a.rtIn:hover,
.RadTreeView.RadTreeView_Coffee .rtSelected>a.rtIn:active,
.RadTreeView.RadTreeView_Coffee .rtSelected>a.rtIn:focus,
.RadTreeView.RadTreeView_Coffee a.rtIn:hover,
.RadTreeView.RadTreeView_Coffee a.rtIn:focus,
.RadMenu.RadMenu_Coffee .rmSlide ul.rmGroup .rmLink:hover,
.RadMenu.RadMenu_Coffee .rmSlide ul.rmGroup .rmFocused,
.RadMenu.RadMenu_Coffee .rmSlide ul.rmGroup .rmExpanded,
/* primary nav */
.RadMenu.RadMenu_Coffee .rmRootLink.rmExpanded,
.RadMenu.RadMenu_Coffee .rmRootLink:hover,
.RadMenu.RadMenu_Coffee .rmRootLink.rmFocused,
.header-dark .RadMenu.RadMenu_Coffee .rmRootLink.rmExpanded,
.header-dark .RadMenu.RadMenu_Coffee .rmRootLink:hover,
.header-dark .RadMenu.RadMenu_Coffee .rmRootLink.rmFocused {
    /* root item hover and focus styles */
    background-color: transparent;
    color: var(--doc-red);
}


/* nav toggles */
.RadMenu.RadMenu_Coffee .rmLink:hover .rmToggle>.rmIcon,
.RadMenu.RadMenu_Coffee .rmLink.rmFocused .rmToggle>.rmIcon,
.RadMenu.RadMenu_Coffee .rmSelected>.rmLink .rmToggle>.rmIcon,
.RadMenu.RadMenu_Coffee .rmFocused>.rmLink.rmRootLink .rmToggle>.rmIcon,
.RadMenu.RadMenu_Coffee .rmExpanded>.rmLink .rmToggle>.rmIcon,
.RadMenu.RadMenu_Coffee .rmSlide .rmLink .rmToggle>.rmIcon {
    background-color: var(--doc-red);
}

/* primary button */
.PrimaryButton,
.UsePrimaryButton .TextButton,
.RadGrid input.PrimaryButton {
    background-color: var(--doc-red);
    border-color: transparent;
    margin-bottom: 5px
}

.PrimaryButton,
.PrimaryButton:hover,
.PrimaryButton:focus,
.PrimaryButton:active,
.PrimaryButton:visited,
.UsePrimaryButton .TextButton,
.UsePrimaryButton .TextButton:hover,
.UsePrimaryButton .TextButton:focus,
.UsePrimaryButton .TextButton:active,
.UsePrimaryButton .TextButton:visited,
.RadGrid input.PrimaryButton,
.RadGrid input.PrimaryButton:hover,
.RadGrid input.PrimaryButton:focus,
.RadGrid input.PrimaryButton:active,
.RadGrid input.PrimaryButton:visited {
    text-decoration: none;
}

.PrimaryButton,
.PrimaryButton:visited,
.UsePrimaryButton .TextButton,
.UsePrimaryButton .TextButton:visited,
.RadGrid input.PrimaryButton,
.RadGrid input.PrimaryButton:visited {
    color: #ffffff;
}

.PrimaryButton:hover,
.PrimaryButton:focus,
.PrimaryButton:active,
.UsePrimaryButton .TextButton:hover,
.UsePrimaryButton .TextButton:focus,
.UsePrimaryButton .TextButton:active,
.RadGrid input.PrimaryButton:hover,
.RadGrid input.PrimaryButton:focus,
.RadGrid input.PrimaryButton:active {
    color: var(--doc-red);
    text-decoration: none;
    background-color: #fff;
    border-color: var(--doc-red);
}

.PrimaryButton:active,
.UsePrimaryButton .TextButton:active,
.RadGrid input.PrimaryButton:active {
    background-image: none;
}

.PrimaryButton:disabled,
.PrimaryButton:disabled:hover,
.PrimaryButton:disabled:focus,
.PrimaryButton:disabled:active,
.PrimaryButton.disabled,
.PrimaryButton.disabled:hover,
.PrimaryButton.disabled:focus,
.PrimaryButton.disabled:active,
.PrimaryButton.aspNetDisabled,
.PrimaryButton.aspNetDisabled:hover,
.PrimaryButton.aspNetDisabled:focus,
.PrimaryButton.aspNetDisabled:active,
.UsePrimaryButton .TextButton:disabled,
.UsePrimaryButton .TextButton:disabled:hover,
.UsePrimaryButton .TextButton:disabled:focus,
.UsePrimaryButton .TextButton:disabled:active,
.UsePrimaryButton .TextButton.disabled,
.UsePrimaryButton .TextButton.disabled:hover,
.UsePrimaryButton .TextButton.disabled:focus,
.UsePrimaryButton .TextButton.disabled:active,
.UsePrimaryButton .TextButton.aspNetDisabled,
.UsePrimaryButton .TextButton.aspNetDisabled:hover,
.UsePrimaryButton .TextButton.aspNetDisabled:focus,
.UsePrimaryButton .TextButton.aspNetDisabled:active,
.RadGrid input.PrimaryButton:disabled,
.RadGrid input.PrimaryButton:disabled:hover,
.RadGrid input.PrimaryButton:disabled:focus,
.RadGrid input.PrimaryButton:disabled:active,
.RadGrid input.PrimaryButton.disabled,
.RadGrid input.PrimaryButton.disabled:hover,
.RadGrid input.PrimaryButton.disabled:focus,
.RadGrid input.PrimaryButton.disabled:active,
.RadGrid input.PrimaryButton.aspNetDisabled,
.RadGrid input.PrimaryButton.aspNetDisabled:hover,
.RadGrid input.PrimaryButton.aspNetDisabled:focus,
.RadGrid input.PrimaryButton.aspNetDisabled:active {
    color: #ffffff;
    background-color: #496DAD;
    border-color: transparent;
}

/* overwriting some homepage styles */
.FullWidthArea-StyleBg1 .Spotlight .SectionLabel a:hover,
.FullWidthArea-StyleBg1 .Spotlight .SectionLabel a:focus,
.FullWidthArea-StyleBg1 .Spotlight .SectionLabel a:active {
    color: var(--doc-red);
}

.home-member-tracker .ProgressTracker2 .ProgressTrackerPanel .count {
    color: var(--doc-red);
}

.FullWidthArea-StyleBg1 .Spotlight .SectionLabel a {
    color: var(--doc-black);
}

/* footer */
footer.footer {
    background-color: var(--doc-red);
}

.footer-column p {
    color: #fff;
}

footer.footer a:hover,
footer.footer a:focus {
    color: var(--doc-yellow)
}

.backToTop {
    background: var(--doc-green);
}

.backToTop:hover {
    background: var(--doc-yellow);
}

/* mobile adjustments */
@media (max-width:850px)
/* verify breakpoint */
    {
    .header-aux-container {
        background: #fff;
    }

    .header-logo-container {
        margin-top: 25px;
    }

}

/* 5.24.2024 - phil@philstack.com - social icon fixes */

.memDet .socials a {
    width: 50px;
    height: 50px;
    display: block;
    float: left;
    margin-right: 10px;
}

.memDet .socials a.fb {
    background-image: url(directory-socials/fb-colour-circle-white.svg);
}

.memDet .socials a.tw {
    background-image: url(directory-socials/tw-colour-circle-white.svg);
}

.memDet .socials a.in {
    background-image: url(directory-socials/insta-colour-circle-white.svg);
}

.memDet .socials a.li {
    background-image: url(directory-socials/linkedin-colour-circle-white.svg);
}

.memDet .socials a.pin {
    background-image: url(directory-socials/pinterest-colour-circle-white.svg);
}

.memDet .socials a.vim {
    background-image: url(directory-socials/vimeo-color-circle-white.svg);
}

.memDet .socials a.yt {
    background-image: url(directory-socials/yt-colour-circle-white.svg);
}

.memDet .socials a.tt {
    background-image: url(directory-socials/tiktok-color-circle-white.svg);
}

/**Flip card CTAs**/


/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    width: 100%;
    max-width: 300px;
    height: 300px;
    border: 1px solid #f1f1f1;
    perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
    margin: 0px auto;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
}


/* Style the front side (fallback if image is missing) */
.flip-card-front {
    background-color: #bbb;
    color: black;
}

/* Style the back side */
.flip-card-back {
    background-color: #000000;
    color: white;
    transform: rotateY(180deg);
}

a.flip-card-back {
    transform: translateX(-50%) rotateY(180deg);
    color: #ffffff;
}

a.flip-card-front {
    transform: translateX(-50%);
}

.round .flip-card-front,
.round .flip-card-back {
    border-radius: 10px;
    overflow: hidden;
}

.circle .flip-card-front,
.circle .flip-card-back {
    border-radius: 300px;
    overflow: hidden;
}

.flip-card-back .content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
    right: 20px;
}

.circle .flip-card-back .content {
    margin-top: 20px;
}

.flip-card h1,
.flip-card h2,
.flip-card h3,
.flip-card h4,
.flip-card h5,
.flip-card h6 {
    line-height: 1.2;
    color: #fff;
}

.flip-card h1 {
    font-size: 200%;
}

.flip-card-front img {
    width: 100%;
    max-width: 300px;
    height: 300px !important;
}

.col-sm-3 .flip-card,
.col-sm-3 .flip-card-front img {
    width: 100%;
    max-width: 250px;
    height: 250px !important;
}

.col-sm-3 .flip-card-back h1 {
    font-size: 200%;
}

.red .flip-card-back {
    background-color: var(--qs-red);
}

.pink .flip-card-back {
    background-color: var(--qs-pink);
    color: #000;
}

.pink .flip-card-back h1,
.pink .flip-card-back h2,
.pink .flip-card-back h3,
.pink .flip-card-back h4,
.pink .flip-card-back h5,
.pink .flip-card-back h6,
.pink .flip-card-back a,
.pink .flip-card-back a:visited {
    color: #000;
}

.orange .flip-card-back {
    color: #000;
    background-color: var(--qs-orange);
}

.orange .flip-card-back h1,
.orange .flip-card-back h2,
.orange .flip-card-back h3,
.orange .flip-card-back h4,
.orange .flip-card-back h5,
.orange .flip-card-back h6,
.orange .flip-card-back a,
.orange .flip-card-back a:visited {
    color: #000;
}

.brown .flip-card-back {
    background-color: var(--qs-brown);
}


.yellow .flip-card-back {
    background-color: var(--qs-yellow);
    color: #000;
}

.yellow .flip-card-back h1,
.yellow .flip-card-back h2,
.yellow .flip-card-back h3,
.yellow .flip-card-back h4,
.yellow .flip-card-back h5,
.yellow .flip-card-back h6,
.yellow .flip-card-back a,
.yellow .flip-card-back a:visited {
    color: #000;
}

.green .flip-card-back {
    background-color: var(--qs-green);
    color: #fff;
}

.lime .flip-card-back {
    background-color: var(--qs-lime);
    color: #000;
}

.lime .flip-card-back h1,
.lime .flip-card-back h2,
.lime .flip-card-back h3,
.lime .flip-card-back h4,
.lime .flip-card-back h5,
.lime .flip-card-back h6,
.lime .flip-card-back a,
.lime .flip-card-back a:visited {
    color: #000;
}

.blue .flip-card-back {
    background-color: var(--qs-blue);
    color: #fff;
}

.sky .flip-card-back {
    background-color: var(--qs-sky);
    color: #000;
}

.sky .flip-card-back h1,
.sky .flip-card-back h2,
.sky .flip-card-back h3,
.sky .flip-card-back h4,
.sky .flip-card-back h5,
.sky .flip-card-back h6,
.sky .flip-card-back a,
.sky .flip-card-back a:visited {
    color: #000;
}

.navy .flip-card-back {
    background-color: var(--qs-navy);
}

.purple .flip-card-back {
    background-color: var(--qs-purple);
}

.violet .flip-card-back {
    background-color: var(--qs-violet);
    color: #000;
}

.violet .flip-card-back h1,
.violet .flip-card-back h2,
.violet .flip-card-back h3,
.violet .flip-card-back h4,
.violet .flip-card-back h5,
.violet .flip-card-back h6,
.violet .flip-card-back a,
.violet .flip-card-back a:visited {
    color: #000;
}

.grey .flip-card-back {
    background-color: var(--qs-grey);
    color: #000000;
}

.grey .flip-card-back h1,
.grey .flip-card-back h2,
.grey .flip-card-back h3,
.grey .flip-card-back h4,
.grey .flip-card-back h5,
.grey .flip-card-back h6,
.grey .flip-card-back a,
.grey .flip-card-back a:visited {
    color: #000000;
}




.charcoal .flip-card-back {
    background-color: var(--qs-charcoal);
    color: #ffffff;
}


@media(min-width:768px) and (max-width:900px) {

    .flip-card,
    .flip-card-front img {
        max-width: 200px;
        height: 200px !important;
    }

    .col-sm-3 .flip-card,
    .col-sm-3 .flip-card-front img {
        max-width: 150px;
        height: 150px !important;
    }

}

@media(min-width:901px) and (max-width:1170px) {

    .flip-card,
    .flip-card-front img {
        max-width: 250px;
        height: 250px !important;
    }

    .col-sm-3 .flip-card,
    .col-sm-3 .flip-card-front img {
        max-width: 200px;
        height: 200px !important;
    }

}

/* 5.29.2024 - for cart customization, hide autopay options by default.  Will be shown as needed using jQuery */
#ste_container_ciNewAutoPayInstructionCreatorCommon {
    display: none;
}

/* 5.30.2024 - customization to hide the message that is shown when someone adds the insurance product to their cart */
.doc-hide-add-to-cart-message .AsiSuccess.AsiSuccessIcon {
    display: none;
}
.jobTitle a {
    font-size: 24px;
    font-weight: bold;
}