/*angle*/
.bg--angle {
    overflow: hidden;
    position: relative;
}

    .bg--angle::before {
        border-top: 0;
        -webkit-transform: skewX(-40deg);
        transform: skewX(-40deg);
    }

    .bg--angle.left::before {
        left: 40%;
    }

    .bg--angle.right::before {
        right: 40%;
    }


    .bg--angle.bg--pink::before {
        background-color: rgb(103,55,132,0.3);
    }

    .bg--angle.bg--pink-25::before {
        background-color: rgb(176,33,145, 0.1);
    }

    .bg--angle.bg--mid-purple::before {
        background-color: rgb(103,55,132,0.3);
    }

    .bg--angle.bg--mid-purple-25::before {
        background-color: rgb(148,42,141,0.1);
    }

    .bg--angle.bg--dark-purple::before {
        background-color: rgb(130,199,179,0.2);
    }

    .bg--angle.bg--dark-purple-25::before {
        background-color: rgb(103,55,132,0.1);
    }

    .bg--angle.bg--light-green::before {
        background-color: rgb(130,199,179, 0.2);
    }

    .bg--angle.bg--light-green-25::before {
        background-color: rgb(130,199,179, 0.1);
    }

    .bg--angle.bg--turquoise::before {
        background-color: rgb(130,199,179, 0.2);
    }

    .bg--angle.bg--turquoise-25::before {
        background-color: rgb(130,199,179, 0.1);
    }

    .bg--angle.bg--dark-green::before {
        background-color: rgb(130,199,179, 0.1);
    }

    .bg--angle.bg--dark-green-25::before {
        background-color: rgb(79,119,107, 0.1);
    }

    .bg--angle.bg--light-blue::before {
        background-color: rgb(79,119,107, 0.1);
    }

    .bg--angle.bg--light-blue-25::before {
        background-color: rgb(217,222,246, 0.1);
    }

    .bg--angle.bg--mid-blue::before {
        background-color: rgb(217,222,246, 0.2);
    }

    .bg--angle.bg--mid-blue-25::before {
        background-color: rgb(79,119,107, 0.1);
    }

    .bg--angle.bg--dark-blue::before {
        background-color: rgb(217,222,246, 0.2);
    }

    .bg--angle.bg--dark-blue-25::before {
        background-color: rgb(79,119,107, 0.1);
    }

    .bg--angle.bg--black::before {
        background-color: rgb(191,191,191);
    }

    .bg--angle.bg--black-25::before {
        background-color: rgb(191,191,191, 0.1);
    }

    .bg--angle.bg--mid-grey::before {
        background-color: rgb(229,229,229);
    }

    .bg--angle.bg--mid-grey-25::before {
        background-color: rgb(229,229,229,0.2);
    }

    .bg--angle.bg--light-grey::before {
        background-color: rgb(253,253,253);
    }

    .bg--angle.bg--light-grey-25::before {
        background-color: rgb(253,253,253,0.2);
    }


@media (min-width: 992px) {
    .bg--angle::before {
        border-top-width: 2.5rem;
        left: 75% !important;
    }
}
.bg--angle::before {
    background-color: #fff;
    border-top: 32px solid #fff;
    bottom: 0;
    display: block;
    left: 50%;
    position: absolute;
    top: 0;
    -webkit-transform: skewX(40deg);
    transform: skewX(40deg);
    width: 100%;
    content: '';
}