/* ==========================================
   SECTION TRANSITION
   ========================================== */

.section_transition {
    position: relative;
    display: block;
    width: 100%;
    height: 100px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--transition-top, #ffffff);
    line-height: 0;
    margin-bottom: -1px;
}

.section_transition::after {
    position: absolute;
    inset: 0;
    display: block;
    background: var(--transition-bottom, #b02020);
    content: "";
    pointer-events: none;
}

.section_transition.section-transition--rise_right::after {
    clip-path: polygon(
        0 100%,
        100% 0,
        100% 100%
    );
}

.section_transition.section-transition--rise_left::after {
    clip-path: polygon(
        0 0,
        100% 100%,
        0 100%
    );
}

@media only screen and (max-width: 991px) {
    .section_transition {
        height: 70px;
    }
}

@media only screen and (max-width: 767px) {
    .section_transition {
        height: 50px;
    }
}


@media only screen and (max-width: 540px) {
    .section_transition.section-transition--rise_left::after {
        clip-path: polygon(0 0, 100% 70%, 100% 100%, 0 100%);
    }
    .section_transition.section-transition--rise_right::after {
        clip-path: polygon(0 70%, 100% 0, 100% 100%, 0 100%);
    }
}