/*!
 * Mmenu Light
 * mmenujs.com/mmenu-light
 *
 * Copyright (c) Fred Heusschen
 * www.frebsite.nl
 *
 * License: CC-BY-4.0
 * http://creativecommons.org/licenses/by/4.0/
 */

 :root {
   /*padding-top: 50px;*/
   --mm-ocd-width:80%;
   --mm-ocd-min-width:120px;
   --mm-ocd-max-width:240px;
  }

  body.mm-ocd-opened {
    overflow-y:hidden;
    -ms-scroll-chaining:none;
    overscroll-behavior:none;
  }

  .mm-ocd {
    position:fixed;
    top:0;
    right:0;
    bottom:100%;
    left:0;
    z-index:9999;
    overflow:hidden;
    -ms-scroll-chaining:none;
    overscroll-behavior:contain;
    background:rgba(0,0,0,0);

    -webkit-transition-property:bottom,background-color;
    -o-transition-property:bottom,background-color;
    transition-property:bottom,background-color;
    -webkit-transition-duration:0s,.3s;
    -o-transition-duration:0s,.3s;
    transition-duration:0s,.3s;
    -webkit-transition-timing-function:ease;
    -o-transition-timing-function:ease;
    transition-timing-function:ease;
    -webkit-transition-delay:.45s,.15s;
    -o-transition-delay:.45s,.15s;
    transition-delay:.45s,.15s;
  }

  .mm-ocd--open {
    bottom:0;
    background:rgba(0,0,0,.25);
    -webkit-transition-delay:0s;
    -o-transition-delay:0s;
    transition-delay:0s;
  }

  .mm-ocd__content {
    position:absolute;
    top:0;
    bottom:0;
    z-index:2;
    width:80%;
    width:var(--mm-ocd-width);
    min-width:200px;
    min-width:var(--mm-ocd-min-width);
    max-width:440px;
    max-width:var(--mm-ocd-max-width);
    background:#fff;
    -webkit-transition-property:-webkit-transform;
    transition-property:-webkit-transform;
    -o-transition-property:transform;
    transition-property:transform;
    transition-property:transform,-webkit-transform;
    -webkit-transition-duration:.3s;
    -o-transition-duration:.3s;
    transition-duration:.3s;
    -webkit-transition-timing-function:ease;
    -o-transition-timing-function:ease;
    transition-timing-function:ease;
  }

  .mm-ocd--left .mm-ocd__content {
    left:0;
    -webkit-transform:translate3d(-100%,0,0);
    transform:translate3d(-100%,0,0);
  }

  .mm-ocd--right .mm-ocd__content {
    right:0;
    -webkit-transform:translate3d(100%,0,0);
    transform:translate3d(100%,0,0);
  }

  .mm-ocd--open .mm-ocd__content {
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
  }

  .mm-ocd__backdrop {
    position:absolute;
    top:0;
    bottom:0;
    z-index:3;
    width:calc(100% - 80%);
    width:calc(100% - var(--mm-ocd-width));
    min-width:calc(100% - 440px);
    min-width:calc(100% - var(--mm-ocd-max-width));
    max-width:calc(100% - 200px);
    max-width:calc(100% - var(--mm-ocd-min-width));
    background:rgba(3,2,1,0);
  }

    .mm-ocd--left .mm-ocd__backdrop {
    right:0
  }

  .mm-ocd--right .mm-ocd__backdrop {
    left:0
  }

  .mm-spn,.mm-spn a,.mm-spn li,.mm-spn span,.mm-spn ul {
    display:block;
    padding:0;
    margin:0;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
  }

  :root {                     /*Top Cell Menu*/
    --mm-spn-item-height:30px;
    --mm-spn-item-indent:20px;
    --mm-spn-line-height:24px;
  }

  .mm-spn {
    width:100%;
    height:100%;  /*main menu*/
    -webkit-tap-highlight-color:transparent;
    -webkit-overflow-scrolling:touch;overflow:hidden;
    -webkit-clip-path:inset(0 0 0 0);
    clip-path:inset(0 0 0 0);
    -webkit-transform:translateX(0);
    -ms-transform:translateX(0);
    transform:translateX(0);
  }

  .mm-spn ul {
    -webkit-overflow-scrolling:touch;
    position:fixed;
    top:0;
    left:100%;
    bottom:0;
    z-index:2;
    width:130%;
    padding-right:30%;
    line-height: inherit/*24px*/;
    line-height:var(--mm-spn-line-height);
    overflow:visible;
    overflow-y:auto;
    background:inherit;
    -webkit-transition:left .3s ease 0s;
    -o-transition:left .3s ease 0s;
    transition:left .3s ease 0s;
    cursor:default;
  }

  .mm-spn ul:after{
    content:"";
    display:block;
    height:50px;
    height:var(--mm-spn-item-height);
  }

  .mm-spn>ul {
    left:0;
  }

  .mm-spn ul.mm-spn--open{
    left:0;
  }

  .mm-spn ul.mm-spn--parent{
    left:-30%;
    overflow-y:hidden;
  }

  .mm-spn li {
    position:relative;
    background:inherit;
    cursor:pointer;
  }

  .mm-spn li:before {
    content:"";
    display:block;
    position:absolute;
    top:25px;
    top:calc(var(--mm-spn-item-height)/ 2);
    right:25px;
    right:calc(var(--mm-spn-item-height)/ 2);
    z-index:0;
    width:10px;
    height:10px;
    border-top:2px solid;
    border-right:2px solid;
    -webkit-transform:rotate(45deg) translate(0,-50%);
    -ms-transform:rotate(45deg) translate(0,-50%);
    transform:rotate(45deg) translate(0,-50%);
    /*opacity:.4*/
  }

  .mm-spn li:after {
    content:"";
    display:block;
    margin-left:20px;
    margin-left:var(--mm-spn-item-indent);
    border-top:1px solid;
    opacity:.15;
  }

  .mm-spn a,.mm-spn span {
    position: relative;
    z-index:1;
    margin-top: 20px; /*Menu items height*/
    padding:13px 20px;
    padding:calc((var(--mm-spn-item-height) - var(--mm-spn-line-height))/ 2) var(--mm-spn-item-indent);
  }

  .mm-spn a {
    background:inherit;
    color:inherit;
    text-decoration:none;
  }

  .mm-spn a:not(:last-child) {
    width:calc(100% - 50px);
    width:calc(100% - var(--mm-spn-item-height));
  }

  .mm-spn a:not(:last-child):after {
    content:"";
    display:block;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    border-right:1px solid;
    opacity:.15;
  }

  .mm-spn span {
    background:0 0;
  }

  .mm-spn.mm-spn--navbar {
    cursor:pointer;
  }

  .mm-spn.mm-spn--navbar:before {
    content:'';
    display:block;
    position:absolute;
    top:25px;
    top:calc(var(--mm-spn-item-height)/ 2);
    left:20px;
    left:var(--mm-spn-item-indent);
    width:10px;
    height:10px;
    margin-top:2px;
    border-top:2px solid;
    border-left:2px solid;
    -webkit-transform:rotate(-45deg) translate(50%,-50%);
    -ms-transform:rotate(-45deg) translate(50%,-50%);
    transform:rotate(-45deg) translate(50%,-50%);
    opacity:.4;
  }

  .mm-spn.mm-spn--navbar.mm-spn--main {
    cursor:default
  }

  .mm-spn.mm-spn--navbar.mm-spn--main:before {
    content:none;
    display:none;
  }

  .mm-spn.mm-spn--navbar:after {
    content:attr(data-mm-spn-title);
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:50px;
    height:var(--mm-spn-item-height);
    padding:0 40px;
    padding:0 calc(var(--mm-spn-item-indent) * 2);
    line-height: inherit/*50px*/;
    line-height:var(--mm-spn-item-height);
    opacity:.4;
    text-align:center;
    overflow:hidden;
    white-space:nowrap;
    -o-text-overflow:ellipsis;
    text-overflow:ellipsis;
  }

  .mm-spn.mm-spn--navbar.mm-spn--main:after {
    padding-left:20px;
    padding-left:var(--mm-spn-item-indent);
  }

  .mm-spn.mm-spn--navbar ul {
    top:51px;
    top:calc(var(--mm-spn-item-height) + 1px);
  }

  .mm-spn.mm-spn--navbar ul:before {
    content:'';
    display:block;
    position:fixed;
    top:inherit;
    z-index:2;
    width:100%;
    border-top:1px solid currentColor;
    opacity:.15;
  }

  .mm-spn.mm-spn--light {
    color:#fff/*444*/;
    background:#44A5DA;/*f3f3f3*/
  }

  .mm-spn.mm-spn--dark { color:#ddd;
    background:#333;
  }

  .mm-spn.mm-spn--vertical {
    overflow-y:auto;
  }

  .mm-spn.mm-spn--vertical ul {
    width:100%;
    padding-right:0;
    position:static;
  }

  .mm-spn.mm-spn--vertical ul ul {
    display:none;
    padding-left:20px;
    padding-left:var(--mm-spn-item-indent)
  }

  .mm-spn.mm-spn--vertical ul ul:after {
    height:25px;
    height:calc(var(--mm-spn-item-height)/ 2);
  }

  .mm-spn.mm-spn--vertical ul.mm-spn--open {
    display:block;
  }

  .mm-spn.mm-spn--vertical li.mm-spn--open:before {
    -webkit-transform:rotate(135deg) translate(-50%,0);
    -ms-transform:rotate(135deg) translate(-50%,0);
    transform:rotate(135deg) translate(-50%,0)
  }

  .mm-spn.mm-spn--vertical ul ul li:last-child:after {
    content:none;
    display:none;
  }
