<div id="flip-toggle" class="flip-container">
  <div class="flipper">
    <div class="front">
      <div class="badge first-contact">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250">
          <g id="base">
            <circle class="bg-1" cx="125" cy="125" r="110"/>
            <circle class="sky" cx="125" cy="125" r="95"/>
          </g> 
          <g class="ship">
            <g>
              <ellipse transform="matrix(0.9397 -0.342 0.342 0.9397 -28.0825 46.585)" class="fc-st3" cx="118.1" cy="102.9" rx="47.4" ry="47.4"/>
              <ellipse transform="matrix(0.9397 -0.342 0.342 0.9397 -33.4963 49.7106)" class="fc-st3" cx="124.2" cy="119.8" rx="79" ry="36.1"/>
            </g>
            <path class="fc-st4" d="M103.8,63.6c-21.7,7.9-32.9,31.9-25,53.6c3.1,8.5,23.4,9.5,45.1,1.6s36.6-21.7,33.5-30.2 C149.4,66.9,125.5,55.7,103.8,63.6z"/>
            <line class="fc-st5" x1="135" y1="149.5" x2="148.2" y2="185.6"/>
            <g>
              <line class="fc-st5" x1="97.1" y1="157.7" x2="95" y2="191.4"/>
              <line class="fc-st5" x1="169.3" y1="131.4" x2="192.6" y2="155.9"/>
            </g>
            <path class="lights" d="M192.1,88.8c-5.5,16.9-29.1,37.3-61.3,49c-31.6,11.5-62.2,11.3-77.6,2.4"/>

          </g>
          <g id="alien">
            <path id="head" class="fc-st3" d="M144.4 98.5c0 10.7-8.7 30.2-19.4 30.2s-19.4-19.5-19.4-30.2 8.7-19.4 19.4-19.4 19.4 8.7 19.4 19.4z"/>
            <g class="eyes">
              <path d="M131.6 108.3c-3.2.1-4.3-1.6-3.1-3.8 2-3.4 5.1-5.3 9-5.8 1.1-.1 2.3 0 2.9 1.1.6 1.1.2 2.1-.4 3-2.1 3.4-5.2 5.1-8.4 5.5zM113.2 98.9c3.4.6 6.7 2.2 8.7 5.8 1.1 2 .2 3.5-2.1 3.7-3.4.3-8.5-2.9-9.8-6.1-.9-2.1.2-3.4 3.2-3.4z"/>
            </g>
          </g>
        </svg>
      </div> 
    </div>
    <div class="back">
    <!-- back content --> 
      <div class="content">
        <img src="https://assets.onestore.ms/cdnfiles/external/uhf/long/9a49a7e9d8e881327e81b9eb43dabc01de70a9bb/images/microsoft-gray.png" alt="">
        <h4>First Contact</h4>
        <p>First contribution to Microsoft Docs.</p>
      </div>
    </div>
  </div>
</div>
<!-- <h3>First contact</h3> -->

body {
  padding: 5%;
  background: white;
}
.badge {
  margin: 0; 
  box-shadow: 0;
}

// alien overwrites
svg:hover .ship {
  transform: none;
}
@keyframes ship-fly {
  50% { transform: rotate(40deg); }
}



// Badge back
.back {background: $neutral-10}
.back .content {
  text-align: center;
  padding: 30px 10px;
  a {
    text-decoration: none;
    color: $link;
  }
  img {
    width: 80px;
    margin: 5px 0;
  }
  h4 {
    margin: 10px 0;
  }
  p {
    font-size: 12px;
    margin: 0 auto;
    max-width: 80%;
  }
}

.flip-container, .badge {
  border-radius: 50%;
}
// ## Flipper CSS below

/* entire container, keeps perspective */
.flip-container {
  perspective: 1000;
}
.flip-container, .front, .back {
  width: 156px;
  height: 156px;
}
.flip-container.flip .flipper {
    transform: rotateY(180deg);
  }

.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}

/* hide back of pane during swap */
.front, .back {
  cursor: pointer;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}

/* front pane, placed above back */
.front {
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
  transform: rotateY(180deg);
}
.flip-container.flip .flipper {
  transform: rotateY(180deg);
}
button {
  margin-top: 50px;
  padding: 10px;
  background: #ddd;
  border: none;
  cursor: pointer;
}

$(".flip-container").click(function(){
  $("#flip-toggle").toggleClass("flip");
});

$(".badge").hover(function(){
  $(this).toggleClass("play");
});