[data-ratio]{
position: relative; overflow: hidden;
display: block;
} [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;
} [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;
} [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; 
} [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;
}