body {
     background-color: lightgrey;
     width: 100%;
     height: 800px;
     font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
     font-family: Arial, sans-serif;
     margin: 0px;
}

.wrapper {
     margin: 0px auto;
     display: grid;
     grid-area: wrapper;
     height: auto;
     width: 100%;
     width: minmax(300px, 1200px);
     grid-template-rows: 300px auto 260px;
     grid-template-areas:
          "header"
          "container"
          "footer";
     place-items: center;
     padding: 0px;
}

header {
     background-image: url("..//images/banner.png");
     background-position: left top;
     background-size: cover;
     background-repeat: no-repeat;
     display: grid;
     border: 0px;
     margin: 0px;
     padding: 0px;
     width: 100%;
     max-width: 1100px;
     border-radius: 20px;
     height: auto;
     text-align: left;
     grid-template-columns: 100%;
     grid-template-rows: 150px 100px;
     grid-template-areas:
          "logo"
          "menu-icon";
     place-items: center;
}

.logo a {
     background-repeat: no-repeat;
     background-position: center center;
     background-image: url("..//images/ehfs-w-logo.png");
     background-size: cover;
     width: 300px;
     height: 100px;
     display: grid;
}

.menu-icon {
     width: 50px;
     height: 50px;
     right: 80px;
     display: grid;
     place-items: center;
     cursor: pointer;
     z-index: 10;
}

.bar {
     width: 50px;
     height: 3px;
     background-color: white;
     transition: transform 0.3s ease, opacity 0.3s ease;
}

.menu-icon.active .bar:nth-child(1) {
     transform-origin: middle;
     transform: rotate(45deg) translate(0px, 23px);
}

.menu-icon.active .bar:nth-child(2) {
     opacity: 0;
}

.menu-icon.active .bar:nth-child(3) {
     transform-origin: middle;
     transform: rotate(-45deg) translate(0px, -23px);
}

.menu-content {
     height: 200px;
     display: none;
     position: absolute;
     right: 150px;
     top: 30px;
     background: rgb(50, 60, 80, .4);
     color: white;
     border: 1px solid #ccc;
     z-index: 9;
}

.menu-content a {
     display: block;
     color: white;
     padding: 5px;
     text-decoration: none;
}

.menu-content a:hover {
     background-color: palegreen;
     color: darkgreen;
}


.container {
     display: grid;
     height: auto;
     width: 100%;
     max-width: 1100px;
     grid-template-rows: 50px auto;
     grid-template-areas:
          "ttle"
          "boxes";
     column-gap: 20px;
}


.ttle {
     display: grid;
     width: 100%;
     height: 50px;
     place-items: center;
}

.boxes {
     padding: 30px 0px 30px 0px;
     height: auto;
     display: grid;
     row-gap: 20px;
     column-gap: 20px;
     grid-template-columns: repeat(auto-fill, 320px);
     grid-template-rows: 600px;
     place-content: space-around;
}

.box {
     height: 600px;
     width: 320px;
     display: grid;
     grid-template-columns: 320px;
     grid-template-rows: 500px 100px;
     grid-template-areas:
          "upper"
          "desc";
}

.box:hover {
     transition: 0.2s ease-in-out;
     transform: scale(1.05) skewX(-2deg) skewY(2deg);
     box-shadow: 10px 10px 6px rgba(0, 0, 0, 0.8);
}

.big-picture {
     height: auto;
     width: 100%;
     display: block;
}

.upper {
     height: 500px;
     width: 100%;
     display: grid;
     border: 0.5px solid grey;
     border-radius: 20px;
}

.desc {
     height: 100px;
     width: 320px;
     display: grid;
     border: 0.5px solid grey;
     border-radius: 20px;
     background-color: gray;
     color: white;
     place-items: center;
}

.pic {
     display: none;
}

