.zatr-menu-opener, .zatr-menu-opener:hover, .zatr-menu-opener.active, .zatr-menu-opener-inner, .zatr-menu-opener-inner::before, .zatr-menu-opener-inner::after, .zatr-menu, .zatr-menu.active {

  -webkit-transition: 250ms all;

  transition: 250ms all;

  -ms-transition: 250ms all;

}



.zatr-menu-opener {

  cursor: pointer;

  height: 32px;

  position: fixed;

  top: 1.25%;

  left: 1%;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

  width: 42px;

   z-index:999;

}

.zatr-menu-opener:hover, .zatr-menu-opener.active {

  background: rgba(0,0,0,0.9);

  z-index:999;

}

.zatr-menu-opener.active {

  margin: 1.75% 0 0 1.75%;

}



.zatr-menu-opener-inner {

  background: #fff;

  height: .5rem;

  margin-left: .75rem;

  margin-top: 1.25rem;

  width: 2.5rem;

}

.zatr-menu-opener-inner::before, .zatr-menu-opener-inner::after {

  background: white;

  content: '';

  display: block;

  height: .5rem;

  width: 2.5rem;

}

.zatr-menu-opener-inner::before {

  -webkit-transform: translateY(-0.75rem);

  -ms-transform: translateY(-0.75rem);

  transform: translateY(-0.75rem);

}

.zatr-menu-opener-inner::after {

  -webkit-transform: translateY(0.25rem);

  -ms-transform: translateY(0.25rem);

  transform: translateY(0.25rem);

}

.zatr-menu-opener-inner.active {

  background: transparent;

}

.zatr-menu-opener-inner.active::before {

  -webkit-transform: translateY(0rem) rotate(-45deg);

  -ms-transform: translateY(0rem) rotate(-45deg);

  transform: translateY(0rem) rotate(-45deg);

}

.zatr-menu-opener-inner.active::after {

  -webkit-transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);

  -ms-transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);

  transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);

}



.zatr-menu {

  background: rgba(0,0,0,0.9);

  color: transparent;

  height: 64px;

  position: fixed;

  top: 1.2%;

  left: 1%;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

  width: 0rem;

  z-index: -1;

}

.zatr-menu.active {

 /* width: -webkit-calc(100% - 2rem);

  width: calc(100% - 2rem);*/

  width:97%;

  z-index: 998;

}

.zatr-menu.active .zatr-menu-link {

  color: white;

}



.zatr-menu-inner {

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

  -webkit-flex-direction: row;

  -ms-flex-direction: row;

  flex-direction: row;

  height: 100%;

  list-style-type: none;

  margin: 0;

  margin-left: 6rem;

  padding: 0;



}



.zatr-menu-link {

  color: transparent;

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-flex: 1;

  -webkit-flex: 1 1 auto;

  -ms-flex: 1 1 auto;

  flex: 1 1 auto;

  font-size: 1.3rem;

  font-weight: 100;

  height: 100%;

  text-align: center;

  text-decoration: none;

  line-height:3;

  vertical-align:middle;

}

.zatr-menu-link li {

  margin: auto;

 white-space: nowrap;

}

@media (min-width:767px){.zatr-menu-opener, .zatr-menu-opener:hover, .zatr-menu-opener.active, .zatr-menu-opener-inner, .zatr-menu-opener-inner::before, .zatr-menu-opener-inner::after, .zatr-menu, .zatr-menu.active {
    display: none;
}}

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

  .zatr-menu {

    height: auto;

  }

  .zatr-menu-inner {

    display: block;

  }

  .zatr-menu-link {

    padding: 10px 0;

    font-size: 1.2em;

	line-height:1;

  }

  .zatr-menu.active {

    width: -webkit-calc(100% - 0.5rem);

    width: calc(100% - 0.5rem);

  }
}

/* ---------------------- Sub Menus ------------------------- */

.zatr-menu-link:nth-child(4), .zatr-menu-link:nth-child(5) {
    font-size: 16px;
    padding: 5px 20px;
}