:root {
    font-size: 12px;
    --vividblue: #0974D7;
    --blue: #4D9FC1;
    --green: #008A00;
    --yellow: #FCB63C;
    --red: #EE0200;
    --graylight: #E4E7EC;
    --grayligher: #F2F4F7;
    --gray: #747C83;
    --darkgray: #747C83;
    --w: #fff;
    --b: #1A1A1A;
    --3xblue: linear-gradient(-165deg, var(--w), var(--blue), var(--blue));
    --wback: radial-gradient(at 77% 100%, rgb(180 234 255) 0, transparent 50%), radial-gradient(at 0% 50%, #ddd5ef 0, transparent 50%), radial-gradient(at 99% 2%, #f9f9f9 0, transparent 50%), radial-gradient(at 0% 100%, hsla(210, 0%, 100%, 1) 0, transparent 50%);
    --bback: radial-gradient(at 80% 0%, hsla(189, 0%, 0%, 1) 0, transparent 50%), radial-gradient(at 80% 50%, hsla(246, 49%, 34%, 1) 0, transparent 50%), radial-gradient(at 80% 100%, #0974D7 0, transparent 50%), radial-gradient(at 100% 0%, #4D9FC1 0, transparent 50%), radial-gradient(at 0% 100%, hsla(211, 100%, 17%, 1) 0, transparent 50%);
    --shadow-30: rgba(0, 0, 0, .3);
    --shadow-20: rgba(0, 0, 0, .2);
    --shadow-10: rgba(0, 0, 0, .1);
    --shadow-blue: rgba(55, 45, 133, 0.5);
    --shadow-tblue: rgba(0, 122, 255, 0.5);
    --red: rgba(218, 10, 34, 1);
    --redalpha: rgba(218, 10, 34, .1);
    --bluealpha: rgba(0, 163, 244, 0.16);
    --font05: clamp(10px, 0.8rem + 0.2vw, 13px);
    --font: clamp(14px, 0.75rem + 0.2vw, 14px + 0.25vw);
    --font5: clamp(16px, 0.75rem + 0.5vw, 16px + 0.25vw);
    --font4: clamp(20px, 1.0rem + 0.5vw, 22px + 0.5vw);
    --font3: clamp(30px, 1.25rem + 0.5vw, 30px + 0.5vw);
    --font2: clamp(36px, 1.25rem + 0.5vw, 36px + 0.5vw);
    --font1: clamp(48px, 2.0rem + 1vw, 48px + 2vw);
    --d05: calc(0.5vw + 5px);
    --d10: calc(1vw + 10px);
    --d20: calc(2vw + 20px);
}

:root .dark {
    --bback: radial-gradient(at 77% 100%, hsla(197, 100%, 81%, 1) 0, transparent 50%), radial-gradient(at 0% 50%, hsla(355, 100%, 93%, 1) 0, transparent 50%), radial-gradient(at 99% 2%, hsla(340, 0%, 100%, 1) 0, transparent 50%), radial-gradient(at 0% 100%, hsla(210, 0%, 100%, 1) 0, transparent 50%);
    --wback: radial-gradient(at 80% 0%, hsla(189, 0%, 0%, 1) 0, transparent 50%), radial-gradient(at 80% 50%, hsla(246, 49%, 34%, 1) 0, transparent 50%), radial-gradient(at 80% 100%, hsla(240, 0%, 0%, 1) 0, transparent 50%), radial-gradient(at 100% 0%, hsla(211, 100%, 50%, 1) 0, transparent 50%), radial-gradient(at 0% 100%, hsla(211, 100%, 17%, 1) 0, transparent 50%);
    --lightgray: rgba(42, 50, 63, .3);
    --w: #000;
    --b: #fff;
    --shadow-30: rgba(0, 0, 0, .5);
    --shadow-20: rgba(0, 0, 0, .4);
    --shadow-10: rgba(0, 0, 0, .2);
    --shadow-blue: rgba(55, 45, 133, .5);
    --shadow-tblue: rgba(0, 122, 255, .5);
    --red: rgba(218, 10, 34, 1);
    --redalpha: rgba(218, 10, 34, .1);
}

@media (max-width: 768px) {
    :root {
        --font4: clamp(15px, 1rem + 2vw, 1.5rem);
        --font3: clamp(17px, 1.5rem + 2vw, 2rem);
        --font2: clamp(24px, 1.8736rem + 5vw, 2.75rem);
        --font1: clamp(30px, 3.3525rem + 5vw, 4.375rem);
        --d20: calc(2vw + 30px);
    }
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--w);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--blue)
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--vividblue)
}

/*
@font-face {
    font-family: "Museo";
    src: url("/catalog/fonts/Mus300.woff2");
    font-weight: 300;
    font-style: normal;
    font-display: auto;
}

@font-face {
    font-family: "Museo";
    src: url("/catalog/fonts/Mus500.woff2");
    font-weight: 500;
    font-style: normal;
    font-display: auto;
}
*/
/*
@font-face {
    font-family: "Museo";
    src: url("/catalog/fonts/Mus700.woff2");
    font-weight: 700;
    font-style: normal;
    font-display: auto;
}
*/
/*
@font-face {
    font-family: "Museo";
    src: url("../fonts/Mus900.otf");
    font-weight: 900;
    font-style: normal;
    font-display: auto;
}
*/
/*
.roboto-thin {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.roboto-medium {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.roboto-black {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.roboto-thin-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: italic;
}

.roboto-light-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.roboto-regular-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.roboto-medium-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.roboto-bold-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.roboto-black-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: italic;
}
*/
p, h1, h2, h3, h4, h5, h6, a, i {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.2px;
    color: var(--b);
    font-style: normal;
    transition: all 200ms;
}

script, style {
    display: none !important;
    max-width: 100vw !important
}

html {
    min-height: 100vh;
    scroll-behavior: smooth
}

body {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #111;
    font-size: 14px;
    line-height: 1.4;
    width: 100%;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    background-color: var(--w);
    /* background-image: var(--wback); */
    /* background-size: 100vw 100vh; */
    background-position: top;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.disabled, .hide, disabled, hidden, [disabled], [hidden] {
    display: none !important
}

.wrapper {
    height: auto
}

#content-wrapper {
    padding: 0 0 20px
}

.row {
    margin: 0
}

.tooltip {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
}

button, input, select, textarea {
    background: var(--w)
}

.fa:not(.fa-2x):not(.fa-3x):not(.fa-4x):not(.fa-5x):not(.fa-500px) {
}

h4, h5, h6, .h4, .h5, .h6 {
    font-size: var(--font5);
    padding: 0 0 0.5rem;
    margin: 0
}

.h1, .h2, .h3, h1, h2, h3, title {
    padding: 0.5vw 0;
    margin: 0
}

h1 {
    font-size: var(--font2);
    font-weight: 700
}

h2 {
    font-size: var(--font3);
}

h3 {
    font-size: var(--font4);
}

a {
    color: var(--blue);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    display: flex;
    line-clamp: 3;
}

a:hover, #search .btn:hover {
    text-decoration: none;
    color: var(--vividblue);
    transition: all 200ms;
}

img {
    width: 100%;
    opacity: 1;
    transition: filter 100ms;
}

img:hover {
    width: 100%;
    opacity: 1;
    filter: saturate(110%) contrast(105%) brightness(105%);
    filter: saturate(110%) contrast(105%) brightness(105%);
    transition: filter 100ms
}

br.border {
    width: 100%;
    height: 2px;
    background: var(--graylight);
    content: '';
}

/* CORE FLEX START*/
.flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: left;
    justify-content: flex-start;
    align-content: center;
}

.flex.col {
    flex-direction: column;
    align-content: flex-start;
}

.flex.no-wrap {
    flex-wrap: nowrap;
}

error {
    position: fixed;
    background: white;
    z-index: 3;
    bottom: 0;
}

