/* Card container */
.crd-container {
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
    margin-bottom: 30px;
}
/* flip the card when hovered */
.crd-container:not(.manual-flip):hover .crd,
.crd-container.hover.manual-flip .crd{
	-webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}

.crd-container.static:hover .crd,
.crd-container.static.hover .crd {
	-webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    transform: none;
}
/* flip speed  */
.crd {
    -webkit-transition: -webkit-transform .5s;
    -moz-transition: -moz-transform .5s;
    -o-transition: -o-transform .5s;
    transition: transform .5s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
	position: relative;
}

/* hide back of card during swap */
.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #FFF;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
}

/* front card, placed on top */
.front {
	z-index: 2;
}

/* back card initially hidden */
.back {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
    z-index: 3;
}

.crd{
    background: none repeat scroll 0 0 #FFFFFF;
}
.crd-container, .front, .back {
	width: 100%;
	height: 160px;
}

.crd .content{
    background-color: rgba(0, 0, 0, 0);
}
.crd .content .main {
    height: 160px;

}
.crd .back .content .main {
    height: 160px;
        font-size: 1vw;

}
.crd-title{
    text-align: center;
}
.crd-text {
    color: white;   
    font-size: 14px;
}


/*     Fix for IE      */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .front, .back{
        -ms-backface-visibility: visible;
        backface-visibility: visible;
    }

    .back {
        visibility: hidden;
        -ms-transition: all 0.2s cubic-bezier(.92,.01,.83,.67);
    }
    .front{
        z-index: 4;
    }
    .crd-container:not(.manual-flip):hover .back,
    .crd-container.manual-flip.hover .back{
        z-index: 5;
        visibility: visible;
    }
}