/*!
 * Start Bootstrap - Business Casual Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

 html {
    font-size: 16px;
 }

body {
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    /* background: url('../img/bg.jpg') no-repeat center center fixed; */
    background-color: #888;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

#menubar {
    padding-right: 0px;
    padding-left:0px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: uppercase;
    /*font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;*/
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
}

p {
    font-size: 1.25em;
    line-height: 1.6;
    color: #000;
}

.covid-anoucement {
    font-size: 1.15rem;
    line-height: 1.6;
    font-weight: 600;
    color: #000;
}

hr {
    max-width: 400px;
    border-color: #999999;
}

.brand-color-gold{
    color: #e0b54c;
}

.brand-color-brown {
    color: #442e38;
}

.brand-gold-heavy{
    color: #e0b54c;
    font-weight: 900;
}

.brand-black-heavy{
    color: #000000;
    font-weight: 900;
}

.brand,
.address-bar {
    display: none;
}

.navbar-brand {
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 2px;
    
}

.navbar-default .navbar-brand {
    color: #e0b54c;
}

.navbar-nav {
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 3px;
}


.navbar-default .navbar-nav>li>a{
    color: #e0b54c;
}


.img-full {
    min-width: 100%;
}

.brand-before,
.brand-name {
    text-transform: capitalize;
}

.brand-before {
    margin: 15px 0;
}

.brand-name {
    margin: 0;
    font-size: 4em;
    color: #e0b54c;
}

.tagline-divider {
    margin: 15px auto 3px;
    max-width: 250px;
    border-color: #999999;
}


.show-services {
    margin-left :10px;
    margin-right: 10px;
}

.box {
    margin-bottom: 20px;
    padding: 30px 15px;
    background: #fff;
    background: rgba(255,255,255,0.9);
    border-radius: 10px;
}

.box-eyelash {
    margin-bottom: 20px;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 15px;
    padding-right:15px;
    background: #fff;
    background: rgba(255,255,255,0.9);
    border-radius: 10px;
}


.box1 {
    
    padding: 0px;
    background: #fff;
    background: rgba(255,255,255,0.9);
    border-radius: 10px;
}


.intro-text {
    text-transform: uppercase;
    font-size: 1.25em;
    font-weight: 400;
    letter-spacing: 1px;
}






.service-select {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px ;
    margin-right: 10px;
    padding: 20px;
    background: #fff;
    background: rgba(255,255,255,0.9);
    border-radius: 10px;
}



.service-policy {
    margin-top: 10px;
    margin-bottom: 10px;
   
    /*background: #fff;
    background: rgba(255,255,255,0.9);
    border-radius: 10px;*/
}


.contact-information {
    margin-right: 10px;
    margin-left: 10px;
}

.contact-us {
    margin-right: 10px;
    margin-left: 10px;
}


.img-left {
    float: none;
    margin: 0 auto 0;
}


.border-select {
    position: relative;
    margin: 10px auto 10px auto;
}

.img-border {
    float: none;
    margin: 0px auto 0px auto;
    padding: 0px;
}

img.img-border {
  border-radius: 10px;
}

.select1 {
    position: relative;
    display: block;
}


.border-select .title-bottom {
     position: absolute;
     color: #e0b54c;
     margin: 0px auto 0px auto;
     background: rgba(0,0,0,0.5);
     max-width: 400px;
     width: 100%;
     bottom: 0px;
     left: 0px;
     right: 0px;
     border-bottom-right-radius: 10px;
     border-bottom-left-radius: 10px; 
}

footer {
    margin: 2em 0em 0em 0em;
    background: #fff;
    background: rgba(255,255,255,0.9);
}

footer p {
    margin: 0;
    padding: 5px 0;
    color: #e0b54c;
}


#brand-top{
    display: flex;
    flex-direction: column;
    flex-wrap: no-wrap;
    /*justify-content: center;*/
    align-items: center;

}


.brand-name {
    display: block;
    width: 100%;
}



.brand_address, .brand_hours {
    margin: 10px auto;

    text-align: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    text-transform: uppercase;
    
    font-size: 0.6em;
    font-weight: 400;
    letter-spacing: 2px;

    color: #fff;    
}

#brand_highlight {
    color: #442e38 ; /*brown */
}

#brand_highlight:link {
    color: #442e38 ; /*brown */
}

#brand_highlight:visited{
    color: #442e38 ; /*brown */
}

#brand_highlight:hover {
    color: #e0b54c ; 
}


#brand_highlight:active {
    color: #442e38; 
}

