body {
      background-color:#FFFFFF;
      color:#666666;
      font-family: Verdana, Arial;
      background: linear-gradient(#eeeeee, #ffffff);
        background-attachment: fixed;
        margin:0px;
    }
   header {
     background-color:#BA1C21;
      color:#FFFFFF;
     font-family:Georgia;
     grid-row:1/2;
        grid-column:2/-2;

   }

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

video{
  float:right;
  margin-left: 2em;
}
header a{ text-decoration: none;
  font-color:#FFFFFF;}

    h3{color: #BA1C21;}

    nav{
      background-color: #424242;
      margin-bottom: 0px;
      margin-top:0px;
      font-weight: bold;
     position: sticky;
      top:0px;
      grid-row:2/3;
        grid-column:2/-2;
        text-align:center;
      display:inline-block;
    }
  nav a{ color:#FFFFFF;
        text-decoration: none;
       padding: 1em 0;
        display: block;
        transition: background-color 0.5s ease;
    }

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

  nav ul li {width: 100%;}

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

  .homehero header,main,footer{
    margin-left: 150px;
  }

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

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

      .dsu {color:#BA1C21;
      font-size: 1.2em;
      padding:1em;
    }
     main{ padding-left:0em;
        padding-right:0em;
        display:block;
        background-color: #FFFFFF;
        padding-top: 2px;
        padding-bottom: 1px;
        grid-row:5/6;
        grid-column:2/-2;
}

* { box-sizing: border-box; }

     #wrapper {
      display:grid;
      grid-auto-rows:minmax(0px,auto);
      grid-template-columns:minmax(0px,1fr)minmax(0, 175px)
      minmax(0, 175px)minmax(0, 175px)minmax(0, 175px)
      minmax(0, 175px)minmax(0, 175px)minmax(0px, 1fr);

      }

      #redbar{background-color: #BA1C21;
        grid-row:1/2;
        grid-column:1/-1; }

      #greybar{background-color: #424242;

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

      footer{font-size: .70em;
      text-align: center;
      font-style: italic;
      background-color: #FFFFFF;
      ;}

    .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 { 
      background-image:url("studenthero.jpg");
        height: 300px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      grid-row:3/4;
        grid-column:1/-1;
      }

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

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

.shophero { 
        background-image:url("shophero.jpg");
        height: 300px;
        background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      grid-row:3/4;
        grid-column:1/-1;
    }
label, input, select, option, textarea {
  font-size: 1rem;
  padding:10px;
  color:#666666;
  background-color:#fafafa;
  border:none;
}

form{
  display:grid;
  grid-template-rows: auto;
  grid-template-columns: 200px 1fr;
  grid-gap: .75rem;
  width:100%
}

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

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

label{
padding:10px;
text-align:right;
}

input[type=submit]{
  width:10rem;
  grid-column:2/3;
}

    table, tr, td, th{
      border: 1px solid #424242;
      border-collapse: collapse;
      }
table{width:100%;}

     th,td {padding:5px; border:1px #424242;}


      th{text-align: center;}

      .text{text-align: left;}

      tr:nth-of-type(2n+1){background-color:#F3F3F3;}

      @media{
      section { float:left;
      width:33%;
      padding-right: 1rem; }}

      .clear{ clear:both; }

@media only screen and (max-width: 1100px){

.wrapper{grid-template-columns:minmax(0, 150px)minmax(0, 150px)
  minmax(0, 150px)minmax(0, 150px)minmax(0, 150px)minmax(0, 150px);}
}

@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/8;
        height:auto;
  }
  .studenthero{grid-row:2/3;
        grid-column:5/8;
      height:auto;
    }
  .facultyhero{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;}
video{float:none;
margin:0;
width: 100%;
height: auto;
}
    section{ float:none;
    width:100%;
    padding-right: 0px}
}
@media only screen and (max-width: 600px){
  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}
  .alumnihero{display: none}
  .shophero{display: none}
}