.w3l-top-menu-4 header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-bottom: 15px;
}
.w3l-top-menu-4 h3{
    margin-left: 58px;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
}

.w3l-top-menu-4 header menu menu span {
  display: block;
}

.w3l-top-menu-4 header menu menuitem > .heading {
  font-weight: bold;
}

.w3l-top-menu-4 header input[type="checkbox"],
.w3l-top-menu-4 header input[type="reset"] {
  display: none !important;
}

.w3l-top-menu-4 header > nav span { cursor: default; }

.w3l-top-menu-4 header nav,
.w3l-top-menu-4 header nav nav {
  font-size: 14px;
  height: 80vh;
  padding-top: 18px;
  position: absolute;
  top: 0;
  transition: transform .8s ease-in-out;
  width: 299px;
  z-index: 999;
}

.w3l-top-menu-4 header nav.left-navigation,
.w3l-top-menu-4 header nav.left-navigation nav {
  background: #ffffff;
  left: 0;
  transform: translateX(-300px);
}

.w3l-top-menu-4 header nav.right-navigation,
.w3l-top-menu-4 header nav.right-navigation nav {
  background: #F6EA53;
  right: 0;
  transform: translateX(300px);
}

.w3l-top-menu-4 header nav > main,
.w3l-top-menu-4 header nav nav > main {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
    padding: 0 20px;
    width: 95%;

}

.w3l-top-menu-4 header nav label {
  cursor: pointer;
  font-weight: normal;
  margin: 0;
}
.w3l-top-menu-4 header nav label:focus { outline: none; }

.w3l-top-menu-4 header nav label.menu-close,
.w3l-top-menu-4 header nav label.menu-toggle {
  display: block;
  height: 50px;
  line-height: 0;
  padding: 0;
  position: absolute;
  text-indent: -9999px;
}

.w3l-top-menu-4 header nav.left-navigation label.menu-close,
.w3l-top-menu-4 header nav.left-navigation label.menu-toggle {
  background: none;
  right: -55px;
  width: 42px;
}

.w3l-top-menu-4 header nav.right-navigation label.menu-close,
.w3l-top-menu-4 header nav.right-navigation label.menu-toggle {
  background: #F6EA53;
  right: 300px;
}

.w3l-top-menu-4 header nav label.menu-close>span:after,
.w3l-top-menu-4 header nav label.menu-close>span:before,
.w3l-top-menu-4 header nav label.menu-toggle>span,
.w3l-top-menu-4 header nav label.menu-toggle>span:after,
.w3l-top-menu-4 header nav label.menu-toggle>span:before {
    background: #00abd1;
    display: block;
    height: 2px;
    pointer-events: none;
    transition: transform .4s ease-in-out,background-color .4s ease-in-out 0s;
    width: 22px;
}

.w3l-top-menu-4 header nav label.menu-close>span.menuback:after,
.w3l-top-menu-4 header nav label.menu-close>span.menuback:before,
.w3l-top-menu-4 header nav label.menu-toggle>span.menuback,
.w3l-top-menu-4 header nav label.menu-toggle>span.menuback:after,
.w3l-top-menu-4 header nav label.menu-toggle>span.menuback:before {
  background: #5f6266 !important;
  display: block;
  height: 3px;
  pointer-events: none;
  transition: transform .4s ease-in-out,background-color .4s ease-in-out 0s;
  width: 20px;
}


.w3l-top-menu-4 header nav label.menu-close>span,
.w3l-top-menu-4 header nav label.menu-toggle>span {
  display: block;
  margin-left: 15px;
  margin-top: 50%;
  position: relative;
}

.w3l-top-menu-4 header nav label.menu-close>span:after,
.w3l-top-menu-4 header nav label.menu-close>span:before,
.w3l-top-menu-4 header nav label.menu-toggle>span:after,
.w3l-top-menu-4 header nav label.menu-toggle>span:before {
  content: "";
  position: absolute;
  transform: rotate(0) translateY(0);
}

.w3l-top-menu-4 header nav label.menu-close {
  margin-top: -10px;
  opacity: 0;
  transition: all .4s ease-in;
}

