@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%;}
}

.prdcard {
position: relative;;
background: rgba(240 240 240 / 71%);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 10px;
overflow:hidden;
color: #215121;
width: 98%;
min-height:420;
padding:0;
margin: 0px auto;
}

.prdcard .right  {
position: relative;
width: 50%;
float: right;
padding:0;
}

.prdcard .left {
position: relative;
width:45%;
float: left;
text-align: left;
padding: 20px;
}

.prdcard .right .photoset {
position: absolute;
width:100%;
left:0;
top:0;
opacity: 0;
transition: 0.3s;
}

.prdcard .text1 {
padding:20px;
}

.prdcard .item {
font-size:x-small;
color:black;
}

.prdcard .prdname {
font-size:2em;
color:blueviolet;
font-weight:600;
margin: 18px 0px 10px 0px;
}

.prdcard .description {
margin-top: 14px;
font-size: 20px;
color: lightslategray;}

.prdcard .price {
font-size:24px;
color:darkblue;
}

.prdcard .stock {
font-size:12;
color:red;
}

.prdcard a {
background-color:#bebef1;
border-radius:10px;
color:white;
padding:3px;
}

.prdcard p {
margin: 5px 0px 5px 0px;
}

.photosel {
width:100%;
display: flex;
}

.photo {
width:24%;  
margin:5 5 5 5;
}

.photo img{
width:100%;    
opacity: 0.4;
transition: 0.3s;
}

.photo img:hover{
opacity: 1;
}

@media screen and (max-width: 600px) {
.prdcard {
margin:10px 0 10px 4px;
height: 100%;
}

.prdcard .left {
position: relative;
width:95%;
}

.prdcard .right {
position: relative;
float: left;
width:100%;
height:300;
top:0;
overflow: hidden;
}
}