body,
html {
    height: 100%;
    margin: 0;
    font: 400 25px "Century Gothic", sans-serif;
    color: #2A2726;
    text-align: center;
}

/* Nav */

.bg-customize {
    background-color: #393230;
}

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

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: white;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: white;
}


.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: white;
}

/* BUTTONS */

.btn-customize {
    background: rgba(57, 50, 48, 0.4);
    background: rgb (57, 50, 48);
    font: 2em "mistral";
    border: 2px solid white;
    padding: .75em .80em;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    letter-spacing: .15em;
    word-spacing: .25em;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
}

.btn-customize:hover {
    color: #FFFAF0;
    background: transparent;

}

/*  SECTIONS  */

.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  COLUMN SETUP  */

.col {
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%;
    text-align: center;
    font: 400 20px "Century Gothic", sans-serif;
    padding-bottom: 18px;
    color: #393230;
}

.censtyle {
    text-align: center;
    font: 400 20px "Century Gothic", sans-serif;
    padding: 18px;
    color: #393230;
    width: 49.2%;
    
}

.op {
    border-bottom: 1px solid #ccc;
}

.colh1 {
    font: 30px "Mistral", sans-serif;
    color: #393230;
}

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

.col:first-child {
    margin-left: 0;
}

/*  GROUPING  */

.group:before,
.group:after {
    content: "";
    display: table;
}

.group:after {
    clear: both;
}

.group {
    zoom: 1;
    /* For IE 6/7 */
}

/*  GRID OF TWO  */

.span_2_of_2 {
    width: 100%;
}

.span_1_of_2 {
    width: 49.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

img {
    max-width: 100%;
    padding-bottom: 5px;
}



/* Change font and imgs to % */

h1 {
    color: white;
    letter-spacing: 8px;
    font: 100px "mistral", sans-serif;
    width: 100%;

}

.bgimg-1,
.bgimg-2,
.bgimg-3,
.bgimg-4,
.bgimg-5 {
    position: relative;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}


.bgimg-1 {
    background-image: url("../photos/parallaxtest.jpg");
    min-height: 100%;
}

.bgimg-2 {
    background-image: url("../photos/parallax2.jpg");
    min-height: 100%;
}

.bgimg-3 {
    background-image: url("../photos/parallax3.jpg");
    min-height: 100%;
}

.bgimg-4 {
    background-image: url("../photos/parallax4.jpg");
    min-height: 100%;
}

.bgimg-5 {
    background-image: url("../photos/parallax5.jpg");
    min-height: 100%;
}

.bgparagraphs {
    position: relative;
    padding: 50px 80px;
    background color: #ffffff;
}

.paragraphhdfnt {
    color: #393230;
    letter-spacing: 4px;
    font: 400 30px "Century Gothic", sans-serif;
    position: relative;
}

.paragraphfnt {
    font: 400 20px "Century Gothic", sans-serif;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.aboutfnt {
    font: 400 20px "Century Gothic", sans-serif;
    width: 90%;
    Margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.caption span.border {
    color: #fff;
    padding: 18px;
    letter-spacing: 8px;
    font: 400 60px "mistral", sans-serif;
}

.caption {
    left: 0%;
    top: 40%;
    width: 100%;
    text-align: center;
    color: #393230;
}

.mainheader {
    color: #fff;
    letter-spacing: 8px;
    font: 100px "mistral", sans-serif;
}

.salon {
    color: white;
    float: left;
    font: 400 30px "mistral", sans-serif;
    display: block;
}

.salon a:hover {
    background-color: #393230;
    color: white;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Footer */

.footer {
    background-color: #393230;
    padding-left: 50px;
    font: 400 14px/1.8 "Century Gothic", sans-serif;
    color: white;
    text-align: left;
}

.ftrcol {
    display: block;
    float: left;
    margin: 1% 0 1% 0%;

}

.ftrcol:first-child {
    margin-left: 0;
}

.o {
    list-style-type: circle
}

/* design line */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/* Responsive */

@media screen and (max-width: 800px) {
    .topnav a:not(:first-child) {
        display: none;
    }
    
        .phne {
        font-size: 1em; !important;
    }

    .topnav a.icon {
        float: right;
        display: block;
    }
}


.opname {
    color: #393230;
    float: center;
    font: 400 30px "mistral", sans-serif !important;
    display: block;
}

@media only screen and (max-width: 480px) {
    .col {
        margin: 1% 0 1% 0%;
    }
}

@media only screen and (max-width: 480px) {

    .span_2_of_2,
    .span_1_of_2 {
        width: 100%;
    }
    
    .phne {
        font-size: 1em; !important;
    }

    .hidebr {
        content: ' ';
    }

    h1 {
        font-size: 45px;
        padding: 20px;
    }

    .censtyle {
     width: 100%;
    }
    
    .aboutfnt {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }

    .btn-customize {
        font-size: 30px;
        padding: 15px;
    }

    .salon {
        font-size: 20px;
    }

    .bgparagraphs {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }

    .bgimg-1,
    .bgimg-2,
    .bgimg-3,
    .bgimg-4 {
        background-attachment: scroll;
    }

    .ftrcol {
        padding-right: 25px;
    }

    .footer {
        padding-left: 25px;
    }

    .col {
        padding: 10px;
    }


    * {
        box-sizing: border-box;
    }


    @font-face {
        font-family: 'Mistral';
        font-style: normal;
        font-weight: normal;
        src: local('Mistral'), url('MISTRAL.ttf') format('ttf');
    }

    .google-maps {
        position: relative;
        padding-bottom: 5px; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }

    .google-maps iframe {
        justify-content: center;
        top: 0;
        left: 0;
        width: 85% !important;
        height: 90% !important;

    }