abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video {
    padding: 0;
    margin: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    border: 0;
    outline: 0
}

html {
    font-family: Dico;
    color: #000;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%
}

body {
    font-size: 15px;
    line-height: 1.1875
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block
}

nav ul {
    list-style: none
}

blockquote,q {
    quotes: none
}

blockquote:after,blockquote:before,q:after,q:before {
    content: "";
    content: none
}

.no-touchevents a:hover,a,a:visited {
    padding: 0;
    margin: 0;
    font-size: 100%;
    color: #000;
    text-decoration: none;
    vertical-align: baseline;
    background: transparent
}

a:focus {
    outline: 0
}

.no-touchevents a:hover,a:active {
    color: #000;
    text-decoration: none;
    outline: 0
}

ins {
    text-decoration: none
}

ins,mark {
    color: #000;
    background-color: #000
}

mark {
    font-style: italic;
    font-weight: 700
}

del {
    text-decoration: line-through
}

abbr[title],dfn[title] {
    cursor: help;
    border-bottom: 1px dotted
}

table {
    border-spacing: 0;
    border-collapse: collapse
}

hr {
    display: block;
    height: 1px;
    padding: 0;
    margin: 1em 0;
    border: 0;
    border-top: 1px solid #000
}

input,select {
    vertical-align: middle
}

svg:not(:root) {
    overflow: hidden
}

.clearfix:after {
    display: table;
    clear: both;
    content: ""
}

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

body.page-template-homepage {
    color: #000000;
    background: #ffffff
}

body.page-template-collaboration {
    background: #f3f3f3
}

body.page-template-about {
    background: #fff
}

body.page-template-page,body.page-template-privacy {
    color: #fff;
    background: #000
}

body.page-template-page a,body.page-template-privacy a {
    color: #fff
}

body.h-state--fadeout--intro-transition {
    overflow: hidden
}

*,:after,:before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit
}

.h-state--hidden {
    display: none!important
}

@media (min-width: 0) and (max-width:640px) {
    .h-state--hidden-mobile {
        display:none!important
    }
}

@media (min-width: 641px) and (max-width:980px) {
    .h-state--hidden-tablet {
        display:none!important
    }
}

@media (min-width: 981px) and (max-width:1350px) {
    .h-state--hidden-desktop {
        display:none!important
    }
}

.h-state--visible {
    display: block
}

@media (min-width: 981px) and (max-width:1350px) {
    .h-state--visible-desktop {
        display:block!important
    }
}

@media (min-width: 641px) and (max-width:980px) {
    .h-state--visible-tablet {
        display:block!important
    }
}

@media (min-width: 0) and (max-width:640px) {
    .h-state--visible-mobile {
        display:block!important
    }
}

.h-screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip: rect(0,0,0,0)
}

.h-page-padding {
    padding: 10px
}

.h-page-padding-vertical {
    padding: 10px 0
}

.h-page-padding-horizontal {
    padding: 0 10px
}

.h-img-container {
    position: relative;
    width: 100%;
    height: auto
}

.h-img {
    z-index: 1
}

.h-aspect-ratio {
    height: 0;
    overflow: hidden
}

.h-page-fade-off {
    opacity: 0
}

.h-page-fade-on {
    opacity: 1;
    -webkit-transition: opacity .5s ease-in .25s;
    transition: opacity .5s ease-in .25s
}

.h-scroller-container-outer {
    position: absolute;
    top: 0;
    right: -20px;
    bottom: 0;
    left: 0;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    overflow-y: scroll
}

@media (min-width: 0) and (max-width:640px) {
    .h-scroller-container-outer {
        position:relative;
        top: auto!important;
        right: auto!important;
        bottom: auto!important;
        left: auto!important;
        overflow: visible
    }
}

@media print {
    .h-scroller-container-outer {
        position: relative;
        top: auto!important;
        right: auto!important;
        bottom: auto!important;
        left: auto!important;
        overflow: visible
    }
}

.h-scroller-container-outer .h-scroller-container {
    width: calc(100% - 20px)
}

@media (min-width: 0) and (max-width:640px) {
    .h-scroller-container-outer .h-scroller-container {
        width:100%
    }
}

@media print {
    .h-scroller-container-outer .h-scroller-container {
        width: 100%
    }
}

a,button,div,input,label,select,textarea {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent
}

@font-face {
    font-family: Dico;
    src: url(Assets/Fonts/DicoMono.woff)format("woff");
    font-style: normal;
    font-weight: 450;
    font-stretch: normal
}

@font-face {
    font-family: Dico;
    src: url(Assets/Fonts/DicoMono.woff) format("woff"),url(Assets/Fonts/DicoMono.woff) format("woff");
    font-style: normal;
    font-weight: 400;
    font-stretch: normal
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility
}

h1,h2,h3,h4 {
    margin: 0
}

h1,h2,h3,h4,p {
    padding: 0;
    font-style: normal;
    font-weight: 400
}

p {
    margin: 0 0 10px;
    font-size: 12.5px;
    line-height: 1.1875
}

p:last-child {
    margin-bottom: 0
}

p em,p i {
    font-style: italic;
    font-weight: 400;
    font-stretch: normal
}

p+ul {
    margin-top: -19px
}

@font-face {
    font-family: Icons;
    src: url(Assets/Icons/Gratin.png) format("woff2"),url(assets/fonts/FAIcons-Regular.woff) format("woff");
    font-style: normal;
    font-weight: 400
}

.h-icon-font:before {
    display: inline-block;
    font-family: Icons;
    font-size: 20px;
    line-height: 20px;
    text-transform: none;
    white-space: nowrap;
    vertical-align: top;
}

.h-icon-font.h-icon-facebook:before {
    content: "A"
}

.h-icon-font.h-icon-twitter:before {
    content: "B"
}

.h-icon-font.h-icon-youtube:before {
    content: "C"
}

.h-icon-font.h-icon-pinterest:before {
    content: "D"
}

.h-icon-font.h-icon-linkedin:before {
    content: "E"
}
.h-icon-font.h-icon-flickr:before {
    content: "F"
}

.h-icon-font.h-icon-rss:before {
    content: "G"
}

.h-icon-font.h-icon-google:before {
    content: "H"
}

.h-icon-font.h-icon-instagram:before {
    content: "I"
}

