.scene {
  width: 250px;
  height: 300px;
  border: 1px solid #CCC;
  margin: 5px;
  perspective: 600px;
  border-radius: 4px;
  box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
}

@media (max-width: 768px) {
  table.racism-terms td {
   display: block;
  
  }
}

.card1, .card2, .card3, .card4, .card5, .card6, .card7, .card8, .card9, .card10, .card11 {
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
  cursor: pointer;
  position: relative;
}

table.racism-terms {
	margin-left:auto; 
    margin-right:auto;
}

.racism-terms tr td {
	padding: 10px !important;
}

.card1.is-flipped, .card2.is-flipped, .card3.is-flipped, .card4.is-flipped,.card5.is-flipped, 
.card6.is-flipped, .card7.is-flipped, .card8.is-flipped,.card9.is-flipped,.card10.is-flipped, .card11.is-flipped{
  transform: rotateY(180deg);
}

.card_title {
	font-size: 18px !important;
	font-weight: bold;
	padding-top: 15px !important;
}
.card_front_text {
  color: #f38b00;
  text-align: center;
  font-weight: bold;
  font-size: 24px;
  padding: 100px 10px 0px 10px;
}

.card_back_text p {
  color: #333;
  font-size: 14px;
  padding: 0 10px 0 15px;
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%; 
  vertical-align: middle;
  border-radius: 4px;
  
  /*line-height: 260px;*/
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card__face--front {
	background: #f3f3f3;
}

.card__face--back {
  background: #f3f3f3;
  transform: rotateY(180deg);
}