/*NAVIGATION----------------------------------------------------------------------------------------------------*/  

nav {               
    position:                           fixed;
    display:                            flex;
    box-sizing:                         border-box;
    width:                              100vw;
    max-width:                          var(--outerwidth);
    top:                                0;
    left:                               50%;
    transform:                          translateX(-50%);
    padding-left:                       calc((var(--outerwidth) - var(--innerwidth)) * .5);
    padding-right:                      calc((var(--outerwidth) - var(--innerwidth)) * .5);
    height:                             var(--navheight);
    flex-direction:                     row;
    z-index:                            100;
    /* box-shadow:                         0 0 20px #11111111; */
    transition:                         var(--normal);
}               

nav > div#inner {               
    position:                           relative;
    display:                            flex;
    flex-direction:                     row;
    justify-content:                    space-between;
    align-items:                        center;
    padding:                            0 var(--space);
    width:                              100%;
    height:                             100%;
}

.logo > a{
    display:                            block;
    font-size:                          0;
}

#logo{              
    display:                            block;
    height:                             3.1rem;
    max-width:                          70vw;
    transition:                         var(--normal);
}               

#links {                
    position:                           absolute;
    display:                            flex;
    flex-direction:                     column;
    justify-content:                    center;
    align-items:                        center;
    width:                              100vw;
    max-width:                          var(--outerwidth);
    height:                             100vh;
    left:                               50%;
    z-index:                            -1;
    bottom:                             0;
    transform:                          translateX(-50%);
    background:                         var(--maincolor);
    backdrop-filter:                    blur(5px);
    transition:                         var(--normal);
}               

#links.show {               
    bottom:                             calc(-100vh + var(--navheight));
    background:                         var(--accentcolor);
    transition:                         var(--quick);
}               

#links > div{               
    display:                            flex;
    flex-direction:                     column;
    justify-content:                    center;
    align-items:                        center;
}

#links > div:hover > a.navlink{
    color:                              var(--lightcolor);
}

#links > div > a.navlink {
    display:                            block;
    width:                              100%;
    text-align:                         center;
    color:                              var(--lightcolor);
    font-family:                        var(--heading);
    font-size:                          5.5rem;
    line-height:                        1.8;
    text-decoration:                    none;
    transition:                         var(--normal);
}

#links > div > a.navlink:hover{
    color:                              var(--lightcolor);
}

#links > div > a.navlink.active::after, #links > div > a.navlink.active::before{
    display:                            inline-block;
    content:                            '—';
    margin:                             0 1rem;
    transition:                         margin var(--slow);
}

#links > div > a.navlink.active:hover::after, #links > div > a.navlink.active:hover::before{
    margin:                             0 3rem;
}

#links > div > p#language{
    margin-top:                         var(--space);
}

#links > div > p#language > a {
    font-family:                        var(--paragraph);
    text-decoration:                    none;
    transition:                         var(--normal);
}

#links > div > p#language > a:hover {
    color:                              var(--lightcolor);
}

/* address inside the menu */
#links > div > p.address{
    position:                           absolute;
    bottom:                             calc(var(--navheight) + 1rem);
    color:                              var(--darkcolor);
    font-size:                          2.5rem;
}

#links > div > p.address > a{
    color:                              inherit;
    font-size:                          inherit;
}

/* for clickbox */
#barmenue::after{
    content:                            '';
    position:                           absolute;
    width:                              50px;
    height:                             50px;
    left:                               50%;
    top:                                50%;
    transform:                          translate3d(-50%, -50%, 0);
}                       

#toplinks{                      
    display:                            inline-flex;
    align-items:                        center;
}

#barmenue{
    position:                           relative;
    display:                            flex;
    cursor:                             pointer;
    width:                              30px;
    height:                             18px;
}

#barmenue.open > .bar{
    background:                         var(--lightcolor);
}

#barmenue > .bar{
    position:                           absolute;
    width:                              100%;
    height:                             4px;
    background:                         var(--darkcolor);
    transition:                         var(--normal);
}

/* BARMENUE - bars */

#barmenue > .bar.top {
    top:                                0;
}
#barmenue > .bar.middle {
    top:                                50%;
    width:                              80%;
}
#barmenue > .bar.bottom {
    top:                                100%;
    width:                              90%;
}

#barmenue.open > .bar.top {
    transform:                          rotate(45deg);
    top:                                50%;
    width: 100%;
}

#barmenue.open > .bar.bottom {
    transform:                          rotate(-45deg);
    top:                                50%;
    width: 100%;
}

#barmenue.open > .bar.middle {width:    0;}

.nav-margin{height:                     var(--navheight);}

/* footer */
#footerlinks{
    position:                           relative;
    display:                            flex;
    flex-direction:                     row;
    align-items:                        center;
    justify-content:                    center;
}

footer .footerlink{
    color:                              var(--lightcolor);
    text-decoration:                    none;
    margin:                             0 2rem;
}

/*NAVIGATION--END----------------------------------------------------------------------------------------------------*/