/* -- MDL new elements & modifiers -- */

    .material-icons {
        position: relative;
        background: rgba( 255, 255, 255, .26 );
        color: black;
        -webkit-transition: background .26s;
        transition: background .26s;
    }
    .material-icons:hover {
        background: rgba( 255, 255, 255, .54 );
    }
    .material-icons.md-48,
    .material-icons.md-48 {
        font-size: 48px;
    }
        .material-icons.qg-first-image {
            margin: 18px 0 18px 18px;
            cursor: pointer;
        }
        .material-icons.qg-last-image {
            margin: 18px 0 18px 18px;
            cursor: pointer;
        }
        .material-icons.qg-zoom {
            margin: 18px 0 18px 18px;
            cursor: pointer;
        }
        .material-icons.qg-fullscreen {
            margin: 18px 0 18px 18px;
            cursor: pointer;
        }
        .material-icons.qg-container-close {
            margin: 18px;
            cursor: pointer;
        }
    .material-icons.qg-scroll-left {
        position: fixed;
        left: 18px;
        top: 50%;
        cursor: pointer;
        -webkit-transform: translateY( -50% );
        transform: translateY( -50% );
        z-index: 100;
    }
    .material-icons.qg-scroll-right {
        position: fixed;
        top: 50%;
        right: 18px;
        cursor: pointer;
        -webkit-transform: translateY( -50% );
        transform: translateY( -50% );
        z-index: 100;
    }

/* -- QuarterGallery style sheet -- */
.QuarterGallery {
    cursor: pointer;
}
.qg-container {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba( 0, 0, 0, .67 );
    overflow: hidden;
    z-index: 999;
}
    .qg-container__controls {
        display: flex;
        display: -webkit-flex;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 100;
    }
    [class*=qg-container__quarter-] {
        position: fixed;
        width: 50vw;
        height: 50vh;
        overflow: hidden;
        cursor: pointer;
    }
    .qg-container__quarter-1 {
        left: 0;
        top: 0;
    }
    .qg-container__quarter-2 {
        left: 50vw;
        top: 0;
    }
    .qg-container__quarter-3 {
        left: 0;
        top: 50vh;
    }
    .qg-container__quarter-4 {
        left: 50vw;
        top: 50vh;
    }
    .qg-container__quarter-1:hover ~ .material-icons.qg-scroll-left,
    .qg-container__quarter-3:hover ~ .material-icons.qg-scroll-left,
    .qg-container__quarter-2:hover ~ .material-icons.qg-scroll-right,
    .qg-container__quarter-4:hover ~ .material-icons.qg-scroll-right {
        background: rgba( 255, 255, 255, .54 );
    }
        [class*=qg-quarter__slide-] {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            /*transform: rotate( 0deg ) scale( 1, 1 );*/
            /*transition: all .7s;*/
            -webkit-transition-property: all;
            transition-property: all;
            -webkit-transition-duration: .7s;
            transition-duration: .7s;
        }
            [class*=qg-quarter__slide-] img {
                position: absolute;
                -webkit-transform: translateX( -50% ) translateY( -50% );
                transform: translateX( -50% ) translateY( -50% );
            }
            .qg-image-shrink {
                max-width: 100vw;
                max-height: 100vh;
            }
            .qg-image-expand {
                min-width: 100vw;
                min-height: 100vh;
            }
        .qg-quarter__slide-1 {
            /*transform-origin: right bottom;*/
            -webkit-transform: translateX( -50vw );
            transform: translateX( -50vw );
            -webkit-transition-delay: 0s;
            transition-delay: 0s;
        }
            .qg-quarter__slide-1 img {
                left: 100%;
                top: 100%;
            }
        .qg-quarter__slide-2 {
            /*transform-origin: left bottom;*/
            -webkit-transform: translateX( 50vw );
            transform: translateX( 50vw );
            -webkit-transition-delay: 0.3s;
            transition-delay: 0.3s;
        }
            .qg-quarter__slide-2 img {
                left: 0;
                top: 100%;
            }
        .qg-quarter__slide-3 {
            /*transform-origin: right top;*/
            -webkit-transform: translateX( -50vw );
            transform: translateX( -50vw );
            -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
        }
            .qg-quarter__slide-3 img {
                left: 100%;
                top: 0;
            }
        .qg-quarter__slide-4 {
            /*transform-origin: left top;*/
            -webkit-transform: translateX( 50vw );
            transform: translateX( 50vw );
            -webkit-transition-delay: 0.1s;
            transition-delay: 0.1s;
        }
            .qg-quarter__slide-4 > img {
                left: 0;
                top: 0;
            }
    .qg_containet__list-table {
        display: flex;
        display: -webkit-flex;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        position: fixed;
        left: 50%;
        bottom: 18px;
        max-width: 576px;
        -webkit-transform: translateX( -50% );
        transform: translateX( -50% );
        z-index: 100;
    }
        .qg_list-table__item {
            position: relative;
            width: 18px;
            height: 18px;
            margin: 3px;
            background: rgba( 255, 255, 255, .26 );
            cursor: pointer;
            -webkit-transition-property: all;
            transition-property: all;
            -webkit-transition-duration: .26s;
            transition-duration: .26s;
        }
        .qg_list-table__item:hover {
            background: rgba( 255, 255, 255, .54 );
        }
        .qg_list-table__item::after {
            content: "";
            position: absolute;
            left: 3px;
            top: 3px;
            width: 8px;
            height: 8px;
            box-sizing: unset;
            border: 2px solid rgba( 0, 0, 0, 1 );
        }
        .qg_list-table__item.active {
            background: rgba( 0, 0, 0, .26 );
            cursor: default;
        }
        .qg_list-table__item.active::after {
            border: none;
        }
    .qg_containet__gallery-info {
        display: none;
        position: absolute;
        left: 18px;
        top: 18px;
        max-width: calc(50vw - 52px);
        padding: 3px 8px;
        background: rgba(255, 255, 255, .26);
        color: black;
        line-height: 18px;
        font-size: 12px;
        cursor: default;
        -webkit-transition-property: all;
        transition-property: all;
        -webkit-transition-duration: .26s;
        transition-duration: .26s;
        z-index: 100;
    }