.center {
    text-align: center;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.apart {
    justify-content: space-between;
    align-content: space-between;
}

.caret {
    border: solid var(--b);
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    margin: -3px 0 0 5px;
    transform: rotate(45deg);
}

.caret.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.caret.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.language-select {
    width: 50px;
}

.caret.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.caret.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.nav-tabs > li {
    float: left;
    margin-bottom: -2px;
}

.nav-tabs > li > a {
    color: var(--blue);
    cursor: default;
    background-color: var(--w);
    border: 2px solid rgba(144, 144, 144, .4);
    border-bottom-color: 2px solid var(--blue);
    padding: 10px 15px;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    color: var(--blue);
    cursor: default;
    background-color: transparent;
    border: 2px solid var(--blue);
    border-bottom: 3px solid #ffffff !important;
}

.dark .nav-tabs > li.active > a, .dark .nav-tabs > li.active > a:focus, .dark .nav-tabs > li.active > a:hover {
    border-bottom: 3px solid #050d20 !important;
}

.text-bold {
    font-weight: 700
}

.text-sm {
    font-size: small
}

.label.label-lg {
    font-size: 14px
}

.initHide, .hide {
    display: none
}

.kill {
    display: none !important
}

.text-xs {
    font-size: x-small
}

.label-round {
    border-radius: 50%;
    font-size: 12px
}

legend {
    font-size: 18px;
    padding: 7px 0
}

label {
    font-weight: 400
}

.required.has-error label {
    font-weight: 600;
    color: var(--vividblue)
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

select.form-control, textarea.form-control, input[type="text"].form-control, input[type="password"].form-control, input[type="datetime"].form-control, input[type="datetime-local"].form-control, input[type="date"].form-control, input[type="month"].form-control, input[type="time"].form-control, input[type="week"].form-control, input[type="number"].form-control, input[type="email"].form-control, input[type="url"].form-control, input[type="search"].form-control, input[type="tel"].form-control, input[type="color"].form-control, .input-group-sm > .form-control, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .btn {
    width: auto;
    border: 2px solid var(--b);
    padding: 0.50vw 1vw;
    height: var(--d20);
    font-size: var(--font5);
    font-weight: 400;
    border-radius: 4px;
    box-shadow: inset 0 -2px 0 var(--w);
    background: var(--w);
    color: var(--b);
}

input.form-control:hover {
    border: 2px solid var(--blue);
    box-shadow: inset 0 -2px 0 var(--w);
}

input.form-control:active, input.form-control:focus {
    border: 2px solid var(--blue);
    box-shadow: inset 0 -2px 0 var(--blue);
}

textarea.form-control {
    width: auto;
    min-width: calc(300px + 10vw);
    height: auto
}

.iframe-container {
    overflow: hidden;
    padding-top: 56.25%;
    position: relative
}

.iframe-container iframe {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.input-group input[value=''] + #clear-coupon {
    display: none
}

.input-group input:not([value='']) + #clear-coupon {
    display: table-cell
}

.input-group input, .input-group select, .input-group .dropdown-menu, .input-group .popover {
    font-size: 12px
}

.input-group .input-group-addon {
    font-size: 16px;
    height: 30px;
    color: var(--darkgray);
}

.featured-title {
    font-weight: 700;
    font-size: 17pt
}

.addButtons {
    padding: 0
}

.product-layout .caption a {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0px 3px 0px 3px;
    color: var(--b);
    font-size: 14px;
}

.product-layout .caption h4 + p {
    display: none;
    -webkit-line-clamp: 2
}

/* Product Page */
#button-cart {
    width: calc(100% - 165px);
    line-height: 1;
    min-height: 49px;
    font-size: 1.1vw;
    border-radius: 3px;
    padding-left: 3vw;
    padding-right: 3vw;
    border-color: transparent;
    z-index: 3;
    position: relative;
}

.dark #button-cart {
    background: rgb(234 179 8);
}

#button-wishlist {
    width: 50px;
    height: 50px;
    line-height: 50px;
    display: inline-block;
    text-align: center;
    padding: 0;
    margin-left: auto;
    margin-right: 0;
    background: var(--redalpha);
    border-radius: 100px;
}

.btn:hover, #button-cart:hover, #button-wishlist:hover {
    box-shadow: 0 .5vw 1vw -.5vw var(--bluealpha);
    color: var(--w);
}

#product .product-tags {
    padding: 0
}

.button-wrapper:hover .circle {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -4px 0 0 -4px;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 10;
    box-shadow: 0 0 8px 0 #FDFCA9 inset, 0 0 22px 0 #FFEB3B, 0 0 8px 0 rgba(255, 255, 255, 0.25);
}

.button-wrapper {
    position: relative;
}

#button-cart {
    z-index: 1;
    position: relative;
    text-decoration: none;
    text-align: center;
    appearance: none;
    display: inline-block;
}

#button-cart:before {
    content: "";
    box-shadow: 0 0 24px 0 var(--shadow-tblue);
    mix-blend-mode: screen;
    transition: opacity 0.3s;
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    border-radius: 999px;
    opacity: 0;
}

#button-cart:after {
    content: "";
    box-shadow: 0 0 23px 0 rgba(136, 193, 255, 0.5) inset, 0 0 8px 0 var(--shadow-tblue);
    transition: opacity 0.3s;
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    border-radius: 999px;
    opacity: 0;
}

.dark #button-cart:before {
    content: "";
    box-shadow: 0 0 24px 0 #FFEB3B;
    mix-blend-mode: screen;
    transition: opacity 0.3s;
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    border-radius: 999px;
    opacity: 0;
}

.dark #button-cart:after {
    content: "";
    box-shadow: 0 0 13px 0 #FDFCA9 inset, 0 0 8px 0 rgba(255, 255, 255, 0.28);
    transition: opacity 0.3s;
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    border-radius: 999px;
    opacity: 0;
}

.button-wrapper:hover #button-cart:before, .button-wrapper:hover #button-cart:after {
    opacity: 1;
}

.button-wrapper:hover .dot {
    transform: translate(0, 0) rotate(var(--rotatation));
}

.button-wrapper:hover .dot:after {
    animation-play-state: running;
}

.dot {
    display: block;
    position: absolute;
    transition: transform calc(var(--speed) / 12) ease;
    width: var(--size);
    height: var(--size);
    transform: translate(var(--starting-x), var(--starting-y)) rotate(var(--rotatation));
}

.dot:after {
    content: "";
    animation: hoverFirefly var(--speed) infinite, dimFirefly calc(var(--speed) / 2) infinite calc(var(--speed) / 3);
    animation-play-state: paused;
    display: block;
    border-radius: 100%;
    background: var(--vividblue);
    width: 100%;
    height: 100%;
    box-shadow: 0 0 5px 0 var(--vividblue), 0 0 4px 0 var(--vividblue) inset, 0 0 12px 11px var(--w);
}

.dark .dot:after {
    content: "";
    animation: hoverFirefly var(--speed) infinite, dimFirefly calc(var(--speed) / 2) infinite calc(var(--speed) / 3);
    animation-play-state: paused;
    display: block;
    border-radius: 100%;
    background: yellow;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 6px 0 #FFEB3B, 0 0 4px 0 #FDFCA9 inset, 0 0 2px 1px rgba(255, 255, 255, 0.26);
}

.dot-1 {
    --rotatation: 0deg;
    --speed: 14s;
    --size: 6px;
    --starting-x: 30px;
    --starting-y: 20px;
    top: 2px;
    left: -16px;
    opacity: 0.9;
}

.dot-2 {
    --rotatation: 122deg;
    --speed: 16s;
    --size: 3px;
    --starting-x: 40px;
    --starting-y: 10px;
    top: 1px;
    left: 0;
    opacity: 0.8;
}

.dot-3 {
    --rotatation: 39deg;
    --speed: 20s;
    --size: 4px;
    --starting-x: -10px;
    --starting-y: 20px;
    top: -8px;
    right: 14px;
}

.dot-4 {
    --rotatation: 220deg;
    --speed: 18s;
    --size: 2px;
    --starting-x: -30px;
    --starting-y: -5px;
    bottom: 4px;
    right: -14px;
    opacity: 0.9;
}

.dot-5 {
    --rotatation: 190deg;
    --speed: 22s;
    --size: 5px;
    --starting-x: -40px;
    --starting-y: -20px;
    bottom: -6px;
    right: -3px;
}

.dot-6 {
    --rotatation: 20deg;
    --speed: 15s;
    --size: 4px;
    --starting-x: 12px;
    --starting-y: -18px;
    bottom: -12px;
    left: 30px;
    opacity: 0.9;
}

.dot-7 {
    --rotatation: 300deg;
    --speed: 19s;
    --size: 3px;
    --starting-x: 6px;
    --starting-y: -20px;
    bottom: -16px;
    left: 44px;
}

@keyframes dimFirefly {
    0% {
        opacity: 1;
    }

    25% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.8;
    }

    75% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@keyframes hoverFirefly {
    0% {
        transform: translate(0, 0);
    }

    12% {
        transform: translate(3px, 1px);
    }

    24% {
        transform: translate(-2px, 3px);
    }

    37% {
        transform: translate(2px, -2px);
    }

    55% {
        transform: translate(-1px, 0);
    }

    74% {
        transform: translate(0, 2px);
    }

    88% {
        transform: translate(-3px, -1px);
    }

    100% {
        transform: translate(0, 0);
    }
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline: none
}

span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg {
    display: inline;
}

.nav-tabs {
    margin: 0;
    border-bottom: 2px solid var(--vividblue);
}

.tab-content {
    margin: var(--font5) 5px;
}

.form-horizontal .form-group {
    margin-right: 0;
    margin-left: 0;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: clamp(280px, 220px + 12vw, 550px);
    flex-grow: 2;
    margin: var(--d05);
}

.form-horizontal .form-group div, .form-horizontal .form-group label {
    text-align: left;
    width: 100%;
    padding: 5px;
}

