*{
    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 {
color: #FFFFFF;
font-family:georgia, serif;
line-height:240%;
margin:0;
padding-left:0.5rem;
     background-color: #BA1C21;
}
header  {
    grid-column: 2 / -2;
    grid-row: 1 / 2;
    order:1;
}
#redbar {
    grid-row: 1 / 2;
    grid-column: 1 / -1;
    background-color: #BA1C21;
}
#greybar {
    background-color: #424242;
    grid-row: 2 / 3;
    grid-column: 1 / -1;  
} 
form    {
    display:grid;
    width:100%;
    grid-template-rows: auto;
    grid-template-columns: 200px 1fr;
    grid-gap: 0.75rem;  
}
textarea, input {
    font-size: 1rem;
    padding:10px;
    color:#666666;
    background-color:#fafafa;
    border:none;
}
main a:focus   {
    outline: none;
    background-color: #f0f0f0;   
}
label   {
    padding:10px;
    text-align: right;
    float:left;
}
#mySubmit {
    width:10rem;
    grid-column: 2 / 3;   
}
#alumnihero {
    background-image: url("images/alumnihero.jpg");
height: 300px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
    grid-row: 3 / 4;
    grid-column: 1 / 9;   
}
video   {
    float:right;
    margin-left:2em;
    width:480px;
    height:270px;
    
}
main    {
    padding-left: 2em;
padding-right: 2em; 
background-color: #FFFFFF;
    padding-top: 1px;
    padding-bottom:1px;
    grid-row: 4 / 5;
    grid-column: 2 / -2;   
}
#shophero   {
    background-image: url("images/shophero.jpg");
height: 300px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
    grid-row: 3 / 4;
    grid-column: 1 / 9;
}

#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;
}
tr:nth-of-type(2n+1)  {
    background-color:#F3F3F3;
}
td  {
    text-align:center;
}
th  {
    background-color:#fff;
}
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 / -2;
    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;
     transition: background-color 0.5s;

}
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;
        float:none;
        margin:0 auto;
        width:100%;
        height:auto;
    }
    nav ul {
        flex-flow: column nowrap;
    }
    #homehero, #studenthero, #facultyhero, #alumnihero, #shophero   {
        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;
        float:none;
        margin:0 auto;
        width:100%;
        height:auto;
    }
    nav {
        grid-row: 2 / 3;
        grid-column: 1 / 9;
    }
    #homehero, #studenthero, #facultyhero, #alumnihero, #shophero   {
    display: none; }