/*Some CSS*/
* {margin: 0; padding: 0;}
.magnify {position: relative; cursor: zoom-in;}

/*Lets create the magnifying glass*/
.large {
	width: 550px;
    height: 550px;
	position: absolute;
    top: 0;
    left: 40%;
    border-radius: 0;
	
	/*Multiple box shadows to achieve the glass effect*/
    box-shadow: none;
	
	/*hide the glass by default*/
	display: none;
	z-index: 10;
    border: 1px solid #c3c3c3;
}

/*To solve overlap bug at the edges during magnification*/
.small { display: block; }

@media (max-width: 991px) {
	.large {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background: #fcfafb;
		width: auto;
		height: auto;
	}
	.large span {
		position: absolute;
		top: 10px;
		right: 20px;
		color: #555555;
		font-size: 25px;
	}
	.large img {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
		width: 85%;
	}
}