/*========================
GLOBAL
=========================*/
    html, body {
        font-family: 'Josefin Sans', sans-serif;
        background-color: black; /* #f7f7f7 */;
        color: #bbbbbb;
    }

    h2, h3 {
        color: #fd973a;
    }

    p {
        font-size: 18px;
    }

    #success {
        display:none;
        padding-bottom:10px;
        text-align: center;
    }

    #error {
        display:none;
        padding-bottom:10px;
        text-align: center;
    }

    .center-img-mn {
        margin: 0 auto;
    }

/*========================
CONTENT
=========================*/
    .tan-bed{
        background-image: url('../gfx/tanbed.jpg');
        background-size: cover;
        height: 450px;
        background-position: 50% 50%;
    }

    .spray-tan{
        background-image: url('../gfx/spraytan.jpg');
        background-size: cover;
        height: 450px;
        background-position: 50% 50%;
    }

    .eyelash{
        background-image: url('../gfx/lashes.jpg');
        background-size: cover;
        height: 450px;
        background-position: 50% 50%;
    }

    .makeup{
        background-image: url('../gfx/makeup.jpg');
        background-size: 35%;
        height: 450px;
        background-position: 35% 50%;
        background-repeat: no-repeat;
        background-color: black;
    }

    @media(max-width:1280px) and (min-width:801px){
        .makeup{
            background-image: url('../gfx/makeup.jpg');
            background-size: 50%;
            height: 450px;
            background-position: 35% 50%;
            background-repeat: no-repeat;
            background-color: black;
        }
    }
    @media(max-width:800px){
        .makeup{
        background-image: url('../gfx/makeup.jpg');
        background-size: cover;
        height: 450px;
        background-position: 50% 50%;
        }
    }

    .hair{
        background-image: url('../gfx/salon6.jpg');
        background-size: cover;
        height: 450px;
        background-position: 50% 50%;
    }

    .about{
        background-image: url('../gfx/about_us.jpg');
        background-size: cover;
        height: 450px;
        background-position: 50% 30%;
    }

    @media(max-width:800px){
        .about{
        background-image: url('../gfx/about_us_sm.jpg');
        background-size: cover;
        height: 450px;
        background-position: 50% 50%;
        }
    }

    .section-lead {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #de791d;
    }

    .section-lead h1 {
        font-size: 48px;
        font-weight: bold;
        letter-spacing: 4px;
        background-color:rgba(0, 0, 0, 0.38); 
        width: 100%; 
        padding: 10px;
    }

    .makeup h1 {
        font-size: 48px;
        font-weight: bold;
        letter-spacing: 4px;
        background-color:rgba(0, 0, 0, 0.38); 
        width: 100%; 
        padding: 10px;
        text-align: right;
        background-color: initial;
    }

    @media(max-width:1023px){
        .makeup h1{
            font-size: 48px;
            font-weight: bold;
            letter-spacing: 4px;
            background-color:rgba(0, 0, 0, 0.38); 
            width: 100%; 
            padding: 10px;
            text-align: center;
        }
    }

    .tanning img {
        border-radius: 50%;
        width: 50%;
        padding: 10px;
    }

    .instructions {
        text-align: left;
    }

    .book-btn {
        margin-top: 10px;
        color: white;
        background-color: #fd973a;
        border: none;
        border-radius: 0px;
        padding: 15px 35px;
        transition: all .3s ease;
    }

    .book-btn:hover {
        transition: all .3s ease;
        background-color: #de791d;
        color: white;
    }

    .top-gap {
        margin-top: 20px;
    }

    .quad-pic-row {
        margin-bottom: 10px;
    }

    .quad-pic-col {
        padding: 0px 10px 0px 0px;
    }

    .quad-pic img {
        width: 400px;
        margin: 0 auto;
    }

    video {
        width: 70%    !important;
        height: auto   !important;
    }

    .qual-pic {
        width: 100%;
        margin-top: 10px;
    }

    .intro-pic {
        float: left;
        width: 50%;
        padding: 0px 15px;
    }

    .intro-pic-rt {
        float: right;
        width: 50%;
        padding: 0px 15px;
    }

    .intro-pic-about {
        float: left;
        width: 100%;
        padding: 0px 15px;
    }

    .bumper {
        margin-bottom: 20px;
    }

    .info-break{
        background-color: #f7f7f7;
        background-color: #212121;
        /* margin-top: 15px; */
    } 

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

    .dot-sep:before {
        display:block;
        position:relative;
        content:'';
        bottom: 20px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        background: #fd973a;
        box-shadow: 45px 0 #fd973a, -45px 0 #fd973a;
        margin: 30px 0px;
    }

