.swiper-container {
    width: 80%;
    height: 800px;
}

.swiper-slide {
    height: 800px;
    outline: 1px solid rgb(137, 38, 55);
    outline-offset: -1px;
}

/* SLIDE ELEMENTS */
/* < OCTAGON  */
.button--octagon {
    font-size: 16px;
    display: block;
    width: 3.75em;
    height: 4.25em;
    margin: 0 auto;
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    color: rgb(255, 255, 255);
    position: relative;
    top: 40%;
    text-decoration: none;
    overflow: visible
}

.button--octagon .slice {
    border-top: 1em solid transparent;
    border-right: none;
    border-bottom: 2.238em solid transparent;
    border-left: 2.238em solid #292929;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    border-radius: 4px 4px 0 0;
    z-index: 100;
    opacity: 1
}

.button--octagon .slice:nth-child(1) {
    -webkit-transform: rotateZ(45deg) rotateY(0) rotateX(0);
    transform: rotateZ(45deg) rotateY(0) rotateX(0);
}

.button--octagon .button__label {
    z-index: 200;
    position: relative;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .05em;
    top: 75%;
    left: -.3%;
    display: block;
    line-height: 1em
    /* overflow: hidden; top: 50%; transform: transformY(-50%) */
}

@media (min-width: 1px) {
    .project__header .header__cta {
        -webkit-transition: .4s -webkit-transform cubic-bezier(.6, -.28, .735, .045) .5s, .6s height cubic-bezier(.77, 0, .175, 1) 0s;
        transition: .4s transform cubic-bezier(.6, -.28, .735, .045) .5s, .6s height cubic-bezier(.77, 0, .175, 1) 0s
    }

    .project__header .header__cta .slice:nth-child(1) {
        -webkit-transform: rotateZ(45deg) rotateY(0) rotateX(0);
        transform: rotateZ(45deg) rotateY(0) rotateX(0);
        -webkit-transition: .15s cubic-bezier(.25, .46, .45, .94) .8s;
        transition: .15s cubic-bezier(.25, .46, .45, .94) .8s
    }

    .project__header .header__cta .slice:nth-child(2) {
        -webkit-transform: rotateZ(90deg) rotateY(0) rotateX(0);
        transform: rotateZ(90deg) rotateY(0) rotateX(0);
        -webkit-transition: .15s cubic-bezier(.25, .46, .45, .94) .7s;
        transition: .15s cubic-bezier(.25, .46, .45, .94) .7s
    }

    .project__header .header__cta .slice:nth-child(3) {
        -webkit-transform: rotateZ(135deg) rotateY(0) rotateX(0);
        transform: rotateZ(135deg) rotateY(0) rotateX(0);
        -webkit-transition: .15s cubic-bezier(.25, .46, .45, .94) .6s;
        transition: .15s cubic-bezier(.25, .46, .45, .94) .6s
    }

    .project__header .header__cta .slice:nth-child(4) {
        -webkit-transform: rotateZ(180deg) rotateY(0) rotateX(0);
        transform: rotateZ(180deg) rotateY(0) rotateX(0);
        -webkit-transition: .15s cubic-bezier(.25, .46, .45, .94) .5s;
        transition: .15s cubic-bezier(.25, .46, .45, .94) .5s
    }

    .project__header .header__cta .slice:nth-child(5) {
        -webkit-transform: rotateZ(225deg) rotateY(0) rotateX(0);
        transform: rotateZ(225deg) rotateY(0) rotateX(0);
        -webkit-transition: .15s cubic-bezier(.25, .46, .45, .94) .4s;
        transition: .15s cubic-bezier(.25, .46, .45, .94) .4s
    }

    .project__header .header__cta .slice:nth-child(6) {
        -webkit-transform: rotateZ(270deg) rotateY(0) rotateX(0);
        transform: rotateZ(270deg) rotateY(0) rotateX(0);
        -webkit-transition: .15s cubic-bezier(.25, .46, .45, .94) .3s;
        transition: .15s cubic-bezier(.25, .46, .45, .94) .3s
    }

    .project__header .header__cta .slice:nth-child(7) {
        -webkit-transform: rotateZ(315deg) rotateY(0) rotateX(0);
        transform: rotateZ(315deg) rotateY(0) rotateX(0);
        -webkit-transition: .15s cubic-bezier(.25, .46, .45, .94) .2s;
        transition: .15s cubic-bezier(.25, .46, .45, .94) .2s
    }

    .project__header .header__cta .slice:nth-child(8) {
        -webkit-transform: rotateZ(360deg) rotateY(0) rotateX(0);
        transform: rotateZ(360deg) rotateY(0) rotateX(0);
        -webkit-transition: .15s cubic-bezier(.25, .46, .45, .94) .1s;
        transition: .15s cubic-bezier(.25, .46, .45, .94) .1s
    }

    .project__header .header__cta .slice {
        border-left-color: #000
    }

    .project__header .header__cta .button__label {
        -webkit-transform: translateY(-50%) scale(1);
        -ms-transform: translateY(-50%) scale(1);
        transform: translateY(-50%) scale(1);
        -webkit-transition: .4s cubic-bezier(.6, -.28, .735, .045) 0s;
        transition: .4s cubic-bezier(.6, -.28, .735, .045) 0s
    }

    .project__header:hover .header__cta {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        -webkit-transition: .4s -webkit-transform cubic-bezier(.175, .885, .32, 1.275) 0s, .6s height cubic-bezier(.77, 0, .175, 1) 0s;
        transition: .4s transform cubic-bezier(.175, .885, .32, 1.275) 0s, .6s height cubic-bezier(.77, 0, .175, 1) 0s
    }

    .project__header:hover .header__cta .slice:nth-child(1) {
        -webkit-transition: .15s cubic-bezier(.25, .46, .45, .94) .08s;
        transition: .15s cubic-bezier(.25, .46, .45, .94) .08s;
        -webkit-transform: rotateZ(45deg) rotateY(0) rotateX(0);
        transform: rotateZ(45deg) rotateY(0) rotateX(0);
        border-left-color: #292929
    }

    .project__header:hover .header__cta .slice:nth-child(2) {
        -webkit-transition: .15s cubic-bezier(.25, .46, .45, .94) .16s;
        transition: .15s cubic-bezier(.25, .46, .45, .94) .16s;
        -webkit-transform: rotateZ(90deg) rotateY(0) rotateX(0);
        transform: rotateZ(90deg) rotateY(0) rotateX(0);
        border-left-color: #292929
    }

    .project__header:hover .header__cta .slice:nth-child(3) {
        -webkit-transition: .15s cubic-bezier(.25, .46, .45, .94) .24s;
        transition: .15s cubic-bezier(.25, .46, .45, .94) .24s;
        -webkit-transform: rotateZ(135deg) rotateY(0) rotateX(0);
        transform: rotateZ(135deg) rotateY(0) rotateX(0);
        border-left-color: #292929
    }

    .project__header:hover .header__cta .slice:nth-child(4) {
        -webkit-transition: .15s cubic-bezier(.25, .46, .45, .94) .32s;
        transition: .15s cubic-bezier(.25, .46, .45, .94) .32s;
        -webkit-transform: rotateZ(180deg) rotateY(0) rotateX(0);
        transform: rotateZ(180deg) rotateY(0) rotateX(0);
        border-left-color: #292929
    }

    .project__header:hover .header__cta .slice:nth-child(5) {
        -webkit-transition: .15s cubic-bezier(.25, .46, .45, .94) .4s;
        transition: .15s cubic-bezier(.25, .46, .45, .94) .4s;
        -webkit-transform: rotateZ(225deg) rotateY(0) rotateX(0);
        transform: rotateZ(225deg) rotateY(0) rotateX(0);
        border-left-color: #292929
    }

    .project__header:hover .header__cta .slice:nth-child(6) {
        -webkit-transition: .15s cubic-bezier(.25, .46, .45, .94) .48s;
        transition: .15s cubic-bezier(.25, .46, .45, .94) .48s;
        -webkit-transform: rotateZ(270deg) rotateY(0) rotateX(0);
        transform: rotateZ(270deg) rotateY(0) rotateX(0);
        border-left-color: #292929
    }

    .project__header:hover .header__cta .slice:nth-child(7) {
        -webkit-transition: .15s cubic-bezier(.25, .46, .45, .94) .56s;
        transition: .15s cubic-bezier(.25, .46, .45, .94) .48s;
        -webkit-transform: rotateZ(315deg) rotateY(0) rotateX(0);
        transform: rotateZ(315deg) rotateY(0) rotateX(0);
        border-left-color: #292929
    }

    .project__header:hover .header__cta .slice:nth-child(8) {
        -webkit-transition: .15s cubic-bezier(.25, .46, .45, .94) .64s;
        transition: .15s cubic-bezier(.25, .46, .45, .94) .48s;
        -webkit-transform: rotateZ(360deg) rotateY(0) rotateX(0);
        transform: rotateZ(360deg) rotateY(0) rotateX(0);
        border-left-color: #292929
    }

    .project__header:hover .header__cta .button__label {
        -webkit-transform: translateY(-50%) scale(1);
        -ms-transform: translateY(-50%) scale(1);
        transform: translateY(-50%) scale(1);
        -webkit-transition: .4s cubic-bezier(.165, .84, .44, 1) .5s;
        transition: .4s cubic-bezier(.165, .84, .44, 1) .3s
    }

    .projectimg {
        overflow: hidden
    }

    .projectimg img {
        transition: transform 10s
    }

    .project__header:hover .projectimg img {
        transform: scale(1.2);
        transition: 10s
    }

    .project__header span {
        text-align: center;
        width: 100%
    }

    .project__header .button__label {
        opacity: 1
    }
}

