/* Config Values
    ================================================== */
    :root
    {
        --theme-fs:                     1.6rem;
        
        --theme-lh:                     3.0rem;
        --theme-lh-x0-125:              0.375rem;
        --theme-lh-x0-25:               0.75rem;
        --theme-lh-x0-5:                1.5rem;
        --theme-lh-x0-75:               2.25rem;
        --theme-lh-x1-5:                4.5rem;
        --theme-lh-x2:                  6.0rem;
        --theme-lh-x3:                  9.0rem;
        
        --theme-lh-minus:               -3.0rem;
        --theme-lh-x0-125-minus:        -0.375rem;
        --theme-lh-x0-25-minus:         -0.75rem;
        --theme-lh-x0-5-minus:          -1.5rem;
        --theme-lh-x0-75-minus:         -2.25rem;
        --theme-lh-x1-5-minus:          -4.5rem;
        --theme-lh-x2-minus:            -6.0rem;
        --theme-lh-x3-minus:            -9.0rem;
        
        --theme-fw-regular:             400;
        --theme-fw-bold:                500;
        --theme-fw-extrabold:           700;
        --theme-fw-blackbold:           900;
    }





    /* LAYOUT FOR XLARGE
    ================================================== */
    body
    {
        width: 100%;
        background: var(--theme-color-1-2);
        font: var(--theme-fs)/var(--theme-lh) 'Roboto', Arial, sans-serif;
        color: var(--theme-color-1-1);
    }

    .header-root .header-logoarea                                           { display: block; }

    .header-root .navigation-logo                                           { display: none; }
    .header-root .navigation-button                                         { display: none; }
    .header-root .navigation-content                                        { display: block; }
    .header-root .navigation-content        .navigation ul li.lang          { display: none; }
    .header-root .navigation-content-lang                                   { display: block; }

    .header-root .header-navigation-mobile                                  { display: none; }





    /* LAYOUT FOR LARGE
    ================================================== */
    @media handheld, only screen and (max-width: 1199px)
    {
        /* Config Values
        ================================================== */
        :root
        {
            --theme-fs:                     1.4rem;

            --theme-lh:                     2.8rem;
            --theme-lh-x0-125:              0.35rem;
            --theme-lh-x0-25:               0.7rem;
            --theme-lh-x0-5:                1.4rem;
            --theme-lh-x0-75:               2.1rem;
            --theme-lh-x1-5:                4.2rem;
            --theme-lh-x2:                  5.6rem;
            --theme-lh-x3:                  8.4rem;

            --theme-lh-minus:               -2.8rem;
            --theme-lh-x0-125-minus:        -0.35rem;
            --theme-lh-x0-25-minus:         -0.7rem;
            --theme-lh-x0-5-minus:          -1.4rem;
            --theme-lh-x0-75-minus:         -1.1rem;
            --theme-lh-x1-5-minus:          -4.2rem;
            --theme-lh-x2-minus:            -5.6rem;
            --theme-lh-x3-minus:            -8.4rem;
        }
    }





    /* LAYOUT FOR TABLET
    ================================================== */
    @media only screen and (max-width: 991px)
    {        
        .header-root .header-logoarea                                       { display: none; }

        .header-root .navigation-logo                                       { display: block; }
        .header-root .navigation-button                                     { display: block; }
        .header-root .navigation-content                                    { display: none; }
        .header-root .navigation-content        .navigation ul li.lang      { display: block; }
        .header-root .navigation-content-lang                               { display: none; }

        .header-root .header-navigation-mobile                              { display: block; }
    }





    /* LAYOUT FOR MOBILE
    ================================================== */
    @media handheld, only screen and (max-width: 767px)
    {
        /* Config Values
        ================================================== */
        :root
        {
            --theme-fs:                     1.6rem;

            --theme-lh:                     3.0rem;
            --theme-lh-x0-125:              0.375rem;
            --theme-lh-x0-25:               0.75rem;
            --theme-lh-x0-5:                1.5rem;
            --theme-lh-x0-75:               2.25rem;
            --theme-lh-x1-5:                4.5rem;
            --theme-lh-x2:                  6.0rem;
            --theme-lh-x3:                  9.0rem;

            --theme-lh-minus:               -3.0rem;
            --theme-lh-x0-125-minus:        -0.375rem;
            --theme-lh-x0-25-minus:         -0.75rem;
            --theme-lh-x0-5-minus:          -1.5rem;
            --theme-lh-x0-75-minus:         -2.25rem;
            --theme-lh-x1-5-minus:          -4.5rem;
            --theme-lh-x2-minus:            -6.0rem;
            --theme-lh-x3-minus:            -9.0rem;
        }
    }