div.required .control-label:before {
    content: '* ';
    color: red;
    font-weight: 700
}

.open > .dropdown-menu::before {
    display: block;
    width: 10px;
    height: 10px;
    transform: rotate(45deg)
}

.dropdown-menu li > a {
    padding: var(--d05);
}

.dropdown-menu li > a:hover {
    text-decoration: none;
    color: var(--w);
    background-color: var(--blue);
    background-image: var(--3xblue);
    background-repeat: repeat-x
}

@media (orientation: portrait) {
    .mheader {
        width: 100vw;
        max-width: 100vw;
        top: 0;
        right: 0;
        z-index: 100;
        position: fixed
    }
}

header {
    padding: 0.5vh 0;
}

header .container > .row {
    margin: 0;
    padding: var(--d05) 0;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    flex-flow: row nowrap;
}

#logo, #logo img {
    height: auto;
    width: auto;
}

.pagination > li > a, .pagination > li > span {
    position: relative;
    font-size: 14px;
    width: 30px;
    height: 30px;
    padding: 6px 9px;
    text-align: center;
    border-radius: 2px !important;
    margin-left: 8px !important;
    color: var(--b);
    text-decoration: none;
    background-color: transparent;
    border: none;
}

.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
    background-color: var(--blue);
}

.collapse.navbar-collapse {
    background-color: var(--vividblue);
    background: transparent;
    padding: var(--d05);
    margin: auto;
    display: none !important;
    z-index: 3;
    position: absolute;
}

#main-menu .collapse.navbar-collapse {
    top: var(--d20);
    width: 99.25vw;
    left: -1.25vw;
    position: absolute !important;
}

#main-menu .navbar-nav {
    margin: 0;
}

.collapse.navbar-collapse.in {
    display: flex !important;
    flex-flow: column;
}

.collapse.navbar-collapse:before {
    height: 100%;
    width: 100%;
    position: absolute;
    content: '';
    background: inherit;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    /* filter: blur(2px); */
    box-shadow: 0 10px 20px -10px var(--shadow-20);
    border-radius: inherit;
    background-color: rgba(135, 135, 135, .1);
    backdrop-filter: blur(20px) saturate(160%) contrast(45%) brightness(140%);
    z-index: -1;
}

.collapse.navbar-collapse.fixed {
    position: fixed;
    transform: none;
    transition: transform .2s ease-in;
    right: auto;
    left: auto;
    top: calc(2.5vw + 20px);
    background: transparent;
    margin: 0;
    border-radius: 0;
}

.collapse.navbar-collapse.navbar-ex2-collapse {
    z-index: 4;
    left: auto;
}

.dark .collapse.navbar-collapse:before {
    box-shadow: 0 10px 20px -10px var(--shadow-30);
    background-color: rgba(4, 0, 34, .1);
    backdrop-filter: brightness(.5);
}

header.fixed {
    /* position: fixed; */
    transform: none;
    transition: transform .2s ease-in;
    width: 100%;
    z-index: 999999998;
    background: var(--w);
}

header.fixed:before {
    background: var(--w);
    filter: blur(0);
    width: 100vw;
    /* height: var(--font2); */
    top: 0;
    left: -1vw;
    content: "";
    position: fixed;
    display: block;
    z-index: -1;
}

.cart-items .btn-remove-from-cart {
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    background: transparent
}

header .flex > div {
    margin: auto 10px;
    display: flex;
}

header .cart-contents {
    max-height: 60vh;
    overflow-y: auto
}

header .cart-contents div.row {
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 5px;
    padding-top: 5px;
    border-bottom: 1px solid #ddd
}

header .cart-contents div.row > div {
    display: flex;
    align-items: flex-start;
    height: 40px;
    padding-left: 5px;
    padding-right: 5px;
    line-height: 1;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: center
}

header .cart-contents div.row div:first-child img {
    height: 40px;
    width: auto;
    border: 0
}

header .cart-buttons div {
    text-align: center;
    margin-top: 10px
}

header .cart-buttons div.cart {
    padding-right: 7.5px
}

header .cart-buttons div.checkout {
    padding-left: 7.5px
}

header .cart-buttons a {
    display: inline-block;
    padding: 10px 0;
    margin: 0 auto 10px;
    text-align: center;
    width: 100%;
    color: var(--w)
}

header .cart-buttons a.cart {
    background: rgba(48, 56, 65, 1)
}

header .cart-buttons a.cart .fa {
    margin-right: 10px
}

header .cart-buttons a.checkout {
    background: rgba(60, 196, 114, 1);
    text-transform: uppercase
}

header .cart-buttons a.checkout .fa {
    margin-left: 10px
}

header .cart-totals {
    margin-bottom: 10px
}

header .cart-totals div {
    border: 0;
    padding: 4px 8px
}

#top {
    justify-content: space-between;
    height: var(--d20);
    background: var(--b);
    color: var(--w);
    padding: 0 calc(51vw - (1405px / 2));
    margin: auto;
    display: flex;
    flex-flow: row wrap;
}

#top > * {
    width: auto;
}

#top #news-top, #top .teaser {
    font-family: Roboto;
    font-size: var(--font5);
    font-weight: 700;
    position: relative;
    text-align: center;
    background: #4d9fc1;
    padding: 0 var(--d20);
    height: var(--d20);
    line-height: var(--d20);
}

#news-top svg {
    fill: white;
    height: calc((var(--d20) / 2));
    position: relative;
    top: calc((var(--d20) / 2) - var(--font3) / 1.6);
}

#news-top a {
    color: #fff
}

#top .teaser {
    text-align: left;
    background: transparent;
    padding: 0;
    margin-left: 0;
}

#main-menu {
    display: none;
    /* position: absolute; */
}

div#wish-container {
    align-self: flex-end;
    padding: 0 3px;
    border-left: 2px solid #E4E7EC;
    border-right: 2px solid #E4E7EC;
}

#wishlist-total, #compare-total, header #account, header #cart, .navbar-toggle {
    position: relative;
    display: flex;
    height: 100%;
    min-height: var(--d20);
    min-width: var(--d20);
    justify-content: center;
    align-content: center;
    border-radius: 0;
    margin: 0;
    padding: 0;
    float: unset;
    border: none;
}

header #account {
    display: flex;
    flex-flow: column wrap;
    font-weight: 700;
    font-size: var(--font);
    position: relative;
    max-width: 150px;
}

header #account a, .accout-text b {
    color: var(--b)
}

header #account .accout-text p {
    line-height: 0.5;
    color: gray
}

header #account .accout-text {
    display: flex;
    flex-flow: row wrap;
    font-weight: 700;
    color: var(--lightgray);
    line-height: 1;
}

header #account .accout-text p:nth-child(2) {
    line-height: 0.5;
    color: #000000;
    font-weight: bold
}

#button-cart svg, #button-wishlist svg, #darkmode svg, #wishlist-total svg, #compare-total svg, header #account svg, header #cart svg {
    position: relative;
    display: flex;
    width: calc(0.5vw + 20px);
    margin: auto;
    padding: 0;
    height: auto;
    fill: var(--b);
    transition: all 50ms ease;
}

#cart button.btn.btn-danger.btn-xs {
    background: none;
    color: black;
    width: 20px;
    height: 20px;
    padding: 0;
}

/* #button-cart svg:hover,
#wishlist-total svg:hover, #compare-total svg:hover, header #account svg:hover, header #cart svg:hover {
    padding: calc(0.25vw);
    width: calc(1vw + 22px);
    fill: var(--vividblue);
} */
#button-wishlist svg {
    fill: var(--red);
    margin: auto;
}

.flex > div.dropdown {
    margin-left: auto;
}

.count {
    text-align: center;
    display: inline-block;
    position: absolute;
    font-size: var(--font);
    left: auto;
    right: 5px;
    top: 0.2rem;
    width: var(--font5);
    height: var(--font5);
    font-weight: 600;
    line-height: 1.4;
    border-radius: 100px;
    background: var(--blue);
    color: var(--w);
    z-index: 0;
    font-family: monospace;
}

#wish-container .count {
    left: calc(var(--font4));
    top: 0.2rem;
    left: auto;
    right: 0.2rem;
}

#content header #account {
    display: flex;
    flex-flow: row wrap;
    font-weight: 700;
    font-size: var(--font);
    justify-content: flex-start;
}

/**
Product Page
**/
#product-product .left {
    padding: 0;
    border-radius: var(--d05);
}

#product-product .right {
    padding: 0 0 0 calc(15px + 2vw);
    float: unset;
    display: flex;
    flex-flow: row wrap;
    padding-top: 0;
    justify-content: flex-start;
    align-content: flex-start;
    gap: var(--d05);
}

#product-product .rating {
    width: 100%;
    display: flex;
    align-items: center;
}

#product-product .rating p {
    padding: 0;
    margin: 0;
}

#product-product .rating i.fa {
    padding: 0;
    font-size: .6em;
}

