/*** Positioning ***/
.co__tl__element {
    top: -1px;
    bottom: unset;
    left: -1px;
    right: unset;
}
.co__tr__element {
    top: -1px;
    bottom: unset;
    left: unset;
    right: -1px;
}
.co__bl__element {
    top: unset;
    bottom: -1px;
    left: -1px;
    right: unset;
}
.co__br__element {
    top: unset;
    bottom: -1px;
    left: unset;
    right: -1px;
}




/*** ======================= Standard Cut Offs ========================= ***/
.co__tl__element,
.co__tr__element,
.co__bl__element,
.co__br__element {
    position: absolute;
    height: 66px;
    width: 66px;
    z-index: 50;
}
@media(max-width: 1599.98px) {
    .co__tl__element,
    .co__tr__element,
    .co__bl__element,
    .co__br__element {
        height: 66px;
        width: 66px;
    }
}
@media(max-width: 991.98px) {
    .co__tl__element,
    .co__tr__element,
    .co__bl__element,
    .co__br__element {
        height: 50px;
        width: 50px;
    }
}
@media(max-width: 575.98px) {
    .co__tl__element,
    .co__tr__element,
    .co__bl__element,
    .co__br__element {
        height: 40px;
        width: 40px;
    }
}


/*** ======================= Large Cut Offs ========================= ***/
.co__tl__element.large__co,
.co__tr__element.large__co,
.co__bl__element.large__co,
.co__br__element.large__co {
    position: absolute;
    height: 180px;
    width: 180px;
    z-index: 50;
}
@media(max-width: 1599.98px) {
    .co__tl__element.large__co,
    .co__tr__element.large__co,
    .co__bl__element.large__co,
    .co__br__element.large__co {
        height: 120px;
        width: 120px;
    }
}
@media(max-width: 991.98px) {
    .co__tl__element.large__co,
    .co__tr__element.large__co,
    .co__bl__element.large__co,
    .co__br__element.large__co {
        height: 61px;
        width: 61px;
    }
}
@media(max-width: 575.98px) {
    .co__tl__element.large__co,
    .co__tr__element.large__co,
    .co__bl__element.large__co,
    .co__br__element.large__co {
        height: 40px;
        width: 40px;
    }
}





/*** ======================= Small Cut Offs ========================= ***/
.co__tl__element.small__co,
.co__tr__element.small__co,
.co__bl__element.small__co,
.co__br__element.small__co {
    position: absolute;
    height: 50px;
    width: 50px;
    z-index: 50;
}
@media(max-width: 1599.98px) {
    .co__tl__element.small__co,
    .co__tr__element.small__co,
    .co__bl__element.small__co,
    .co__br__element.small__co {
        height: 50px;
        width: 50px;
    }
}
@media(max-width: 991.98px) {
    .co__tl__element.small__co,
    .co__tr__element.small__co,
    .co__bl__element.small__co,
    .co__br__element.small__co {
        height: 50px;
        width: 50px;
    }
}
@media(max-width: 575.98px) {
    .co__tl__element.small__co,
    .co__tr__element.small__co,
    .co__bl__element.small__co,
    .co__br__element.small__co {
        height: 40px;
        width: 40px;
    }
}










/*** Clip Paths ***/

.co__tl__element {
    -webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
    clip-path: polygon(0 0, 0% 100%, 100% 0);
}
.co__tr__element {
    -webkit-clip-path: polygon(0 0, 100% 100%, 100% 0);
    clip-path: polygon(0 0, 100% 100%, 100% 0);
}
.co__bl__element {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 0 0);
    clip-path: polygon(0 100%, 100% 100%, 0 0);
}
.co__br__element {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0);
    clip-path: polygon(0 100%, 100% 100%, 100% 0);
}

/*** Positioning ***/
.cut-off_top-left_white,
.cut-off_top-right_white,
.cut-off_bottom-left_white,
.cut-off_bottom-right_white {
    position: relative;
}

/*** Colors ***/

.cut-off_top-left_white .co__tl__element,
.cut-off_top-right_white .co__tr__element,
.cut-off_bottom-left_white .co__bl__element,
.cut-off_bottom-right_white .co__br__element {
    background-color: var(--white);
}

.cut-off_top-left_coal .co__tl__element,
.cut-off_top-right_coal .co__tr__element,
.cut-off_bottom-left_coal .co__bl__element,
.cut-off_bottom-right_coal .co__br__element {
    background-color: var(--coal);
}
.cut-off_top-left_sediment .co__tl__element,
.cut-off_top-right_sediment .co__tr__element,
.cut-off_bottom-left_sediment .co__bl__element,
.cut-off_bottom-right_sediment .co__br__element {
    background-color: var(--sediment);
}

