.id-custom-header-before,
.id-custom-header-after,
.id-custom-header-wrapper::before,
.id-custom-header-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.id-custom-header-row,
.id-custom-header-outer,
.id-custom-header-inner {
    height: 100%;
}

.id-custom-header-inner {
/*    z-index: 9;*/
    position: relative;
}

.id-custom-header {
    position: absolute;
    margin-top: -1em;
    top: 50%;
    left: 0;
    right: auto;
    bottom: auto;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

.custom-header-content > * {
    margin: auto;
}

.id-custom-header[data-direction='left'] {
    -webkit-animation-name: driftLeft;
    animation-name: driftLeft;
}


.id-custom-header[data-direction='right'] {
    left: auto;
    right: 0;
    -webkit-animation-name: driftRight;
    animation-name: driftRight;
}

.id-custom-header[data-direction='down'] {
    -webkit-animation-name: driftDown;
    animation-name: driftDown;
}

.id-custom-header[data-direction='up'] {
    -webkit-animation-name: driftUp;
    animation-name: driftUp;
}

@-webkit-keyframes driftLeft {
    from {opacity: 0; left: -100%;}
    to {opacity: 1; left: 0;
    }
}

@keyframes driftLeft {
    from {opacity: 0; left: -100%;}
    to {opacity: 1; left: 0;
    }
}

@-webkit-keyframes driftRight {
    from {opacity: 0; right: -100%;}
    to {opacity: 1; right: 0;
    }
}

@keyframes driftRight {
    from {opacity: 0; right: -100%;}
    to {opacity: 1; right: 0;
    }
}


@-webkit-keyframes driftDown {
    from {opacity: 0;  top: 0%;}
    to {opacity: 1;  top: 50%;
    }
}

@keyframes driftDown {
    from {opacity: 0; top: 0%;}
    to {opacity: 1;  top: 50%; }
}


@-webkit-keyframes driftUp {
    from {opacity: 0;  top: 100%;}
    to {opacity: 1;  top: 50%;
    }
}

@keyframes driftUp {
    from {opacity: 0; top: 100%;}
    to {opacity: 1;  top: 50%; }
}