/**
 * EasyZoom core styles
 */
.easyzoom {
    position: relative;
    /* 'Shrink-wrap' the element */
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

    .easyzoom img {
        vertical-align: bottom;
    }

    .easyzoom.is-loading img {
        cursor: progress;
    }

    .easyzoom.is-ready img {
        cursor: crosshair;
    }

    .easyzoom.is-error img {
        cursor: not-allowed;
    }

.easyzoom-notice {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 150;
    width: 10em;
    margin: -1em 0 0 -5em;
    line-height: 2em;
    text-align: center;
    background: #FFF;
    box-shadow: 0 0 10px #888;
}

.easyzoom-flyout {
    position: absolute;
    z-index: 10;
    overflow: hidden;
    background: #FFF;
}

/**
 * EasyZoom layout variations
 */
.easyzoom--overlay .easyzoom-flyout {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*.easyzoom--adjacent .easyzoom-flyout {
	top: 0;
	left: 100%;
	width: 100%;
	height: 100%;
	margin-left: 20px;
}*/

.easyzoom--adjacent .easyzoom-flyout {
    top: 0;
    left: 100%;
    width: 300px;
    height: 400px;
    margin-left: 20px;
}

.easyzoom i {
    position: absolute;
    bottom: 5px;
    left: 5px;
}

    .easyzoom i.pinch {
        display: none;
    }

/*mobile - 320 available?*/
@media (max-width: 767px) {
    .easyzoom, .easyzoom img {
        /*width: 100%;*/
        width: calc(100% - 30px);
    }

        .easyzoom img {
            /*margin-left: 60px;*/
        }

        .easyzoom i.pinch {
            position: absolute;
            bottom: 7px;
            left: 10px;
            z-index: 10;
            display: inline-block;
            color: #666;
        }
}

/* mobile version in popup */
.magnify-mobile {
    display: none;
    position: fixed;
    top: 50px;
    left: 0;
    width: 100%;
    height: calc(100% - 50px);
    background: #ccc;
    /*display: none;*/
    overflow: scroll;
    z-index: 11;
    -webkit-overflow-scrolling: touch;
}

    .magnify-mobile > .close {
        position: fixed;
        top: 60px;
        right: 10px;
        width: 32px;
        height: 32px;
        background: #333;
        border-radius: 16px;
        color: #fff;
        display: inline-block;
        font: normal bold 20px sans-serif;
        line-height: 32px;
        opacity: 0.8;
        text-align: center;
        z-index: 10;
    }

    .magnify-mobile > span {
        z-index: 10;
        position: absolute;
        text-align: center;
        width: 100%;
        bottom: 5px;
    }

@media only screen and (min-device-width:320px) and (max-device-width:773px) {
    /* Assume QHD (1440 x 2560) is highest mobile resolution */
    /*.lens-mobile {
        display: block;
    }*/
}

@media (min-width: 768px) {
    .magnify-mobile {
        top: 0;
        height: 100%;
    }

        .magnify-mobile > .close {
            top: 20px;
            right: 38px;
        }

        .magnify-mobile > span {
            display: none;
        }
}