/***********************************************
 * Adjust Elements to Container
 ***********************************************/
.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, .data_ratio:before{ display: block; position: relative; z-index: 0; }
[data-ratio][class*="small-fixed-height"], .data_ratio[class*="small-fixed-height"]{ min-height: 0; }
[data-ratio][class*="small-expand-height"], .data_ratio[class*="small-expand-height"]{ min-height: 100%; }
[data-ratio][class*="small-ratio-"]:before, .data_ratio[class*="small-ratio-"]:before{ content: '';}
[data-ratio][class*="small-ratio-1-1"]:before, .data_ratio[class*="small-ratio-1-1"]:before{ padding: 0 0 100%; }
[data-ratio][class*="small-ratio-2-1"]:before, .data_ratio[class*="small-ratio-2-1"]:before{ padding: 0 0 50%; }
[data-ratio][class*="small-ratio-3-1"]:before, .data_ratio[class*="small-ratio-3-1"]:before{ padding: 0 0 33.333%; }
[data-ratio][class*="small-ratio-3-2"]:before, .data_ratio[class*="small-ratio-3-2"]:before{ padding: 0 0 66.666%; }
[data-ratio][class*="small-ratio-4-3"]:before .data_ratio[class*="small-ratio-4-3"]:before{ padding: 0 0 75%; }
[data-ratio][class*="small-ratio-5-4"]:before, .data_ratio[class*="small-ratio-5-4"]:before{ padding: 0 0 80%; }
[data-ratio][class*="small-ratio-16-9"]:before, .data_ratio[class*="small-ratio-16-9"]:before{ padding: 0 0 56.25%; }
[data-ratio][class*="small-ratio-7-8"]:before, .data_ratio[class*="small-ratio-7-8"]:before{ padding: 0 0 114.28%; }
[data-ratio][class*="small-ratio-5-6"]:before, .data_ratio[class*="small-ratio-5-6"]:before{ padding: 0 0 120%; }
[data-ratio][class*="small-ratio-4-5"]:before, .data_ratio[class*="small-ratio-4-5"]:before{ padding: 0 0 125%; }
[data-ratio][class*="small-ratio-3-4"]:before, .data_ratio[class*="small-ratio-3-4"]:before{ padding: 0 0 133.333%; }
[data-ratio][class*="small-ratio-3-5"]:before, .data_ratio[class*="small-ratio-3-5"]:before{ padding: 0 0 166.666%; }
[data-ratio][class*="small-ratio-1-2"]:before, .data_ratio[class*="small-ratio-1-2"]:before{ padding: 0 0 200%; }
[class*="small-fixed-height"] [data-ratio], [class*="small-fixed-height"] > .data_ratio { min-height: 0; }
[class*="small-expand-height"] [data-ratio], [class*="small-expand-height"] > .data_ratio{ min-height: 100%; }
[class*="small-ratio-"] [data-ratio]:before, [class*="small-ratio-"] > .data_ratio:before{ content: '';}
[class*="small-ratio-1-1"] [data-ratio]:before, [class*="small-ratio-1-1"] > .data_ratio:before{ padding: 0 0 100%; }
[class*="small-ratio-2-1"] [data-ratio]:before, [class*="small-ratio-2-1"] > .data_ratio:before{ padding: 0 0 50%; }
[class*="small-ratio-3-1"] [data-ratio]:before, [class*="small-ratio-3-1"] > .data_ratio:before{ padding: 0 0 33.333%; }
[class*="small-ratio-3-2"] [data-ratio]:before, [class*="small-ratio-3-2"] > .data_ratio:before{ padding: 0 0 66.666%; }
[class*="small-ratio-4-3"] [data-ratio]:before, [class*="small-ratio-4-3"] > .data_ratio:before{ padding: 0 0 75%; }
[class*="small-ratio-5-4"] [data-ratio]:before, [class*="small-ratio-5-4"] > .data_ratio:before{ padding: 0 0 80%; }
[class*="small-ratio-16-9"] [data-ratio]:before, [class*="small-ratio-16-9"] > .data_ratio:before{ padding: 0 0 56.25%; }
[class*="small-ratio-7-8"] [data-ratio]:before, [class*="small-ratio-7-8"] > .data_ratio:before{ padding: 0 0 114.28%; }
[class*="small-ratio-5-6"] [data-ratio]:before, [class*="small-ratio-5-6"] > .data_ratio:before{ padding: 0 0 120%; }
[class*="small-ratio-4-5"] [data-ratio]:before, [class*="small-ratio-4-5"] > .data_ratio:before{ padding: 0 0 125%; }
[class*="small-ratio-3-4"] [data-ratio]:before, [class*="small-ratio-3-4"] > .data_ratio:before{ padding: 0 0 133.333%; }
[class*="small-ratio-3-5"] [data-ratio]:before, [class*="small-ratio-3-5"] > .data_ratio:before{ padding: 0 0 166.666%; }
[class*="small-ratio-1-2"] [data-ratio]:before, [class*="small-ratio-1-2"] > .data_ratio:before{ padding: 0 0 200%; }




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

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