.flip-container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
    /* width: 400px; */
}

.flipper {
    transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative;
    -webkit-transform-origin: 50% 50%;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
}

.front,
.back {
    /* width: 370px;
    height: 280px; */
    position: absolute;
    left: 0;
    top: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    border: 1px solid #D3D3D3;
    border-radius: 4px;
    width: 100%;
}

.back {
    -webkit-transform: rotateY(180deg);
    overflow: auto;
}

.back::-webkit-scrollbar {
    display: none;
}

.back {
    -ms-overflow-style: none;
}

.front {
    z-index: 2;
}

.flipper.flipped {
    -webkit-transform: rotateY( 180deg);
    -moz-transform: rotateY( 180deg);
    -o-transform: rotateY( 180deg);
    transform: rotateY( 180deg);
}


/* .flip-container:hover .flipper,
.flip-container.hover .flipper {
    -webkit-transform: rotateY(-180deg);
} */

.back p {
    text-align: justify;
    width: 96%;
    padding-left: 5px;
}