.referencePage {
    padding-top: 20px;
    min-height: 300px;
    padding-bottom: 80px;
}
@media (min-width: 768px) {
    .referencePage {
        padding-top: 40px;
        min-height: calc(100vh -  234px);
    }
}
@media (min-width: 992px) {
    .referencePage {
        padding-top: 50px;
    }
}
@media (min-width: 1200px) {
    .referencePage {
        padding-top: 60px;
    }
}

    /* Header */
    .referencePage header {
        background-color: rgb(188, 190, 192);
        padding: 10px 8px 13px 8px;
    }
    @media (min-width: 768px) {
        .referencePage header {
            margin: 0;
        }
    }
        .referencePage h1 {
            font-family: 'FontFaceBold', Arial, Helvetica, sans-serif;
            margin: 0;
            padding: 0 0 5px 0;
            color: white;
        }
            .referencePage header h1 span.description {
                display: block;
                font-family: 'FontFaceBold', Arial, Helvetica, sans-serif;
                margin: 0;
                padding: 0 0 5px 0;
                font-size: 24px;
                line-height: 32px;
                color: #ffed00 !important;
            }
            .referencePage header h1 span.location {
                display: block;
                font-family: 'FontFaceBold', Arial, Helvetica, sans-serif;
                margin: 0;
                padding: 0 0 5px 0;
                font-size: 20px;
                line-height: 24px;
                text-transform: uppercase;
                color: #ffed00 !important;
            }
    .referencePage .row:nth-child(2),
    .referencePage .row:nth-child(3) {
        padding-top: 30px;
    }
    .referencePage .actionButtons {
        display: flex;
        justify-content: space-between;
        padding-bottom: 25px;
    }
        .actionButtonsCol {
            display: flex;
        }
        .actionButtonsCol:last-child {
            justify-items: right;
        }
            .referencePage .actionButtons a {
                display: block;
                background-color: rgba(255, 237, 0, .5);
                height: 40px;
                width: 40px;
                border-radius: 50%;
                opacity: 1;
                cursor: pointer;
                background-size: 55%;
                background-repeat: no-repeat;
                background-position: center;
            }
            .actionButtonsCol:last-child a {
                margin-left: 10px;
            }
            .referencePage .actionButtons a:hover {
                background-color: rgb(255, 237, 0);
                background-size: 50%;
            }
            .referencePage .actionButtons a:active {
                background-color: white;
            }
            .referencePage .actionButtons .downloadPdf {
                background-color: rgba(188, 190, 192, .5);
                background-image: url("pdf.svg");
            }
            .referencePage .actionButtons .location {
                background-color: rgba(188, 190, 192, .5);
                background-image: url("location.svg");
            }
            .referencePage .actionButtons .close {
                background-image: url("close.svg");
            }
            .referencePage .actionButtons .previousReference {
                background-image: url("previous.svg");
            }
            .referencePage .actionButtons .nextReference {
                background-image: url("next.svg");
            }

    /* Images */
    .referencePage .images {
        position: relative;
        margin-top: -13px;
        margin-bottom: 25px;
        display: flex;
        flex-direction: column;
    }
    @media (min-width: 768px) {
        .referencePage .images {
            margin: 0;
        }
    }
    .referencePage .images.imagesView4 {
        flex-direction: row;
        justify-content: space-between;
    }
        .referencePage .imagesInnerRow {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .referencePage .imagesInnerRow:not(:first-of-type) {
            margin-top: 2%;
        }
        .referencePage .imagesView4 .imagesInnerRow {
            flex-direction: column;
            width: 38.23%; /*65px*/
            margin-top: 0;
        }
        .referencePage .image {
            background-repeat: no-repeat;
            background-color: rgb(246, 246, 246); /* Black 3% */
            background-position: center center;
            position: relative;
        }
        .referencePage .imageWidth100HeightAuto {
            background-size: 100% auto;
        }
        .referencePage .imageWidthAutoHeight100 {
            background-size: auto 100%;
        }
        .referencePage .imagesView1Image1 {
            padding-bottom: 58.82%; /* height: 100px;*/
            width: 100%; /*170px*/;
        }
        .referencePage .imagesView2Image1 {
            padding-bottom: 58.82%; /* height: 100px;*/
            width: 58.82%; /*100px*/;
        }
        .referencePage .imagesView2Image2 {
            padding-bottom: 58.82%; /* height: 100px;*/
            width: 38.23%; /*65px*/
        }
        .referencePage .imagesView3Image1,
        .referencePage .imagesView3Image2 {
            padding-bottom: 28.53%; /*height: 48.5px;*/
            width: 100%; /*170px*/
        }
        .referencePage .imagesView4Image1 {
            padding-bottom: 58.82%; /* height: 100px;*/
            width: 58.82%; /*100px*/
        }
        .referencePage .imagesView4Image2 {
            padding-bottom: 73%; /* height: 100px;*/
            width: 100%; /*65px*/
        }
        .referencePage .imagesView4Image3 {
            padding-bottom: 73%; /*height: 48.5px;*/
            width: 100%; /*65px*/;
        }
        .referencePage .imagesView5Image1 {
            padding-bottom: 33.53%; /*height: 57px;*/
            width: 100%; /*170px*/;
        }
        .referencePage .imagesView5Image2,
        .referencePage .imagesView5Image3,
        .referencePage .imagesView5Image4 {
            padding-bottom: 23.53%; /*height: 40px;*/
            width: 32.15%; /*54.66px*/
        }
            .referencePage .images picture,
            .referencePage .images img {
                position: absolute;
                display: block;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

    /* Infos */
    .referencePage .infos {
        font-size: 17px;
    }
        .referencePage .infos .arrow {
            font-family: 'FontFaceBold', Arial, Helvetica, sans-serif;
            color: #ffed00; /* Yellow */
        }
        .referencePage .infos .title {
            font-family: 'FontFaceBold', Arial, Helvetica, sans-serif;
            color: rgb(77, 77, 79); /* Black 85% */
        }
        .referencePage .infos .year,
        .referencePage .infos .mission {
            padding-bottom: 16px;
        }
        .referencePage .infos p {
            margin-top: 6px;
            padding: 0 0 0 28px;
            font-size: 16px;
        }
        .referencePage .infos ul {
            margin-top: 6px;
            padding: 0 0 0 40px;
        }
            .referencePage .infos li {
                font-size: 16px;
            }

    /* Details */
    .referencePage .details {
        background-color: rgba(255, 235, 0, 0.1); /* Yellow */
        font-family: 'FontFaceBold', Arial, Helvetica, sans-serif;
        padding: 20px;
        font-size: 17px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-bottom: 30px;
    }
        .referencePage .details div {
            padding: 3px 0;
        }
            .referencePage .details .arrow {
                font-family: 'FontFaceBold', Arial, Helvetica, sans-serif;
                color: #ffed00;
            }
            .referencePage .details .title {
                font-family: 'FontFace', Arial, Helvetica, sans-serif;
            }

    /* Services */
    .referencePage .services {
        display: flex;
        flex-direction: column;
    }
        .referencePage .servicesRow {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
            .referencePage .service {
                display: flex;
                flex-direction: column;
                width: 23%;
            }
            .referencePage .service svg {
                background-color: #f2f2f2;
                width: 100%;
            }
            .referencePage .service.active svg {
                background-color: #ffed00;
            }
            .referencePage .service .text {
                padding: 8px 0 12px 0;
                font-size: 11.5px;
                line-height: 13px;
                font-family: 'FontFaceBold', Arial, Helvetica, sans-serif;
                text-align: center;
                color: #C5C6C8;
            }
            .referencePage .service.active .text {
                color: #4B4B4D;
            }

    /* Footer */
    .referencePage footer {
        margin-top: 30px;
        padding: 20px 0;
        font-size: 17px;
        border-right: 3px solid #ffed00;
    }
        .referencePage footer img {
           height: 22px;
            vertical-align: middle;
        }
        .referencePage footer .value {
            font-family: 'FontFaceBold', Arial, Helvetica, sans-serif;
        }
        .referencePage footer .separator {
            font-family: 'FontFaceBold', Arial, Helvetica, sans-serif;
            color: #ffed00;
        }
    a {
        text-decoration: none;
    }