/* Menu Appearance */
.pushy {
  position: fixed;
  width: 80vw;
  height: 100%;
  top: 0;
  z-index: 9999;
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* iOS momentum */
  background: #191918; /* dark drawer like demo */
  box-shadow: -4px 0 12px rgba(0,0,0,.2);
}
.pushy a { display: block; color: #b3b3b1; text-decoration: none; }
.pushy a:hover, .pushy a:focus { color: #fff; }

/* Drawer-specific resets to avoid site header menu styles leaking in */
.pushy .menu { list-style: none; margin: 0; padding: 0; }
.pushy .menu > li { margin: 0; border: 0 !important; }
.pushy .menu a,
.pushy .menu button {
  display: block;
  padding: 15px 30px;
  background: transparent !important;
  color: #b3b3b1;
  border: none;
  text-transform: none;
}
.pushy .menu a:hover,
.pushy .menu button:hover,
.pushy .menu a:focus,
.pushy .menu button:focus { color: #fff; background: transparent !important; }
.pushy .menu a.is-active { color: #fff; }

/* Subtle dividers like the demo */
.pushy .menu > li { border-bottom: 1px solid rgba(255,255,255,0.12); }
.pushy .menu .menu > li { border-bottom: 1px solid rgba(255,255,255,0.08); }

/* Indent nested lists regardless of template */
.pushy .menu .menu { padding-left: 15px; }

/* Show arrow for any expanded item, even if not using Pushy submenu class */
.pushy .menu li.menu-item--expanded > a,
.pushy .menu li.menu-item--expanded > button { position: relative; }
.pushy .menu li.menu-item--expanded > a::after,
.pushy .menu li.menu-item--expanded > button::after {
  content: "";
  display: block;
  height: 11px;
  width: 8px;
  position: absolute;
  top: 50%;
  right: 15px;
  background: url("../img/arrow.svg") no-repeat;
  transform: translateY(-50%);
}

/* Collapse child lists by default; open when in active trail */
.pushy .menu li.menu-item--expanded > ul {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height .2s ease-in-out, visibility .2s ease-in-out;
}
.pushy .menu li.menu-item--active-trail > ul {
  max-height: 1000px;
  visibility: visible;
}
.pushy .menu li.menu-item--active-trail > a::after,
.pushy .menu li.menu-item--active-trail > button::after {
  transform: translateY(-50%) rotate(90deg);
}
.pushy.pushy-left { left: 0; }
.pushy.pushy-right { right: 0; }
.pushy-content { visibility: hidden; }

/* Menu Movement */
.pushy-left { transform: translate3d(-80vw,0,0); }
.pushy-open-left #container,
.pushy-open-left .push { transform: translate3d(80vw,0,0); }
.pushy-right { transform: translate3d(80vw,0,0); }
.pushy-open-right #container,
.pushy-open-right .push { transform: translate3d(-80vw,0,0); }
.pushy-open-left .pushy,
.pushy-open-right .pushy { transform: translate3d(0,0,0); }
.pushy-open-left .pushy-content,
.pushy-open-right .pushy-content { visibility: visible; }

/* Menu Transitions */
#container, .pushy, .push {
  transition: transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}
.pushy-content { transition: visibility 0.2s cubic-bezier(0.16,0.68,0.43,0.99); }

/* Site Overlay */
.site-overlay { display: none; }
.pushy-open-left .site-overlay,
.pushy-open-right .site-overlay {
  display: block; position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,.5);
  animation: fade 500ms;
}
@keyframes fade { 0% { opacity: 0 } 100% { opacity: 1 } }

/* Submenu Appearance (from Pushy v2) */
.pushy-submenu > ul { padding-left: 15px; transition: max-height .2s ease-in-out, visibility .2s ease-in-out; }
.pushy-submenu > ul li { transition: opacity .2s ease-in-out; }
.pushy-submenu button { width: 100%; color: #b3b3b1; padding: 15px 30px; text-align: left; background: transparent; border: 0; }
.pushy-submenu button:hover, .pushy-submenu button:focus { color: #fff; }
.pushy-submenu > a, .pushy-submenu > button { position: relative; }
.pushy-submenu > a::after, .pushy-submenu > button::after { content: ""; display:block; height:11px; width:8px; position:absolute; top:50%; right:15px; background:url("../img/arrow.svg") no-repeat; transform: translateY(-50%); transition: transform .2s; }
.pushy-submenu-closed > ul { max-height: 0; overflow: hidden; visibility: hidden; }
.pushy-submenu-closed li { opacity: 0; }
.pushy-submenu-open > ul { max-height: 1000px; visibility: visible; }
.pushy-submenu-open li { opacity: 1; }
.pushy-submenu-open > a::after, .pushy-submenu-open > button::after { transform: translateY(-50%) rotate(90deg); }

/* Responsive width tweak */
@media (min-width: 768px) {
  .pushy,
  .pushy-left { width: 60vw; }
  .pushy-left { transform: translate3d(-60vw,0,0); }
  .pushy-right { transform: translate3d(60vw,0,0); }
  .pushy-open-left #container, .pushy-open-left .push { transform: translate3d(60vw,0,0) }
  .pushy-open-right #container, .pushy-open-right .push { transform: translate3d(-60vw,0,0) }
}