body {
  background: #eee;
  user-select:none;
}


.controls {
  position: absolute;
  top: 30%;
  left: 20%;
  width: 300px;
  height: 300px;
  margin: -120px;
  float: left;
  perspective: 500px;
}

.card {
  position: absolute;
  top: 50%;
  left: 75%;
  width: 300px;
  height: 300px;
  margin: -170px;
  float: left;
  perspective: 500px;
}



.defaultHeads
{
    transition: transform .5s;
    transform-style: preserve-3d;
    transform: rotateX( 0deg ) ;
    /*transform-origin:150px 150px;*/


}

.defaultTails
{
  transition: transform .5s;
  transform-style: preserve-3d;
  /*transform: rotateX( 180deg ) ;*/
    transform-origin:150px 150px;

}

.landsHead
{
  transition: transform 1.7s;
  transform-style: preserve-3d;
  /*transform: rotateX( 360deg ) ;*/
  /*transition: transform 1.5s;*/
    transform-origin:150px 150px;

     -webkit-animation-name: flippingHeads; 
    animation-name: flippingHeads;
    animation-timing-function: linear; 
    animation-iteration-count:2; 
    animation-duration: 1.7s; 
}

.landsTail{

  transition: transform 1.7s;
  transform-style: preserve-3d;
  /*transform: rotateX( 540deg ) ;*/
  /*transition: transform 1.5s;*/
    transform-origin:150px 150px;

     -webkit-animation-name: flippingTails; 
    animation-name: flippingTails;
    animation-timing-function: linear; 
    animation-iteration-count: 2; 
    animation-duration: 1.7s; 
}

.landsHeadMulti
{

  /*transition: transform 1s;*/
  transform-style: preserve-3d;
  /*transform: rotateX( 360deg );*/
  transition: transform 3.0s;
    transform-origin:150px 150px;

     -webkit-animation-name: flippingHeads; 
    animation-name: flippingHeads;
    animation-timing-function: linear; 
    animation-iteration-count: 3; 
    animation-duration: 1.7s; 
}

.landsTailMulti{

  transform-style: preserve-3d;
  /*transform: rotateX( 540deg ) ;*/
  transition: transform 3.0s;
    transform-origin:150px 150px;

     -webkit-animation-name: flippingTails; 
    animation-name: flippingTails; 
    animation-timing-function: linear; 
    animation-iteration-count: 3; 
    animation-duration: 1.7s; 
}

.midFlip
{

    transition: transform 1.7s;
    transform-style: preserve-3d;
    transform-origin:150px 150px;

     -webkit-animation-name: flippingHeads; 
    animation-name: flippingHeads;
    animation-timing-function: linear; 
    animation-iteration-count: 2; 
    animation-duration: 1.7s; 
}

.midFlipLong
{

    transition: transform 2.5s;
    transform-style: preserve-3d;
    transform-origin:150px 150px;

     -webkit-animation-name: flippingHeads; 
    animation-name: flippingHeads;
    animation-timing-function: linear; 
    animation-iteration-count: 2; 
    animation-duration: 1.7s; 
}

@keyframes defaultTails
{
    from { 
        -moz-transform: rotateX(0deg); 
        -ms-transform: rotateX(0deg); 
        transform: rotateX(0deg); 
    } 
    to 
    { 
        -moz-transform: rotateX(180deg); 
        -ms-transform: rotateX(180deg); 
        transform: rotateX(180deg); 
    
    } 
}

@keyframes defaultHeads
{
    from { 
        -moz-transform: rotateX(0deg); 
        -ms-transform: rotateX(0deg); 
        transform: rotateX(0deg); 
    } 
    to 
    { 
        -moz-transform: rotateX(360deg); 
        -ms-transform: rotateX(360deg); 
        transform: rotateX(360deg); 
    
    } 
}


@keyframes flipTails
{
    from { 
        -moz-transform: rotateX(0deg); 
        -ms-transform: rotateX(0deg); 
        transform: rotateX(0deg); 
    } 
    to 
    { 
        -moz-transform: rotateX(180deg); 
        -ms-transform: rotateX(180deg); 
        transform: rotateX(180deg); 
    
    } 
}

@keyframes flipHeads
{
    from { 
        -moz-transform: rotateX(0deg); 
        -ms-transform: rotateX(0deg); 
        transform: rotateX(0deg); 
    } 
    to 
    { 
        -moz-transform: rotateX(360deg); 
        -ms-transform: rotateX(360deg); 
        transform: rotateX(360deg); 
    
    } 
}

@keyframes flippingTails
{
    from { 
        -moz-transform: rotateX(0deg); 
        -ms-transform: rotateX(0deg); 
        transform: rotateX(0deg); 
    } 
    to 
    { 
        -moz-transform: rotateX(7380deg); 
        -ms-transform: rotateX(7380deg); 
        transform: rotateX(7380deg); 
    
    } 
}

@keyframes flippingHeads
{
    from { 
        -moz-transform: rotateX(0deg); 
        -ms-transform: rotateX(0deg); 
        transform: rotateX(0deg); 
    } 
    to 
    { 
        -moz-transform: rotateX(7200deg); 
        -ms-transform: rotateX(7200deg); 
        transform: rotateX(7200deg); 
    
    } 
}



.front,
.back {
  position: absolute;
  height: 100%;
  width: 100%;
  
  line-height: 300px;
  color: #03446A;
  text-align: center;
  font-size: 60px;
  border-radius: 150px;
  backface-visibility: hidden;
}

.back {
  
  color: white;
  /*transform: rotateY( 180deg );*/
}


.hide
{
    display:none;
}

.ddlMultiplier,  .btnLabel
{
    font-size:20px;
}