.flashcard {
  height: 400px;  
  width: 600px; 
  margin: 1% auto;
  //border: 1px solid gray; 
  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.68);
  -webkit-transform-style: preserve-3d;  
  transform-style: preserve-3d;
  transition: all 0.3s;               
  -webkit-transition: all 0.3s;
  cursor:pointer;
}

.flipped, .back {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg); 
}
.flipped-front {
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg); 
}

.front, .back {
  height: 400px;          
  width: 600px;
  position: absolute;    
  text-align: center;   
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  padding:30px;   
}

.front {
  background-color:#FEC8BB;
  font-size:18px;
}

.back {
    background-color:#B45D64;
    color:#fff !important;
    font-size:18px;
}
.clicktoflip{
    position:absolute;
    right:10px;
    bottom:5px;
    font-size:14px;
}

.clicktoflip-black{
    color:#000;
}
.clicktoflip-black:hover{
    color:#B45D64;
}




.well-flashcard-front {
  height: 400px;  
  width: 600px; 
  margin: 1% auto;
  //border: 1px solid gray; 
  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.68);
  background-color:#C5D94B;
  font-size:18px;
  cursor:pointer;
}

.well-flashcard-back {
  height: 400px;  
  width: 600px; 
  margin: 1% auto;
  //border: 1px solid gray; 
  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.68);
  background-color:#778231;
  color:#fff !important;
  font-size:18px;
}



.card-container {
    -webkit-transform-style: preserve-3d;  
    transform-style: preserve-3d;
  height: 400px;  
  width: 600px; 
  margin: 1% auto;
}


.flip-card .flip-front {
  position: absolute;
  top: -5px;
  left: 0;
  height: 400px;  
  width: 600px;
}
.flip-card .flip-back {
    
  height: 400px;  
  width: 600px;
}


.flip-card {
  height: 350px;

  -webkit-transform:translate3d(0, 0, 100px);
  -webkit-transform: translateZ(0);
  transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transition: all ease 0.2s;
  -moz-transition: all ease 0.2s;
  -webkit-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
  -ms-transition: all ease 0.2s;
}
.flipped {

  -webkit-transform:translate3d(0, 0, 400px);
  -webkit-transform: translateZ(0);
  transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
}
.flipped-back {

  -webkit-transform:translate3d(0, 0, 400px);
  -webkit-transform: translateZ(0);
  transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
}

.card-text-sm {
    display:inline-block;
    width:45%;
}
.card-text-lg {
    display:inline-block;
    width:95%;
}