* { box-sizing: border-box; } body { background-color: #FFFFFF; color: #666666; font-family: Verdana, Arial, Sans-Serif; background: linear-gradient(to bottom, #eeeeee 0%, #FFFFFF 100%); background-attachment: fixed; margin: 0px; } header { background-color: #003058; color: #FFFFFF; font-family: Georgia, Sans-Serif; grid-row-start: 1; grid-row-end: 2; grid-column-start: 2; grid-column-end: -2; } header h1 { line-height: 140%; padding: .5rem; background-image: url(utahtechlogo.svg); background-position: right; background-repeat: no-repeat; padding-left: 1em; background-origin: content-box; margin-bottom: 0; } header a { color:#FFFFFF; } header a:link { text-decoration: none; } nav { font-weight: bold; background-color: #424242; position: sticky; top: 0; grid-row-start: 2; grid-row-end: 3; grid-column-start: 2; grid-column-end: -2; } nav a { text-decoration: none; color: #FFFFFF; padding: 1rem 0rem; display: block; text-align: center; } nav a:hover { background-color: #BA1C21; } nav ul { margin: 0px; padding: 0px; display: flex; flex-flow: row nowrap; list-style-type: none; } nav ul li { width: 100%; } h2 { color: #424242; font-family:Georgia, Serif; } dt { color: #003058; font-weight: bold; } #ut { color: #BA1C21; font-weight: bold; } footer { font-size: .70rem; font-style: italic; text-align:center; padding: 1rem; grid-row-start: 5; grid-row-end: 6; grid-column-start: 2; grid-column-end: -2; } h3 { color: #003058; } main { display:block; padding: 0 2rem 0 2rem; grid-row-start: 4; grid-row-end: 5; grid-column-start: 2; grid-column-end: -2; } main img { padding-left: 2rem; } #homehero { height: 300px; background-image: url("homehero.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center; grid-row-start: 3; grid-row-end: 4; grid-column-start: 1; grid-column-end: -1; } #studenthero{ height: 300px; background-image:url("studenthero.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; grid-row-start: 3; grid-row-end: 4; grid-column-start: 1; grid-column-end: -1; } #facultyhero { height: 300px; background-image: url(facultyhero.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; grid-row-start: 3; grid-row-end: 4; grid-column-start: 1; grid-column-end: -1; } #wrapper { display: grid; grid-auto-rows: minmax(0px, auto); grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr); } #bluebar { background-color: #003058; grid-row-start: 1; grid-row-end: 2; grid-column-start: 1; grid-column-end: -1; } #greybar { background-color: #424242; grid-row-start: 2; grid-row-end: 3; grid-column-start: 1; grid-column-end: -1; } @media only screen and (max-width: 1100px){ #wrapper { grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 150px)) minmax(0px, 1fr); } } @media only screen and (max-width: 900px) { nav { position: sticky; grid-row-start: 2; grid-row-end: 3; grid-column-start: 1; grid-column-end: 5; } nav ul { flex-flow: column nowrap; } #studenthero { height: auto; grid-row-start: 2; grid-row-end: 3; grid-column-start: 5; grid-column-end: 8; } #homehero { height: auto; grid-row-start: 2; grid-row-end: 3; grid-column-start: 5; grid-column-end: 8; } #facultyhero { height: auto; grid-row-start: 2; grid-row-end: 3; grid-column-start: 5; grid-column-end: 8; } main img { float:none; width: 100%; height: auto; padding-left: 0px; } } @media screen and (max-width: 600px) { header h1 { background-image: none; text-align: center; } nav { grid-row-start: 2; grid-row-end: 3; grid-column-start: 1; grid-column-end: -1; } #homehero { display: none; } #studenthero { display: none; } #facultyhero { display: none; } }