﻿.divider {
    width: 100%;
    height: 70px;
    overflow: hidden;
    position: relative;
}

    .divider.black-slope-up-top::before {
        content: '';
        font-family: 'shape divider from ShapeDividers.com';
        position: absolute;
        z-index: 3;
        pointer-events: none;
        background-repeat: no-repeat;
        bottom: -0.1vw;
        left: -0.1vw;
        right: -0.1vw;
        top: -0.1vw;
        background-size: 100% 70px;
        background-position: 50% 0%;
        background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 1" preserveAspectRatio="none"><path d="M0 0l10 0l-10 1" fill="%23000000"/></svg>');
    }

    .divider.white-slope-up-top::before {
        content: '';
        font-family: 'shape divider from ShapeDividers.com';
        position: absolute;
        z-index: 3;
        pointer-events: none;
        background-repeat: no-repeat;
        bottom: -0.1vw;
        left: -0.1vw;
        right: -0.1vw;
        top: -0.1vw;
        background-size: 100% 70px;
        background-position: 50% 0%;
        background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 1" preserveAspectRatio="none"><path d="M0 0l10 0l-10 1" fill="%23ffffff"/></svg>');
    }

    .divider.white-slope-down-top::before {
        content: '';
        font-family: 'shape divider from ShapeDividers.com';
        position: absolute;
        z-index: 3;
        pointer-events: none;
        background-repeat: no-repeat;
        bottom: -0.1vw;
        left: -0.1vw;
        right: -0.1vw;
        top: -0.1vw;
        background-size: 100% 70px;
        background-position: 50% 0%;
        transform: rotateY(180deg);
        background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 1" preserveAspectRatio="none"><path d="M0 0l10 0l-10 1" fill="%23ffffff"/></svg>');
    }

    .divider.white-slope-up-bottom::before {
        content: '';
        font-family: 'shape divider from ShapeDividers.com';
        position: absolute;
        z-index: 3;
        pointer-events: none;
        background-repeat: no-repeat;
        bottom: -0.1vw;
        left: -0.1vw;
        right: -0.1vw;
        top: -0.1vw;
        background-size: 100% 70px;
        background-position: 50% 100%;
        transform: rotateY(180deg);
        background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 1" preserveAspectRatio="none"><path d="M0 0v1h10z" fill="%23ffffff"/></svg>');
    }
 

@media (min-width:2100px) {

    .divider::before {
        background-size: 100% calc(2vw + 70px);
    }
}

.big-photo .divider {
    position: absolute;
    bottom: 0;
}
