/* entire container, keeps perspective */

.flip-container {
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    box-shadow: inset 0px 0px 1px rgba(255, 255, 255, 0.3);
}

/*  flip the pane when clicked */

.flip .back {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
.flip .front {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
    width: 100%;
    height: 100%;
}

/* flip speed goes here */

.flipper {
    height: 100%;
    -webkit-transition: 0.6s;
    transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative;
}

/* hide back of pane during swap */

.front,
.back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.6s;
    transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

/*  UPDATED! front pane, placed above back */

.front {
    font-size: 4em;
    text-shadow: rgba(255, 255, 255, 0.05) .01em .01em 0, rgba(255, 255, 255, 0.05) .02em .02em 0, rgba(255, 255, 255, 0.05) .03em .03em 0, rgba(255, 255, 255, 0.05) .04em .04em 0, rgba(255, 255, 255, 0.05) .05em .05em 0, rgba(255, 255, 255, 0.05) .06em .06em 0, rgba(255, 255, 255, 0.05) .07em .07em 0, rgba(255, 255, 255, 0.05) .08em .08em 0, rgba(255, 255, 255, 0.05) .09em .09em 0, rgba(255, 255, 255, 0.05) .1em .1em 0;
    color: rgba(255, 255, 255, 0.7);
    z-index: 2;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    background: -webkit-linear-gradient(315deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#0dffffff', endColorstr='#33000000', GradientType=1);
}

/* back, initially hidden pane */

.back {
    background: #d9d9d9;
    background-position: center;
    background-size: cover;
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    box-shadow: inset 2px 2px 1px rgba(0, 0, 0, 0.12);
}
.alert {
    width: 100%;
    color: #fff;
    text-align: center;
    margin-top: -40px;
}