footer {
     height: auto;
     width: 100%;
     display: grid;
     grid-template-rows: repeat(3, 40px);
     row-gap: 20px;
     grid-template-columns: 50% 50%;
     grid-template-areas:
          "key-people key-contacts"
          "item1 item2"
          "bjt  bjt";
     background-image: url("../aboutus-images/river-below-bridge.png");
     background-position: bottom;
     text-align: center;
     font-size: 16px;
     place-items: center;
     border: 1px solid black;
     border-radius: 20px;
}

.key-contacts a,
.key-contacts,
.key-people {
     color: white;
     text-align: left;
     height: 40px;
     display: grid;
     grid-area: key-contacts;
     justify-items: center;
     align-items: center;
}

.key-people a,
.key-people {
     display: grid;
     grid-area: key-people;
     text-decoration: none;
     color: white;
}

.item1,
.item1 a,
.item2 {
     color: white;
     text-align: left;
     height: 1fr;
     display: grid;
     grid-area: item1;
     justify-items: center;
     align-items: center;
     font-size: 14px;
     height: 22px;
     cursor: pointer;
     text-decoration: none;
     color: white;
}

.item2 a,
.item2 {
     display: grid;
     grid-area: item2;
     text-decoration: none;
     color: white;
}

.bjt {
     height: 40px;
     display: grid;
     grid-area: bjt;
     justify-items: center;
     align-items: center;
     font-size: 12px;
     color: white;
}


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

     body {
          max-width: 420px;
          height: 720px;
          font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
          margin: 0px auto;
     }

     .wrapper {
          margin: 0px auto;
          display: grid;
          grid-area: wrapper;
          height: auto;
          max-width: 940px;
          grid-template-columns: 100%;
          grid-template-rows: 300px auto 260px;
          grid-template-areas:
               "header"
               "container"
               "myfooter";
          place-items: center;
          padding: 0;
     }

     .container {
          display: grid;
          height: auto;
          max-width: 420px;
          grid-template-columns: 100%;
          grid-template-rows: 50px auto;
          grid-template-areas:
               "ttle"
               "boxes";
     }

     .ttle-lne {
          display: none;
     }

     .boxes {
          height: auto;
          width: 100%;
          border: 0;
          display: grid;
          grid-area: boxes;
          grid-template-columns: 100%;
          grid-template-rows: auto;
          grid-template-areas:
               "box";
          row-gap: 20px;
          place-items: center;
          pointer-events: none;
     }

     footer {
          height: 300px;
          width: 100%;
          max-width: 420px;
          border-radius: 20px;
          display: grid;
          row-gap: 10px;
          grid-template-rows: 40px 40px 40px 40px 40px;
          grid-template-columns: 100%;
          grid-template-areas:
               "key-people"
               "key-contacts"
               "item1"
               "item2"
               "bjt";
          background-color: gray;
          font-size: 16px;
          place-items: center;
     }

     .key-contacts a,
     .key-contacts,
     .key-people {
          height: 50px;
          color: white;
          display: grid;
          grid-area: key-contacts;
          place-items: center;
          font-size: 18px;
          text-decoration: none;
     }

     .key-people a,
     .key-people {
          display: grid;
          grid-area: key-people;
     }

     .item1 a,
     .item1,
     .item2 {
          height: 40px;
          padding: 0;
          color: white;
          display: grid;
          grid-area: item1;
          place-items: center;
          font-size: 18px;
          text-decoration: none;
     }

     .item2 a,
     .item2 {
          display: grid;
          grid-area: item2;
          place-items: center;
     }

     .item1 a:hover {
          background-color: gray;
          color: black;
     }

     .item2 a:hover {
          background-color: gray;
          color: black;
     }

     .bjt {
          width: 100%;
          height: 40px;
          padding: 0% 0% 0% 0%;
          text-align: center;
          display: grid;
          grid-area: bjt;
          justify-items: center;
          align-items: center;
          font-size: 12px;
          color: white;
     }
}