@media screen and (min-width: 701px){

	/* card fronts and backs */
	.card__front,
	.card__back {
	  position: absolute;
	  top: 0; left: 0;
	  z-index: -2;
	  width: 100%;
	  height: 100%;
	  background-color: #fff;
	  box-shadow: 0px 6px 10px 0px rgba(13, 14, 14, 0.07);
	}

	.card__front,
	.card__back {
		-webkit-backface-visibility: hidden;
			    backface-visibility: hidden;
		-webkit-transition: -webkit-transform 0.6s;
			    transition: transform 0.6s;

	}

	.card__back {
		-webkit-transform: rotateY(-180deg);
			    transform: rotateY(-180deg);
	}
	
	.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);
	}
	
}

@media screen and (max-width: 700px){

	.card__back { display: none; }

}