@media (min-width: 992px) {
    .project__header .header__cta {
        -webkit-transform: scale(.5);
        -ms-transform: scale(.5);
        transform: scale(.5)
    }

    .project__header .header__cta .slice:nth-child(1) {
        -webkit-transform: rotateZ(45deg) rotateY(-90deg) rotateX(0);
        transform: rotateZ(45deg) rotateY(-90deg) rotateX(0)
    }

    .project__header .header__cta .slice:nth-child(2) {
        -webkit-transform: rotateZ(90deg) rotateY(-90deg) rotateX(0);
        transform: rotateZ(90deg) rotateY(-90deg) rotateX(0)
    }

    .project__header .header__cta .slice:nth-child(3) {
        -webkit-transform: rotateZ(135deg) rotateY(-90deg) rotateX(0);
        transform: rotateZ(135deg) rotateY(-90deg) rotateX(0)
    }

    .project__header .header__cta .slice:nth-child(4) {
        -webkit-transform: rotateZ(180deg) rotateY(-90deg) rotateX(0);
        transform: rotateZ(180deg) rotateY(-90deg) rotateX(0)
    }

    .project__header .header__cta .slice:nth-child(5) {
        -webkit-transform: rotateZ(225deg) rotateY(-90deg) rotateX(0);
        transform: rotateZ(225deg) rotateY(-90deg) rotateX(0)
    }

    .project__header .header__cta .slice:nth-child(6) {
        -webkit-transform: rotateZ(270deg) rotateY(-90deg) rotateX(0);
        transform: rotateZ(270deg) rotateY(-90deg) rotateX(0)
    }

    .project__header .header__cta .slice:nth-child(7) {
        -webkit-transform: rotateZ(315deg) rotateY(-90deg) rotateX(0);
        transform: rotateZ(315deg) rotateY(-90deg) rotateX(0)
    }

    .project__header .header__cta .slice:nth-child(8) {
        -webkit-transform: rotateZ(360deg) rotateY(-90deg) rotateX(0);
        transform: rotateZ(360deg) rotateY(-90deg) rotateX(0)
    }

    .project__header .header__cta .button__label {
        -webkit-transform: translateY(-50%) scale(0);
        -ms-transform: translateY(-50%) scale(0);
        transform: translateY(-50%) scale(0)
    }

    .project__header .button__label {
        opacity: 0
    }
}

.button--octagon {
    -ms-transform: rotate(-25deg) !important;
    -webkit-transform: rotate(-25deg) !important;
    transform: rotate(-25deg) !important
}

.button__label {
    -ms-transform: rotate(25deg) !important;
    -webkit-transform: rotate(25deg) !important;
    transform: rotate(25deg) !important
}

.project__header:hover .button__label {
    opacity: 1
}

.button__label {
    top: 67% !important;
    left: .1% !important
}

/* OCTAGON > */