.card-container{
	width: 100%; 
	height: 40vh;
	perspective: 200rem;
	
}

.card-container:hover .card-front{
	transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
	
}


.card-container:hover .card-back{
	transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
	
}

.card-back{
	transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
	
}

.card{
	position: absolute;
transition: all 0.9s;
backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
}


.card-containerh{
	width: 100%; 
	height: 40vh;
	perspective: 200rem;
	
}

.card-containerh:hover .card-fronth{
	transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
}


.card-containerh:hover .card-backh{
	transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
  -webkit-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
	
}

.card-backh{
	transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
}

.cardh{
	position: absolute;
transition: all 0.9s;
backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
}