@import url("https://fonts.googleapis.com/css?family=Cinzel:400,700&family=Work+Sans:wght@200;300;400;500;600;700&display=swap");

/**************** html definitions ****************/

body, html {
    width: 100%; 
    height: 100%;
}
body {background-color: #212121; background-image: url("../images/booths.jpg"); -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover; background-size: cover; background-attachment: fixed; font-family: 'Work Sans', sans-serif; font-weight: 300;}
a {color: #293363}
h1, h2, h3, h4 { font-family: 'Cinzel', serif;margin-bottom: 1em; font-weight: 700;}
h3 {color: #bf965d; margin:1em 0; font-size: 1.4em; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-weight: 700; text-transform: uppercase;}
p {line-height: 2em; letter-spacing: .2em;}
b, strong {font-weight: 600;}
/**************** branding definitions ****************/

#logo  {
/*    position: absolute;*/
    width: 100%;  top: 1rem; 
}
.navbar-brand {display: block; background: url(../images/barber-vision-logo.png) center no-repeat; background-size: contain; margin: 0 auto; width: 150px; height: 150px; color: #FFF; overflow:hidden; text-indent:-9999px;}
.background-tan {background: #bf965e;}
.background-blue {background-color: #293363;}
.background-tan-tint {background-color: rgba(188,150,94,.85);}
.background-blue-tint {background-color: rgba(36,49,97,.7);}
.background-tint {background-color: rgba(0,0,0,.7);}
.text-tan {color: #bf965e;}
.text-blue {color: #293363;}
.text-shadow {text-shadow: 1px 1px 1px #212121;}
/**************** template definitions ****************/

header {
    display: block;
    position: relative;
    background-color: transparent;
    width: 100%;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    z-index: 100;
    top: 0;
}

.masthead {
/*    height: 120vh;*/
/*    height: 100vh;*/ 
    min-height: 450px;
    padding-top: 0;
    padding-bottom: 0;
}
section {padding: 15% 0;}
#book h1 {padding-top: 8rem;}
#book img {width: 125px; height: auto;}
#vision {background-color: #bf965e;}
#services {background-color: #212121; background-image: url("../images/section.jpg"); -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover; background-size: cover; background-attachment: fixed;}
.content-2 {padding-top: 5em; padding-bottom: 5em; color: #FFF; text-align: center;}
.content-text {border:1px solid #bf965d; padding: 2em 2em 2em 8em;}
.content-img {position: absolute; text-align:left; left: -2em; top: 40%;}
.content-img img {width: 200px; height: 200px; border-radius: 50%; cursor: default;}

.full-image {background: url(../images/section.jpg) fixed no-repeat; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover; background-size: cover; line-height: 0;}

footer {background-color: rgba(36,49,97,.9);}
footer a {padding: 0 .5em;}
.social {text-align: right;}

/**************** overrides ****************/


table td:first-child {text-align: left !important;}
.table td, .table th {border-top: 1px solid #343A40;}
table p{line-height: .9em}


/**************** tablet - desktop ****************/

@media (min-width: 768px) {
    #visit {
        min-height: 450px;
    }
    #visit iframe{position: absolute}
}


@media (min-width: 992px) {

}


/**************** small tablet definitions ****************/

@media (max-width: 991px) {
    header.navbar-shrink {
            background-color: rgba(36,49,97,1);
        }
}

@media (min-width: 768px) and (max-width: 991px) {
    
    

}

/**************** handheld definitions ****************/


@media (max-width: 767px) {
    #logo {
        position: relative;
        width: inherit;
    }
    .navbar-brand {
        width: 80px;
        height: 80px;
    }
    .address {display: none;}
    .navbar-nav { text-align: center;}
    .masthead {
        height: auto;
        min-height: 650px;
    }
    section {
        padding: 25% 0;
    }
    #vision {
        padding-bottom: 30rem;
    }
    #visit {background: #bf965e;}
    .content-img {
        top: 20%;
    }
    .content-text {
        padding: 2em 2em 2em 10em;
    }
    
}