body .loader { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(255,255,255,0.5); z-index: 6; transition: 0.3s ease-in-out; }
body .loader img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 60px; }
body.loading .loader { display: block !important; }

#lobby { display: none; }
#GridLeft { float: none; width: auto; position: relative; z-index: 1; }

#GridPage { float: none; max-width: 1170px; margin: 0 auto; }
#PageBreadCrumps { max-width: 1170px; margin: 25px auto 16px; padding: 0 15px; }
#SiteGridContainer { max-width: 100%; padding: 0; }
.page-titles { text-align: center; margin-bottom: 18px; }
.page-titles h1 { font-size: 275%; font-family: 'source_sans_pro_bold'; line-height: 0.7; letter-spacing: 1.08px; margin-bottom: 0; margin-top: 0; }
.page-titles h2 { font-family: 'source_sans_proregular'; font-size: 125%; margin-top: 18px; line-height: 0.8; letter-spacing: 0.08px; margin-bottom: 0; }
.filter-search-menu-nav { float: none; }
.filter-navigation { background-color: #F7F7F7; }
body .loader { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(255,255,255,0.5); z-index: 6; transition: 0.3s ease-in-out; }
body .loader img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 60px; }
body.loading .loader { display: block !important; }

#lobby { display: none; }

.filter-nav { position: relative; /* flex: 1; */ width: 20%; margin: 0px 0px; transition: 0.3s ease-in-out; }
.filter-nav.active { /* box-shadow: 0px 2px 15.2px 0.8px rgb(0 0 0 / 20%); */ /* border-color: #dddddd; */ /* background: #fff; */ transition: 0.5s ease-in-out; padding-bottom: 0px; }