table {
    text-align: left;
    border-collapse: collapse;
    border-spacing: 0px;
}

td.infor1 {
    width: 6em;
    font-weight: 800;
}

td.infor2 {
    width: 1em;
    font-weight: 400;
}

td.infor3 a {
    color: #442e38;
    font-weight: 400;
}

td.infor3 a:hover {
    color: #e0b54c;
}

.facial-table > tbody> tr > td {
    border-top: 1px solid #ddd;
    padding-top: 10px;
    padding-bottom: 15px;

}

td.First-Col {
    padding-left: 40px;
    padding-right: 40px;
}


td.Second-Col {
    width: 15%;
}

.waxing-table {
    margin: 20px auto;

}

.waxing-table > tbody > tr > td {
    border-top: 1px solid #ddd;
    padding-top: 10px;
    padding-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;
}

.waxing-lastrow {
    border-bottom: 1px solid #ddd;
}


.eyelashes-table-menu{
    margin-left: 10px;
    margin-right: 10px;
}

.eyelashes-table {
    /*margin: 20px auto;*/
    margin: 60px 0px;
    width: 100%;

}



.eyelashes-table > tbody > tr > td {
    border-top: 1px solid #ddd;
    padding-top: 10px;
    padding-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;

    font-size: 14px;
    color: #000;
    font-weight: 400;
}


.eyelash-infor {
    margin-left: 10px;
    margin-right: 10px;
}

.eyelash-infor p {
    font-size : 14px;
    color: #000;
    font-weight: 400;

}

p.eyelash-question{
    font-size : 18px;
    color: #e0b54c;
    font-weight: 400;

}


.microblading-table {
    margin: 60px auto;

}

.microblading-table > tbody > tr > td {
    border-top: 1px solid #ddd;
    padding-top: 10px;
    padding-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;

    font-size: 18px;
    color: #000;
    font-weight: 600;
}


.microblading-infor p {
    font-size : 14px;
    color: #000;
    font-weight: 400;
}

p.microblading-question{
    font-size : 18px;
    color: #000000;
    font-weight: 700;

}

p.microblading-answer{
    font-size : 18px;
    color: #000000;
    font-weight: 400;

}

.makeup-infor .panel {
        padding-top: 16px ;
        padding-bottom: 16px;
        padding-left:  5%;
        padding-right: 5%;
}

#otherPanel {
    font-weight: 400;
    font-size: 1em;
}

#otherPanel .sectionTitle{
    color: #e0b54c; 
    font-size: 1.2em;
    font-weight: 400;
}

#weddingPanel {
        font-weight: 400;
        font-size: 1em;
}

#weddingPanel .sectionTitle{
    color: #e0b54c; 
    font-size: 1.2em;
    font-weight: 400;
}


.nail-table {
    margin: 20px auto;
}

.nail-table > tbody > tr > td {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    max-width:60em;
    width: 50%;     

    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.head-spa p{
    font-size: 14px;
    color: #111;
    font-weight: 400;
}

.hair-table {
    margin: 20px auto;
    width: 90%;
}


.hair-table > tbody > tr > td {
    width: 50%;     

    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
}



.hair-style > tbody > tr > td {
    text-align: left;
    font-size: 1.2em; 
    font-weight: 400;
}



p.hair-para {
    margin-left: auto;
    margin-right: auto;
    font-size: 1.2em; /*1em;*/
    font-weight: 400;
    width: 90%;

}

div.review {
    margin-top: 2em;
    margin-bottom: 2em;
}

div.review p {
    font-weight: 400;
    font-size: 1.20em;
}

.carousel-control {
    width: 5%; 
    opacity: .10;
}

.carousel-control:hover {
    width: 5%; 
    opacity: .30;
}


.popup-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;

}

/*
popup-container {
    display: grid;
    grid-template-row;
    grid-template-column;
    
}
*/

.popup-img {
    width: 120px;
    height: 80px;
    flex: 1;
    display: inline-block;
    padding: 2px;
    /*    
    width: 100%;
    height: 100%;
    object-fit: cover;
    */
}

