.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;
    -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-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 > .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;
}

/*
* -----------------------------------------------------------------------------
* 
* 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;
    }
}