/***********************************************
 * Adjust Elements to Container
 ***********************************************/
figure {
    height: 100%;
}
.data_ratio{
    position: relative; overflow: hidden;
    display: block;
}

.data_ratio:not([class*="small-ratio"]):before {
    content: ''; padding: 0 0 56.25%;
    display: block;
}

/***********************************************
 * Video-Stylings
 ***********************************************/
.data_ratio video{
    position: absolute; left: 0; right: 0; bottom: 0; top: 0;
    width: 100%; height: 100%;
    z-index: 0; margin: 0 auto;
    object-fit: cover;
}


/***********************************************
 * Images Base-Stylings
 ***********************************************/
.data_ratio img{
    position: absolute; left: 0; right: 0; 
    top: 0; bottom: 0; width: 100%; height: 100%;
    z-index: 0; margin: 0 auto;
    object-fit: cover;
    object-position: 50% 50%;
}
.invert .data_ratio img,
.data_ratio.invert img{
    object-fit: contain;
}

/***********************************************
 * Images Position-Stylings
 ***********************************************/
.data_ratio.h_align_left.v_align_top img { object-position: 0% 0%; }
.data_ratio.h_align_right.v_align_top img { object-position: 100% 0%; }
.data_ratio.h_align_default.v_align_top img { object-position: 50% 0%; }

.data_ratio.h_align_left.v_align_default img { object-position: 0% 50%; }
.data_ratio.h_align_right.v_align_default img { object-position: 100% 50%; }
.data_ratio.h_align_default.v_align_default img { object-position: 50% 50%; }

.data_ratio.h_align_left.v_align_bottom img { object-position: 0% 100%; }
.data_ratio.h_align_right.v_align_bottom img { object-position: 100% 100%; }
.data_ratio.h_align_default.v_align_bottom img { object-position: 50% 100%; }



/***********************************************
 * Default Sizes
 ***********************************************/
.data_ratio:before{ display: block; position: relative; z-index: 0; }
.data_ratio[class*="small-fixed-height"]{ min-height: 0; }
.data_ratio[class*="small-expand-height"]{ min-height: 100%; }
.data_ratio[class*="small-ratio-"]:before{ content: '';}
.data_ratio[class*="small-ratio-1-1"]:before{ padding: 0 0 100%; }
.data_ratio[class*="small-ratio-2-1"]:before{ padding: 0 0 50%; }
.data_ratio[class*="small-ratio-3-1"]:before{ padding: 0 0 33.333%; }
.data_ratio[class*="small-ratio-3-2"]:before{ padding: 0 0 66.666%; }
.data_ratio[class*="small-ratio-4-3"]:before{ padding: 0 0 75%; }
.data_ratio[class*="small-ratio-5-4"]:before{ padding: 0 0 80%; }
.data_ratio[class*="small-ratio-16-9"]:before{ padding: 0 0 56.25%; }
.data_ratio[class*="small-ratio-7-8"]:before{ padding: 0 0 114.28%; }
.data_ratio[class*="small-ratio-5-6"]:before{ padding: 0 0 120%; }
.data_ratio[class*="small-ratio-4-5"]:before{ padding: 0 0 125%; }
.data_ratio[class*="small-ratio-3-4"]:before{ padding: 0 0 133.333%; }
.data_ratio[class*="small-ratio-3-5"]:before{ padding: 0 0 166.666%; }
.data_ratio[class*="small-ratio-1-2"]:before{ padding: 0 0 200%; }
[class*="small-fixed-height"] .data_ratio{ min-height: 0; }
[class*="small-expand-height"] .data_ratio{ min-height: 100%; }
[class*="small-ratio-"] .data_ratio:before{ content: '';}
[class*="small-ratio-1-1"] .data_ratio:before{ padding: 0 0 100%; }
[class*="small-ratio-2-1"] .data_ratio:before{ padding: 0 0 50%; }
[class*="small-ratio-3-1"] .data_ratio:before{ padding: 0 0 33.333%; }
[class*="small-ratio-3-2"] .data_ratio:before{ padding: 0 0 66.666%; }
[class*="small-ratio-4-3"] .data_ratio:before{ padding: 0 0 75%; }
[class*="small-ratio-5-4"] .data_ratio:before{ padding: 0 0 80%; }
[class*="small-ratio-16-9"] .data_ratio:before{ padding: 0 0 56.25%; }
[class*="small-ratio-7-8"] .data_ratio:before{ padding: 0 0 114.28%; }
[class*="small-ratio-5-6"] .data_ratio:before{ padding: 0 0 120%; }
[class*="small-ratio-4-5"] .data_ratio:before{ padding: 0 0 125%; }
[class*="small-ratio-3-4"] .data_ratio:before{ padding: 0 0 133.333%; }
[class*="small-ratio-3-5"] .data_ratio:before{ padding: 0 0 166.666%; }
[class*="small-ratio-1-2"] .data_ratio:before{ padding: 0 0 200%; }




