/***************************************************************************
* Row
****************************************************************************/
.row {
    /*max-width: 90rem;*/
    max-width: none;
}

.vertical_row {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

@media screen and (min-width:40em){
    .row {
        width: calc(100% - 4em);
    }
}
@media screen and (min-width:64em){
    .row {
        width: calc(100% - 8em);
    }
}

@media screen and (min-width:100em){
    .row {
        width: calc(100% - 12em);
    }
}

@media screen and (min-width:125em){
    .row {
        width: calc(100% - 14em);
    }
}

@media screen and (min-width:150em){
    .row {
        width: calc(100% - 18em);
    }
}

/***************************************************************************
* Gap
****************************************************************************/
.gap {padding: var(--typo-gap);}
.gap_x { padding-left: var(--typo-gap); padding-right: var(--typo-gap);}
.gap_y { padding-top: var(--typo-gap); padding-bottom: var(--typo-gap);}
.gap_top { padding-top: var(--typo-gap);}
.gap_bottom { padding-bottom: var(--typo-gap);}
.gap_left { padding-left: var(--typo-gap);}
.gap_right { padding-right: var(--typo-gap);}

/***************************************************************************
* Gap: Half
****************************************************************************/
.gap_half {padding: var(--typo-half-gap);}
.gap_half_x { padding-left: var(--typo-half-gap); padding-right: var(--typo-half-gap);}
.gap_half_y { padding-top: var(--typo-half-gap); padding-bottom: var(--typo-half-gap);}
.gap_half_top { padding-top: var(--typo-half-gap);}
.gap_half_bottom { padding-bottom: var(--typo-half-gap);}
.gap_half_left { padding-left: var(--typo-half-gap);}
.gap_half_right { padding-right: var(--typo-half-gap);}

/***************************************************************************
* Gap: Double
****************************************************************************/
.gap_double {padding: var(--typo-double-gap);}
.gap_double_x { padding-left: var(--typo-double-gap); padding-right: var(--typo-double-gap);}
.gap_double_y { padding-top: var(--typo-double-gap); padding-bottom: var(--typo-double-gap);}
.gap_double_top { padding-top: var(--typo-double-gap);}
.gap_double_bottom { padding-bottom: var(--typo-double-gap);}
.gap_double_left { padding-left: var(--typo-double-gap);}
.gap_double_right { padding-right: var(--typo-double-gap);}


/***************************************************************************
* Gap: Section
****************************************************************************/
.gap_section {padding: var(--typo-section-gap)}
.gap_section_x {padding-left: var(--typo-section-gap);padding-right: var(--typo-section-gap);}
.gap_section_y {padding-top: var(--typo-section-gap);padding-bottom: var(--typo-section-gap);}
.gap_section_top { padding-top: var(--typo-section-gap);}
.gap_section_bottom { padding-bottom: var(--typo-section-gap);}



/***************************************************************************
* Lightbox
****************************************************************************/

.typo_lightbox_wrapper .typo_lightbox_caption {
    position: absolute;
    top: auto;
    left: 10%;
    right: 10%;
    bottom: 2%;
    width: 80%;
    height: auto;
    text-align: center;
    font-size: var(--typo-font-size-default);
}

a.typo_lightbox {
    display: inline-block;
}
a.typo_lightbox:has(img) {
    display: block;
}
a.typo_lightbox[href*=".png"]:not(.button):after,
a.typo_lightbox[href*=".jpg"]:not(.button):after,
a.typo_lightbox[href*=".gif"]:not(.button):after,
a.typo_lightbox[href*=".webp"]:not(.button):after {
    content: ''; position: absolute;
    bottom: 1em; right: 1em;
    width: 1.5em; height: 1.5em;
    background-color: rgba(255,255,255,0.9);
    border-radius: 50%;
    background-image: var(--typo-svg-plus);
    background-size: 60% auto;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

a.typo_lightbox[href*=".mp4"]:not(.button):after,
a.typo_lightbox[href*="youtube"]:not(.button):after,
a.typo_lightbox[href*="vimeo"]:not(.button):after {
    content: ''; position: absolute;
    top: 50%; left: 50%;
    width: 2em; height: 2em;
    transform: translate(-50%,-50%);
    background-color: rgba(255,255,255,0.9);
    border-radius: 50%;
    background-image: var(--typo-svg-video-play);
    background-size: 60% auto;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
@media screen and (min-width:40em){
    a.typo_lightbox[href*=".png"]:not(.button):after,
    a.typo_lightbox[href*=".jpg"]:not(.button):after,
    a.typo_lightbox[href*=".gif"]:not(.button):after,
    a.typo_lightbox[href*=".webp"]:not(.button):after {
        width: 2.5em; height: 2.5em;
    }
    a.typo_lightbox[href*=".mp4"]:not(.button):after,
    a.typo_lightbox[href*="youtube"]:not(.button):after,
    a.typo_lightbox[href*="vimeo"]:not(.button):after {
        width: 3em; height: 3em;
    }
}

.block_gallery a.typo_lightbox[href*=".png"]:not(.button):after,
.block_gallery a.typo_lightbox[href*=".jpg"]:not(.button):after,
.block_gallery a.typo_lightbox[href*=".gif"]:not(.button):after,
.block_gallery a.typo_lightbox[href*=".webp"]:not(.button):after {
    bottom: 2em; right: 2em;
}



body .typo_lightbox_wrapper .lightbox_item:has(.video_wrapper) {
    padding: 0;
}
body .typo_lightbox_wrapper .lightbox_item .video_wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    margin: auto;
    padding: 0;
}

/***************************************************************************
* Images
****************************************************************************/
/*.data_ratio img {
    left: -1%; right: -1%; top: -1%; bottom: -1%;
    width: 102%; height: 102%;
}*/
figure,
.image,
.image_item {
    position: relative;
}
figure figcaption,
.image figcaption,
.image_item figcaption {
    position: absolute;
    bottom: var(--typo-gap); right: var(--typo-gap);
    max-width: calc(100% - (var(--typo-gap) * 2));
    color: #FFFFFF;
}
figure figcaption:has(h3),
.image figcaption:has(h3),
.image_item figcaption:has(h3){
    bottom: var(--typo-double-gap); right: var(--typo-double-gap);
    max-width: calc(100% - (var(--typo-double-gap) * 2));
}
figure figcaption > *,
.image figcaption > *,
.image_item figcaption > * {
    margin: 0;
}
.figcaption_top figcaption {
    bottom: auto; top: var(--typo-gap);
}
.figcaption_top figcaption:has(h3){
    top: var(--typo-double-gap);
}
.figcaption_left figcaption {
    right: auto; left: var(--typo-gap)
}
.figcaption_left figcaption:has(h3){
    left: var(--typo-double-gap);
}

.figcaption_bg figcaption {
    padding: 0.5em;
    background-color: rgba(0,0,0,0.25);
    border-radius: 0.375em;
}
.no_figcaption figcaption {
    display: none;
}



/***************************************************************************
* Image | Skew
****************************************************************************/
.skew_x figure {
    overflow: hidden;
    border-radius: 0.375em;
}
.skew_x figure picture {
    position: relative;
    transform: skewX(-10deg);
    transform-origin: 0 100%;
    display: block;
    overflow: hidden;
    border-radius: 0.375em;
}
.skew_x figure picture img {
    transform: skewX(10deg);
    transform-origin: 0 100%;
}
/***************************************************************************
* Image | Bordered
****************************************************************************/
.bordered_image .data_ratio,
.bordered_image img {
    border-radius: 0.375em;
}
.rounded_image .data_ratio,
.rounded_image img {
    border-radius: 50%;
}


@media screen and (min-width:90em){
    .xxlarge-sticky {
        position: sticky;
        top: 7rem;
    }
}