#product-product .price-wrap {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
    width: 100%;
    /* padding: 0 0 var(--d05) 0; */
}

#product-product .button {
    min-height: 260px;
    padding: var(--d05);
    background: #F3F3F3;
    gap: var(--d05);
    margin-bottom: 0;
    align-content: space-between;
}

#product-product .input-group-btn .btn, #product-product .input-group .form-control[name^=quantity] {
    background: var(--w);
    width: 42px;
    height: 42px;
    padding: 10px;
    margin: 0;
    border: none;
    color: var(--b);
}

#product-product .input-group {
    width: 134px;
}

#product-product .input-group .form-control, #product-product .input-group-addon, .input-group-btn {
    display: inline-block;
    font-size: large;
    width: auto;
}

#product-product .special-price {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    gap: 10px;
}

#product-product .list-unstyled.stats {
    gap: var(--d05);
    color: var(--gray);
    margin-bottom: 0;
}

#product-product .price-wrap ~ ul {
    align-self: center;
    margin-left: auto;
    margin-bottom: 0;
}

.dark #product-product .left:before {
    box-shadow: 0 10px 20px -10px var(--shadow-30);
    background-color: rgba(4, 0, 34, .1);
    backdrop-filter: brightness(0.5);
}

#product-product #product-data {
    box-shadow: -1vw -1vw 4vw -2vw gray;
    border-radius: 20px;
    padding: 1.5vw
}

#product-product .wishlist-compare button {
    margin-right: 20px;
    color: rgba(80, 80, 80, 1);
    background: none;
    border: none
}

#product-product .wishlist-compare .fa {
    border-width: 1px;
    border-style: solid;
    border-radius: 50%;
    padding: 3px
}

#product-product .wishlist-compare .w .fa {
    border-color: rgba(218, 10, 34, 1);
    color: rgba(218, 10, 34, 1)
}

#product-product .wishlist-compare .c .fa {
    border-color: rgba(60, 196, 114, 1);
    color: rgba(60, 196, 114, 1)
}

#product-product .thumbnails li:first-child a {
    overflow: hidden
}

ul.thumbnails {
    list-style: none;
    display: flex;
    position: relative;
    flex-flow: row wrap;
    margin: 0;
    gap: 0;
}

ul.thumbnails li {
    /* display: flex;
    border: none;
    min-height: 95px;
    flex: 1 0 50%; */
    text-align: center;
    box-sizing: border-box;
}

.thumbnail a > img, .thumbnail > img {
    width: 100%;
}

ul.thumbnails li a {
    border: none;
    display: inline-block;
    margin: 0;
    padding: 0;
}

.navigation {
    width: 100%;
}

.navigation .active, .navigation .accordion:hover {
    background-color: #ccc;
}

.navigation .panel {
    padding: 0 18px;
    display: none;
    background-color: white;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.navs {
    list-style: none;
    padding: 0;
    width: 100%;
}

.navs li {
    margin: 5px 0;
}

.navs a {
    text-decoration: none;
    display: block;
    padding: 10px;
    background: #f0f0f0;
    color: #000;
}

.navs a:hover, .navs .active a {
    background: #ccc;
}

.attribute_group.Ebay {
    display: none !important
}

.navigation .tab-content {
    padding: 10px;
}

.accordion {
    width: 100%;
}

.accordion .card {
    border: 2px solid #f1f1f1;
    margin-bottom: 0;
    padding: 0;
}

.accordion .card-header {
    background-color: white;
    border: none;
    padding: 0;
}

.accordion .card-header * {
    padding: 0 10px;
}

.accordion .btn-link {
    width: 100%;
    text-align: left;
    font-weight: bold;
    color: var(--b);
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--w) !important;
    font-size: var(--font5);
    box-shadow: none !important;
}

.accordion .btn-link:hover {
    text-decoration: none;
}

.accordion .btn-link::after {
    content: '\002b';
    /* Plus sign */
    font-size: 24px;
    color: var(--blue);
}

.accordion .btn-link.collapsed::after {
    content: '\002b';
    /* Plus sign */
}

.accordion .btn-link:not(.collapsed)::after {
    content: '\2212';
    /* Minus sign */
}

.accordion .card-body {
    padding: 15px;
    border-top: 1px solid #f1f1f1;
    background-color: #fff;
}

.accordion .card-body thead {
    display: none
}

.accordion h1, .accordion h2, .accordion h3, .accordion h4, .accordion h5, .accordion title {
    padding: 0 0 calc(0.5vw + 5px) 0;
    margin: 0
}

#search {
    margin-right: var(--font1);
    position: relative;
}

#search .input-lg {
    height: var(--d20);
    line-height: var(--d20);
    padding: 0 15px;
    margin-right: -1px;
    width: clamp(30vw, 585px, 50vw);
    max-width: 685px;
    border-radius: calc(2px + 0.1vw);
    border: 1px solid #e3e3e3;
}

#search .input-group-btn .btn {
    position: absolute;
    color: var(--w);
    min-height: var(--d20);
    min-width: var(--d20);
    align-content: center;
    text-align: center;
    border-radius: calc(2px + 0.1vw) !important;
    background: var(--blue);
    cursor: pointer;
    z-index: 2;
    margin-left: calc(-2vw - 20px);
    margin-top: 0;
    padding: 0;
    border: none;
}

header #cart {
    margin: auto 0.25vw;
    max-width: fit-content;
    align-self: flex-end;
    margin-left: 0;
}

header #cart:before {
    background: #ffffff;
    filter: blur(0);
    width: 100%;
    height: 100%;
    top: 0;
    content: "";
    position: absolute;
    border: 2px solid var(--lightgray);
    display: none;
}

header #cart > .btn {
    padding: 8px 6px;
    border-radius: 100px;
    font-weight: bolder;
    font-size: var(--font5);
    height: 100%;
    width: 100%;
    color: var(--w);
    border: 0;
    background: transparent;
    filter: blur(0);
    float: unset;
    display: flex;
    align-items: center;
    box-shadow: none;
}

header #cart p {
    padding: 0;
    margin: 5px 0 0 8px;
}

header #cart button > p {
    display: none
}

header #cart.open > .btn {
    box-shadow: none;
}

header #cart .dropdown-menu {
    background: var(--w);
    border: none;
    z-index: 1001;
    width: 100%;
    min-width: calc(100px + 30vw);
    overflow-y: auto;
    max-height: 800px;
    overflow-x: hidden;
}

.account-order-products thead tr th, .account-order-products tbody tr td {
    vertical-align: middle
}

header #cart .dropdown-menu table {
    margin-bottom: 10px
}

header #cart .dropdown-menu li > div {
    min-width: auto;
    padding: 0 10px
}

.dropdown-backdrop {
    background: rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    header {
        padding: 0 0 3px 0;
        margin: 0;
    }

    header .container > .row {
        flex-wrap: wrap
    }

    #wishlist-total, #compare-total, header #account, header #cart, #darkmode {
        padding: 0;
    }

    header #account {
        display: flex;
        flex-flow: column wrap;
        font-weight: 700;
        font-size: var(--font);
    }

    header #account .accout-text {
        display: none
    }

    #top .teaser {
        text-align: center;
        margin: auto;
    }

    header .flex > div.dropdown {
        justify-self: flex-end;
        width: auto;
    }

    header #cart .dropdown-menu li > div {
        min-width: 100%
    }

    header #cart .dropdown-menu {
        width: calc(100vw - 50px);
        min-width: calc(100vw - 50px);
        position: absolute;
    }

    header #cart {
        padding: 0 4px;
    }

    #search {
        order: 99;
        width: calc(100% - 20px);
        margin: auto;
        padding: 5px 10px 0 0;
    }

    #main-menu {
        order: 99;
        flex: 0 0 40px;
        top: 0;
        position: relative;
    }

    header .flex > div {
        padding: 3px calc(4px + 0.25vw);
        height: 100%;
        margin: auto 2px;
    }

    #logo {
        flex: 0 1 160px;
        margin: 0 0 0 55px;
        padding-left: 0;
    }

    #wish-container .count, header #cart .count {
        right: 0px;
        left: auto;
        top: 0;
        width: 16px;
        font-size: 12px;
        line-height: 17px;
    }

    nav .navbar-header .navbar-toggle {
        display: block;
        text-align: center;
        margin: 0;
        width: 40px;
        top: -92px;
        left: 16px;
    }

    #search .input-lg {
        width: calc(100%);
        padding: 10px;
        width: calc(100% - 20px);
        margin-right: 19px;
        border-radius: 0;
    }

    #search .btn {
        margin-left: calc(-2vw - 30px)
    }

    #product-product .left, #product-product .right {
        padding: 5px 0;
        width: 100%
    }
}

header #cart .dropdown-menu li p {
    margin: 20px 0;
}

#menu {
}

