/* =============================================================================
  DEMO
============================================================================= */

/**
 * The cards
 *
 * Each card plays home to a front and back. I've set them up as squares here
 * by using the padding technique, but you may set them up in any dimensions
 * you like based on your site design.
 */
.card {
	color:#fff;
    margin: 0;
	margin-top:0px;
    padding: 30px;
    position: relative;
  	float: left;
 	width: 100%;
	height: 367px;
  	text-align: center;
}

/* card fronts and backs */
.card__front,
.card__back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card__front,
.card__back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: transform 2s;
  -moz-transition: transform 2s;
  -o-transition: transform 2s;
  transition: transform 2s;
  -webkit-transition: -webkit-transform 2s;
}

.card__front {
  background-color: #ff5078;
}

.card__back {
  background-color: #1e1e1e;
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card1__front,
.card1__back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card1__front,
.card1__back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: transform 2s;
  -moz-transition: transform 2s;
  -o-transition: transform 2s;
  transition: transform 2s;
  -webkit-transition: -webkit-transform 2s;
}

.card1__front {
  background: url(../img/liftyourart/liftyourart4.jpg);
}

.card1__back {
  background: url(../img/liftyourart/liftyourart9.jpg);
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card2__front,
.card2__back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card2__front,
.card2__back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: transform 2s;
  -moz-transition: transform 2s;
  -o-transition: transform 2s;
  transition: transform 2s;
  -webkit-transition: -webkit-transform 2s;
}

.card2__front {
  background: url(../img/liftyourart/liftyourart5.jpg);
}

.card2__back {
 background: url(../img/liftyourart/liftyourart12.jpg);
  -webkit-transform: rotateX(-180deg);
          transform: rotateX(-180deg);
}
.card3__front,
.card3__back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card3__front,
.card3__back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: transform 2s;
  -moz-transition: transform 2s;
  -o-transition: transform 2s;
  transition: transform 2s;
  -webkit-transition: -webkit-transform 2s;
}

.card3__front {
  background: url(../img/liftyourart/liftyourart11.jpg);
}

.card3__back {
  background: url(../img/liftyourart/liftyourart7.jpg);
  -webkit-transform: rotateX(-180deg);
          transform: rotateX(-180deg);
}

.card4__front,
.card4__back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card4__front,
.card4__back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: transform 2s;
  -moz-transition: transform 2s;
  -o-transition: transform 2s;
  transition: transform 2s;
  -webkit-transition: -webkit-transform 2s;
}

.card4__front {
  background: url(../img/liftyourart/liftyourart10.jpg);
}

.card4__back {
  background: url(../img/liftyourart/liftyourart6.jpg);
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card5__front,
.card5__back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.card5__front,
.card5__back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: transform 2s;
  -moz-transition: transform 2s;
  -o-transition: transform 2s;
  transition: transform 2s;
  -webkit-transition: -webkit-transform 2s;
}

.card5__front {
  background: url(../img/liftyourart/liftyourart8.jpg);
}

.card5__back {
  background: url(../img/liftyourart/liftyourart3.jpg);
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}


/* random effect */
.card.effect__random.flipped .card__front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card.effect__random.flipped .card__back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}

.card.effect__random.flipped .card1__front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card.effect__random.flipped .card1__back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}

.card.effect__random.flipped .card2__front {
  -webkit-transform: rotateX(-180deg);
          transform: rotateX(-180deg);
}

.card.effect__random.flipped .card2__back {
  -webkit-transform: rotateX(0);
          transform: rotateX(0);
}

.card.effect__random.flipped .card3__front {
  -webkit-transform: rotateX(-180deg);
          transform: rotateX(-180deg);
}

.card.effect__random.flipped .card3__back {
  -webkit-transform: rotateX(0);
          transform: rotateX(0);
}

.card.effect__random.flipped .card4__front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card.effect__random.flipped .card4__back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}

.card.effect__random.flipped .card5__front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card.effect__random.flipped .card5__back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}