* {
	margin: 0;
	padding: 0;
}

.mdsk-img222 {
	width: 532px;
	height: 366px;
	padding: 71px 151px;
	position: relative;
	background: url(../images/td03.png) center center no-repeat;
}

.magnify {
	width: 230px;
	height: 230px;
	position: relative;;
}
/*Lets create the magnifying glass*/
.large {
	width: 150px;
	height: 150px;
	position: absolute;
	border-radius: 100%;
	/*Multiple box shadows to achieve the glass effect*/
	box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
	/*Lets load up the large image first*/
	background: url(../images/InscriptionHD1.png) no-repeat;
	/*hide the glass by default*/
	display: none;
}
/*To solve overlap bug at the edges during magnification */
.small {
	display: block;
}
#col1, #col2, #col3, #col4 {
	float: left;
	width: 25%;
}

/* lg */ 
@media (min-width: 1200px) {
	.container-full {
		width:90%;
	}
}

/* md */
@media (min-width: 992px) and (max-width: 1199px) {
	.mdsk-img222 {
		width: 482px;
		height: 316px;
		padding: 71px 151px;
		position: relative;	
		background-size:contain
	}
	
	.magnify {
		width: 180px;
		height: 180px;
		position: relative;
	}
}
@media only screen and (max-width : 580px) { 
	.mdsk-img222 {
		width: 100%;
		height: auto;
		padding: 10% 25%;
		position: relative;	
		background-size:contain;
		
	}
	
	.magnify {
		width: 170px;
		height: 170px;
		position: relative;
		margin:0;
		padding:0;
	}
}

@media only screen and (max-width : 320px) {
	.mdsk-img222 {
		width: 100%;
		height: auto;
		padding: 10% 25%;
		position: relative;	
		background-size:contain
	}
	.magnify {
		width: 130px;
		height: 130px;
		position: relative;
	}

	/*Lets create the magnifying glass*/
	.large {
		width: 120px;
		height: 120px;
		position: absolute;
		border-radius: 100%;
		/*Multiple box shadows to achieve the glass effect*/
		box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
		/*Lets load up the large image first*/
		background: url(../images/mobile/InscriptionHD1.png) no-repeat;
		/*hide the glass by default*/
		display: none;
	}
	/*To solve overlap bug at the edges during magnification */
	.small {
		display: block;
		width: 260px;
	}
	#col1, #col2, #col3, #col4 {
		float: left;
		width: 25%;
	}
}
 @media only screen and (max-width : 480px) {

	/*Lets create the magnifying glass*/
	.large {
		width: 140px;
		height: 140px;
		position: absolute;
		border-radius: 100%;
		/*Multiple box shadows to achieve the glass effect*/
		box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
		/*Lets load up the large image first*/
		background: url(../images/InscriptionHD1.png) no-repeat;
		/*hide the glass by default*/
		display: none;
	}
	/*To solve overlap bug at the edges during magnification */
	.small {
		display: block;
		width: 260px;
	}
	#col1, #col2, #col3, #col4 {
		float: left;
		width: 25%;
	}
}