#menu .nav > li > a {
    color: var(--b);
    padding: 0.5vw 1vw;
    min-height: 1vw;
    background-color: transparent
}

#menu .nav > li > a:hover, #menu .nav > li.open > a {
    background-color: rgba(0, 0, 0, 0.1)
}

#menu .see-all {
    display: block;
    margin-top: .5em;
    border-top: 2px solid #DDD;
    padding: 3px 20px;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 3px 3px;
    font-size: 12px
}

#menu .see-all:hover, #menu .see-all:focus {
    text-decoration: none;
    color: var(--w);
    background-repeat: repeat-x
}

#menu #category {
    float: left;
    padding-left: 15px;
    font-size: 16px;
    font-weight: 700;
    line-height: 40px;
}

@media (min-width: 768px) {
    #menu .dropdown:hover .dropdown-menu {
        display: block
    }

    .navbar-toggle, .mobile {
        display: none;
    }

    /* .navbar-header .navbar-toggle {position: absolute;top: calc(-2.5vw - 20px);} */
    ul.thumbnails li:hover {
        box-shadow: 0 1vw 2vw -1vw var(--shadow-30);
        z-index: 1;
        cursor: zoom-in
    }

    ul.thumbnails li a:hover {
        cursor: url(/image/icon/magnifying-glass-solid.svg), zoom-in;
        cursor: zoom-in
    }
}

.megamenu .manufacturer {
    flex-flow: row wrap;
    justify-content: flex-start;
    gap: var(--d05);
    padding: var(--d05);
    max-height: 500px;
}

.megamenu .manufacturer li a {
    padding: var(--d05) var(--d10);
}
@media (max-width: 767px) {
    #menu {
        border-radius: 4px;
        margin-bottom: 0;
        position: absolute;
    }

    #menu div.dropdown-inner > ul.list-unstyled {
        display: block
    }

    #menu div.dropdown-menu {
        margin-left: 0 !important;
        padding-bottom: 10px;
        background-color: rgba(0, 0, 0, 0.1)
    }

    #menu .dropdown-inner {
        display: block
    }

    #menu .dropdown-inner a {
        width: 100%;
        color: var(--w)
    }

    #menu .dropdown-menu a:hover, #menu .dropdown-menu ul li a:hover {
        background: rgba(0, 0, 0, 0.1)
    }

    #menu .see-all {
        margin-top: 0;
        border: none;
        border-radius: 0;
        color: var(--w)
    }

    .mobile .megamenu .manufacturer {
        flex-flow: row wrap;
        justify-content: flex-start;
        gap: var(--d05);
        padding: var(--d05);
        max-height: 500px;
    }

    .mobile .megamenu .manufacturer li a {
        padding: 6px 12px;
    }
}

aside#column-left {
    width: calc(220px + 5vw);
    border: 1px solid var(--graylight);
    padding: calc(0.5vw + 5px);
}

#content {
    min-height: 600px;
    margin: 0;
    padding: 0 1vw;
}

#content > div, #content > section {
    margin: 0;
}

aside#column-left ~ #content {
    width: calc(100% - (220px + 5vw));
    padding: 0 5px;
}

#content .row {
    margin: 1vw 0;
}

#content .row.products {
    margin: 1vw 0;
    display: flex;
    flex-flow: row wrap;
}

#content .swiper-wrapper.row.products {
    flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
}

#product #content .row {
    margin: 1vw 0;
    display: flex;
    flex-flow: row wrap
}

#product-category .img-thumbnail {
    padding: 0;
    border: none;
    border-radius: 4px
}

#content .row.filters {
    justify-content: space-between;
    display: flex;
    margin: 0;
}

#content .filters .mfilter-trigger {
    padding: 8px 20px;
    display: none
}

#content .filters .grid {
    order: 9;
    order: -1;
}

#content .filters select, .filters label {
    border: none !important
}

#content .filters div:has(#compare-total) {
    display: none
}

#content .filters div:has(#input-limit) {
    display: none
}

#content .form-group.input-group.input-group-sm {
    margin: 0
}

#content .filters .sort {
    margin-left: auto;
    width: auto;
}

select#input-sort {
    width: 50px;
    opacity: 0;
    margin-left: -10px;
}

[for="input-sort"]:after {
    content: "";
    border: solid var(--darkgray);
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 4px;
    margin: 0;
    position: absolute;
    transform: rotate(45deg) translate(12px, -9px);
}

body .mfilter-free-button {
    border-radius: 3px;
    right: 15px;
    top: 28px;
    padding: initial;
    z-index: 999;
    display: block;
    position: absolute;
    margin: 0;
    cursor: pointer;
    width: 44px;
    height: 44px;
    border: none;
    background: var(--b);
}

body .mfilter-reset-icon {
    content: '\2716'
}

body .mfilter-free-button:before {
    position: relative;
    content: '\2716';
    font-size: 26px;
    display: inline-block;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: white;
}

a.mfilter-button-reset {
    padding: 10px;
    color: white;
    background: var(--blue);
    gap: 0;
}

body .mfilter-option.mfilter-tb-as-tr:hover {
    background: linear-gradient(221deg, #ededed, transparent);
}

body .mfilter-option.mfilter-tb-as-tr label.mfilter-tb-as-td {
    padding: 5px 10px
}

body .mfilter-heading .mfilter-head-icon {
    margin-right: 0px;
}

body .mfilter-free-container {
    top: 0;
    width: 100vw;
    padding: 0;
    border: 0;
    margin-left: 0;
}

body .mfilter-heading-content {
    font-size: 16px;
    padding: 15px;
    border-top: 1px solid lightgray;
}

body .mfilter-opts-container {
    border-top: 0;
    padding: calc(0.5vw + 1px);
}

#mfilter-opts-price-min, #mfilter-opts-price-max {
    padding: 7px;
    text-align: center;
}

.mfilter-option.mfilter-tb-as-tr {
}

body .mfilter-button-top {
    padding: 6px;
    width: calc(100% - 70px);
}

.mobile body .mfilter-free-button {
}

.mfilter-free-container-closed {
    display: none !important;
}

#product-category #column-right {
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
    bottom: auto
}

#product-category #content:after, #product-category #content:before {
    content: '';
    position: absolute;
    background-image: radial-gradient(circle at 0 100%, rgba(204, 0, 0, 0) 20px, var(--w) 20px);
    width: 20px;
    height: 20px;
    top: 0;
    right: 0
}

#product-product #content > .row {
    margin: 0;
    padding: 1vw 0;
    border-radius: 1.5vw;
    display: flex;
    flex-flow: row wrap;
}

#product-product #content > .row:first-child {
    padding: 0
}

#product-product #content .row.product_tabs {
    border-radius: 20px;
    padding: 1vw
}

#product-product #content .row.product-related-products {
    background: inherit
}

#product-product .col-sm-5.col-xxl-7 {
    box-shadow: -1vw -1vw 4vw -2vw #d3d3d3;
    border-radius: 20px
}

#product .col-sm-7.col-xxl-5, .col-sm-5.col-xxl-7 {
    width: 50%
}

#product .form-group .img-thumbnail, #product .form-group .name {
    background-color: var(--w);
    border: 4px solid var(--graylight);
    margin: 3px 3px 0 0;
    font-weight: 500;
    color: var(--b);
    border-radius: 4px;
}

.mfilter-option.mfilter-tb-as-tr:hover {
    background: linear-gradient(221deg, #ededed, transparent);
}

#product .form-group input:checked ~ .img-thumbnail, #product .form-group input:checked ~ .name {
    border-color: var(--vividblue);
    /* padding: 4px; */
    border-width: 4px;
}

#product .form-group input[type=radio] {
    margin: 0;
    opacity: 0;
    display: none;
}

#product .form-group input[type=radio]:checked ~ .name {
    background-color: var(--vividblue);
    color: #fff;
}

#product .form-group input[type=checkbox] {
    margin-top: 3px;
    margin-left: 10px;
    transform: scale(2);
}

#product .form-group input[type=checkbox] ~ .name {
    padding-left: 33px;
    border: none !important;
    background: none !important
}

#product .form-group .checkbox label, #product .form-group .radio label {
    /* min-height: 3vw; */
    padding-left: 0.1vw;
    margin-bottom: 0.5vw;
    font-weight: 400;
    cursor: pointer;
}

#product .option_id_1 {
    display: flex;
    gap: 0.5vw;
}

#product .option_id_1 .name {
    display: none
}

#product .option_id_3 img, #product .option_id_13 img {
    display: none;
}

#form-review .form-group input[type="radio"] {
    opacity: 1;
    display: inline-block;
    transform: scale(1.5);
    transform: scale(1.5);
}

.price.tax, .points {
    display: none
}

h2.price {
    font-weight: 300;
    margin: 0;
    padding: 0;
    line-height: 1;
}

h2.price.special {
    color: var(--blue);
    font-weight: bold
}

h2.price.special ~ span {
    font-size: var(--font4);
    padding: 0 0.5rem;
    padding-top: 4px;
}

