/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
	}

/*

.flip-container, .front, .back {
	width: 320px;
	height: 480px;
}
*/

/* flip speed goes here */
.flipper {
	transition: all 0.9s ease-in-out;
	transform-style: preserve-3d;
    

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}



/*--------------------------------------------------------------------------Addition Card style------------------*/


.front-answer-style {
    
    background-color:#fff;
    width: inherit;
    height: inherit;
    border: 1px solid limegreen;
    
}


.number-card-style {
    
    width: inherit;
    height: inherit;
  
}

.asnwer-back-style {
    font-size: 10rem;
    color: #ffffff;
    background-color: limegreen;
    height: 
    
}

.number-cards {
	width:100% ;
	height: 12rem;
	text-align: center;
	border-radius: 6px;
}


.number-cards-back {
	width:100% ;
	height: 10rem;
	text-align: center;
	border-radius: 6px;
}