.related-documents-wrapper > div { margin-bottom: 60px; }
.related-documents-wrapper .related-document-title { color: #333535; width: 100%; text-align: center; padding: 0px 0 10px 0; }
.related-documents-wrapper .related-document-title H4 { display: inline-block; background: transparent; text-transform: none; margin-bottom: 0px; font-size: 2.1em; font-weight: 400; padding: 10px 13px 11px 13px;}
.related-document-wrapper { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; }
.related-document-wrapper:has(*:only-child) {grid-template-columns: repeat(3,1fr) !important;}
.related-document-wrapper > div { width: 23.404255319148934%; margin-left: 2.127659574468085%; margin-bottom: 60px; }
.related-document-wrapper > div:only-child {grid-column: 2;}
.related-document-wrapper > div:nth-child(4n+1) { margin-left: 0; }
.related-document-wrapper > div > a { display: block; color: #170F09; }
html:not(.touch) .related-document-wrapper > div > a:hover img.lazyloaded { opacity: 1; }
.related-document-wrapper > div .related-document-image-wrapper { padding-bottom: 15px; height: 0; position: relative; overflow: hidden; }
.related-document-wrapper > div .related-document-image-wrapper img { position: absolute; top: 50%; left: 50%; max-width: inherit; max-height: inherit; height: 100%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); opacity: 0.25; transition: 1s opacity ease-out; -webkit-transition: 1s opacity ease-out; -moz-transition: 1s opacity ease-out; -ms-transition: 1s opacity ease-out; }
.related-document-wrapper > div .related-document-image-wrapper img.lazyloaded { opacity: 0.8; }
.related-document-wrapper > div .related-document-content-wrapper > h2 { font-size: 1.2em; font-weight: 500; margin-bottom: 12px; }
.related-document-wrapper > div .related-document-content-wrapper > h3 { font-size: 0.9em; font-weight: 500; color: #170F09; margin-bottom: 12px; }
.related-document-wrapper > div .related-document-content-wrapper > p { font-size: 0.9em; line-height: 1.5em; }
.related-document-wrapper > div .related-document-date-section { font-size: 0.9em; margin-bottom: 10px; }

/* Tympanus base style */
.related-documents-wrapper {position:relative;}
.related-documents-wrapper figure { position: relative; overflow: hidden; margin: 0; background: #ed8107; text-align: center; cursor: pointer; margin-bottom:20px; }
.related-documents-wrapper figure img { position: relative; display: block; opacity: 0.8; }
.related-documents-wrapper figure figcaption { color: #fff; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.related-documents-wrapper figure figcaption::before,
.related-documents-wrapper figure figcaption::after { pointer-events: none; }
.related-documents-wrapper figure figcaption,
.related-documents-wrapper figure figcaption > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.related-documents-wrapper figure figcaption > a { z-index: 500; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; }
.related-documents-wrapper figure h2 { font-weight: 300; }
.related-documents-wrapper figure h2 span { font-weight: 700; }
.related-documents-wrapper figure h2,
.related-documents-wrapper figure p { margin: 0; }
.related-documents-wrapper figure p {font-size: 68.5%; }

/* Tympanus Honey Effect */
.related-documents-wrapper figure.effect-honey { background: #170F09; }
.related-documents-wrapper figure.effect-honey:after { content: ''; opacity: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, #ed8107 0%, rgba(72,89,89,0) 50%); z-index: 10; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; }
.related-documents-wrapper figure.effect-honey img { opacity: 0.9; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; }
html:not(.touch) .related-documents-wrapper figure.effect-honey:hover img { opacity: 0.5; }
html:not(.touch) .related-documents-wrapper figure.effect-honey:hover:after { opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; }
.related-documents-wrapper figure.effect-honey figcaption::before { position: absolute; z-index: 20; bottom: 0; left: 0; width: 100%; height: 10px; background: #ed8107; content: ''; -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); }
.related-documents-wrapper figure.effect-honey h2 { position: absolute; text-transform:uppercase; font-weight:600; z-index:20; font-size:1em; color:#FFF; bottom: 0; left: 0; padding: 1em 5%; width: 90%; text-align: left; -webkit-transform: translate3d(0,-30px,0); transform: translate3d(0,-30px,0); }
.related-documents-wrapper figure.effect-honey h2 i { font-style: normal; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0,-30px,0); transform: translate3d(0,-30px,0); }
.related-documents-wrapper figure.effect-honey figcaption::before,
.related-documents-wrapper figure.effect-honey h2 { -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; }
.related-documents-wrapper figure.effect-honey + .related-document-content-wrapper { padding: 0 5%; width: 90%; }
html:not(.touch) .related-documents-wrapper figure.effect-honey:hover figcaption::before,
html:not(.touch) .related-documents-wrapper figure.effect-honey:hover h2,
html:not(.touch) .related-documents-wrapper figure.effect-honey:hover h2 i { opacity: 1; -webkit-transform: translate3d(0,0px,0); transform: translate3d(0,0px,0); }

@supports (display: grid) {
    .related-document-wrapper { display: grid; grid-column-gap: 20px; grid-row-gap: 60px; }
    .related-document-wrapper > div { width: 100%; margin-bottom: 0; margin-left: 0; }
    .related-document-wrapper:after { display: none; }
}

@media (min-width:768px) and (max-width:1500px) {
    @supports (display: grid) {
        .related-document-wrapper { grid-template-columns: 1fr 1fr !important; }
        .related-documents-wrapper.related-documents-wrapper-full .related-document-wrapper { grid-template-columns: 1fr 1fr 1fr !important; }
    }
}

@media (max-width:1023px) {
    @supports (display: grid) {
        .related-documents-wrapper.related-documents-wrapper-full .related-document-wrapper { grid-template-columns: 1fr 1fr !important; }
    }
}

@media (max-width:767px) {
    .related-document-wrapper { display: block; }
    .related-document-wrapper > div { width: 100%; margin-left: 0%; margin-bottom: 40px; }
}