:root {
  --menu-speed: 0.75s;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body  {
    max-width: 95%;
    height: 100vh;
    margin: 0 auto;
    padding: 10px 30px;
    font-family: times, helvetica;
    color: #000;
    background-color: #ddd;
}
.grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(5, auto);
    grid-gap: 10px 0;
    grid-template-areas:
    "title title title title title title"
    "banner banner banner banner banner banner"
    "img1 img1 article1 article1 article1 article1"
    "articlea articlea articlea articlea articlea articlea"
    "article2 article2 article2 article3 article3 article3"
    "footer footer footer footer footer footer";
}
.span-col-6{
    grid-column: span 6 / auto;
    /*border: 1px solid black;*/
    }
.span-col-3{
    grid-column: span 3 / auto;
}
.span-col-2{
    grid-column: span 2 / auto;
}
/* MENU STYLES */
.menu-wrap {
  position: fixed;
  /*display: grid;
  grid-column: 1/2;
  grid-row: 1/2;
  grid-area: nav;*/
  z-index: 1;
}
.menu-wrap .toggler {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  cursor: pointer;
  width: 50px;
  height: 50px;
  opacity: 0;
}
.menu-wrap .hamburger {
  position: absolute;
  z-index: 1;
  width: 40px;
  height: 50px;
  padding: .8rem;
  background-color: #444;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Hamburger Line */
.menu-wrap .hamburger > div {
  position: relative;
  flex: none;
  width: 100%;
  height: 2px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -10px;
  width: 100%;
  height: 2px;
  background: inherit;
}
/* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 10px;
}
/* Toggler Animation */
.menu-wrap .toggler:checked + .hamburger > div {
  transform: rotate(135deg);
}
/* Turns Lines Into X */
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after {
  top: 0;
  transform: rotate(90deg);
}
/* Show Menu */
.menu-wrap .toggler:checked ~ .menu {
  visibility: visible;
}
.menu-wrap .toggler:checked ~ .menu > div {
  transform: scale(1);
  transition-duration: var(--menu-speed);
}
.menu-wrap .toggler:checked ~ .menu > div > div {
  opacity: 1;
  transition:  opacity 0.3s ease 0.3s;
}
.menu-wrap .menu {
  position: fixed;
  top: 0;
  left: 50px;
  width: 20%;
  height: 50%;
  visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-wrap .menu > div {
  background-color: #444;
  border-radius: 50%;
  width: 87vw;
  height: 100vw;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  transition: all 0.3s ease;
}
.menu-wrap .menu > div > div {
  text-align: right;
  max-width: 90vw;
  max-height: 100vh;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.menu-wrap .menu > div > div > ul > li {
  list-style: none;
  color: #fff;
  line-height: 1.1rem;
  font-size: 1.2rem;
  padding: .7rem 0 .7rem 2rem;
}
.menu-wrap .menu > div > div > ul > li > a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.3s ease;
}
.title  {
    display: grid;
    grid-column: 1/7;
    grid-row: 1/2;
    grid-area: title;
    margin: 0;
    width: 100%;
    min-height: 80px;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #afafb5;
    border: 1px solid black;
}
.title a  {
    color: #000;
    text-decoration: none;
}
#fs1  {
    font-size: 1.5rem;
    color: #222;
    font-weight: bold;
    text-align: center;
}
.highlight  {
    font-size: 2.5rem;
    font-weight: bold;
}
.highlight a:hover {
    color:#ffa;
}
.banner  {
    display: grid;
    grid-column: 1/7;
    grid-row: 2/3;
    grid-area: banner;
    font-size: 1.8rem;
    font-weight: bold;
    padding: 10px 0;
    color: black;
    background-color: #bfbfbf;
    text-align: center;
    justify-content: center;
    align-items: center;
    border: 2px solid black;
}
.img1  {
    display: grid;
    grid-column: 1/3;
    grid-row: 3/4;
    grid-area: img1;
    /*padding-top: 3rem;*/
    background-color: #eee;
}
.responsive  {
    width: 100%;
    height: auto;
}
.article1  {
    display: grid;
    grid-column: 3/7;
    grid-row: 3/4;
    grid-area: article1;
    text-align: center;
    color: #000;
    font-size: 1.2rem;
    font-weight: bold;
    background-color: #eee;
    padding: 1.5rem 1.5rem .5rem 1.5rem;
}
h2 {
    padding-top: 1.6rem;
    font-size: 2rem;
}
.article1 p, .articlea p {
    font-size: 1.15rem;
    font-weight: 400;
    text-align: justify;
    padding: 1rem 4rem 1rem 4rem;
    margin: 0 auto;
}
.article1 p a {
    text-decoration: none;
}
.articlea  {
    display: grid;
    grid-column: 1/7;
    grid-row: 4/5;
    grid-area: articlea;
    background-color: #eee;
    padding: 0 1rem .5rem 1rem;
}
.articlea a  {
    text-decoration: none;
}
.article2  {
    display: grid;
    grid-column: 1/4;
    grid-row: 5/6;
    grid-area: article2;
    color:#000;
    width: 100%;
    text-align: center;
    justify-content: center;
    background-color: #ccc;
    border: 1px solid #333;
    margin: 0;
}
h1  {
    font-size: 2.2rem;
    font-weight: bold;
    padding-top: 1rem;
}
table  {
    justify-content: center;
    align-items: center;
    width: 100%;
    max-height: 300px;
}
th, td  {
    text-align: left;
}
th  {
    font-size: 20px;
    font-weight: bold;
    padding: 10px 0;
    text-decoration: underline;
}
td  {
    font-size: 1rem;
    font-weight: bold;
    align-items: center;
    padding: .4rem .4rem;
}
tr:nth-child(even){
    margin: 0 auto;
    background-color: #eee;
}
tr:nth-child(odd){
    margin: 0 auto;
    background-color: #bbb;
}
.article3  {
    display: grid;
    grid-column-end: 4/7;
    grid-row: 5/6;
    grid-area: article3;
    text-align: center;
    color: #000;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 1.3rem;
    background-color: #bbb;
    border: 1px solid #333;
}
.p1   {
    font-size: 1.2rem;
    padding-top: 1.8rem;
}
.h4  {
    font-size: 1.3rem;
    padding-bottom: 1.2rem;
}
footer  {
    display: grid;
    grid-column: 1/7;
    grid-row: 7/8;
    grid-area: footer;
    align-items: center;
    justify-content: center;
}
.bottom  {
    color: #fff;
    background-color: #222;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    padding: 1.2rem;
    width: 100%;
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
body {
    width: 100%;
    max-height: 100vh;
    margin: 0 auto;
    font-family: times, helvetica;
    padding: 0;
    background-color: #ddd;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.grid {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas:
    "title"
    "banner"
    "img1"
    "article1"
    "articlea"
    "article2"
    "article3"
    "footer"
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.menu-wrap {
  position: fixed;
  display: grid;
  grid-column: 1/2;
  grid-row: 1/2;
  grid-area: nav;
  z-index: 1;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.menu-wrap .toggler {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  cursor: pointer;
  width: 50px;
  height: 50px;
  opacity: 0;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.menu-wrap .menu {
  position: fixed;
  top: 0;
  left: 10px;
  width: 40%;
  height: 55%;
  visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.menu-wrap .menu > div {
  background-color: #444;
  border-radius: 30%;
  width: 87vw;
  height: 80vw;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  transition: all 0.3s ease;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.menu-wrap .menu > div > div {
  text-align: right;
  max-width: 90vw;
  max-height: 100vh;
  opacity: 0;
  transition: opacity 0.3s ease;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.menu-wrap .menu > div > div > ul > li {
  list-style: none;
  color: #fff;
  line-height: 1.1rem;
  font-size: 1.1rem;
  padding: .7rem 0 .7rem 2rem;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.menu-wrap .menu > div > div > ul > li > a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.3s ease;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.title  {
    display: grid;
    grid-column: 1;
    grid-row: 2;
    grid-area: title;
    margin: 0;
    min-width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #afafb5;
    border: 1px solid black;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.highlight  {
    font-size: 1.6rem;
    font-weight: bold;
    padding: 0 20px;
}
}*/
@media only screen and (min-width: 415px) and (max-width: 800px) {
.title a  {
    color: #000;
    text-decoration: none;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
#fs1  {
    font-size: 1.1rem;
    color: #222;
    padding: 10px 0;
    font-weight: bold;
    text-align: center;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.img1 {
    display: grid;
    grid-row: 3/4;
    grid-column: 1/3;
    grid-area: img1;
    justify-content: center;
    padding: 0 1rem 0 3.5rem;
    background-color: #ddd;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.responsive  {
    width: 80%;
    height: auto;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.article1  {
    display: grid;
    grid-area: article1;
    text-align: center;
    color: #000;
    font-size: 1rem;
    font-weight: bold;
    background-color: #eee;
    padding: .5rem 1.5rem .5rem 1.5rem;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
h2 {
    padding-top: 1.6rem;
    font-size: 2rem;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.article1 p, .articlea p {
    font-size: 1.15rem;
    font-weight: 400;
    text-align: justify;
    padding: 1rem 1rem 1rem 1rem;
    margin: 0 auto;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.article1 p a {
    text-decoration: none;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.articlea  {
    display: grid;
    grid-area: articlea;
    background-color: #eee;
    padding: 0 1rem .5rem 1rem;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.articlea a  {
    text-decoration: none;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.article2  {
    display: grid;
    grid-area: article2;
    color:#000;
    width: 100%;
    text-align: center;
    justify-content: center;
    background-color: #ccc;
    border: 1px solid #333;
    margin: 0;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
h1  {
    font-size: 2.2rem;
    font-weight: bold;
    padding-top: 1rem;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
table  {
    justify-content: center;
    align-items: center;
    width: 100%;
    max-height: 300px;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
th, td  {
    text-align: left;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
th  {
    font-size: 1.2rem;
    font-weight: bold;
    padding: 10px 5px;
    text-decoration: underline;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
td  {
    font-size: 1rem;
    font-weight: bold;
    align-items: center;
    padding: .4rem .4rem;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
tr:nth-child(even){
    margin: 0 auto;
    background-color: #eee;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
tr:nth-child(odd){
    margin: 0 auto;
    background-color: #bbb;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.article3  {
    display: grid;
    grid-area: article3;
    text-align: center;
    color: #000;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 1.3rem;
    background-color: #bbb;
    border: 1px solid #333;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.p1   {
    font-size: 1.2rem;
    padding-top: 1.8rem;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.h4  {
    font-size: 1.3rem;
    padding-bottom: 1.2rem;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.bottom  {
    color: #fff;
    grid-area: footer;
    background-color: #222;
    font-size: 1.1rem;
    font-weight: bold;
    margin-top: 5px;
    text-align: center;
    padding: .5rem;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
body {
    width: 100%;
    max-height: 100vh;
    margin: 0 auto;
    font-family: times, helvetica;
    padding: 0;
    background-color: #ddd;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
    grid-gap: 10px 0;
    grid-template-areas:
    "title title title title title title"
    "banner banner banner banner banner banner"
    "img1 img1 img1 article1 article1 article1"
    "articlea articlea articlea articlea articlea articlea"
    "article2 article2 article2 article3 article3 article3"
    "section4 section4 section4 section5 section5 section5"
    "footer footer footer footer footer footer";
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.menu-wrap {
  position: fixed;
  display: grid;
  grid-column: 1/2;
  grid-row: 1/2;
  grid-area: nav;
  z-index: 1;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.menu-wrap .hamburger {
  position: absolute;
  z-index: 1;
  width: 40px;
  height: 40px;
  padding: .8rem;
  background-color: #444;
  display: flex;
  align-items: center;
  justify-content: center;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.menu-wrap .menu {
  position: fixed;
  top: 0;
  left: 38px;
  width: 20%;
  height: 24%;
  visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.menu-wrap .menu > div {
  background-color: #444;
  border-radius: 10%;
  width: 25vw;
  height: 30vw;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  transition: all 0.3s ease;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.menu-wrap .menu > div > div {
  text-align: right;
  max-width: 90vw;
  max-height: 100vh;
  opacity: 0;
  transition: opacity 0.3s ease;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.menu-wrap .menu > div > div > ul > li {
  list-style: none;
  color: #fff;
  line-height: 1.1rem;
  font-size: 1.1rem;
  padding: .7rem 0 .7rem 2rem;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.menu-wrap .menu > div > div > ul > li > a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.3s ease;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.img1 {
    background-color: #ddd;
    /*margin-top: 30px;*/
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.responsive  {
    width: 100%;
    height: auto;
    margin-top: 80px;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.title  {
    display: grid;
    grid-column: 1;
    grid-row: 2;
    grid-area: title;
    margin: 0;
    min-width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #afafb5;
    border: 1px solid black;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
#fs1  {
    font-size: 1.3rem;
    color: #000;
    font-weight: bold;
    text-align: center;
    padding: .7rem .7rem;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.article1  {
    display: grid;
    grid-area: article1;
    text-align: center;
    color: #000;
    font-size: 1rem;
    font-weight: bold;
    background-color: #ddd;
    padding: .5rem 1.5rem .5rem 1.5rem;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.articlea  {
    display: grid;
    grid-area: articlea;
    background-color: #ddd;
    padding: 0 1rem .5rem 1rem;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.article1 p, .articlea p {
    font-size: 1rem;
    font-weight: 400;
    text-align: justify;
    padding: 1rem 1rem 1rem 1rem;
    margin: 0 auto;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.bottom  {
    color: #fff;
    grid-area: footer;
    background-color: #222;
    font-size: 1.1rem;
    font-weight: bold;
    margin-top: 5px;
    text-align: center;
    padding: 1rem 1.5rem;
}
}