/* 
++++++++++++++++
 */
.card {
  -webkit-perspective: 150rem;
          perspective: 150rem;
  -moz-perspective: 150rem;
  position: relative;
  height: 13.5em;
}

.card__side {
  height: 13.5em;
  -webkit-transition: all 0.8s ease;
  transition: all 0.8s ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
  
  
  top: 0;
  left: 0;
  width: 100%;

  border-radius: 12px;


   border:#ccdedc 0px solid;
   
   
   background:#fff;
   
   
   color:#333;
   
   filter:progid:DXImageTransform.Microsoft.Shadow(color=#cacaca,direction=120,strength=4);
   -moz-box-shadow: 2px 2px 10px #cacaca;
   -webkit-box-shadow: 2px 2px 10px #cacaca;
   box-shadow:2px 2px 10px #cacaca;
   
   
   
}


.card__side--back {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}



.card:hover .card__side--front-1

 {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card:hover .card__side--back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}




/* 
++++++++++++++++
 */