#product h1 {
    font-size: calc(var(--font3));
    padding: 0;
    line-height: 1;
    position: relative;
    width: calc(100% - 51px);
}

@media (max-width: 768px) {
    #product h1 {
        position: relative
    }

    h2.price {
        font-size: 25px;
        padding: 0;
    }

    #content .filters .mfilter-trigger {
        display: inline-block
    }
}

.checkbox, .radio {
    margin-top: 0.1vw !important;
    margin-bottom: 0.1vw !important;
    display: inline-block;
}

input[type=checkbox], input[type=radio], input[type=range] {
    accent-color: #000000;
    transform: scale(2);
    margin: 4px 8px 0;
}

#tab-specification table {
    border: 0;
    /* display: flex; */
    /* flex-flow: column wrap; */
    /* justify-content: flex-start; */
    /* width: 90vw; */
    /* height: 70vh; */
    /* font-size: 1vw; */
}

#tab-specification table > * {
    /* display: flex; */
    /* flex-flow: column nowrap; */
    /* justify-content: flex-start; */
    /* width: 25%; */
    /* height: auto; */
    /* margin: 0; */
    /* padding: 0; */
}

#tab-specification table tbody {
    padding-bottom: 1vw;
    margin-bottom: 1vw
}

#tab-specification table tr, #tab-specification table td {
    border: none;
    /* display: inline-block; */
    width: 100%
}

#tab-specification table td {
    width: 49%;
    padding: 0 8px;
    margin: 8px 0
}

#tab-specification table td:nth-child(2) {
    border-left: .1vw solid #d4d4d4
}

#tab-specification table tr:hover {
    background: #d3d3d3;
    cursor: pointer
}

@media (max-width: 1024px) {
    #product-product .col-xxl-5, #product-product .col-xxl-7 {
        width: 100%;
        position: relative;
        padding: 0
    }

    #product-product #content > .row:first-child {
        margin: 0;
        padding: 0
    }

    #product-product .col-xxl-7 {
        box-shadow: none
    }

    #product-product #content > .row, #product-product #content .row.product_tabs {
        border-radius: 0;
        margin: 0 -5px;
        padding: 5px;
    }

    #product-product .row.product-related-products {
        margin: 0
    }

    #product h1 {
        position: relative;
        text-align: center;
        text-align: left;
    }

    #product #pdpi {
        bottom: 0;
        max-width: max-content;
        width: 100%;
        margin: 0;
    }

    #product #pdpi .owl-stage {
        padding-left: 0 !important;
    }

    #product [for="input-quantity"] {
        display: none
    }

    #product-product .list-unstyled.stats {
        margin: 10px 0;
        font-size: var(--font4);
    }

    h2.price {
        font-size: var(--font1);
        padding: 10px 0;
    }

    #button-cart {
        font-size: 15px;
        border-radius: inherit;
        padding-left: 8vw;
        padding-right: 8vw;
        min-width: 50vw;
    }

    #button-wishlist {
        padding: 10px;
        height: 45px;
    }

    .alert.alert-dismissible {
        min-width: 80vw;
    }

    #tab-specification table {
        width: 100%;
        height: auto;
        font-size: 13px
    }

    #tab-specification table > * {
        display: flex;
        flex-flow: column nowrap;
        width: 100%;
        height: auto
    }

    .dark .nav-tabs > li.active > a, .dark .nav-tabs > li.active > a:focus, .dark .nav-tabs > li.active > a:hover {
        border-bottom: 3px solid #02040c !important;
    }
}

@media (max-width: 767px) {
    html {
        min-height: 100vh
    }

    .wrapper {
        height: auto
    }

    .mobile body {
        font-size: 14px;
        line-height: 20px;
        width: 100vw
    }

    #content-wrapper {
        padding: 167px 0 0;
        margin: 0 auto !important
    }

    #content > div {
        margin-bottom: 3vw;
    }

    .container {
        margin: 0;
        padding: 0
    }

    .cart-large .dropdown-menu.cart-items {
        width: 50vw;
        display: none
    }

    .cart-large .dropdown-menu li.cart-empty {
        padding: 10px 0;
        text-align: center
    }

    .row {
        margin: 0 auto
    }

    #content {
        padding: 5px;
        overflow-x: hidden;
        width: 100% !important;
    }

    #content .row {
        margin: auto 0;
        justify-content: space-between;
        flex-flow: row wrap;
        display: flex;
    }

    #content .row.products {
        justify-content: flex-start;
        gap: 0;
        margin: 1vh 0;
    }

    .product-layout .addToCartButtons {
        display: inline-block;
        opacity: 1
    }

    .product-layout .product-thumb {
        margin-bottom: 0;
    }

    .product-layout .col-xs-6.col-sm-3 {
        padding-right: 1vw;
        padding-left: 1vw;
    }

    .wrapper .product-layout .product-thumb div.caption {
        min-height: 110px;
        background: var(--w)
    }

    p {
        color: gray;
    }

    .mobile .discountbox.fix {
        flex-flow: column wrap
    }

    .mobile .discountbox.fix .green-box {
        width: 100%;
        margin: 0
    }

    .mobile .discountbox.fix .brnd {
        width: 100%;
        border-bottom: 1px solid gray;
        border-right: 0;
        padding: 2vw;
        text-align: justify;
    }

    .product-thumb .caption p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        box-orient: vertical;
        line-clamp: 3;
    }

    .table-responsive > .table > tbody > tr > td, .table-responsive > .table > tbody > tr > th, .table-responsive > .table > tfoot > tr > td, .table-responsive > .table > tfoot > tr > th, .table-responsive > .table > thead > tr > td, .table-responsive > .table > thead > tr > th {
        white-space: normal;
    }


    #cart tbody tr {
        display: flex;
        justify-content: flex-start;
        flex-flow: row wrap;
        width: 100%;
    }

    #cart tbody tr td {
        flex-grow: 1;
        display: flex;
        margin: 0;
        padding: 0;
        flex: 1 1 0;
        /* grow, shrink, basis=0 */
        min-width: 0;
        /* allow content to shrink */
    }

    td.text-left.qty {
        justify-content: flex-start;
        max-width: 50px !IMPORTANT;
    }

    #cart .qty .input-group-btn, #cart .qty .input-group-btn input {
        max-width: 40px;
    }

    #cart td.text-left.qty .btn {
        display: none;
    }


    #cart td.text-left.name {
        flex: 1 1 60vw;
        padding-left: 4px;
    }

    #cart td.text-left.name .text-left, td.text-left.name .price {
        display: none
    }

    #cart td .stock {
        font-size: 12px;
        line-height: 0.8;
        color: #555
    }
}

footer {
    padding-top: var(--font5);
    background-color: var(--b);
    color: var(--w);
    border-width: 3px;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    position: relative;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    transform: translateX(-50%);
    background-color: #1a1a1a;
    z-index: -1;
}

footer .payments img {
    width: 300px;
    margin: auto
}

footer .social li {
    display: flex;
}

footer .social ul {
    display: flex;
    gap: var(--d05);
    margin-bottom: 0;
    padding: 0;
}

footer .social img {
    width: 50px;
    margin: auto;
    filter: grayscale(1);
}

footer .social img:hover {
    filter: none;
}

footer hr {
    border-top: none;
    margin: var(--font5) 0;
}

footer a, footer p {
    color: #E4E7EC;
}

footer h5 {
    color: #E4E7EC;
    font-weight: 900;
    text-transform: uppercase
}

section.footer-bottom {
    padding: calc(1vw + 5px);
    gap: 20px;
    justify-content: space-between;
}

footer .about p {
    font-size: 16px;
}

.alert {
    padding: 1vw 1.5vw;
    position: fixed;
}

.alert.alert-dismissible {
    position: fixed;
    bottom: calc(2vw + 60px);
    top: auto;
    right: 2vw;
    width: calc(40vw + 60px);
    padding-right: calc(3rem + 0.5vw);
    z-index: 3;
    font-weight: 500;
}

.alert.alert-dismissible + .alert {
    bottom: calc(2vw + 160px)
}

.alert.alert-dismissible + .alert + .alert {
    bottom: calc(2vw + 260px)
}

.alert.alert-dismissible + .alert + .alert + .alert {
    bottom: calc(2vw + 360px)
}

.alert .close {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 2px 2px var(--redalpha);
    opacity: .8;
    right: 8px;
    top: -4px;
    position: absolute;
}

.alert .close:hover {
    color: var(--red);
    text-shadow: 0 0 2px var(--red);
}

.alert.alert-success {
    color: #31c48d;
    background-color: #ffffff;
    border: none;
    border-left: 5px solid #31c48d;
    border-radius: 0;
    box-shadow: 0 13px 25px -15px #31c48d;
}

.alert.alert-warning {
    color: #ffa400;
    background-color: #ffffff;
    border: none;
    border-left: 5px solid #ff7800;
    border-radius: 0;
    box-shadow: 0 13px 25px -15px #ffa400;
}