@media screen and (min-width:40em){
    .data_ratio[class*="medium-fixed-height"]{ min-height: 0; }
    .data_ratio[class*="medium-expand-height"]{ min-height: 100%; }
    .data_ratio[class*="medium-ratio-"]:before{ content: '';}
    .data_ratio[class*="medium-ratio-1-1"]:before{ padding: 0 0 100%; }
    .data_ratio[class*="medium-ratio-2-1"]:before{ padding: 0 0 50%; }
    .data_ratio[class*="medium-ratio-3-1"]:before{ padding: 0 0 33.333%; }
    .data_ratio[class*="medium-ratio-3-2"]:before{ padding: 0 0 66.666%; }
    .data_ratio[class*="medium-ratio-4-3"]:before{ padding: 0 0 75%; }
    .data_ratio[class*="medium-ratio-5-4"]:before{ padding: 0 0 80%; }
    .data_ratio[class*="medium-ratio-16-9"]:before{ padding: 0 0 56.25%; }
    .data_ratio[class*="medium-ratio-7-8"]:before{ padding: 0 0 114.28%; }
    .data_ratio[class*="medium-ratio-5-6"]:before{ padding: 0 0 120%; }
    .data_ratio[class*="medium-ratio-4-5"]:before{ padding: 0 0 125%; }
    .data_ratio[class*="medium-ratio-3-4"]:before{ padding: 0 0 133.333%; }
    .data_ratio[class*="medium-ratio-3-5"]:before{ padding: 0 0 166.666%; }
    .data_ratio[class*="medium-ratio-1-2"]:before{ padding: 0 0 200%; }
    [class*="medium-fixed-height"] .data_ratio{ min-height: 0; }
    [class*="medium-expand-height"] .data_ratio{ min-height: 100%; }
    [class*="medium-expand-height"] .data_ratio:before { content: none; }
    [class*="medium-ratio-"] .data_ratio:before{ content: '';}
    [class*="medium-ratio-1-1"] .data_ratio:before{ padding: 0 0 100%; }
    [class*="medium-ratio-2-1"] .data_ratio:before{ padding: 0 0 50%; }
    [class*="medium-ratio-3-1"] .data_ratio:before{ padding: 0 0 33.333%; }
    [class*="medium-ratio-3-2"] .data_ratio:before{ padding: 0 0 66.666%; }
    [class*="medium-ratio-4-3"] .data_ratio:before{ padding: 0 0 75%; }
    [class*="medium-ratio-5-4"] .data_ratio:before{ padding: 0 0 80%; }
    [class*="medium-ratio-16-9"] .data_ratio:before{ padding: 0 0 56.25%; }
    [class*="medium-ratio-7-8"] .data_ratio:before{ padding: 0 0 114.28%; }
    [class*="medium-ratio-5-6"] .data_ratio:before{ padding: 0 0 120%; }
    [class*="medium-ratio-4-5"] .data_ratio:before{ padding: 0 0 125%; }
    [class*="medium-ratio-3-4"] .data_ratio:before{ padding: 0 0 133.333%; }
    [class*="medium-ratio-3-5"] .data_ratio:before{ padding: 0 0 166.666%; }
    [class*="medium-ratio-1-2"] .data_ratio:before{ padding: 0 0 200%; }
}

