/* Common */

.breadcrumbs-container {
    display: none;
}

@media screen and (min-width: 64em) {
    .large-margin-bottom-0 {
        margin-bottom: 0;
    }
}

/* Page banner */

.page-banner {
    position: relative;
    background: #54585a;
    padding: 0;
    display: flex;
    align-items: center;
}

.page-banner > .row {
    width: 100%;
    justify-content: flex-end;
}

@media print, screen and (min-width: 40em) {
    .page-banner {
        background: linear-gradient(
                to right,
                #54585a 40%,
                rgba(255, 255, 255, 0) 50%
            ),
            url(../images/about-hero-img.jpg)
                right / contain no-repeat;
    }
}

@media print, screen and (min-width: 90em) {
    .page-banner {
        background: linear-gradient(
                to right,
                #54585a 60%,
                rgba(255, 255, 255, 0) 80%
            ),
            url(../images/about-hero-img.jpg)
                right / contain no-repeat;
    }
}

div.circle.values {
    background: url(../images/values.jpg)
        center / contain no-repeat;
    padding: 3rem;
    text-transform: uppercase;
}

.text-blue {
    color: #364250;
}

.text-green {
    color: #96a597;
}

.text-brown {
    color: #ad6f58;
}

span.circle {
    display: inline-block;
    margin: 0;
    position: relative;
    transform: translateY(-50%);
    top: 50%;
}

.value-contain {
    position: relative;
}

.values-diagram {
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.values-copy-diagram {
    position: absolute;
    top: 0;
    z-index: 1;
    width: 100%;
}

.values-diagram::before,
.values-copy-diagram::before {
    content: '';
    display: block;
    padding-top: 100%;
}

.values-diagram .figure,
.values-copy-diagram .figure {
    align-items: center;
    display: flex;
    font-size: 0.9rem;
    justify-content: center;
    padding: 1rem;
    position: absolute;
    text-align: center;
    z-index: 1;
}

.values-copy-diagram .figure.top-left {
    top: 12%;
    height: 0;
}

.values-copy-diagram .figure.bottom-left {
    bottom: 20%;
    height: 0;
}

.values-copy-diagram .figure.top-right {
    top: 12%;
    height: 0;
}

.values-copy-diagram .figure.bottom-right {
    bottom: 20%;
    height: 0;
}

.values-copy-diagram .figure.mid-left {
    top: 42%;
    height: 0;
}

.values-copy-diagram .figure.mid-right {
    top: 42%;
    height: 0;
    width: 45%;
}

.values-diagram .figure-inner {
    background: #ad6f58;
    border-radius: 50%;
    height: 100%;
    width: 47.225%;
}

.values-diagram .figure.top-left .figure-inner,
.values-diagram .figure.bottom-right .figure-inner {
    background: #364250;
}

.values-diagram .figure.top-right .figure-inner,
.values-diagram .figure.bottom-left .figure-inner {
    background: #96a597;
}

.values-diagram .figure.middle .figure-inner {
    background: url(../images/values.jpg)
        center / contain no-repeat;
}

.values-diagram span.circle.values {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    text-transform: uppercase;
}

@media print, screen and (min-width: 40em) {
    .values-diagram::before,
    .values-copy-diagram::before {
        padding-top: 60%;
    }

    .values-diagram .figure,
    .values-copy-diagram .figure {
        height: 41%;
        width: 45%;
    }

    .figure.middle {
        top: 30%;
        left: 28%;
    }

    .figure.top-left {
        top: 0;
        left: 15%;
    }

    .figure.top-right {
        top: 0;
        right: 15%;
    }

    .figure.bottom-left {
        bottom: 0;
        left: 15%;
    }

    .figure.bottom-right {
        bottom: 0;
        right: 15%;
    }

    .figure.mid-left {
        top: 30%;
        left: 5%;
    }

    .figure.mid-right {
        top: 30%;
        right: 5%;
    }

    .values-copy-diagram .figure.top-left,
    .values-copy-diagram .figure.bottom-left {
        left: -7%;
    }

    .values-copy-diagram .figure.top-right,
    .values-copy-diagram .figure.bottom-right {
        right: -2%;
    }

    .values-copy-diagram .figure.mid-right {
        right: -12%;
    }

    .values-copy-diagram .figure.mid-left {
        left: -17%;
    }
}

@media print, screen and (min-width: 48em) {
    .values-diagram .figure,
    .values-copy-diagram .figure {
        height: 39%;
        width: 44%;
    }

    .values-copy-diagram .figure.top-left,
    .values-copy-diagram .figure.bottom-left {
        left: -9%;
    }

    .values-copy-diagram .figure.top-right,
    .values-copy-diagram .figure.bottom-right {
        right: -4%;
    }

    .values-copy-diagram .figure.mid-right {
        right: -14%;
    }

    .values-copy-diagram .figure.mid-left {
        left: -19%;
    }
}

@media print, screen and (min-width: 60em) {
    .values-diagram .figure,
    .values-copy-diagram .figure {
        height: 35%;
        width: 40%;
    }

    .figure.middle {
        top: 35%;
        left: 30%;
    }

    .figure.top-left {
        top: 0;
        left: 15%;
    }

    .figure.top-right {
        top: 0;
        right: 15%;
    }

    .figure.bottom-left {
        bottom: 0;
        left: 15%;
    }

    .figure.bottom-right {
        bottom: 0;
        right: 15%;
    }

    .figure.mid-left {
        top: 35%;
        left: 5%;
    }

    .figure.mid-right {
        top: 35%;
        right: 5%;
    }

    .values-copy-diagram .figure.top-left {
        left: -6%;
        top: 14%;
    }

    .values-copy-diagram .figure.bottom-left {
        left: -6%;
        bottom: 16%;
    }

    .values-copy-diagram .figure.top-right {
        right: -2%;
        top: 14%;
    }

    .values-copy-diagram .figure.bottom-right {
        right: -2%;
        bottom: 16%;
    }

    .values-copy-diagram .figure.mid-left {
        left: -15%;
        top: 48%;
    }

    .values-copy-diagram .figure.mid-right {
        right: -15%;
        top: 48%;
    }
}