#content{
position:relative;
min-height:100vh;
}
div.filter-wrap{
position:relative;
margin-left:-18px;
}
.btn-filter{
position: relative;
background: none center center no-repeat;
background-size: cover;
cursor: pointer;
overflow: hidden;
-webkit-transition: border 1s cubic-bezier(0.19,1,.22,1),color .6s cubic-bezier(0.19,1,.22,1);
transition: border 1s cubic-bezier(0.19,1,.22,1), color .6s cubic-bezier(0.19,1,.22,1), background 5s cubic-bezier(0.19,1,.22,1);
padding: 0.5rem 2.5rem;
text-transform: uppercase;
letter-spacing: 2px;
font-family: sans-serif;
text-align: center;
}
@media (min-width: 576px){
.btn-filter{
padding: 1rem 2.5rem;
}
}
.btn-filter .ghost-button-mask {
position: absolute;
display: block;
background: rgba(255,180,255,0.2);
pointer-events: none;
width: 200px;
height: 150px;
-webkit-transform: translate3d(-150%,-80px,0) rotate3d(0,0,1,45deg);
transform: translate3d(-150%,-80px,0) rotate3d(0,0,1,45deg);
-webkit-transition: all .9s cubic-bezier(0.19,1,.22,1);
transition: all .9s cubic-bezier(0.19,1,.22,1);
}
.btn-filter:hover .ghost-button-mask {
background: #fff;
-webkit-transform: translate3d(120%,-100px,0) rotate3d(0,0,1,90deg);
transform: translate3d(120%,-100px,0) rotate3d(0,0,1,90deg);
}
.filter-header{
position:absolute;
top:100%;
left:-180%;
background-image: linear-gradient(45deg, rgba(31,25,67,.46), rgba(12,0,38,.54), rgba(47,33,73,.57)), linear-gradient(to left, rgba(85,17,55,.73), rgba(13,12,63,.51));
color:#fff;
text-shadow: .5px .5px 0 rgba(110,110,110,.6), 0px .5px 0 rgba(110,110,110,.6), -.5px -.5px 0 rgba(110,110,110,.7), -.5px -.5px 0 rgba(110,110,110,.7), -.5px .5px 0 rgba(110,110,110,.7), .5px -.5px 0 rgba(110,110,110,.7);
box-shadow: inset 0px 1px 1px rgba(255,255,255,.55),inset 0px 3px 3px rgba(255,255,255,.25),
inset 0px -1px 1px rgba(255,255,255,.55),inset 0px -3px 3px rgba(255,255,255,.25),
inset 1px 0px 1px rgba(255,255,255,.55),inset 3px 0px 3px rgba(255,255,255,.25),
inset -1px 0px 1px rgba(255,255,255,.55),inset -3px 0px 3px rgba(255,255,255,.25),
0px 2px 2px rgba(0,0,0,.2), 0px 3px 3px rgba(0,0,0,.2),
2px 0px 2px rgba(0,0,0,.1), 3px 3px 3px rgba(0,0,0,.2);
z-index:5;
min-width:122%;
transition: left 1s ease .3s;
}
.filter-header > div{
position:relative;
}
.filter-header.filter-showed{
left:0;
}
.filter-wrap:hover .filter-header:not(.filter-hide){
left:0;
transition: left .3s ease;
}
ul.filter{
list-style:none;
padding: 0;
position:relative;
margin:0;
}
ul.filter > li{
border-top-width:1px;
border-top-style: solid;
border-image: linear-gradient(to right, #ccc 5%, #aaa, #fff);
border-image-slice: 1;
z-index:5;
padding: .4rem 0 .4rem 1.4rem;
}
ul.filter > li:first-child{
border-top:none;
}
ul.filter > li:last-child{
border-bottom-width:1px;
border-bottom-style: solid;
border-image: linear-gradient(to right, #ccc 5%, #aaa, #fff);
border-image-slice: 1;
}
ul.filter > li > div:first-child{
transition: .3s ease-out;
}
ul.filter > li:hover > div:first-child{
padding-left:.5rem;
}
ul.filter > li:hover .filter-content,
ul.filter > li:hover > ul{
visibility: visible;
opacity: 1;
transform: translateX(0px);
transition: .3s ease-out .3s;
}
ul.filter > li .filter-content > ul{
list-style:none;
}
ul.filter > li > div.check-block i,
ul.filter > li > div.check-block.check-show span,
ul.filter > li:hover div.check-block span{
color:rgb(255,183,255);
text-shadow: 1.5px 1.5px 3px rgba(137,77,146,.58), 0px 1.5px 3px rgba(142,67,115,.6), -1.5px -1.5px 3px rgba(142,67,115,.6), -1.5px -1.5px 3px rgba(142,67,115,.6), -1.5px 1.5px 3px rgba(137,77,146,.58), 1.5px -1.5px 3px rgba(142,67,115,.6);
}
ul.filter > li .filter-content{
margin:-1px 0 0 0;
position:absolute;
padding:1rem 0.5rem;
white-space:nowrap;
background-image: linear-gradient(45deg, rgba(31,25,67,.46), rgba(12,0,38,.54), rgba(47,33,73,.57)), linear-gradient(to left, rgba(85,17,55,.73), rgba(13,12,63,.51));
color:#fff;
text-shadow: .5px .5px 0 rgba(110,110,110,.7), 0px .5px 0 rgba(110,110,110,.7), -.5px -.5px 0 rgba(110,110,110,.7), -.5px -.5px 0 rgba(110,110,110,.7), -.5px .5px 0 rgba(110,110,110,.7), .5px -.5px 0 rgba(110,110,110,.7);
box-shadow: inset 0px 1px 1px rgba(255,255,255,.55),inset 0px 3px 3px rgba(255,255,255,.25),
inset 0px -1px 1px rgba(255,255,255,.55),inset 0px -3px 3px rgba(255,255,255,.25),
0px 2px 2px rgba(0,0,0,.2), 0px 3px 3px rgba(0,0,0,.2),
2px 0px 2px rgba(0,0,0,.1), 3px 3px 3px rgba(0,0,0,.2);
left:100%;
top:0;
z-index:5;
visibility: hidden;
opacity: 0;
transform: translateX(10px);
transition: .3s ease-out;
max-height:92vh;
max-width: calc(100vw - 100% - 10px);
overflow:auto;
display: flex;
flex-direction:column;
}
@media (min-width: 576px){
ul.filter > li .filter-content{
padding-left:1rem;
padding-right:1rem;
}
}
ul.filter > li .filter-content > h5{
text-align: center;
margin-bottom: .5rem;
}
ul.filter > li .filter-content > div{
margin-bottom: 1rem;
text-align: center;
}
ul.filter > li .filter-content strong{
color:#fd4;
-ms-text-shadow: 1px 1px 0 rgba(136,85,0,.7), 0px 1px 0 rgba(136,85,0,.7), -1px -1px 0 rgba(136,85,0,.7), -1px -1px 0 rgba(136,85,0,.7), -1px 1px 0 rgba(136,85,0,.7), 1px -1px 0 rgba(136,85,0,.7);
-o-text-shadow: 1px 1px 0 rgba(136,85,0,.7), 0px 1px 0 rgba(136,85,0,.7), -1px -1px 0 rgba(136,85,0,.7), -1px -1px 0 rgba(136,85,0,.7), -1px 1px 0 rgba(136,85,0,.7), 1px -1px 0 rgba(136,85,0,.7);
-moz-text-shadow: 1px 1px 0 rgba(136,85,0,.7), 0px 1px 0 rgba(136,85,0,.7), -1px -1px 0 rgba(136,85,0,.7), -1px -1px 0 rgba(136,85,0,.7), -1px 1px 0 rgba(136,85,0,.7), 1px -1px 0 rgba(136,85,0,.7);
-webkit-text-shadow: 1px 1px 0 rgba(136,85,0,.7), 0px 1px 0 rgba(136,85,0,.7), -1px -1px 0 rgba(136,85,0,.7), -1px -1px 0 rgba(136,85,0,.7), -1px 1px 0 rgba(136,85,0,.7), 1px -1px 0 rgba(136,85,0,.7);
text-shadow: 1px 1px 0 rgba(136,85,0,.7), 0px 1px 0 rgba(136,85,0,.7), -1px -1px 0 rgba(136,85,0,.7), -1px -1px 0 rgba(136,85,0,.7), -1px 1px 0 rgba(136,85,0,.7), 1px -1px 0 rgba(136,85,0,.7);
}
.filter-price,
.filter-size{
min-width: 160px;
}
@media (min-width: 576px){
.filter-price,
.filter-size{
min-width: 300px;
}
}
.filter-size > div.row{
flex-wrap:nowrap!important;
}
@media (min-width: 768px) {
.filter-price:hover,
.filter-size:hover{
min-width:500px;
}
}
.filter-theme,
.filter-style{
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
list-style:none;
}
.filter-theme{
border-bottom:1px dotted #cac;
padding-top: .25rem;
padding-bottom: .25rem;
margin-top: .25rem;
font-size: .875em;
}
@media (min-width: 720px) {
.filter-theme{
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
list-style:none;
border-bottom:1px dotted #cac;
}
}
@media (min-width: 992px) {
.filter-theme{
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
list-style:none;
border-bottom:1px dotted #cac;
}
.theme-content{
max-width:85vw;
}
}
.filter-theme:last-child{
border-bottom:none;
margin-bottom:1rem;
}
.filter-content1{
margin:-1px 0 0 0;
min-height:100%;
list-style:none;
position:absolute;
padding:1rem 2rem;
white-space:nowrap;
left:100%;
top:-1px;
z-index:3;
min-height:100%;
background-image: linear-gradient(45deg, rgba(31,25,67,.46), rgba(12,0,38,.54), rgba(47,33,73,.57)), linear-gradient(to left, rgba(85,17,55,.73), rgba(13,12,63,.51));
color:#fff;
}
.filter-content1 ul{
list-style:none;
}
.filter-content1 strong{
color:#fd4;
-ms-text-shadow: 1px 1px 0 rgba(136,85,0,.7), 0px 1px 0 rgba(136,85,0,.7), -1px -1px 0 rgba(136,85,0,.7), -1px -1px 0 rgba(136,85,0,.7), -1px 1px 0 rgba(136,85,0,.7), 1px -1px 0 rgba(136,85,0,.7);
-o-text-shadow: 1px 1px 0 rgba(136,85,0,.7), 0px 1px 0 rgba(136,85,0,.7), -1px -1px 0 rgba(136,85,0,.7), -1px -1px 0 rgba(136,85,0,.7), -1px 1px 0 rgba(136,85,0,.7), 1px -1px 0 rgba(136,85,0,.7);
-moz-text-shadow: 1px 1px 0 rgba(136,85,0,.7), 0px 1px 0 rgba(136,85,0,.7), -1px -1px 0 rgba(136,85,0,.7), -1px -1px 0 rgba(136,85,0,.7), -1px 1px 0 rgba(136,85,0,.7), 1px -1px 0 rgba(136,85,0,.7);
-webkit-text-shadow: 1px 1px 0 rgba(136,85,0,.7), 0px 1px 0 rgba(136,85,0,.7), -1px -1px 0 rgba(136,85,0,.7), -1px -1px 0 rgba(136,85,0,.7), -1px 1px 0 rgba(136,85,0,.7), 1px -1px 0 rgba(136,85,0,.7);
text-shadow: 1px 1px 0 rgba(136,85,0,.7), 0px 1px 0 rgba(136,85,0,.7), -1px -1px 0 rgba(136,85,0,.7), -1px -1px 0 rgba(136,85,0,.7), -1px 1px 0 rgba(136,85,0,.7), 1px -1px 0 rgba(136,85,0,.7);
}
.filter-decor1{
position:absolute;
height:1px;
width:100%;
background-image: linear-gradient(to right, #fff, #aaa);
top:0;
right:.0;
}
.filter-decor2{
position:absolute;
height:100%;
width:1px;
background-image: linear-gradient(to top, #fff, #aaa);
top:0;
right:0;
}
.filter-decor3{
position:absolute;
height:110%;
width:1px;
background-image: linear-gradient(to top, #fff, #aaa, #ddd);
top:50%;
left:0;
}
.min-max-label{
margin-top:-.5rem;
font-size: .875em;
margin-left:0;
margin-right:0;
}
.btn-reset-wrap{
display:inline-block;
margin-top:1rem;
}
a.btn-reset-range,
a.btn-reset{
text-decoration:none;
vertical-align: top;
padding: .5rem 1rem;
}
a.btn-reset-range:hover,
a.btn-reset:hover{
text-decoration:none;
}
.check-block{
white-space:nowrap;
}
.check-block.check-show i{
transform: rotateY(0deg);
width:1rem;
opacity: 1;
margin-right:.5rem;
margin-left:.0rem;
}
.check-block i{
opacity: 0;
transform-origin: 50% 0%;
transform: rotateY(-90deg);
transition: .3s linear;
width:0;
margin-right:.0rem;
margin-left:.5rem;
}
.btn-search{
color:#fd6;
-ms-text-shadow: 1px 1px 0 rgba(136,85,0,.7), 0px 1px 0 rgba(136,85,0,.7), -1px -1px 0 rgba(136,85,0,.7), -1px -1px 0 rgba(136,85,0,.7), -1px 1px 0 rgba(136,85,0,.7), 1px -1px 0 rgba(136,85,0,.7);
-o-text-shadow: 1px 1px 0 rgba(136,85,0,.7), 0px 1px 0 rgba(136,85,0,.7), -1px -1px 0 rgba(136,85,0,.7), -1px -1px 0 rgba(136,85,0,.7), -1px 1px 0 rgba(136,85,0,.7), 1px -1px 0 rgba(136,85,0,.7);
-moz-text-shadow: 1px 1px 0 rgba(136,85,0,.7), 0px 1px 0 rgba(136,85,0,.7), -1px -1px 0 rgba(136,85,0,.7), -1px -1px 0 rgba(136,85,0,.7), -1px 1px 0 rgba(136,85,0,.7), 1px -1px 0 rgba(136,85,0,.7);
-webkit-text-shadow: 1px 1px 0 rgba(136,85,0,.7), 0px 1px 0 rgba(136,85,0,.7), -1px -1px 0 rgba(136,85,0,.7), -1px -1px 0 rgba(136,85,0,.7), -1px 1px 0 rgba(136,85,0,.7), 1px -1px 0 rgba(136,85,0,.7);
text-shadow: 1px 1px 0 rgba(136,85,0,.7), 0px 1px 0 rgba(136,85,0,.7), -1px -1px 0 rgba(136,85,0,.7), -1px -1px 0 rgba(136,85,0,.7), -1px 1px 0 rgba(136,85,0,.7), 1px -1px 0 rgba(136,85,0,.7);
padding: 1rem 2.5rem;
text-transform: uppercase;
letter-spacing: 2px;
font-family: sans-serif;
text-align: center;
background-size: cover;
cursor: pointer;
overflow: hidden;
}
.btn-search:hover{
color:rgb(255,183,255);
text-shadow: 1.5px 1.5px 3px rgba(137,77,146,.58), 0px 1.5px 3px rgba(142,67,115,.6), -1.5px -1.5px 3px rgba(142,67,115,.6), -1.5px -1.5px 3px rgba(142,67,115,.6), -1.5px 1.5px 3px rgba(137,77,146,.58), 1.5px -1.5px 3px rgba(142,67,115,.6);
}
.filter-active{
color:rgb(255,183,255);
text-shadow: 1.5px 1.5px 3px rgba(137,77,146,.58), 0px 1.5px 3px rgba(142,67,115,.6), -1.5px -1.5px 3px rgba(142,67,115,.6), -1.5px -1.5px 3px rgba(142,67,115,.6), -1.5px 1.5px 3px rgba(137,77,146,.58), 1.5px -1.5px 3px rgba(142,67,115,.6);
}
#stock-block{
cursor:pointer;
}
.sticky {
position: fixed;
}
#filter-search{
text-align:center;
}
#filter-search span{
z-index:5;
white-space:nowrap;
}
ul.filter > li .filter-content ul{
display:flex;
flex-wrap: wrap;
padding-left:0.5rem;
padding-right:0.5rem;
}
@media (min-width: 576px){
ul.filter > li .filter-content ul{
display:unset;
flex-wrap: unset;
padding-left:2rem;
padding-right:0rem;
}
}
.filter-content > ul > li{
min-width:5rem;
}
#range-price-mob{
font-size:65%;
}
.hmob{
display:none;
}
@media (min-width: 576px){
.filter-content > ul > li{
min-width:15rem;
}
#range-price{
margin-left:1rem!important;
margin-right:1rem!important;
}
#range-width{
margin-right:1rem!important;
}
#range-height{
margin-right:1rem!important;
}
.dmob{
display:none;
}
.hmob{
display:block;
}
.d-wide-grow{
flex-grow: 1;
}
.d-wife-flex{
display: flex;
align-items: center;
white-space: nowrap;
}
}