@media screen and (min-width:64em){
    .data_ratio[class*="large-fixed-height"]{ min-height: 0; }
    .data_ratio[class*="large-expand-height"]{ min-height: 100%; }
    .data_ratio[class*="large-ratio-"]:before{ content: '';}
    .data_ratio[class*="large-ratio-1-1"]:before{ padding: 0 0 100%; }
    .data_ratio[class*="large-ratio-2-1"]:before{ padding: 0 0 50%; }
    .data_ratio[class*="large-ratio-3-1"]:before{ padding: 0 0 33.333%; }
    .data_ratio[class*="large-ratio-3-2"]:before{ padding: 0 0 66.666%; }
    .data_ratio[class*="large-ratio-4-3"]:before{ padding: 0 0 75%; }
    .data_ratio[class*="large-ratio-5-4"]:before{ padding: 0 0 80%; }
    .data_ratio[class*="large-ratio-16-9"]:before{ padding: 0 0 56.25%; }
    .data_ratio[class*="large-ratio-7-8"]:before{ padding: 0 0 114.28%; }
    .data_ratio[class*="large-ratio-5-6"]:before{ padding: 0 0 120%; }
    .data_ratio[class*="large-ratio-4-5"]:before{ padding: 0 0 125%; }
    .data_ratio[class*="large-ratio-3-4"]:before{ padding: 0 0 133.333%; }
    .data_ratio[class*="large-ratio-3-5"]:before{ padding: 0 0 166.666%; }
    .data_ratio[class*="large-ratio-1-2"]:before{ padding: 0 0 200%; }
    [class*="large-fixed-height"] .data_ratio{ min-height: 0; }
    [class*="large-expand-height"] .data_ratio{ min-height: 100%; }
    [class*="large-expand-height"] .data_ratio:before { content: none; }
    [class*="large-ratio-"] .data_ratio:before{ content: '';}
    [class*="large-ratio-1-1"] .data_ratio:before{ padding: 0 0 100%; }
    [class*="large-ratio-2-1"] .data_ratio:before{ padding: 0 0 50%; }
    [class*="large-ratio-3-1"] .data_ratio:before{ padding: 0 0 33.333%; }
    [class*="large-ratio-3-2"] .data_ratio:before{ padding: 0 0 66.666%; }
    [class*="large-ratio-4-3"] .data_ratio:before{ padding: 0 0 75%; }
    [class*="large-ratio-5-4"] .data_ratio:before{ padding: 0 0 80%; }
    [class*="large-ratio-16-9"] .data_ratio:before{ padding: 0 0 56.25%; }
    [class*="large-ratio-7-8"] .data_ratio:before{ padding: 0 0 114.28%; }
    [class*="large-ratio-5-6"] .data_ratio:before{ padding: 0 0 120%; }
    [class*="large-ratio-4-5"] .data_ratio:before{ padding: 0 0 125%; }
    [class*="large-ratio-3-4"] .data_ratio:before{ padding: 0 0 133.333%; }
    [class*="large-ratio-3-5"] .data_ratio:before{ padding: 0 0 166.666%; }
    [class*="large-ratio-1-2"] .data_ratio:before{ padding: 0 0 200%; }
}

.svg_wrapper {
    position: relative;
}
.svg_wrapper.data_ratio:before {
    content: none;
}
.svg_wrapper svg,
.svg_wrapper img {
    width: 100%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    -o-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    position: absolute; top: 50%; left: 50%;
    z-index: 0; margin: 0 auto;
}