@charset "utf8";

.card2 {
position: relative;
float: left;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
width:17%;
max-width: 150px;
height: 230px;
margin: 5 10 40 10;
text-align: center;
border-radius: 5px;
overflow:hidden;
}

.card2a {
position: relative;
float: left;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
width:22%;
max-width: 250px;
height: 300px;
margin: 5 10 40 10;
text-align: center;
border-radius: 10px;
overflow:hidden;
}

.card2b {
position: relative;
float: left;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
width:30%;
max-width: 320px;
height: 450px;
margin: 5 10 40 10;
text-align: center;
border-radius: 10px;
overflow:hidden;
}

.card2c {
position: relative;
float: left;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
width:46%;
max-width: 500px;
height: 520px;
margin: 5 10 40 10;
text-align: center;
border-radius: 10px;
overflow:hidden;
}

.card2d {
position: relative;
float: left;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
width: 97%;
max-width: 800px;
height: 680px;
margin: 5 10 40 10;
text-align: center;
border-radius: 10px;
overflow:hidden;
}

.card2 .button {
border: none;
outline: 0;
padding: 3px;
color: blue;
opacity: 0.8;
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: blue;
opacity: 0.8;
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: blue;
opacity: 0.8;
background-color: lightgreen;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 12px;
position: absolute;
bottom: 0px;
}

.card2c .button {
border: none;
outline: 0;
padding: 3px;
color: blue;
opacity: 0.8;
background-color: lightgreen;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 16px;
position: absolute;
bottom: 0px;
}

.card2d .button {
border: none;
outline: 0;
padding: 3px;
color: blue;
opacity: 0.8;
background-color: lightgreen;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
position: absolute;
bottom: 0px;
}

.card2 .button:hover {
opacity: 1;
background-color: lightyellow;
}

.card2a .button:hover {
opacity: 1;
background-color: lightyellow;
}

.card2b .button:hover {
opacity: 1;
background-color: lightyellow;
}

.card2c .button:hover {
opacity: 1;
background-color: lightyellow;
}

.card2d .button:hover {
opacity: 1;
background-color: lightyellow;
}

.card2 .prdname {
color: #8374d3;
font-size: 14px;
margin: 3 0 3 0;
font-family: math;
margin-block-start:0px;
margin-block-end:0px;
}

.card2a .prdname {
color: #8374d3;
font-size: 16px;
margin: 3 0 3 0;
font-family: math;
margin-block-start:0px;
margin-block-end:0px;
}

.card2b .prdname {
color: #8374d3;
font-size: 18px;
margin: 3 0 3 0;
font-family: math;
margin-block-start:0px;
margin-block-end:0px;
}

.card2c .prdname {
color: #8374d3;
font-size: 20px;
margin: 3 0 3 0;
font-family: math;
margin-block-start:0px;
margin-block-end:0px;
}

.card2d .prdname {
color: #8374d3;
font-size: 24px;
margin: 3 0 3 0;
font-family: math;
margin-block-start:0px;
margin-block-end:0px;
}

.card2 .price {
color: green;
font-size: 10px;
margin: 3 0 3 0 ;
font-family: cursive;
margin-block-start:0px;
margin-block-end:0px;
}

.card2a .price {
color: green;
font-size: 12px;
margin: 3 0 3 0 ;
font-family: cursive;
margin-block-start:0px;
margin-block-end:0px;
}

.card2b .price {
color: green;
font-size: 14px;
margin: 3 0 3 0 ;
font-family: cursive;
margin-block-start:0px;
margin-block-end:0px;
}

.card2c .price {
color: green;
font-size: 16px;
margin: 3 0 3 0 ;
font-family: cursive;
margin-block-start:0px;
margin-block-end:0px;
}

.card2d .price {
color: green;
font-size: 18px;
margin: 3 0 3 0 ;
font-family: cursive;
margin-block-start:0px;
margin-block-end:0px;
}

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

.flip-card2 {
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-inner {
width: 100%;
height: 70%;
transition: transform 0.6s;
transform-style: preserve-3d;
}

.flip-card-inner2 {
width: 100%;
height: 70%;
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: 170px;border-radius: 5px;font-size: small;margin: 2 2 2 2;}
.card2a {height: 180px;border-radius: 5px;font-size: small;margin: 3 3 3 3;}
.card2b {height: 230px;border-radius: 5px;font-size: small;margin: 5 5 5 5;}
.card2c {height: 280px;border-radius: 5px;font-size: small;margin: 5 5 5 5;}
.card2d {height: 400;border-radius: 5px;font-size: small;margin: 5 5 5 5;}
.card2 .prdname {font-size: 10px;}
.card2a .prdname {font-size: 12px;}
.card2b .prdname {font-size: 14px;}
.card2c .prdname {font-size: 16px;}
.card2d .prdname {font-size: 18px;}
}

.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;
}
}