.filter-nav0 { width: 14%; }
.filter-nav4 { width: 25%; }
.filter-nav2 { width: 21%; }
.filter-navigation-inner { display: flex; margin: 0 auto; height: 69px; align-items: flex-start; max-width: 1220px; }
.filter-navigation ul { list-style: none; padding-left: 0; }
.filter-navigation-inner .button-title-filter { position: relative; z-index: 2; display: flex; justify-content: space-between; padding: 0 12px 0 21px; align-items: center; height: 74px; margin-left: 1px; }
.filter-nav:before { content: ""; position: absolute; left: 0; right: 0; height: 52px; top: -15px; /* background: #fff; */ z-index: 2; opacity: 0; transition: 0.3s ease-in-out; }
.filter-nav.active .button-title-filter { max-width: 93%; margin: 0; background: #fff; width: auto; box-shadow: 0px 2px 15.2px 0.8px rgb(0 0 0 / 20%); border-color: #dddddd; border-top-right-radius: 5px; }
.filter-navigation-inner .filter-nav .clearButtons { display: none; }
.filter-navigation-inner .filter-nav.active .clearButtons { display: block; }
.filter-navigation-inner .filter-nav .clearButton { background: #fff; border-radius: 5px; border: solid 1px #dddddd; color: #232323; font-family: 'source_sans_proregular'; align-items: center; justify-content: center; position: relative; display: none; }
.filter-navigation-inner .filter-nav .clearButton svg { fill: #78c7e3; position: absolute; left: 4px; }
.filter-navigation-inner .filter-nav.hasFilter .clearButton.wfiltter { display: flex; }
.filter-navigation-inner .filter-nav:not(.hasFilter) .clearButton.noFiltter { display: flex; }
.filter-navigation-inner .button-title-filter a.filterAncror { color: inherit; font-family: 'source_sans_proregular'; font-size: 107%; }
.filter-navigation-inner .filter-nav.active .button-title-filter a.filterAncror { font-family: 'source_sans_pro_semibold'; }
.filter-navigation-inner .button-title-filter a.filterAncror svg { height: 100%; position: absolute; top: 0; left: 0; }
.filter-navigation-inner .button-title-filter a.filterAncror span { margin: 0; margin-left: 10px; height: 7px; display: inline-block; position: relative; }
.filter-navigation .filter-nav ul.offerNav { overflow: hidden; transition: 0.3s ease-in-out; padding-top: 0; width: 100%; padding: 0px 10px 0px 21px; opacity: 0; pointer-events: none; max-height: 400px; overflow-y: auto; z-index: 3; margin-top: -15px; position: relative; background: #fff; box-shadow: 4px 0px 4px -2.2px rgb(0 0 0 / 20%); border-color: #dddddd; border-bottom: 0; pointer-events: none; }


.filter-navigation .filter-nav.active ul.offerNav { transition: 0.5s ease-in-out; opacity: 1; pointer-events: auto; }
.filter-navigation .filter-nav2 ul.offerNav { margin-top: 0px; }
.checkbox-wrapper { display: flex; margin-bottom: 12px; width: 100%; /* border: 1px solid; */ }
.checkbox-wrapper label { font-size: 95%; margin-left: 5px; margin-bottom: 0; font-family: 'source_sans_proregular'; font-weight: normal; width: 200px; line-height: 1.2; }
.filter-nav0 .checkbox-wrapper label { width: 110px; }
.checkbox-wrapper .checkboxfilter { margin-top: 0; border:0px;}

.filter-navigation .checkbox-filter:before { background: #fff; border: 2px solid #ddd; border: none; }
.filter-navigation .checkbox-filter:checked:after { background: transparent; background-image: url('../../../000Frames/site/images/v-b.png'); background-size: 17px 15px; background-repeat: no-repeat; }

.selectedFilter { color: #666666; font-size: 87%; margin-bottom: 14px; display: block; margin-top: 10px; }
.selectedFilter span:last-child { display: none; }
span.catNotice { font-size: 79%; font-weight: bold; color: #7f7f7f; position: absolute; top: 53px; z-index: 2; left: 22px; opacity: 0; transition: 0.3s ease-in-out; }
.filter-nav.active span.catNotice { opacity: 1; }
.filter-nav .viewItems { padding: 0px 15px 15px 15px; opacity: 0; transition: 0.3s ease-in-out; background: #fff; box-shadow: 4px -4px 4px -2.2px rgb(0 0 0 / 20%); }
.filter-nav.active .viewItems { opacity: 1 }
.filter-nav .viewItems a { height: 56px; display: flex; align-items: center; justify-content: center; color: #000; width: 100%; border: 2px solid #E4E4E4; border-radius: 30px; font-family: 'source_sans_pro_bold'; letter-spacing: 1px; }


@media(min-width:992px) {
    .catalogItemBox-Container { width: 25%; }
}

@media(max-width:991px) {
    header nav .outer-icons .top-bar > li#navbar-open-filter { opacity: 0; pointer-events: none; }
}

@media(max-width:991px) and (min-width:768px) {
    .filter-navigation-inner { flex-wrap: wrap; height: 135px; justify-content: center; }
    .filter-nav { width: 33%; height: 67px; }
    #GridPage { width: 100%; }
    .catalogItemBox-Container, .catalogCategoreyBox-Container { width: 33.33% }
}

@media(min-width:768px) {
    .filter-navigation.affix { top: 0; left: 0; width: 100%; transform: translateY(-50px); transition: 0.3s ease-in-out; }
    .filter-navigation.affix.pinned { transform: translateY(50px); }
    .filter-navigation .filter-nav.hasFilter:after { content: ""; position: absolute; top: 0px; width: 100%; height: 2px; background: #6bc6e1; z-index: 1; }
    .viewItems-wrapper, .filterTitle, .filterBtns { display: none; }
    .filter-navigation-inner .filter-nav .clearButton { font-size: 106%; width: 64px; height: 34px; }
    .clear-all-btn { display: none; }
}

@media(max-width:991px) and (min-width:768px) {
    .filter-navigation.affix { transform: translateY(-85px); }
}

@media(max-width: 767px) {
    #navbar-wishlist { position: relative; left: 7%; }
    #navbar-cart { position: relative; left: 3.5%; }
    body.openFilter { overflow: hidden; max-height: 100vh; }
    #GridLeft { height: 100vh; position: fixed; z-index: 4; width: 100%; max-width: 86%; right: -86%; top: 0; -webkit-transition: right 200ms ease-in-out; -moz-transition: right 200ms ease-in-out; -o-transition: right 200ms ease-in-out; -ms-transition: right 200ms ease-in-out; transition: right 200ms ease-in-out; }
    body.openFilter #GridLeft { right: 0% }
    .filter-navigation { position: absolute; right: 0; width: 100%; top: 0px; height: 100%; background: #fff; padding-top: 60px; }
    .filter-navigation h2 { padding: 0px 20px; color: #666666; font-family: 'source_sans_pro_semibold'; margin-bottom: 20px; margin-top: 0; }
    .filter-navigation ul { flex-wrap: wrap; border-top: 1px solid #EEEEEE; }
    .filter-nav { width: 100%; margin: 0; padding: 0 0px; border-bottom: 1px solid #EEEEEE; transition: 0.3s ease-in-out; position: unset; flex: auto; }
    .filter-nav.active { /* padding: 0px 20px; */ box-shadow: none; border: none; border-bottom: 1px solid #EEEEEE; }
    .filter-nav.hasFilter { border-top: 2px solid #6bc6e1; }
    .filter-nav0 { display: none; }
    .filter-navigation-inner .button-title-filter a.filterAncror span { display: none; }
    .filter-search-menu-nav.collapse, .filter-search-menu-nav.collapsing { display: block; top: 0; width: 100%; visibility: visible; max-width: 100%; border: none; right: 0; position: absolute; }
    .filter-navigation .filter-nav ul.offerNav { position: fixed; pointer-events: auto; background: #fff; border-top: none; border-color: #dddddd; transition: 0.1s ease-in-out; height: 100%; max-height: 100vh; transition: 0.3s ease-in-out; top: 0; left: 100%; width: 86%; height: 100%; opacity: 1; padding: 70px 0 170px; margin-top: 0; }
    .filter-navigation .filter-nav ul.offerNav li { width: 100%; margin: 0; padding: 0 0px 0px 20px; border-bottom: 1px solid #EEEEEE; transition: 0.3s ease-in-out; position: unset; }
    .filter-navigation .filter-nav ul.offerNav li.catNotice { padding: 10px 20px 10px; }
    .openFilter .filter-navigation .filter-nav.active ul.offerNav { left: 14%; z-index: 3; }
    .filter-navigation .filter-nav2 ul.offerNav { }
    span.catNotice { display: none; }
    .filter-nav.active span.catNotice { }
    .filter-navigation-inner .button-title-filter { padding: 0; color: #666666; flex-wrap: wrap; height: auto; padding: 0; width: 100%; display: block; }
    .filter-navigation-inner .button-title-filter a { color: inherit; font-family: 'source_sans_proregular'; font-size: 107%; padding: 15px 30px; display: block; }
    .filter-nav.active .button-title-filter { max-width: 100%; overflow: hidden; /* max-height: 50px; */ box-shadow: none; }
    .filter-navigation-inner .filter-nav.active .clearButtons { display: none; }
    .selectedFilter { margin: 0; margin-bottom: 0; position: absolute; width: 50%; right: 10px; text-align: right; max-height: 50px; overflow: hidden; top: 50%; transform: translateY(-50%); pointer-events: none; }

    .filterBtns { display: flex; z-index: 0; position: relative; border: 2px solid #f5f4f4; margin-top: 20px; background: #fff; width: 100%; }
    .filterBtns.affix { position: fixed; top: -64px; left: 0; z-index: 0; }
    .filterBtns.affix.pinned { top: 28px; z-index: 2; }
    .filterBtns.sortOpen { z-index: 2; }
    .filterBtn { display: flex; font-size: 106%; text-align: left; color: #000000; width: 50%; margin: 0; align-items: center; justify-content: center; flex-wrap: wrap; position: relative; padding: 10px 0px 10px 10px; }
    .filterBtn:last-child { text-align: right; padding-right: 10px; }
    .filterBtn:last-child span:before { content: ""; background-image: url(../../../000Frames/site/images/v-b.png); width: 17px; height: 15px; display: inline-block; background-size: cover; margin-right: 5px; opacity: 0; }
    .hasSomeFilter .filterBtn:last-child span:before { opacity: 1; }
    .filterBtn span { width: 100%; font-weight: bold; }
    .filterBtn span svg { width: 18px; height: 15px; transform: rotate(-90deg); margin-left: 6px; top: 2px; position: relative; }
    .sortDrop { max-height: 0px; overflow: hidden; margin: 0; position: absolute; top: 41px; list-style: none; padding: 0; left: -1px; right: -1px; background: #fff; transition: all .15s ease-in; border: 1px solid transparent; padding: 0 15px; opacity: 0; }
    .sortDrop.active { max-height: 100vh; transition: all 0.15s cubic-bezier(0, 0, 1, 1.01); padding: 0px 15px 10px; border-color: #f5f4f4; border-top: 1px solid #fff; opacity: 1; }
    .sortDrop li { padding: 6px 0; }
    .sortDrop .checkbox-filter:before { background: #fff; border: 2px solid #ddd; }
    .sortDrop .checkbox-filter:before { background: #fff; border: 2px solid #ddd; border: none; }
    .sortDrop .checkbox-filter:after { content: ""; position: absolute; width: 20px; height: 20px; }
    .sortDrop .checkbox-filter:checked:after { background: transparent; background-image: url('../../../000Frames/site/images/v-b.png'); background-size: 13px 11px; background-position: center; background-repeat: no-repeat; left: 0; }
    .filter-navigation-inner .filter-nav .button-title-filter .clearButton { display: none; }
    .filter-navigation .filter-nav ul.offerNav .filterTitle { display: flex; width: 86%; justify-content: space-between; border-bottom-width: 6px; position: fixed; top: 0; background: #fff; z-index: 1; padding: 15px 20px; }
    .filter-navigation .filter-nav ul.offerNav .backFilter { }
    .backFilter a, a.clearButton { color: #000; display: flex; font-size: 130%; align-items: center; }
    a.clear-all-btn { position: absolute; top: 15px; right: 20px; z-index: 3; display: none; }
    .hasSomeFilter a.clear-all-btn { display: flex; }
    .filter-navigation .filter-nav ul.offerNav .filterTitle .backFilter svg { width: 26px; height: 13px; margin-right: 5px; }
    .backdropfilters { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: #000; z-index: 3; pointer-events: none; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; opacity: 0; }
    .filter-navigation-inner .filter-nav .clearButton { border: none; height: auto; }
    .filter-navigation-inner .filter-nav .clearButton svg { left: auto; right: -10px; top: 3px; width: 26px; height: 13px; margin-right: 5px; }
    .filter-navigation-inner .filter-nav.active .button-title-filter a.filterAncror { font-family: 'source_sans_proregular'; }
    .checkbox-wrapper { margin-bottom: 0; align-items: center; }
    .checkbox-wrapper label { width: 100%; text-align: left; padding: 15px 0; margin-left: 10px; }
    .sortDrop .checkbox-wrapper label { padding: 0; font-size: 84%; }
    body.openFilter .backdropfilters { opacity: 0.5; pointer-events: auto; }
    .viewItems-wrapper { position: absolute; bottom: 0; left: 0; width: 100%; margin: 0 auto; background: #fff; height: 170px; z-index: 3; display: block; }
    .viewItems { background: #666666; display: flex; align-items: center; width: 280px; height: 50px; justify-content: center; border-radius: 50px; margin: 0 auto; max-width: 90%; }
    .viewItems a { color: #fff; font-family: 'source_sans_proregular'; font-size: 150%; }
    .filter-navigation .checkbox-filter:checked:after { background-size: 13px 12px; }
}