.reference-container {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 auto;
    width: 80%;
    margin: 0 auto;
    padding-top: 160px;
}

.page-title {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 auto;
    width: 100%;
}

    .page-title h1 {
        width: 27%;
        border-bottom: 4px solid;
        border-image-slice: 1;
        border-image-source: linear-gradient(90deg, var(--color-rgba-white) 0%, var(--color-rgba-blue) 50%, var(--color-rgba-white) 100%);
        margin: 0 auto;
        text-align: center;
    }


    .page-title p {
        width: 100%;
        margin: 24px 0;
        text-align: center;
    }


.reference-cards {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 auto;
    position: relative;
    width: 100%;
    margin: 24px auto 0 auto;
}

    .reference-cards .card {
        display: flex;
        flex-wrap: wrap;
        flex: 0 0 auto;
        position: relative;
        width: 47%;
        min-height: 200px;
        height: auto;
        place-self: flex-start;
        margin: 24px auto;
        transition: all .5s;
    }

        .reference-cards .card:hover {
            -webkit-box-shadow: 0px 10px 15px -3px rgb(14 59 140 / 50%);
            -moz-box-shadow: 0px 10px 15px -3px rgba(14,59,140,0.5);
            box-shadow: 0px 10px 15px -3px rgb(14 59 140 / 50%);
            transition: all .5s;
        }

        .reference-cards .card:nth-child(2n+1) {
            flex-direction: row-reverse;
            margin-right: 0;
            margin-top: 100px;
        }

        .reference-cards .card:nth-child(2n) {
            margin-left: 0;
        }

        .reference-cards .card .image {
            display: flex;
            flex-wrap: wrap;
            flex: 0 0 auto;
            position: relative;
            width: 60%;
            height: auto;
        }

            .reference-cards .card .image img {
                width: 100%;
                height: auto;
            }

                .reference-cards .card .image img.clickable {
                    cursor: pointer;
                }

        .reference-cards .card .text-content {
            display: flex;
            flex-wrap: wrap;
            flex: 0 0 auto;
            position: relative;
            width: 40%;
            height: auto;
            min-height: 150px;
            padding: 24px;
            background-color: var(--color-bright-white);
            text-align: left;
            place-content: start;
            align-content: start;
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
        }

            .reference-cards .card .text-content h4, .reference-cards .card .text-content p, .reference-cards .card .text-content ul {
                width: 100%;
                margin: 0 auto;
            }

            .reference-cards .card .text-content .seperator {
                width: 25%;
                min-height: 1px;
                margin: 6px auto;
                border-bottom: 2px solid var(--color-black);
            }

            .reference-cards .card .text-content ul {
                list-style: none;
            }

.middle-bar {
    width: 20px;
    height: 100%;
    background: linear-gradient(0deg, var(--color-rgba-white) 0%, var(--color-rgba-blue) 75%);
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);
}

.js-image-overlay {
    position: fixed !important;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 80%;
    display: none;
    z-index: 99;
}

    .modal.visible {
        display: flex;
        flex-wrap: wrap;
        flex: 0 0 auto;
    }

    .modal .image-holder {
        display: flex;
        flex-wrap: wrap;
        flex: 0 0 auto;
        width: 100%;
        height: 100%;
    }

        .modal .image-holder img {
            width: 100%;
            height: auto;
        }

.hidden {
    display: none !important;
}

#right {
    position: absolute;
    z-index: 99;
    top: 50%;
    right: -7%;
    cursor: pointer;
}

    #right::before {
        -webkit-mask: url(../images/icons/right-arrow.svg) no-repeat 50% 50%;
        mask: url(../images/icons/right-arrow.svg) no-repeat 50% 50%;
        background-color: white;
    }

#left {
    position: absolute;
    z-index: 99;
    top: 50%;
    left: -7%;
    cursor: pointer;
}

    #left::before {
        -webkit-mask: url(../images/icons/left-arrow.svg) no-repeat 50% 50%;
        mask: url(../images/icons/left-arrow.svg) no-repeat 50% 50%;
        background-color: white;
    }


/*#region MOBILE STYLES*/
@media (max-width: 767px) {
    .page-title h1 {
        width: 95%;
    }

    .reference-container {
        width: 95%;
    }

    .reference-cards {
        justify-content: right;
    }

        .reference-cards .card {
            width: 93%;
            margin: 24px 0;
        }

            .reference-cards .card .text-content {
                width: 100%;
                padding: 8px;
            }

            .reference-cards .card .image {
                width: 100%;
            }

            .reference-cards .card:nth-child(2) {
                margin-top: 24px;
            }

            .reference-cards .card:first-of-type {
                margin-top: 0;
            }

    .middle-bar {
        left: 0;
        transform: translate(0,0);
    }
}
/*#endregion MOBILE STYLES*/