/* ===== Primary Styles ========================================================
	Author: Chi-chi Wang
	TITLE COMMENTS
  ==========================================================================  */

/* =================== */
/*     CARD STYLES     */
/* =================== */
  .cardcontainer {
    position: relative;
    width: 85%;
    height: 5.5em;
    margin: 1em auto;
    font-size: 180%;

    -webkit-perspective: 500px;
    -moz-perspective: 500px;
    -operspective: 500px;
    perspective: 500px;
  }
  .cardcontainer.half_x {
    width: 30%;
    height: 4.5em;
  }
  .cardcontainer.half_y {
    width: 85%;
    height: 2em;
  }
  .card {
    position: absolute;
    width: 100%;
    height: 100%;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

  .card .cFront,
  .card .cBack {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .card .cFront {
    background-color: #5EA8A7;
    color: #26546B;
    border: 2px solid currentColor;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
    box-sizing: border-box;
    z-index: 2;
  }
  .card .cBack {
    background-color: #A9E1A1;
    color: #174F0F;
    border: 2px solid currentColor;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .card .cBack p {
    font-size: 1em;
  }

  /* == Transform-Origin Styles == */
    .l_origin {
      -webkit-transform-origin: 0 50% 0;
      -moz-transform-origin: 0 50% 0;
      -o-transform-origin: 0 50% 0;
      transform-origin: 0 50% 0;
    }
    .b_origin {
      -webkit-transform-origin: 50% 100% 0;
      -moz-transform-origin: 50% 100% 0;
      -o-transform-origin: 50% 100% 0;
      transform-origin: 50% 100% 0;
    }

/* === CAPTION  === */

/* === FLIP ANIMATIONS STYLES === */
  .dBlock .card.flip_y {
    -moz-animation: flipY 6s infinite ease-out;
    -webkit-animation: flipY 6s infinite ease-out;
    -o-animation: flipY 6s infinite ease-out;
    animation: flipY 6s infinite ease-out;
  }
  .dBlock .card.flip_x {
    -moz-animation: flipX 6s infinite ease-out;
    -webkit-animation: flipX 6s infinite ease-out;
    -o-animation: flipX 6s infinite ease-out;
    animation: flipX 6s infinite ease-out;
  }

  /* == Initial Transform Styles == */
    .flip_y .cBack {
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
      transform: rotateY(180deg);
    }
    .flip_x .cBack {
      -webkit-transform: rotateX(180deg);
      -moz-transform: rotateX(180deg);
      -o-transform: rotateX(180deg);
      transform: rotateX(180deg);
    }

/* == UNIQUE ELEMENTS == */
  .cBack button {
    width: 10em;
    height: 1.4em;
    border: 1px solid #B6B6B6;
    border-radius: 5px;
    margin-top: 0.2em;
  }

/* === FLIP ANIMATIONS KEYFRAMES === */

  /* == FLIP Y 180 KEYFRAMES == */
    @-webkit-keyframes flipY { /* SAFARI AND CHROME */
      0%    {-webkit-transform: rotateY(0deg);}
      50%   {-webkit-transform: rotateY(180deg);}
      100%  {-webkit-transform: rotateY(360deg);}
    }
    @-moz-keyframes flipY { /* FIREFOX */
      0%    {-moz-transform: rotateY(0deg);}
      50%   {-moz-transform: rotateY(180deg);}
      100%  {-moz-transform: rotateY(360deg);}
    }
    @-o-keyframes flipY { /* OPERA */
      0%    {-o-transform: rotateY(0deg);}
      50%   {-o-transform: rotateY(180deg);}
      100%  {-o-transform: rotateY(360deg);}
    }
    @keyframes flipY {
      0%    {transform: rotateY(0deg);}
      50%   {transform: rotateY(180deg);}
      100%  {transform: rotateY(360deg);}
    }
  /* == FLIP X 180 KEYFRAMES == */
    @-webkit-keyframes flipX { /* SAFARI AND CHROME */
      0%    {-webkit-transform: rotateX(0deg);}
      50%   {-webkit-transform: rotateX(180deg);}
      100%  {-webkit-transform: rotateX(360deg);}
    }
    @-moz-keyframes flipX { /* FIREFOX */
      0%    {-moz-transform: rotateX(0deg);}
      50%   {-moz-transform: rotateX(180deg);}
      100%  {-moz-transform: rotateX(360deg);}
    }
    @-o-keyframes flipX { /* OPERA */
      0%    {-o-transform: rotateX(0deg);}
      50%   {-o-transform: rotateX(180deg);}
      100%  {-o-transform: rotateX(360deg);}
    }
    @keyframes flipX {
      0%    {transform: rotateX(0deg);}
      50%   {transform: rotateX(180deg);}
      100%  {transform: rotateX(360deg);}
    }