@charset "utf8";

.card {
position: relative;
float: left;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
width: 200px;
height: 295;
margin: 0 8 8 auto;
text-align: center;
border-radius: 25px;
overflow:hidden;
}

.card .button {
border: none;
outline: 0;
padding: 5px;
color: white;
background-color: lightblue;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
position: absolute;
bottom: 0px;
}

.card .button:hover {opacity: 0.7;}

.flip-card {
position: relative;
background-color: transparent;
perspective: 1000px;
}

.flip-card .text1 {
position: absolute;
bottom: 0;
width: 100%;
background-image: linear-gradient(rgba(200,200,255,0), rgba(200,200,255,1));
color: black;
padding: 1px;
text-shadow: 2px 2px 3px rgb(255 255 255 / 80%);
}

.flip-card img {vertical-align: middle;}

.flip-card-inner {
width: 100%;
height: 200px;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
/*box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);*/
}

.flip-card:hover .flip-card-inner {transform: rotateY(180deg);}

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

.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
/*height: 100%;*/
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

@media screen and (max-width: 600px) {
.card {width: 160px;height: 260px;border-radius: 10px;margin: 0 5 5 auto;}
.flip-card-inner {height: 160px;}
}