.alert.alert-danger {
    color: var(--red);
    background-color: var(--w);
    border: none;
    border-left: 5px solid var(--red);
    border-radius: 0;
    box-shadow: 0 13px 25px -15px var(--red);
}

.breadcrumb {
    margin: 0;
    background: none;
    padding: var(--d05) 0;
    border: none;
    font-size: var(--font05);
    /* display: none; */
    overflow-x: scroll;
    scroll-behavior: smooth;
}

.breadcrumb ::-webkit-scrollbar {
    width: 5px;
    height: 4px;
}

#product .breadcrumb {
    display: flex;
}

.breadcrumb i {
    font-size: 15px;
}

.breadcrumb > li {
    text-shadow: 0 1px 0 var(--w);
    padding: 0 1rem;
    position: relative;
    white-space: nowrap
}

.breadcrumb > li a {
    color: var(--b);
}

.breadcrumb > li:last-child:after {
    display: none
}

#product .breadcrumb > li:last-child {
    display: none;
}

.breadcrumb > li + li:before {
    content: '';
    padding: 0
}

.breadcrumb > li:after {
    content: '\276F';
    display: block;
    font-size: 0.7rem;
    position: absolute;
    top: 4px;
    right: 0;
}

.pagination {
    margin: 0
}

#table-totals {
    margin-bottom: 0
}

.buttons {
    margin-top: 1em;
    border-top: 1px solid var(--shadow-20);
    padding: 1em 0;
    clear: both
}

div.buttons:last-child {
    padding-bottom: 0
}

.btn {
    padding: var(--font5) var(--font4);
    height: var(--d20);
    font-size: var(--font5);
    border: none;
    border-radius: calc(2px + 0.1vw);
    width: auto;
}

.btn-default {
    color: var(--w);
    background-color: var(--blue);
    border-color: var(--blue);
}

.btn-primary {
    color: var(--w);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: var(--blue);
    border-color: var(--blue);
    transition: easy 300ms;
}

.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
    background-color: var(--b);
}

.btn.active, .btn:active, .btn-default.active, .btn-default:active, .open > .dropdown-toggle.btn-default {
    background-color: var(--vividblue);
    border-color: var(--vividblue);
}

.btn-warning {
    color: var(--w);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #faa732;
    background-image: linear-gradient(to bottom, #fbb450, #f89406);
    background-repeat: repeat-x;
    border-color: #f89406 #f89406 #ad6704
}

.btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] {
    box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1)
}

.btn-danger {
    color: var(--w);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #da4f49;
    background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
    background-repeat: repeat-x;
    border-color: #bd362f #bd362f #802420
}

.btn-danger:hover, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] {
    box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1)
}

.btn-success {
    color: var(--w);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #5bb75b;
    background-image: linear-gradient(to bottom, #62c462, #51a351);
    background-repeat: repeat-x;
    border-color: #51a351 #51a351 #387038
}

.btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] {
    box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1)
}

.btn-link {
    border-color: rgba(0, 0, 0, 0);
    cursor: pointer;
    color: #23A1D1;
    border-radius: 0;
    padding: 10px;
}

.btn-link, .btn-link:active, .btn-link[disabled] {
    background-color: rgba(0, 0, 0, 0);
    background-image: none;
    box-shadow: none;
}

.btn-inverse {
    color: var(--w);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #363636;
    background-image: linear-gradient(to bottom, #444, #222);
    background-repeat: repeat-x;
    border-color: #c8c8c8 #222 var(--b);
}

.btn-inverse:hover, .btn-inverse:active, .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] {
    background-color: #222;
    background-image: linear-gradient(to bottom, #333, #111)
}

.list-group a {
    border: 2px solid var(--b) 0;
    color: #888;
    padding: 8px 12px;
    font-weight: 600;
    border-radius: 20px !important
}

.list-group-item {
    position: relative;
    display: block;
    padding: var(--font5);
    margin-bottom: 1px;
    background-color: transparent;
    border: 1px solid transparent;
}

.list-group a.active, .list-group a.active:hover, .list-group a:hover {
    color: var(--b);
    border-width: 2px;
    background: var(--lightgray);
    text-shadow: 0 1px 0 var(--w)
}

.carousel-caption {
    color: var(--w);
    text-shadow: 0 1px 0 var(--b)
}

.carousel-control .icon-prev:before {
    content: '\00AB';
}

.carousel-control .icon-next:before {
    content: '\00BB';
}

.product-layout a {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.products .product-layout {
    position: relative;
    padding: calc(0.1vw + 2px);
    height: auto;
    min-height: 23vw;
}

.products .product-layout.product-grid {
    padding: calc(0.25vw + 5px);
    flex: 1 1 calc(33% - (1vw + 4px));
    max-width: calc(100% / 3 + 1px);
);
}

.product-thumb {
    overflow: hidden;
    text-align: center;
    -webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out
}

.product-thumb .description {
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis
}

.row.products.flex:has(.product-list) {
}

.products .product-layout.product-list {
    flex: 1 1 calc(25% - (1vw + 4px));
    max-width: calc((100% / 4));
}

.product-thumb .caption {
    padding: var(--d05);
    min-height: 110px;
    height: auto;
    text-align: left;
    background: var(--w);
    position: relative;
    -webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
    display: flex;
    flex-flow: column;
    gap: 1vw;
}

.product-thumb button.button_wishlist {
    order: 0;
}

.product-thumb a.view_product {
    order: 1;
}

.product-thumb button.button_compare {
    order: 3;
}

.product-thumb .caption p {
    font-size: var(--font05);
    line-height: 1.2;
    margin: 0 0 0.5vw 0;
}

.product-thumb .caption .price {
    color: var(--b);
    font-size: clamp(18px, 18px + 0.25vw, 30px);
    font-weight: 700;
}

.product-thumb .price-new {
    font-weight: 600;
    color: var(--red);
}

.product-thumb .price-old {
    color: #747C83;
    text-decoration: line-through;
    margin-left: 10px;
    font-family: Roboto;
    font-size: clamp(15px, 14px + 0.25vw, 20px);
    font-weight: 700;
    line-height: 22px;
    text-align: left;
}

.product-thumb .price-tax {
    color: #999;
    font-size: 12px;
    display: block
}

.product-thumb .button-group {
    border: none;
    background-color: var(--w);
    overflow: auto;
    display: none;
}

.product-thumb:hover .button-group {
    background-color: rgba(0, 0, 0, .4);
    overflow: auto;
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
    justify-content: center;
    justify-items: center;
    align-content: center;
    align-content: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.product-thumb .button-group button, .product-thumb .button-group a {
    border: none;
    padding: 15px;
    width: var(--d20);
    height: var(--d20);
    margin: 0;
    background: none;
    position: relative;
}

.product-thumb .button-group i, .product-thumb .button-group img, .product-thumb .button-group svg {
    color: white;
    fill: white;
    width: auto;
    height: 100%;
    font-size: 22px;
    /* padding: 15px; */
    width: 25px;
    height: 26px;
}

.product-thumb .button-group .add_to_cart {
    width: calc(100% - 40px);
    order: 9;
    background: var(--blue);
    color: var(--w);
    font-size: 16px;
}

.product-thumb .button-group .add_to_cart > i {
    display: none;
}

.product-thumb .button-group .view_product span {
    display: none;
}

@media (max-width: 768px) {
    .mobile .btn, .mobile a.btn.btn-primary {
        line-height: 0.5
    }

    .products .product-layout.product-list {
        width: calc(33% - 0.1px);
        padding-right: 3px;
        padding-left: 3px;
        flex: 1 1 calc((100vw / 3) - 2vw);
        padding: 3px;
        max-width: 33.33%;
    }

    .products .product-layout.product-grid {
        width: calc(50% - 0.1px);
        padding-right: 3px;
        padding-left: 3px;
        flex: 1 1 calc((100vw / 2) - 2vw);
        padding: 5px;
        max-width: 50%;
    }

    .product-thumb .caption {
        padding: var(--d05);
        min-height: auto;
    }

    .product-thumb .caption .price {
        font-size: 20px;
        padding-left: 2px;
    }

    .breadcrumb > li:after {
        top: 1px;
    }
}

#list-view svg, #grid-view svg {
    fill: var(--b);
    width: var(--font4);
    height: var(--font4);
    padding: 0;
}

#grid-view, #list-view {
    background-color: var(--w);
    border-radius: 3px;
    padding: 10px;
}

#grid-view.active, #list-view.active {
    background-color: var(--blue);
    fill: var(--w);
}

#grid-view.active svg, #list-view.active svg {
    fill: var(--w);
}

.thumbnails {
    overflow: unset;
    clear: none;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-flow: row wrap
}

.thumbnails > img {
    width: 100%
}

@media (min-width: 1921px) {
    .container {
        width: 1600px
    }
}

