body {
    -webkit-perspective: 800px;
 }
 h1{
   text-align: center;
 }
 #coin {
   position: relative;
   margin: 0 auto;
   width: 200px;
   height: 200px;
   cursor: pointer;
 }
 #coin div {
   width: 100%;
   height: 100%;
   -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
           border-radius: 50%;
   -webkit-box-shadow: inset 0 0 45px rgba(255,255,255,.3), 0 12px 20px -10px rgba(0,0,0,.4);
      -moz-box-shadow: inset 0 0 45px rgba(255,255,255,.3), 0 12px 20px -10px rgba(0,0,0,.4);
           box-shadow: inset 0 0 45px rgba(255,255,255,.3), 0 12px 20px -10px rgba(0,0,0,.4);
 }
 .side-a {
    background-image: url("/img/IADLogo-200x200.png");
 }
 .side-b {
   background-image: url("/img/OTS-200x200.png");
 }
 
 #coin {
   transition: -webkit-transform 1s ease-in;
   -webkit-transform-style: preserve-3d;
 }
 #coin div {
   position: absolute;
   -webkit-backface-visibility: hidden;
 }
 .side-a {
   z-index: 100;
 }
 .side-b {
   -webkit-transform: rotateY(-180deg);
 
 }
 
 #coin.heads {
   -webkit-animation: flipHeads 3s ease-out forwards;
   -moz-animation: flipHeads 3s ease-out forwards;
     -o-animation: flipHeads 3s ease-out forwards;
        animation: flipHeads 3s ease-out forwards;
 }
 #coin.tails {
   -webkit-animation: flipTails 3s ease-out forwards;
   -moz-animation: flipTails 3s ease-out forwards;
     -o-animation: flipTails 3s ease-out forwards;
        animation: flipTails 3s ease-out forwards;
 }
 
 @-webkit-keyframes flipHeads {
   from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
   to { -webkit-transform: rotateY(1800deg); -moz-transform: rotateY(1800deg); transform: rotateY(1800deg); }
 }
 @-webkit-keyframes flipTails {
   from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
   to { -webkit-transform: rotateY(1980deg); -moz-transform: rotateY(1980deg); transform: rotateY(1980deg); }
 }