/* =============================================================================
  DEMO
============================================================================= */
/**
 * Sections
 *
 * Some sections to define card content areas.
 */


/**
 * 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.
 */
 
@media  (min-width: 880px) {
	.card { width: 295px; }	
}
		   
@media  (max-width: 768px) {
	.card { width: 295px; }
}
		   
		   
.card {
  position: relative;
  background-repeat: no-repeat;
  margin: 10px auto;
 /* width: 295px;  */
  height: 295px;
  border-radius:16px;
  text-align: center;

}

.card:nth-child(1) {

}

.card:nth-child(2),
.card:nth-child(3) {

}

/* 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;
  background-position: center center;
  border-radius: 15px;
}

.card__front .card__text {
  display: inline-block;
  position: absolute;
 
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 20px;
  color: #fff;
  height: 43px;
    
    color: #FFF;
    background: #389ded;
    padding: 5px 0px;
    text-align: center;
    font-size: 16px;
    border-radius: 0px 0px 15px 15px;
}



.card__back .card__text {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;

  color: #fff;
  
  line-height: 20px;
    color: #FFF;
    line-height: 1.2;
    padding: 60px 25px 0px 25px;
    text-align: center;
    font-size: 22px;
    border-radius: 0px 0px 15px 15px;
}




.card__back {
    background-color: #389ded;
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
     border-radius: 15px;
}

/* card text */
.card__text {

}

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