/* @group Site Menu
------------------------------------ */
.site-menu { background: var(--bg-dark); position: fixed; top: -200vh; width: 100%; height: 100vh; overflow: hidden; overflow-y: auto; z-index: 9; 
    -webkit-transition: background .2s cubic-bezier(0.4,0.0,0.2,1), height .8s cubic-bezier(0.4,0.0,0.2,1), top .8s cubic-bezier(0.4,0.0,0.2,1);
    -moz-transition: background .2s cubic-bezier(0.4,0.0,0.2,1), height .8s cubic-bezier(0.4,0.0,0.2,1), top .8s cubic-bezier(0.4,0.0,0.2,1);
    -ms-transition: background .2s cubic-bezier(0.4,0.0,0.2,1), height .8s cubic-bezier(0.4,0.0,0.2,1), top .8s cubic-bezier(0.4,0.0,0.2,1);
    -o-transition: background .2s cubic-bezier(0.4,0.0,0.2,1), height .8s cubic-bezier(0.4,0.0,0.2,1), top .8s cubic-bezier(0.4,0.0,0.2,1);
    transition: background .2s cubic-bezier(0.4,0.0,0.2,1), height .8s cubic-bezier(0.4,0.0,0.2,1), top .8s cubic-bezier(0.4,0.0,0.2,1);
}
.site-menu > .row { padding-top: 10.3rem; }
.site-menu > .img-box::after { content: ''; position: absolute; top: 0; right: 2.7rem; bottom: 0; left: 0; background: linear-gradient(270deg, rgba(35,38,37,0) 0%, rgba(35,38,37,1) 100%); }
/* Article
----------------------*/
.site-menu article ul:not(.sub-menu) > li { color: var(--light-grey); font: 400 2.8em / 1.143em var(--bilo-font); letter-spacing: 4.48px; margin: 0 0 3rem; padding: 0; }
.site-menu article ul:not(.sub-menu) > li:last-child { margin: 0 0 5.2rem; }
.site-menu article ul:not(.sub-menu) li a { color: var(--light-grey); }
.site-menu article ul:not(.sub-menu) li em { display: block; font-weight: 300; }
.site-menu article ul.sub-menu li { font-size: 1rem; padding: 0; position: relative; }
.site-menu article .hover { opacity: 0; position: absolute; display: flex; align-items: center; top: -1.7rem;
    -webkit-transition: opacity 0.3s linear;
    -moz-transition: opacity 0.3s linear;
    -ms-transition: opacity 0.3s linear;
    -o-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
}
.site-menu article .hover .img-box { height: 12rem; width: 12rem; margin-right: .6rem; }
.site-menu article .sub-menu .large em { display: inline; }
.site-menu article ul:not(.sub-menu) > li:first-child .large em { display: block; }
/* Aside
----------------------*/
.site-menu aside li { color: var(--timeline-text); font: 500 1.4em / 1.286em var(--bilo-font); letter-spacing: 2.24px; text-transform: uppercase; padding: 0; margin: 0 0 3.1rem; }
.site-menu aside li:last-child { margin: 0; }
.site-menu aside a { color: var(--timeline-text); }
/* Footer
----------------------*/
.site-menu footer { text-align: center; }
.site-menu footer .bttns-circle { margin: 0 0 8.5rem; display: flex; justify-content: space-between; padding: 0 3.5rem; }
.site-menu footer .link-circle { color: var(--light-grey-2); font-size: 1.8em; font-weight: 400; letter-spacing: 2.88px; line-height: 1.225em; }
.site-menu footer .link-circle i { height: 7rem; width: 6.3rem; margin-left: 0; margin-right: -3rem; }
.site-menu footer .link-circle i svg { stroke: var(--light-grey); }
.site-menu footer .link-circle i .arrow-icon--circle { stroke-dasharray: 250 100; stroke-dashoffset: -30; }
.site-menu footer .menu { margin: 0 0 2.9rem; display: flex; justify-content: space-between; flex-wrap: wrap; }
.site-menu footer li { font-size: 3.8em; }
.site-menu footer li a { color: var(--light-grey); }
.site-menu footer p { color: var(--title-light); font: 400 1.4em / 1em var(--bilo-font); letter-spacing: 2.24px; margin: 0 0 9.4rem }
.site-menu footer small { color: var(--light-grey); font: 400 1.3em / 1.542em var(--bilo-font); letter-spacing: 2.08px; margin: 0 0 10.6rem; display: block; }
.site-menu footer small a { color: var(--light-grey); font-weight: 500; text-decoration: underline; }
/* showMenu
----------------------*/
body[data-state="opened-menu"] .site-menu { top: 0; }
body[data-state="opened-menu"] .site-nav .link-circle { color: var(--light-grey-2);  }
body[data-state="opened-menu"] .site-nav .link-circle i svg { stroke: var(--light-grey); }
@media only screen
and (min-width : 961px) {
    .site-menu > .row { height: 100vh; padding: 17.8rem 0 0; align-items: flex-start; }
    .site-menu > .img-box { height: 100vh; width: 100vw; }
    
    /* Article
    ----------------------*/
    .site-menu article ul:not(.sub-menu) > li { font-size: 3.6em; font-weight: 300; letter-spacing: 5.76px; line-height: 1.167em; margin: 0 0 4rem; height: 8.9rem; display: flex; align-items: center; width: 100%; }
    .site-menu article ul:not(.sub-menu) > li:last-child { margin: 0 0 5.2rem; }
    .site-menu article ul:not(.sub-menu) > li > a { display: inline-block; min-width: 24.5rem; }
    .site-menu .sub-menu { opacity: 0; display: inline-flex; 
        -webkit-transition: opacity .3s linear;
        -moz-transition: opacity .3s linear;
        -ms-transition: opacity .3s linear;
        -o-transition: opacity .3s linear;
        transition: opacity .3s linear;
    }
    .site-menu .sub-menu li { margin-left: 10rem; }
    .Explorer .site-menu li:hover .sub-menu,
    .Mozilla.v11 .site-menu li:hover .sub-menu { opacity: 1; }
    .Explorer .site-menu article ul:not(.sub-menu) > li a:hover,
    .Mozilla.v11 .site-menu article ul:not(.sub-menu) > li a:hover { color: var(--green); }
    @media (hover: hover) {
        .site-menu article ul:not(.sub-menu) > li a:hover { color: var(--green); }
        .site-menu li:hover .sub-menu { opacity: 1; }
    }
    /* Aside
    ----------------------*/
    .site-menu aside .menu { display: flex; justify-content: space-between; }
    .site-menu aside li { font-size: 1.8em; letter-spacing: 2.88px; line-height: 1.225em; margin-right: 2rem; }
    .site-menu aside li a { color: var(--light-grey-2); max-width: 80%; display: block; }
    .Explorer .site-menu aside li a:hover,
    .Mozilla.v11 .site-menu aside li a:hover { text-decoration: underline; }
    .Explorer .site-menu article a:hover > .hover,
    .Mozilla.v11 .site-menu article a:hover > .hover { opacity: 1; }
    .Explorer .site-menu article a:hover > .large,
    .Mozilla.v11 .site-menu article a:hover > .large { opacity: 0; }
    @media (hover: hover) {
        .site-menu aside li a:hover { text-decoration: underline; }
        .site-menu article a:hover > .large { opacity: 0; }
        .site-menu article a:hover > .hover { opacity: 1; }
    }
    /* Footer
    ----------------------*/
    .site-menu footer { padding-right: 10rem; }
    .site-menu footer li { font-size: 2.6em; }
    /* showMenu
    ----------------------*/
    body[data-state="opened-menu"] .site-nav { border-bottom: none; }
    body[data-state="opened-menu"] .books-bttn .link-circle { position: relative; top: .5rem; }
    body[data-state="opened-menu"] .books-bttn .link-circle i { height: 7rem; width: 6.3rem; margin-right: -3.5rem; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
    .site-menu > .img-box { position: fixed; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1300px) {
    .site-menu .sub-menu li { margin-left: 8rem; }
}
@media only screen
and (min-width : 1920px) {
    /* Footer
    ----------------------*/
    .site-menu footer { padding-right: 15rem; }
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    
    /* Language
    ----------------------*/
    .site-menu article .language:not(.sub-menu) li { display: inline-block; font-size: 1.6em; letter-spacing: .1em; margin: 0 3rem 7rem 0; }
    .language .active a { text-decoration: underline; text-underline-position: under; }
    /* Article
    ----------------------*/
    .site-menu article .sub-menu { display: none; }
    /* Aside
    ----------------------*/
    .site-menu aside { margin: 0 0 22.4rem; }
    /* Footer
    ----------------------*/
    .site-menu footer .menu { width: 20.5rem; margin: 0 auto; }
    .site-menu footer .menu li { width: 100%; max-width: 50%; text-align: center; margin: 0 0 6.9rem; padding: 0; }
}

/* @end */