/**
 * 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 {
width:25.05%; margin:0 0% 19px 0%;
  position: relative;
  float: left;
  height:206px;
  text-align: center;
  top:0px;
}

.card:nth-child(1) {
  margin-left: -3px;
  margin-right: 0px;
}

.card:nth-child(2),
.card:nth-child(3) {
  margin-right: 0px;
}

/* 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-transition: -webkit-transform 0.7s;
          transition: transform 0.7s;
}

.card__front {
	height:185px;
 /* background-color: #ff5078;*/
}

.card__back {
  /*background-color: #fff;*/
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
		  height:185px;
}

/* card text */
.card__text {
  display:block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: auto;
  color: #fff;
  line-height: 20px;
}

/* hover effect */
.card.effect__hover:hover .card__front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card.effect__hover:hover .card__back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}

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

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

/* 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);
}
@media (min-width: 481px) and (max-width: 768px) {
.card {
  position: relative;
  float: left;
  padding-bottom: 0%;
  width: 50%;
  text-align: center;
  margin-bottom:19px;
  left:1px;
}
.card__front,
.card__back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}	
}
@media (min-width: 320px) and (max-width: 480px) {
.card {
  position: relative;
  float: left;
  padding-bottom: 0%;
  width: 100%;
  text-align: center;
  margin-bottom:19px;
  left:1px;
}
.card__front,
.card__back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}	
}