* { 
   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;
}

#bluebar {
   background-color: #003058;
   grid-column:1/9;
   grid-row:1/2;
}

#greybar {
   background-color: #424242;
   grid-column:1/9;
   grid-row:2/3;
}

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


      header{
         grid-column:2/8;
         grid-row:1/2;
         background-color: #003058;
         color: #ffffff;
         font-family: georgia, serif;
      }

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

      header h1 {
         background-image: url("utahtechlogo.svg");
         background-position: right;
         background-repeat: no-repeat;
         line-height: 140%;
         padding-left: 1em;
         padding-top:.25em;
         padding-bottom:.25em;
         background-origin: content-box; 
         margin:0;
      }

      header h2 {
      color: #424242;
      font-family: georgia, serif;
      }
      
      header h3 {
         color: #003058;
      }

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

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

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

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

      nav ul li{
         width: 100%;
      }

      #homehero, #studenthero, #facultyhero {
         grid-column:1/9;
         grid-row:3/4;
      }

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

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

      main {
         grid-column:2/8;
         grid-row:4/5;
         background-color:#ffffff;
         padding: 0rem 2rem 0rem 2rem;
      }

      main img {
         float: right;
         padding-left: 2rem;
      }

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

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

@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-column:1/5;
      grid-row:2/3;
      position: static;
   } 

   nav ul{
      flex-flow: column nowrap;
   }

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

   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-column:1/9;
      grid-row:2/3;
   }

   #homehero, #studenthero, #facultyhero {
      display:none;
   }
}