@media (min-width: 2561px) {
    .container {
        width: 2530px
    }
}

@media (min-width: 992px) {
    .cart-large {
        float: right
    }
}

@media (max-width: 1200px) {
    nav#top .label-round {
        position: absolute;
        top: -5px;
        right: -10px;
        font-size: 10px;
        line-height: 18px;
        padding: 0;
        width: 18px;
        height: 18px;
        border-radius: 9px
    }

    .product-grid .product-thumb .caption {
        min-height: 210px;
        padding: 0 10px
    }

    .product-list .product-thumb .button-group {
        gap: 5px;
    }

    .product-thumb:hover .button-group {
        justify-content: space-evenly;
    }

    .product-thumb .button-group button, .product-thumb .button-group a {
        width: 33.33%;
        padding: 9px;
        width: 40px;
        height: 40px;
    }

    .product-thumb .button-group .add_to_cart {
        width: calc(100% - 30px);
        padding: 5px;
        font-size: 13px;
        border-radius: 4px;
    }

    .product-thumb .button-group .add_to_cart span {
        display: inline !important
    }

    .product-list .product-thumb .button-group button, .product-list .product-thumb .button-group a {
        padding: 5px;
        width: 35px;
        height: 40px;
    }

    .product-list .product-thumb .button-group .add_to_cart {
        width: calc(100% - 10px);
        padding: 5px
    }

    .product-list .product-thumb .button-group .add_to_cart span {
        display: inline !important;
        font-size: 12px;
    }
}

@media (max-width: 767px) {
    .product-layout .addToCompare, .product-layout:hover .addToCompare {
        display: none
    }

    #product-product .product-labels:first-child {
        top: 0;
        left: 0;
        right: 0;
        width: auto
    }

    #product-product .product_tabs .tab-pane > * {
        padding-left: 15px;
        padding-right: 15px
    }

    .product-list .product-thumb .caption {
        min-height: 0;
        margin-left: 0;
        padding: 0px;
    }

    .product-grid .product-thumb .caption {
        min-height: 0
    }

    .thumbnails .image-additional img {
        width: auto;
        height: auto
    }

    .product-thumb .button-group {
        border: none;
        background-color: transparent;
        overflow: auto;
        display: block;
    }

    .product-thumb:hover .button-group {
        background-color: rgba(0, 0, 0, .0);
        position: relative;
    }

    .product-thumb .button-group button, .product-thumb .button-group a {
        display: none
    }

    .product-thumb .button-group button.add_to_cart {
        display: inline-block;
        margin-bottom: 20px
    }
}

@media (min-width: 768px) {
    #column-left .product-layout .col-md-3 {
        width: 100%
    }

    #column-left + #content .product-layout .col-md-3 {
        width: 50%
    }

    #column-left + #content + #column-right .product-layout .col-md-3 {
        width: 100%
    }

    #content + #column-right .product-layout .col-md-3 {
        width: 100%
    }
}

#column-left .product-layout, #column-right .product-layout {
    width: 100%
}

.input-group .form-control[name^=quantity] {
    min-width: 50px
}

.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
    background-image: none;
    background-color: #df5c39
}

.alert-danger .alert-content-container {
    background-color: #fad3d4;
    color: #e52427
}

.alert-success .alert-content-container {
    background-color: #d8f3df;
    color: #3cc261
}

.alert-info .alert-content-container {
    background-color: #d4f0f5;
    color: #26b6cf
}

@media (min-width: 768px) {
    html[dir=rtl] .navbar-nav {
        float: right;
        margin: 0
    }

    html[dir=rtl] .navbar-nav > li {
        float: right
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .product-options-checkbox div div.checkbox, .product-options-radio div div.radio {
        width: 33.3333334%
    }

    .container {
        width: calc(100vw - 20px);
        padding: 0
    }

    body {
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: geometricPrecision;
        text-shadow: none
    }

    #button-cart {
        height: 45px;
        font-size: 15px
    }

    .addToCartButtons {
        opacity: 1
    }

    .addToCartButtons button {
        padding: 5px 9px
    }

    .addToCartButtons .addToCart {
        padding-left: 15px;
        padding-right: 15px
    }

    .product-thumb .button-group button, .product-thumb .button-group button + button {
        width: 33.33%
    }

    .product-layout .addToWishlist, .product-layout:hover .addToWishlist {
        left: 24px;
        display: block;
        opacity: .4
    }
}

@media (min-width: 768px) and (max-width: 2560px) {
    .container {
        max-width: 1405px;
        width: 100%;
        padding: 0;
        margin: auto;
    }
}

/*** NEW HEADEER ***/
#darkmode button {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    line-height: 1;
}

#darkmode svg {
    fill: var(--blue);
    padding: calc(0.25vw + 3px);
}

.dark #darkmode svg {
    fill: #ffc600;
}

#darkmode #sun {
    display: none
}

.dark #darkmode #moon {
    display: none
}

.dark #darkmode #sun {
    display: inline-block
}

#darkmode {
    min-height: var(--d20);
    min-width: var(--d20);
    justify-content: center;
    align-content: center;
    border-radius: 100px;
    background: var(--bluealpha);
}

.bg-wide {
    position: relative;
    z-index: 1;
}

.bg-wide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    transform: translateX(-50%);
    background-color: #F3F3F3;
    z-index: -1;
}

/****************/
/* CUSTOM CSS ***/
.home #top {
    margin-top: 44px;
}

.home #top-bar ~ #top {
    margin-top: 0;
}

/*  HOME PAGE */
.item-banner > div.block-desc {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

.item-banner > div.block-desc .banner-desc {
    margin-left: 10%;
    width: 90%;
    margin-top: 9%;
}

.item-banner > div.block-desc .banner-desc * {
    color: #fff;
}

.splide__slide.item-banner > a:before {
    content: "";
    display: block;
    /* background: radial-gradient(rgb(0 0 0 / 10%), rgb(0 0 0 / 60%)); */
    /* opacity: .5; */
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    transition: all 200ms
}

.splide__slide:hover.item-banner > a:before {
    /* opacity: 0.2; */
    /* background: radial-gradient(rgb(0 0 0 / 10%), rgb(0 0 0 / 10%), rgb(0 0 0 / 60%)); */
    transition: all 200ms
}

.trustpilot-widget {
    margin: var(--d10);
}

.banner5-container {
    display: flex;
}

.banner5-container .flex {
    padding: 0
}

.banner5-container .col-sm-7.flex {
    gap: 30px;
    padding-left: 30px;
    width: 63%;
}

.banner5-container .col-sm-5.flex {
    flex-flow: column;
    justify-items: flex-end;
    width: 36%;
}

.banner5 {
    height: auto;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    color: white;
    text-align: center;
    flex: 1 1 40%;
}

.banner5:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.5;
    background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
    transition: all 200ms ease-in-out
}

.banner5:hover:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.2;
    background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
    transition: all 200ms ease-in-out
}

.banner5-content {
    padding: clamp(20px, var(--d20), 35px);
    z-index: 1;
    text-align: left;
}

.banner5 h4 {
    margin: 0 0 10px;
    color: var(--w);
    font-size: var(--font4);
}

.banner5 p {
    margin: 0 0 20px;
    color: var(--w);
}

.banner5 button, .banner5 a.btn-primary, .banner5 a.btn, .banners a.btn-primary, .banners a.btn {
    background-color: var(--w);
    border-color: var(--w);
    color: var(--b);
    border: none;
    height: var(--d20);
    cursor: pointer;
    box-shadow: 0 var(--d05) var(--d10) var(--shadow-30);
}

div#payments {
    position: relative;
    padding: var(--d10) 0;
    gap: var(--d10);
    text-align: left;
    flex-flow: row nowrap;
}

div#payments:before {
    width: 100vw;
    height: 100%;
    min-height: 1px;
    content: '';
    background: #F3F3F3;
    position: absolute;
    z-index: -1
}

@media (max-width: 768px) {
    .banner5-container {
        flex-flow: column;
        gap: 20px;
        padding: 0
    }

    .banner5 {
        flex: 1 1 60%;
    }

    .banner5-container .col-sm-5.flex {
        padding: 0;
        min-height: 75vw;
        width: auto !important;
    }

    .banner5-container .col-sm-7.flex {
        padding: 0;
        width: auto;
    }

    .banner5 h4 {
        font-size: var(--font2);
    }

    .mobile-collapse h5 {
        cursor: pointer;
        position: relative;
        padding: 10px 20px 15px 5px;
    }

    .mobile-collapse h5:after {
        /*content: '\276F';*/
        /*position: absolute;*/
        /*right: 0;*/
        /*font-size: 0.8em;*/
    }

    .mobile-collapse .collapsed:after {
        transform: rotate(75deg);
    }

    .mobile-collapse ul, .mobile-collapse ol {
        padding: 0 10px;
    }

    ul#pdpt {
        padding: 0
    }
}