/*For Use index page  <div class="flip-card"> */
.flip-card {
  background-color: transparent;
  width: 190px;
  height: 200px;
  perspective:1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 2px 3px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
	position: absolute;
	width: 95%;
	height: 95%;


  -webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	left: 2px;
	top: -2px;
}
.flip-card-front, .flip-card-backm {
	position: absolute;
	width: 92%;
	height: 92%;


  -webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	left: 2px;
	top: -2px;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color:#FFFFFF;
  transform: rotateY(180deg);
  text-align:justify;
}

.flip-card-backm {
  background-color:#004F4F;
  color:#FF0000;
  transform: rotateY(180deg);
  text-align:justify;
}

 /*------------------------------------------------------------------*/
 /*flip box*/
 
.flip-box {
  background-color: transparent;
  width: 130px;
  height: 100px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateX(180deg);
}

.flip-box-front, .flip-box-back {
	position: absolute;
	width: 100%;
	height: 100%;


  -webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	left: 2px;
	top: -4px;
}

.flip-box-front {
  background-color: #bbb;
  color: black;
}

.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateX(180deg);
}