.nav ul {
    display: grid;
    grid-gap: 5px;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(5, 1fr);
}



.mudders {
    width: 120px;
    float: right;
    margin: 0 0 0 15px;
    border: 5px solid rgba(161, 255, 240, .3);
}

.dolphin {
    float: right;
    margin: 0 0 0 15px;

}

.dolphin img {
    width: 150px;
    border: 5px solid rgba(161, 255, 240, .3);
}

.run-image {
    float: left;
    margin: 20px 30px 0 0;
    max-width: 400px;
}

.run-image img {

    width: 100%;
    height: auto;
    border: 5px solid rgba(161, 255, 240, .3);
}


figcaption {
    color: #fff;
    font: italic smaller sans-serif;
    padding: 3px;
    margin-top: -35px;
    text-align: center;
}

.centre {
    text-align: center;
}



/* MEDIA QUERIES */


@media(min-width: 700px) {

    /*
    .nav ul li {
        font-size: 0.5em;

    }
*/

    #content {
        padding: 3%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:

            " head head"
            " nav nav"
            " main main"
            " foot foot"
    }



    .header {
        grid-area: head;
    }


    .banner {
        grid-area: ban;
    }

    .nav {
        grid-area: nav;
        padding-right: 5%;
    }

    .main {
        grid-area: main;
        padding-right: 5%;
    }

    .footer {
        grid-area: foot;
    }


}