.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;
    z-index: 1;
}

.id-custom-header-wrapper {
    overflow: hidden;
    position: relative;
}

.id-custom-header-row {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.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: 0;
    top: 0;
    left: 0;
    right: auto;
    bottom: 0;

    display: block;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    -ms-flex-align: center;
    -o-align-content: center;
    -ms-align-content: center;
    -moz-align-content: center;
    -webkit-align-content: center;
    align-content: center;
    -ms-flex-align: center;
    -o-align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    align-items: center;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

.no-flexbox .custom-header-content  {
    display: table;
    table-layout: fixed;
    height: 50%;
    margin-top: 80px;
    vertical-align: middle;
}

.no-flexbox .custom-header-content > * {
    display: table-row;
    /*display: table-cell;*/
    width: 100%;
    height: 30%;
}


/*.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: -100%;}
    to {opacity: 1;  top: 0%;
    }
}

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


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

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


/*
* -----------------------------------------------------------------------------
*
* Parallax
*
* -----------------------------------------------------------------------------
*/

.id-custom-header-cta-button {
    margin: 1em auto;
}
.id-custom-header-cta-button > a.btn {
    white-space: normal;
}


/*
* -----------------------------------------------------------------------------
*
* Parallax
*
* -----------------------------------------------------------------------------
*/

[data-paralax='1'] {}


/*
* ------------------------------------------------------------------------
*
* Scroll Icons CSS
*
* ------------------------------------------------------------------------
*/

p.id-header-scroll-icon-wrapper {
    margin: 0 auto;
    width: 100%;
}

.id-header-scroll-icon {
    display: block;
    position: relative;
    z-index: 99;
    width: 100%;
}

.id-header-scroll-icon > i.fa {
    position: absolute;
    top: auto;
    left: auto;
    right: auto;
    bottom: 75px;
}


/*
* -----------------------------------------------------------------------------
*
* Custom Header Background Video - HTML5 Video
*
* -----------------------------------------------------------------------------
*/


.id-custom-header-cta-image {
    position: relative;
}

.id-custom-header-cta-image::before {
    content: '';
    display: block;
    padding-bottom: 100%;
}

.id-custom-header-cta-image-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}


/*
* -----------------------------------------------------------------------------
*
* # Header
*
* -----------------------------------------------------------------------------
*/

.id-custom-header-overlay-image {
    position: absolute;
    top: 30px;
    left: auto;
    right: 30px;
    bottom: auto;
    z-index: 1040;
}
.id-custom-header-overlay-image::before {
    display: block;
    padding-bottom: 100%;
    content: '';
}
.id-custom-header-overlay-image>img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}


/*
* -----------------------------------------------------------------------------
*
* Custom Header Background Video - HTML5 Video
*
* -----------------------------------------------------------------------------
*/


.id-custom-header-video-background {
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}


.id-custom-header-video-background > video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 1. No object-fit support: */
@media (min-aspect-ratio: 16/9) {
    .id-custom-header-video-background > video {
        height: 300%;
        top: -100%;
    }
}

@media (max-aspect-ratio: 16/9) {
    .id-custom-header-video-background > video {
        width: 300%;
        left: -100%;
    }
}


/* If supporting object-fit, overriding (1): */

@supports (object-fit: cover) {
    .id-custom-header-video-background > video {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}