.special {
          background-color:#FFFFFF;
          color:#666666;
          font-family: Verdana, sans-serif;
          box-sizing: border-box;
        }
body {
      background-color: #FFFFFF;
      background-image: linear-gradient(#eeeeee,#ffffff);
      background-attachment: fixed;
      color: #666666;
      font-family: Verdana, Arial, sans-serif;
      margin: 0px;

}

header {
        background-color:#BA1C21;
        color:#FFFFFF;
        font-family: Georgia, sans-serif;
        grid-row: 1 / 2;
        grid-column: 2 / -2;
        }  
header a{
        text-decoration: none;
        color: #FFFFFF;
} 
div h1 {
        padding-left: 0.5em;
        background-image: url(dsu.jpg);
        background-position: right;
        background-repeat: no-repeat;
        padding-left: 1em;
        height: 72px;
        line-height: 240%;
        margin-bottom: 0;
        }
nav {
    background-color: #424242;
    font-weight: bold;
    position: sticky;
    top: 0;
    grid-row: 2 / 3;
    grid-column: 2 / -2;
    }
h2 {
    color:#424242;
    font-family: Georgia, sans-serif;
    }
dt {
    color:#BA1C21;
    font-weight: bold;
    }
.dsu {
      color: #BA1C21;
      font-size: 1.2em;
    }

footer {
        padding: 1em;
        font-size: .70em;
        font-style: italic;
        text-align: center;
        background-color: #FFFFFF;
        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: #BA1C21;
}
table {
        background-position: center;
        margin: 0, auto;
        width: 100%;
        border: 1px solid  #424242;
        border-collapse: collapse;
 }
td, th {
         padding: 5px;
         border: 1px solid #424242;
 }
th{
        background-color: #FFFFFF;
}
td {
        text-align: left;
}
tr:nth-of-type(2n+1){
        background-color: #F3F3F3 ;
}
main {
      background-color: #FFFFFF;
      padding-left: 2em;
      padding-right: 2em;
      display: block;
      padding-top: 1px;
      padding-bottom: 1px;
      grid-row: 4 / 4;
      grid-column: 2 / -2;
    

}  
#homehero {
           height: 300px;
           background-image: url(homehero.jpg);
           background-repeat: no-repeat;
           background-size: cover;
           background-position: center;
           grid-row: 3 / 4;
           grid-column: 1 / -1;           
           
}
#studenthero {
              height: 300px;
              background-image: url(studenthero.jpg);
              background-repeat: no-repeat;
              background-size: cover;
              background-position: center;
              grid-row: 3 / 4;
              grid-column: 1 / -1; 
}
#facultyhero {
              height: 300px;
              background-image: url(facultyhero.jpg);
              background-repeat: no-repeat;
              background-size: cover;
              background-position: center;
              grid-row: 3 / 4;
              grid-column: 1 / -1; 
}
nav a {
    color: #FFFFFF;
    text-decoration: none;
    padding: 1rem 0rem;
    display: block;
    text-align: center;
}

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%;
}
section {
        float: left;
        width: 27%;
        padding-right: 1em;

}
#clear {
        clear: both;
       
}
#redbar {
        background-color: #BA1C21;
        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;
        }
        nav ul{
                flex-flow: column nowrap;
        }
        #homehero{
                grid-row: 2 / 3;
                grid-column: 5 / -1;
                height: auto;
                
        }
        #studenthero{
                grid-row: 2 / 3;
                grid-column: 5 / -1;
                height: auto;

        }
        #facultyhero{
                grid-row: 2 / 3;
                grid-column: 5 / -1;
                height: auto;
        }
        section{
                float: none;
                width: 100%;
                padding-right: 0px;
        }
}
@media only screen and (max-width:600px){
        div 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;
        }
}