body { background-color: #FFFFFF; color: #666666; font-family: Arial; background-image: linear-gradient(#eeeeee, #ffffff); background-attachment: fixed; margin: 0px; } header { background-color: #003058; color: #FFFFFF; font-family: Georgia; grid-column: 2/-2; grid-row: 1/2; } header h1, header a { line-height: 140%; padding: .5rem; text-decoration: none; color: #FFFFFF; margin: 0; } h1 { background-image: url(utahtechlogo.svg); background-position: right; background-repeat: no-repeat; padding-left: 1em; background-origin: content-box; margin: 0; } nav { font-weight: bold; background-color: #424242; grid-column: 2/-2; grid-row: 2/3; position: sticky; top: 0; } h2 { color: #424242; font-family: Georgia; } dt { color: #003058; font-weight: bold; } .ut { color: #BA1C21; font-weight: bold; } footer { font-size: 0.70rem; font-style: italic; text-align: center; padding-left: 1rem; grid-row: 5/6; grid-column: 2/-2; } #wrapper { display: grid; grid-auto-rows: minmax(0px,auto); grid-template-columns: minmax(0px, 1fr) repeat(6,minmax(0, 175px)) minmax(0px, 1fr); } h3 { color: #003058; } main { padding-left: 2rem; padding-right: 2rem; grid-row: 4/5; grid-column: 2/-2; background-color: #ffffff; } #homehero { height: 300px; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url("homehero.jpg"); grid-row: 3/4; grid-column: 2/-2; } #studenthero { height: 300px; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url("studenthero.jpg"); grid-row: 3/4; grid-column: 2/-2; } #facultyhero { height: 300px; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url("facultyhero.jpg"); grid-row: 3/4; grid-column: 2/-2; } #alumnihero { height: 300px; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url("alumnihero.jpg"); grid-row: 3/4; grid-column: 2/-2; } #shophero { height: 300px; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url("shophero.jpg"); grid-row: 3/4; grid-column: 2/-2; } nav a { text-align: center; display: block; color: #FFFFFF; padding: 1rem 0rem; text-decoration: none; transition: 0.5s ease-out; } nav a:hover { text-decoration: none; color: #FFFFFF; padding: 1rem 0rem; display: block; text-align: center; background-color: #BA1C21; } * { box-sizing: border-box; } main img { float: right; padding-left: 2rem; } nav ul { margin: 0px; padding: 0px; display: flex; flex-flow: row nowrap; list-style-type: none; } nav ul li{ width: 100%; } #bluebar{ background-color: #003058; grid-row: 1/2; grid-column: 1/-1; } #greybar{ background-color: #424242; grid-row: 2/3; grid-column: 1/-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{ grid-row: 2/3; grid-column: 1/5; position: static; } nav ul{ flex-flow: column nowrap; } #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; } #alumnihero{ grid-row: 2/3; grid-column: 5/8; height: auto; } #shophero{ grid-row: 2/3; grid-column: 5/8; height: auto; } section{ float: none; width: 100%; padding-right: 0px; } video{ float: none; margin: 0; width: 100%; 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/-1; } #homehero{ display: none; } #studenthero{ display: none; } #facultyhero{ display: none; } #alumnihero{ display: none; } #shophero{ display: none; } } form{ display: grid; grid-template-rows: auto; grid-template-columns: 200px 1fr; margin: 0.75rem; width: 100%; } input{ font-size: 1rem; padding: 10px; color: #666666; background-color: #fafafa; border: none; } textarea{ font-size: 1rem; padding: 10px; color: #666666; background-color: #fafafa; border: none; } input:focus{ outline: none; background-color: #f0f0f0; } textarea:focus{ outline: none; background-color: #f0f0f0; } label{ padding: 10px; text-align: right; } #mySubmit{ width: 10rem; grid-column: 2/3; } table { margin: 0 auto; border: #424242 solid 1px; width: 100%; border-collapse: collapse; } td{ padding: 5px; border: #424242 solid 1px; text-align: center; } th{ padding: 5px; border: #424242 solid 1px; } text{ text-align: left !important; } tr:nth-of-type(even){ background-color: #F3F3F3; } video{ float: right; margin-left: 2em; }