/***********************************************
 * 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;
}