#body1

{

	margin: 0;

	padding: 0;

	min-height: 40vh;

	background:#333;

	display: flex;

	justify-content: center;

	align-items: center;

	font-family: consolas;

}

.container11{

	width: 1000px;

	position: relative;

	display: flex;

	justify-content: space-between;

}

.container11 .card11{

	position: relative;

}

.container11 .card11 .face{

	width: 300px;

	height: 200px;

	transition: 0.5s;

}

.container11 .card11 .face.face1

{

	position: relative;

	background: #333;

	display: flex;

	justify-content: center;

	align-items: center;

	z-index: 1;

	transform: translateY(100px);

}

.container11 .card11:hover .face.face1{

	background:#ff0057;

	transform: translateY(0);

}

.container11 .card11 .face.face2

{

	position: relative;

	background:#fff;

	display: flex;

	justify-content: center;

	align-items: center;

	padding: 20px;

	box-sizing: border-box;

	box-shadow: 0 20px 50px rgba(0,0,0,0.8);

	transform: translateY(-100px);

}

.container11 .card11:hover .face.face2{

    transform: translateY(0);

}

.container11 .card11 .face.face2 .content11 p{

	margin:0;

	padding: 0;

}

.container11 .card11 .face.face2 .content11 a{



	margin: 1px;

	display: inline-block;

	text-decoration: none;

	font-weight: 600;

	color: #333;

	padding: 6px;

	border:1px solid #333;

	border-radius: 100px;

	text-align: center;

}

.container11 .card11 .face.face1 .content11

{

	opacity: 0.2;

	transition:0.5;

}

.container11 .card11 .face.face1 .content11 h3{

	margin:10px 0 0;

	padding: 0;

	color: #fff;

	text-align: center;

	font-size: 1.5em;

}

.container11 .card11:hover .face.face1 .content11{

	opacity: 1;

}

.container11 .card11:hover .face.face1 .content11 img{

	max-width: 100px;

}

.container11 .card11 .face.face2 .content11 a:hover{

	background:#333;

	color: #fff;

}

.content11{

	text-align: center;

}