body {

    /*font-family: 'Lato', Arial, sans-serif;*/

    /*font-family: "Mulish", sans-serif;*/
    font-family: "Mulish", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;

    font-optical-sizing: auto;
    /*font-weight: 400;*/
    font-style: normal;

    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    background: #f1f1f2;
}



.container {max-width: calc(100vw - 110px);}
@media (max-width: 1280px) {.container {max-width: calc(100vw - 60px);}}

.container.container-medium {max-width: 1440px;}



.container-newsletter {background: #485769;}
.container-newsletter .input-group {width: 400px}

a {text-decoration: none !important; transition: opacity 0.3s;}
a:hover img {opacity: 0.6;}
.col-brand a:hover img {opacity: 1;}
.list-unstyled li {margin: 5px auto;}
.form-control {font-size: 15px;}
.btn {font-size: 15px;}
.btn-primary {background-color: #ffcb09 !important; border-color: #ffcb09 !important;}


header {background: #131921; height: 56px;}
header .col-brand img {max-height: 45px}
.col-search i {font-size: 18px;}

.btn-cart {
    padding: 0.25rem 0.5rem;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    position: relative;
}

.cart-icon, .btn-contact {
    font-size: 2.2rem;
    color: #fff;
}

.cart-counter {
    position: absolute;
    top: 5px;
    right: 0;

    background-color: #f07a14;
    color: #fff;
    font-size: 12px;
    font-weight: normal;
    border-radius: 50%;
    display: flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.cart-counter:not([data-count="0"]) {
    background-color: greenyellow;
    color: black;
}

.menu {
    /*background: #e5e5e5;*/
    background: #edecec;
}

.menu-link {
    color: #666;
    font-size: 15px;
    text-decoration: none !important;
    /*transition: color 0.2s;*/
    padding-left: 20px;
    padding-right: 20px;

    border-radius: 5px;

}
.menu-link:hover,
.menu-link.active {
    /* background: #131921; */
    background: #666;
    color: #fff !important;
    text-decoration: none !important;
}



.footer-link {
    color: #b0b0b0;
    text-decoration: none;
    transition: color 0.2s;
    font-size: 1rem;
}
.footer-link:hover {
    color: #fff;
    text-decoration: underline;
}
.footer-social {
    color: #b0b0b0;
    font-size: 1.5rem;
    transition: color 0.2s;
    text-decoration: none;
}
.footer-social:hover {
    color: #ff9900;
}


.product {}
.product .product-title {font-weight: bold; color: #0c2236;}
.product .product-description {color: #999;}
.product .product-price {font-size: 24px; color: #0c2236;}
.product span:not(.badge) {font-size: 16px; color: #999;  text-decoration: line-through;}
.product .product-ratings {text-align: center; color: #999;}
.product .product-ratings i {color: gold}


.product {
    position: relative;
    overflow: hidden;
}
.product:hover .product-hover-form {
    display: flex !important;
}
.product-hover-form {
    transition: opacity 0.2s;
}

.product-hover-form {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.product:hover .product-hover-form {
    opacity: 1;
    pointer-events: auto;
}

.section-brands {}
.section-brands img {height: 80px;}
.section-brands a {transition: opacity 0.3s; background: #fff;}
.section-brands a:hover {opacity: 0.6;}


.breadcrumb {font-size: 13px; }
.breadcrumb a {color: #565959;}
.breadcrumb a:hover {text-decoration: underline!important;}


.badge-lg {font-size: 20px}

.message-carousel {
    height: 25px;
    overflow: hidden;
    position: relative;
}

.message {
    opacity: 0;
    transition: opacity 0.25s;
    animation: fade-message 15.75s linear infinite;
}

.message:nth-child(1) { animation-delay: 0s; }
.message:nth-child(2) { animation-delay: 5s; }
.message:nth-child(3) { animation-delay: 10s; }

@keyframes fade-message {
    0% { opacity: 0; }
    4% { opacity: 1; }
    32% { opacity: 1; }
    36% { opacity: 0; }
    100% { opacity: 0; }
}


.modal-header {border: 0;}
.modal-body {padding-top: 0;}
.bootbox-body {padding-left: 15px; padding-right: 15px;}
.modal-footer {border: 0; }

.x-18oldyears-modal {margin-top: 15vh}
.x-18oldyears-modal .modal-header {justify-content: center; font-weight: bold;}
.x-18oldyears-modal .modal-footer {justify-content: center;}

.cookie-banner {display:none; position: fixed; width: 100%; z-index: 100; background: rgba(0,0,0,0.8); text-align: center; bottom: 0; left: 0; padding: 8px 10px; color: #fff; font-size: 15px;}


html.is-changing .transition-fade {transition: opacity 0.25s; opacity: 1;}
html.is-animating .transition-fade {opacity: 0;}


.brand-logo-sm {height: 60px; fill: white; border-radius: 5px;}

#records .product-image {text-align: center;}
#records .product-image img {height: 200px; text-align: center;}


.payment-cards img {height: 24px;}

.product-detail {margin-top: -30px!important;}
.product-detail .main-image {max-height: 300px; text-align: center; cursor: zoom-in;}

.product-associated .product-image img  {height: 180px!important;}


#loader {

    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.4);
    text-align: center;

}

#loader .spinner-border {width: 80px; height: 80px;}
.spinner-border {animation-duration: 0.4s !important;}



.hide-if-empty:empty {display: none !important;}

.hover-bg-light:hover {background-color: var(--bs-light); border-color: var(--bs-dark); }

th.min, td.min {width: 10px!important;}
.col-invoice-address .address, .col-shipping-address .address {min-height: 100px;}
.border-dashed {border-style: dashed;}

.form-select {cursor: pointer}


#search_results {position: fixed; z-index: 10; top: 50px; background: white; border:1px solid #ccc; padding: 0; max-height: 80vh; overflow-x:hidden; overflow-y: auto}
#search_results a {display: block; text-align: left; padding: 2px 4px; margin: 0;}
#search_results a:hover {background-color: #e5e5e5}
#search_results a.active {background-color: #0d6efd!important; color: #fff;}
#search_results a img {height: 40px; width: 40px; object-fit: cover; margin-right: 8px}
#search_results:empty {display: none;}

#offcanvas_search {width:500px}

.form-valid {display: none;}
.cart-confirmed .modal-footer {justify-content: center;}

#search_bar {position: fixed; z-index:100; left: 0; bottom: 0; width: 100%; background: #333; padding: 10px; text-align: center;}
#search_bar .active {display: none;}

#search_canvas {

    display: none;

    position: fixed;
    z-index:98;
    left: 0; top: 0;
    width: 100%;

    height: 100%;
    background: rgba(0,0,0,0.7);



}

.search-pop {

    display: none;

    padding-left: 20px;
    padding-right: 20px;

    position: fixed;
    z-index: 99;
    bottom: 48px;

    min-height: 200px;
    background: white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    min-width: 400px;
    max-width: calc(100vw - 40px);

    left: 50%;
    transform: translateX(-50%);

}

.search-pop-body {
    height: 40vh;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 13px;
    margin-bottom: 40px;
    padding: 4px;
}

.search-pop[data-type="filters"] {
    width: 800px;
}


.search-pop .form-check-label {user-select: none; cursor: pointer; white-space: nowrap }

.brand-description {max-height: 150px; overflow-y: auto;}


#banner_top {
    display:none;
    position: fixed;
    z-index: 1021;
    top: 0;
    left: 0;
    width: 100%;
    background: darkmagenta;
    color: white;
    text-align: center;
    overflow: hidden;
    padding-top: 6px;
    height: 24px;

}
#banner_top .banner-message {
    position: fixed;
    z-index: 1022;
    overflow: hidden;
    color: white;
    left: 0;
    top: 0;
    width: 100%;
    height: 24px;
    line-height: 24px;
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 1s;
    pointer-events: none;
}

#banner_top .banner-message.active {opacity: 1; pointer-events: auto;}

body.has-banner-top {padding-top: 20px;}
body.has-banner-top header {top: 20px;}

.product-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.banner-out-of-stock {
    top: 50%;
    left: 50%;
   /*transform: translate(-50%, -50%) rotate(-25deg);*/
   transform: translate(-50%, -50%);
    background-color: #dc3545;
    color: #fff!important;
    text-decoration:none!important;
    font-weight: bold;
    font-size: 12px!important;
    padding: 0px 15px;
    z-index: 2;
    pointer-events: none;
    position: absolute;
    opacity: 0.95;
    letter-spacing: 2px;
    text-transform: uppercase;
}