/*********** Table of Contents ***********
    1.0: Image container
*****************************************/
#img-container {
    position: relative;
    text-align: center;
    color: white;
    height: 100%;
    width: 100%;
}

    #img-container .right {
        right: 0;
    }

    #img-container .left {
        left: 0;
    }

    #img-container .center {
        right: 0;
    }

    /* Bottom left text */
    #img-container .bottom-left {
        position: absolute;
        bottom: 8px;
        left: 16px;
    }

    /* Top left text */
    #img-container .top-left {
        position: absolute;
        top: 8px;
        left: 16px;
    }

    /* Top right text */
    #img-container .top-right {
        position: absolute;
        top: 8px;
        right: 16px;
    }

    /* Bottom right text */
    #img-container .bottom-right {
        position: absolute;
        bottom: 8px;
        right: 16px;
    }

    /* Centered text */
    #img-container .centered {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #img-container .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        transition: .5s ease;
        background-color: #00000094;
    }

    #img-container:hover .overlay {
        opacity: 1;
    }

.mx-left {
    left: 0;
}

.mx-right {
    right: 0;
}