/*
 * ----------------
 * Polygon dividers
 * ----------------
 */

.has-polygon-dividers {
    position: relative;
    overflow: visible;
}

@media( min-width: 768px ) {
    .has-polygon-dividers > div:first-child > .vc_column-inner {
        padding-right: 40px !important;
    }
    .has-polygon-dividers > div:not(:first-child):not(:last-child) > .vc_column-inner {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    .has-polygon-dividers > div:last-child > .vc_column-inner {
        padding-left: 40px !important;
    }
}

.has-polygon-dividers > div > .vc_column-inner {
    position: relative;
    z-index: 1;
}

.has-polygon-dividers > div > .polygon-divider {
    display: block;
    position: absolute;
    top: 0;
    width: calc( 100% + 40px );
    height: 100%;
    background: inherit;
    background-color: inherit;
    z-index: 0;
}

.has-polygon-dividers > div:first-child > .polygon-divider {
    right: -20px;
}

.has-polygon-dividers > div:not(:first-child) > .polygon-divider {
    left: -20px;
}

.has-polygon-dividers > div:first-child > .polygon-divider {
    clip-path: polygon( 
        0% 100%,
        0% 0%,
        calc( 100% - 20px ) 0%,
        calc( 100% - 30px ) 10%, 
        calc( 100% - 10px ) 25%, 
        calc( 100% - 40px ) 35%, 
        calc( 100% - 20px ) 50%,
        calc( 100% - 25px ) 60%, 
        calc( 100% - 0px ) 75%, 
        calc( 100% - 30px ) 90%,
        calc( 100% - 20px ) 100%
    );
}

.has-polygon-dividers > div:not(:last-child):nth-child(even) > .polygon-divider {
    clip-path: polygon( 
        20px 100%,
        10px 90%,
        40px 75%, 
        15px 60%, 
        20px 50%,
        0px 35%, 
        30px 25%, 
        10px 10%, 
        20px 0%,

        calc( 100% - 20px ) 0%,
        calc( 100% - 15px ) 10%, 
        calc( 100% - 10px ) 25%, 
        calc( 100% - 35px ) 35%, 
        calc( 100% - 0px ) 50%,
        calc( 100% - 20px ) 60%, 
        calc( 100% - 10px ) 75%, 
        calc( 100% - 40px ) 90%,
        calc( 100% - 20px ) 100%
    );
}

.has-polygon-dividers > div:not(:first-child):nth-child(odd) > .polygon-divider {
    clip-path: polygon( 
        20px 100%,
        0px 90%,
        30px 75%, 
        20px 60%, 
        40px 50%,
        5px 35%, 
        30px 25%, 
        25px 10%, 
        20px 0%,
        
        calc( 100% - 20px ) 0%,
        calc( 100% - 30px ) 10%, 
        calc( 100% - 10px ) 25%, 
        calc( 100% - 40px ) 35%, 
        calc( 100% - 20px ) 50%,
        calc( 100% - 25px ) 60%, 
        calc( 100% - 0px ) 75%, 
        calc( 100% - 30px ) 90%,
        calc( 100% - 20px ) 100%
    );
}

.has-polygon-dividers > div:last-child > .polygon-divider {
    clip-path: polygon( 
        20px 100%,
        10px 90%,
        40px 75%, 
        15px 60%, 
        20px 50%,
        0px 35%, 
        30px 25%, 
        10px 10%, 
        20px 0%,
        100% 0%,
        100% 100%
    );
}