div#hdr-nav {
  position: relative;
  width: 100%;
}
div#hdr-nav > a {
  display: inline-block;
  padding-right: 1.88208667rem;
  margin: 0.25rem 0 0.5rem;
  height: 3.6rem;
}
div#hdr-nav > a > img {
  height: 100%;
}
div#hdr-nav > div#navbar {
  position: relative;
  width: 60%;
  min-width: 40rem;
  height: 1.75rem;
  margin: 0 auto;
}
div#hdr-nav > div#navbar > div {
  position: relative;
  height: 100%;
  background: #6aa67d;
  z-index: 4;
}
div#hdr-nav > div#navbar > div > button {
  margin: 0 0.5rem;
  padding: 0.25rem 1.25rem;
  height: 100%;
  font-family: Barlow, sans-serif;
  text-transform: uppercase;
  background: #6aa67d;
}
div#hdr-nav > div#navbar > div > button:hover {
  background: #579169;
}
div#hdr-nav > div#navbar > div > button:active {
  color: #f6b934;
}
div#hdr-nav > div#navbar > img {
  position: absolute;
  top: 0;
  width: 3.5rem;
  height: 2.625rem;
  z-index: 2;
}
div#hdr-nav > div#navbar > img:first-child {
  left: -1.75rem;
}
div#hdr-nav > div#navbar > img:last-child {
  right: -1.75rem;
}
div#hdr-nav > div#navbar::before {
  position: absolute;
  content: "";
}
div#hdr-nav > button#btn-menu {
  display: none;
  position: absolute;
  top: 50%;
  left: 0.5rem;
  margin: -1.15625em 0 0 0;
  width: 2.3125em;
  height: 2.3125em;
  z-index: 6;
}

div#container-modal {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  text-align: left;
  background: rgba(57, 69, 57, 0.3);
  z-index: 12;
}
div#container-modal > div#panel-menu {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 0.25rem;
  min-width: 10%;
  max-width: 25%;
  height: 100%;
  background: #6aa67d;
  transition: left 0.2s linear 0s;
}
div#container-modal > div#panel-menu > div {
  text-align: right;
}
div#container-modal > div#panel-menu > div > button {
  background: #6aa67d;
}
div#container-modal > div#panel-menu > div > button:hover {
  background: #579169;
}
div#container-modal > div#panel-menu > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
div#container-modal > div#panel-menu > ul > li {
  margin: 0;
  padding: 0.5rem 1.25rem;
  width: 100%;
  color: #ffffff;
  font-family: Barlow, sans-serif;
  text-transform: uppercase;
  cursor: pointer;
}
div#container-modal > div#panel-menu > ul > li:hover {
  background: #579169;
}
div#container-modal > div#panel-menu > ul > li:active {
  color: #f6b934;
}

div#container-main {
  height: calc(100% - 6.1rem);
}

@media only screen and (max-width: 768px) {
  div#hdr-nav > a {
    height: 3.24rem;
  }
  div#hdr-nav > div#navbar {
    display: none;
  }
  div#hdr-nav > button#btn-menu {
    display: inline-block;
  }

  div#container-modal.el-active {
    width: 200%;
  }
  div#container-modal.el-active > div#panel-menu {
    left: 50%;
  }

  div#container-main {
    height: calc(100% - 3.99rem);
  }
}
@media only screen and (max-width: 600px) {
  div#hdr-nav > a {
    height: 2.88rem;
  }

  div#container-modal > div#panel-menu {
    min-width: 25%;
    max-width: 40%;
  }

  div#container-main {
    height: calc(100% - 3.63rem);
  }
}