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

    body {
        margin: 0 auto;
        border: .5px solid darkgrey;
    }

    #home, .home {
        background: white url('/images/coaster.jpg') 110% 100% no-repeat;
    }

    #aboutUs p {
        max-width: 900px;
        margin: auto;
        padding: 15px;
        font-size:1.2em;
    }

    #productsContainer {
        max-width: 1024px;
        margin: 0 auto;
    }


    #menuButton {
        display: none;
    }

    #banner {
        display: none;
    }

    nav {
        position: relative;
        display: block;
        top: 0;
    }

        nav ul {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            max-width: 1024px;
            margin: 0 auto;
        }

    #services ul {
        display: flex;
        flex-direction: column;
        max-height: 250px;
        max-width: 1024px;
        flex-wrap: wrap;
        width: 100%;
        align-content: space-around;
        align-items: center;
        margin: auto;
        font-size: 1.2em;
    }

        #services ul li {
            width: 250px;
        }

    h2 {
        margin: 0 auto;
        padding-bottom:15px;
    }

    #projectDescription li {
        line-height:1.4em;
        padding:6px;
    }

    #projectsGallery {
        position: relative;
        width: 100%;
        height: auto;
        max-height: 450px;
        max-width: 630px;
        margin: auto;
    }

    #projectsContainer {
        max-width:1024px;
        margin:auto;
        display:flex;
        flex-direction:row;

    }


    #contactContainer {
        width: 100%;
        max-width: 1024px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }

    .contactCard {
        padding-bottom: 15px;
    }
}