a:link{
text-decoration: none;
}
.productCardContainer{
padding: 5px;
}
.productCardContent{
position: relative;
overflow: hidden;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 3px solid #2a4185;
background: #0050a0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.productCardContent .productCardImage{
height: 200px;
position: relative;
overflow: hidden;
}
.productCardContent .productCardImage img{
position: relative;
display: block;
min-height: 200px;
min-width: 100%;
max-width: 100%;
opacity: 1;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1.15);
transform: scale(1.15);
}
.productCardContent:hover .productCardImage img{
opacity: 0.8;
-webkit-transform: scale(1);
transform: scale(1);
}
.productCardContent .productCardImage .imageCardEffect{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 30px 10px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
text-indent: 9999px;
}
.productCardContent .productCardImage .imageCardEffect::before,
.productCardContent .productCardImage .imageCardEffect::after{
pointer-events: none;
}
.productCardContent .productCardImage .imageCardEffect::before{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.5);
content: '';
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
-webkit-transform: rotate(45deg) scale(2) translate(0px, -100%);
-moz-transform: rotate(45deg) scale(2) translate(0px, -100%);
-o-transform: rotate(45deg) scale(2) translate(0px, -100%);
-ms-transform: rotate(45deg) scale(2) translate(0px, -100%);
transform: rotate(45deg) scale(2.5) translate(0px, -100%);
}
.productCardContent:hover .productCardImage .imageCardEffect::before {
-webkit-transform: rotate(45deg) scale(2) translate(0px, 100%);
-moz-transform: rotate(45deg) scale(2) translate(0px, 100%);
-o-transform: rotate(45deg) scale(2) translate(0px, 100%);
-ms-transform: rotate(45deg) scale(2) translate(0px, 100%);
transform: rotate(45deg) scale(2.5) translate(0px, 100%);
}
/*======================== Card Details Style */
.productCardDetails{
position: relative;
overflow: hidden;
background: #FFFFFF;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.productCardDetails .productCardModel{
position: relative;
overflow: hidden;
text-align: center;
padding: 20px 20px 10px 20px;
}
.productCardDetails .productCardModel a:link, .productCardDetails .productCardModel .accessoryDesc{
color: #2a4185;
position: relative;
font-size: 20px;
font-weight: bold;
margin: 0;
padding: 0;
display: block;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.productCardDetails .productCardModel a span, .productCardDetails .productCardModel .accessoryDesc span{
font-size: 18px;
display: block;
}
.productCardDetails .productCardModel a span b, .productCardDetails .productCardModel .accessoryDesc span b{
font-size: 12px;
font-weight: normal;
}
.productCardContent:hover .productCardDetails .productCardModel a, .productCardContent:hover .productCardDetails .productCardModel .accessoryDesc{
color: #e65059;
}
.modelCardEffect{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.productCardContent .productCardDetails .modelCardEffect::before{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #2a4185;
content: '';
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
-webkit-transform: skew(40deg, 0deg) translate(-150%, 0px);
-moz-transform: skew(40deg, 0deg) translate(-150%, 0px);
-o-transform: skew(40deg, 0deg) translate(-150%, 0px);
-ms-transform: skew(40deg, 0deg) translate(-150%, 0px);
transform: skew(40deg, 0deg) translate(-150%, 0px);
}
.productCardContent:hover .productCardDetails .modelCardEffect::before {
-webkit-transform: skew(0deg, 0deg) translate(0%, 0px);
-moz-transform: skew(0deg, 0deg) translate(0%, 0px);
-o-transform: skew(0deg, 0deg) translate(0%, 0px);
-ms-transform: skew(0deg, 0deg) translate(0%, 0px);
transform: skew(0deg, 0deg) translate(0%, 0px);
}
.productCardContent .productCardDetails .productCardDetailsList {
position: relative;
height: 150px;
}
.productCardContent .productCardDetails .productCardDetailsList .list-group{
margin-bottom: 0!important;
}
.productCardContent .productCardDetails .productCardDetailsList .list-group .list-group-item{
color: #2a4185 !important;
}
.productCardContent .productCardDetails .productCardDetailsList .list-group .list-group-item .detailIcon{
position: relative;
width: 40px;
padding-left: 10px;
display: table-cell;
vertical-align: middle;
font-size: 25px;
}
.productCardContent .productCardDetails .productCardDetailsList .list-group .list-group-item .detailInfo{
display: table-cell;
vertical-align: middle;
}
.productCardContent .productCardDetails .accessoryCardDetailsList {
position: relative;
height: 50px;
}
.productCardContent .productCardDetails .accessoryCardDetailsList .list-group{
margin-bottom: 0!important;
}
.productCardContent .productCardDetails .accessoryCardDetailsList .list-group .list-group-item{
color: #2a4185 !important;
}
.productCardContent .productCardDetails .accessoryCardDetailsList .list-group .list-group-item .detailIcon{
position: relative;
width: 40px;
padding-left: 10px;
display: table-cell;
vertical-align: middle;
font-size: 25px;
}
.productCardContent .productCardDetails .accessoryCardDetailsList .list-group .list-group-item .detailInfo{
display: table-cell;
vertical-align: middle;
}
.productCardContent .productCardPrice{
position: relative;
text-align: center;
}
.productCardContent .productCardPrice a, .productCardContent .productCardPrice button{
border: none !important;
width: 40%;
margin: 4% !important;
padding: 0 !important;
text-align: center;
line-height: 35px;
background: transparent;
color: #2a4185;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
.productCardContent:hover .productCardPrice a, .productCardContent:hover .productCardPrice button {
background: #2a4185;
color: #e65059;
}
.productCardPrice a:hover, .productCardPrice a:focus, .productCardPrice a:hover, .productCardPrice button:focus{
background: #e65059;
color: #2a4185;
}
.productCardContent .productCardPrice .inCart, .productCardPrice .inCart:focus{
color: #2a4185 !important;
background: #81c868 !important;
}
.accessoryAdminCard{
background: #FFFFFF;
padding: 10px;
}