.reactiveGridType-Simple {
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 100%;
margin-bottom: 40px;
}
.reactiveGridType-Simple .reactiveGridImage {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 320px;
overflow: hidden;
}
.reactiveGridType-Simple .reactiveGridImage img {
width: 100%;
height: 100%;
object-fit: cover;
}
.reactiveGridType-Simple .reactiveGridImage .overlay {
position: absolute;
width: 100%;
height: 100%;
left: 0;
opacity: 1;
visibility: visible;
z-index: 1;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-ms-align-items: center;
align-items: center;
justify-content: center;
top: 0;
transition: all 0.35s ease-in-out;
background: rgba(0, 0, 0, 0);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.reactiveGridType-Simple.reactiveCategoryGrid .reactiveGridImage .overlay {
background: rgba(27, 27, 27, 0.5);
}
.reactiveGridType-Simple .reactiveGridImage:hover .overlay {
background: rgba(0, 0, 0, 0.65);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.reactiveGridType-Simple .reactiveGridImage img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1);
-webkit-transition: all .6s ease;
-moz-transition: all .6s ease;
-ms-transition: all .6s ease;
-o-transition: all .6s ease;
transition: all .6s ease;
}
.reactiveGridType-Simple .reactiveGridImage:hover img {
transform: scale(1.2);
}
.reactiveGridType-Simple .reactiveGridImage .reactiveDate {
font-size: 12px;
font-weight: 400;
color: #fff;
z-index: 2;
text-transform: uppercase;
position: absolute;
bottom: 15px;
left: 15px;
opacity: 0;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.reactiveGridType-Simple .reactiveGridImage:hover .reactiveDate {
opacity: 1;
}
.reactiveGridType-Simple .reactiveGridImage .reactiveTitle {
font-size: 16px;
color: #fff;
font-weight: 700;
text-align: center;
margin: 0;
margin-top: 30px;
opacity: 0;
z-index: 2;
padding: 0 30px;
overflow: hidden;
position: absolute;
-webkit-transition: all .35s ease;
-moz-transition: all .35s ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
.reactiveGridType-Simple.reactiveCategoryGrid .reactiveGridImage .reactiveTitle {
opacity: 1;
margin-top: 0;
}
.reactiveGridType-Simple .reactiveGridImage:hover .reactiveTitle {
margin-top: 0;
opacity: 1;
}
.reactiveListView {
flex-wrap: wrap;
}
.reactiveListView .reactiveGridType-Simple {
flex-direction: row;
}
.reactiveListView .reactiveGridType-Simple .reactiveGridImage {
max-width: 350px;
height: auto;
}
.reactiveListView .reactiveGridType-Simple .reactiveGridContents {
width: 66.6667%;
text-align: left;
}
.reactiveListView .reactiveGridType-Simple .reactiveGridImage .addToCart {
display: none;
}
.reactiveListView .reactiveGridType-Simple .reactiveGridContents .addToCart {
background: #262729;
color: #fff;
transition: all 0.4s ease-in-out;
text-transform: uppercase;
font-size: 14px;
text-align: center;
font-weight: 400;
letter-spacing: 1px;
text-decoration: none;
display: inline-block;
padding: 10px 30px;
max-width: 160px;
margin-top: 30px;
}
.reactiveListView .reactiveGridType-Simple .reactiveGridContents .reactiveProductTitle {
margin-top: 0;
}
.reactiveGridType-Simple .reactiveGridImage {
max-width: 435px;
border: 1px solid #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
.reactiveGridType-Simple .reactiveGridContents {
width: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.reactiveGridType-Simple .reactiveGridContents .addToCart {
display: none;
}
.reactiveListView .reactiveGridType-Simple .reactiveGridContents {
padding-left: 30px;
}
.reactiveGridType-Simple .reactiveGridContents .reactiveFlex {
display: flex;
justify-content: space-between;
}
.reactiveListView .reactiveGridType-Simple .reactiveGridContents .reactiveFlex {
display: block;
}
.reactiveGridType-Simple .reactiveGridContents .reactiveFlex span {
display: block;
margin-top: 20px;
}
.reactiveListView .reactiveGridType-Simple .reactiveGridContents .reactiveFlex span {
margin-top: 0;
margin-bottom: 10px;
}
.reactiveGridType-Simple .reactiveGridContents .wooPrice {
color: #888;
margin: 0;
}
.reactiveGridType-Simple .reactiveRating {
display: none;
}
.reactiveListView .reactiveGridType-Simple .reactiveRating {
display: block;
margin-bottom: 10px;
}
.reactiveListView .reactiveGridType-Simple .woorating {
display: none;
}
.reactiveGridType-Simple .woorating {
position: absolute;
}
.reactiveGridType-Simple .date {
position: absolute;
color: #fff;
left: 10px;
bottom: 10px;
opacity: 0;
font-size: 13px;
transition: all 0.5s ease-in-out;
}
.reactiveGridType-Simple .reactiveGridImage:hover .date {
opacity: 1;
}
.reactiveListView .reactiveGridType-Simple .reactiveCar {
position: absolute;
text-align: center;
color: #fff;
padding: 20px;
opacity: 0;
padding-top: 70px;
transition: all 0.5s ease-in-out;
-webkit-font-smoothing: antialiased;
}
.reactiveGridType-Simple .reactiveGridImage:hover .reactiveCar {
opacity: 1;
padding-top: 20px;
}
@media (max-width: 560px) {
.reactiveListView .reactiveGridType-Simple {
flex-direction: column;
}
.reactiveListView .reactiveGridType-Simple .reactiveGridImage {
width: 100%;
height: auto;
}
.reactiveListView .reactiveGridType-Simple .reactiveGridContents {
padding-left: 0;
width: 100%;
text-align: center;
}
.reactiveListView .reactiveGridType-Simple .reactiveGridContents .addToCart {
max-width: 100%;
}
.reactiveListView .reactiveGridType-Simple .reactiveGridContents .reactiveProductTitle {
margin-top: 10px;
}
.reactiveGridType-Simple .reactiveGridContents .reactiveFlex {
display: block;
}
.reactiveGridType-Simple .reactiveGridContents .reactiveFlex span {
margin-top: 0;
margin-bottom: 10px;
}
}