*{box-sizing: border-box}


    
body {
background-color:#FFFFFF;
color:#666666;
font-family:Verdana, Arial, sans-serif;
background-image: linear-gradient(to bottom, #eeeeee, #ffffff );
background-attachment:fixed;
margin: 0px;

}


header {
background-color: #BA1C21;
color:#FFFFFF;
font-family: Georgia, sans-serif;
grid-row: 1/2;
    grid-column: 2/8;
    margin: 0;
}

header h1{ 
background-image: url(dsu.jpg);
background-repeat: no-repeat;
background-position:right;
padding-left: 0.5em;
height: 72px;
line-height:240%;
margin: 0;
}

header a {text-decoration: none;
color: #FFFFFF}



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

nav a{
color: #FFFFFF;
display:block;
text-decoration: none;
text-align: center;
padding: 1rem 0rem;

}

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

nav ul{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: flex;
flex-flow: row nowrap;}

nav ul li{width: 100%;

}
ul{list-style-type: none;
}

video{width: 480px;
height:  270px;
float: right;
margin-left: 2em}
#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/9;
}

#greybar{background-color: #424242;

    grid-row: 2/3;
    grid-column: 2/8;}

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


#facultyhero{
height: 300px;
background-image: url(facultyhero.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;

     grid-row: 3/4;
    grid-column: 1/9;
    }



#studenthero{
height: 300px;
background-image: url(studenthero.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;

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

     grid-row: 3/4;
    grid-column: 1/9;}

#mySubmit{width:10rem;
grid-column: 2/3}
table{margin: 0 auto;
border:1px solid #424242;
width:100%;
    border-collapse: collapse;
}

th{padding: 5px;
border:1px solid #424242}
td{padding: 5px;
border:1px solid #424242;
text-align: center}
.text{text-align: left}
tr:nth-of-type(2n+1){background-color: #F3F3F3}



main {
padding: 1px 1rem 1px 1rem;
display: block;
background-color: #FFFFFF;
grid-row: 4/5;
grid-column: 2/8;
}
section{float: left;
width: 33%;
padding-right: 1rem;
}


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


h3{
color: #BA1C21
}


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


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




.clear{clear: both}

form{display: grid;
grid-template-rows: auto;
grid-template-columns: 200px 1fr;
grid-gap: 0.75rem;
width:100%;
}
input, text area{
font-size: 1rem;
padding: 10px;
color: #666666;
    background-color: #fafafa;
    border: none;
    
        
}
input, text area:focus{outline: none;
background-color: #f0f0f0;}
label{padding: 10px;
text-align: left;}
footer{
font-size:.70em;
font-style:italic;
text-align:center;
padding: 1em;
background-color: white;
grid-row: 5/6;
grid-column: 2/-2;

}







@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
    }
        #shophero{grid-row: 2/3;
    grid-column: 5/9;
    height: auto;}
    #homehero{
    grid-row: 2/3;
    grid-column: 5/9;
    height: auto;
    }
    #studenthero{
    grid-row: 2/3;
    grid-column: 5/9;
    height: auto;
    }
    #facultyhero{
    grid-row: 2/3;
    grid-column: 5/9;
    height: auto;
    }
        #alumnihero{  grid-row: 2/3;
    grid-column: 5/9;
    height: auto;}
        section{float: none; 
        width: 100%;
            padding-right: 0px;}
    
        video{float: none;
        margin: 0 0 0 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/9;
            position: sticky;
}
 
   
        #homehero{
        display: none
        }
   #studenthero{
        display: none
        }
    #facultyhero{
        display: none
        }
    #alumnihero{display: none}
    #shophero{display: none}}}