.produtos-grid {
display: flex;
flex-wrap: wrap;
margin: 0 -10px; }
.produto-item {
width: calc(25% - 20px); margin: 10px; padding: 25px 0;
background: linear-gradient(180deg, rgb(0 0 0 / 2%) 47.8%, rgb(0 0 0 / 21%) 99.92%); position: relative;
}
.produto-item:hover {
background: linear-gradient(
180deg,
rgba(213, 186, 142, 0) 47.8%,
rgba(0, 0, 0, 0.47) 99.92%
);
}
.produto-item svg {
position: absolute;
right: 15px;
width: 25px;
top: 0;
}
.produto-imagem {
width: 100%; height: 300px; background-size: contain; background-position: center; background-repeat: no-repeat;
z-index: -1;
position: relative;
}
@media (max-width: 1366px) {
.produto-item {
width: calc(33.33% - 20px); }
}
@media (max-width: 1200px) {
.left-sidebar {
width: 29% !important;
}
.post-area {
width: 69% !important;
}
.produto-item {
width: calc(50% - 20px); }
}
@media (max-width: 768px) {
.left-sidebar {
width: 29% !important;
}
.post-area {
width: 69% !important;
}
.produto-item {
width: 100%;
} }
@media (max-width: 480px) {
.left-sidebar,
.post-area {
width: 100% !important;
}
.produto-item {
width: 100%; }
} .left-sidebar {
width: 20%; }
.post-area {
width: 80%; margin-right: 0 !important;
}
.post-area.span_12 {
width: 100% !important; } #loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(0, 0, 0, 0.5);
display: flex; justify-content: center; align-items: center; z-index: 9999; } .loading-circle {
border: 8px solid rgba(255, 255, 255, 0.3);
border-top: 8px solid #fff; border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite; margin: 0; }
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.subcategory label {
font-size: 12px;
line-height: 12px;
color: #000000;
}
.produto-item p {
font-size: 16px;
margin-top: 15px;
padding: 0 25px;
color: #000;
font-family: "Playfair Display";
font-style: normal;
font-weight: 400;
line-height: 26px; letter-spacing: 0.4px;
text-align: center;
}
li.subcategory {
padding: 0 !important;
}
#toggle-filters,
#reset-filters {
border: 2px solid #000;
max-width: 200px;
text-align: center;
text-transform: uppercase;
padding: 5px;
cursor: pointer;
font-weight: bold;
color: #000;
font-size: 14px;
border-radius: 40px;
}
#toggle-filters:hover,
#reset-filters:hover {
border: 2px solid #000;
color: #fff;
background-color: #000;
}
.show-more {
font-weight: bold;
font-size: 12px;
cursor: pointer;
color: #000000;
}
input[type="checkbox"] { -webkit-appearance: none; appearance: none; background-color: var(--form-background); margin: 0;
font: inherit;
color: #000000;
width: 1.15em;
height: 1.15em;
border: 0.15em solid #000000;
transform: translateY(5px);
display: grid;
place-content: center;
float: left;
margin-right: 5px;
cursor: pointer;
}
input[type="checkbox"]::before {
content: "";
width: 0.65em;
height: 0.65em;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
transform: scale(0);
transform-origin: bottom left;
transition: 120ms transform ease-in-out;
box-shadow: inset 1em 1em var(--form-control-color); background-color: #000000;
}
input[type="checkbox"]:checked::before {
transform: scale(1);
}
input[type="checkbox"]:disabled {
--form-control-color: var(--form-control-disabled);
color: var(--form-control-disabled);
cursor: not-allowed;
}
.marca-item {
width: calc(25% - 20px); margin: 10px;
position: relative; overflow: hidden;
}
.marca-item a {
display: block;
height: 350px; background-size: cover;
background-position: center;
color: #fff; text-decoration: none; text-align: center;
position: relative; }
.marca-regiao {
position: absolute; top: 5%; left: 50%;
transform: translateX(-50%); color: #fff;
font-family: "Poppins";
font-style: normal;
font-weight: 600;
line-height: 26px;
letter-spacing: 0.4px;
font-size: 16px;
width: 85%;
}
.marca-title {
position: absolute; bottom: 20%; left: 50%;
transform: translateX(-50%); color: #fff;
font-family: "Playfair Display";
font-style: normal;
font-weight: 400;
line-height: 36px;
letter-spacing: 0.4px;
font-size: 26px;
width: 85%;
}
.marca-bg {
height: 100%;
width: 100%; background: rgb(0 0 0 / 30%);
}
.marca-item svg {
position: absolute;
right: 15px;
width: 40px;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
}
@media (max-width: 1200px) {
.marca-item {
width: calc(33.33% - 20px); }
}
@media (max-width: 768px) {
.page-1524 .full-width-section .row-bg,
.wpb_row .row-bg {
display: none;
}
.marca-item {
width: calc(50% - 20px); }
}
@media (max-width: 480px) {
.page-1524 .full-width-section .row-bg,
.wpb_row .row-bg {
display: none;
}
.marca-item {
width: 100%; margin: 10px 0;
}
}