/* ----------------------------- Navigation ----------------------------------------- */

    header{
        background-color: #ffffff;
        padding: 10px 0px;
        box-shadow: 0px 5px 30px rgb(175, 142, 50);
        display:flex;
        position:fixed;
        top:0;
        width:100%;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
        padding: 15px 30px;
        z-index: 1000;
    }

    .logo{
        color:#000000;
    }

    nav{
        margin-left:auto;
    }


    .menu{
        display:flex;
    }
    
    .navigation-group p, .logo-group p{
        font-size:14px;
    }

    .navigation-group{
        color:black;
        text-decoration: none;
    }

    .navigation-group img{
        width:100px;
        height:100px;
    }

    .smaller-icon{
        width:50px!important;
        height:50px!important;
    }

    .navigation-group + .navigation-group{
        margin-left:40px;
    }

    .nav-left-margin{
        margin-left:30px;
    }

    .nav-right-margin{
        margin-right:30px;
    }

    .navigation-padding{
        padding-top:170px;
    }

    .toggle-button {
        width:80px;
        height:80px;
        display: none; 
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
        color: rgb(19, 52, 236);
        background-color: white;
        cursor: pointer;
        border: 1px solid rgb(19, 52, 236);
        font-size: 16px;
        position:fixed;
        top: 15px;
        right: 15px;
    }

    .book-button{
        width:300px;
        background-color:#e4e673;
        padding:10px 0 15px 0;
        border: 3px solid black;
        color:black;
        font-size:18px;
        font-weight:800;
        display:block;
        margin:0 auto;
    }

    .opacity-overlay{
        opacity:20%;
    }

/* --------------------------------------Footer --------------------------------*/

footer{
    margin-top:100px;
    margin-bottom:40px;
}

.contact-me p{
    color:black;
}

.social{
    text-decoration: underline;
}

.social-top-margin{
    margin-top:50px;
}

.footer-logo{
    margin-top:30px;
    margin-bottom:50px;
}

.social + .social{
    margin-left:80px;
}

.contact-me + .contact-me{
    margin-left:100px;
}

    .footer-book-button{
        width:200px;
        background-color:#ffffff;
        padding:10px 0 15px 0;
        border: 2px solid black;
        color:black;
        font-size:.8em;
        font-weight:800;
        display:block;
        margin:0 auto 20px auto;
    }



/* ----------------------------- Page Specific ------------------------------------ */

/*------- Index Page ------ */

.first-impression{
    min-height:600px;
    text-align: center;
    
}

.business-name{
    font-size:4em;
    line-height:1em;
    
}

.slogan{
    font-size:2em;
    margin-top:25px;
}

.popular-services li{
    border:2px solid green;
}

.popular-services li +  li {
    margin-left:30px;
}

.popular{
    padding:20px;
}

.gift-card-card{
    border:1px solid black;
    border-radius: 10px;
    width:250px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    margin-bottom:20px;
}

.gift-card h3{
    font-size:2em;
    font-weight:200;
    margin-bottom:20px;
    margin-top:40px;
    color:#243288;
}

.gift-card-button{
    width:200px;
    background-color:#ffffff;
    padding:10px 0 15px 0;
    border: 2px solid #243288;
    color:#243288;
    font-size:1em;
    font-weight:800;
    display:block;
    margin:0 auto 70px auto;
}

/*------- Menu & Pricing ------ */

    .service-area, .service-price{
        font-size:2em;
        line-height:1.1em;
    }

    .font-definition{
        font-size:.8em;
    }

    .service-description{
        font-size:1.2rem;
        font-weight:300;
    }

    .content-menu li{
        border-bottom:1px solid gray;
        padding-top: 20px;
        padding-bottom:20px;
    }

    .predetermined-book-service{
        margin-top:10px;
        border:2px solid black;
        color:black;
        background:none;
        font-size:.9em;
        padding:8px 12px;
        font-weight:600;
        display:block;
    }

/*------- Pre-Wax Care ------ */

    .pre-wax-do h3, .pre-wax-do p{
        color:#07460a;
    }

    .pre-wax-do h3{
        font-weight:700;
        margin-bottom:15px;
    }

    .pre-wax-avoid h3, .pre-wax-avoid p{
        color:#fffcf9;
    }

    .pre-wax-avoid h3{
        font-weight:700;
        margin-bottom:15px;
    }

    .flex-container-break-900{
        display:flex;
    }

    .pre-wax-do{
        background-color: #efe6be;
        background-color:#b3d028;
        border:4px solid #9d7126;
        width:280px;
        padding:10px 20px 20px 20px;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
    }

    .pre-wax-avoid{
        background-color: #07460a; 
        padding:10px 20px 20px 20px;
        width:280px;
        border:6px solid #f3811e;
        background-color: #c93a35;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
    }

    .pre-wax-do + .pre-wax-do, .pre-wax-avoid + .pre-wax-avoid{
        margin-left:20px;
    }


/* --------Post Wax ----------- */

