@charset "utf8";

.card2 {
position: relative;
float: left;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
width:18%;
max-width: 100px;
height: 140px;
margin: 0 6 6 auto;
text-align: center;
border-radius: 5px;
overflow:hidden;
font-size: 10px;
}

.card2a {
position: relative;
float: left;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
max-width: 150px;
width:22%;
height: 190px;
margin: 0 7 7 auto;
text-align: center;
border-radius: 8px;
overflow:hidden;
font-size: 12px;
}

.card2b {
position: relative;
float: left;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 200px;
width:30%;
height: 240px;
margin: 0 8 8 auto;
text-align: center;
border-radius: 14px;
overflow:hidden;
}

.card2c {
position: relative;
float: left;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 250px;
height: 300px;
width:46%;
margin: 0 8 8 auto;
text-align: center;
border-radius: 16px;
overflow:hidden;
}

.card2d {
position: relative;
float: left;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
max-width: 400px;
width:97%;
height: 440px;
margin: 0 9 9 auto;
text-align: center;
border-radius: 18px;
overflow:hidden;
}

.card2 .button {
border: none;
outline: 0;
padding: 1px;
color: white;
background-color: lightgreen;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 8px;
position: absolute;
bottom: 0px;
}

.card2a .button {
border: none;
outline: 0;
padding: 3px;
color: white;
background-color: lightgreen;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 10px;
position: absolute;
bottom: 0px;
}

.card2b .button {
border: none;
outline: 0;
padding: 3px;
color: white;
background-color: lightgreen;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 12px;
position: absolute;
bottom: 0px;
}

.card2c .button {
border: none;
outline: 0;
padding: 4px;
color: white;
background-color: lightgreen;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 14px;
position: absolute;
bottom: 0px;
}

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

.card2 .button:hover {
opacity: 0.7;
background-color: green;
}

.card2a .button:hover {
opacity: 0.7;
background-color: green;
}

.card2b .button:hover {
opacity: 0.7;
background-color: green;
}

.card2c .button:hover {
opacity: 0.7;
background-color: green;
}

.card2d .button:hover {
opacity: 0.7;
background-color: green;
}

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

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

.flip-card-inner {
width: 100%;
height: 60%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card-inner2 {
width: 100%;
height: 65%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card-inner3 {
width: 100%;
height: 70%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card-inner4 {
width: 100%;
height: 75%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card-inner5 {
width: 100%;
height: 82%;
transition: transform 0.6s;
transform-style: preserve-3d;
}

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

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

@media screen and (max-width: 600px) {
.card2 {height: 120px;border-radius: 5px;font-size: 8px;margin: 2 2 2 2;}
.card2a {height: 170px;border-radius: 8px;font-size: 12px;margin: 3 3 3 3;}
.card2b {height: 180px;border-radius: 10px;font-size: 13px;margin: 4 4 4 4;}
.card2c {height: 250px;border-radius: 12px;font-size: 14px;margin: 5 5 5 5;}
.card2d {height: 400px;border-radius: 15px;font-size: 16px;margin: 6 6 6 6;}
.flip-card-inner {height: 55%;}
.flip-card-inner2 {height: 50%;}
.flip-card-inner3 {height: 65%;}
.flip-card-inner4 {height: 60%;}
.flip-card-inner5 {height: 80%;}
}

@media screen and (max-width: 420px) {
.card2 {height: 130px;border-radius: 5px;font-size: 8px;margin: 2 2 2 2;}
.card2a {height: 150px;border-radius: 8px;font-size: 9px;margin: 3 3 3 3;}
.card2b {height: 170px;border-radius: 10px;font-size: 10px;margin: 4 4 4 4;}
.card2c {height: 200px;border-radius: 12px;font-size: 12px;margin: 5 5 5 5;}
.card2d {height: 350px;border-radius: 15px;font-size: 14px;margin: 6 6 6 6;}
.flip-card-inner {height: 40%;}
.flip-card-inner2 {height: 45%;}
.flip-card-inner3 {height: 50%;}
.flip-card-inner4 {height: 65%;}
.flip-card-inner5 {height: 78%;}
}