@font-face {
    font-family: 'Yellowtail Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Yellowtail Regular'), url('fonts/Yellowtail-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Mostra Nuova';
    src: url('fonts/MostraNuova-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mostra Nuova';
    src: url('fonts/MostraNuova-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mostra Nuova';
    src: url('fonts/MostraNuova-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mostra Nuova';
    src: url('fonts/MostraNuova-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mostra Nuova';
    src: url('fonts/MostraNuova-Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mostra Nuova';
    src: url('fonts/MostraNuova-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

:root {
    --gold: #d7be69;
    --white: #fff;
    --black: #000;
    /*Admin Portal*/
    --portalIconColor: var(--black);
    --portalLinkColor: var(--black);
    --portalBoxBorder: var(--gold);
    --portalBoxBorderHover: var(--black);
    --portalBoxBackground: var(--gold);
}
}

html, body {
    background: #fff;
}

.overlay {
    position: absolute;
    background: rgba(57, 57, 57, 0.5);
    /* center overlay text */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.overlay_center {
    inset: 0;
}

main {
    max-width: 100%;
}

.gold {
    color: var(--gold);
}

.back-gold {
    background: var(--gold);
}

.site-container {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
}

.d-flex-flip-992 {
    flex-direction: row;
}

.d-flex-flip-640 {
    flex-direction: row;
}

.toniheader {
    font-family: 'Yellowtail Regular';
    font-weight: normal;
    font-size: 42px;
    background-color: #000;
    border: 0;
}

.subheader {
    font-family: 'Mostra Nuova';
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.icon-lips {
    width: 78px;
    padding: 0;
    padding-top: 5px;
}

a.gold, a.gold:hover, a.gold:link, a.gold:visited {
    color: var(--gold);
}

.pageHeader {
    font-family: 'Mostra Nuova';
    font-size: 48px;
    color: var(--gold);
    text-shadow: 2px 2px #000;
}

.light-outer-glow {
    text-shadow: 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff;
}

.breadcrumb-item {
    font-weight: 600;
}

    .breadcrumb-item a {
        color: #000;
        text-shadow: 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff;
    }

    .breadcrumb-item.active {
        text-shadow: 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff;
    }
/*------------------------------------------*/
/*Frame*/
img.portrait {
    border: solid 2px;
    border-bottom-color: #ffe;
    border-left-color: #eed;
    border-right-color: #eed;
    border-top-color: #ccb;
    max-height: 100%;
    max-width: 100%;
}

.frame {
    background-color: var(--gold); /*#ddc;*/
    border: solid 5vmin #eee;
    border-bottom-color: #E6CD75; /*#fff;*/
    border-left-color: var(--gold); /*#eee;*/
    border-radius: 2px;
    border-right-color: var(--gold); /*#eee;*/
    border-top-color: #BAA55C; /*#ddd;*/
    box-shadow: 0 0 5px 0 rgba(0,0,0,.25) inset, 0 5px 10px 5px rgba(0,0,0,.25);
    box-sizing: border-box;
    display: inline-block;
    /*margin: 10vh 10vw;*/
    /*height: 80vh;*/
    /*padding: 8vmin;*/
    margin-right: 20px;
    margin-bottom: 10px;
    position: relative;
    text-align: center;
    &:before

{
    border-radius: 2px;
    bottom: -2vmin;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.25) inset;
    content: "";
    left: -2vmin;
    position: absolute;
    right: -2vmin;
    top: -2vmin;
}

&:after {
    border-radius: 2px;
    bottom: -2.5vmin;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.25);
    content: "";
    left: -2.5vmin;
    position: absolute;
    right: -2.5vmin;
    top: -2.5vmin;
}

}

/* pageHeadline with lines */
.pageHeadline, .pageHeadline > span > a {
    overflow: hidden;
    text-align: center;
    font-family: 'Mostra Nuova';
    font-size: 48px;
    color: var(--gold);
    text-shadow: 3px 2px #000;
    text-decoration: none;
}

    .pageHeadline > span {
        position: relative;
        display: inline-block;
    }

        .pageHeadline > span:before, .pageHeadline > span:after {
            content: '';
            position: absolute;
            top: 50%;
            border-bottom: 2px solid;
            width: 100vw;
            margin: 0 20px;
        }

        .pageHeadline > span:before {
            right: 100%;
        }

        .pageHeadline > span:after {
            left: 100%;
        }

.table > :not(caption) > * > * {
    padding: .2rem .2rem;
}

.adminTable td {
    vertical-align: middle;
}

/*fade in*/
.fade-in-image {
    animation: fadeIn 5s;
    -webkit-animation: fadeIn 5s;
    -moz-animation: fadeIn 5s;
    -o-animation: fadeIn 5s;
    -ms-animation: fadeIn 5s;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-o-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-ms-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/*fade input command output continuously*/
@keyframes flickerAnimation {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

@-o-keyframes flickerAnimation {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

@-moz-keyframes flickerAnimation {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

@-webkit-keyframes flickerAnimation {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.animate-flicker {
    -webkit-animation: flickerAnimation 4s infinite;
    -moz-animation: flickerAnimation 4s infinite;
    -o-animation: flickerAnimation 4s infinite;
    animation: flickerAnimation 4s infinite;
}

/*Holidays*/
.christmasHeader {
    background: url(../img/holidays/christmas/christmas-lights-small.gif) top left repeat-x;
    z-index: 1;
    background-size: 250px;
    height: 30px !important;
}

.serviceCards {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.serviceCard {
    padding: 10px;
    border: 1px solid #ccc;
    background: #fff;
    width: 220px;
    height: 280px;
    cursor: pointer;
}

    .serviceCard:hover {
        outline-color: transparent;
        outline-style: solid;
        box-shadow: 0 0 0 2px var(--gold);
    } 

.serviceCardImg {

}

    .serviceCardImg img {
        width: 200px;
        height: 215px;
    }

    .serviceCardName {
        width: 200px;
        height: 50px;
        padding: 10px;
        text-align: center;
        background: #fff;
    }

.faderNoBorder a img {
    padding: 0px !important;
    border: none !important;
    background: #fff;
}

.btn.back-gold:hover {
    background: var(--gold);
}

/* Service Card */
.service-card {
    width: 12rem;
    height: 18rem;
    margin: 20px;
    /*padding: 20px;*/
    border: 1px solid #000;
    box-shadow: rgba(0,0,0,0.4) 2px 3px 6px;
    border-radius: 4px;
}

.service-card-back {
    opacity: 0.6;
    width: 100%;
    height: 100%;
    transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out;
}

    .service-card-back:hover {
        opacity: 1.0;
        transition: opacity .55s ease-in-out;
        -moz-transition: opacity .55s ease-in-out;
        -webkit-transition: opacity .55s ease-in-out;
    }

.wedding-card {
    background: url('/img/services/weddings/weddings_01.jpg') no-repeat;
    background-size: cover;
}

.makeup-card {
    background: url('/img/services/makeup/maxeylash-wsCwj455vh0-unsplash.jpg') no-repeat;
    background-size: cover;
}
.waxing-card {
    background: url('/img/services/waxing/waxing-1536x1024.jpg') no-repeat;
    background-size: cover;
    background-position: center;
    
}

.eyes-card {
    background: url('/img/services/eyes/eyes.jpg') no-repeat;
    background-size: cover;
    background-position: -32px 40px;
}

.facial-card {
    background: url('/img/services/facial/facial.jpg') no-repeat;
    background-size: cover;
    background-position: right;
}

.reiki-card {
    background: url('/img/services/reiki/reiki.jpg') no-repeat;
    background-size: cover;
    background-position: center;
}

.piercing-card {
    background: url('/img/services/piercing/piercing_01.jpg') no-repeat;
    background-size: cover;
    background-position: right;
}

.service-card-title {
    position: absolute;
    z-index: 1;
    bottom: -32px;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Testimonials */
.testimonial-caption {
    top: 5rem;
}

.testimonial-border {
    background: var(--gold);
    padding: 40px;
    vertical-align: middle;
    margin-bottom: 20px;
    border: 4px solid #000;
    border-radius: 5px;
}

.testimonial-border p {
    padding: 0;
    margin: 0;
}

/*Admin Portal*/
.portal-box {
    width: 120px;
    height: 120px;
    padding: 10px;
    margin: 5px;
    text-align: center;
    border: 1px solid var(--portalBoxBorder);
    transition: border 0.1s;
    cursor: pointer;
    background: var(--portalBoxBackground);
    border-radius: 10%;
    /* background: #4588c8;
    background: #2c61cc;
    background: #415580; */
}

    .portal-box:hover {
        border: 2px solid var(--portalBoxBorderHover);
    }    

.portal-icon {
    padding-top: 4px;
    color: var(--portalIconColor);
    /* color: #fff; */
}

.portal-link {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.1rem;
}

    .portal-link a {
        text-decoration: none;
        color: var(--portalLinkColor);
        /* color: #fff; */
    }

/*Holidays*/
.holiday {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 44px;
    z-index: 1;
}
.christmas {
    background-image: url(/img/holidays/christmas/christmas-lights-small.gif);
}

/*TikTok Heroes*/
#heroMakeup {
    flex-wrap: nowrap !important;
}

#heroWeddings {
    flex-wrap: nowrap !important;
}

@media (max-width: 991.98px) {
    .d-flex-flip-992 {
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    #heroMakeup {
        flex-wrap: wrap-reverse !important;
    }

    #heroWeddings {
        flex-wrap: wrap-reverse !important;
    }
}

    @media (max-width: 639.98px) {
        .d-flex-flip-640 {
            flex-direction: column;
        }
    }

    @media (max-width: 408px) {
        .navbar-toggler {
            /*width: 100vw;*/
            width: 100%;
        }
    }