.h-icon-font.h-icon-arrow-left:before {
    content: "a"
}

.h-icon-font.h-icon-arrow-right:before {
    content: "b"
}

.h-icon-font.h-icon-arrow-first:before {
    content: "q"
}

.h-icon-font.h-icon-arrow-last:before {
    content: "r"
}

.h-icon-font.h-icon-triangle-left:before {
    content: "c"
}

.h-icon-font.h-icon-triangle-right:before {
    content: "d"
}

.h-icon-font.h-icon-triangle-down:before {
    content: "e"
}

.h-icon-font.h-icon-triangle-up:before {
    content: "f"
}

.h-icon-font.h-icon-triangle-equilateral-right:before {
    content: "g"
}

.h-icon-font.h-icon-triangle-equilateral-left:before {
    content: "n"
}

.h-icon-font.h-icon-triangle-equilateral-up:before {
    content: "o"
}

.h-icon-font.h-icon-triangle-equilateral-down:before {
    content: "p"
}

.h-icon-font.h-icon-navi:before {
    content: "h"
}

.h-icon-font.h-icon-print:before {
    content: "i"
}

.h-icon-font.h-icon-social-share-more:before {
    content: "j"
}

.h-icon-font.h-icon-close:before {
    content: "k"
}

.h-icon-font.h-icon-document:before {
    content: "l"
}

.h-icon-font.h-icon-mail:before {
    content: "m"
}

.h-indicator {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background: transparent
}

@media print {
    .h-indicator {
        display: none
    }
}

.g-col {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    background-clip: padding-box!important;
    border: 0 solid transparent;
    padding: 0;
    border-left-width: 10px
}

.g-row {
    margin-left: -10px
}

.g-row:after {
    display: table;
    clear: both;
    content: ""
}

.g-span-1 {
    width: 15.40% 
}

.g-span-1,.g-span-2 {
    padding: 0;
    margin-left: 0;
    border-right-width: 10px
}

.g-span-2 {
    width: 8.3333333333%
}

.g-span-3 {
    width: 12.5%
}

.g-span-3,.g-span-4 {
    padding: 0;
    margin-left: 0;
    border-left-width: 10px
}

.g-span-4 {
    width: 16.6666666667%
}

.g-span-5 {
    width: 20.8333333333%
}

.g-span-5,.g-span-6 {
    padding: 0;
    margin-left: 0;
    border-left-width: 10px
}

.g-span-6 {
    width: 25%
}

.g-span-7 {
    width: 30.47%
}

.g-span-7,.g-span-8 {
    padding: 0;
    margin-left: 0;
    border-left-width: 10px
}

.g-span-8 {
    width: 33.3333333333%
}

.g-span-9 {
    width: 37.5%
}

.g-span-9,.g-span-10 {
    padding: 0;
    margin-left: 0;
    border-left-width: 10px
}

.g-span-10 {
    width: 41.6666666667%
}

.g-span-11 {
    width: 45.8333333333%
}

.g-span-11,.g-span-12 {
    padding: 0;
    margin-left: 0;
    border-left-width: 10px
}

.g-span-12 {
    width: 50%
}

.g-span-13 {
    width: 54.1666666667%
}

.g-span-13,.g-span-14 {
    padding: 0;
    margin-left: 0;
    border-left-width: 10px
}

.g-span-14 {
    width: 58.3333333333%
}

.g-span-15 {
    width: 62.5%
}

.g-span-15,.g-span-16 {
    padding: 0;
    margin-left: 0;
    border-left-width: 10px
}

.g-span-16 {
    width: 54.13%
}

.g-span-17 {
    width: 70.8333333333%
}

.g-span-17,.g-span-18 {
    padding: 0;
    margin-left: 0;
    border-left-width: 10px
}

.g-span-18 {
    width: 75%
}

.g-span-19 {
    width: 79.1666666667%
}

.g-span-19,.g-span-20 {
    padding: 0;
    margin-left: 0;
    border-left-width: 10px
}

.g-span-20 {
    width: 83.3333333333%
}

.g-span-21 {
    width: 87.5%
}

.g-span-21,.g-span-22 {
    padding: 0;
    margin-left: 0;
    border-left-width: 10px
}

.g-span-22 {
    width: 91.6666666667%
}

.g-span-23 {
    width: 95.8333333333%
}

.g-span-23,.g-span-24 {
    padding: 0;
    margin-left: 0;
    border-left-width: 10px
}

.g-span-24 {
    width: 100%
}

@media (min-width: 641px) and (max-width:980px) {
    .g-span-tablet-1 {
        width:12.5%
    }

    .g-span-tablet-1,.g-span-tablet-2 {
        padding: 0;
        margin-left: 0;
        border-left-width: 10px
    }

    .g-span-tablet-2 {
        width: 25%
    }

    .g-span-tablet-3 {
        width: 37.5%
    }

    .g-span-tablet-3,.g-span-tablet-4 {
        padding: 0;
        margin-left: 0;
        border-left-width: 10px
    }

    .g-span-tablet-4 {
        width: 50%
    }

    .g-span-tablet-5 {
        width: 62.5%
    }

    .g-span-tablet-5,.g-span-tablet-6 {
        padding: 0;
        margin-left: 0;
        border-left-width: 10px
    }

    .g-span-tablet-6 {
        width: 75%
    }

    .g-span-tablet-7 {
        width: 87.5%
    }

    .g-span-tablet-7,.g-span-tablet-8 {
        padding: 0;
        margin-left: 0;
        border-left-width: 10px
    }

    .g-span-tablet-8 {
        width: 100%
    }
}

@media (min-width: 0) and (max-width:640px) {
    .g-span-mobile-1 {
        width:50%
    }

    .g-span-mobile-1,.g-span-mobile-2 {
        padding: 0;
        margin-left: 0;
        border-left-width: 10px
    }

    .g-span-mobile-2 {
        width: 100%
    }
}

.mod-about {
    position: relative
}

.mod-about__inner {
    height: calc(100vh - 64.53125px);
    padding: 0 10px
}

@media (min-width: 641px) and (max-width:980px) {
    .mod-about__inner {
        height:calc(100vh - 34.84375px)
    }
}

@media (min-width: 0) and (max-width:640px) {
    .mod-about__inner {
        height:auto
    }
}