.post-wax h3{
    color:#bbac23;
    font-size:1.2em;
    font-weight:700;
    margin-bottom:10px;
}

.post-wax ul{
    list-style-type: disc;
    padding-left:25px;
}

.post-wax-avoid-card{
    background-color: #f7f2dd;
    border:4px solid #e7d20f;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    padding:15px 20px 30px 20px;
}

/* ------- See The Studio ------*/

.studio-image{
    width:100%;
    padding:15px;
}

/* ------- What Is Sugaring ------*/

.sugaring-explained h3{
    color:rgb(206, 124, 17);
    font-weight:600;
    font-size:1.4em;
    margin-bottom:5px;
}

/* ------- Meet the Sugarist ------*/

.profile-name-style{
    font-size:1.8em;
    font-weight: 600;
    color:rgb(0, 0, 0);
}

.margin-profile-description{
    margin-top:20px;
    margin-left:40px;
}

.profile-box-style{
    background-color: rgb(255, 255, 215);
    border:4px solid #A14712;
    padding:20px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
     -moz-box-sizing: border-box;    /* Firefox, other Gecko */
     box-sizing: border-box;         /* Opera/IE 8+ */
}
.profile-box-style img{
    border:8px solid rgb(238, 223, 20);
}

/* ------- FAQ -----------*/

.question{
    color:rgb(8, 8, 8);
    font-size:1.4em;
    font-weight:600;
    cursor:pointer;
}

.reveal{
    color:#19181a;
    font-size:.8em;
    text-decoration: underline;
    cursor: pointer;
}

.answer{
    margin-top:20px;
    font-size:1.1em;
}

.faq-box{
    margin-top:20px;
    background-color:#ff5778;
    color:#252525;
    border:4px solid #0f860f;
    padding:15px 20px;
}


/* ----------------------------- Basic ----------------------------------------- */

.flex-container, .flex-container-navigation, .flex-container-header{
    display: flex;
}

.flex-right{
    margin-left:auto;
}

.flex-center{
    justify-content: center;
}

.flex-column{
    flex-direction: column;
}

.flex-perfect-center{
    justify-content: center;
    align-items: center;
}

.inline{
    display:inline;
}

.block{
    display:block;
}

.position-fixed{
    position:fixed;
}

.position-relative{
    position:relative;
}

.center-text{
    text-align:center;
}

.text-right{
    text-align: right;
}

.center-block{
    margin:0 auto;
}

.width-100{
    width:100%;
}

.width-33{
    width:33%;
}
.width-34{
    width:34%;
}

.height-100{
    height:100%;
}

.hide{
    display: none;
    overflow: hidden;
}

.button-spacing{
    margin-right:40px;
}

.section-margin-top{
    margin-top:60px;
}

.paragraph-margin-top{
    margin-top:15px;
}

.mt40{
    margin-top:40px;
}

.hover-underline:hover{
    text-decoration: underline;
}

/* ----------------------------- Fonts ----------------------------------------- */

p, h1, h2, h3, h4, h5, h6, a, li, button{
    font-family: "IBM Plex Serif", serif;
    font-weight: 400;
    font-style: normal;
}

h2{
    color:#07460a;
    font-weight:800;
    font-size:1.6em;
    margin-bottom:10px;
}

.font-racing {
  font-family: "Racing Sans One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.font-creepster {
  font-family: "Creepster", system-ui;
  font-weight: 400;
  font-style: normal;
}

.font-manufacturing{
  font-family: "Manufacturing Consent", system-ui;
  font-weight: 400;
  font-style: normal;
}

.font-rubik {
  font-family: "Rubik Iso", system-ui;
  font-weight: 400;
  font-style: normal;
}

.font-trade-winds {
  font-family: "Trade Winds", system-ui;
  font-weight: 400;
  font-style: normal;
}

.font-sancreek {
  font-family: "Sancreek", serif;
  font-weight: 400;
  font-style: normal;
}

.font-rubik-glitch {
  font-family: "Rubik Glitch", system-ui;
  font-weight: 400;
  font-style: normal;
}

.font-fascinate {
  font-family: "Fascinate Inline", system-ui;
  font-weight: 400;
  font-style: normal;
}

.font-smokum {
  font-family: "Smokum", serif;
  font-weight: 400;
  font-style: normal;
}

.font-ewert {
  font-family: "Ewert", serif;
  font-weight: 400;
  font-style: normal;
}

.font-nosifer {
  font-family: "Nosifer", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.font-aladin {
  font-family: "Aladin", system-ui;
  font-weight: 400;
  font-style: normal;
}

.font-righteous {
  font-family: "Righteous", sans-serif;
  font-weight: 400;
  font-style: normal;
}


.font-cormorant-garamond {
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}










/* ----------------------------- Containers ----------------------------------------- */

.large-container{
    width:1200px;
    margin:0 auto;
}

.medium-container{
    width:900px;
    margin:0 auto;
}

.small-container{
    width:600px;
    margin:0 auto;
}

.width-250{
    width:480px;
}

.width-125{
    width:125px;
}