/* Navigation */

#navigation{
    position: relative;
    z-index: 1000;
    padding:30px;
}

.uk-navbar-container:not(.uk-navbar-transparent){
    background-color: transparent;
}

.uk-navbar-nav > li > a{
    position: relative;
    font-family: "Founders Grotesk";
    font-style: normal;
    font-weight: 400;
    color:#2A2A2A;
    font-size:16.5px;
    margin-left: 16px;
    letter-spacing: -1;
}

.uk-navbar-nav > li > a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    border-radius: 5px;
    height: 1px;
    bottom: 26px;
    left: 0;
    background: currentcolor;
    transform-origin: bottom right;
    transition: transform 0.5s cubic-bezier(.075,.82,.165,1);
    transition-delay: 0s;
}


.uk-navbar-nav > li > a:hover {
    color: #000;
  }

.uk-navbar-nav > li > a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.dark{
    position: relative;
    color: #2A2A2A;
    text-decoration: none;
}

.dark.uk-active::after{
    transform: scaleX(1);
    transform-origin: bottom left;
    color: #2A2A2A;
}

.uk-navbar-nav > li > .light:hover  {
    color: #EFEFEF;
}


.light.uk-active::after{
    transform: scaleX(1);
    transform-origin: bottom left;
    color: #FFF;
}

.light{
    position: relative;
    color: #2A2A2A;
    text-decoration: none;
}

.light::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: -5px;
    left: 0;
    background: currentcolor !important;
    transform-origin: bottom right;
    transition: transform 0.5s cubic-bezier(.075, .82, .165, 1);
    transition-delay: 0s;
}


.light:hover {
    text-decoration: none;
    color: #2A2A2A;
}

.light:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}


#MobileNav{
    display:none;
}

#MenuIcon{
    display:none;
  }



@media (max-width: 40rem) {

    #navigation svg{
        width:90px;
    } 

    #LogoIcon{
        position:absolute;
        top:30px;
        left:15px;
        display:block;
        z-index: 10002;
      } 

    #MenuIcon{
        position:absolute;
        top:40px;
        right:15px;
        display:block;
        z-index: 10002;
      }  
      #MenuIcon.light{
        color:#fff;
      }

    #MobileNav{
        position:fixed;
        display:none;
        align-content: center;
        left:0px;
        top:0px;
        width:100%;
        height:100vh;
        margin: 0;
        padding:0;
        z-index: 10001;
        list-style-type: none;
        overflow: scroll;
      }

      #MobileNav li{
        margin:0;
        list-style-type: none;
        animation-name: mobileNavAnimation;
  animation-duration: 350ms;
  animation-delay: calc(var(--animation-order) * 100ms);
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
      }  

      #MobileNav li a{
        display:inline-block;
        padding:8px 0px;
        
        width:100%;
        text-align: center;
        font-size:36px;
        text-transform: uppercase;
      }

      #MobileNav li a::after,#MobileNav li a:hover::after,#MobileNav li a:visited::after,#MenuIcon::after,#MenuIcon:hover::after,#MenuIcon:visited::after  {
        transform: scaleX(0);
        transform-origin: bottom left;
        }
        #MobileNavBackground{
            position:absolute;
            display:block; 
            top:0;
            left:0;
            height:100%;
            width:100%;
            pointer-events: none;
        }
    
}

@keyframes mobileNavAnimation {
        0% {
          opacity: 0;
          transform: scale(0.6) translateY(-8px);
        }
        
        100% {
          opacity: 1;
        }
  }