*{box-sizing: border-box;}
#wrapper {display: grid; grid-auto-rows: minmax(0px, auto); grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr);}

#homehero {grid-row: 3/4; grid-column: 1/9;background-image: url(homehero.jpg); height: 300px; background-size: cover; background-repeat: no-repeat; background-position: center;}
body { background: linear-gradient(to bottom,#eeeeee,#ffffff); background-attachment: fixed;
    font-family: Verdana; margin: 0px;}

#redbar {background-color: #BA1C21; grid-row: 1/2; grid-column: 1/-1;}
#greybar {background-color: #424242; grid-row: 2/3; grid-column: 1/-1;}
header h1 {background-image: url(dsu.jpg); background-position: right; background-repeat: no-repeat; background-color: #BA1C21; color:#FFFFFF; height: 72px; line-height: 240%; font-family: Georgia; margin: 0; padding-left: 0.5rem;}

nav { grid-row: 2/3; grid-column: 2/8; background-color: #424242; position: sticky; top: 0; font-weight: bold; }

header {grid-row: 1/2; grid-column: 2/8;}
h2 { color: #424242; font-family: Georgia;}
footer { grid-row: 5/6; grid-column: 2/8; background-color: #FFFFFF; font-style: italic; font-size: small; text-align: center; padding: 1em;}
span.dsu { color:#BA1C21; font-size: 1.2em;}
dt { color:#BA1C21; font-weight: bold;}
#studenthero {grid-row: 3/4; grid-column: 1/9; background-image: url(studenthero.jpg); height: 300px; background-size: cover; background-repeat: no-repeat; background-position: center;}
h3 { color:#BA1C21; font-weight: bold;}
#facultyhero {grid-row: 3/4; grid-column: 1/9; background-image: url(facultyhero.jpg); height: 300px; background-size: cover; background-repeat: no-repeat; background-position: center;}
main { grid-row:4/5; grid-column: 2/8;background-color: #FFFFFF; padding-top: 1px; padding-bottom: 1px; padding-left: 2em; padding-right: 2em; display: block;}
nav a { color: #FFFFFF; padding: 1rem 0rem; display: block; text-align: center;}
nav a:hover { background-color: #BA1C21;}
nav ul { list-style-type: none; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; display: flex; flex-flow: nowrap;}
nav ul li {width: 100%;}
section {float: left; width: 33%; padding-right: 1rem;}
.clear { clear: both;}
header a {text-decoration: none; color: #FFFFFF;}


@media only screen and (max-width: 1100px) {#wrapper { grid-auto-rows: minmax(0px, auto); grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 150px)) minmax(0px, 1fr);}}
@media only screen and (max-width: 900px) { nav {grid-row: 2/3; grid-column: 1/5;} nav ul {flex-flow: column nowrap;} section {float: none; width: 100%; padding-right: 0px;} #homehero{grid-row: 2/3; grid-column: 5/8; height: auto;} #studenthero{grid-row: 2/3; grid-column: 5/8; height: auto;} #facultyhero{grid-row: 2/3; grid-column: 5/8; height: auto;}}
@media only screen and (max-width: 600px) { header h1 {background-image: none; text-align: center;} nav {grid-row: 2/3;grid-column: 1/9;} #homehero{display: none;} #studenthero{display: none;} #facultyhero{display: none;}}