/*========================
HEADER
=========================*/
    .header-main {
        min-height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .header {
        margin-top: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 10px;
    }

    .front-top {
        margin-bottom: 0px; /*10 */
        background-color: black;
        border-bottom: 3px solid #fd973a;
    }

/*========================
FOOTER
=========================*/
    .sub-foot {
        padding-top: 80px;
    }

    .foot-primary {
        margin-top: 80px;
        padding-bottom: 25px;
    }

    .footer {
        text-align: center;
        color: gray;
        margin-bottom: 0px;

        /* new style */
        background-color: black;
        margin-top: 20px;
    }

    .footer i {
        padding: 10px;
    }

    .footer a {
        color:grey;
        transition: all .3s ease;
    }

    .footer a:hover{
        color: #fd973a;
        transition: all .3s ease
    }

    .bottom-info-hours {
        padding-top: 15px;
    }

    .bottom-info-address {
        padding-top: 15px;
    }

    @media(min-width:800px){
        .bottom-info-hours {
        padding-top: 15px;
        text-align: right;
        }

    .bottom-info-address {
        padding-top: 15px;
        text-align: left;
        }
    }

    .soc-ph, .soc-ph a {
        color: #fd973a;
    }

/*========================
NAVBAR
=========================*/
    .navbar-default {
        background-color: white;
        border-color: white;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    @media (min-width: 800px){
        .center-nav {
        display: flex;
        justify-content: center;
        }
    }

    #bs-example-navbar-collapse-1 > ul > li.dropdown.open > a{
            background-color: white;
        }
    /********* new black *******/
            .navbar-default {
            background-color: black;
            border-color: black;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        #bs-example-navbar-collapse-1 > ul > li.dropdown.open > a{
                background-color: black;
            }
    /********* new black *******/

    .center-nav > .navbar-header{
        display: flex;
        justify-content: center;
    }

    .navbar-collapse .navbar-nav a {
        display: inline-block;
        font-weight: bold;
    }

    .navbar-default .navbar-collapse .navbar-nav a {
        transition: all .3s ease
    }

    .navbar-default .navbar-collapse .navbar-nav a:hover {
        color: #fd973a;
        transition: all .3s ease
    }

    .dropdown-menu>li>a:focus, 
    .dropdown-menu>li>a:hover {
        background-color: white;
    }

    .vert-divider {
        border-right: 1px solid #c2c2c2;
    }

    @media(max-width:800px){
        .vert-divider {
        display: none;
        }
    }


/*========================
CAROUSEL
=========================*/
    .front-slides {
        background-color: white;
    }

    .front-slides img {
        margin: 0 auto;
    }

    .carousel-fade .carousel-inner .item {
    opacity: 0;
    transition-property: opacity;
    }

    .carousel-fade .carousel-inner .active {
    opacity: 1;
    }

    .carousel-fade .carousel-inner .active.left,
    .carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
    }

    .carousel-fade .carousel-inner .next.left,
    .carousel-fade .carousel-inner .prev.right {
    opacity: 1;
    }

    .carousel-fade .carousel-control {
    z-index: 2;
    }

    @media all and (transform-3d), (-webkit-transform-3d) {
        .carousel-fade .carousel-inner > .item.next,
        .carousel-fade .carousel-inner > .item.active.right {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
        }
        .carousel-fade .carousel-inner > .item.prev,
        .carousel-fade .carousel-inner > .item.active.left {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
        }
        .carousel-fade .carousel-inner > .item.next.left,
        .carousel-fade .carousel-inner > .item.prev.right,
        .carousel-fade .carousel-inner > .item.active {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
        }
    }