/*  CARD FLIP */


/*  Card  */
.card {
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.75, 0, 0.85, 1);
    -webkit-transform-style: preserve-3d; /* Fix iOS Safari */
    -webkit-transition: transform 0.8s cubic-bezier(0.75, 0, 0.85, 1); /* Fix iOS Safari */
}
.card .front, .card .back {
    /* Backface */
    backface-visibility: hidden;
    transform-style: preserve-3d;
    /* iOS Safari Fix */
    -webkit-perspective: 0;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d; 
    -webkit-transform: translate3d(0,0,0);
    visibility:visible;
    /* Mozilla Fix */
    -moz-perspective: 0;
    -moz-backface-visibility: hidden;
    -moz-transform-style: preserve-3d; 
    -moz-transform: translate3d(0,0,0);
}


/* Card Flipping */
.card .back {
	transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg); /* Fix iOS Safari */
}
.card .row {
    backface-visibility: hidden;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d; /* Fix iOS Safari */
}
.card .row.translateZ_25 {
    transform: translateZ(25px) scale(1);
    -webkit-transform: translateZ(25px) scale(1); /* Fix iOS Safari */
}
.card .row.translateZ_50 {
    transform: translateZ(50px) scale(1);
    -webkit-transform: translateZ(50px) scale(1); /* Fix iOS Safari */
}
.card .row.translateZ_75 {
    transform: translateZ(75px) scale(1);
    -webkit-transform: translateZ(75px) scale(1); /* Fix iOS Safari */
}
.card .row.translateZ_100 {
    transform: translateZ(100px) scale(1);
    -webkit-transform: translateZ(100px) scale(1); /* Fix iOS Safari */
}
.card .row.translateZ_125 {
    transform: translateZ(125px) scale(1);
    -webkit-transform: translateZ(125px) scale(1); /* Fix iOS Safari */
}
.card .row.translateZ_150 {
    transform: translateZ(150px) scale(1);
    -webkit-transform: translateZ(150px) scale(1); /* Fix iOS Safari */
}


/* Flip Trick */
.flip {
	display: none;
}
.flip:checked ~ .card {
	transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg); /* Fix iOS Safari */
}
.flip:not(:checked) ~ .card .back {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
}
.flip:checked ~ .card .front {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: rotateY(0deg); /* Fix iOS Safari */
    -webkit-transform: rotateY(0deg); /* Fix iOS Safari */
    background-color: #fff;
}


/* Flip Button Trigger */
.button {
    cursor: pointer;
    display: block;
    color: #172bf7;
    line-height: 50px;
    text-align: center;
    margin-top: 9px;
    border-radius: 10px;
    background-color: #ffffff;
    border: solid 2px #172bf7;
    transition: 150ms linear;
}
.button:hover {
    color: #fff;
    background-color: #172bf7;
}