<link href='https://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'>
<!-- ontouchstart used for card flip -->
<div class="wrapper" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="card-front">
      <div class="logo">
        <h2 class="initial">D</h2>
      </div>
      <div class="oval"></div>
    </div>
    <div class="card-back">
      <h1 class="name">Daniel Destefanis</h1>
      <h3 class="h3 about">Front End Development & Web Design</h3>
      <h3 class="h3 contact-info"><a href="http://www.danielrd.com">Danielrd.com</a></h3>
    </div>
  </div> <!--/flipper -->
</div> <!--/wrapper -->
<div>
  <p class="info">
   For the <a href="http://www.reddit.com/r/web_design/comments/2bah6s/community_challenge_design_your_own_business_card/">/r/web_design</a> challenge.
  </p>
  <p class="info">
    Roll over the card to see other side.
  </p>
</div>

@import "compass/css3";

$font-stack: 'Cabin', 'sans-serif';
$primary-color: #6cdba6;
$shadow-color: #59a07e;
$body-color: #2F2D2C;
$white: #fff;

body {
  font-size: 16px;
  color: $primary-color;
  background: #2F2D2C;
}
a {
  color: #fff;
  text-decoration: none;
  transition: ease 0.3s 0;
}
a:hover {
  color: $shadow-color;
}
h1, h2, h3, h4, h5, h6 {
	font-family: $font-stack;
	text-transform: uppercase;
}
.initial {
  font-family: $font-stack;
  text-transform: uppercase;
  font-size: 3em;
  color: $white;
  font-weight: 700;
}
.logo {
  position: relative;
  top: 20%;
  height: 100px;
  width: 100px;
  margin: 0 auto 0;
  background: $primary-color;
  border-radius: 50%;
  text-align: center;
  animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
 
	h2 {
    margin-left: 5px;
    line-height: 100px;
    font-size: 5.35em;
    font-family: $font-stack;
    font-weight: 600;
    color: $white;
    border-radius: 50%;
    overflow: hidden;
  }
	.initial {
		-webkit-transform: translateZ(0);
		transition: all 0.5s .8s ease;
		text-shadow: 0px 0px 0 #59A07E,1px 1px 0 #59A07E,2px 2px 0 #59A07E,
		3px 3px 0 #59A07E,4px 4px 0 #59A07E,5px 5px 0 #59A07E,
		6px 6px 0 #59A07E,7px 7px 0 #59A07E,8px 8px 0 #59A07E,
		9px 9px 0 #59A07E,10px 10px 0 #59A07E,11px 11px 0 #59A07E,
		12px 12px 0 #59A07E,13px 13px 0 #59A07E,14px 14px 0 #59A07E,
		15px 15px 0 #59A07E,16px 16px 0 #59A07E,17px 17px 0 #59A07E,
		18px 18px 0 #59A07E,19px 19px 0 #59A07E,20px 20px 0 #59A07E,
		21px 21px 0 #59A07E,22px 22px 0 #59A07E,23px 23px 0 #59A07E,
		24px 24px 0 #59A07E,25px 25px 0 #59A07E,26px 26px 0 #59A07E,
		27px 27px 0 #59A07E,28px 28px 0 #59A07E,29px 29px 0 #59A07E,
		30px 30px 0 #59A07E,31px 31px 0 rgba(0, 0, 0, 0);
	}
  a {
      padding: 15px;
  }
}
.logo:after {
  content: "";
  position: absolute;
  top: 89%;
  left: 16%;
  border-left: 12px solid rgba(0, 0, 0, 0);
  border-right: 10px solid rgba(0, 0, 0, 0);
  border-top: 18px solid #6CDBA6;
  transform: rotate 31px;
  -ms-transform: rotate(31deg);
  -webkit-transform: rotate(31deg);
  transform: rotate(31deg);
}
.name {
  margin: 7em 0 0.5em;
  font-size: 17px;
  font-family: $font-stack;
  font-weight: 700;
  color: $white;
  letter-spacing: 3px;
}
.h3 {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2px; 
}
.about {
  margin: 0 auto;
  width: 200px;
  line-height: 16px;
}
.contact-info {
  line-height: 160px;
}
.info {
  margin: auto;
  width: 427px;
  font-family: $font-stack;
  margin-bottom: 1em;
}
/* Rules for the cards  */
/* Credit: http://davidwalsh.name/css-flip */
/* entire container, keeps perspective */
.wrapper, .card-front, .card-back {
  width: 427px;
  height: 320px;
}
.wrapper {
  margin: 1em auto;
  perspective: 1000; 
}
/* Flip the pane when hovered */
.wrapper:hover .flipper, .flip-container.hover .flipper {
  transform: rotateY(180deg);
}
/* Flip speed and styling. */
.flipper {
  position: relative;
  transition: 0.8s;
  transform-style: preserve-3d;
}
/* Hide back of pane during swap */
.card-front, .card-back {
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
  backface-visibility: hidden;
  text-align: center;
  box-sizing: border-box;
}
/* Front pane, placed above back */
.card-front {
  z-index: 2;
  background: $white;
}
/* back, initially hidden pane */
.card-back {
  transform: rotateY(180deg);
  background: $primary-color;
  color: $white;
}
.oval {
  position: relative;
  top: 38%;
  margin: auto;
  width: 55px;
  height: 25px;
  background: #2F2D2C;
  -moz-border-radius: 60px / 25px;
  -webkit-border-radius: 60px / 25px;
  border-radius: 55px / 25px;
  animation: shadow 2s infinite;
  -webkit-animation: shadow 2s infinite;
}
@-webkit-keyframes bounce {
  0%   { margin-top: 15px; margin-bottom: 10px; }
  50%  { margin-top: 22px; margin-bottom: 3px; }
  100% { margin-top: 15px; margin-bottom: 10px; }
}
@keyframes bounce {
  0%   { margin-top: 15px; margin-bottom: 10px; }
  50%  { margin-top: 22px; margin-bottom: 3px; }
  100% { margin-top: 15px; margin-bottom: 10px; }
}
@-webkit-keyframes shadow {
  0%   { padding: 1px; opacity: 0.10; }
  50%  { padding: 3px; opacity: 0.18; }
  100% { padding: 1px; opacity: 0.10; }
}
@keyframes shadow {
  0%   { padding: 1px; opacity: 0.10; }
  50%  { padding: 3px; opacity: 0.18; }
  100% { padding: 1px; opacity: 0.10; }
}