*{
    box-sizing: border-box;
}

body  {
background-color: #FFFFFF;
color: #666666;
font-family: verdana, arial, sans-serif;
background: linear-gradient(to bottom, #EEEEEE,#FFFFFF);
background-attachment: fixed;
    margin:0px;
            }
#wrapper  {
 display: grid;
 grid-template-rows: auto;
    grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 150px)) minmax(0px, 1fr);   
    } 
header h1 {
background-color: #BA1C21;
color: #FFFFFF;
font-family:georgia, serif;
line-height:240%;
margin:0;
padding-left:0.5rem;
     grid-row: 1 / 2;
     grid-column: 2 / 8;     
}
#redbar {
background-color: #BA1C21;
    grid-row: 1 / 2;
    grid-column: 1 / 9;
    
}
#greybar {
    background-color: #424242;
    grid-row: 2 / 3;
    grid-column: 1 / 9;  
} 
main    {
    padding-left: 2em;
padding-right: 2em; 
background-color: #FFFFFF;
    padding-top: 1px;
    padding-bottom:1px;
    grid-row: 4 / 5;
    grid-column: 2 / -2;   
}

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

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

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

}
header a:link {
    color:#FFFFFF;
    text-decoration:none; 
}
table   {
    table-layout: fixed;
}

table, td, tr, th   {
    margin: 0 auto;
    border: 1px solid #424242;
    width:100%;
    border-collapse: collapse;
    padding:5px;
}
td  {
    text-align:center;
}
text    {
   text-align: left;
}
nav {
font-weight: bold;
text-decoration: none;
position: sticky;
top:0;
    display:flex;
    background-color: #424242;
  grid-row: 2 / 3;
    grid-column: 2 / 8;
    justify-content: center;
    justify-content: space-evenly;
    
}

nav ul {
list-style-type:none;
margin:0px,0px,0px,0px;
    padding:0px,0px,0px,0px;
    display: flex;
    flex-flow: row nowrap;
}
nav ul li   {
    width: 100%;
}

nav a {
color: #FFFFFF;
padding: 1rem 0rem;
display: block;
text-decoration:none; 
padding-top:10px;
margin-left:20px;
   text-align: center;

}
nav a:hover {
    background-color: #BA1C21;
}
    
h2  {
color: #424242;
font-family: georgia, serif; }
                
dt {
color: #BA1C21;
font-weight: bold;
  }


.dsu {
color: #BA1C21;
font-size: 1.2em; 
background-position: right;
background-repeat: no-repeat;
height: 72px;
}

footer  {        
font-size: .70em;
font-style:italic;
background-color: #FFFFFF;
    padding:1rem;
    text-align:center;
    grid-row: 5 / 6;
    grid-column: 2 / 8;
}

 h3  {
color: #BA1C21;
font-family: georgia, serif; } 

.section {
    width:33%;
    padding-right:1rem;
    float:left;
}
.clear  {
    clear:both;
}

@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 {
        display:grid;
        grid-row: 2 / 3;
        grid-column: 1 / 5;
    }
    nav ul {
        flex-flow: column nowrap;
    }
    #homehero, #studenthero, #facultyhero   {
        grid-row: 2 / 3;
        grid-column: 5 / 8;
            height:auto;
        background-size: cover;
    }
    .section {
        float:none;
        width:100%;
        padding-right:0px;
    }
}

@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, #studenthero, #facultyhero   {
       display: none;
    }
}