html,
body {
    height: 100%;
}

nav {
    background-color: #2B404F;
}

.footer {
    background-color: #f5f5f5;
}

.header {
    background-color: #76B1DB;
    height: 45%;
}

@media (min-width: 768px) {
    .header {
        background-image: url("/img/W2D3.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: fixed;
        background-color: #329cb2;
    }

    .hero {
        margin: 0 auto;
        overflow: hidden;
        padding: 10px 0;
        align-items: left;
        justify-content: left;
        display: flex;
    }
}

.footer>.container {
    padding-right: 15px;
    padding-left: 15px;
}