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

.section2 {
  margin-top: 1px;
  margin-bottom: 40px;
}

.section__title {
  font-family: "Roboto Slab", serif;
  font-size: 40px;
}

.section__content {
  padding-left: 3px;
}

/**
 * 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: 16.6666666%;
  width: 16.6666666%;
  text-align: center;
}

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

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

/* cards2 */
.card2 {
  position: relative;
  float: left;
  padding-bottom: 33.3333333%;
  width: 33.3333333%;
  text-align: center;
}

.card2:nth-child(1) {
  margin-left: -5px;
  margin-right: 1px;
}

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


/* cards3 */
.card3 {
  position: relative;
  float: left;
  padding-bottom: 33.3333333%;
  width: 16.6666666%;
  text-align: center;
}

.card3:nth-child(1) {
  margin-right: 1px;
}

.card3:nth-child(2){
  margin-right: 1px;
}


/* cards0 */
.card0 {
  position: relative;
  float: left;
  padding-bottom: 16.6666666%;
  width: 33.3333333%;
  text-align: center;
}

.card0:nth-child(1) {
  margin-left: -5px;
  margin-right: 1px;
}

.card0:nth-child(2){
  margin-right: 1px;
}

/* cards5 */
.card5 {
  position: relative;
  float: left;
  padding-bottom: 16.6666666%;
  width: 33.3333333%;
  text-align: center;
}

.card5:nth-child(1) {
  margin-right: 1px;
}

.card5:nth-child(2),
.card5: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: #ff5078;
}

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

/* card2 fronts and backs */
.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-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}

.card2__front {
  background-color: #ff5078;
}

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


/* card3 fronts and backs */
.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-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}

.card3__front {
  background-color: #ff5078;
}

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


/* card0 fronts and backs */
.card0__front,
.card0__back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card0__front,
.card0__back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}

.card0__front {
  
}

.card0__back {
  
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

/* card5 fronts and backs */
.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-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}

.card5__front {
  
}

.card5__back {
  
  -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;
  height: 20px;
  color: #fff;
  font-family: "Roboto Slab", serif;
  line-height: 20px;
}

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

.card2.effect__click.flipped .card2__front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card2.effect__click.flipped .card2__back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}


.card3.effect__click.flipped .card3__front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card3.effect__click.flipped .card3__back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}

.card0.effect__click.flipped .card0__front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card0.effect__click.flipped .card0__back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}

.card5.effect__click.flipped .card5__front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card5.effect__click.flipped .card5__back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}