/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 26.11.2015, 17:17:57
    Author     : ralph.klepper
*/

/* FLIPPING CARDS */

.flip-cards {
	position: relative;
	width: 100%;
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 0.6s;
    -moz-transition: 0.6s;
 /*   -moz-transform: perspective(1000px);*/
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transition: 0.6s;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;


    -webkit-backface-visibility: hidden;
     backface-visibility: hidden;

    -webkit-transform:translate3d(0,0,0);
/*    -webkit-perspective: 1000;
        -ms-perspective: 1000;  
            perspective: 1000;*/
}


.front-card > img, .front-card > div, .reverse-card > img {
	-webkit-backface-visibility: hidden;
	
}

.flip-cards:hover .reverse-card {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
}

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

.flip-container .front-card,
.flip-container .reverse-card {
    height: 100%;
    width: 100%;
    position: relative;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateY(0deg);
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
    -moz-transform: rotateY(0deg);
    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;
    -o-transform: rotateY(0deg);
    -ms-transition: 0.6s;
    -ms-transform-style: preserve-3d;
    -ms-transform: rotateY(0deg);
    transition: 0.6s;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);


    -webkit-transform:translate3d(0,0,0);
}

.flip-container .front-card {
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    z-index: 2;

}

.flip-container .reverse-card {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    position: absolute;
    top: 0;
    z-index: 3;
    text-align: center;
    font-size: 13px;
    color: #676f71;
    background-color: white;
    padding: 20px;
    transition: 0.8s;
}