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

/***********************************************
 * Video-Stylings
 ***********************************************/
.data_ratio > video{
    -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;
}
.data_ratio.adjust_to_width > video{
    width: 100%; height: auto;
}
.data_ratio.adjust_to_height > video{
    height: 100%; width: auto; max-width: none;
}

/***********************************************
 * Images Base-Stylings
 ***********************************************/
.data_ratio > picture {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
}
.data_ratio > picture > img,
.data_ratio > img{
    -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;
}
.data_ratio.adjust_to_width > picture > img,
.data_ratio.adjust_to_width > img{
    width: 100%; height: auto;
}
.data_ratio.adjust_to_height > picture > img,
.data_ratio.adjust_to_height > img{
    height: 100%; width: auto; max-width: none;
}



.invert > .data_ratio.adjust_to_width > picture > img,
.invert > .data_ratio.adjust_to_width > img,
.data_ratio.adjust_to_width.invert > picture > img,
.data_ratio.adjust_to_width.invert > img{
    height: 100%; width: auto; max-width: none;
}
.invert > .data_ratio.adjust_to_height > picture > img,
.invert > .data_ratio.adjust_to_height > img,
.data_ratio.adjust_to_height.invert > picture > img,
.data_ratio.adjust_to_height.invert > img{
    width: 100%; height: auto;
}


/***********************************************
 * Images Position-Stylings
 ***********************************************/
.data_ratio.v_align_top > picture > img,
.data_ratio.v_align_bottom > picture > img,
.data_ratio.v_align_top > img,
.data_ratio.v_align_bottom > img{
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.data_ratio.h_align_left > picture > img,
.data_ratio.h_align_right > picture > img,
.data_ratio.h_align_left > img,
.data_ratio.h_align_right > img{
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.data_ratio.v_align_top.h_align_left > picture > img,
.data_ratio.v_align_top.h_align_right > picture > img,
.data_ratio.v_align_bottom.h_align_left > picture > img,
.data_ratio.v_align_bottom.h_align_right > picture > img,
.data_ratio.v_align_top.h_align_left > img,
.data_ratio.v_align_top.h_align_right > img,
.data_ratio.v_align_bottom.h_align_left > img,
.data_ratio.v_align_bottom.h_align_right > img {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}

.data_ratio.v_align_top > picture > img,
.data_ratio.v_align_top > img { 
    top: 0; 
}
.data_ratio.v_align_bottom > picture > img,
.data_ratio.v_align_bottom > img { 
    top: auto; bottom: 0; 
}
.data_ratio.h_align_left > picture > img,
.data_ratio.h_align_left > img { 
    left: 0; 
}
.data_ratio.h_align_right > picture > img,
.data_ratio.h_align_right > img { 
    left: auto; right: 0; 
}


.v_align_top > .data_ratio > picture > img,
.v_align_bottom > .data_ratio > picture >img,
.v_align_top > .data_ratio > img,
.v_align_bottom > .data_ratio > img{
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.h_align_left > .data_ratio > picture > img,
.h_align_right > .data_ratio > picture > img,
.h_align_left > .data_ratio > img,
.h_align_right > .data_ratio > img{
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.v_align_top.h_align_left > .data_ratio > picture > img,
.v_align_top.h_align_right > .data_ratio > picture > img,
.v_align_bottom.h_align_left > .data_ratio > picture > img,
.v_align_bottom.h_align_right > .data_ratio > picture > img,
.v_align_top.h_align_left > .data_ratio > img,
.v_align_top.h_align_right > .data_ratio > img,
.v_align_bottom.h_align_left > .data_ratio > img,
.v_align_bottom.h_align_right > .data_ratio > img{
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}

.v_align_top > .data_ratio > picture > img,
.v_align_top > .data_ratio > img { 
    top: 0; 
}
.v_align_bottom > .data_ratio > picture > img,
.v_align_bottom > .data_ratio > img { 
    top: auto; bottom: 0; 
}
.h_align_left > .data_ratio > picture > img,
.h_align_left > .data_ratio > img { 
    left: 0; 
}
.h_align_right > .data_ratio > picture > img,
.h_align_right > .data_ratio > img { 
    left: auto; right: 0; 
}


/***********************************************
 * 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-expand-height"]:before{ content: none;}
    .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-expand-height"]:before{ content: none;}
    .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%; }
}


[data-svg-dimensions] svg {
    width: 100%;
}
.data_ratio svg {
    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;
}

.data_ratio.adjust_to_width svg,
.data_ratio.adjust_to_width svg{
    height: 100%; width: auto; max-width: none;
}
.data_ratio.adjust_to_height svg,
.data_ratio.adjust_to_height svg{
    width: 100%; height: auto;
}