.w3l-top-menu-4 header nav label.menu-close>span:after {
  transform: rotate(45deg);
}
.w3l-top-menu-4 header nav label.menu-close>span:before {
  transform: rotate(-45deg);
}

.w3l-top-menu-4 header nav label.menu-toggle { margin-top: -18px; }

@media (min-width: 800px) {
  .w3l-top-menu-4 header nav label.menu-toggle { margin-top: 25px; }
}

.w3l-top-menu-4 header nav label.menu-toggle>span:after {
  transform: translateY(6px);
}
.w3l-top-menu-4 header nav label.menu-toggle>span:before {
  transform: translateY(-6px);
}

.w3l-top-menu-4 header nav menu {
  margin: 0;
  padding: 0;
}
.w3l-top-menu-4 header nav menu menuitem {
  display: block;
  list-style: none;
}
.w3l-top-menu-4 header nav menu menuitem + menuitem {
  border-top: 1px solid #AAA;
}
.w3l-top-menu-4 header nav menu menuitem > a,
.w3l-top-menu-4 header nav menu menuitem > label,
.w3l-top-menu-4 header nav menu menuitem > span {
  display: block;
  margin: 7px 0;
  text-decoration: none;
  color: #0c416a;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
}
.w3l-top-menu-4 header nav.left-navigation menu menuitem > a,
.w3l-top-menu-4 header nav.left-navigation menu menuitem > label,
.w3l-top-menu-4 header nav.left-navigation menu menuitem > span {
  text-align: left;
}
.w3l-top-menu-4 header nav.right-navigation menu menuitem > a,
.w3l-top-menu-4 header nav.right-navigation menu menuitem > label,
.w3l-top-menu-4 header nav.right-navigation menu menuitem > span {
  text-align: right;
}

.w3l-top-menu-4 header nav menu menuitem > label:after {
  display: block;
  font-size: 150%;
}


.w3l-top-menu-4 header nav nav label.menu-toggle,
.w3l-top-menu-4 header nav nav label.menu-toggle>span,
.w3l-top-menu-4 header nav nav label.menu-toggle>span:after,
.w3l-top-menu-4 header nav nav label.menu-toggle>span:before { background: none !important; }

.w3l-top-menu-4 header input[type="checkbox"]:checked ~ nav { transform: translateX(0); }

.w3l-top-menu-4 header input[type="checkbox"]:checked ~ nav label.menu-close {
  opacity: 1;
}

.w3l-top-menu-4 header input[type="checkbox"]:checked ~ nav label.menu-toggle > span:after,
.w3l-top-menu-4 header input[type="checkbox"]:checked ~ nav label.menu-toggle > span:before {
  width: 14px;
}
.w3l-top-menu-4 header input[type="checkbox"]:checked ~ nav.left-navigation label.menu-toggle > span:after {
  transform: rotate(-45deg) translateY(-4px) translateX(4px);
}
.w3l-top-menu-4 header input[type="checkbox"]:checked ~ nav.left-navigation label.menu-toggle > span:before {
  transform: rotate(45deg) translateY(4px) translateX(4px);
}
.w3l-top-menu-4 header input[type="checkbox"]:checked ~ nav.right-navigation label.menu-toggle > span:after {
  transform: rotate(45deg) translateY(-8px) translateX(2px);
}
.w3l-top-menu-4 header input[type="checkbox"]:checked ~ nav.right-navigation label.menu-toggle > span:before {
  transform: rotate(-45deg) translateY(8px) translateX(2px);
}

.w3l-top-menu-4 main {
  margin: 0 1vw;
}

.introduction {
  background: #F7F7F7;
  border-radius: 0.5em;
  box-shadow: 0 0.5em 0.5em 0 rgba(153,153,153,1);
  padding: 2em;
}

@media (max-width:60em) {
  h2 { padding: 0.5em 0; }
}

@media (min-width:60em) {
  h1 { font-size: 280%; }
}

@media (min-width:100em) {
  h1 { font-size:300%; }
}

@media (min-width:160em) {
  h1 {
    font-size: 320%;
    padding: 1.75em 0 .8em 0;
  }
}