/*--------------------------------------------------------------
# Shapes
--------------------------------------------------------------*/

.shape.has-after-bg {
    position: relative;
}
.shape.has-after-bg:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    height: 40vw;
    z-index: -1;
}


/*--------------------------------------------------------------
# Shape wrapper
--------------------------------------------------------------*/

.shape-wrapper {
    display: block;
    position: relative;
    overflow: hidden;
    line-height: 0;
}


/* Shape wrapper colours */

.shape-wrapper.light {
    color: #e7e7e3;
}


/* Shape wrapper article */

.shape-wrapper .article-wrap,
.shape-wrapper .article {
    line-height: 1.5em;
}


/* Shape wrapper background video */

.shape-wrapper .background-video {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Shape wrapper img + svg */

.shape-wrapper img,
.shape-wrapper svg {
    width: 100%;
    height: auto;
}

.shape-wrapper .svg-stretch svg {
    width: 100%;
    height: 100%;
}

.shape-wrapper *:not(.svg-color) svg,
.shape-wrapper *:not(.svg-color) svg path {
    fill: currentColor;
}


/* Shape wrapper shape variations */

.shape-wrapper .shape-top {
    position: relative;
    pointer-events: none;
    transform-origin: 0 0;
    margin-bottom: -2px;
    margin-top: -2px;
    z-index: 35;
}

.shape-wrapper .shape-top.absolute {
    position: absolute;
    inset: 0;
}

.shape-wrapper .shape-top.absolute:not(.svg-stretch) {
    bottom: auto;
}

.shape-wrapper .shape-bottom {
    position: relative;
    pointer-events: none;
    transform-origin: 100% 100%;
    margin-bottom: -2px;
    z-index: 35;
}

.shape-wrapper .shape-top.z-20,
.shape-wrapper .shape-bottom.z-20 {
    z-index: 20;
}

.shape-wrapper .shape-bottom.absolute {
    position: absolute;
    inset: 0;
}

.shape-wrapper .shape-bottom.absolute:not(.svg-stretch) {
    top: auto;
}

.shape-wrapper .shape-content {
    position: relative;
    pointer-events: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 25;
}


.shape-wrapper[data-top="00"] > .shape-content {
    margin-top: -20vw;
}
.shape-wrapper[data-bottom="00"] > .shape-content {
    margin-bottom: -20vw;
}



.shape-wrapper[data-top="01"] > .shape-content {
    margin-top: -28.5vw;
}
.shape-wrapper[data-bottom="01"] > .shape-content {
    margin-bottom: -12.5vw;
}


.shape-wrapper[data-top="02"] > .shape-content {
    margin-top: -32.5vw;
}
.shape-wrapper[data-bottom="02"] > .shape-content {
    margin-bottom: -15.5vw;
}


.shape-wrapper[data-top="03"] > .shape-content {
    margin-top: -22.5vw;
}
.shape-wrapper[data-bottom="03"] > .shape-content {
    margin-bottom: -10vw;
}


.shape-wrapper[data-top="04"] > .shape-content {
    margin-top: -28.5vw;
}
.shape-wrapper[data-bottom="04"] > .shape-content {
    margin-bottom: -43.5vw;
}


.shape-wrapper[data-top="05"] > .shape-content {
    margin-top: -34vw;
}
.shape-wrapper[data-bottom="05"] > .shape-content {
    margin-bottom: -16vw;
}


.shape-wrapper[data-top="06"] > .shape-content {
    margin-top: -15vw;
}
.shape-wrapper[data-bottom="06"] > .shape-content {
    margin-bottom: -15vw;
}


.shape-wrapper[data-top="07"] > .shape-content {
    margin-top: -33vw;
}
.shape-wrapper[data-bottom="07"] > .shape-content {
    margin-bottom: -33vw;
}


.shape-wrapper[data-top="08"] > .shape-content {
    margin-top: -12.5vw;
}
.shape-wrapper[data-bottom="08"] > .shape-content {
    margin-bottom: -25vw;
}




.shape-wrapper[data-top="10"] > .shape-content {
    margin-top: -15vw;
}
.shape-wrapper[data-bottom="10"] > .shape-content {
    margin-bottom: -20vw;
}


/*--------------------------------------------------------------
# Shape blend modes
--------------------------------------------------------------*/

[data-blend="overlay"] {
    mix-blend-mode: overlay;
}
[data-blend="multiply"] {
    mix-blend-mode: multiply;
}
[data-blend="hard"] {
    mix-blend-mode: hard-light;
}
[data-blend="soft"] {
    mix-blend-mode: soft-light;
}
[data-blend="darken"] {
    mix-blend-mode: darken;
}


/*--------------------------------------------------------------
# Shape variations
--------------------------------------------------------------*/

.shape-wrapper .shape.color-white {
    color: #FFFFFF;
}
.shape-wrapper .shape.color-blue {
    color: var(--blue);
}
.shape-wrapper .shape.color-red {
    color: var(--red);
}
.shape-wrapper .shape.color-grey {
    color: var(--silver);
}

.shape-wrapper .shape.bg-white {
    background: #FFFFFF;
}


[data-theme="black"] {
    background-color: #000;
    color: #fff;
}
[data-theme="black"] .shape-wrapper {
    color: #000;
}
[data-theme="white"] {
    background-color: #fff;
    color: #000;
}
[data-theme="white"] .shape-wrapper {
    color: #fff;
}
[data-theme="light"] {
    background-color: #e7e7e3;
    color: #000;
}
[data-theme="light"] .shape-wrapper {
    color: #e7e7e3;
}


/*--------------------------------------------------------------
# Shapes secondary
--------------------------------------------------------------*/

.shape.shape-top-secondary,
.shape.shape-bottom-secondary {
    line-height: 0;
}

.shape-top-secondary {
    margin-bottom: -4px;
}


.shape-bottom-secondary {
    margin-top: -4px;
}
.shape-bottom-secondary.pulled {
    margin-bottom: -4vh;
}


/*--------------------------------------------------------------
# Shapes about team
--------------------------------------------------------------*/
.shape-custom.shape-about-team {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 35;
    opacity: 0.15;
    pointer-events: none;
    overflow: hidden;
}

.shape-custom.shape-about-team > svg {
    width: 100%;
    scale: 1.25;
}


/*--------------------------------------------------------------
# Shape pulls
--------------------------------------------------------------*/

.shape-00-pull {
    margin-top: -20vw;
    padding-top: 10vw;
}
.shape-00-pull-medium {
    margin-top: -20vw;
    margin-bottom: -7.5vw;
    padding-top: 7.5vw;
}


.shape-04-pull {
    margin-bottom: -28.5vw;
}

.shape-05-pull {
    margin-bottom: -25vw;
}
.shape-05-pull-half {
    margin-bottom: -12.5vw;
}
.shape-05-pull-top {
    margin-top: -25vw;
}
.shape-05-pull-top-half {
    margin-top: -12.5vw;
}
.shape-05-pull-small-desktop {
    margin-bottom: -20vw!important;
}


.shape-06-pull {
    margin-top: -12vw;
}
.shape-06-pull-medium {
    margin-top: -7.5vw;
}


/*--------------------------------------------------------------
# Shape utility classes
--------------------------------------------------------------*/

.shape.spacing {
    padding: 2.5rem 0;
}

.shape.flip {
    transform: scaleX(-1);
}


/*--------------------------------------------------------------
# Shape transforms (responsive)
--------------------------------------------------------------*/

.shape-wrapper.height-400 > .shape-content { height: 400px; }
.shape-wrapper.height-500 > .shape-content { height: 500px; }
.shape-wrapper.height-600 > .shape-content { height: 600px; }
.shape-wrapper.height-700 > .shape-content { height: 700px; }
.shape-wrapper.height-800 > .shape-content { height: 800px; }

.shape-wrapper.height-40vw > .shape-content { height: 40vw; }
.shape-wrapper.height-50vw > .shape-content { height: 50vw; }
.shape-wrapper.height-60vw > .shape-content { height: 60vw; }
.shape-wrapper.height-70vw > .shape-content { height: 70vw; }
.shape-wrapper.height-80vw > .shape-content { height: 80vw; }


.shape-wrapper.max-400 > .shape-content { max-height: 400px; }
.shape-wrapper.max-500 > .shape-content { max-height: 500px; }
.shape-wrapper.max-600 > .shape-content { max-height: 600px; }
.shape-wrapper.max-700 > .shape-content { max-height: 700px; }
.shape-wrapper.max-800 > .shape-content { max-height: 800px; }


.shape-wrapper .shape-top.scale-25,
.shape-wrapper .shape-bottom.scale-25 {
    transform: scaleY( 0.25 );
}

.shape-wrapper .shape-top.scale-50,
.shape-wrapper .shape-bottom.scale-50 {
    transform: scaleY( 0.5 );
}

.shape-wrapper .shape-top.scale-75,
.shape-wrapper .shape-bottom.scale-75 {
    transform: scaleY( 0.75 );
}


/*--------------------------------------------------------------
# Shape wrapper overlay
--------------------------------------------------------------*/

.shape-wrapper-overlay {
    position: absolute;
    pointer-events: none;
    inset: 0;
    z-index: 10;
    opacity: 0.95;
    background: linear-gradient( to bottom right, #9C0D38 0%, #000 100% );
}


/*--------------------------------------------------------------
# Media querys
--------------------------------------------------------------*/

@media all and (max-width: 1200px) {

    /* Shape pulls & pushes */

    .shape-00-pull {
        padding-top: 15vw;
    }

    .shape-00-pull.viewport {
        padding-top: 15vw; /* 75% of 20vw */
    }




    /* Shape sizes */

    .shape-wrapper.height-700 > .shape-content {
        height: auto;
    }

}

@media all and (max-width: 992px) {

    .shape.pulled {
        margin-top: -5rem;
    }

    .shape-05-pull-top {
        margin-top: -33vw;
    }


    /* Shape pulls & pushes */

    .shape-00-pull {
        margin-top: -10vw;
        padding-top: 15vw;
    }

    .shape-05-push {
        padding-top: 10vw;
    }

    .shape-05-pull-desktop {
        margin-top: 0;
    }


}

@media all and (max-width: 768px) {

    .shape-05-pull-top {
        margin-top: -38vw;
    }

}

@media all and (max-width: 575px) {

    /* Shape pulls & pushes */

    .shape-05-pull {
        margin-bottom: -60vw;
    }
    .shape-05-pull-top {
        margin-top: -12vw;
    }

    .shape-05-pull-small-desktop {
        margin-bottom: 0;
    }


}