@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
 body {
	 background-image: url('https://www.toptal.com/designers/subtlepatterns/patterns/bush.png');
	 background-position: center center;
	 font-family: 'Open Sans', sans-serif;
}
 div.business-card {
	 height: 427px;
	 width: 320px;
	 margin-left: -160px;
	 margin-top: -213.5px;
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 perspective: 1000;
}
 div.business-card:hover .flipper, div.business-card.hover .flipper {
	 transform: rotateY(180deg) rotateZ(90deg);
}
 div.flipper {
	 transition: 0.6s;
	 transform-style: preserve-3d;
	 position: relative;
	 transform-origin: center 160px;
}
 div.front, div.back {
	 backface-visibility: hidden;
	 position: absolute;
	 top: 0;
	 left: 0;
	 height: 427px;
	 width: 320px;
	 box-shadow: 0 0 50px rgba(0, 0, 0, 0.75);
}
 div.front {
	 background-color: white;
	 z-index: 0;
}
 div.front:before, div.front:after {
	 display: block;
	 content: '';
	 position: absolute;
	 top: 0;
	 left: 0;
	 border-width: 160px;
	 border-style: solid;
	 border-color: transparent;
}
 div.front:before {
	 border-top-color: #288fbd;
	 border-left-color: #288fbd;
	 z-index: 2;
}
 div.front:after {
	 border-top-color: #005d8c;
	 border-right-color: #005d8c;
}
 div.front div.name {
	 position: absolute;
	 bottom: 36.5px;
	 left: 85px;
}
 div.front div.name span {
	 display: block;
	 font-size: 40px;
	 line-height: 45px;
}
 div.front div.name span.first {
	 color: #005d8c;
}
 div.front div.name span.last {
	 color: #288fbd;
}
 div.front div.name span.title {
	 font-size: 20px;
	 line-height: 20px;
}
 div.back {
	 background-color: #005d8c;
	 color: white;
	 width: 530px;
	 height: 320px;
	 box-sizing: border-box;
	 transform: rotateY(180deg) rotateZ(90deg);
}
 div.back div.container-sm {
	 float: left;
	 width: 40%;
	 height: 100%;
	 position: relative;
}
 div.back div.container-lg {
	 float: left;
	 width: 60%;
	 margin-top: 2rem;
}
img{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 170px;
	display: block;
	margin: -80px -70px;
}
 div.back a {
	 color: white;
	 text-decoration: none;
	 display: block;
}
 div.back a:hover {
	 text-decoration: underline;
}
 div.back ul.social {
	 font-size: 1.25rem;
}
 div.back ul.social li {
	 margin-top: 1rem;
}
 div.back ul.social li:first-child {
	 margin-top: 2rem;
}