@keyframes fadeInMoveUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInMoveLeft {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.hero-block {
    h1 {
        animation: 2s fadeInMoveUp both;
    }

    h3 {
        animation: 2s fadeIn 1s both;
    }

    .load-last {
        animation: 2s fadeIn 2s both;
    }
}

.mortgages-block {

    h2 {
        opacity: 0;

        &+hr {
            opacity: 0;
        }
    }

    .right-column {
        opacity: 0;

    }

    .left-column {

        .bb-collapsible-container {
            opacity: 0;
        }

    }

    &.animate {
        h2 {
            animation: 2s fadeInMoveUp both;

            &+hr {
                animation: 2s fadeIn both;
            }
        }

        .right-column {
            animation: 2s fadeIn 0.5s both;
        }

        .left-column {

            .bb-collapsible-container {
                animation: 2s fadeIn 1s both;
                animation-delay: calc(1s + (sibling-index() * 0.3s));
            }

        }

    }
}

.why-use-bb {

    h2 {
        opacity: 0;
    }

    .textImageImage,
    .textImageContent {
        opacity: 0;
    }

    &.animate {
        h2 {
            animation: 2s fadeInMoveUp both;
        }

        .wubb-1 {
            .textImageImage {
                animation: 2s fadeIn 0.5s both;
            }

            .textImageContent {
                animation: 2s fadeInMoveLeft 1s both;
            }
        }

        .wubb-2 {
            .textImageImage {
                animation: 2s fadeIn 1.5s both;
            }

            .textImageContent {
                animation: 2s fadeInMoveLeft 2s both;
            }
        }

        .wubb-3 {
            .textImageImage {
                animation: 2s fadeIn 2.5s both;
            }

            .textImageContent {
                animation: 2s fadeInMoveLeft 3s both;
            }
        }

        .wubb-4 {
            .textImageImage {
                animation: 2s fadeIn 3.5s both;
            }

            .textImageContent {
                animation: 2s fadeInMoveLeft 4s both;
            }
        }

    }
}

.animated-section {

    h1,
    h2,
    >.wp-block-columns,
    &.wp-block-columns {
        opacity: 0;

        ~*,
        & .wp-block-column {
            opacity: 0;
        }
    }

    &.animate {

        h1,
        h2,
        >.wp-block-columns,
        &.wp-block-columns {
            animation: 2s fadeInMoveUp both;

            ~*,
            & .wp-block-column {
                animation: 2s fadeIn both;
                animation-delay: calc(sibling-index() * 0.5s);
            }
        }
    }
}