/*** ----------------------------------------------- Image Clip Offs ---------------------------------------------- ***/

.cut-off-image-bottom-right {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 120px), calc(100% - 120px) 100%, 0 100%, 0% 50%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 120px), calc(100% - 120px) 100%, 0 100%, 0% 50%);
}
@media(max-width: 991.98px) {
    .cut-off-image-bottom-right {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), calc(100% - 60px) 100%, 0 100%, 0% 50%);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), calc(100% - 60px) 100%, 0 100%, 0% 50%);
    }
}
@media(max-width: 575.98px) {
    .cut-off-image-bottom-right {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0% 50%);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0% 50%);
    }
}

.cut-off-image-bottom-left {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 63% 100%, calc(120px) 100%, 0 calc(100% - 120px), 0 43%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 63% 100%, calc(120px) 100%, 0 calc(100% - 120px), 0 43%);
}
@media(max-width: 991.98px) {
    .cut-off-image-bottom-left {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 63% 100%, calc(60px) 100%, 0 calc(100% - 60px), 0 43%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 63% 100%, calc(60px) 100%, 0 calc(100% - 60px), 0 43%);
    }
}
@media(max-width: 575.98px) {
    .cut-off-image-bottom-left {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 63% 100%, calc(40px) 100%, 0 calc(100% - 40px), 0 43%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 63% 100%, calc(40px) 100%, 0 calc(100% - 40px), 0 43%);
    }
}

.cut-off-image-top-left {
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%, 0 100%, 0 calc(120px), calc(120px) 0);
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%, 0 100%, 0 calc(120px), calc(120px) 0);
}
@media(max-width: 991.98px) {
    .cut-off-image-top-left {
        -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%, 0 100%, 0 calc(60px), calc(60px) 0);
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%, 0 100%, 0 calc(60px), calc(60px) 0);
    }
}
@media(max-width: 575.98px) {
    .cut-off-image-top-left {
        -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%, 0 100%, 0 calc(40px), calc(40px) 0);
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%, 0 100%, 0 calc(40px), calc(40px) 0);
    }
}

.cut-off-image-top-right {
    -webkit-clip-path: polygon(100% calc(120px), 100% 100%, 100% 100%, 0 100%, 0 0, 0 0, calc(100% - 120px) 0);
    clip-path: polygon(100% calc(120px), 100% 100%, 100% 100%, 0 100%, 0 0, 0 0, calc(100% - 120px) 0);
}
@media(max-width: 991.98px) {
    .cut-off-image-top-right {
        -webkit-clip-path: polygon(100% calc(60px), 100% 100%, 100% 100%, 0 100%, 0 0, 0 0, calc(100% - 60px) 0);
        clip-path: polygon(100% calc(60px), 100% 100%, 100% 100%, 0 100%, 0 0, 0 0, calc(100% - 60px) 0);
    }
}
@media(max-width: 575.98px) {
    .cut-off-image-top-right {
        -webkit-clip-path: polygon(100% calc(40px), 100% 100%, 100% 100%, 0 100%, 0 0, 0 0, calc(100% - 40px) 0);
        clip-path: polygon(100% calc(40px), 100% 100%, 100% 100%, 0 100%, 0 0, 0 0, calc(100% - 40px) 0);
    }
}





/* Small cut offs */
.cut-off-image-top-left-small {
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%, 0 100%, 0 calc(42px), calc(42px) 0);
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%, 0 100%, 0 calc(42px), calc(42px) 0);
}
.cut-off-image-bottom-right-small {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 42px), calc(100% - 42px) 100%, 0 100%, 0% 50%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 42px), calc(100% - 42px) 100%, 0 100%, 0% 50%);
}
@media(max-width: 991.98px) {
    .cut-off-image-top-left-small {
        -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%, 0 100%, 0 calc(32px), calc(32px) 0);
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%, 0 100%, 0 calc(32px), calc(32px) 0);
    }
    .cut-off-image-bottom-right-small {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%, 0% 50%);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%, 0% 50%);
    }
}
@media(max-width: 575.98px) {
    .cut-off-image-top-left-small {
        -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%, 0 100%, 0 calc(22px), calc(22px) 0);
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%, 0 100%, 0 calc(22px), calc(22px) 0);
    }
    .cut-off-image-bottom-right-small {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0% 50%);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0% 50%);
    }
}