.closeMenu{
  visibility: hidden;
  position: fixed;
  inset: 0;
  background-color: black;
  cursor: pointer;
  opacity: 0;
  transition: opacity .5s 0s, visibility 0s .5s;
  z-index: 1000;
}
body.menu-on > .closeMenu {
  visibility: visible;
  opacity: .8;
  transition: opacity .5s 0s, visibility 0s 0s;
}
ul.summenu {
	display: flex;
	list-style: none;
	margin: 0;
	padding:0;
	position: relative;
  z-index: 2;
}
ul.summenu > li {
	position: unset;
}
ul.summenu > li a {
    outline-offset: .5em;
}
ul.summenu > li a:after {
	content:'';
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	margin:0em;
  vertical-align: middle;
  background: url('images/chevron-down.svg') no-repeat;
  background-size: contain;
  rotate: 0deg;
    transition: rotate .5s;
}
ul.summenu > li a.active:after {
	rotate: 180deg;
}
ul.summenu li:last-child {
	margin-left: auto;
}
ul.summenu li:last-child a:after {
	display: none;
}
.hiddenmenu {
    width: 100%;
    max-height: 0;
    z-index: 1;
    overflow: hidden;
    visibility: hidden;
    transition: max-height .5s 0s, visibility .5s 0s;
    transition-timing-function: ease-in;
}
.hiddenmenu.active {
	max-height: 1000px;
	visibility: visible;
    transition: max-height .5s 0s, visibility 0s 0s;
	transition-timing-function: ease-out;
}
#masthead.on .hiddenmenu, #masthead.on .hiddenmenu.active {
    transition: max-height 0s 0s, visibility 0s 0s;
}
/*ul.summenu li:hover > .hiddenmenu {
	max-height: 1000px;
	visibility: visible;
    transition: max-height .5s;
}
*/

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding: 0 .75em;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 0.7; }
  .hamburger.is-active:hover {
    opacity: 0.7; }
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: #000; }

.hamburger-box {
  width: 1em;
  height: .5em;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 1em;
    height: 2px;
    background-color: #000;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -.28em; }
  .hamburger-inner::after {
    bottom: -.28em; }

/*
   * Arrow Turn
   */
.active .hamburger-inner, .active .hamburger-inner::before, .active .hamburger-inner::after {
	width:.75em;
}
.active .hamburger--arrowturn .hamburger-inner {
	transform: rotate(-90deg); 
	width: 0em;
    height: 1.5em;}
.active .hamburger--arrowturn .hamburger-inner::before {
    transform: translate3d(.3em, .95em, 0) rotate(45deg) scale(0.7, 1); }
.active .hamburger--arrowturn .hamburger-inner::after {
    transform: translate3d(.3em, -0.68em, 0) rotate(-45deg) scale(0.7, 1); }