.admin-bar .mod-about__inner {
    height: calc(100vh - 96.53125px)
}

@media (min-width: 641px) and (max-width:980px) {
    .admin-bar .mod-about__inner {
        height:calc(100vh - 66.84375px)
    }
}

@media screen and (max-width: 782px) {
    .admin-bar .mod-about__inner {
        height:calc(100vh - 80.84375px)
    }
}

@media (min-width: 0) and (max-width:640px) {
    .admin-bar .mod-about__inner {
        height:auto
    }
}

.mod-about .g-col,.mod-about .g-row {
    height: 100%
}

@media (min-width: 0) and (max-width:640px) {
    .mod-about .g-col,.mod-about .g-row {
        height:auto
    }
}

.mod-about .g-col {
    position: relative;
    overflow-x: hidden
}

@media (min-width: 0) and (max-width:640px) {
    .mod-about .g-col {
        overflow:visible
    }
}

.mod-about__collab__container {
    width: calc(1700% + 16 * 10px)
}

.mod-about__grid__mobile {
    display: none;
    margin-top: 14.84375px
}

@media (min-width: 0) and (max-width:640px) {
    .mod-about__grid__mobile {
        display:block
    }
}

.no-touchevents .mod-about__link__collab:hover .mod-collab__item img {
    opacity: 1
}

.mod-collab {
    position: relative
}

.mod-collab__col__1 {
    width: 5.8823529412%
}

.mod-collab__col__1,.mod-collab__col__2 {
    padding: 0;
    margin-left: 0;
    border-left-width: 10px;
    text-align: right;
}

.mod-collab__col__2 {
    width: 23.5294117647%
}

@media (min-width: 981px) and (max-width:1350px) {
    .mod-collab__col__2 {
        width:41.1764705882%;
        padding: 0;
        margin-left: 0;
        border-left-width: 10px
    }
}

@media (min-width: 641px) and (max-width:980px) {
    .mod-collab__col__2 {
        width:41.1764705882%;
        padding: 0;
        margin-left: 0;
        border-left-width: 10px
    }
}

@media (min-width: 0) and (max-width:640px) {
    .mod-collab__col__2 {
        width:100%;
        padding-bottom: 7.421875px
    }
}

.mod-about .mod-collab__col__2,.mod-homepage .mod-collab__col__2 {
    opacity: 0
}

.mod-collab__col__3 {
    width: 35.2941176471%;
    padding: 0;
    margin-left: 0;
    border-left-width: 10px
}

@media (min-width: 981px) and (max-width:1350px) {
    .mod-collab__col__3 {
        width:47.0588235294%;
        padding: 0;
        margin-left: 0;
        border-left-width: 10px
    }
}

@media (min-width: 641px) and (max-width:980px) {
    .mod-collab__col__3 {
        width:52.9411764706%;
        padding: 0;
        margin-left: 0;
        border-left-width: 10px
    }
}

@media (min-width: 0) and (max-width:640px) {
    .mod-collab__col__3 {
        width:100%
    }
}

.mod-about .mod-collab__col__3,.mod-homepage .mod-collab__col__3 {
    opacity: 0
}

.mod-collab__item {
    padding-bottom: 10px
}

.mod-collab__item.h-state--active .mod-collab__item__image__wrapper {
    opacity: 1
}

@media (min-width: 0) and (max-width:640px) {
    .mod-collab__item {
        padding-bottom:40px
    }
}

.mod-collab__item__content {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer
}

.mod-collab__item__content,.mod-collab__item__content p {
    font-family: Dico;
    font-size: 12.5px;
    line-height: 1.1875
}

.mod-collab__item__thumb__wrapper {
    cursor: pointer
}

.mod-collab__item__image__wrapper {
    opacity: 0
}

.mod-collab__item__image__wrapper.h-width-40 {
    width: 40%
}

.mod-collab__item__image__wrapper.h-width-50 {
    width: 50%
}

.mod-collab__item__image__wrapper.h-width-60 {
    width: 60%
}

.mod-collab__item__image__wrapper.h-width-70 {
    width: 70%
}

.mod-collab__item__image__wrapper.h-width-80 {
    width: 80%
}

.mod-collab__item__image__wrapper.h-width-90 {
    width: 90%
}

@media (min-width: 0) and (max-width:640px) {
    .mod-collab__item__image__wrapper {
        width:100%!important
    }
}

.mod-collab__item .h-indicator {
    z-index: 1
}

.mod-collab__item img {
    position: absolute;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: opacity .4s ease-in-out;
    transition: opacity .4s ease-in-out
}

.mod-collab__item img.lazyload,.mod-collab__item img.lazyloading {
    opacity: 0
}

.mod-collab__item img.lazyloaded {
    opacity: 1;
    -webkit-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out
}

.page-template-about .mod-collab__item img.lazyloaded,.page-template-homepage .mod-collab__item img.lazyloaded {
    opacity: .2
}

.mod-collaboration {
    position: relative
}

.mod-collaboration__inner {
    height: calc(100vh - 64.53125px);
    padding: 0 10px
}

@media (min-width: 641px) and (max-width:980px) {
    .mod-collaboration__inner {
        height:calc(100vh - 34.84375px)
    }
}

@media (min-width: 0) and (max-width:640px) {
    .mod-collaboration__inner {
        height:auto
    }
}

.admin-bar .mod-collaboration__inner {
    height: calc(100vh - 96.53125px)
}

@media (min-width: 641px) and (max-width:980px) {
    .admin-bar .mod-collaboration__inner {
        height:calc(100vh - 66.84375px)
    }
}

@media screen and (max-width: 782px) {
    .admin-bar .mod-collaboration__inner {
        height:calc(100vh - 80.84375px)
    }
}

@media (min-width: 0) and (max-width:640px) {
    .admin-bar .mod-collaboration__inner {
        height:auto
    }
}

.mod-collaboration .g-col,.mod-collaboration .g-row {
    height: 100%
}

@media (min-width: 0) and (max-width:640px) {
    .mod-collaboration .g-col,.mod-collaboration .g-row {
        height:auto
    }
}

.mod-collaboration .g-col {
    position: relative;
    overflow-x: hidden
}

@media (min-width: 0) and (max-width:640px) {
    .mod-collaboration .g-col {
        overflow:visible
    }
}

