* {box-sizing:border-box;}

body {background-color:#FFFFFF;
        color: #666666;
        font-family: Verdana, sans-serif;
        background-image: linear-gradient(to bottom, #eeeeee, #ffffff);
        background-attachment:fixed;
        margin: 0px;
    }
#wrapper {display:grid;
                grid-auto-rows:minmax(0px,auto);
                grid-template-columns: minmax(0px,1fr) repeat(6,minmax(0,175px)) minmax(0px,1fr);
        }      
#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 {background-color:#BA1C21;
            color:#FFFFFF;
            font-family:Georgia, serif;
            grid-row:1/2;
            grid-column:2/-2;
        }
header h1 {line-height:240%; 
        background-image: url("dixie4images/dsu.jpg");
        background-position: right;
        background-repeat: no-repeat;
        padding-left: 0.5rem;
        height:72px;
        margin:0;
        }
    header a {text-decoration: none;
               color:#FFFFFF;}
nav {font-weight:bold;
        background-color:#424242;
        position: sticky;
           top:0;   
        grid-row:2/3;
        grid-column:2/8;  
        }
nav a {text-decoration:none;
        color:#FFFFFF;
        padding: 1rem 0rem;
        display:block;
        text-align:center;
        transition: background-color 0.5s;
        transition-timing-function: ease-out;
}
nav a:hover {background-color:#BA1C21;
                }
nav ul {list-style-type:none;
        margin:0px;
        padding:0px;
        display:flex;
        flex-flow:row nowrap;
        }
nav ul li {width:100%;
          }
h2 {color:#424242;
        font-family: Georgia, serif;}
video {float:right;
        margin-left:2em;
}
dt {color:#BA1C21;
        font-weight:bold;}
.dsu {color:#BA1C21;
        font-size:1.2em;}
footer {font-size: 0.7em;
          font-style:italic;
            text-align:center;
            padding:1em;
            background-color:#FFFFFF;
            grid-row:5/6;
            grid-column:2/8;
          }
h3 {color:#BA1C21;
}
main {padding-left:2em;
        padding-right:2em;
        display:block;
        background-color:#FFFFFF;
        padding-top: 1px;
        padding-bottom: 1px;
        grid-row:4/5;
        grid-column:2/8;
}
section {float:left;
          width: 33%;
          padding-right:1rem;
        }
#homehero {background-image: url("dixie4images/homehero.jpg");
                height:300px;
                background-size:cover;
                background-repeat:no-repeat;
                background-position:center;
                grid-row:3/4;
                grid-column:1/-1;
        }
#studenthero {background-image: url("dixie4images/studenthero.jpg");
                height:300px;
                background-size:cover;
                background-repeat:no-repeat;
                background-position:center;
                grid-row:3/4;
                grid-column:1/-1;
        }
 #facultyhero {background-image: url("dixie4images/facultyhero.jpg");
                height:300px;
                background-size:cover;
                background-repeat:no-repeat;
                background-position:center;
                grid-row:3/4;
                grid-column:1/-1;
        }
#alumnihero {background-image: url("dixie4images/alumnihero.jpg");
        height:300px;
        background-size:cover;
        background-repeat:no-repeat;
        background-position:center;
        grid-row:3/4;
        grid-column:1/-1;
        }

#shophero {background-image: url("dixie4images/shophero.jpg");
        height:300px;
        background-size:cover;
        background-repeat:no-repeat;
        background-position:center;
        grid-row:3/4;
        grid-column:1/-1;
        }

.clear {clear:both;}

table {
        margin: 0 auto;
        border: 1px #424242;
        border-style: solid;
        width: 100%;
        border-collapse: collapse;
}

td,th {
        padding: 5px;
        border: 1px #424242;
        border-style: solid;
}

td {
        text-align: center;
}

.text {
        text-align: left;
}

tr:nth-of-type(even){
        background-color:#F3F3F3;
}

form {display:grid;
        grid-template-rows:auto;
        grid-template-columns: 200px 1fr;
        grid-gap: 0.75rem;
        width: 100%;
}

input, textarea {font-size:1rem;
        padding: 10px;
        color: #666666;
        background-color:#fafafa;
        border:none;
}

input:focus, textarea:focus {outline:none;
        background-color: #f0f0f0;
}

label {padding: 10px;
        text-align:right;
}

#mySubmit {width:10rem;
        grid-column:2/3;
}

@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;
        }
        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;
        }
}