/* ===============================
** LOGO
================================== */

.image-full-size-align-left-horiz-middle-wrapper {
    height: 100%;
    text-align: left;
    border: 0px solid green;
    position: relative;
}
.image-full-size-align-left-horiz-middle {
    max-width:100%;
    max-height:100%;
    border: 0px solid orange;
    position: absolute;
    top:50%;
    left:0%;
    transform: translate3d(-0%,-50%,0);
    -webkit-transform: translate3d(-0%,-50%,0);
    -moz-transform: translate3d(-0%,-50%,0);
    -o-transform: translate3d(-0%,-50%,0);
}


/* ===============================
** CROPPING IMAGE
================================== */


.cropped-image {
    width: 100%;
    height: 100%;
    background-position: center;
    /* Make the background image cover the area of the <div>, and clip the excess */
    background-size: cover;
}


/* ===============================
** HEIGHT RELATIVE TO WIDTH
================================== */

/* https://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout*/

.relative-height {
    position: relative;
    width:    100%; /* desired width */
}

.relative-height:before {
    content:     "";
    display:     block;
}

.interior-img {
    position: absolute;
    top:      0;
    left:     0;
    bottom:   0;
    right:    0;
}

/* Other ratios - just apply the desired class to the "box" element */
.ratio1_1:before{
    padding-top: 100%; /* initial ratio of 1:1*/
}
.ratio2_1:before{
    padding-top: 50%;
}
.ratio1_2:before{
    padding-top: 200%;
}
.ratio4_3:before{
    padding-top: 75%;
}
.ratio16_9:before{
    padding-top: 56.25%;
}