/* Structual Elements Go Here */
* {
	box-sizing: border-box;
}
body {
    background-color: #efeeef;
    color: #555555;
    margin: 0;
    font-family: Lato;
}
nav {
    grid-column: 2/3;
    background-color: #edeeef;
}
main {
    grid-column: 3/-2;
    background-color: #ffffff;
    padding: 20px;
}
footer {
    grid-column: 3/-2;
    background-color: #2d5ba6;
    color: #ffffff;
    font-size: .5rem;
    padding: 20px;
    text-align: center;
}
img {
    padding-left: 10px;
    padding-top: 10px;
}
figcaption {
    font-style: italic;
    font-size: .75rem;
    text-align: center;
}
/* Navigation Elements Go Here */
nav ul {
    margin: 0;
    padding: 0;
    flex-flow: column nowrap;
}
nav ul li{
    width: 100%;
}
nav ul li a {
    width: 100%;
    color: #555555;
    padding: 10px;
}
nav a:hover {
    background-color: #ffffff;
    color: #d53631;
}
/* Styling Elements Go Here */
#wrapper {
    display: grid;
    grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr);
    grid-auto-rows: minmax(0,auto);
}
.right {
    float: right;
}
/* Media Query of 960 and less goes here */
@media only screen and (max-width: 960px){
    #wrapper {
        grid-column: minmax(0,auto);
    }
    nav {
        grid-column: 2/-2;
        grid-row: 1/2
    }
    main {
        grid-column: 2/-2;
        grid-row: 2/3;
    }
    footer {
        grid-column: 2/-2;
        grid-row: 3/4;
    }
    .right {
        float: none;
    }
    img {
        width: 100%;
    }
}