.{
	margin: 0;
	padding: 0;
	font-family:Impact, Haettenschweiler,'Arial Narrow Bold',sans-serif;
}
#body{
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #EBF4FA;
}
#container{
	position: relative;
	width: 1100px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding: 30px;

}
#container .card{
	position: relative;
	max-width: 300px;
	height: 240px;
	background: white;
	margin: 30px 14px;
	padding: 20px 15px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 3px 50px rgba(0, 0, 0, 0.5);
	transition: 0.4s ease-in-out;
}
#container .card:hover{
	height: 330px;
}
#container .card .cimg{
	position: relative;
	width: 260px;
	height: 250px;
	top: -60px;
	left: 0px;
	z-index: 1;
	box-shadow: 0 3px 50px rgba(0, 0, 0, 0.5);
}
#container .card .cimg #my{
	max-width: 300px;
	height: 190px;	
	border-radius: 6px;
}
#container .card .cdetail{
	position: relative;
	margin-top: -140px;
	padding: 10px 15px;
	text-align: center;
	color: black;
	font-family: monospace;
	visibility: hidden;	
	opacity: 0;
	transition: 0.4s ease-in-out;
}
#container .card:hover .cdetail{
	visibility: visible;	
	opacity: 1;
	margin-top: -70px;
}