XylotrechusZ
h1.bwp-title-default{
font-size: 25px;
padding-top: 30px;
padding-bottom: 20px;
}
/* Block default ------------------------------------------------------------------------*/
.#{$block-selector} {
margin-bottom: $block-module-margin-bottom;
border: 0px solid $block-module-border-color;
position: relative;
padding: $block-module-padding;
.#{$block-heading-selector}{
&.separator_align_center{
.widget-arrow{
margin: 0 auto;
@include rtl-left(0);
@include rtl-right(0);
}
}
// Align right
&.separator_align_right{
.widget-arrow{
&:before{
@include rtl-left(auto);
@include rtl-right(47px);
}
&:after{
@include rtl-left(47px);
}
@include rtl-left(auto);
@include rtl-right(70px);
}
}
// Align left
&.separator_align_left{
.widget-arrow{
&:before{
@include rtl-left(-70px);
}
&:after{
@include rtl-left(47px);
}
@include rtl-left(74px);
}
}
}
.#{$block-content-selector} {
@include border-radius ($block-module-content-radius);
@include clearfix();
}
.#{$block-heading-reversed-selector}{
@include rtl-margin-right(75px);
}
/* block styles */
&.nopadding{
.#{$block-content-selector}{
padding:0;
margin: 0;
}
}
}
/* Contextual variations ------------------------------------------------------------*/
.#{$block-prefix}-theme {
@include block-variant($panel-default-border, $white, $theme-color, $panel-default-border);
}
.#{$block-prefix}-default {
@include block-variant($panel-default-border, $panel-default-text, $panel-default-heading-bg, $panel-default-border);
}
.#{$block-prefix}-primary {
@include block-variant($panel-primary-border, $panel-primary-text, $panel-primary-heading-bg, $panel-primary-border);
}
.#{$block-prefix}-success {
@include block-variant($panel-success-border, $panel-success-text, $panel-success-heading-bg, $panel-success-border);
}
.#{$block-prefix}-info {
@include block-variant($panel-info-border, $panel-info-text, $panel-info-heading-bg, $panel-info-border);
}
.#{$block-prefix}-warning {
@include block-variant($panel-warning-border, $panel-warning-text, $panel-warning-heading-bg, $panel-warning-border);
}
.#{$block-prefix}-danger {
@include block-variant($panel-danger-border, $panel-danger-text, $panel-danger-heading-bg, $panel-danger-border);
}
.#{$block-prefix}-highlighted {
margin: $block-sidebar-hightlight-margin;
.#{$block-heading-selector}{
margin: $block-sidebar-heading-hightlight-margin;
color: $block-sidebar-heading-hightlight-color;
padding: $block-sidebar-heading-hightlight-padding;
@include rtl-padding-right(0);
background: $block-sidebar-heading-hightlight-bg;
font-weight: $block-sidebar-heading-hightlight-font-weight;
font-size: $block-sidebar-heading-hightlight-font-size;
border: none!important;
text-transform: uppercase;
overflow: hidden;
> span{
position: relative;
padding: 0 15px;
&:after, &:before{
content: "";
position: absolute;
top: 50%;
height: 1px;
width: 1000px;
background: $border-color;
}
&:after{
@include rtl-left(100%);
}
&:before{
@include rtl-right(100%);
}
> span{
position: relative;
padding: 7px 15px;
&:after, &:before{
content: "";
position: absolute;
top: 0;
height: 100%;
width: 1px;
background: $theme-color;
@include rotate(-45deg);
}
&:after{
left: 100%;
}
&:before{
right: 100%;
}
}
}
}
.#{$block-content-selector} {
padding: $block-sidebar-hightlight-content-padding;
background: $block-sidebar-hightlight-content-bg;
> div {
background: $block-sidebar-hightlight-content-bg;
> ul > li{
border: none;
> a{
padding: $block-sidebar-list-hightlight-padding;
border-top: $block-sidebar-hightlight-border;
color: $block-sidebar-hightlight-content-color;
margin: 0;
&:hover{
border-top: $block-sidebar-hightlight-border;
}
}
&:first-child a{
border-top: none;
}
}
}
}
}
/* Block inline style -----------------------------------------------------------*/
.#{$block-prefix}-inline{
.icon{
@include font-size(font-size, 35px);
}
.explain{
@include font-size(font-size, 11px);
}
.#{$block-content-selector}{
color: $white;
position: relative;
text-transform: $block-module-heading-transform;
font-weight: $headings-font-weight;
@include font-size(font-size,$block-module-heading-font-size);
}
.input-group{
width: 98%
}
}
/* Twitter -----------------------------------------------------------------------*/
.bwp-twitter-slider {
a {
color: $theme-color-default;
}
}
/* Testimonial -----------------------------------------------------------------*/
//testimonial
.bwp-testimonial{
h5.testimonial-customer-name{
font-size: 22px;
}
.testimonial-image{
img{
@include border-radius(50%);
}
}
&.default{
position:relative;
&:hover{
.slick-arrow{
@include opacity-s();
}
}
.slick-arrow{
top: calc(50% - 25px);
}
.slick-carousel{
max-width:1410px;
margin:auto;
}
.testimonial-title{
h2{
margin: 0 0 35px;
font-size: 24px;
}
}
.item{
border: 2px solid $border-color;
padding: 30px 50px 40px;
}
.testimonial-image{
@include rtl-margin-right(15px);
img{
@include square(82px);
}
}
.icon-quote{
font-size: 30px;
color: $theme-color;
margin-bottom: 10px;
display: inline-block;
}
.testimonial-info{
display: flex;
align-items: center;
}
.post-excerpt{
font-size:14px;
color: $gray-dark;
font-weight: 600;
line-height:24px;
margin-bottom:20px;
}
.testimonial-job{
font-size: 12px;
}
.testimonial-customer-name{
position:relative;
margin:0;
letter-spacing: 1.5px;
font-weight: 700;
text-transform: uppercase;
font-size:11px;
}
.star{
margin-bottom: 7px;
&:before,&:after{
display:inline-block;
color: $orange-second;
font-family:"icomoon";
font-size:12px;
letter-spacing:6px;
}
&:after{
color:$text-color;
}
&.star-1{
&:before{
content:"\e90c";
}
&:after{
content:"\e90c\e90c\e90c\e90c";
}
}
&.star-2{
&:before{
content:"\e90c\e90c";
}
&:after{
content:"\e90c\e90c\e90c";
}
}
&.star-3{
&:before{
content:"\e90c\e90c\e90c";
}
&:after{
content:"\e90c\e90c";
}
}
&.star-4{
&:before{
content:"\e90c\e90c\e90c\e90c";
}
&:after{
content:"\e90c";
}
}
&.star-5{
&:before{
content:"\e90c\e90c\e90c\e90c\e90c";
}
}
}
ul.slick-dots{
@include rtl-text-align-right();
margin-top: 20px;
}
@media(max-width: $screen-md-max){
.testimonial-title{
h2{
margin: 0 0 25px;
}
}
}
@media(max-width: $screen-xs){
.item{
padding: 25px 15px 30px;
}
.testimonial-title{
h2{
font-size: 20px;
}
}
}
}
&.layout1{
text-align: center;
position:relative;
.slick-arrow{
top: calc(50% - 25px);
}
.slick-carousel{
max-width:1410px;
margin:auto;
}
.testimonial-title{
margin: 0 0 20px;
h2{
margin: 0;
font-size: 33px;
color: $white;
}
}
.subtitle{
color: $white;
font-size: 20px;
font-weight: 600;
}
.testimonial-image{
margin: 0 0 5px;
img{
@include square(62px);
margin: auto;
}
}
.icon-quote{
font-size: 30px;
color: $theme-color;
margin-bottom: 10px;
display: inline-block;
}
.post-excerpt{
font-size:14px;
font-weight: 600;
color: $white;
line-height:24px;
margin-bottom:15px;
}
.testimonial-job{
font-size: 12px;
color: $white;
}
.testimonial-customer-name{
position:relative;
margin:0;
letter-spacing: 1.5px;
font-weight: 700;
color: $white;
text-transform: uppercase;
font-size:11px;
padding-top: 20px;
&:before{
position: absolute;
content: "";
background: $white;
@include size(70px, 1px);
top: 0;
left: 50%;
@include transform(translateX(-50%));
}
}
.star{
margin-bottom: 5px;
&:before,&:after{
display:inline-block;
color: $orange-second;
font-family:"icomoon";
font-size:12px;
letter-spacing:6px;
}
&:after{
color:$text-color;
}
&.star-1{
&:before{
content:"\e90c";
}
&:after{
content:"\e90c\e90c\e90c\e90c";
}
}
&.star-2{
&:before{
content:"\e90c\e90c";
}
&:after{
content:"\e90c\e90c\e90c";
}
}
&.star-3{
&:before{
content:"\e90c\e90c\e90c";
}
&:after{
content:"\e90c\e90c";
}
}
&.star-4{
&:before{
content:"\e90c\e90c\e90c\e90c";
}
&:after{
content:"\e90c";
}
}
&.star-5{
&:before{
content:"\e90c\e90c\e90c\e90c\e90c";
}
}
}
ul.slick-dots{
margin-top: 20px;
li{
margin: 0 7.5px;
button{
background: rgba($white, .3);
}
&.slick-active{
button{
background: $theme-color;
}
}
}
}
@media(max-width: $screen-md-max){
.block_content{
padding: 0 30px;
}
}
@media(max-width: $screen-xs){
.block_content{
padding: 0 15px;
}
.testimonial-title{
h2{
font-size: 25px;
}
}
}
}
&.layout2{
text-align: center;
position:relative;
&:hover{
.slick-arrow{
@include opacity-s();
}
}
.slick-arrow{
top: calc(50% - 25px);
}
.slick-carousel{
max-width:1410px;
margin:auto;
}
.testimonial-title{
h2{
margin: 0 0 35px;
font-size: 24px;
}
}
.item{
border: 1px solid #e6e6e6;
padding: 25px 30px;
}
.testimonial-image{
margin: 0 0 5px;
img{
@include square(62px);
margin: auto;
}
}
.icon-quote{
font-size: 30px;
color: $theme-color;
margin-bottom: 5px;
display: inline-block;
}
.post-excerpt{
font-size:14px;
font-weight: 600;
line-height:24px;
margin-bottom:15px;
}
.testimonial-job{
font-size: 12px;
margin: 0 0 3px;
}
.testimonial-customer-name{
position:relative;
margin:0;
letter-spacing: 1.5px;
font-weight: 700;
text-transform: uppercase;
font-size:11px;
}
.star{
margin-bottom: 5px;
&:before,&:after{
display:inline-block;
color: $orange-second;
font-family:"icomoon";
font-size:12px;
letter-spacing:6px;
}
&:after{
color:$text-color;
}
&.star-1{
&:before{
content:"\e90c";
}
&:after{
content:"\e90c\e90c\e90c\e90c";
}
}
&.star-2{
&:before{
content:"\e90c\e90c";
}
&:after{
content:"\e90c\e90c\e90c";
}
}
&.star-3{
&:before{
content:"\e90c\e90c\e90c";
}
&:after{
content:"\e90c\e90c";
}
}
&.star-4{
&:before{
content:"\e90c\e90c\e90c\e90c";
}
&:after{
content:"\e90c";
}
}
&.star-5{
&:before{
content:"\e90c\e90c\e90c\e90c\e90c";
}
}
}
@media(max-width: $screen-md-max){
.testimonial-title{
h2{
margin: 0 0 25px;
}
}
}
@media(max-width: $screen-xs){
.item{
padding: 25px 15px 30px;
}
.testimonial-title{
h2{
font-size: 20px;
}
}
}
}
&.layout3{
text-align: center;
.testimonial-item{
h2{
margin: 15px 0 0;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
color: $white;
}
}
.icon-quote{
font-size: 40px;
color: $white;
margin: 0 0 25px;
display: inline-block;
}
.post-excerpt{
font-size: 22px;
color: $white;
line-height: 28px;
margin: 0 0 28px;
}
.testimonial-image{
margin: 0 0 5px;
img{
@include square(111px);
margin: auto;
}
}
.star{
margin-bottom: 20px;
&:before,&:after{
display:inline-block;
color: #fdb313;
font-family:"icomoon";
font-size:15px;
letter-spacing:6px;
}
&:after{
color:$text-color;
}
&.star-1{
&:before{
content:"\e90c";
}
&:after{
content:"\e90c\e90c\e90c\e90c";
}
}
&.star-2{
&:before{
content:"\e90c\e90c";
}
&:after{
content:"\e90c\e90c\e90c";
}
}
&.star-3{
&:before{
content:"\e90c\e90c\e90c";
}
&:after{
content:"\e90c\e90c";
}
}
&.star-4{
&:before{
content:"\e90c\e90c\e90c\e90c";
}
&:after{
content:"\e90c";
}
}
&.star-5{
&:before{
content:"\e90c\e90c\e90c\e90c\e90c";
}
}
}
ul.slick-dots{
margin-top: 7px;
li{
margin: 0 7.5px;
button{
background: rgba($white, .3);
}
&.slick-active{
button{
background: $white;
}
}
}
}
}
}
/* Bin Brand -----------------------------------------------------------------*/
.bwp-brand{
@media(max-width: $screen-md-max){
.slick-list{
margin: 0 -7.5px;
.item{
padding: 0 7.5px;
}
}
}
.item{
.item-image{
display: flex;
justify-content: center;
}
}
&.default{
.item-image{
border: 1px solid $border-color;
min-height:100px;
display:flex;
align-items:center;
justify-content:center;
img{
@include transition(all 0.5s ease);
}
&:hover{
img{
@include scale(1.1);
}
}
}
}
&.default2{
background:$white;
border:1px solid #e0e0e0;
&:hover{
.slick-arrow{
@include opacity-s();
}
}
.slick-list{
margin:0 -1px;
}
.item{
padding:0;
}
.item-image{
padding:45px 0;
display:flex;
align-items:center;
justify-content:center;
@include rtl-border-right(1px solid #e0e0e0);
img{
@include transition(all 0.5s ease);
max-height:155px;
}
&:hover{
img{
@include scale(1.1);
}
}
}
.slick-arrow{
background:transparent;
border:0;
font-size:20px;
&:hover{
color:$theme-color;
}
&.fa-angle-left{
@include rtl-left(-30px);
}
&.fa-angle-right{
@include rtl-right(-30px);
}
@media (max-width:1440px){
&.fa-angle-left{
@include rtl-left(-10px);
}
&.fa-angle-right{
@include rtl-right(-10px);
}
}
}
}
}
/* bwp client -----------------------------------------------------------------*/
.bwp-client{
.item{
.item-image{
display: flex;
justify-content: center;
}
}
.item-image a{
img{
filter: grayscale(100%);
}
&:hover{
img{
filter: grayscale(0%);
}
}
}
&.default{
.item-image{
min-height:100px;
display:flex;
align-items:center;
justify-content:center;
img{
@include transition(all 0.5s ease);
@include scale(1);
}
&:hover{
img{
@include scale(1.1);
}
}
}
}
&.slider{
background:$white;
border:1px solid #dedede;
.slick-list{
margin:0 -1px;
}
.item{
padding:5px 0;
@include rtl-border-right(1px solid #dedede);
}
.item-image{
min-height:200px;
padding:5px 0;
display:flex;
align-items:center;
justify-content:center;
img{
@include transition(all 0.5s ease);
@include scale(1);
}
&:hover{
img{
@include scale(1.1);
}
}
}
.slick-arrow{
background:$theme-color;
&:hover{
background:darken($theme-color,10%);
}
&.fa-angle-left{
@include rtl-left(-12.5px);
}
&.fa-angle-right{
@include rtl-right(-12.5px);
}
}
}
&.slider2{
.item-image{
min-height:150px;
display:flex;
align-items:center;
justify-content:center;
img{
@include transition(all 0.5s ease);
@include scale(1);
}
&:hover{
img{
@include scale(1.1);
}
}
}
}
}
/* CTA -----------------------------------------------------------------*/
.bwp-cta{
&.default{
text-align:center;
border:1px solid rgba($gray-lighter,0.5);
padding:30px 25px;
&:hover{
.box-image{
img{
-webkit-animation-name: shakes;
animation-name: shakes;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
}
}
.count-cta{
font-size:28px;
font-weight:700;
margin:0;
margin-top:25px;
}
.title-cta{
font-size:18px;
margin-top:5px;
}
}
}
/* Block style in footer ------------------------------------------------------------*/
.#{$app-prefix}-footer{
.#{$block-selector} {
border:none;
padding: 0;
background: $nocolor;
margin: $footer-column-margin;
.#{$block-heading-selector}{
color: $footer-heading-color;
text-transform: $footer-heading-transform;
margin: $footer-heading-margin;
padding: $footer-heading-padding;
font-size: $footer-heading-font-size;
@include rtl-text-align-left();
border: none;
> span{
position: relative;
padding: 0 10px;
&:after, &:before{
content: "";
height: 0;
width: 0;
background: none;
}
> span{
position: relative;
padding: 0 10px;
&:after, &:before{
content: "";
height: 0;
width: 0;
background: none;
}
}
}
}
.#{$block-content-selector}{
border:none;
padding: 0
}
}
}
/************************************************************************************************
WIDGET SEARCH
*************************************************************************************************/
.widget_search{
.container{
padding: 0;
input[type="text"]{
border: 0;
padding: 0;
}
}
.form-content{
position:relative;
overflow:hidden;
input[type="text"]{
line-height:45px;
height:45px;
border:1px solid $light-gray;
@include rtl-padding(0,70px,0,15px) ;
@include border-radius(0);
width:100%;
}
#searchsubmit{
position:absolute;
top:0;
@include rtl-right(0);
padding:0 10px;
&:hover{
i{
color:$theme-color;
}
}
}
}
.search-from .btn{
background:transparent;
border:0;
line-height:0;
}
}
/************************************************************************************************
Bingo Filter Hompage
*************************************************************************************************/
.bwp-filter-homepage{
@media(max-width: $screen-md-max){
.slick-list{
margin: 0 -7.5px;
.item-product{
padding: 0 7.5px !important;
}
}
}
.bwp-filter-heading{
display: inline-block;
width: 100%;
vertical-align: top;
@media (max-width:$screen-sm-max){
margin-bottom:30px;
}
ul{
list-style-type: none;
right: 0;
left: auto;
padding: 0;
li{
@include transition(all 0.3s ease);
}
}
.category-nav{
display:inline-block;
text-align:center;
}
ul.filter-category{
padding: 0;
li{
display:inline-block;
&:hover,&.active{
cursor: pointer;
}
}
}
.bwp-filter-toggle{
font-weight: 500;
display: inline-block;
position: relative;
font-size: 12px;
text-transform: uppercase;
cursor: pointer;
color:$gray-dark;
padding:0 15px 0 35px;
line-height:32px;
border:2px solid $gray-dark;
position:relative;
top:20px;
&:before{
position: absolute;
content: "\f136";
font-family: Material;
font-size: 0;
color: $brand-danger;
@include transform(scale(0));
opacity: 0;
visibility: hidden;
@include transition(transform 0.2s ease);
left:15px;
font-size: 16px;
top: calc(50% - 8px);
line-height:1;
}
i{
font-size: 16px;
position: absolute;
top: calc(50% - 8px);
left:15px;
}
&.active{
i{
display:none;
}
&:before{
@include transform(scale(1));
opacity: 1;
visibility: visible;
}
}
&:hover{
border-color:$theme-color;
color:$theme-color;
}
}
.filter-order-by{
&.open{
>button{
color: $theme-color;
&:before{
opacity: 1;
width: 100%;
}
.caret{
&:before{
content: "\32";
font-family: ElegantIcons;
}
}
}
}
>.dropdown-menu{
top: calc(100% + 5px);
padding: 10px 20px;
line-height: 28px;
min-width:200px;
}
>button{
text-transform: uppercase;
background: transparent;
border: 0;
color: $gray-dark;
font-weight: 500;
font-size: 15px;
padding: 0;
&:focus{
outline: none;
}
.caret{
&:before{
content: "\33";
font-family: ElegantIcons;
font-size: 22px;
font-size: 16px;
position: relative;
top: -3px;
}
}
&:hover{
color: $theme-color;
}
}
ul li{
cursor: pointer;
&:hover{
color: $theme-color;
}
}
}
}
.bwp-filter-attribute{
display: none;
width: 100%;
margin-bottom: 15px;
.bwp-filter-attribute-inner{
display: flex;
flex-wrap:wrap;
width: 100%;
padding-top: 30px;
@media (max-width: $screen-xs-max) {
display: inline-block;
padding-top: 0;
}
@media (min-width: $screen-sm) {
padding: 37px 25px 30px;
border: 1px solid $border-color;
margin-bottom: 60px;
}
@media (max-width: $screen-sm-max) and (min-width: $screen-sm){
padding-top: 20px;
padding-bottom: 30px;
}
> div{
flex:1;
padding:0 15px;
@media (max-width: $screen-sm-max) {
flex:0 0 50%;
margin-bottom:30px;
}
@media (max-width: $screen-xs-max) {
width: 100%;
padding: 0 !important;
margin-bottom: 25px;
display: inline-block;
}
ul{
list-style:none;
padding:0;
li{
float: left;
width: 50%;
padding: 5px 0;
span{
color: $text-color;
cursor: pointer;
&:hover{
color: $gray-dark;
}
}
}
&:not(.pa_color){
li{
span{
position:relative;
&:before{
content:"";
@include square(17px);
cursor: pointer;
overflow: visible;
display: inline-block;
vertical-align: middle;
border:1px solid #cccccc;
@include rtl-margin-right(10px);
position:relative;
top:-2px;
}
}
&.active{
span{
color:$gray-dark;
&:before{
border-color:$gray-dark;
}
&:after{
content: "\f00c";
font-family: FontAwesome;
position: absolute;
top: 4px;
left: 4px;
font-size: 11px;
color: $gray-dark;
}
}
}
}
}
}
&.bwp-filter-color{
order: 1;
.pa_color{
li{
.color{
display: inline-block;
vertical-align: top;
@include square(16px);
@include rtl-margin-right(10px);
@include transform(translateY(3px));
padding: 0;
@include transition(transform 0.1s ease);
@include border-radius(50%);
&:before{
content:"";
@include square(22px);
@include border-radius(50%);
top:calc(50% - 11px);
left:calc(50% - 11px);
position:absolute;
border:1px solid #cccccc;
}
}
&.active{
span{
color:$gray-dark;
}
.color{
&:before{
border-color:$gray-dark;
}
&:after{
display:none;
}
}
}
}
}
li[data-value="white"]{
.color{
border: 1px solid $border-color;
}
&.active{
.color{
&:before{
top: -2px;
@include rtl-left(5.5px);
color: $theme-color;
}
}
}
}
}
&.bwp-filter-price{
order: 3;
h2{
margin-bottom: 45px;
}
.bwp_slider_price{
margin: 0;
background: transparent;
@include box-shadow(inset 0px 1px 3px 3px rgba(0, 0, 0, 0.2));
height: 5px;
@include border-radius(10px);
width: calc(100% - 20px);
&:after, &:before{
display: none;
}
.ui-slider-handle{
@include size(10px,14px);
border: 1px solid $theme-color;
background:$theme-color;
top: -5px;
}
.ui-slider-range{
height: 5px;
background: $theme-color;
position: absolute;
@include transform(translateX(10px));
width: calc(100% -50px) !important;
}
}
.price-input{
margin-top: 20px;
font-size: 14px;
color: $gray-dark;
font-weight:500;
>span:not(.text-price-filter){
color:$text-color;
font-weight:400;
}
}
}
&.bwp-filter-brand{
order: 2;
}
}
}
.clear_all{
span{
background: $theme-color;
color: $white;
text-transform: uppercase;
padding: 5px 10px;
font-size: 12px;
display: inline-block;
&:hover{
cursor: pointer;
background: $gray-dark;
}
}
}
h2{
color: $gray-dark;
padding: 0 0 15px;
background: transparent;
font-weight: 500;
font-size: 14px;
margin: 0px 0 40px 0;
position: relative;
text-transform: uppercase;
border-bottom: 1px solid $gray-light;
letter-spacing: 3.2px;
}
}
&.filter.slider{
.bwp-filter-heading{
overflow:unset;
}
}
&.filter-default{
.bwp-filter-heading{
display:flex;
justify-content:space-between;
margin-bottom:50px;
flex-wrap:wrap;
ul{
li{
font-size:20px;
margin:0 25px;
position:relative;
padding:15px 0;
font-weight:500;
&:before{
content:"";
position:absolute;
bottom:0;
@include size(0,2px);
background:$gray-dark;
@include transition(all 0.3s ease);
left:50%;
@include transform(translateX(-50%));
}
.item-count{
position:absolute;
top:0;
font-size:14px;
@include rtl-right(-10px);
}
&.active,&:hover{
color:$gray-dark;
&:before{
width:100%;
}
}
@media (max-width:$screen-sm-max){
margin:0 15px;
font-size:16px;
}
}
}
@media (max-width:$screen-sm-max){
.filter-content{
order:2;
margin-top:10px;
a{
top:0;
}
}
}
@media (max-width:$screen-xs-max){
.filter-content{
flex:0 0 100%;
margin-top:30px;
}
.filter-category{
flex:0 0 100%;
text-align:center;
}
}
@media (max-width:$screen-xs){
.filter-content{
a{
width:100%;
}
}
.filter-category{
li{
margin:0 0 5px;
width:100%;
padding:10px;
background:#f5f5f5;
&:before{
display:none;
}
.item-count{
display:inline-block;
font-size:12px;
position:relative;
top:-10px;
right:0;
}
}
}
}
}
.products_loadmore{
.btn.loadmore{
margin-top:30px;
line-height: 40px;
height:44px;
padding: 0 30px;
background:transparent;
color:$gray-dark;
font-size:16px;
font-weight:500;
@include border-radius(0);
letter-spacing:0;
border:2px solid $gray-dark;
span{
padding:0;
&:before{
display:none;
}
}
i{
line-height:1;
@include size(20px,15px);
display:none;
&:before{
position:relative;
left:1px;
}
}
&:hover{
i{
color:$theme-color !important;
}
}
&.loading{
i{
display:block;
}
}
}
}
}
&.tab-category-default{
@media(max-width: $screen-md-max){
.content{
margin: 0 -7.5px !important;
.item-product{
padding: 0 7.5px !important;
}
}
}
.bwp-filter-heading{
margin-bottom:35px;
.filter-category{
text-align:center;
li{
display:inline-block;
font-weight:500;
font-size:14px;
margin:0 5px;
padding: 10px 30px;
position:relative;
background: #dedede;
a{
color:$gray-dark;
}
&.active{
background: $theme-color;
color:$white;
border-color:$gray-dark;
position: relative;
display: inline-block;
&:before{
position: absolute;
content: "";
@include square(10px);
background: $theme-color;
bottom: -3px;
@include transform(rotate(-45deg));
left: calc(50% - 5px);
}
a{
color:$white;
}
}
&:hover{
color:$white;
background: $theme-color;
a{
color:$white;
}
}
@media(max-width: $screen-xs-max){
display: block;
margin: 0 0 15px;
&.active{
display: block;
}
}
}
}
}
.item{
display: flex;
width: 100%;
.item-product{
padding: 0 15px;
position: relative;
}
.content-product8{
display: flex;
padding: 25px;
background: $white;
position: relative;
margin: 0 0 30px;
@media(max-width: $screen-md-max){
text-align: center;
display: block;
margin: 0 0 15px;
.products-content{
width: 100% !important;
}
.products-thumb{
width: 50% !important;
margin: 0 !important;
@media(max-width: $screen-sm-max){
width: 100% !important;
}
}
.brands-single{
justify-content: center;
}
.content-button{
justify-content: center;
}
}
@media(max-width: $screen-sm-max){
padding: 50px 25px 25px;
}
}
.btn-atc{
margin-top: 0 !important;
}
.number{
position: absolute;
@include rtl-right(50px);
@include size(25px, 30px);
line-height: 20px;
background: $orange-second;
text-align: center;
font-size: 12px;
color: $white;
font-weight: 600;
z-index: 15;
clip-path: polygon(100% 0, 100% 100%, 50% 62%, 0 100%, 0 0);
@media(max-width: $screen-md-max){
@include rtl-right(35px);
}
}
&.two{
display: flex;
.item-product{
width: 50%;
flex: 50%;
}
.brands-single{
margin: 0 0 10px;
}
.content-button{
display: flex;
}
.product-title{
font-weight: 600 !important;
font-size: 18px !important;
}
.woosw-wishlist{
@include rtl-margin-right(5px);
}
.price{
font-weight: 600 !important;
margin-bottom: 20px !important;
}
.products-thumb{
@include rtl-margin-right(30px);
width: 45%;
@media(max-width: $screen-xs-max){
z-index: 16;
}
}
.product-quickview{
display: none !important;
}
.products-content{
margin-top: 25px;
width: 55%;
}
.product-button{
display: flex;
}
.content-button{
.product-quickview{
text-align: center;
background: $white;
font-size: 0;
display: block;
white-space: nowrap;
>a{
color: $gray-dark;
@include square(40px);
line-height: 40px;
display: inline-block;
position:relative;
outline: unset;
border: 1px solid #040404;
>i{
font-size: 20px;
color: $gray-dark;
line-height: 40px;
@include transition(all 0.1s ease);
}
}
&:hover{
>a{
background:$theme-color;
border-color:$theme-color;
>i{
color: $white;
}
}
.loading{
&:before{
color: $white;
}
}
}
.loading {
i{
display: none;
}
&:before {
position: relative;
display: inline-block;
content: "";
border:2px solid rgba($gray-dark,0.25);
border-top-color:$gray-dark;
@include square(18px);
@include border-radius(50%);
background: none;
@include animation(2s linear 0s normal none infinite running spinAround);
text-indent: 0;
top:8px;
}
&:hover{
&:before{
border-color:rgba($white,0.5);
border-top-color:$white;
}
}
}
}
.woosw-btn{
font-size: 0;
background: $white;
text-align: center;
position: relative;
white-space: nowrap;
margin-top: 0;
color: $white;
@include square(40px);
line-height: 40px;
display: inline-block;
border: 1px solid #040404;
cursor:pointer;
&:before{
content: "\e905";
font-family: icomoon;
font-size: 20px;
line-height: 40px;
color: $gray-dark;
@include transition(all 0.1s ease);
}
&.woosw-adding{
&:before {
position: relative;
display: inline-block;
content: "";
border:2px solid rgba($gray-dark,0.25);
border-top-color:$gray-dark;
@include square(20px);
@include border-radius(50%);
background: none;
@include animation(2s linear 0s normal none infinite running spinAround);
text-indent: 0;
top:7px;
left: 0;
}
&:hover{
&:before{
border-color:rgba($white,0.5);
border-top-color:$white;
}
}
}
&.woosw-added{
&:before{
content: "\e905";
font-family: icomoon;
font-size: 20px;
line-height: 40px;
margin:0;
color: $theme-color;
@include transition(all 0.1s ease);
position: relative;
}
}
&:hover{
background:$theme-color;
border-color:$theme-color;
&:before{
color: $white;
}
}
}
.woosc-btn{
text-align: center;
background: $white;
font-size: 0;
display: block;
white-space: nowrap;
color: $gray-dark;
@include square(40px);
line-height: 40px;
display: inline-block;
border:1px solid #040404;
cursor:pointer;
&:before{
font-size: 20px;
color: $gray-dark;
line-height: 40px;
@include transition(all 0.1s ease);
content:"\e909";
font-family:icomoon;
margin:0;
}
&:hover{
background:$theme-color;
border-color: $theme-color;
&:before{
color: $white;
}
}
@media (max-width:$screen-sm-max){
display:none;
}
}
}
.btn-atc{
@include rtl-margin-right(5px);
a{
line-height:38px !important;
padding:0 15px !important;
min-width:145px !important;
&:hover{
&:before{
font-size: 20px !important;
}
}
}
}
@media(max-width: $screen-xs-max){
display: block;
.item-product{
width: 100%;
}
}
}
&.three{
display: flex;
.products-thumb{
@include rtl-margin-right(25px);
width: 50%;
@media(max-width: $screen-md-max){
width: 65% !important;
}
@media(max-width: $screen-sm-max){
width: 100% !important;
z-index: 16;
}
}
.products-content{
width: 50%;
}
.item-product{
width: 33.33%;
flex: 33.33%;
}
.price{
margin-bottom: 15px !important;
}
.btn-atc{
a{
min-width:145px !important;
}
}
.product-button{
display: none;
}
@media(max-width: $screen-xs-max){
display: block;
.item-product{
width: 100%;
}
}
}
}
}
&.tab_category_slider{
.bwp-filter-heading{
margin-bottom:45px;
.filter-category{
text-align:center;
li{
display:inline-block;
font-weight:600;
font-size:20px;
margin:0 5px;
text-transform: uppercase;
padding: 5px 25px;
position:relative;
a{
color:$gray-dark;
}
&.active{
background: #de2828;
color:$white;
border-color:$gray-dark;
display: inline-block;
a{
color:$white;
}
}
&:hover{
color:$white;
background: #de2828;
a{
color:$white;
}
}
@media(max-width: $screen-sm-max){
font-size: 18px;
padding: 5px 10px;
}
@media(max-width: $screen-xs-max){
display: block;
width: 100%;
margin: 0 0 5px;
text-transform: initial;
}
}
}
}
}
&.tab_category_slider_2{
.title-block{
h2{
font-size:20px;
margin:0;
text-transform:uppercase;
font-weight:600;
&:after{
display:inline-block;
content:".";
color:$theme-color;
}
}
}
.bwp-filter-heading{
margin-bottom:30px;
.category-tab-nav{
display:flex;
justify-content:center;
}
.filter-category{
li{
display:inline-block;
font-weight:600;
font-size:24px;
@include rtl-margin-right(30px);
position:relative;
a{
color:$gray-dark;
}
&:last-child{
@include rtl-margin-right(0);
}
&.active{
color:$theme-color;
@include border-radius(50px);
padding: 5px 25px;
border: 2px dashed $theme-color;
a{
color:$theme-color;
}
&:before{
width:100%;
}
}
&:hover{
color:$theme-color;
a{
color:$theme-color;
}
}
}
}
}
@media (max-width:$screen-sm-max){
.bwp-filter-heading {
.filter-category li{
font-size:16px;
@include rtl-margin-right(15px);
}
.category-tab-nav{
flex-wrap:wrap;
justify-content:center;
>*{
width:100%;
}
}
.title-block{
text-align:center;
margin-bottom:10px;
}
.filter-category{
text-align:center;
}
}
}
@media (max-width:$screen-xs-max){
.bwp-filter-heading{
.filter-category{
li{
font-size:14px;
margin:0 0 5px;
text-transform:uppercase;
width:100%;
padding:0;
line-height:30px;
border:1px solid $border-color;
&:before{
display:none;
}
}
}
.category-tab-nav{
border:0;
}
}
}
}
&.tab_category_slider_3{
.slick-list{
margin: 0 -30px !important;
.item-product{
padding: 0 30px !important;
@include rtl-border-right(1px solid #e0e0e0);
}
}
@media(max-width: $screen-md-max){
.slick-list{
margin: 0 -15px !important;
.item-product{
padding: 0 15px !important;
}
}
}
@media(max-width: $screen-xs-max){
.slick-list{
.item-product{
@include rtl-border-right(0);
}
}
}
@media(max-width: $screen-xs){
.slick-list{
margin: 0 -7.5px !important;
.item-product{
padding: 0 7.5px !important;
}
}
}
.product-wapper{
margin: 0 !important;
}
.bwp-filter-heading{
margin-bottom:30px;
.category-tab-nav{
display:flex;
justify-content:center;
}
.filter-category{
li{
display:inline-block;
font-weight:600;
font-size:12px;
margin: 0;
padding-bottom:2px;
padding: 3px 15px;
letter-spacing: 1.5px;
text-transform: uppercase;
position:relative;
a{
color:$text-color
}
&:last-child{
@include rtl-margin-right(0);
}
&.active{
color:$theme-color;
border: 1px solid $theme-color;
a{
color:$theme-color;
}
}
&:hover{
color:$theme-color;
a{
color:$theme-color;
}
}
}
}
}
@media (max-width:$screen-sm-max){
.bwp-filter-heading {
.category-tab-nav{
flex-wrap:wrap;
justify-content:center;
>*{
width:100%;
}
}
.title-block{
text-align:center;
margin-bottom:10px;
}
.filter-category{
text-align:center;
}
}
}
@media (max-width:$screen-xs-max){
.bwp-filter-heading{
padding:0 15px;
.filter-category{
li{
font-size:14px;
margin:0 0 5px;
text-transform:uppercase;
width:100%;
padding:0;
line-height:30px;
border:1px solid $border-color;
&:before{
display:none;
}
}
}
.category-tab-nav{
border:0;
}
}
}
}
&.tab_category_slider_4{
.bwp-filter-heading{
margin-bottom:25px;
.category-tab-nav{
display:flex;
justify-content:center;
}
.filter-category{
li{
@include rtl-margin-right(10px);
&.active{
a{
border-color:$theme-color;
color:$theme-color;
}
}
a{
display:inline-block;
font-size:13px;
font-weight:500;
line-height:23px;
border:1px dashed transparent;
@include border-radius(20px);
padding:0 15px;
color:$text-color;
&:hover{
color:$theme-color;
}
}
&:last-child{
@include rtl-margin-right(0);
}
}
}
}
.slick-slide{
padding:0 7.5px;
}
.slick-list{
margin:0 -7.5px;
}
.product-wapper{
@include border-radius(8px);
overflow:hidden;
}
@media (max-width:$screen-sm-max){
.bwp-filter-heading {
.filter-category li{
font-size:16px;
@include rtl-margin-right(15px);
}
.category-tab-nav{
flex-wrap:wrap;
justify-content:center;
>*{
width:100%;
}
}
.title-block{
text-align:center;
margin-bottom:10px;
}
.filter-category{
text-align:center;
}
}
}
@media (max-width:$screen-xs-max){
.bwp-filter-heading{
.filter-category{
li{
font-size:14px;
margin:0 0 5px;
text-transform:uppercase;
width:100%;
padding:0;
a{
border:1px dashed $border-color;
line-height:30px;
width:100%;
}
&:before{
display:none;
}
}
}
.category-tab-nav{
border:0;
}
}
}
}
&.tab_category_slider_5{
.bwp-filter-heading{
text-align:center;
margin-bottom:40px;
ul li{
font-size:18px;
font-weight:500;
margin:0 12px;
a{
color:$text-color;
display:inline-block;
position:relative;
&:before{
content:"";
position:absolute;
bottom:0;
width:0;
left:50%;
@include transform(translateX(-50%));
height:2px;
background:$gray-dark;
@include transition(all 0.3s ease);
}
&:hover{
color:$gray-dark;
}
}
&.active{
a{
color:$gray-dark;
&:before{
width:100%;
}
}
}
}
}
.products-list.grid .product-wapper.content-product5{
.products-thumb{
border:0;
@include border-radius(0);
}
.content-top{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
.cat-products{
order:1;
}
.rating{
order:2;
}
}
}
@media (max-width:$screen-xs-max){
.bwp-filter-heading{
.filter-category{
li{
font-size:14px;
margin:0 0 5px;
text-transform:uppercase;
width:100%;
padding:0;
line-height:30px;
background:#f5f5f5;
a{
width:100%;
&:before{
display:none;
}
}
}
}
.category-tab-nav{
border:0;
}
}
}
}
&.tab_category_scroll{
.bwp-filter-heading{
margin-bottom:60px;
padding:0 15px;
.filter-category{
text-align:center;
li{
margin:0 5px;
a{
font-size:20px;
color:$text-color;
display:inline-block;
border:1px solid $text-color;
padding:8px 70px;
&:hover{
border-color:$gray-dark;
color:$gray-dark;
}
}
&.active{
a{
border-color:$gray-dark;
color:$gray-dark;
}
}
}
}
}
.product-content{
.item-product{
padding:0 15px;
}
}
.content-scroll-list{
overflow:hidden;
@include rtl-padding-right(215px);
@media (max-width:$screen-md-max){
@include rtl-padding-right(0);
}
}
.scrollbar{
margin: 50px 15px 0;
height: 1px;
background: #dfdfdf;
line-height: 0;
cursor: pointer;
.handle{
background: #000000;
height: 3px;
position: relative;
top: -1px;
}
.mousearea{
position: absolute;
top: -37px;
left: 0;
width: 100%;
height: 20px;
font-size: 14px;
text-transform: uppercase;
color: #000;
white-space: nowrap;
line-height:20px;
i{
font-size:20px;
line-height:20px;
position:relative;
top:3px;
@include rtl-margin-left(10px);
}
&:hover{
color:$theme-color;
}
}
}
.controls{
button{
position:absolute;
top:33%;
@include square(33px);
background:transparent;
border:1px solid $gray-dark;
cursor:pointer;
@include border-radius(0);
color:$gray-dark;
&.prev{
@include rtl-left(0);
}
&.next{
@include rtl-right(0);
}
&.disabled{
cursor:no-drop;
opacity:1;
}
&:hover{
background:$gray-dark;
color:$white;
}
}
}
@media (max-width:$screen-xs-max){
.bwp-filter-heading{
.filter-category{
li{
a{
font-size:20px;
padding:8px 20px;
}
}
}
}
}
@media (max-width:$screen-xs){
.bwp-filter-heading{
.filter-category{
li{
display:block;
width:100%;
margin:0 0 5px;
a{
font-size:20px;
padding:8px 20px;
width:100%;
}
}
}
}
}
}
&.loadmore{
.bwp-filter-heading{
margin-bottom:40px;
.filter-order-by{
float:unset;
margin:0;
text-align:center;
ul{
li{
display:inline-block;
font-size:14px;
font-weight:500;
color:$text-color;
text-transform:uppercase;
margin:0 25px;
position:relative;
padding-bottom:7px;
font-weight:700;
&:before{
content:"";
position:absolute;
bottom:0;
left:50%;
@include transform(translateX(-50%));
@include transition(all 0.3s ease);
@include opacity-h();
background:$theme-color;
@include size(0,2px);
}
&.active,&:hover{
color:$gray-dark;
&:before{
width:100%;
@include opacity-s();
}
}
@media (max-width:$screen-xs-max){
margin:0;
width:100%;
&:before{
display:none;
}
}
}
}
}
}
.products_loadmore{
.btn.loadmore{
margin-top:15px;
height:45px;
line-height: 41px;
padding: 0 30px;
background:transparent;
color:$gray-dark;
font-size:16px;
@include border-radius(0);
border:2px solid $gray-dark;
span{
padding:0;
&:before{
display:none;
}
}
i{
line-height:1;
}
&:hover{
background:$theme-color;
border-color:$theme-color;
i{
color:$white !important;
}
}
}
}
}
&.tab_product_default{
.content-product-list{
overflow:hidden;
}
.bwp-filter-heading{
margin-bottom:35px;
.filter-orderby{
text-align:center;
li{
display:inline-block;
font-weight:600;
font-size:20px;
padding-bottom:2px;
position:relative;
color: #010101;
text-transform: uppercase;
&:first-child{
margin: 0 30px;
@media(max-width: $screen-md-max){
@include rtl-margin(0, 15px, 0, 45px);
}
}
&:before{
position:absolute;
bottom:-2px;
content:"";
width:0;
height:3px;
background:$theme-color;
@include transition(all 0.3s ease);
left:50%;
@include transform(translateX(-50%));
}
&.active{
color:$gray-dark;
border-color:$gray-dark;
&:before{
width:100%;
}
}
&:hover{
color:$gray-dark;
}
@media(max-width: $screen-xs-max){
margin: 0 0 10px !important;
}
}
}
}
@media(max-width: $screen-sm-max){
.content{
margin: 0 -7.5px;
}
.item-product{
padding: 0 7.5px;
}
}
}
&.tab_product_slider{
.content-product-list{
overflow:hidden;
}
.bwp-filter-heading{
margin-bottom:30px;
.filter-orderby{
text-align:center;
display: flex;
li{
font-weight:600;
font-size:16px;
text-transform: uppercase;
width: 100%;
margin: 0 3.5px;
padding: 10px 15px;
color: $gray-dark;
background: #e6e6e6;
position:relative;
&:first-child{
@include rtl-margin-left(0);
}
&:last-child{
@include rtl-margin-right(0);
}
&.active{
color:$white;
background: $theme-color;
position: relative;
&:before{
position: absolute;
content: "";
@include square(10px);
background: $theme-color;
bottom: -3px;
@include transform(rotate(-45deg));
left: calc(50% - 5px);
}
}
&:hover{
background: $theme-color;
color: $white;
}
}
@media(max-width: $screen-xs-max){
display: block;
}
}
}
.slick-arrow{
top:calc(50% - 80px);
&:hover{
background:$theme-color;
border-color:$theme-color;
color:$white;
}
&.fa-angle-left{
@include rtl-left(-17.5px);
}
&.fa-angle-right{
@include rtl-right(-17.5px);
}
@media(max-width: $screen-md-max){
&.fa-angle-left{
@include rtl-left(-15px);
}
&.fa-angle-right{
@include rtl-right(-15px);
}
}
}
@media (max-width:$screen-sm-max){
.bwp-filter-heading .filter-orderby li{
font-size:16px;
margin:0 10px;
}
}
@media (max-width:$screen-xs-max){
.bwp-filter-heading .filter-orderby{
border:0;
li{
font-size:14px;
margin:0 0 5px;
text-transform:uppercase;
width:100%;
padding:0;
line-height:30px;
background:#f5f5f5;
&:before{
display:none;
}
}
}
}
}
&.tab_product_slider_2{
@media(max-width: $screen-md-max){
.slick-list{
.item{
padding: 0 7.5px !important;
}
.item-product{
padding: 0 !important;
}
}
}
.content-product-list{
overflow:hidden;
}
.bwp-filter-heading{
margin-bottom:30px;
.filter-orderby{
text-align:center;
display: flex;
justify-content: center;
li{
font-weight:600;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 1.5px;
margin: 0 7.5px;
padding: 5px 15px;
color: $gray-dark;
position:relative;
border: 2px solid transparent;
&:first-child{
@include rtl-margin-left(0);
}
&:last-child{
@include rtl-margin-right(0);
}
&.active{
color: $theme-color;
border-color: $theme-color;
position: relative;
}
&:hover{
border-color: $theme-color;
}
}
@media(max-width: $screen-xs-max){
display: block;
}
}
}
.slick-arrow{
top:calc(50% - 80px);
&:hover{
background:$theme-color;
border-color:$theme-color;
color:$white;
}
&.fa-angle-left{
@include rtl-left(-17.5px);
}
&.fa-angle-right{
@include rtl-right(-17.5px);
}
@media(max-width: $screen-md-max){
&.fa-angle-left{
@include rtl-left(-15px);
}
&.fa-angle-right{
@include rtl-right(-15px);
}
}
}
@media (max-width:$screen-sm-max){
.bwp-filter-heading .filter-orderby li{
font-size:16px;
margin:0 10px;
}
}
@media (max-width:$screen-xs-max){
.bwp-filter-heading .filter-orderby{
border:0;
li{
font-size:14px;
margin:0 0 5px;
text-transform:uppercase;
width:100%;
padding:0;
line-height:30px;
background:#f5f5f5;
&:before{
display:none;
}
}
}
}
}
&.filter{
&.slider{
.bwp-filter-heading{
.filter-category{
margin-bottom:50px;
li{
margin:0;
@include rtl-margin-right(10px);
padding:0;
&:last-child{
@include rtl-margin-right(0);
}
span{
font-size:15px;
color:$text-color;
text-transform:capitalize;
padding:0 20px;
line-height:25px;
font-weight:600;
}
&.active,&:hover{
span{
background:$theme-color;
color:$white;
}
}
}
}
.filter-order-by{
margin:0;
margin-top:-1px;
@media (max-width: $screen-sm-max) {
@include rtl-margin-left(30px);
}
>button{
font-size:12px;
color:$text-color;
line-height:24px;
padding:0 20px;
border:1px solid $text-color;
.caret{
line-height:1;
&:before{
top:0;
}
}
}
}
.bwp-filter-toggle{
font-size:12px;
color:$text-color;
line-height:24px;
padding:0 20px;
border:1px solid $text-color;
margin:0;
@include rtl-margin-left(10px);
&:after{
display:none;
}
&:before{
display:none;
}
i{
font-size:18px;
top:5px;
}
&.active{
&:after{
display:none;
}
i{
display:inline-block;
&:before{
display:inline-block;
position: relative;
top: -3px;
content: "\f136";
font-family: Material;
}
}
}
}
}
.bwp-filter-content {
.slick-dots {
@media (max-width: $screen-md-max) {
bottom: 0;
}
}
}
}
}
&.tab_category_image{
border:1px solid $border-color;
@include border-radius(10px);
.box-content{
display:flex;
flex-wrap:wrap;
}
.bwp-filter-heading{
flex:0 0 330px;
width:330px;
@include rtl-border-right(1px solid $border-color);
ul{
li{
width:100%;
border-bottom:1px solid $border-color;
&:last-child{
border-bottom:0;
}
&.active{
a{
background:#f4f4f4;
img{
filter: brightness(0.95);
}
span{
&:after{
@include opacity-s();
}
}
}
}
a{
display:flex;
font-size:16px;
font-weight:500;
align-items:center;
width:100%;
padding:5px 10px;
img{
max-width:100px;
filter: brightness(1);
}
span{
display:inline-block;
&:after{
content: "\45";
display:inline-block;
color:$theme-color;
@include opacity-h();
font-size:15px;
font-family: eleganticons;
position:relative;
top:2px;
}
}
}
}
}
}
.bwp-filter-content{
flex:0 0 calc(100% - 330px);
width:calc(100% - 330px);
padding:30px 30px 0;
}
@media (max-width:$screen-sm-max){
.bwp-filter-heading{
margin-bottom:0;
flex: 0 0 280px;
width: 280px;
ul li a{
font-size:14px;
img{
max-width:80px;
}
}
}
.bwp-filter-content{
flex:0 0 calc(100% - 280px);
width:calc(100% - 280px);
padding:30px 30px 0;
}
}
@media (max-width:$screen-sm-max){
border:0;
.bwp-filter-heading{
margin-bottom:0;
flex: 0 0 100%;
width: 100%;
border:1px solid $border-color;
margin-bottom:30px;
ul li a{
font-size:14px;
img{
display:none;
}
}
}
.bwp-filter-content{
flex:0 0 100%;
width:100%;
padding:0;
}
}
}
}
.main-archive-product{
.content-products-list{
position:relative;
&.active{
>.products-list{
opacity: 0;
}
}
>.loading{
position: absolute;
top: 0;
left: calc(50% - 40px);
}
.products-list.grid .product-wapper .products-thumb{
width:100%;
a >img{
width:100%;
}
}
}
&.style-1,&.style-3{
.content-products-list{
overflow:hidden;
}
}
&.style-4{
.content-product5{
margin: 0 0 25px !important;
.products-content{
padding: 0 !important;
}
}
}
}
.bwp-filter-content, ul.products-list{
position: relative;
>.content, >.content-product-list{
@include transition(opacity 0.2s ease);
.slick-arrow{
opacity:0;
visibility:hidden;
@media(max-width:$screen-sm-max){
opacity:1;
visibility:visible;
}
@media(max-width:$screen-xs-max){
visibility:hidden;
}
}
&:hover{
.slick-arrow{
opacity:1;
visibility:visible;
}
}
}
&.active{
>.content, >.content-product-list, >li{
opacity: 0;
}
}
>.loading-filter{
position: absolute;
top: 0;
left: calc(50% - 50px);
}
}
/************************************************************************************************
Bingo Woo Tab Caterories
*************************************************************************************************/
.bwp-woo-tab-cat{
.bwp-category-tab{
text-align: center;
margin-bottom: 32px;
ul.nav-tabs{
display: inline-block;
float: none;
li{
padding: 0;
float: none;
display: inline-block;
a{
font-size: 16px;
padding: 0 20px;
text-transform: uppercase;
font-weight: 700;
position: relative;
@media (max-width: $screen-xs){
padding: 0 10px;
}
&:after{
top: 0;
content: "/";
color: $light-gray;
position: absolute;
@include rtl-right(-1px);
@media (max-width: $screen-xs){
display: none;
}
}
&:before{
display: none;
}
}
&:last-child{
a{
&:after{
display: none;
}
}
}
}
}
}
.tab-content{
position: relative;
}
.tab-pane{
display: block !important;
&.active{
.slick-arrow{
display: block !important;
}
}
}
&.slider{
.row{
display:flex;
align-items:center;
@media (max-width:$screen-sm-max){
display:block;
}
}
.category-nav{
.category{
position:relative;
margin-bottom:30px;
.name-category{
position:absolute;
font-size:18px;
color:$gray-dark;
font-weight:700;
bottom:20px;
@include rtl-left(50%);
@include transform(translateX(-50%));
margin:0;
&:hover{
color:$theme-color;
}
}
}
}
.title-block{
position:absolute;
z-index:99;
h2{
font-size:35px;
font-weight:500;
color:$gray-dark;
margin:0;
margin-top:-7px;
display:inline-block;
}
}
.category{
padding:86px 15px;
.category-content{
width: 55%;
@include rtl-padding(72px, 30px, 153px, 30px);
background: #fff;
background:$white;
.name-category{
text-transform:uppercase;
font-size:18px;
color:$gray-dark;
font-weight:500;
margin-bottom:35px;
display:block;
&:hover{
color:$theme-color;
}
}
.description-category{
color:$text-color;
}
@media (max-width:$screen-sm-max){
width:50%;
}
@media (max-width:$screen-xs-max){
width:100%;
}
}
.category-img{
position: absolute;
top: 0;
@include rtl-right(20px);
@include box-shadow(3px 4px 5px 0px rgba($gray-dark, 0.25));
@media (max-width:$screen-md-max){
max-width:280px;
top:130px;
}
@media (max-width:$screen-sm-max){
right: 120px;
}
@media (max-width:$screen-xs-max){
display:none;
}
}
}
.slick-arrow{
border: none;
background: #f5f5f5;
@include border-radius(0);
top: auto;
@include rtl-left(45px);
bottom: 27%;
@include square(34px);
line-height:34px;
color:$text-color;
&.fa-angle-right{
@include rtl-left(88px);
}
&:hover{
background:$theme-color;
color:$white;
}
}
.prodcut-slider{
.products-list{
padding-top:40px;
padding:0;
}
}
}
}
/************************************************************************************************
Bingo Woo Caterories
*************************************************************************************************/
.bwp_widget_woo_categories.widget{
margin-bottom: 0;
}
.bwp-woo-categories{
&.slider{
position:relative;
&:hover{
.slick-arrow{
@include opacity-s();
}
}
.slick-slide{
padding: 0 10px;
}
.slick-slider{
overflow: unset;
}
.item-product-cat-content{
display: flex;
align-items: center;
border: 1px solid #e0e0e0;
padding: 5px 10px;
@include border-radius(50px);
&:hover{
.item-image,.item-thumbnail{
-webkit-animation-name: shakes;
animation-name: shakes;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
}
}
.item-image,.item-thumbnail{
position:relative;
@include border-radius(50%);
overflow:hidden;
width: 45px;
img{
margin:auto;
@include border-radius(50%);
}
}
.item-title{
margin:0;
font-size:13px;
font-family: $font-family-second;
text-transform:uppercase;
font-weight: 400;
@include rtl-margin-left(12px);
a{
color:$gray-dark;
&:hover{
color:$theme-color;
}
}
}
.slick-dots{
margin-top:30px;
}
}
&.slider2{
.slick-list{
margin: 0 -7.5px;
.item{
padding: 0 7.5px;
}
}
.item-description{
line-height: 18px;
}
.item-product-cat-content{
background: #eeeeee;
text-align: center;
padding: 20px 40px 30px;
&:hover{
.item-icon{
i{
-webkit-animation-name: shakes;
animation-name: shakes;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
}
.item-image{
img{
-webkit-animation-name: shakes;
animation-name: shakes;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
}
}
}
.item-image{
img{
margin: auto;
}
}
.item-title{
margin:0 0 2px;
font-size:18px;
font-weight: 600;
a{
color:$gray-dark;
&:hover{
color: $theme-color;
}
}
}
.item-icon{
color:$white;
font-size:40px;
a{
color:$white;
i{
display:inline-block;
}
}
}
@media (max-width:$screen-xs){
.item-title{
@include rtl-padding-left(10px);
}
.item-icon{
font-size:30px;
}
}
}
&.slider3{
text-align:center;
.item-product-cat-content{
background:$white;
margin-bottom:30px;
&:last-child{
margin-bottom:0;
}
&:hover{
.item-image,.item-thumbnail{
&:after,&:before{
@include opacity-s();
}
img{
-webkit-animation-name: rotate2;
animation-name: rotate2;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
}
}
}
.item-image,.item-thumbnail{
position:relative;
@include border-radius(50%);
overflow:hidden;
display: inline-block;
&:before{
content: "";
position:absolute;
width:100%;
height:100%;
background-color:rgba($gray-dark,0.25);
top:0;
left:0;
z-index:2;
display:flex;
justify-content:center;
align-items:center;
@include transition(all 0.3s ease);
@include opacity-h();
}
&:after{
content:"";
background-position:center;
background: url('#{$image-theme-path}plus-cate.png') no-repeat;
@include square(40px);
position:absolute;
top:calc(50% - 20px);
left:calc(50% - 20px);
@include transition(all 0.3s ease);
@include opacity-h();
z-index:3;
}
img{
margin:auto;
@include border-radius(50%);
}
}
.product-cat-info{
padding:0 15px;
margin-top: 10px;
}
.item-title{
font-size:16px;
font-weight: 600;
margin: 0;
}
}
&.slider4{
text-align:center;
.slick-slider{
overflow: unset;
}
.item-product-cat-content{
background:$white;
margin-bottom:30px;
&:last-child{
margin-bottom:0;
}
&:hover{
.item-image,.item-thumbnail{
border-color: #de2828;
img{
-webkit-animation-name: rotate2;
animation-name: rotate2;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
}
}
}
.item-image,.item-thumbnail{
position:relative;
@include border-radius(50%);
overflow:hidden;
display: inline-block;
border: 2px solid #e7e7e7;
img{
margin:auto;
@include border-radius(50%);
}
}
.product-cat-info{
padding:0 15px;
margin-top: 15px;
}
.item-title{
font-size:16px;
text-transform: uppercase;
font-weight: 600;
margin: 0;
}
}
&.slider5{
@media(max-width: $screen-md-max){
.slick-list{
margin: 0 -7.5px;
.item{
padding: 0 7.5px;
}
}
}
text-align: center;
.item-product-cat-content{
&:hover{
.item-icon, .item-image{
i, img{
-webkit-animation-name: shakes;
animation-name: shakes;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
}
}
}
.item-title{
margin:0;
font-size:16px;
text-transform:uppercase;
}
.item-image{
margin: 0 0 20px;
img{
margin: auto;
clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0 100%, 0 22%);
}
}
.item-icon{
color:$white;
font-size:20px;
a{
color:$white;
i{
display:inline-block;
@include square(40px);
@include border-radius(50%);
border:1px solid #515151;
text-align:center;
line-height:38px;
}
}
}
}
&.slider6{
@media(max-width: $screen-md-max){
.slick-list{
margin: 0 -7.5px;
.item{
padding: 0 7.5px;
}
}
}
&:hover{
.slick-arrow{
@include opacity-s();
}
}
.item-product-cat-content{
text-align:center;
padding:20px 15px;
background: $white;
&:hover{
.item-image,.item-thumbnail{
img{
-webkit-animation-name: shakes;
animation-name: shakes;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
}
}
}
.item-image,.item-thumbnail{
position:relative;
display:inline-block;
overflow:hidden;
}
.item-title{
margin:5px 0 0;
font-size:16px;
text-transform:uppercase;
position: relative;
padding-bottom: 10px;
&:before{
position: absolute;
content: "";
background: $theme-color;
@include size(40px, 2px);
bottom: 0;
left: 50%;
@include transform(translateX(-50%));
}
a{
color:$gray-dark;
&:hover{
color:$theme-color;
}
}
}
.slick-dots{
margin-top:15px;
li{
margin: 0 7.5px;
button{
background: rgba($gray-dark, .3);
}
&.slick-active{
button{
background: $theme-color;
}
}
}
}
}
}
/************************************************************************************************
Bingo Slider
*************************************************************************************************/
.bwp-slider{
&.default{
position:relative;
.slick-arrow{
@include opacity-s();
@include square(21px);
border:1px solid $gray-dark;
color:$gray-dark;
font-size:8px;
line-height:18px;
font-weight:600;
top:6px;
background:$white;
&:hover{
background:$theme-color;
color:$white;
border-color:$theme-color;
}
&.fa-angle-left{
right:26px;
left:auto;
}
&.fa-angle-right{
right:0;
}
}
.content-image{
display:inline-block;
overflow:hidden;
@include border-radius(30px);
border:2px solid $border-color;
img{
margin:auto;
@include transition(all 0.5s ease);
}
&:hover{
img{
@include transform(scale(1.1));
}
}
}
.button-view{
position:relative;
top:-2px;
a{
display:inline-block;
font-size:13px;
font-weight:500;
border-bottom:1px solid $gray-dark;
&:hover{
border-color:$theme-color;
}
}
}
.content-title{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
@include rtl-padding-right(60px);
align-items:center;
margin-bottom:30px;
h2{
margin:0;
font-size:28px;
position:relative;
display:inline-block;
@media (max-width:$screen-xs-max){
font-size:18px;
}
i{
color:$white;
@include square(30px);
background:#4bc732;
line-height:30px;
text-align:center;
display:inline-block;
@include rtl-margin-right(10px);
@include border-radius(50%);
font-size:13px;
position:relative;
top:-5px;
}
&:after{
display:inline-block;
content:".";
color:$theme-color;
}
}
}
}
&.slider-homepage1{
.content-image img{
width:100%;
}
span{
display:inline-block;
}
.slick-dots{
position:absolute;
bottom:0;
z-index:10;
}
.item-info{
position:absolute;
width:100%;
@include opacity-h();
@include transition(all 0.3s ease);
margin-top:-100px;
transition-delay:0.6s;
display:flex;
&.vertical_middle{
top:50%;
@include transform(translateY(-50%));
}
&.vertical_top{
top:0;
}
&.vertical_bottom{
bottom:0;
}
&.horizontal_center{
justify-content:center;
}
&.horizontal_start{
justify-content:flex-start;
}
&.horizontal_end{
justify-content:flex-end;
}
&.align_left{
text-align:left;
}
&.align_right{
text-align:right;
}
&.align_center{
text-align:center;
}
&.align_justify{
text-align:justify;
}
}
.button-slider{
display:inline-block;
&:after{
content: "\e912";
font-family: icomoon;
font-size: 15px;
font-weight: 400;
top: 2px;
display: inline-block;
position: relative;
@include rtl-margin-left(7.5px);
@include transition(all 0.2s ease);
}
}
.slick-list{
margin:0;
.item{
padding:0;
}
}
.slick-current{
.item-info{
@include opacity-s();
margin-top:0;
}
}
.slick-arrow{
@include opacity-s();
@include square(45px);
line-height:43px;
font-size:15px;
font-weight:400;
&.fa-angle-left{
left:30px;
&:before{
content: "\e915";
font-family: "icomoon";
}
}
&.fa-angle-right{
right:30px;
&:before{
content: "\e912";
font-family: "icomoon";
}
}
@media (max-width:$screen-sm-max){
display:none !important;
}
}
}
&.slider-homepage2{
.content-image img{
width:100%;
}
span{
display:inline-block;
}
.slick-dots{
position:absolute;
bottom:0;
z-index:10;
}
.item-info{
position:absolute;
width:100%;
@include opacity-h();
@include transition(all 0.3s ease);
margin-top:-100px;
transition-delay:0.6s;
display:flex;
&.vertical_middle{
top:50%;
@include transform(translateY(-50%));
}
&.vertical_top{
top:0;
}
&.vertical_bottom{
bottom:0;
}
&.horizontal_center{
justify-content:center;
}
&.horizontal_start{
justify-content:flex-start;
}
&.horizontal_end{
justify-content:flex-end;
}
}
.button-slider{
display:inline-block;
&:after{
content: "\e912";
font-family: icomoon;
font-size: 15px;
font-weight: 400;
top: 2px;
display: inline-block;
position: relative;
@include rtl-margin-left(7.5px);
@include transition(all 0.2s ease);
}
}
.slick-list{
margin:0;
.item{
padding:0;
}
}
.slick-current{
.item-info{
@include opacity-s();
margin-top:0;
}
}
.slick-arrow{
@include opacity-s();
@include square(45px);
line-height:43px;
font-size:15px;
font-weight:400;
&.fa-angle-left{
left:30px;
&:before{
content: "\e915";
font-family: "icomoon";
}
}
&.fa-angle-right{
right:30px;
&:before{
content: "\e912";
font-family: "icomoon";
}
}
@media (max-width:$screen-sm-max){
display:none !important;
}
}
@media (max-width:$screen-sm-max){
.content-image{
img{
min-height:420px;
object-fit: cover;
}
}
}
}
&.slider-homepage3{
span{
display:inline-block;
}
.slick-dots{
position:absolute;
bottom:0;
z-index:10;
}
.item-info{
position:absolute;
width:100%;
@include opacity-h();
@include transition(all 0.3s ease);
margin-top:-100px;
transition-delay:0.6s;
display:flex;
&.vertical_middle{
top:50%;
@include transform(translateY(-50%));
}
&.vertical_top{
top:0;
}
&.vertical_bottom{
bottom:0;
}
&.horizontal_center{
justify-content:center;
}
&.horizontal_start{
justify-content:flex-start;
}
&.horizontal_end{
justify-content:flex-end;
}
}
.button-slider{
display:inline-block;
&:after{
content: "\e912";
font-family: icomoon;
font-size: 15px;
font-weight: 400;
top: 2px;
display: inline-block;
position: relative;
@include rtl-margin-left(7.5px);
@include transition(all 0.2s ease);
}
}
.slick-list{
margin:0;
padding:0 20.5%;
.item{
padding:0;
}
}
.content-image img{
width:100%;
}
.slick-current{
.item-info{
@include opacity-s();
margin-top:0;
}
}
.slick-arrow{
@include opacity-s();
@include square(45px);
line-height:43px;
font-size:15px;
font-weight:400;
&.fa-angle-left{
left:30px;
&:before{
content: "\e915";
font-family: "icomoon";
}
}
&.fa-angle-right{
right:30px;
&:before{
content: "\e912";
font-family: "icomoon";
}
}
@media (max-width:$screen-sm-max){
display:none !important;
}
}
@media (max-width:$screen-md-max){
.slick-list{
padding:0 10%;
}
}
@media (max-width:$screen-xs-max){
.slick-list{
padding:0;
}
}
}
}
.social-link{
padding: 0;
li{
display: inline-block;
text-align: center;
margin: 0 13px;
&:first-child{
@include rtl-margin-left(0);
}
&:last-child{
@include rtl-margin-right(0);
}
a{
i{
font-size: 14px;
color: $gray-dark;
&.social_instagram{
color:#bc1a1a;
}
&.social_googleplus{
color:#dd4b39;
}
&.social_twitter{
color:#1b80be;
}
&.social_facebook{
color:#3b5998;
}
&.social_linkedin{
color:#1da1f2;
}
&.social_pinterest{
color:#bc1a1a;
}
}
}
&:hover{
a{
i{
color: $white;
}
}
}
}
}
/************************************************************************************************
Bingo Woo Countdown
*************************************************************************************************/
.bwp-countdown{
&.slider{
border:2px solid $orange-second !important;
padding:20px 25px !important;
&:hover{
.slick-arrow{
@include opacity-s();
}
}
.slick-list{
margin:0 -13px;
}
.title-block{
h2{
margin: 0 0 20px;
font-size: 24px;
}
}
.item-product-content{
margin:0 !important;
flex-wrap:wrap;
}
.rating{
.review-count{
display: inline-block;
}
}
.products-content{
text-align: center;
margin-top: 15px !important;
h3{
font-size: 16px !important;
}
}
.price{
font-size:18px;
color:$text-color;
margin-bottom:5px;
ins{
text-decoration:none;
}
}
.available-box{
margin-top:20px;
.content-available{
display:flex;
justify-content:space-between;
font-weight:500;
font-size:12px;
label{
margin-bottom:0;
@include rtl-margin-right(5px);
color:#a3a3a3;
}
.available{
color:$gray-dark;
}
.sold{
color: #ff4545;
}
}
.percent{
position:relative;
height:6px;
width:100%;
@include border-radius(10px);
background:#e1e1e1;
margin-bottom:6px;
.content{
position:absolute;
top:0;
left:0;
height:5px;
@include border-radius(10px);
background:#59b543;
}
}
}
.item-countdown{
display:flex;
align-items:center;
justify-content: space-between;
margin-top:20px;
flex-wrap:wrap;
.title-countdown{
@include rtl-text-align-left();
h2{
font-size:12px;
text-transform:uppercase;
margin:0;
}
span{
font-size:12px;
font-weight:600;
color:#969696;
}
}
.countdown-content{
>span{
display:inline-block;
@include rtl-margin-right(5px);
text-align:center;
&:last-child{
@include rtl-margin-right(0);
}
.countdown-amount{
font-size:16px;
font-weight:600;
color:$white;
@include square(45px);
@include border-radius(50%);
display:inline-block;
text-align:center;
line-height:45px;
background:$theme-color;
}
.countdown-text{
font-size:10px;
text-transform:uppercase;
font-weight:700;
display:block;
margin-top:3px;
color:$gray-dark;
}
}
}
}
@media (max-width:$screen-xs-max){
.item-product-content{
>*{
width:100%;
flex:0 0 100%;
}
.products-content{
margin-top:20px !important;
}
}
}
@media (max-width:$screen-xs){
.title-block{
h2{
font-size: 20px;
}
}
}
}
&.slider2{
@media(max-width: $screen-md-max){
.slick-list{
margin: 0 -7.5px;
.item-product{
padding: 0 7.5px;
}
}
}
.item-product-content{
display: flex;
background: $white;
padding: 20px 10px!important;
flex-wrap:wrap;
margin: 0 !important;
>*{
width:50%;
flex:0 0 50%;
padding:0 10px;
}
}
.rating{
margin-bottom: 3px;
.review-count{
display: inline-block;
}
}
.cat-products{
display:none;
}
.product-title{
font-size: 18px !important;
font-weight: 600 !important;
}
.price{
font-size:18px;
font-weight: 600;
margin-bottom:5px;
ins{
text-decoration:none;
}
}
.available-box{
margin-top:20px;
.content-available{
display:flex;
justify-content:space-between;
font-weight:600;
font-size:12px;
label{
margin-bottom:0;
@include rtl-margin-right(5px);
color:#a3a3a3;
}
.available{
color:$gray-dark;
}
.sold{
color:$theme-color;
}
}
.percent{
position:relative;
height:6px;
width:100%;
@include border-radius(10px);
background:#e1e1e1;
margin-bottom:8px;
.content{
position:absolute;
top:0;
left:0;
height:6px;
@include border-radius(10px);
background:#25ab44;
}
}
}
.item-countdown{
display:flex;
align-items:center;
margin-top:25px;
flex-wrap:wrap;
@include rtl-text-align-left();
.title-countdown{
@include rtl-margin-right(10px);
h2{
font-size:14px;
text-transform:uppercase;
margin:0 0 -5px;
}
span{
font-size:12px;
font-weight:500;
color:#a3a3a3;
}
}
.countdown-content{
>span{
display:inline-block;
@include rtl-margin-right(7px);
text-align:center;
&:last-child{
@include rtl-margin-right(0);
}
.countdown-amount{
font-size:16px;
font-family: $font-family-second;
color:$white;
@include square(45px);
@include border-radius(50%);
display:inline-block;
text-align:center;
line-height:45px;
background: #de2828;
}
.countdown-text{
font-size:11px;
text-transform:uppercase;
font-weight:700;
display:block;
margin-top:3px;
color:$gray-dark;
}
}
}
}
ul.slick-dots{
margin-top: 20px;
li{
margin: 0 7.5px;
button{
background: rgba($gray-dark, .3);
}
&.slick-active{
button{
background: $theme-color;
}
}
}
}
@media (max-width:$screen-xs-max){
.item-product-content{
>*{
width:100%;
flex:0 0 100%;
}
.products-content{
margin-top:20px !important;
}
}
}
}
}
/************************************************************************************************
Bingo Image Gallery
*************************************************************************************************/
.bwp-gallery{
.slick-slide{
text-align: center;
img{
display: inline-block;
}
}
.slick-dots{
position: absolute;
bottom: 15px;
padding: 0;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
li{
button{
border: 0;
opacity: 0.4;
background: $gray-dark;
@include square(16px);
transform: none;
&:hover{
background: $white;
opacity: 1;
}
}
&.slick-active{
button{
background: $white;
opacity: 1;
}
}
}
}
}
/************************************************************************************************
Wp Tag Cloud
*************************************************************************************************/
.vc_wp_tagcloud{
.widget_tag_cloud{
h2.widgettitle{
font-size: 18px;
border-bottom: 1px solid #343434;
margin-top: 0;
margin-bottom: 10px;
padding-bottom: 14px;
}
}
}
.wpb-portfolio.slider{
.portfolio-item:first-child{
margin-bottom:30px;
}
.portfolio-item-inner{
position: relative;
overflow: hidden;
&:before{
content: "";
position: absolute;
@include square(100%);
top: 0;
@include rtl-left(0);
background: rgba($gray-dark,0.35);
@include transition(all 0.3s ease-in-out);
@include scale(0.9);
@include opacity-h;
z-index:1;
}
.portfolio-img{
img{
@include transition(transform 0.3s ease);
}
}
&:hover{
&:before{
@include scale(1);
@include opacity-s;
}
.pitem-text{
a{
@include opacity-s;
top: -17.5px;
}
}
.portfolio-img{
img{
@include scale(1.1);
@include transition(transform 0.3s ease);
}
}
}
.pitem-text{
position: absolute;
top: 50%;
@include rtl-left(50%);
width: 100%;
display: inline-block;
text-align: center;
z-index:9;
@include translate(-50%, -50%);
a{
position: absolute;
top: -30px;
@include opacity-h;
color: $text-color;
background: $white;
line-height: 35px;
z-index:9;
text-align: center;
@include square(35px);
@include transition(top 0.3s ease-in-out);
&:hover{
color: $white;
background: $theme-color;
}
span{
line-height: 35px;
}
}
.item-more{
@include rtl-right(calc( 50% - 40px));
}
.item-popup{
@include rtl-left(calc(50% - 40px));
}
}
}
}
.bwp-widget-feature-product{
border:1px solid $border-color;
@include border-radius(8px);
padding:25px 15px 20px;
.title-feature{
font-size:22px;
margin:0;
border-bottom:2px solid $border-color;
padding-bottom:10px;
margin-bottom:20px;
&:after{
content:".";
display:inline-block;
color:$theme-color;
}
}
ul{
padding:0;
list-style:none;
}
.item-product{
display:flex;
padding-bottom:20px;
margin-bottom:20px;
border-bottom:1px solid $border-color ;
&:last-child{
padding-bottom:0;
margin-bottom:0;
border-bottom:0;
}
}
.item-thumb{
flex:0 0 90px;
}
.content-bottom{
@include rtl-padding-left(15px);
.rating{
margin-bottom:0;
font-size:14px;
}
.item-title{
margin-top: 0px;
font-weight: 500;
display:block;
margin-bottom:5px;
font-size:12px;
line-height:18px;
a{
color: $gray-dark;
&:hover{
color: $theme-color;
}
}
}
.price {
line-height: 100%;
display: inline-block;
font-size:14px;
del{
line-height: 100%;
color:rgba($text-color,0.8);
font-size:12px;
}
}
.rating{
.review-count{
display: inline-block;
position: relative;
top: -3px
}
.star-rating{
font-size:12px;
}
.review-count{
display: inline-block;
position: relative;
top: -3px;
font-size: 10px;
}
}
}
@media (max-width:$screen-md-max) and (min-width:$screen-sm-max){
.title-feature{
font-size:16px;
}
.item-thumb{
flex:0 0 60px;
}
}
}