*:root {
    --primary-color: #00356b;
    --secondary-color: #286dc0;
    --grey-color: #7e736b;
    --dark-color: #222;
    --dark-gray: #4a4a4a;
}

* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}

body {
    font-family: 'Crimson Pro', serif;

}

p {
    font-family: 'Gill Sans','Gill Sans MT',Calibri,Arial,sans-serif;
}

.logo img {
    height: 150px;
    width: 500px;
    margin-top: 35px;
}

.btn {
    display: block;
    font-family: 'Gill Sans', 'Gill Sans MT', sans-serif;
    text-decoration: none;
    padding:10px;
    margin:1px;
    text-transform: uppercase;
}

.btn.drop-down .icon {
    font-size: 0.5rem;
}

.btn-secondary {
    background-color: var(--dark-gray);
    color:white;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.container .headings h2 {
    color: #7e736b;
    font-size: 24px;
}

.container .headings h3 {
    font-family: 'Crimson Pro', serif;
    font-size: 38px;
}

.container .headings {
    margin-right: 15%;
    margin-top: 4%;
    margin-bottom: 4%;
    text-align: center;
}

.covid-banner .container h1 {
    font-family: 'Gill Sans';
}


.covid-banner {
    background-color: rgba(99,170,255,.2);
    padding: 2.5%;
}

.covid-banner h1{
    font-size: 135%;
}

.covid-banner a{
    color: black;
    font-size: 150%;
}

header {
    display: flex;
    padding: 2rem 0;
}


header .btn.btn.drop-down {
    background-color: var(--primary-color);
    color: white;
}

header .navbars {
    display: flex;
    flex-direction: column;
}

header .navbars {
    margin-left: auto;
    padding: 2%;
}

header nav {
    display: flex;
    flex-direction: row;
    margin-left:auto;
}

header nav.secondary a {
    font-size: 0.8rem;
    display:block;
    padding:1rem;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Gill Sans','Gill Sans MT',Calibri,Arial,sans-serif;
    color: var(--secondary-color)
}

header .btn-white{
    font-family: 'Gill Sans','Gill Sans MT',Calibri,Arial,sans-serif;
    border: 1px solid #ddd;
    background-color: #fff;
    color: var(--primary-color);
    position: relative;
    height: 50px;
}

header nav.main {
    display: flex;
}

header nav.main a {
    
}

header nav.main .main_nav_item {
    padding: 1rem;
}

.headings {
    padding-left: 10%;
    padding-top: 5%;
}

.main_nav_item {
    position: relative;
}

.main_nav_link {
    font-size: 1.3rem;
    text-decoration: none;
    display: block;
    color: var(--primary-color);
    position: relative;
    z-index: 5;
    box-shadow: inset 4px 0 0 transparent, inset 0 1px 0 transparent, inset -1px 0 0 transparent;
    transition: all .25s .1s;
}

.main_nav_child {
    background-color: #fff;
    display: block;
    width: 285px;
    position: absolute;
    left: 0;
    z-index: 1;
    box-shadow: inset 4px 0 0 var(--primary-color), inset 0 1px 0 #ddd, inset -1px 0 0 #ddd, inset 0 -1px 0 #ddd;
    margin-top: -1px;
    padding: 26px 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s .1s,visibility .25s .1s;
}

.main_nav_link:hover + .main_nav_child, .main_nav_child:hover {
    opacity: 1;
    visibility: visible;
}

.main_nav_item:last-child .main_nav_child {
    right: 0;
    left: auto;
    box-shadow: inset -4px 0 0 var(--primary-color), inset 0 1px 0 #ddd, inset 1px 0 0 #ddd, inset 0 -1px 0 #ddd;
}



.hero {
    display: grid;
    grid-template-rows: 60px 1fr 60px ;
    grid-template-columns: 20% 30% 25% 25% ;
}

.hero .text {
    background-color: #f9f9f9;
    grid-column: 1/3;
    grid-row: 2/3;
    z-index: 1;
    padding-top: 20%;
}

.hero .text h1{
    font-size: 250%;
}

.hero .text p {
    font-size: 150%;
}

.hero .image {
    background-color: gold;
    grid-column: 2/5;
    grid-row:1/5;
}

.hero .image img {
    width: 100%;
}

.hero .feature-archive {
    grid-row: 3;
    grid-column: 4;
    background-color:var(--grey-color);
    width: 100%;
    height: 100%;
    color: white;
    text-transform: uppercase;
    text-align: center;
    padding: 20px;
    text-decoration: none;;
}

.text {
    padding: 30px;
}


.container-grid h2 {
    text-decoration: white;
}




/*grid css*/

.large-container {
    background-color: #7e736b;
    padding-bottom: 5%;
}


.container-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    width: 1200px;
    height: 900px;
    margin: 0 auto;
    padding-top:5%;
    background-color: #7e736b;
    
  }

  
  .blank { grid-area: 1 / 1 / 3 / 4; 
    background-color: ;
}
  
  .conten1 { grid-area: 3 / 1 / 5 / 3; 
    background-image: url(./images/kevin.jpeg);
    background-size: cover;
}
  
  .content3 { grid-area: 5 / 1 / 7 / 3; /*background-image: url(./images/char-beck-5eM6sRTCCUc-unsplash.jpg);*/
    background-color: #c8ac9a;
    background-size: cover;
}
  
  .content8 { grid-area: 9 / 5 / 11 / 7; 
    background-image: url(./images/jimandpam.jpg);
    background-size: cover;
    background-color: #1b4332;
    opacity: .9;
}
  
  .content9 { grid-area: 9 / 7 / 11 / 9; 
    /*background-image: url(./images/laura-johnston-_zV74zUnwmc-unsplash.jpg);*/
    background-color: #c8ac9a;
    background-size: cover;
}
  
  .content10 { grid-area: 1 / 4 / 8 / 11; 
    background-image: url(./images/theofficeart.jpeg);
    background-size: cover;
    background-position-y: -90px;
    background-position-x: 5px;

}
  
  .content2 { grid-area: 3 / 3 / 5 / 5; 
    background-image: url(./images/angela.jpeg);
    background-size: cover;
    background-position-y: -50px;
}
  
  .content4 { grid-area: 5 / 3 / 7 / 5; 
    background-image: url(./images/stanley.png);
    background-size: cover;
    background-position-y: 
    background-color: #1b4332;;
}
  
  .content5 { grid-area: 7 / 1 / 11 / 5; 
    background-image: url(./images/dwight2.jpg);
    background-size: cover;
}

  
  .content6 { grid-area: 7 / 5 / 9 / 7; 
    background-image: url(./images/dwightinawig.jpeg);
    background-size: cover;
}
  
  .content7 { grid-area: 7 / 7 / 9 / 9; 
    background-image: url(./images/asianjim.jpeg);
    background-size: cover;
    background-position-y: -40px;;
}
  
  .blank2 { grid-area: 8 / 9 / 11 / 11; 
    background-color: #7e736b;
}
  /* For presentation only, no need to copy the code below */
  
  .container-grid * {
    border: 1px transparent;
    position: relative;
  }
  
  .container-grid *:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    align-items: center;
    justify-content: center;
  }

  .container-grid h1 {
      color: white;
      text-shadow: 0px 0px 9px #000000;
      text-align: center;
      padding-top: 15%;
      font-size: 350%;
  }

  .container-grid p {
    color: white;
    text-shadow: 0px 0px 9px #000000;
    text-align: center;
    padding-top: 5%;
    font-size: 24px;
    font-family: 'Crimson Pro', serif;
    padding-left: 10%
}

  .container-grid h2 {
      color: white;
      text-shadow: 0px 0px 9px #000000;
      vertical-align: text-bottom;
      padding: 2%;
      padding-left: 5%;
  }
   /* Footer */

   .footer-cell {
    background-color: #222;
   }

   .footer-cell h2 {
       color: #63aaff;
   }

   .footer-cell a {
       color: white;
   }

   .flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: stretch;
    align-content: normal;
    padding: 2%;
    font-size: 5.25 rem;
  }
  
  .flex-items:nth-child(1) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }
  
  .flex-items:nth-child(2) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }
  
  .flex-items:nth-child(3) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }

  .flex-items li {
      color: white;
      list-style: none;
      margin: 1.5rem;
  }

  .flex-items h2 {
      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  }