/* base */

*,
*:before,
*:after {
    box-sizing: border-box
}

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

body {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 16px;
    line-height: 1.5rem;
    background-color: #fff;
    color: #333;
}

a {
    text-decoration: none
}
a:hover {
    text-decoration: underline
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

p {
    padding:0;
    margin: 0 0 1rem 0;
}

h1 {
    padding: 0;
    margin: 0 0 1rem 0;
    font-size: 1.75rem;
    line-height: 2rem;
    font-weight: 300;
    text-transform: capitalize;
}

/* utility */
.img-responsive {
    width: 100%;
    height: auto;
    display: block;
}

/* layout */
.hero-image {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-top:50px;
    width; 100%;
    height: 250px;
}
main {
    padding: 20px;
}

.footer {
    margin-top:50px;
    background-color:#333;
    color:#fff;
    padding: 20px;
    font-size: 0.85rem;
    line-height: 1.25rem;
}
.footer a {
    text-decoration: none;
    color:#fff;
}
.footer .left {
    justify-content: center;
    text-align: center;
    align-items: center;
    min-height:80px;
}
.footer .right {
    justify-content: center;
    text-align: center;
    align-items: center;
    min-height:80px;
}
.services-intro {
    flex-direction: row;
    justify-content: center;
    text-align: center;
    padding: 20px 0;
    width:100%;
    align-items: center;
}

@media (min-width: 1024px) {
    .services-intro {
        flex-direction: row;
        justify-content: center;
        text-align: center;
        padding: 20px 0 0 0;
        width:100%;
        display:none;
    }
    .footer {
        margin-top:80px;
    }
    .footer .left {
        justify-content: flex-start;
        text-align: left;
        align-items: center;
    }
    .footer .right {
        justify-content: flex-end;
        text-align: right;
        align-items: center;
    }
    .hero-image {
        margin-top:100px;
        width; 100%;
        height: 450px;
    }
    main {
        padding: 40px 100px 0 100px;
    }
    h1 {
        margin: 0 0 2rem 0;
        font-size: 3rem;
        line-height: 3rem;
    }
}

.logo {
    height: 50px;
}



        .card-header {
            font-size: 1rem;
            margin-bottom: 0;
            font-weight: 600;
        }
        .bg {
            background-size:contain;
            background-position: 0 0;
            background-repeat: no-repeat;
        }
        .card {
            padding: 10px 30px;
            justify-content: center;
            min-height: 110px;
        }
        .btn {
            display:block;
            width:auto;
            margin:30px auto;
            background-color: #bb0000;
            font-weight:500;
            text-decoration: none;
            padding:10px 20px;
            text-transform: capitalize;
            color:#fff;
        }
        .services {
            cursor: pointer;
        }
        .reputation {
            background-color:#999;
            text-align: center;
            padding:40px;
            font-weight:600;
            font-size:1.5rem;
            font-style: italic;
            line-height: 2rem;
            color:#fff;
            margin: 20px 0 40px 0;
        }