:root {

    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*------------------------------------@LAYOUT-------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/

    --layout-l: 1600px;
    --layout-m: 1344px;
    --layout-s: 1124px;

    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------@GAP--------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/

    --gap-xl: 184px;
    --gap-l: 120px;
    --gap-m: 64px;
    --gap-s: 32px;
    --gap-xs: 12px;

    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*-------------------------------------@COLOR-------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/

    --color-white: #FFFFFF;
    --color-gray-white: #FAFAFA;
    --color-gray-smoke: #EBEBEB;
    --color-gray-platinum: #CCCCCC;
    --color-gray-french: #ADADAD;
    --color-gray-battleship: #8F8F8F;
    --color-gray-dim: #707070;
    --color-gray-outer-space: #474747;
    --color-black-eerie: #202020; 
    --color-black: #000000;

    --color-orange-06:#F58723;

    --color-blue-04:#646DB3;

    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------@TEXT-------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/

    /*--------------------------------------------------------------------------------*/
    /*-----------------------------------@FONT FAMILY---------------------------------*/
    /*--------------------------------------------------------------------------------*/

    --text-family-head: "Jost", sans-serif;
    --text-family-body: "Montserrat", sans-serif;

    /*--------------------------------------------------------------------------------*/
    /*------------------------------------@FONT SIZE----------------------------------*/
    /*--------------------------------------------------------------------------------*/

    /* @HEAD */

    --text-head-xl-size: 62px;
    --text-head-l-size: 52px;
    --text-head-m-size: 42px;
    --text-head-s-size: 32px;
    --text-head-xs-size: 22px;

    /* @BODY */

    --text-body-xl-size: 20px;
    --text-body-l-size: 18px;
    --text-body-m-size: 16px;
    --text-body-s-size: 14px;
    --text-body-xs-size: 12px;

    /*--------------------------------------------------------------------------------*/
    /*------------------------------------@LINE HEIGHT--------------------------------*/
    /*--------------------------------------------------------------------------------*/

    /* @HEAD */

    --text-head-xxl-line-height: 1.2em;
    --text-head-xl-line-height: 1.2em;
    --text-head-l-line-height: 1.2em;
    --text-head-m-line-height: 1.2em;
    --text-head-s-line-height: 1.2em;
    --text-head-xs-line-height: 1.2em;

    /* @BODY */

    --text-body-xl-line-height: 1.5em;
    --text-body-l-line-height: 1.5em;
    --text-body-m-line-height: 1.5em;
    --text-body-s-line-height: 1.5em;
    --text-body-xs-line-height: 1.5em;

    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*-----------------------------------@ELEMENTS------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/

    --element-header-height: 104px ; /* set dynamicly on set-css-root.js, by default 100px to avoid big scroll jumps before js loads */

    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*------------------------------------@ANIMATIONS---------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/

    /*--------------------------------------------------------------------------------*/
    /*------------------------------------@TRANSITION---------------------------------*/
    /*--------------------------------------------------------------------------------*/

    --animation-transition-01: all calc(1/3*1s) var(--animation-easing-01);
    --animation-transition-02: all calc(1/6*1s) var(--animation-easing-01);

    /*--------------------------------------------------------------------------------*/
    /*---------------------------------------@EASING----------------------------------*/
    /*--------------------------------------------------------------------------------*/

    --animation-easing-01: cubic-bezier(0.4, 0, 1, 1);

}
  
@media (min-width: 768px) and (max-width: 1024px) {

    :root {

        /*--------------------------------------------------------------------------------*/
        /*--------------------------------------------------------------------------------*/
        /*--------------------------------------------------------------------------------*/
        /*--------------------------------------------------------------------------------*/
        /*-----------------------------------$ELEMENTS------------------------------------*/
        /*--------------------------------------------------------------------------------*/
        /*--------------------------------------------------------------------------------*/
        /*--------------------------------------------------------------------------------*/
        /*--------------------------------------------------------------------------------*/

        --element-header-height: 66px ; /* set dynamicly on set-css-root.js, by default 66px to avoid big scroll jumps before js loads */

    }

}
  
@media (max-width: 767px) {

    :root {

        /*--------------------------------------------------------------------------------*/
        /*--------------------------------------------------------------------------------*/
        /*--------------------------------------------------------------------------------*/
        /*--------------------------------------------------------------------------------*/
        /*--------------------------------------%GAP--------------------------------------*/
        /*--------------------------------------------------------------------------------*/
        /*--------------------------------------------------------------------------------*/
        /*--------------------------------------------------------------------------------*/
        /*--------------------------------------------------------------------------------*/

        --gap-xl: 144px;
        --gap-l: 80px;
        --gap-m: 56px;
        --gap-s: 32px;
        --gap-xs: 12px;

        /*--------------------------------------------------------------------------------*/
        /*--------------------------------------------------------------------------------*/
        /*--------------------------------------------------------------------------------*/
        /*--------------------------------------------------------------------------------*/
        /*--------------------------------------%TEXT-------------------------------------*/
        /*--------------------------------------------------------------------------------*/
        /*--------------------------------------------------------------------------------*/
        /*--------------------------------------------------------------------------------*/
        /*--------------------------------------------------------------------------------*/

        /*--------------------------------------------------------------------------------*/
        /*------------------------------------%FONT SIZE----------------------------------*/
        /*--------------------------------------------------------------------------------*/

        /* @HEAD */

        --text-head-xl-size: 42px;
        --text-head-l-size: 36px;
        --text-head-m-size: 30px;
        --text-head-s-size: 26px;
        --text-head-xs-size: 22px;

        /*--------------------------------------------------------------------------------*/
        /*--------------------------------------------------------------------------------*/
        /*--------------------------------------------------------------------------------*/
        /*--------------------------------------------------------------------------------*/
        /*-----------------------------------%ELEMENTS------------------------------------*/
        /*--------------------------------------------------------------------------------*/
        /*--------------------------------------------------------------------------------*/
        /*--------------------------------------------------------------------------------*/
        /*--------------------------------------------------------------------------------*/

        --element-header-height: 66px ; /* set dynamicly on set-css-root.js, by default 66px to avoid big scroll jumps before js loads */

    }

}