:root {
    --background-text-content: '';
  }
.dipi-dh-main{
    display: flex;
}
.dipi-dual-heading .dipi-dh-main::before{
    content: var(--background-text-content);
    z-index: 1;
    position: absolute;
    transform: translate(-50%, -50%);
    display: block;
    width: 100%;
    text-align: center;
    border-style: solid;
    border-width: 0;
}

.dipi-dual-heading .dipi-dh-first-heading,
.dipi-dual-heading .dipi-dh-second-heading{
    position: relative;
    z-index: 2;
    overflow: hidden;
    display: inline-block;
}

.dipi-dual-heading .dipi-dh-main .dipi-dh-second-heading:before,
.dipi-dual-heading .dipi-dh-main .dipi-dh-first-heading:before{
    display: block;
    width: 0%;
    height: 0%;
    background: #eeeeee;
    position: absolute;
    z-index: 1;
}

.dipi-dual-heading.dipi-dh-waypoint .dipi-dh-first-heading:before,
.dipi-dual-heading.dipi-dh-waypoint .dipi-dh-second-heading:before {
    animation-timing-function: ease;
    animation-fill-mode: forwards;
 }
 .dipi-dual-heading .dipi-dh-first-heading .dipi-dh-bg-container,
 .dipi-dual-heading .dipi-dh-second-heading .dipi-dh-bg-container{
    display: block;
 }
 .dipi-dual-heading.dipi-dh-waypoint .dipi-dh-first-heading .dipi-dh-animation-container,
.dipi-dual-heading.dipi-dh-waypoint .dipi-dh-second-heading .dipi-dh-animation-container{
    animation-fill-mode: forwards;
    visibility: hidden;
}

.et-fb.et-bfb .dipi-dual-heading.dipi-dh-waypoint .dipi-dh-first-heading .dipi-dh-animation-container,
.et-fb.et-bfb .dipi-dual-heading.dipi-dh-waypoint .dipi-dh-second-heading .dipi-dh-animation-container{
    visibility: visible;
}
/* Reveal Effects */
@keyframes dipiDHreveal {
    0% {  visibility: hidden;}
    35% { visibility: hidden;}
    70% { visibility: hidden;}
    100% {  visibility: visible;}
}
@keyframes dipiDHSlideLeft {
    0%   { height: 100%;width: 0;   top:0;left:0;right:auto;}
    35%  { height: 100%;width: 100%;top:0;left:0;right:auto;}
    75%  { height: 100%;width: 100%;top:0;right:0;left:auto;}
    100% { height: 100%;width: 0;   top:0;right:0;left:auto; }
}
@keyframes dipiDHSlideRight {
    0%   { height: 100%;width: 0;   top:0;right:0;left:auto;}
    35%  { height: 100%;width: 100%;top:0;right:0;left:auto;}
    75%  { height: 100%;width: 100%;top:0;left:0;right:auto;}
    100% { height: 100%;width: 0;   top:0;left:0;right:auto;}
}
@keyframes dipiDHFadeOut {
    0%   { height: 100%;width: 100%;opacity: 0 }
    35%  { height: 100%;width: 100%;opacity: 1 }
    70%  { height: 100%;width: 100%;opacity: 1 }
    100% { height: 100%;width: 100%;opacity: 0; }
}
@keyframes dipiDHSlideUp {
    0%   { height: 0%;  width: 100%;  left:0;bottom:0;top:auto;}
    35%  { height: 100%;width: 100%;  left:0;bottom:0;top:auto;}
    75%  { height: 100%;width: 100%;  left:0;bottom:auto;top:0;}
    100% { height: 0%;  width: 100%;  left:0;bottom:auto;top:0;}
}
@keyframes dipiDHSlideDown {
    0%   { height: 0%;  width: 100%;  left:0;top:0;bottom:auto;}
    35%  { height: 100%;width: 100%;  left:0;top:0;bottom:auto;}
    75%  { height: 100%;width: 100%;  left:0;top:auto;bottom:0;}
    100% { height: 0%;  width: 100%;  left:0;top:auto;bottom:0;}
}
/* End of Reveal Effects */

@keyframes dipiBGLeftToRight {
    0%   { background-position: 0 0 ; }
    100% { background-position: -100% 0; }
}
@keyframes dipiBGRightToLeft {
    0%   { background-position: 0 0 ; }
    100% { background-position: 100% 0; }
}
@keyframes dipiBGTopToBottom {
    0%   { background-position: 0 0 ; }
    100% { background-position: 0 -100%; }
}
@keyframes dipiBGBottomToTop {
    0%   { background-position: 0 0 ; }
    100% { background-position: 0 100%; }
}

@keyframes dipiBGHorizontal {
    0%   { background-position: 0 0 ; }
    50% { background-position: 100% 0; }
    100% { background-position: 0% 0; }
}

@keyframes dipiBGVertical {
    0%   { background-position: 0 0 ; }
    50% { background-position: 0 100%; }
    100% { background-position: 0 0; }
}

h1.dipi-dh-main,
h2.dipi-dh-main,
h3.dipi-dh-main,
h4.dipi-dh-main,
h5.dipi-dh-main,
h6.dipi-dh-main{
    padding-bottom: 0;
}