/* Root variables */
:root{
  --footer-height: 266px;
}
/* The default font family. */
/* The font attributes */
/* widths */
/* paddings/margins */
/* misc */
/* Colors */
.menu--main {
  position:static!important;
}
.menu--main > h2{
    background-image: url(../../images/logo/logo_compact_white.svg);
    background-size: contain;
    background-repeat:no-repeat;
    display:block;
    position:absolute;
    top:calc(4rem/4);
    left:calc(4rem/4);
    margin:0;
    width:100px;
    height:64px;
    text-indent:-99999px;
  }
.menu--main .menu .menu-item a, .menu--main .menu .menu-item span{
        font-size: 18px;
        text-transform: uppercase;
        white-space: nowrap;
        cursor:pointer;
      }
.menu--main .menu .menu-item a.is-active,.menu--main .menu .menu-item span.is-active{
          font-weight:500;
        }
.menu--main .menu .menu-item:after{
        content:'';
        width:100%;
        padding-top:calc(4rem/8);
        background-image:url(../../images/stroke_short_blue.svg);
        background-repeat:no-repeat;
        background-color: transparent;
        background-size: 100% 100%;
        background-position: top left;
        position:absolute;
        bottom:calc(-4rem/7);
        left:0;
        right:0;
        /* transition: width .5s ease; */
        -webkit-clip-path: inset(0 100% 0 0);
                clip-path: inset(0 100% 0 0);
        transition: -webkit-clip-path .5s ease;
        transition: clip-path .5s ease;
        transition: clip-path .5s ease, -webkit-clip-path .5s ease;
      }
.menu--main .menu .menu-item:nth-child(2n):after{
          background-image:url(../../images/stroke_long_blue.svg);
        }
.menu--main .menu .menu-item:hover:after,.menu--main .menu .menu-item:active:after,.menu--main .menu .menu-item:focus:after,.menu--main .menu .menu-item.menu-item--active-trail:after{
          -webkit-clip-path: inset(0 0 0 0);
                  clip-path: inset(0 0 0 0);
        }
@media (max-width: 1279px) {

  .menu--main{
    /* position:fixed;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    top:0;
    left:0;
    right:0;
    margin:0;
    padding:0;
    width:0%;
    height:100vh;
    z-index:90;
    background-color: $navigation-background-color;
    opacity:0;
    margin-right:0;
    transition: opacity .25s linear 0s, width 0s linear .25s;
    overflow:hidden; */
    width:100%;
  }
      .menu--main .menu .menu-item{
        position:relative;
        margin:0;
        margin-bottom:calc(4rem/3);
        text-align:center;
      }
        .menu--main .menu .menu-item a, .menu--main .menu .menu-item span{
          font-size: 20px;
          color: #ffffff;
        }
        .menu--main .menu .menu-item:last-child{
          margin-bottom:0;
        }
        .menu--main .menu .menu-item:after{
          background-image:url(../../images/stroke_short_white.svg);
          background-position: top center;
        }
          .menu--main .menu .menu-item:nth-child(2n):after{
            background-image:url(../../images/stroke_long_white.svg);
          }

  /* body.menu-open {
    .menu--main {
      opacity:1;
      width:100%;
      transition: opacity .25s linear 0s, width 0s linear 0s;
    }
  } */

  .menu-toggle {
    width: 48px;
    height: 48px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    right:calc(4rem / 4);
    z-index:100;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
      .menu-toggle div span {
        --rotateY: 0deg;
        transform: rotateY(var(--rotateY));
        transform-style: preserve-3d;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: #005ca8;
        backface-visibility: hidden;
        transition: transform .6s cubic-bezier(.2, .64, .48, 1.24);
      }
        .menu-toggle div span:before,
        .menu-toggle div span:after {
          --rotate: 0deg;
          content: '';
          position: absolute;
          width: 28px;
          height: 2px;
          border-radius: 1px;
          top: 50%;
          left: 50%;
          background: #ffffff;
          backface-visibility: hidden;
          transform: translate(-50%, -50%) rotate(var(--rotate));
        }
          .menu-toggle div span:last-child:before {
              box-shadow: 0 -7px 0 #ffffff, 0 7px 0 #ffffff;
          }
          .menu-toggle div span:last-child:after {
              display: none;
          }
        .menu-toggle div span:first-child {
          --rotateY: 180deg;
          background: #ffffff;
        }
          .menu-toggle div span:first-child:before, .menu-toggle div span:first-child:after{
            background: #005ca8;
          }
          .menu-toggle div span:first-child:before {
              --rotate: -45deg;
          }
          .menu-toggle div span:first-child:after {
              --rotate: 45deg;
          }
        .menu-toggle.is-active div span:last-child {
          --rotateY: -180deg;
        }
        .menu-toggle.is-active div span:first-child {
          --rotateY: 0deg;
        }
  }
@media (min-width: 768px) {
    .menu--main > h2{
      width:140px;
      height:90px;
    }
  }
@media (min-width: 1280px) {
    .menu--main > h2{
      display: none;
    }
    .menu--main .menu{
      display:flex;
    }
      .menu--main .menu .menu-item{
        margin-right:calc(4rem/4);
        position:relative;
      }
        .menu--main .menu .menu-item:last-child{
          margin-right:0;
        }
  .menu-toggle{
    display:none;
  }
  }
@media (min-width: 1440px) {
      .menu--main .menu .menu-item{
        margin-right:calc(4rem/2);
      }
        .menu--main .menu .menu-item a, .menu--main .menu .menu-item span{
          font-size: 20px;
        }
  }