.img-link {
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

/* small */
@media screen and (min-width:768px) {
    

    .show-services {
       margin-left:  auto;
       margin-right: auto;
    }

    #top{
        display: block;
    }
    
    .brand_address, .brand_hours {
        
        font-size: 1em;
        font-weight: 300;
        letter-spacing: 3px;
    }


    .top-divider {
        margin-top: 0;
    }

    .img-left {
        float: left;
        margin-right: 25px;
    }

    .address-bar {
        display: inherit;
        margin: 0;
        padding: 0 0 40px;
        text-align: center;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        text-transform: uppercase;
        font-size: 1.25em;
        font-weight: 400;
        letter-spacing: 3px;
        color: #fff;
    }

    .navbar {
        border-radius: 0;
    }

    .navbar-header {
        display: none;
    }

    .navbar {
        min-height: 0;
    }

    .navbar-default {
        border: none;
        background: #fff;
        background: rgba(255,255,255,0.9);
    }

    .nav>li>a {
        padding: 20px 14px;
    }

    .navbar-nav>li>a {
        line-height: normal;
    }

    .navbar-nav {
        display: table;
        float: none;
        margin: 0 auto;
        table-layout: fixed;
        font-size: 0.80em;
    }

    .dropdown-menu li a {
        font-size: 0.80em;
    }


    .service-select {
        margin-left: auto;
        margin-right: auto;
    }

    .contact-information {
        margin-right: auto;
        margin-left: auto;
    }

    .contact-us {
        margin-right: auto;
        margin-left: auto;
    }

    
    .hair-table {
        margin: 20px auto;
        width: 80%;
    }

    .hair-table > tbody > tr > td {
        width: 50%;     

        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 10px;
        padding-right: 10px;
        
    }

    .hair-style > tbody > tr > td {
        text-align: left;
        font-size: 1em; 
        font-weight: 400;
    }

    #weddingPanel .sectionTitle{
        color: #e0b54c; 
        font-size: 1.2em;
    }


    .makeup-infor .panel {
        padding-top: 20px ;
        padding-bottom: 20px;
        padding-left:  5%;
        padding-right: 5%;
    }
}

/* medium device */
@media screen and (min-width:992px){

    .brand_address, .brand_hours {
        font-size: 1.0em;
        font-weight: 300;
        letter-spacing: 3px;
    }    

    .navbar-nav {
        display: table;
        float: none;
        margin: 0 auto;
        table-layout: fixed;
        font-size: 1.0em;
    }

    .dropdown-menu li a {
        font-size: 1.0em;
    }

    .nav>li>a {
        padding: 25px 18px;
    }

    .show-services {
       margin-left:  auto;
       margin-right: auto;
    }

    .service-select {
        margin-left: auto;
        margin-right: auto;
    }

    .contact-information {
        margin-right: auto;
        margin-left: auto;
    }

    .contact-us {
        margin-right: auto;
        margin-left: auto;
    }

    #weddingPanel .sectionTitle{
        color: #e0b54c; 
        font-size: 1.3em;
    }

    #weddingPanel {
        font-weight: 400;
        font-size: 1.1em;
    }

    .makeup-infor .panel {
        padding-top: 30px ;
        padding-bottom: 30px;
        padding-left:  10%;
        padding-right: 8%;
    }

    #otherPanel {
        font-weight: 400;
        font-size: 1.1em;
    }

    #otherPanel .sectionTitle{
        color: #e0b54c; 
        font-size: 1.3em;
    }

    .eyelashes-table-menu{
        margin-left: 40px;
        margin-right: 40px;
    }
}


/* large device */
@media screen and (min-width:1200px) {
    .box:after {
        content: '';
        display: table;
        clear: both;
    }

    .navbar-nav {
        display: table;
        float: none;
        margin: 0 auto;
        table-layout: fixed;
        font-size: 1.15em;
    }

    .dropdown-menu li a {
        font-size: 1.15em;
    }
    .nav>li>a {
        padding: 35px 24px;
    }

    .show-services {
       margin-left:  auto;
       margin-right: auto;
    }

    .service-select {
        margin-left: auto;
        margin-right: auto;
    }

    .contact-information {
        margin-right: auto;
        margin-left: auto;
    }

    .contact-us {
        margin-right: auto;
        margin-left: auto;
    }

    #weddingPanel .sectionTitle{
        color: #e0b54c; 
        font-size: 1.4em;
    }

    #weddingPanel {
        font-weight: 400;
        font-size: 1.2em;
    }

    .makeup-infor .panel {
        padding-top: 40px ;
        padding-bottom: 40px;
        padding-left:  15%;
        padding-right: 10%;
    }

    #otherPanel {
        font-weight: 400;
        font-size: 1.2em;
    }

    #otherPanel .sectionTitle{
        color: #e0b54c; 
        font-size: 1.4em;
    }

    .eyelashes-table-menu{
        margin-left: 80px;
        margin-right: 80px;
    }
}