.mod-collaboration__link__about .mod-info {
    -webkit-transition: color .4s ease-in-out;
    transition: color .4s ease-in-out
}

.no-touchevents .mod-collaboration__link__about:hover .mod-info {
    color: #000!important
}

.no-touchevents .mod-collaboration__link__about:hover .mod-info img {
    opacity: 1
}

.mod-expander {
    position: relative;
    display: block;
    width: 100%
}

.mod-expander__item.h-state--active-transition .mod-expander__arrow:before,.mod-expander__item.h-state--active .mod-expander__arrow:before {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.mod-expander__header {
    display: block
}

.mod-expander__arrow {
    margin-left: 5px
}

.mod-expander__arrow:before {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
}

.mod-expander__content {
    display: none
}

.mod-grid {
    position: relative;
    width: 100%
}

.mod-grid__inner {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    width: calc(100% + 10px);
    padding-bottom: 10px
}

@media (min-width: 0) and (max-width:640px) {
    .mod-grid__inner {
        width:100%
    }
}

.mod-grid__item {
    position: relative;
    display: block;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    padding-right: 10px;
    margin-top: 10px
}

.mod-grid__item:nth-child(-n+2) {
    margin-top: 0
}

@media (min-width: 2001px) {
    .mod-grid__item {
        -ms-flex-preferred-size:33.33333%;
        flex-basis: 33.33333%
    }

    .mod-grid__item:nth-child(3) {
        margin-top: 0
    }
}

@media (min-width: 641px) and (max-width:980px) {
    .mod-grid__item {
        -ms-flex-preferred-size:100%;
        flex-basis: 100%;
        padding-right: 0
    }

    .mod-grid__item:nth-child(2) {
        margin-top: 10px
    }
}

@media (min-width: 0) and (max-width:640px) {
    .mod-grid__item {
        -ms-flex-preferred-size:100%;
        flex-basis: 100%;
        padding-right: 0
    }

    .mod-grid__item:nth-child(2) {
        margin-top: 10px
    }
}

.mod-grid__item figure {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    font-size: 0
}

.mod-grid__item .h-indicator {
    z-index: 1;
    background: #f3f3f3
}

.mod-grid__item img {
    position: absolute;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.mod-grid__item img.lazyload,.mod-grid__item img.lazyloading {
    opacity: 0
}

.mod-grid__item img.lazyloaded {
    opacity: 1;
    -webkit-transition: opacity .5s ease-in;
    transition: opacity .5s ease-in
}

.mod-header-small {
    display: none
}

@media (min-width: 641px) and (max-width:980px) {
    .mod-header-small {
        display:block
    }
}

@media (min-width: 0) and (max-width:640px) {
    .mod-header-small {
        display:block
    }
}

.mod-header-small p {
    margin-bottom: 0
}

.mod-header-small a {
    color: #fff
}

.no-touchevents .mod-header-small a:hover {
    color: #7c7c7c
}

.mod-header {
    position: relative;
    z-index: 1000;
    height: 64.53125px
}

@media (min-width: 641px) and (max-width:980px) {
    .mod-header {
        height:34.84375px
    }
}

@media (min-width: 0) and (max-width:640px) {
    .mod-header {
        height:34.84375px
    }
}

.mod-header__inner {
    position: fixed;
    top: 0;
    width: 100%;
    height: 64.53125px;
    padding: 10px;
    -webkit-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out
}

.mod-header__inner:after {
    display: table;
    clear: both;
    content: ""
}

@media (min-width: 641px) and (max-width:980px) {
    .mod-header__inner {
        height:34.84375px
    }
}

@media (min-width: 0) and (max-width:640px) {
    .mod-header__inner {
        height:34.84375px
    }
}

.mod-header__inner,.mod-header__inner p {
    font-size: 13px;
    line-height: 1.08
}

.mod-header__inner a {
    -webkit-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out
}

.page-template-homepage.h-state--has-intro .mod-header__inner,.page-template-homepage.h-state--has-intro .mod-header__inner a {
    color: #3c3c3c
}

.no-touchevents .page-template-homepage.h-state--has-intro .mod-header__inner:hover,.no-touchevents .page-template-homepage.h-state--has-intro .mod-header__inner:hover a {
    color: #fff
}

.no-touchevents .page-template-homepage.h-state--has-intro .mod-header__inner a:hover {
    color: #3c3c3c
}

.page-template-homepage .mod-header__inner {
    position: relative;
    color: #000000;
    background: #ffffff
}

@media (min-width: 641px) and (max-width:980px) {
    .page-template-homepage .mod-header__inner {
        position:fixed
    }
}

@media (min-width: 0) and (max-width:640px) {
    .page-template-homepage .mod-header__inner {
        position:fixed
    }
}

.page-template-homepage .mod-header__inner a {
    color: #000000
}

.no-touchevents .page-template-homepage .mod-header__inner a:hover {
    color: #000000
}

.page-template-about .mod-header__inner,.page-template-collaboration .mod-header__inner {
    color: #000;
    background: #fff
}

.page-template-about .mod-header__inner a,.page-template-collaboration .mod-header__inner a {
    color: #000
}

.no-touchevents .page-template-about .mod-header__inner a:hover,.no-touchevents .page-template-collaboration .mod-header__inner a:hover {
    color: #7c7c7c
}

.page-template-collaboration .mod-header__inner {
    background: #f3f3f3
}

.page-template-page .mod-header__inner,.page-template-privacy .mod-header__inner {
    color: #fff;
    background: #000
}

.page-template-page .mod-header__inner a,.page-template-privacy .mod-header__inner a {
    color: #fff
}

.no-touchevents .page-template-page .mod-header__inner a:hover,.no-touchevents .page-template-privacy .mod-header__inner a:hover {
    color: #7c7c7c
}

.admin-bar .mod-header__inner {
    top: 32px
}

@media screen and (max-width: 782px) {
    .admin-bar .mod-header__inner {
        top:46px
    }
}

.admin-bar.page-template-homepage .mod-header__inner {
    top: 0
}

@media (min-width: 641px) and (max-width:980px) {
    .admin-bar.page-template-homepage .mod-header__inner {
        top:32px
    }
}

@media screen and (max-width: 782px) {
    .admin-bar.page-template-homepage .mod-header__inner {
        top:46px
    }
}

@media (min-width: 0) and (max-width:640px) {
    .admin-bar.page-template-homepage .mod-header__inner {
        top:46px
    }
}

.mod-header__col__1,.mod-header__col__2,.mod-header__col__3,.mod-header__col__4 {
    float: left;
    padding-right: 20px;
    vertical-align: top
}

@media (min-width: 641px) and (max-width:980px) {
    .mod-header__col__1,.mod-header__col__2,.mod-header__col__3,.mod-header__col__4 {
        display:none
    }
}

@media (min-width: 0) and (max-width:640px) {
    .mod-header__col__1,.mod-header__col__2,.mod-header__col__3,.mod-header__col__4 {
        display:none
    }
}

@media (min-width: 981px) and (max-width:1350px) {
    .mod-header__col__4 {
        display:none
    }
}

@media (min-width: 1200px) {
    .mod-header__col__4 {
        display:block
    }
}

.mod-header__col__5,.mod-header__col__6,.mod-header__col__7 {
    float: right;
    vertical-align: top
}

.mod-header__col__5 {
    padding-right: 0px
}

.mod-header__col__5 .mod-header__navigation li {
    padding: 0 20px;
    display: block !important; /* CHANGED: Force display block for all nav items */
    padding: 10px 0; /* CHANGED: Adjust padding for better spacing */
}
.mod-header__col__5 .mod-header__navigation li:last-child {
    padding-right: 30px;
    
}

@media (max-width: 640px) {
    .mod-header__col__5 .mod-header__navigation li:last-child {
        padding: 0 15px 0 0; /* Adjust padding for mobile */
    }
}

@media (min-width: 2001px) {
    .mod-header__col__5 {
        float:left;
        padding-right: 0;
        padding-left: 100px
    }

    .mod-header__col__5 .mod-header__navigation li {
        padding: 0 40px
    }
}

@media (min-width: 1601px) and (max-width:2000px) {
    .mod-header__col__5 {
        float:right;
        padding-right: 0;
        padding-left: 80px
    }

    .mod-header__col__5 .mod-header__navigation li {
        padding: 0 30px
    }
}

@media (min-width: 1351px) and (max-width:1600px) {
    .mod-header__col__5 {
        padding-right:0px
    }
}

@media (min-width: 981px) and (max-width:1350px) {
    .mod-header__col__5 {
        padding-right:10px
    }

    .mod-header__col__5 .mod-header__navigation li {
        padding: 0 20px 0 0
    }
}

@media (min-width: 641px) and (max-width:980px) {
    .mod-header__col__5 {
        float:left;
        padding-right: 0
    }

    .mod-header__col__5 .mod-header__navigation li {
        padding: 0 20px 0 0
    }
}

@media (min-width: 0) and (max-width:640px) {
    .mod-header__col__5 {
        float:left;
        padding-right: 0
    }

    .mod-header__col__5 .mod-header__navigation li {
        padding: 0 15px 0 0
    }

    .mod-header__col__5 .mod-header__navigation li:first-of-type {
    }
}

@media (min-width: 0) and (max-width:380px) {
    .mod-header__col__5 .mod-header__navigation li {
        padding-right:10px
    }
}

.mod-header__col__6 {
    padding-right: 40px
}

.mod-header__col__6 .mod-header__navigation li {
    padding: 0 10px
}

@media (min-width: 2001px) {
    .mod-header__col__6 {
        padding-right:60px
    }

    .mod-header__col__6 .mod-header__navigation li {
        padding: 0 40px
    }
}

@media (min-width: 1601px) and (max-width:2000px) {
    .mod-header__col__6 {
        padding-right:60px
    }

    .mod-header__col__6 .mod-header__navigation li {
        padding: 0 30px
    }
}

@media (min-width: 1351px) and (max-width:1600px) {
    .mod-header__col__6 {
        padding-right:30px
    }
}

@media (min-width: 981px) and (max-width:1350px) {
    .mod-header__col__6 {
        padding-right:10px
    }

    .mod-header__col__6 .mod-header__navigation li {
        padding: 0 10px 0 0
    }
}

@media (min-width: 641px) and (max-width:980px) {
    .mod-header__col__6 {
        padding-right:0
    }

    .mod-header__col__6 .mod-header__navigation li {
        padding: 0 20px 0 0
    }
}

@media (min-width: 0) and (max-width:640px) {
    .mod-header__col__6 {
        padding-right:0
    }

    .mod-header__col__6 .mod-header__navigation li {
        padding: 0 10px 0 0
    }

    .mod-header__col__6 .mod-header__navigation li:first-of-type {
        display: none
    }
}

@media (min-width: 0) and (max-width:380px) {
    .mod-header__col__6 .mod-header__navigation li {
        padding-right:5px
    }
}

.mod-header__navigation {
    padding-top: 4px;
    font-family: Dico;
    font-size: 12.5px;
    line-height: 1.1875;
    list-style: none
}

.mod-header__navigation:after {
    display: table;
    clear: both;
    content: ""
}

@media (min-width: 641px) and (max-width:980px) {
    .mod-header__navigation {
        padding-top:0
    }
}

@media (min-width: 0) and (max-width:640px) {
    .mod-header__navigation {
        padding-top:0
    }
}

.mod-header__navigation li {
    float: left
}

.mod-header__navigation li .h-state--is-active {
    font-style: italic
}

.mod-homepage {
    position: relative;
    z-index: 200;
    width: 100%;
    -webkit-transition: -webkit-transform .75s ease-in-out;
    transition: -webkit-transform .75s ease-in-out;
    transition: transform .75s ease-in-out;
    transition: transform .75s ease-in-out,-webkit-transform .75s ease-in-out
}

@media (min-width: 641px) and (max-width:980px) {
    .mod-homepage {
        top:auto
    }
}

@media (min-width: 0) and (max-width:640px) {
    .mod-homepage {
        top:auto
    }
}

.h-state--fadeout-intro .mod-homepage {
    -webkit-transform: translateY(-80vh);
    transform: translateY(-80vh)
}

@media (min-height: 1300px) {
    .h-state--fadeout-intro .mod-homepage {
        -webkit-transform:translateY(-85vh);
        transform: translateY(-85vh)
    }
}

@media (min-width: 641px) and (max-width:980px) {
    .h-state--fadeout-intro .mod-homepage {
        -webkit-transform:none;
        transform: none
    }
}

@media (min-width: 0) and (max-width:640px) {
    .h-state--fadeout-intro .mod-homepage {
        -webkit-transform:none;
        transform: none
    }
}

.h-state--fadeout-intro-end .mod-homepage {
    -webkit-transition: none;
    transition: none;
    -webkit-transform: none;
    transform: none
}

.mod-homepage__inner {
    height: calc(100vh - 64.53125px);
    padding: 0 10px
}

@media (min-width: 641px) and (max-width:980px) {
    .mod-homepage__inner {
        height:calc(100vh - 34.84375px)
    }
}

@media (min-width: 0) and (max-width:640px) {
    .mod-homepage__inner {
        height:auto
    }
}

.admin-bar .mod-homepage__inner {
    height: calc(100vh - 96.53125px)
}

@media (min-width: 641px) and (max-width:980px) {
    .admin-bar .mod-homepage__inner {
        height:calc(100vh - 66.84375px)
    }
}

@media screen and (max-width: 782px) {
    .admin-bar .mod-homepage__inner {
        height:calc(100vh - 80.84375px)
    }
}

@media (min-width: 0) and (max-width:640px) {
    .admin-bar .mod-homepage__inner {
        height:auto
    }
}

.mod-homepage .g-col,.mod-homepage .g-row {
    height: 100%
}

@media (min-width: 0) and (max-width:640px) {
    .mod-homepage .g-col,.mod-homepage .g-row {
        height:auto
    }
}

.mod-homepage .g-col {
    position: relative;
    overflow-x: hidden
}

@media (min-width: 0) and (max-width:640px) {
    .mod-homepage .g-col {
        overflow:visible
    }
}

.mod-homepage__collab__container {
    width: calc(1700% + 16 * 10px)
}

.mod-homepage__link__about .mod-info {
    -webkit-transition: color .4s ease-in-out;
    transition: color .4s ease-in-out
}

.no-touchevents .mod-homepage__link__about:hover .mod-info {
    color: #000000!important
}

.no-touchevents .mod-homepage__link__about:hover .mod-info img,.no-touchevents .mod-homepage__link__collab:hover .mod-collab__item img {
    opacity: 1
}

.mod-info {
    position: relative
}

.page-template-homepage .mod-info {
    color: #cccc
}

.page-template-about .mod-info {
    color: #000
}

.page-template-collaboration .mod-info {
    color: #cdcdcd
}

.mod-info__inner {
    padding: 0 0 10px
}

.mod-info__item {
    padding-bottom: 30px
}

.mod-info__item:after {
    display: table;
    clear: both;
    content: ""
}

.mod-info__item:first-of-type .mod-info__item__title {
    padding-top: 4px
}

.mod-info__item:last-of-type {
    padding-bottom: 0
}

.mod-info__item__title {
    float: left;
    width: 20%;
    padding-top: 3px;
    padding-right: 20px;
    font-size: 12.5px;
    line-height: 1.08
}

@media (min-width: 981px) and (max-width:1350px) {
    .mod-info__item__title {
        float:none;
        width: 100%;
        padding-top: 0;
        padding-right: 0;
        padding-bottom: 17.8125px;
        font-size: 15px;
        line-height: 1.1875;
        text-align: center
    }
}

@media (min-width: 641px) and (max-width:980px) {
    .mod-info__item__title {
        float:none;
        width: 100%;
        padding-top: 0;
        padding-right: 0;
        padding-bottom: 17.8125px;
        font-size: 15px;
        line-height: 1.1875;
        text-align: center
    }
}

@media (min-width: 0) and (max-width:640px) {
    .mod-info__item__title {
        float:none;
        width: 100%;
        padding-top: 0;
        padding-right: 0;
        padding-bottom: 17.8125px;
        font-size: 15px;
        line-height: 1.1875;
        text-align: center
    }
}

.mod-info__item__content {
    float: right;
    width: 80%
}

@media (min-width: 981px) and (max-width:1350px) {
    .mod-info__item__content {
        float:none;
        width: 100%
    }
}

@media (min-width: 641px) and (max-width:980px) {
    .mod-info__item__content {
        float:none;
        width: 100%
    }
}

@media (min-width: 0) and (max-width:640px) {
    .mod-info__item__content {
        float:none;
        width: 100%
    }
}

.mod-info__item__content img {
    width: 40%;
    height: auto;
    -webkit-transition: opacity .4s linear;
    transition: opacity .4s linear
}

.mod-info__item__content img.h-image-large {
    width: 80%
}

.page-template-collaboration .mod-info__item__content img,.page-template-homepage .mod-info__item__content img {
    opacity: .2
}

.mod-intro {
    position: relative;
    z-index: 100;
    width: 100%;
    height: 80vh;
    overflow: hidden;
    cursor: pointer;
    -webkit-transition: -webkit-transform .75s ease-in-out;
    transition: -webkit-transform .75s ease-in-out;
    transition: transform .75s ease-in-out;
    transition: transform .75s ease-in-out,-webkit-transform .75s ease-in-out
}

@media (min-height: 1300px) {
    .mod-intro {
        height:85vh
    }
}

@media (min-width: 641px) and (max-width:980px) {
    .mod-intro {
        display:none
    }
}

@media (min-width: 0) and (max-width:640px) {
    .mod-intro {
        display:none
    }
}

.h-state--fadeout-intro .mod-intro {
    -webkit-transform: translateY(-60vh);
    transform: translateY(-60vh)
}

@media (min-height: 1300px) {
    .h-state--fadeout-intro .mod-intro {
        -webkit-transform:translateY(-70vh);
        transform: translateY(-70vh)
    }
}

@media (min-height: 1500px) {
    .h-state--fadeout-intro .mod-intro {
        -webkit-transform:translateY(-75vh);
        transform: translateY(-75vh)
    }
}

@media (min-width: 641px) and (max-width:980px) {
    .h-state--fadeout-intro .mod-intro {
        -webkit-transform:none;
        transform: none
    }
}

@media (min-width: 0) and (max-width:640px) {
    .h-state--fadeout-intro .mod-intro {
        -webkit-transform:none;
        transform: none
    }
}

.h-state--fadeout-intro-end .mod-intro {
    display: none
}

.mod-intro__text {
    position: absolute;
    top: 50%;
    width: 100%;
    padding: 10px;
    font-size: 34px;
    line-height: 1.1;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.mod-page {
    position: relative
}

.mod-page__inner {
    padding: 10px
}

.mod-page__title {
    padding-bottom: 14.84375px
}

.mod-page__privacy__columns {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px
}

@media (min-width: 981px) and (max-width:1350px) {
    .mod-page__privacy__columns {
        -webkit-column-count:3;
        -moz-column-count: 3;
        column-count: 3
    }
}

@media (min-width: 641px) and (max-width:980px) {
    .mod-page__privacy__columns {
        -webkit-column-count:2;
        -moz-column-count: 2;
        column-count: 2
    }
}

@media (min-width: 0) and (max-width:640px) {
    .mod-page__privacy__columns {
        -webkit-column-count:1;
        -moz-column-count: 1;
        column-count: 1
    }
}

.mod-page,.mod-page p {
    font-family: Dico;
    font-size: 12.5px;
    line-height: 1.1875
}

.no-touchevents .mod-page a:hover {
    color: #7c7c7c
}

.mod-projects {
    position: relative
}

.mod-projects__inner {
    padding-bottom: 10px
}

.mod-projects a {
    color: #000000 
}

.no-touchevents .mod-projects a:hover {
    color: #3c3c3c
}

.mod-projects__item {
    padding-bottom: 250px
}

@media (min-width: 641px) and (max-width:980px) {
    .mod-projects__item {
        padding-bottom:200px
    }
}

@media (min-width: 0) and (max-width:640px) {
    .mod-projects__item {
        padding-bottom:80px
    }
}

.mod-projects__item:first-of-type {
    margin-top: 200px
}

@media (min-width: 641px) and (max-width:980px) {
    .mod-projects__item:first-of-type {
        margin-top:100px
    }
}

@media (min-width: 0) and (max-width:640px) {
    .mod-projects__item:first-of-type {
        margin-top:100px
    }
}

.mod-projects__item.h-state--active .mod-projects__item__expander__link__open {
    display: none
}

.mod-projects__item.h-state--active .mod-projects__item__expander__link__close {
    display: inline-block
}

.mod-projects__item.h-state--active .mod-projects__item__headline a {
    color: #000000
}

.mod-projects__item__headline h2 {
    font-size: 26px;
    line-height: 1.1;
    -webkit-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out
}

@media (min-width: 641px) and (max-width:980px) {
    .mod-projects__item__headline h2 {
        font-size:24px;
        line-height: 1.1
    }
}

@media (min-width: 0) and (max-width:640px) {
    .mod-projects__item__headline h2 {
        font-size:24px;
        line-height: 1.1
    }
}

.mod-projects__item__content__container {
    position: relative;
    margin-top: 10px
}

@media (min-width: 641px) and (max-width:980px) {
    .mod-projects__item__content__container {
        margin-top:5px
    }
}

@media (min-width: 0) and (max-width:640px) {
    .mod-projects__item__content__container {
        margin-top:5px
    }
}

.mod-projects__item__title {
    position: relative;
    padding-right: 140px;
    font-family: Dico;
    font-size: 12.5px;
    line-height: 1.1875
}

@media (min-width: 641px) and (max-width:980px) {
    .mod-projects__item__title {
        padding-top:23.0625px;
        padding-right: 0;
        font-size: 11px;
        line-height: 1.1875
    }
}

@media (min-width: 0) and (max-width:640px) {
    .mod-projects__item__title {
        padding-top:23.0625px;
        padding-right: 0;
        font-size: 11px;
        line-height: 1.1875
    }
}

.mod-projects__item__expander__link {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    font-family: Dico;
    font-size: 12.5px;
    line-height: 1.1875;
    text-align: right
}

@media (min-width: 641px) and (max-width:980px) {
    .mod-projects__item__expander__link {
        left:0;
        font-size: 11px;
        line-height: 1.1875;
        text-align: left
    }
}

@media (min-width: 0) and (max-width:640px) {
    .mod-projects__item__expander__link {
        left:0;
        font-size: 11px;
        line-height: 1.1875;
        text-align: left
    }
}

.mod-projects__item__expander__link__close {
    display: none
}

.mod-projects__item__image {
    position: relative;
    display: table;
    width: 100%;
    margin-top: 10px
}

.mod-projects__item__image.h-width-40 .h-img-container {
    width: 40%
}

.mod-projects__item__image.h-width-50 .h-img-container {
    width: 50%
}

.mod-projects__item__image.h-width-60 .h-img-container {
    width: 60%
}

.mod-projects__item__image.h-width-70 .h-img-container {
    width: 70%
}

.mod-projects__item__image.h-width-80 .h-img-container {
    width: 80%
}

.mod-projects__item__image.h-width-90 .h-img-container {
    width: 90%
}

.mod-projects__item__image.h-left-indent .h-img-container {
    max-width: 85%;
    margin-left: 15%
}

.mod-projects__item__image.h-left-large-indent .h-img-container {
    max-width: 70%;
    margin-left: 30%
}

@media (min-width: 0) and (max-width:640px) {
    .mod-projects__item__image.h-width-40 .h-img-container {
        width:60%
    }

    .mod-projects__item__image.h-width-50 .h-img-container {
        width: 70%
    }

    .mod-projects__item__image.h-width-60 .h-img-container {
        width: 80%
    }

    .mod-projects__item__image.h-width-70 .h-img-container {
        width: 90%
    }

    .mod-projects__item__image.h-width-80 .h-img-container,.mod-projects__item__image.h-width-90 .h-img-container {
        width: 100%
    }
}

.mod-projects__item__image__ref,.mod-projects__item__image__wrapper {
    display: table-cell;
    vertical-align: top
}

.mod-projects__item__image__ref {
    width: 70px;
    font-family: Dico;
    font-size: 12px;
    line-height: 1.1;
    text-align: right
}

@media (min-width: 641px) and (max-width:980px) {
    .mod-projects__item__image__ref {
        width:40px;
        font-size: 10px;
        line-height: 1.1
    }
}

@media (min-width: 0) and (max-width:640px) {
    .mod-projects__item__image__ref {
        width:40px;
        font-size: 10px;
        line-height: 1.1
    }
}

.mod-projects__item__image .h-indicator {
    z-index: 1
}

.mod-projects__item__image img {
    position: absolute;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.mod-projects__item__image img.lazyload,.mod-projects__item__image img.lazyloading {
    opacity: 0
}

.mod-projects__item__image img.lazyloaded {
    opacity: 1;
    -webkit-transition: opacity .5s ease-in;
    transition: opacity .5s ease-in
}

.mod-projects__item__caption__container {
    margin-top: 60px
}

@media (min-width: 641px) and (max-width:980px) {
    .mod-projects__item__caption__container {
        width:65%
    }
}

@media (min-width: 0) and (max-width:640px) {
    .mod-projects__item__caption__container {
        width:70%
    }
}

@media (min-width: 0) and (max-width:380px) {
    .mod-projects__item__caption__container {
        width:80%
    }
}

.mod-projects__item__caption__container,.mod-projects__item__caption__container p {
    font-family: Dico;
    font-size: 12px;
    line-height: 1.1
}

@media (min-width: 641px) and (max-width:980px) {
    .mod-projects__item__caption__container,.mod-projects__item__caption__container p {
        font-size:10px;
        line-height: 1.1
    }
}

@media (min-width: 0) and (max-width:640px) {
    .mod-projects__item__caption__container,.mod-projects__item__caption__container p {
        font-size:10px;
        line-height: 1.1
    }
}

.mod-projects__item__caption__container .g-row {
    padding-bottom: 20px
}

.mod-projects__item__caption__container .g-row:last-of-type {
    padding-bottom: 0
}

@media (min-width: 641px) and (max-width:980px) {
    .mod-projects__item__caption__container .g-row {
        padding-bottom:0
    }
}

@media (min-width: 0) and (max-width:640px) {
    .mod-projects__item__caption__container .g-row {
        padding-bottom:0
    }
}

@media (min-width: 641px) and (max-width:980px) {
    .mod-projects__item__caption__container .g-col {
        padding-bottom:20px
    }
}

@media (min-width: 0) and (max-width:640px) {
    .mod-projects__item__caption__container .g-col {
        padding-bottom:20px
    }
}

@media screen and (max-width: 782px) {
    #wpadminbar {
        position:fixed
    }
}

::-moz-selection {
    color: #000;
    text-shadow: none;
    background: #cdcdcd
}

::selection {
    color: #000;
    text-shadow: none;
    background: #cdcdcd
}

/* Reset box-sizing for all elements in the slideshow */
.containerslideshow, .containerslideshow * {
  box-sizing: border-box;
}

.containerslideshow img {
  vertical-align: middle;
  width: 100%; /* Ensure images are fully responsive within their container */
  height: auto; 
  max-height: 600px;
  max-width: 700px; /* Maintain aspect ratio of images */
  object-fit: contain;
}

/* Position the image container */
.containerslideshow {
  position: relative;
  max-width: 700px;
  max-height: auto;
  overflow: hidden; /* Prevent images from overflowing outside of the container */
}

/* Hide images by default */
.mySlides {
  display: none;
  position: relative; /* Ensure the container is positioned */
}

/* Initially hide number text, arrows, and caption */
.containerslideshow .numbertext,
.containerslideshow .caption-container {
  opacity: 1; /* Keep these elements visible */
  visibility: visible; /* Make sure they stay visible */
  transition: none; /* No transition for these elements */
}

/* Number text (1/14, 2/14, etc.) */
.containerslideshow .numbertext {
  color: #000;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10; /* Ensure it's above the image */
}

/* Next & previous buttons */
.containerslideshow .prev,
.containerslideshow .next {
  cursor: pointer;
  position: absolute;
  top: 50%; /* Position the arrows vertically centered */
  width: 50px;
  padding: 16px;
  margin-top: -22px; /* Adjust to center vertically */
  color: black;
  font-weight: bold;
  font-size: 30px; /* Larger font size for visibility */
  border-radius: 0 3px 3px 0;
  user-select: none;
  z-index: 10; /* Ensure the arrows are above the image */
  display: flex;
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  opacity: 0; /* Initially hide arrows */
  visibility: hidden; /* Hide arrows from the layout */
  transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth fade effect */
}

/* Position the arrows on the left and right sides */
.containerslideshow .prev {
  left: 5px; /* Position the "previous" arrow to the left */
}

.containerslideshow .next {
  right: 5px; /* Position the "next" arrow to the right */
}

/* Show arrows when hovering over the slideshow */
.containerslideshow:hover .prev,
.containerslideshow:hover .next {
  opacity: 1; /* Fade in the arrows */
  visibility: visible; /* Make the arrows visible */
}

/* On hover, add a black background color with a little bit of transparency */
.containerslideshow .prev:hover,
.containerslideshow .next:hover {
    background-color: transparent; /* No background on hover */
    transform: none; /* Prevent any scaling or resizing on hover */
}

/* Caption container */
.containerslideshow .caption-container {
  text-align: left;
  background-color: white;
  color: black;
  position: relative;
  z-index: 10;
  padding: 0;
}

.containerslideshow .caption-container p {
  margin: 0;
  font-size: 14px; /* Keep the text size small */
  color: #333;
  text-align: left;
  padding: 10px 0;
  line-height: 1.4;
}

/* Collab text hover effect */
.collab-text {
    color: #cccc; /* Initial color */
    transition: color 0.3s ease; /* Optional: adds a smooth transition */
}

.collab-text:hover {
    color: #000000; /* Color on hover */
}

.mod-projects__item__image .h-img-container {
    /* 1. Set a maximum height. 70vh means 70% of the viewport's (browser window's) height. */
    max-height: 90vh;
    
    /* 2. CRITICAL: Override the inline style that's forcing the wrong aspect ratio. */
    padding-top: 0 !important; 
    
    /* 3. Ensure the container itself has a height, and the image is positioned correctly. */
    height: 100%;
    position: relative;
}

/*
 * This rule ensures the image inside respects the new container height.
*/
.mod-projects__item__image .h-img-container .h-img {
    /* Position the image absolutely within the container to handle sizing */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* This is the key: it scales the image down to fit, preserving its aspect ratio. */
    object-fit: contain; 
}