/***DESKTOPS (LARGE SCREEN)
*****************************************************/
@media (min-width: 1920px) {
    :root {
        --fontSizeXXXSmall: 0.8rem;
        --fontSizeXXSmall: 0.9rem;
        --fontSizeXSmall: 1rem;
        --fontSizeSmall: 1.3rem;
        --fontSizeMedium: 1.9rem;
        --fontSizeLarge: 2.5rem;
        --fontSizeXLarge: 3.3rem;
        --fontSizeXXLarge: 5rem;
        --mainWidth: calc(100vw - (var(--spaceX)*2) - var(--menuWidth)*2);
        --logoLetterWidth: calc(13px - var(--letterSpacing)*0.5);
    }
    .isologo {
        width: 160px;
        height: var(--headerHeight);
        position: fixed;
        top: var(--spaceY);
        left: 50%;
        transform: translateX(-50%);
        z-index: 100;
        display: flex;
        align-items: center;
    }
    body#news .agenda {
        background: var(--paletteBrown);
        -webkit-box-shadow: 0 calc(var(--spaceY) * 0.9) 12px calc(var(--spaceX) * 0.6) var(--paletteBrown);
        -moz-box-shadow: 0 calc(var(--spaceY) *  0.9) 12px calc(var(--spaceX) * 0.6) var(--paletteBrown);
        -ms-box-shadow: 0 calc(var(--spaceY) *  0.9) 12px calc(var(--spaceX) * 0.6) var(--paletteBrown);
        box-shadow: 0 calc(var(--spaceY) *  0.9) 12px calc(var(--spaceX) * 0.6) var(--paletteBrown);
    }
}

/***NOTEBOOKS (MEDIUM SCREENS)
*****************************************************/
@media (min-width: 1024px) and (max-width: 1919px) {
}

/***FROM TABLETS TO MOBILES
*****************************************************/
@media (max-width: 1023px) {
    :root {
        /***VIEWPORT HEIGHT***/
        --viewportHeight: calc(var(--vh, 1vh) * 100);
    }
    body {
        height: 100vh; /* Fallback */
        height: var(--viewportHeight);
    }
}

 /***TABLETS, MOBILES (LANDSCAPE)
*****************************************************/
@media (min-width: 481px) and (max-width: 1023px)   {
    :root {
        --fontSizeSmall: 0.75rem;
        --fontSizeMedium: 1rem;
        --fontSizeLarge: 2rem;
    }
}

/***MOBILES (PORTRAIT)
*****************************************************/
@media (max-width: 480px) {
    :root {
        --fontSizeSmall: 0.6rem;
        --fontSizeMedium: 0.9rem;
        --fontSizeLarge: 1.6rem;
    }
    body.scroll_less {
        overflow: hidden;
    }
    nav.menu:not(.on) {
       display: none; 
    }
    nav.menu.on {
        display: inline-block; 
    }
}