body:not(.mobile) header {
    -skrollr-animation-name: headershrink;
}

@-skrollr-keyframes headershrink {
    0 {
        max-width: calc(100% + 0px);
    }

    200 {
        max-width: calc(0% + 400px);
    }


}


body:not(.mobile) .header-column.column-logo {
    -skrollr-animation-name: logomove;
}

@-skrollr-keyframes logomove {
    0 {
        transform: translateY(calc(50% - 0.2 * var(--logo-height))) scale(1.4);
    }

    100 {
        transform: translateY(calc(0% - 0 * var(--logo-height))) scale(1);
    }


}


body:not(.mobile) .header-column.menu {
    -skrollr-animation-name: hidemenu;
}

@-skrollr-keyframes hidemenu {
    50 {
        opacity: 0;
    }

    200 {
        opacity: 1;
    }


}


/*

 data-0="max-width: calc(100% + 0px);" data-200="max-width: calc(0% + 400px);"



 <div class="header-column column-logo" data-0="transform: translateY(calc(50% - 0.2 * var(--logo-height))) scale(1.4);"
                data-100="transform: translateY(calc(0% - 0 * var(--logo-height))) scale(1);">


                <div class="header-column menu" data-50="opacity: 0; " data-200="opacity: 1;">