* {
    box-sizing: border-box;
}

.logo-container {
    text-align: center;

}


.header-container {
    display: inline-block;
    padding: 20px;
    font-family: 'Abril Fatface', cursive;
}

.header-container h1 {
    letter-spacing: 1px;
    color: white;
}

.hero {
    height: border-box;
    background-image: url("../images/AdobeStock_61600915.jpeg");
    filter: blur(8px);
    -webkit-filter: blur(2px);
    height: 400px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.bg-text {
    height: auto;
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
    color: white;
    font-weight: bold;
    border: 3px solid #f1f1f1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    width: 80%;
    padding: 20px;
    position: absolute;
    top: -200px;
    text-align: center;
}


.hero{
    color: white;
    padding-top: 50px;
    padding-bottom: 50px;
    line-height: 1;
    z-index: 1;
}

.bg-text h1 {
    font-family: "Abril Fatface";
    letter-spacing: 1px;
    font-size: 2.5em;
}

.bottom-cta {
    font-family: "Vast Shadow";
    font-weight: bold;
}

.bg-text h2 {
    font-weight: bold;
    color: #F25774;
    font-family: sans-serif;
    font-size: 2em;
    z-index: 2;
}

.hero h2 {
    line-height: 1;
}

.hero p {
    font-family: sans-serif;
    line-height: 1.25;
}
.divider{
    height: 10px;
    width: 100%;
    background-color: #03738C;
}

#city {
    background-color: #BFAE9F;
    width: 100%;
    padding-top: 40px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 40px;
}


.city {
    background-color: #BFAE9F;

}


.four columns {
    margin-bottom: 50x;
}

.cities{
    padding-top: 3%;
    line-height: 1;
    font-family: sans-serif;
    color: #F25774
    background-color: #BFAE9F;
}

.cities h5{
    padding: 10px;
    text-align: center;
    font-family: "Vast Shadow";
    margin-bottom: 0;
}

.cities p{
    font-family: sans-serif;
    text-align: center;
    margin-top: 0;
}

.city-finder {
    padding-top: 50px;
    font-family: sans-serif;
}

.profile{
    border-radius: 50%;
    border: 3px solid #03738C;
    margin-bottom: 40px;

}

.name{
    margin-top: 40px;
    margin: 15px;
    display: inline-block;
    font-family: Futura;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 1px;
}

h2 {
    font-family: "Abril Fatface";
}


p{
    font-family: sans-serif;
}

.past-clients{
    background-color: #F20530;
    padding-top: 10px;
    text-align: center;
    color: white;

}

.past-clients img{
    height: 100px;
    width: auto;
    margin-bottom: 40px;
    text-align: center;
}

.bottom-hero{
    background-color: #03738C;
    background-image: url("../images/bluetruck-final.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bottom-cta{
    padding-top: 75px;
    text-align: center;
    color: white;
    font-family: Helvetica;
}

.cta{
    margin-bottom: 75px;
    text-align: center;
}

.small-divider{
    border: 3px solid #03738C;
}

.footer{
    background-color: #F25774;
    color: white;
    font-family: Times;
    padding-top: 20px;
    padding-bottom: 5px;
    text-align: center;
    font-size: 16px;
}

.button {
    font-size: 16px;
    font-family: sans-serif;
}

.button-primary{
    font-size: 16px;
    font-family: sans-serif;
}

.icon {
    text-align: center;
}

/* -- End Page --*/
.container {
    /* over write skeleton 960px grid default with bootstrap 1200px grid */
    max-width: 1200px;

}
/* home page css
__________________________________________________________________
*/
#desktop-header {margin-top: 0px;}
#desktop-header div {background-color: #F25774; border-radius: 0px 0px 0 0;}

/* images css */
img {margin: 0; padding: 0; max-width: 100%;}
#desktop-header div img
{
    border-radius: 0px;
    /* set max-width to keep image responsive in a larger container */
    /* image is 980px wide so 980px/1200px = 81.6666% */
    max-width: 81.6666%;
    /* calculate all margins minus image width */
    margin: 3.3333% 14.1668% 3.3333% 4.1666%;
}

/* global css
__________________________________________________________________
*/

/* navigation css */
nav
{
    padding: 10px 0;
    overflow: auto;
    border-radius: 0;
    background-color: #BFAE9F;
}
nav ul {margin: 0; padding: 0;}
nav ul li
{
    list-style-type: none;
    float: left;
    margin: 0;
}
nav ul li a
{
    text-decoration: none;
    display: inline-block;
    padding: 3px 15px;

}

nav a:link {color: #fff;}
nav a:visited {color: #fff;}
nav a:hover {font-style: italic;}

/* desktop viewport cascading menu css */

#nav_menu  ul ul {
    display: none;
    position: absolute;
}

nav ul li ul li
{
    float: none;
}

#nav_menu ul li:hover > ul {
    display: block;
    z-index: 101;
}

nav ul ul a:link, nav ul ul a:visited
{
    background-color: #ffffff;
    border-bottom: 1px solid #ffead9;
    color: #F2527D;
    width: 100%;
}

/* main home page content css*/

#home-txt
{
    -moz-column-count: 2;
    column-count: 2;
    /* 60px/1200px = 5%*/
    -moz-column-gap: 5%;
    column-gap: 5%;
    margin-bottom: 20px;

}

article div p
{
    margin: 0; padding: 0; padding-bottom: 20px;
}

/* footer css */
footer
{
    padding: 10px 0 10px 1.25%;
    background-color: #cccccc;
    border-radius: 0px;
    margin-bottom: 20px;
}

#clients {
    font-family: "Abril Fatface";
    text-align: left;
    padding-left: 55px;
}


/* fonts/typography */
h1 { font-size: 3rem; margin: 10px 0;}
h2 { font-size: 3rem; margin: 10px 0px; letter-spacing: .25px;}
h3 { font-size: 1rem;}
h2 a {text-decoration: none; color: black;}

/* hide mobile assets */
#mobile-header, #mobile_menu {display: none;}

/*  mobile css  */

@media (max-width: 550px) {
    /* hide desktop header and nav */
    #desktop-header {display: none;}
    #nav_menu {display: none;}

    /* show and format mobile assest */
    #mobile-header, #mobile_menu {display: block;}
    #mobile-header {margin-bottom: 10px;}
    #mobile-header hr {margin: 0;}
    #mobile_menu {padding: 0; margin-bottom: 10px;}

    nav {background-color: #BFAE9F; border-radius: 0;}
    nav a:link {color: #eb5573; font-weight: bold;}
    nav a:visited {color: #F2527D; font-weight: bold;}


    nav ul li
    {
        /* make mobile links stack */
        float: none;
        border-bottom: 1px solid #BFAE9F;
    }
    .slicknav_menu {
        background-color: #fff;
    }

    .slicknav_nav ul {
        margin: 0;
    }

    /* remove two columns in section */
    #home-txt
    {
        -moz-column-count: 1;
        column-count: 1;

    }

}