/* SCOLL-IN ANIMATIONS */

:root {
    --bottombordercolor: #000000; /* Default value – will be overridden by Customizer via inline CSS */
}

.not.visible {
    opacity: 0;
    visibility: hidden;
    transform: translateX(0px);
    transform: translateY(0px);
}

.not.visible.left {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-150px);
}

.not.visible.bottom {
    opacity: 0;
    visibility: hidden;
    transform: translateY(150px);
}

.not.visible.right {
    opacity: 0;
    transform: translateX(150px);
}

.visible,
.visible.right,
.visible.left {
    opacity: 1;
    visibility: visible;
    transform: translateX(0px);
    transform: translateY(0px);
    transition: all ease 1s;
}

.animation-delay-one {
    transition-delay: 0.35s !important;
}

.animation-delay-two {
    transition-delay: 0.6s !important;
}

.animation-delay-three {
    transition-delay: 0.85s !important;
}

/* --- Headers bottom border --- */

.bottom-border {
    margin-bottom: 1.4em;
    padding-left: 0.25em;
    position: relative;
    z-index: 1;
}

.bottom-border:after {
    transition-delay: 0.5s !important;
    transition: all cubic-bezier(0.4, 0, 0.2, 1) 2s;
    left: 0;
    bottom: -0.75em;
    height: 2px;
    background: var(--bottombordercolor);
    /* This is controlled by the Customizer */
    position: absolute;
    z-index: -1;
    content: "";
}

.not.visible .bottom-border:after {
    width: 0%;
}

.visible .bottom-border:after {
    width: 100%;
}