@charset "UTF-8";
 
/* entire container, keeps perspective */
.flipContainer {
    float: left;
    position: relative;
    margin: 10px;
 
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000px;
 
    transform: perspective(1000px);
    transform-style: preserve-3d;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
}
.flipContainer, .front, .back {
    width: 90px;
    height: 90px;
}
.front, .back {
    border: 1px solid black;
}
.flipper {
    transition: 0.6s;
   
    transform: perspective(1000px);
    transform-style: preserve-3d;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
 
    position: relative;
}
/* hide back of pane during swap */
.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
 
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;
    -ms-transition: 0.6s;
    -ms-transform-style: preserve-3d;
    transition: 0.6s;
    transform-style: preserve-3d;
 
    position: absolute;
    top: 0;
    left: 0;
}
/* Added this so that no animation occurs when re-sizing cards */
.front, .back {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}
/* front pane, placed above back */
.front {
    z-index: 2;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}
.flipContainer.flip .flipper{
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

@media only screen and (max-width: 720px) {
    .flipContainer {
        margin: 7px;
    }
    .flipContainer, .front, .back {
        width: 66px;
        height: 66px;
    }
}
 
@media only screen and (max-width: 530px) {
    .flipContainer {
        margin: 4px;
    }
    .flipContainer, .front, .back {
        width: 41px;
        height: 41px;
    }
}