.card-container {
display: inline;
/*margin: 0 auto;
padding: 0 12px;*/
perspective: 900px;
text-align: center;
min-width: 100%;
min-height: 300px;
background-color: red;


}
.card {
position: relative;
min-width: 100%;
min-height: 300px;
transition: all 0.6s ease;
transform-style: preserve-3d;
margin: 15px auto;

}





.front, .back {
position: absolute;
background: #24496a;
/*top: 0;
left: 0;*/
min-width: 100%;
min-height: 100%;
border-radius: 5px;
color: white;
box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15);
backface-visibility: hidden;
}
.front {
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
min-width: 100%;
min-height: 100%;
}
.back {
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
//background: url(../images/trav.png)no-repeat center;
//margin-left: -25px;
min-width: 100%;
min-height: 100%;
}






.card-container:hover .card {
transform: rotateY(180deg);
}
.back {
transform: rotateY(180deg);