.section {
  margin-bottom: 40px;
}
.section__title {
  font-family: "Roboto Slab", serif;
  font-size: 40px;
}
.section__content {
  padding-left: 3px;
}
.card {
  position: relative;
  float: left;
  margin:0px 5px;
  padding-bottom: 25%;
  width:215px;
  height:300px;
  text-align: center;
  margin-bottom:20px;
  
}
/*.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: #ff5078;*/
}
.card__front img{
	height:100%;
	width:100%;
}
.card__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: auto;
  color: #fff;
  font-family:Bukraregular;
  line-height: 20px;
  border:1px solid #333;
  border-radius:20px;
  padding:10px;
  font-size:13px;
  background-color: #1e1e1e;
  background:url(../images/bg.png) #141213;
}

/* 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);
}
