.containerrr{
     /* align-items: center; */
     justify-content: center; 
	/* text-align: center;  */
	width: 100%;
	max-width: 1200px;
	display: flex;
	
	
	
} 
.columnnn{
	 flex: 0 0 46%; 
	 justify-content: center;
	 display: flex;
}
.description span{
    color: #5071df;
}
.carddd{
	border:1px solid;
	position: relative;
	background: #ffffff;
	overflow: hidden;
	
    border-radius: 10px;
	justify-content: center;
	text-align: center;
}
.carddd img{
	max-width: 100%;
	vertical-align: top;
	opacity: 0
}
.description{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	padding: 30px;
	color: #000000;
	text-align: center;
	font-size: 20px;
	line-height: 1.4;
	display: flex;
	align-items: center;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	transition: all 0.7s ease-out;
	transform: scale(0.6);
	opacity: 0
}
.description h3{
	font-size: 26px;
	margin:0;
}
.description a{
	display: inline-block;
	padding: 8px 20px;
	text-decoration: none;
	color: #ffffff;
	background: #04098d;
}
.carddd:hover .description{
	opacity: 1;
	transform: scale(1);
}

.over_pic{
	position: absolute;
	width: 50%;
	height: 50%;
	background-size: 200% 200%;
	transition: all 0.7s ease-out;
	z-index: 2;
}

.over_pic:nth-of-type(1){
	left: 0;
	top: 0;
	background-position: left top;
}
.carddd:hover .over_pic:nth-of-type(1){
	transform: translate(-100%, -100%);
}
.over_pic:nth-of-type(2){
	right: 0;
	top: 0;
	background-position: right top;
}
.carddd:hover .over_pic:nth-of-type(2){
	transform: translate(100%, -100%);
}
.over_pic:nth-of-type(3){
	left: 0;
	bottom: 0;
	background-position: left bottom;
}
.carddd:hover .over_pic:nth-of-type(3){
	transform: translate(-100%, 100%);
}
.over_pic:nth-of-type(4){
	right: 0;
	bottom: 0;
	background-position: right bottom;
}
.carddd:hover .over_pic:nth-of-type(4){
	transform: translate(100%, 100%);
}
@media(width>1100)
{
	.containerrr .carddd{
		background-color: black;
	padding-left: 55px;
	}
}
@media(width< 800px){
	.containerrr{
		display: none;
	}
	.containerrr .carddd{
		padding-left: 0px;
		}
		.description h3{
			font-size: 26px;
			margin:0;
		}
		.description a{
			display: inline-block;
			padding: 8px 20px;
			text-decoration: none;
			color: #ffffff;
			background: #04098d;
		}
		.description{
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			padding: 30px;
			color: #000000;
			text-align: center;
			font-size: 20px;
			line-height: 1.4;
			display: flex;
			align-items: center;
			justify-content: center;
			align-content: center;
			flex-wrap: wrap;
			transition: all 0.7s ease-out;
			transform: scale(0.6);
			opacity: 0
		}
}