/* =============================================================================
  DEMO
============================================================================= */
/**
 * Sections
 *
 * Some sections to define card content areas.
 */
.section {
  margin-bottom: 0px;
}

.section__title {
  font-family: "Ubuntu", serif;
  font-size: 0.9em
}

.section__content {
  padding-left: 0px;
}

/**
 * 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 {
  position: relative;
  float: left;
  padding-bottom: 25%;
  width: 25%;
/*  text-align: center;*/
}

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

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

/* 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.3s;
          transition: transform 0.3s;
}

.card__front {
  background-color: transparent;
}

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

/* card text */
.card__text {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    color: #fff;
    font-family: "Ubuntu", serif;
    font-size: 0.9em;
    line-height: 1.2;
    height: 9em;
    padding: 0 15px;
}

.card__text a { color: #fff!important; }

.card__text.custom1 { height: 2em; }
.card__text.custom2 { height: 3em; }
.card__text.custom3 { height: 4em; }

/* 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);
}

.card.effect__click:hover { cursor: pointer; background-color: #d6d7d7; }

/* 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);
}