/***********************************************
 * Adjust Elements to Container
 ***********************************************/
[data-ratio]{
    position: relative; overflow: hidden;
}
[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 > img{
    width: 100%; height: auto;
}
[data-ratio].adjust_to_height > img{
    height: 100%; width: auto; max-width: none;
}

[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 > 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 > 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 > img { top: 0; }
[data-ratio].v_align_bottom > img { top: auto; bottom: 0; }
[data-ratio].h_align_left > img { left: 0; }
[data-ratio].h_align_right > img { left: auto; right: 0; }