body {
   
      background-color:#ffffff; 
      color:#666666;
      font-family:arial, sans-serif;
      background-attachment: fixed;
      background: linear-gradient(to bottom, #eeeeee, #ffffff);
      margin: 0;
      
     }

#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-column: 1 / -1;
         grid-row: 1/2;
         }
#greybar {
          background-color: #424242;
          grid-row: 2/3;
          grid-column: 1 / 9;
          }


h1    {
       background-image: url("dsu.jpg");
       background-position: right;
       background-repeat: no-repeat;
       padding-left: 0.5em;
       padding-left: 70px;
       background-color:#BA1C21;color:#ffffff;
       line-height:240%;
       font-family:Georgia, sans-serif;
       margin: 0;
       margin-bottom: 0;
       grid-row: 1/2;
       grid-column: 2 / 8;

}

h1 a { color: #ffffff;
         text-decoration: none;
         } 


nav   {
   
      
      
      background-color: #424242;
      grid-row: 2/3;
      grid-column: 2 / 8;
    
      font-weight: bold;
      position: sticky;
      top: 0;
     
      }


h2    {
       color:#424242; font-family:Georgia, sans-serif;
       }


dt    {
      color:#BA1C21;
      font-weight:bold;
}

.dsu  {
      color:#BA1C21;
      font-size:1.2em;
}

footer {
        padding: 2em;
        font-size:.70em; 
        font-style:italic;
        text-align:center;
        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;
       grid-row: 4/5;
       grid-column: 2/8;
       padding-top: 1px;
       padding-bottom: 1px;
      }

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

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

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

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

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

  nav a { text-decoration: none; }

* { Box-sizing: border-box; }

nav a 
      { 
       transition: background-color 0.5s ease-out;
       color: #ffffff; 
       padding: 1rem 0rem;
       display: block;
       text-align: center;

        }
nav a:hover { background-color: #BA1C21; }

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

.section1 
         { float: left;
            width: 33%;
            padding-left: 1rem;
          
          }
.section2 {
           margin-left: 350px;
           margin-top: 38px;
          
          width: 35%;
          padding-right: 1rem;
          }
  
.section3 { float:right; 
             width: 35%; 
           padding-right: 1rem; }

.clear  { clear: both; }

video {
       float: right;
       margin-left: 2em;
      }


table {
         margin: 0 auto;
         width: 100%;
         border-collapse: collapse;
        
         
      }

 tr,td { 
       
       border: 1px solid #424242;
       padding: 5px;
       text-align: center;
       
       }


.text {
       text-align: left;
      }
    tr:nth-of-type(odd) {

                      background-color: #F3F3F3;
                         }

#color { background-color: #ffffff; }

form {
       display: grid;
       grid-auto-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;
                        padding-spacing: 0;
                        margin-top: 1em;
                        margin-left: 100px;
                        }
                        
                        
                        
label {
       padding:10px;
       text-align: right;
       font-size: 1rem;
       grid-column: 1/ 2;
       width:300px;
       margin-right: 10px;
       margin-top:1em; 
       
      }

       
      

        

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

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



     


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



#facultyhero {
             grid-row: 2/3;
             grid-column: 5/8;
             height: auto;
             }

#studenthero {
             grid-row: 2/3;
             grid-column: 5/8;
             height: auto;
             }

#homehero  {
             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;
            }
                                        
  
.section3 { 
           float:none;
           width: 100%;
           padding-right: 0;
           }                                
        


.section2 { 
           float: none;
            width: 100%;
           padding-right: 0;
           }                  

.section1 { 
           float: none;
           width: 100%;
           padding-right: 0;
           }  
video {
       float: none;
       margins: 0;
       width: 100%;
       height: auto;            
       }     
@media only screen and (max-width: 600px) {
 h1 {
            background-image: none;
            text-align: center;
            }
nav {
      grid-row: 2/3;
      grid-column: 1 / 9;
     }



       
 #facultyhero {
              display:none;
             }

#studenthero {
              display:none;
             }

            
#homehero     {
              display:none;
              background-image: none;
              } 

 #alumnihero {
              display:none;
              background-image: none;
              } 

#shophero    {
              display:none;
              background-image: none;
             }
}