.electron-woo-banner-wrapper {
position: relative;
overflow: hidden;
display: block;
}
.electron-woo-banner-wrapper .electron-widget-label {
padding: 5px 15px;
}
.electron-woo-banner-wrapper .label-border {
background-color: transparent;
border-width: 1px;
border-style: solid;
color: var(--electron-dark);
}
.electron-woo-banner-wrapper .label-border {
background-color: transparent;
border-width: 1px;
border-style: solid;
color: var(--electron-dark);
}
.electron-woo-banner-wrapper .electron-label-primary {
color: var(--electron-primary);
}
.electron-woo-banner-wrapper .electron-label-dark {
color: var(--electron-dark);
}
.electron-woo-banner-wrapper .electron-label-gray {
border-color: var(--electron-gray);
color: var(--electron-dark);
}
.electron-woo-banner-wrapper .electron-label-gray-soft {
border-color: var(--electron-gray-soft);
color: var(--electron-dark);
}
.electron-woo-banner-wrapper .electron-label-green {
border-color: var(--electron-green);
color: var(--electron-green);
}
.electron-woo-banner-wrapper .electron-label-brown {
border-color: var(--electron-brown);
color: var(--electron-brown);
}
.electron-woo-banner-wrapper .electron-label-red {
border-color: var(--electron-red);
color: var(--electron-red);
}
.electron-woo-banner-wrapper .electron-label-blue {
border-color: var(--electron-blue);
color: var(--electron-blue);
}
.electron-woo-banner-wrapper .electron-label-blue-dark {
border-color: var(--electron-blue-dark);
color: var(--electron-blue-dark);
}
.electron-woo-banner-wrapper .electron-label-blue-soft {
border-color: var(--electron-blue-soft);
color: var(--electron-blue-soft);
}
.electron-woo-banner-wrapper .electron-label-purple {
border-color: var(--electron-purple);
color: var(--electron-purple);
}
.electron-woo-banner-wrapper .electron-label-yellow {
border-color: var(--electron-yellow);
color: var(--electron-yellow);
}
.electron-woo-banner-wrapper .electron-label-yellow-soft {
border-color: var(--electron-yellow-soft);
color: var(--electron-yellow-soft);
}
.electron-woo-banner-wrapper .label-solid.electron-label-primary {
background-color: var(--electron-primary);
color: var(--electron-light);
}
.electron-woo-banner-wrapper .label-solid.electron-label-dark {
background-color: var(--electron-dark);
color: var(--electron-light);
}
.electron-woo-banner-wrapper .label-solid.electron-label-gray {
background-color: var(--electron-gray);
color: var(--electron-dark);
}
.electron-woo-banner-wrapper .label-solid.electron-label-gray-soft {
background-color: var(--electron-gray-soft);
color: var(--electron-dark);
}
.electron-woo-banner-wrapper .label-solid.electron-label-green {
background-color: var(--electron-green);
color: var(--electron-light);
}
.electron-woo-banner-wrapper .label-solid.electron-label-brown {
background-color: var(--electron-brown);
color: var(--electron-dark);
}
.electron-woo-banner-wrapper .label-solid.electron-label-red {
background-color: var(--electron-red);
color: var(--electron-light);
}
.electron-woo-banner-wrapper .label-solid.electron-label-blue {
background-color: var(--electron-blue);
color: var(--electron-light);
}
.electron-woo-banner-wrapper .label-solid.electron-label-blue-dark {
background-color: var(--electron-blue-dark);
color: var(--electron-light);
}
.electron-woo-banner-wrapper .label-solid.electron-label-blue-soft {
background-color: var(--electron-blue-soft);
color: var(--electron-blue-dark);
}
.electron-woo-banner-wrapper .label-solid.electron-label-purple {
background-color: var(--electron-purple);
color: var(--electron-light);
}
.electron-woo-banner-wrapper .label-solid.electron-label-yellow {
background-color: var(--electron-yellow);
color: var(--electron-dark);
}
.electron-woo-banner-wrapper .label-solid.electron-label-yellow-soft {
background-color: var(--electron-yellow-soft);
color: var(--electron-yellow);
}
.electron-banner-content-top,
.electron-banner-content-bottom {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
align-items: flex-start;
}
.electron-woo-banner-wrapper .electron-banner-price {
font-size: 24px;
color: var(--electron-red);
}
.elementor-widget-electron-woo-banner {
height: 100%;
}
.electron-woo-banner-wrapper.banner-style-card {
height: 100%;
}
.banner-style-card.banner-style2 .electron-banner-content .electron-banner-content-top,
.banner-style-card.banner-style2 .electron-banner-content .electron-banner-content-bottom,
.banner-style-card-hover.banner-style2 .electron-banner-content .electron-banner-content-top,
.banner-style-card-hover.banner-style2 .electron-banner-content .electron-banner-content-bottom {
display: flex;
align-content: flex-start;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
}
.banner-style-card.banner-style2 .label-trans,
.banner-style-card.banner-style2 .electron-banner-title,
.banner-style-card.banner-style2 .electron-banner-desc,
.banner-style-card.banner-style2 .electron-banner-catcount,
.banner-style-card-hover.banner-style2  .label-trans,
.banner-style-card-hover.banner-style2  .electron-banner-title,
.banner-style-card-hover.banner-style2  .electron-banner-desc,
.banner-style-card-hover.banner-style2  .electron-banner-catcount {
background-color: #00000036;
border-radius: 5px;
padding: 5px 10px;
}
.banner-style-card-hover.banner-style2:hover  .label-trans,
.banner-style-card-hover.banner-style2:hover  .electron-banner-title,
.banner-style-card-hover.banner-style2:hover  .electron-banner-desc,
.banner-style-card-hover.banner-style2:hover  .electron-banner-catcount,
.banner-style-card-hover.banner-style2:hover .electron-banner-content-bottom {
border-radius: 5px;
}
.banner-style-card.banner-style2 .electron-banner-button,
.banner-style-card-hover.banner-style2 .electron-banner-button,
.banner-style-card-hover.banner-style2 .electron-banner-button {
background-color: #00000036;
border-radius: 5px;
}
.banner-style-card.banner-style3 .electron-banner-content-top,
.banner-style-card.banner-style3 .electron-banner-content-bottom,
.banner-style-card-hover.banner-style3 .electron-banner-content-top,
.banner-style-card-hover.banner-style3 .electron-banner-content-bottom,
.banner-style-card-hover.banner-style5 .electron-banner-content-top,
.banner-style-card-hover.banner-style5 .electron-banner-content-bottom {
background-color: #00000036;
border-radius: 5px;
padding: 20px;
}
.banner-style-card-hover.banner-style5 .electron-banner-content-top,
.banner-style-card.banner-style4 .electron-banner-button,
.banner-style-card-hover.banner-style5 .electron-banner-content-bottom {
background-color: var(--electron-primary);
}
.banner-style-card.banner-style4 .electron-banner-content-top ,
.banner-style-card.banner-style4 .electron-banner-content-bottom,
.banner-style-card-hover.banner-style4 .electron-banner-content-top ,
.banner-style-card-hover.banner-style4 .electron-banner-content-bottom {
border: 2px solid;
border-color: #ffffff36;
border-radius: 5px;
padding: 20px;
}
.banner-style-card-hover.banner-style3 .electron-banner-content-top,
.banner-style-card-hover.banner-style3 .electron-banner-content-bottom,
.banner-style-card-hover.banner-style4 .electron-banner-content-top,
.banner-style-card-hover.banner-style4 .electron-banner-content-bottom,
.banner-style-card-hover.banner-style5 .electron-banner-content-top,
.banner-style-card-hover.banner-style5 .electron-banner-content-bottom {
opacity:0;
}
.banner-style-card-hover.banner-style3:hover .electron-banner-content-top,
.banner-style-card-hover.banner-style3:hover .electron-banner-content-bottom,
.banner-style-card-hover.banner-style4:hover .electron-banner-content-top,
.banner-style-card-hover.banner-style4:hover .electron-banner-content-bottom,
.banner-style-card-hover.banner-style5:hover .electron-banner-content-top,
.banner-style-card-hover.banner-style5:hover .electron-banner-content-bottom {
opacity:1;
}
.banner-style-card.banner-style3:hover .electron-banner-content-top,
.banner-style-card.banner-style3:hover .electron-banner-content-bottom {
background-color: #333;
border-radius: 5px;
padding: 20px;
}
.banner-style-card.banner-style3 .electron-banner-button,
.banner-style-card-hover.banner-style3 .electron-banner-button,
.banner-style-card-hover.banner-style4 .electron-banner-button,
.banner-style-card.banner-style5 .electron-banner-button,
.banner-style-card-hover.banner-style5 .electron-banner-button,
.banner-style-card.banner-style3 .electron-banner-button,
.banner-style-card.banner-style3 .electron-banner-button,
.banner-style-classic.banner-style5 .electron-banner-button,
.banner-style-classic.banner-style5 .electron-banner-button {
padding: 0 0 5px;
}
.electron-woo-banner-wrapper.banner-style-classic .electron-banner-image:before,
.electron-woo-banner-wrapper:not(.banner-style-classic):before {
content: "";
background-color: rgba(57, 57, 58, 0.34);
z-index: 1;
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
}
.electron-woo-banner-wrapper .electron-banner-link {
z-index: 3;
}
.electron-woo-banner-wrapper .electron-banner-image {
position: relative;
overflow: hidden;
display: block;
padding-top: 75%;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
.electron-woo-banner-wrapper.banner-style-card.full-height .electron-banner-image {
padding-top: 0;
height: 100%;
}
.electron-woo-banner-wrapper:before,
.electron-woo-banner-wrapper .electron-banner-link,
.electron-woo-banner-wrapper:not(.type-bg) .electron-banner-content,
.electron-woo-banner-wrapper img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.electron-woo-banner-wrapper img {
min-height: 100%;
object-fit: cover;
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
}
.electron-woo-banner-wrapper {
min-width: 100%;
height: 100%;
}
.electron-woo-banner-wrapper:hover img {
transform: scale(1.2);
}
.electron-woo-banner-wrapper .electron-banner-content {
padding: 30px;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.electron-woo-banner-wrapper.type-bg .electron-banner-content {
height: 100%;
}
.electron-woo-banner-wrapper:not(.banner-style-classic) .electron-banner-content,
.electron-woo-banner-wrapper:not(.banner-style-classic) .electron-banner-title {
color:var(--electron-light);
}
.electron-woo-banner-wrapper .electron-banner-title {
margin: 0;
}
.electron-woo-banner-wrapper .banner-content-item {
display: block;
margin: 0;
line-height: 1.4;
}
.electron-woo-banner-wrapper .electron-banner-button {
display: inline-flex;
align-items: center;
padding: 10px 15px;
color: var(--electron-light);
background-color: var(--electron-dark);
gap: 14px;
}
.electron-banner-button.icon-before {
flex-direction: row-reverse;
}
.electron-woo-banner-wrapper .electron-banner-catname {
display: inline-flex;
}
.electron-woo-banner-wrapper .label-trans {
background-color: transparent;
padding: 0;
}
.banner-style-classic.banner-style3 {
border: 1px solid;
border-top: 0;
border-color: var(--electron-border);;
}
.banner-style-classic.banner-style2 {
background-color: var(--electron-gray-soft);
}
.banner-style-classic.electron-woo-banner-wrapper .label-trans {
color: var(--electron-dark);
}
.electron-woo-banner-wrapper.banner-style-classic {
overflow: auto;
height: auto;
}
.banner-style-classic.banner-style4 .electron-banner-content {
padding: 20px 0 0;
}
.banner-style-classic.banner-style5 .electron-banner-content {
background-color: var(--electron-primary);
}
.banner-style-classic.banner-style5 .label-trans,
.banner-style-classic.banner-style5 .electron-banner-title,
.banner-style-classic.banner-style5 .electron-banner-desc,
.banner-style-classic.banner-style5 .electron-banner-catcount {
color: var(--electron-light);
}
.electron-woo-banner-wrapper .banner-content-item+.banner-content-item {
margin-top: 15px;
}
.electron-woo-banner-wrapper .banner-content-item svg {
width: 1.5em;
height: 1.5em;
fill: currentColor;
}
.electron-woo-banner-wrapper .banner-content-item * {
fill: currentColor;
}
.electron-woo-banner-wrapper.banner-radius-soft {
border-radius: 5px;
}
.electron-woo-banner-wrapper.banner-radius {
border-radius: 30px;
}
.electron-woo-banner-wrapper.banner-style-card-hover .electron-banner-content .banner-content-item {
opacity: 0;
-ms-transform: translateY(20px);
-webkit-transform: translateY(20px);
transform: translateY(20px);
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
}
.electron-woo-banner-wrapper.banner-style-card-hover:hover .electron-banner-content .banner-content-item+.banner-content-item {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.electron-woo-banner-wrapper.banner-style-card-hover:hover .electron-banner-content>div>* {
opacity: 1;
-ms-transform: translateY(0px);
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.electron-woo-banner-wrapper.banner-style-classic .electron-banner-content {
position: relative;
}
.electron-woo-banner-wrapper.banner-style-classic .electron-banner-content {
position: relative;
}
.electron-woo-banner-iframe-container {
position: relative;
}
.electron-woo-banner-iframe-wrapper {
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
overflow: hidden;
z-index: 0;
direction: ltr;
-webkit-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
pointer-events: none;
}
.electron-woo-banner-iframe-wrapper iframe,
.electron-woo-banner-iframe-wrapper video {
position: absolute;
top: 50%;
left: 50%;
height: 110%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-width: none !important;
}
.shop-cat-banner-template-wrapper {
position: relative;
overflow: hidden;
} .electron-banner-default {
position: relative;
overflow: hidden;
display: block;
min-height: 360px;
padding: 30px;
border-radius: 5px;
}
.electron-banner-default .content {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
position: relative;
z-index: 2;
}
.electron-banner-default .content>* {
margin: 0;
}
.electron-banner-default .box-link {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 3;
}
.electron-banner-default .link {
cursor:pointer;
}
.electron-banner-default img {
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}
.electron-banner-default.bg-green {
background-color: #EEFFEA;
}
.electron-banner-default.bg-green .title,
.electron-banner-default.bg-green .desc,
.electron-banner-default.bg-green .link {
color: #2E8014;
}
.electron-banner-default.bg-red {
background-color: #FFEAEA;
}
.electron-banner-default.bg-red .title,
.electron-banner-default.bg-red .desc,
.electron-banner-default.bg-red .link {
color: #BB1C1C;
}
.electron-banner-default.bg-brown {
background-color: #FCEFE3;
}
.electron-banner-default.bg-brown .title,
.electron-banner-default.bg-brown .desc,
.electron-banner-default.bg-brown .link {
color: #91563A;
}
.electron-banner-default.bg-purple {
background-color: #EAEAFF;
}
.electron-banner-default.bg-purple .title,
.electron-banner-default.bg-purple .desc,
.electron-banner-default.bg-purple .link {
color: #47479B;
}
.electron-banner-default.bg-purple-soft {
background-color: #F2F4FF;
}
.electron-banner-default.bg-purple-soft .title,
.electron-banner-default.bg-purple-soft .desc,
.electron-banner-default.bg-purple-soft .link {
color: #47479B;
}
.electron-banner-content.has-bottom {
justify-content: flex-end;
}
.electron-banner-content.has-center {
justify-content: center;
}