.wn-shape-divider {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 77;
}

.wn-shape-divider[class*="wn-shape-bottom"] {
    position: absolute;
    bottom: 0;
}

.wn-shape-divider svg {
    z-index: 2;
}

#shapedivider4,
#shapedivider4-bottom {
    background-repeat: no-repeat;
}

/* Divider 1 */
.wn-shape-divider.wn-shape-top-1:before,
.wn-shape-divider.wn-shape-bottom-1:before {
    content: '';
    display: block;
}

.wn-shape-divider.wn-shape-top-1:before {
    border-left: 100vw solid #000;
    border-bottom: 130px solid transparent;
    border-right: 0;
    border-top: 0;
}

.wn-shape-divider.wn-shape-bottom-1:before {
    position: absolute;
    bottom: 0;
    border-right: 100vw solid #000;
    border-top: 130px solid transparent;
    border-left: 0;
    border-bottom: 0;
}

/* Divider 2 */
.wn-shape-top-2 svg,
.wn-shape-top-2 svg rect,
.wn-shape-bottom-2 svg,
.wn-shape-bottom-2 svg rect {
    width: 100%;
    height: 60px;
}

.wn-shape-top-2 svg defs pattern path,
.wn-shape-bottom-2 svg defs pattern path {
    fill: #000;
}

.wn-shape-bottom-2 svg {
    position: absolute;
    bottom: 0;
}

/* Divider 3 */
.wn-shape-divider.wn-shape-top-3,
.wn-shape-divider.wn-shape-bottom-3 {
    position: absolute;
    content: '';
    right: 0;
    left: 0;
    z-index: 10;
    display: block;
    height: 90px;
    background-size: 49px 100%;
    background-position: 50%;
    background-repeat: repeat-x;
}

.wn-shape-divider.wn-shape-top-3 {
    top: 0;
    background-image: linear-gradient(225deg, #000 18%, transparent 18%), linear-gradient(-225deg, #000 18%, transparent 18%);
}

.wn-shape-divider.wn-shape-bottom-3 {
    bottom: 0;
    background-image: linear-gradient(315deg, #000 18%, transparent 18%), linear-gradient(45deg, #000 18%, transparent 18%);
}

/* Divider 4  */
.wn-shape-top-4 svg,
.wn-shape-top-4 svg rect,
.wn-shape-bottom-4 svg,
.wn-shape-bottom-4 svg rect {
    width: 100%;
    height: 80px;
}

.wn-shape-top-4 svg defs pattern path,
.wn-shape-bottom-4 svg defs pattern path {
    fill: #000;
}

.wn-shape-bottom-4 svg {
    position: absolute;
    bottom: 0;
}

/* Divider 5  */
.wn-shape-divider.wn-shape-top-5:before,
.wn-shape-divider.wn-shape-bottom-5:before {
    right: 50%;
    border-right: 1000px solid transparent;
    border-left: 1000px solid;
}

.wn-shape-divider.wn-shape-top-5:after,
.wn-shape-divider.wn-shape-bottom-5:after {
    left: 50%;
    border-left: 1000px solid transparent;
    border-right: 1000px solid;
}

.wn-shape-divider.wn-shape-top-5:after,
.wn-shape-divider.wn-shape-top-5:before,
.wn-shape-divider.wn-shape-bottom-5:after,
.wn-shape-divider.wn-shape-bottom-5:before {
    content: '';
    position: absolute;
    width: 50%;
    z-index: 100;
    -moz-transform: rotate(0.000001deg);
    -webkit-transform: rotate(0.000001deg);
    -o-transform: rotate(0.000001deg);
    -ms-transform: rotate(0.000001deg);
    transform: rotate(0.000001deg);
}

.wn-shape-divider.wn-shape-top-5:after,
.wn-shape-divider.wn-shape-top-5:before {
    top: 0;
    border-top: 160px solid #000;
}

.wn-shape-divider.wn-shape-bottom-5:after,
.wn-shape-divider.wn-shape-bottom-5:before {
    bottom: 0;
    border-bottom: 160px solid #000;
}

/* Divider 6 */
.wn-shape-divider.wn-shape-top-6,
.wn-shape-divider.wn-shape-bottom-6 {
    padding-top: 7em;
}

.wn-shape-divider.wn-shape-top-6:before,
.wn-shape-divider.wn-shape-top-6:after,
.wn-shape-divider.wn-shape-bottom-6:before,
.wn-shape-divider.wn-shape-bottom-6:after {
    position: absolute;
    content: '';
    pointer-events: none;
    top: 0;
    left: 0;
    z-index: 10;
    width: 50%;
    height: 70px;
    background: #000;
}

.wn-shape-divider.wn-shape-bottom-6:before,
.wn-shape-divider.wn-shape-bottom-6:after {
    top: inherit;
    bottom: 0;
}

.wn-shape-divider.wn-shape-bottom-6::before {
    border-radius: 0 80px 0 0;
}

.wn-shape-divider.wn-shape-bottom-6::after {
    left: 50%;
    border-radius: 80px 0 0 0;
}

.wn-shape-divider.wn-shape-top-6::before {
    border-radius: 0 0px 80px 0;
}

.wn-shape-divider.wn-shape-top-6::after {
    left: 50%;
    border-radius: 0 0 0 80px;
}

/* Divider 7 */
.wn-shape-divider.wn-shape-top-7,
.wn-shape-divider.wn-shape-bottom-7 {
    display: block;
    position: absolute;
    content: '';
    left: 50%;
    width: 50px;
    height: 50px;
    -webkit-transform: translateX(-50%) rotate(45deg);
    transform: translateX(-50%) rotate(45deg);
    bottom: -25px;
    z-index: 10;
    background: #000;
    box-shadow: -50px 50px 0 #000, 50px -50px 0 #000;
}

.wn-shape-divider.wn-shape-top-7 {
    bottom: inherit;
    top: -25px;
}

/* Divider 8 */
.wn-shape-divider.wn-shape-top-8:before,
.wn-shape-divider.wn-shape-bottom-8:before {
    display: block;
    position: absolute;
    content: '';
    left: 0;
    width: 100%;
    height: 50px;
    background-size: 60px 100%;
}

.wn-shape-divider.wn-shape-top-8:before {
    top: 0;
    background-image: -webkit-gradient(linear, 0 0, 10% 100%, color-stop(0.5, #000), color-stop(0.5, #000));
    background-image: linear-gradient(195deg, #000 49%, transparent 50%);
}

.wn-shape-divider.wn-shape-bottom-8:before {
    bottom: 0;
    background-image: -webkit-gradient(linear, 0 0, 10% 100%, color-stop(0.5, #000), color-stop(0.5, #000));
    background-image: linear-gradient(15deg, #000 49%, transparent 50%);
}

/* Divider 9 */
.wn-shape-top-9 svg,
.wn-shape-bottom-9 svg {
    width: 100%;
    height: 100px;
    position: absolute;
    padding-bottom: 0;
    margin-bottom: 0;
    fill: #000;
    stroke: #000;
    top: 0;
}

.wn-shape-bottom-9 svg {
    top: inherit;
    bottom: -20px;
}