/** 
--------------------------------------------
Card Flip
--------------------------------------------
Setup a mixin for your flip so you can include it into any element that has this or similar structure

 <figure class="card"> <-- can be any class you need.
  <div class="face front"></div> <- required classes
  <div class="face back"> </div>  <- required classes
 </figure>

Supports arguments for Speed and Direction. 
The direction you can specify using "x" "y" or "z"

Use it by putting "@include flip();" in the parent element you want to flip.
You can style the card however you want. Here are some examples. 

*/
html {
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Sans-Serif !important;

  background-color: #242424;
  text-align: center;
  margin: 0;
  padding: 0;
 /*width: 950px; 
*/  margin: 0 auto;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center;
    background-attachment: fixed !important;
}

h2 {
  color: white !important;
  font-weight: 900 !important; 
}

small {
  color: white !important;
}

.card {
  text-align: left;
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  font-family: Arial, Sans-Serif;
  width: 350px;
  height: 500px;
  color: white;
  display: inline-block;
  margin: 10px;
}
.card.flip {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}
.card .face {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translateZ(0.1px);
          transform: translateZ(0.1px);
}
.card .back {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.card .face {
  border-radius: 10px;
}
.card .front {
  color: #ffffff;
  background-color: #101010;
}
.card .front .logo {
  width: 100px;
  padding: 10px;
}
.card .back {
      font-size: 30px !important;
    text-align: center;
    font-weight: 600 !important;
    line-height: .8em !important;
  background: url(http://blog.spoongraphics.co.uk/wp-content/uploads/2010/galactic-attack/06.jpg);
  background-size: cover;
  color: #FFE81F !important;
  background-position: center center;
}
.card .back .fa { 
  font-size: 35px;
  color: #FFE81F !important;
  margin-right: 5px;
  }
.card .back img {
  width: 60%;
    padding: 20px;
  border-bottom: 3px double #FFE81F;
}
.card .back .description {
  padding: 20px;
}
.card .back .logo {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 100px;
  padding: 10px;
  border: none;
}
.card h2 {
  text-transform: uppercase;
  font-size: 4.3em;
  position: absolute;
  bottom: 30px;
  margin: 0;
  line-height: 0.7em;
  padding: 10px;
}
.card h2 small {
  font-size: 32px;
}
.card cite {
  position: absolute;
  left: 0px;
  bottom: 0px;
  font-size: 10px;
  text-transform: uppercase;
  padding: 20px;
}
.card cite a {
  color: white;
}
.card cite a:visited {
  text-decoration: none;
  color: #aaaaaa;
}

.darth h2 {
  font-size: 4.3em !important;
  line-height: .7em !important;
  bottom: 30px;
}
.darth .front {
  background-size: 200%;
  background-position: 50% 50%;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
}
.darth .front:hover {
  background-size: 200%;
  background-position: 20% 30%;
  -webkit-transition: background 0.5s;
  transition: background 0.5s;
}

.luke .front {
  background-size: 200%;
  background-position: 50% 50%;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
}
.luke .front:hover {
  background-size: 300%;
  background-position: 50% 10%;
  -webkit-transition: background 0.5s;
  transition: background 0.5s;
}

.mememe {
  text-transform: uppercase;
  font-weight: bold !important;
  font-size: 10px;
}
.mememe a {
  color: #eeff44;
}
.mememe a:visited {
  color: #eeff44;
}