/**
 * EasyZoom core styles
 */

#example{
	display: flex;
    justify-content: center;
    background-color: #ffffff;
	box-shadow: 0 2px 5px rgb(103 110 132 / 15%);
	border-radius: 10px;
    padding: 1rem;
}
#example::after{
	content: '\f4be';
    font-family: "Font Awesome 5 Free";
    font-size: 150px;
    color: #47c7bd1f;
    font-weight: 600;
    position: absolute;
    bottom: -13%;
    right: 15%;
    transform: translate(-15%, 13%);
}
#example::before{
	content: '\e05c';
    font-family: "Font Awesome 5 Free";
    font-size: 150px;
    color: #47c7bd1f;
    font-weight: 600;
    position: absolute;
    bottom: 15%;
    right: 69%;
    transform: translate(-69%, -15%);
}
 .easyzoom {
	position: relative;
	/* 'Shrink-wrap' the element */
	display: inline-block;
	width: auto;
	overflow: hidden;
}

.easyzoom img {
	vertical-align: bottom;
	border-radius: 10px;
    border: 3px solid #CFE2FF;
	
}

.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: 100%;
	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: 100;
	overflow: hidden;
	background: #FFF;
}

.easyzoom-flyout img{
    width: 1500px;
	height: 1000px;
	z-index: 99;
	border-radius: 10px;
}



/**
 * 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:0px;
}