@font-face {
    font-family: 'Poppins';
    src: url('font/Poppins-Regular.eot');
    src: url('font/Poppins-Regular.eot?#iefix') format('embedded-opentype'),
        url('font/Poppins-Regular.woff2') format('woff2'),
        url('font/Poppins-Regular.woff') format('woff'),
        url('font/Poppins-Regular.ttf') format('truetype'),
        url('font/Poppins-Regular.svg#Poppins-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('font/Poppins-Bold.eot');
    src: url('font/Poppins-Bold.eot?#iefix') format('embedded-opentype'),
        url('font/Poppins-Bold.woff2') format('woff2'),
        url('font/Poppins-Bold.woff') format('woff'),
        url('font/Poppins-Bold.ttf') format('truetype'),
        url('font/Poppins-Bold.svg#Poppins-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

:root {
    --gold:#AB9560;
    --gold-rgb:171,149,96;
    --lgray:#8B8B8B;
    --lgray-rgb:139,139,139;
    --gray:#545454;
    --gray-rgb:84,84,84;
    --lgold:#F5F2EC;
    --lgold-rgb:245,242,236;
    --red:#FF3131;
    --red-rgb:255,49,49;

    --navbar-height:104px;
    --footer-height:121px;
}

/* basics */
.modal {z-index:1110}
.input-group-append .btn, .input-group-prepend .btn {z-index:0}
.vh100 {min-height:calc(100vh - var(--navbar-height) - var(--footer-height) - 40px)}

/* font */
body {font-family:'Poppins';font-weight:normal;color:var(--gold);background:var(--lgold)}
h1, h2, h3, h4, h5, h6, strong {font-weight:bold;}
.fs-8 {font-size: 4rem}
.fs-7 {font-size: 3.5rem}
.fs-6 {font-size: 3rem}
.fs-5 {font-size: 2.5rem}
.fs-4 {font-size: 2rem}
.fs-3 {font-size: 1.5rem}
.fs-2 {font-size: 1rem}
.fs-1 {font-size: .75rem}

/* color */
main a, main a:link, main a:visited {color:var(--gray)}
main a:hover {opacity:.7}

.btn-gold {background-color:var(--gold);color:white!important}
.btn-gold:hover {opacity:.7}
.btn-white {background-color:white;color:var(--gold)!important}
.btn-white:hover {opacity:.7}
.btn-red {background-color:var(--red);color:white!important}
.btn-red:hover {opacity:.7}
.btn-gray {background-color:var(--gray);color:white!important}
.btn-gray:hover {opacity:.7}
.btn-link, .btn-link:hover {color:var(--gold)}

.text-danger {color:var(--red)}
.text-gold {color:var(--gold)}
.form-control.is-invalid, .was-validated .form-control:invalid {border-color:var(--red)}

/* navbar */
header {position:relative;z-index:1}
#menu-fade {display:none;width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:3;background-color:rgba(0,0,0,.7)}
.navbar.row {margin:0;background:var(--gold);color:white;min-height:var(--navbar-height);position:relative}
.navbar.row .col-md-2 {text-align:center;}
.navbar-brand {margin:0}
.navbar-left, .navbar-right {display:flex;padding:0}
.navbar-right {z-index:4}
.navbar-left ul {margin-left:auto}
.navbar-left .nav-item {margin-left:.75rem}
.navbar-right .nav-item {margin-right:.75rem}
#logo {fill:white;width:90px}
.navbar-left .nav-link, .navbar-right .nav-link {color:white;font-weight:bold;text-transform:uppercase;padding:.5rem 1rem;font-size:1.125rem;width:180px;height:48px;position:relative;border:1px solid white;z-index:0;transition:600ms;display:flex;align-items:center;justify-content:center;}
.navbar-left .nav-link::before, .navbar-left .nav-link::after, .navbar-right .nav-link::before, .navbar-right .nav-link::after {
    position: absolute;
    background:var(--gold);
    z-index: -1;
    transition: 600ms;
    content: '';
    margin:0;
}
.navbar-left .nav-link::before, .navbar-right .nav-link::before {height:48px;width:150px}
.navbar-left .nav-link::after, .navbar-right .nav-link::after {width:180px;height:48px;border:0 none}
.navbar-left .nav-item, .navbar-right .nav-item {position:relative;}
.navbar-left .nav-item:hover .nav-link::before, .navbar-right .nav-item:hover .nav-link::before {width:0px}
.navbar-left .nav-item:hover .nav-link::after, .navbar-right .nav-item:hover .nav-link::after {height:0px}
.navbar-left .nav-item::before, .navbar-right .nav-item::before {
    content: url(img/menu.svg);
    width: 32px;
    height: 32px;
    position:absolute;
    z-index:1;
    top:-16px;
    left:calc(50% - 16px);
    transition: 200ms;
    opacity:0;
}
.navbar-left .nav-item:hover::before, .navbar-right .nav-item:hover::before {opacity:1}
.navbar-left .dropdown .dropdown-menu, .navbar-right .dropdown .dropdown-menu {padding-top:28px;background:transparent;border-top-left-radius:0;border-top-right-radius:0;min-width:180px;border:0 none;}
.navbar-left .dropdown-item, .navbar-right .dropdown-item {background:white;color:var(--gold);font-size:1.125rem;padding-top:.5rem;padding-bottom:.5rem}
.navbar-left .dropdown-item:hover, .navbar-right .dropdown-item:hover {background:var(--lgold);color:var(--lgray)}
.navbar-left .dropdown:hover .dropdown-menu, .navbar-right .dropdown:hover .dropdown-menu {display:block;margin-top:0}
.navbar-search {margin:.5rem auto;padding:0}
.navbar-search input {border:0 none}
.navbar-search input::placeholder {color:var(--lgray)}
.navbar-search .btn {background:white;color:var(--lgray)}
.navbar .bookmarks {border-radius:50%;width:2rem;height:2rem;display:grid;justify-content:center;align-items:center;background:white;color:var(--gold)}
.navbar-toggler {margin-left:auto;padding-right:0}
#site-menu {position:absolute;top:0;left:0;background:var(--gold);color:white;z-index:4;max-width:260px}
#site-menu .nav-link, #site-menu .nav-text {color:white;padding:.5rem 1.5rem;font-weight:bold}
#site-menu .sub {padding-left:2.5rem;font-weight:normal;}
#site-menu .nav-brand {padding:2.5rem 1.5rem 1.5rem 1.5rem;display:block}
#site-menu .nav-brand svg {width:82px;height:auto;}
#site-menu .nav-hr {padding:0 1.5rem}
#site-menu .nav-hr hr {border-color:var(--lgold);margin:.5rem 0}
#site-menu .social {padding:2rem 1.5rem 1rem 1.5rem}
#site-menu .social a {color:white;font-size:1.5rem;margin-right:.25rem}
.triangle-down {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 40px 100px 0 100px;
    border-color: var(--gold) transparent transparent transparent;
    margin:0 auto;
}
/* menu toggle icon */
.navbar-toggler .bar {
    display: block;
    width: 30px;
    height: 5px;
    border-radius: 1.5px;
    background: white;
    transition: all 0.2s;
    -moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	-webkit-transition: all 0.2s;
}
.navbar-toggler.collapsed .bar {width:22px;height:3px}
.navbar-toggler .bar:nth-child(1) {
    margin-bottom: 5px;
    transform: rotate(45deg);
    transform-origin: 10% 10%;
    -ms-transform: rotate(45deg);
    -ms-transform-origin: 10% 10%;
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin: 0% 10%;
}
.navbar-toggler .bar:nth-child(2) {margin-bottom:5px;opacity: 0;}
.navbar-toggler .bar:nth-child(3) {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
    -ms-transform: rotate(-45deg);
    -ms-transform-origin: 10% 90%;
    -webkit-transform: rotate(-45deg);
    -webkit-transform-origin: 0% 90%;
}
.navbar-toggler.collapsed .bar:nth-child(1) {
    transform: rotate(0);
    -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
}
.navbar-toggler.collapsed .bar:nth-child(2) {opacity: 1;}
.navbar-toggler.collapsed .bar:nth-child(3) {
    transform: rotate(0);
    -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
}

/* default pages */
#info-svg {width:.875rem;height:auto}
#info-svg path {fill:var(--gold)!important}
#down-svg {width:1rem;height:auto}
#insta-svg, #fb-svg {width:1.5rem;height:auto}
.error-page #error {height:40vh;margin-bottom:1.5rem}
.error-page div {height:100%}
.error-page svg path {fill:var(--gold)!important}
.img-div {display:block;padding-top:100%;background-repeat:no-repeat;background-size:cover;background-position:center}
#login-btn, #bookmark-btn, #search-btn, #paymentlog-btn, #countdown-btn {
    position:fixed;
    top:calc(27vh + 4rem);
    right:0;
    width:3.75rem;
    z-index:1100;
    display: inline-flex;
    text-align: center;
}
#login-btn a, #bookmark-btn a, #search-btn a, #paymentlog-btn a, #countdown-btn span {display:inline-block;color:white!important;font-size:2rem;position:relative;background:var(--gold);padding:.25rem .75rem;border-top-left-radius:.5rem;border-bottom-left-radius:.5rem;width:3.75rem;border:1px solid white}
#countdown-btn span {font-size:1rem}
#bookmark-btn, #paymentlog-btn {top:calc(27vh + 8rem)}
#search-btn, #countdown-btn {top:calc(27vh + 12rem)}
.more-btn svg {height:.75rem;width:auto}
.more-btn svg path {fill:var(--gray)!important}
.single-image img {width:100%;height:100%;object-fit:cover;}

/* pills */
.nav-pills .nav-link {background-color:var(--gold);color:white;margin-right:1rem}
.nav-pills .nav-link.active {background-color:var(--gold)}

/* user */
body.user section.container-fluid {padding-top:5rem;padding-bottom:5rem}
body.user main .container-lg {padding:1.5rem}
body.user h1 {text-align:center;font-size:2rem;margin-bottom:1.5rem;position:relative;color:var(--gold)}
body.user #pills-tab {margin-bottom:1.5rem}
body.user #pills-tab .nav-item {margin-bottom:.5rem}
body.user .form-check {margin-bottom:.5rem}
body.password main section > div > div, body.login main section > div > div, body.forgot main section > div > div {margin:2rem auto;padding:1.5rem}

/* default */
body.default #carousel {margin-top:-40px}
body.default .carousel-item {background-repeat:no-repeat;background-position:center;background-size:cover;height:59vh;color:white}
body.default .carousel-item > div {display:grid;align-items:center;justify-content:center;text-align:center;width:100%;height:100%}
.def-main {background:white;padding:3rem 0}
section[class*=def-] > div {background:var(--lgold);padding:3rem;outline:1px solid var(--gold);outline-offset:-3rem;position:relative}
section[class*=def-] > div > h2 {position:absolute;display:inline-block;padding:.5rem 1rem;width:16rem;text-align:center;background:var(--lgold);font-size:2rem;top:1.25rem;left:calc(50% - 8rem)}
section.def-list {padding:0}
section.def-list > div > h2 {width:24rem;left:calc(50% - 12rem)}
.def-main .cats {display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:4rem 10rem;justify-content:center}
.def-list > div > div.row {padding:3rem 2rem}
.def-main .cats > a {-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%;padding:1rem}
.def-main .img-div {width:100%;border-radius:2rem;-webkit-box-shadow: 0px 20px 40px -30px rgba(0,0,0,0.75);-moz-box-shadow: 0px 20px 40px -30px rgba(0,0,0,0.75);box-shadow: 0px 20px 40px -30px rgba(0,0,0,0.75);background-size:cover}
.def-main h3 {font-weight:normal;text-align:center;font-size:1rem;margin-top:1rem}

/* article */
body.article {background:white}
body.article article {margin:4rem 0;padding:3rem 2rem 2rem 2rem;border:1px solid var(--gold);position:relative}
body.article h1 {position:absolute;top:-1.75rem;left:1rem;background:white;padding:.25rem 1rem}

/* cart */
#fade {display:none;width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:1090;background-color:rgba(0,0,0,.7)}
#cart {
    position:fixed;
    top:27vh;
    right:calc(3.75rem - 60vw);
    width:60vw;
    z-index:1100;
    display: inline-flex;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}
#cart.open .cart-tab {position:absolute;top:0}
#cart .close-i {display:none;position:relative;z-index:9999}
#cart.open {right:0;z-index:1101}
#cart.open .close-i {display:block}
#cart.open .open-i {display:none}
#cart .open-cart {display:inline-block;color:white!important;font-size:2rem;position:relative;background:var(--gold);padding:.25rem .75rem;border-top-left-radius:.5rem;border-bottom-left-radius:.5rem;width:3.75rem;border:1px solid white}
#cart.open .open-cart {padding:0 0 0 1rem;background:var(--gold);color:white!important;border:0 none}
#cart .float-cart {
    display:inline-block;
    max-height:70dvh;
    overflow-y:scroll;
    width:100%;
    background-color:var(--gold);
    color:white;
    padding:1rem
}
#cart .btn-cart > small {
    position:absolute;
    color:white;
    top:-.5rem;
    left:-.5rem;
    width:1.5rem;
    height:1.5rem;
    font-size:1rem;
    text-align:center;
    display:block;
    border-radius:50%;
    background:var(--red)
}
#cart.open .btn-cart > small {display:none}
#cart h4 {font-weight:normal;margin-bottom:1rem}
#cart .q-div {display:inline-block;height:2rem;min-width:6rem;margin:0 auto;text-align:center}
#cart .q-div button {font-size:1rem;padding:.125rem .375rem;border-radius:.2rem;}
#cart .q-div .quantity {line-height:2rem}
#cart-editor .q-div .quantity {padding:0 1rem}
#cart button[name=q-plus] {float:right}
#cart button[name=q-minus] {float:left}
#cart-editor a {text-decoration:none}
.page-order {margin-bottom:1rem;background:white;border-radius:.5rem;padding:1rem}
body.cart .total {margin-left:auto;margin-top:1rem;margin-bottom:2rem}
body.shop #cart {position:relative;top:0;right:0;width:100%;padding:0}
body.shop #cart .cart-tab {display:none}
body.shop #cart .float-cart {max-height:none;overflow-y:visible;background-color:transparent;color:var(--gold)}
[id*=q-left], [id*=q-right] {cursor:pointer;}
#cart button[name=removeFromCart] {vertical-align:top;padding-top:4px;padding-bottom:3px}
.to-cart {display:none}
body.default #cart-editor .to-cart, body.ware #cart-editor .to-cart {display:block}
.add-to-btn {border:0 none;padding:0}
.add-to-btn:hover {border:2px solid var(--gold)}
body.shop #cart .total {position:fixed;bottom:0;background:var(--lgold);z-index:1;height:4rem;padding-top:.5rem;padding-bottom:.5rem}

#cart-page .login .btn-div {padding:3rem 1rem;background-color:rgba(var(--gold-rgb),.2);text-align:center;margin:1rem 0}
#cart-page .login .btn-div button, #cart-page .login .btn-div a {font-size:1.25rem}

/* shop */
body.shop {background:white}
#shop-nav {position:fixed;bottom:0;background:var(--lgold);z-index:1;height:4rem;margin:0 -15px;padding-top:1rem;padding-left:5rem}
body.shop #wares {margin-bottom:4rem}
#payment-modal .form-check {margin-bottom:1rem}
#payment-modal #due-date {display:none}
body.shop #user-list form {border-bottom:1px solid var(--gray);margin-bottom:.25rem;padding-bottom:.25rem}
body.shop #user-list {color:var(--secondary)}
body.shop #user-list form .col-3 {display:grid;align-items:center}
body.shop .order-group {display:grid;align-items:center}
body.shop .order-group.col-lg-8 {padding-left:0}
body.shop .order-group .custom-check {
    padding-left: 2rem;
}
body.shop .order-group .checkmark {
    top: -4px;
    height: 1.5rem;
    width: 1.5rem;
}
body.shop .order-group .custom-check .checkmark:after {
    left: 6px;
    top: 2px;
    width: .75rem;
    height: 1rem;
    border-width: 0 4px 4px 0;
}
body.shop .ware-div button[name=addToCartAjax] {padding:.375rem .25rem;height:auto}

.cur-btn {color:var(--gold)!important;background-color:white;border-color:white;padding-top:0;padding-bottom:0}
body.shop #ware-list .btn-gold[name=addToCartAjax] {text-align:left}
body.shop #ware-list .btn-gold[name=addToCartAjax] i {float:right;margin-top:.25rem}
body.shop button[name=removeFromCart] {margin-left:0!important}
body.shop .alert-primary {margin-bottom:.5rem}
body.shop .alert-primary button[name=removeFromCart] {margin-left:.5rem!important}
body.shop .alert-primary .custom-check {margin-top:0}
body.shop .alert-primary.order-group .checkmark {top: -4px;height:1.675rem;width:1.675rem}
body.shop input[name=change-quantity], body.shop input[name=change-title] {padding:.125rem .5rem;height:auto;width:5rem;background:var(--lgold);border:0 none}
body.shop input[name=change-title] {width:100%}
body.shop .head {font-size:.75rem}
body.shop .q-div .btn-red {padding:.125rem .5rem;margin:.5rem}
body.shop .modal-backdrop {z-index:1100}

/* products */
.btn-product {background:var(--gold);color:white!important;padding:.25rem .5rem;display:flex;text-align:left;margin-bottom:.5rem;font-weight:bold;width:100%;align-items:center}
.btn-product > span {margin-right:.5rem}
.btn-product i {margin-left:auto}
#search-input, #sortby-select {border-radius:0;border:1px solid var(--gold);padding:.25rem .5rem;height:2.125rem}
#search-input {border-right:0 none}
.group-name-search .input-group-append, .group-name-sortby .input-group-append {background:white;border:1px solid var(--gold);border-left:0 none}
.group-name-search .input-group-append .btn, .group-name-sortby .input-group-append .btn {padding:.125rem .5rem;color:var(--gold)}

body.termekek section.container-lg, body.products section.container-lg {z-index:auto}
#products #ware-list {min-height:100vh;padding-top:0}
#cat {margin:0 -.5rem 1rem -.5rem}
#cat > div {padding:0 .5rem;margin-bottom:1rem}
#cat button {height:100%}
#products {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
#products aside, #products > div {
    position: relative;
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
}
#products aside {
    -ms-flex: 0 0 240px;
    flex: 0 0 240px;
    max-width: 240px;
    padding-left:0
}
#products > div {
    -ms-flex: 0 0 calc(100% - 240px);
    flex: 0 0 calc(100% - 240px);
    max-width: calc(100% - 240px);
    padding: 1.5rem
}
#products > div > div.row {margin:1rem -1rem 0 -1rem}
#products > div > div.row > div {margin-bottom:1rem;padding:0 .5rem}
#products h1 {font-size:1.75rem;text-align:center}
#products .breadcrumb {margin-left:-.5rem}
#products aside a, #products aside a:link, #products aside a:visited {text-decoration:none!important}
#products aside .card {border-radius:0;border:0 none;margin-bottom:.5rem}
#products aside .card-header {padding:0;border-radius:0;height:2.125rem}
#products aside .card-header .fa-chevron-up {float:right;margin-top:.25rem;transform:rotate(0deg);transition: all 400ms;}
#products aside .card-header .collapsed .fa-chevron-up {transform:rotate(180deg)}
#products aside .card-body {padding:1.25rem .75rem}
#products aside small {color:var(--lgray)}
.ware-div {padding:.5rem;height:100%;display:grid;background:white;border-radius:.25rem;-webkit-box-shadow: 0px 20px 40px -30px rgba(0,0,0,0.75);-moz-box-shadow: 0px 20px 40px -30px rgba(0,0,0,0.75);box-shadow: 0px 20px 40px -30px rgba(0,0,0,0.75);position:relative;z-index:0}
body.shop .ware-div {border:0 none;display:block;padding:0}
body.shop .ware-div button[data-modelname=ware] {text-align:left;padding-left:0}
body.shop .ware-div button[data-modelname=ware] span {font-weight:bold;color:var(--red)}
.ware-div h2 {color:var(--gold);font-size:1.25rem;margin:0}
.ware-div h3 {font-size:1rem;padding-bottom:1rem}
.ware-div h3 a, .ware-div h3 a:link, .ware-div h3 a:visited {text-decoration:none;color:var(--dblue)}
.ware-div h4 {background:var(--red);color:white;font-size:1.25rem;position:absolute;top:0;right:0;width:100px;height:100px;border-bottom-left-radius:200px;padding:28px}
.ware-div h5 {font-size:.75rem;font-weight:normal;color:var(--lgray);margin:0}
.ware-div .product {position:relative;z-index:-1}
.ware-div .product button {position:absolute;bottom:-1.5rem;right:.5rem;font-size:1.5rem;width:3rem;height:3rem;border:2px solid white;background:var(--gold);color:white;border-radius:50%;text-align:center;padding:0;display:grid;align-items:center}
.ware-div .product .edit-btn {position:absolute;bottom:-1.5rem;left:.5rem;padding:0;font-size:1.5rem;width:3rem;height:3rem;border:2px solid white;background:var(--gold);color:white;border-radius:50%;text-align:center;padding:0;display:grid;align-items:center}
button[name=ajaxLink]::before {content:'\f004';font: var(--fa-font-regular)}
button[name=ajaxLink].linked::before {content:'\f004';font: var(--fa-font-solid)}
.ware-div .bottom {align-self:flex-end;padding-top:1.75rem}
.ware-div .bottom button[name=addToCartAjax] {padding-top:.125rem;padding-bottom:.25rem}
.ware-div .bottom button[name=addToCartAjax] svg {height:1.75rem;width:auto}
.ware-div .price small {color:var(--gray)}
.ware-div .price {position:relative}
.ware-div .price label {position:absolute;bottom:0;right:0;background:var(--red);color:white;margin-bottom:0;font-weight:500;padding:.125rem .25rem}
.ware-div .price > div:last-child {text-align:right}
.ware-div.discount .price h2 {color:var(--red)}
.ware-div .price s {font-size:.75rem;font-weight:bold;position:absolute;top:-.75rem;right:15px}
body.default .ware-div button[name=addToCartAjax], body.cart .ware-div button[name=addToCartAjax], body.checkout .ware-div button[name=addToCartAjax], body.ware .ware-div button[name=addToCartAjax] {padding:.125rem .25rem;height:100%}
.ware-div .img-link:hover {opacity:1}
.ware-div .img-div {width:100%;padding-top:100%;background-position:center;background-repeat:no-repeat;background-size:cover}
.ware-div .tags span {font-size:.75rem;background-color:var(--dblue);color:white;padding:.125rem .25rem}
.ware-div .tag-btn span {color:white}
.ware-div .q-div {text-align:center;height:100%;border-radius:.25rem}
.ware-div .q-div button {font-size:.75rem;padding:.125rem;margin:.25rem}
.ware-div .q-div .quantity {vertical-align:middle}
.ware-div button[name=q-plus] {float:right}
.ware-div button[name=q-minus] {float:left}
.ware-div .no-img svg {width:60%;height:60%;margin:10% 20%}
#filter {position:fixed;bottom:3rem;right:1rem;border-radius:50%;background-color:white;border:4px solid rgba(var(--gold-rgb), .5);width:4rem;height:4rem;display:none;align-items:center;text-align:center;font-size:2rem;outline:6px solid var(--gold);cursor:pointer;box-shadow: 0 0 0 0 rgba(var(--gold-rgb), .5);animation: pulse 1.5s infinite;z-index:1100}
#filter.active {background-color:var(--green)}
@keyframes pulse {
    0% {
      transform: scale(.85);
    }
    90% {
      transform: scale(1);
      box-shadow: 0 0 0 50px rgba(var(--blue-rgb), 0);
    }
      100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(var(--blue-rgb), 0);
    }
}
.variations a {display:block;text-decoration:none;text-align:center}
.variations a.active {border:2px solid rgba(var(--blue-rgb),.4)}
.variations img {padding:0 .25rem}

body.products .cats {display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding-bottom:2rem;justify-content:center}
body.products .cats > button {-ms-flex:0 0 10%;flex:0 0 10%;max-width:10%;padding:.5rem}
body.products .cats .img-div {width:100%;border-radius:1rem;-webkit-box-shadow: 0px 20px 40px -30px rgba(0,0,0,0.75);-moz-box-shadow: 0px 20px 40px -30px rgba(0,0,0,0.75);box-shadow: 0px 20px 40px -30px rgba(0,0,0,0.75);background-size:cover}
body.products .cats h3 {font-weight:normal;text-align:center;font-size:1rem;margin-top:1rem}

/* ware */
body.ware section.hAtom {padding-top:5rem;padding-bottom:5rem}
body.ware #ware {border-radius:.25rem}
body.ware .bg-white {padding:1.5rem}
body.ware #ware-editor {color:var(--gray)}
body.ware #ware-editor .ware-item, body.ware #gallery > div {border:1px solid var(--gold);padding:1.5rem;height:100%;}
body.ware h1 {font-size:2rem;margin-bottom:.5rem;position:relative;color:var(--gray)}
body.ware button[name=ajaxLink]::before {font-size:1.25rem}
body.ware h2 {color:var(--gold);text-align:right;margin-bottom:0}
body.ware small {font-size:1rem;font-weight:normal;color:var(--lgray)}
body.ware article h3 {font-size:1rem;margin-bottom:0}
body.ware .p-summary {margin-bottom:1rem;color:var(--lgray)}
body.ware .tags span {font-size:1rem;font-weight:600;background-color:var(--blue);color:white;padding:.125rem .25rem}
body.ware article hr {border-color:var(--blue)}
body.ware .w-div {text-align:center;background-color:var(--lgold);height:100%}
body.ware .w-div button {font-size:.75rem;padding:.125rem;margin:.25rem}
body.ware .w-div .quantity {vertical-align:middle}
body.ware button[name=w-plus] {float:right}
body.ware button[name=w-minus] {float:left}
body.ware button[name=addDirectToCart] {padding:.125rem .25rem;height:100%}
body.ware #ware-editor .bottom button[name=ajaxLink] {width:2rem;height:2rem;background:var(--gold);color:white;border-radius:50%;text-align:center;padding:0;display:grid;align-items:center;margin-left:auto}
body.ware .ware-item table {width:100%;margin-bottom:1rem}
body.ware .ware-item table tr {border-bottom:2px solid var(--lgray);border-top:2px solid var(--lgray)}
body.ware .ware-item table td {padding:.5rem;border-right:2px solid var(--lgray);border-left:2px solid var(--lgray)}
body.ware .ware-item table td:first-child {color:var(--gold);font-weight:bold;background:rgba(var(--gold-rgb),.1)}
body.ware .ware-item table td:last-child {color:var(--lgray)}
body.ware #gallery .img-div {background-size:contain}
body.ware .discount #gallery .img-div {border-color:var(--red)}
body.ware #gallery .col-2 .lightbox div {background-position:center;background-repeat:no-repeat;background-size:cover;padding-top:100%}
body.ware #gallery .col-12, body.ware #gallery .col-4 {padding:0 1rem}
body.ware #gallery .col-12 {margin-bottom:.875rem}
body.ware #gallery .col-4:nth-child(2) {padding-right:.25rem}
body.ware #gallery .col-4:nth-child(3) {padding:0 .625rem}
body.ware #gallery .col-4:nth-child(4) {padding-left:.25rem}
body.ware #ware-editor .q-div {margin:0 auto;height:2rem;text-align:center;border:1px solid var(--gold);border-radius:.25rem}
body.ware #ware-editor .q-div button {font-size:1rem;padding:.125rem;border-radius:0}
body.ware #ware-editor .q-div .quantity {line-height:2rem}
body.ware #ware-editor button[name=q-plus] {float:right}
body.ware #ware-editor button[name=q-minus] {float:left}
body.ware #ware-editor button[name=addToCartAjax] {padding:.1875rem 1rem}
body.ware #ware-editor button[name=addToCartAjax] svg {height:1.25rem;width:auto}
#variation-modal a, #variation-modal a:link, #variation-modal a:visited {text-decoration:none}
#variation-modal h4 {font-size:1rem;font-weight:300}
#variation-modal h3 {font-size:1.25rem}
#variation-modal .var-div {border:1px solid var(--blue);margin-bottom:1rem;padding:.5rem}
body.ware .carousel-inner {border-radius:.5rem}
body.ware .carousel-indicators li {width:.675rem;height:.675rem;border-radius:50%;background-color:var(--lgray)}
body.ware .carousel-indicators {margin-bottom:0;bottom:-2rem}
body.ware #carousel button[name=ajaxLink] {background:var(--gold);width:2.5rem;height:2.5rem;border-radius:50%;border:2px solid white;position:absolute;right:1rem;bottom:-1.25rem;color:white;text-align:center;padding:0;display:grid;align-items:center}
body.ware .top-img img {width:100%;height:auto;border-radius:.5rem}
body.ware .color > div:first-child {margin-bottom:.5rem}
body.ware .discount .price h2 {color:var(--red)}

.var-btns {margin-bottom:1rem}
.var-btns a {padding:.25rem 1rem;border:2px solid var(--gold);display:inline-block;color:var(--lgray)!important;margin-right:.25rem;border-radius:.25rem}
.var-btns a:hover, .var-btns a.active {opacity:1;background:var(--gold);color:white!important}

#size-modal .modal-header {border:0 none;background:var(--gold);color:white;border-radius:0}
#size-modal .close {color:white;opacity:1}
#size-modal .modal-body {background:var(--gold);color:white}
#size-modal table {width:100%}
#size-modal table td, #size-modal table th {border:1px solid white;text-align:center;padding:.375rem .75rem}

/* pager */
.page-link, .page-link:link, .page-link:visited {text-decoration:none}
.page-link {border:0 none;font-weight:bold;border-radius:.125rem!important;background:var(--gold);color:white!important}
.page-link.active, .page-link:hover {background-color:var(--lgray);color:white}

/* footer */
footer {background-color:var(--gold);color:white;text-align:center;padding-top:1.5rem;padding-bottom:1.5rem}
footer a {text-decoration:underline;}
footer a, footer a:link, footer a:visited, footer a:hover {color:white}
#ergo {width:3rem;margin-top:.5rem}
#ergo path, #ergo rect {fill:white !important}

/* custom input */
.form-control {border:1px solid var(--gold);color:var(--gold)}
.form-control::placeholder {color:rgba(var(--gold-rgb),.4)}
.custom-check, .custom-radio {
    display: block;
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1.25;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.custom-check input, .custom-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 1.25rem;
    width: 1.25rem;
    background-color:white;
}
.custom-radio .checkmark {border-radius:50%}
.custom-check input ~ .checkmark, .custom-radio input ~ .checkmark, .custom-check:hover input ~ .checkmark, .custom-radio:hover input ~ .checkmark {background-color:white;border:1px solid var(--gold)}
.custom-check input:checked ~ .checkmark {background-color:var(--gold)}
.custom-radio input:checked ~ .checkmark {background-color:white}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.custom-check input:checked ~ .checkmark:after, .custom-radio input:checked ~ .checkmark:after {display:block}
.custom-radio .checkmark:after {
    top: 1px;
    left: 1px;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background:var(--gold);
}
.custom-check .checkmark:after {
    left: 5px;
    top: 2px;
    width: .5rem;
    height: .75rem;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
/* slider */
.ui-slider {
    font-size: 0.6em;
    width: calc(100% - 2.4em);
    margin-left: 1.2em;
}
.ui-slider .ui-slider-handle {
    background-color: var(--gold);
    background-blend-mode: multiply;
    font-size: 1.25em;
    margin-top: -1px;
    border-radius: 1px;
    border-color: var(--gold);
    border-radius:50%;
}
.ui-slider .ui-slider-range {
    background-color:var(--lgray);
    background-blend-mode: multiply;
}
.range-filters {margin:1rem 0 0 0}
.range-filters * {
    font-size: 1rem;
    padding: 0.25rem;
}
.range-filters input {
    border: 1px solid var(--gold);
    padding-left: 1rem;
    text-align: center;
    width: 48%;
}
#range-filter-min-price, #range-filter-max-price {padding-left:.25rem}
.range-filters label {
    position: absolute;
}

@media screen and (min-width:1200px){
    #site-menu, .navbar .bookmarks, .navbar-search {display:none!important}
}

@media screen and (max-width:1366px) {
    .navbar-left .nav-link, .navbar-right .nav-link {font-size:1rem;width:150px}
    .navbar-left .nav-link::before, .navbar-right .nav-link::before {width:130px}
    .navbar-left .nav-link::after, .navbar-right .nav-link::after {width:150px}
    .navbar-left .dropdown .dropdown-menu, .navbar-right .dropdown .dropdown-menu {min-width:150px}
    .navbar-left .dropdown-item, .navbar-right .dropdown-item {font-size:1rem}
}
@media screen and (max-width:1199px){
    .navbar-left li, .navbar-right li, .triangle-down, #login-btn, #bookmark-btn, #search-btn, #paymentlog-btn, #countdown-btn {display:none!important}
    #logo {width:60px}
    .def-main .cats {padding:3rem 6rem}
    .def-main .cats > a {-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%;padding:.75rem}
    body.products .cats > button {-ms-flex:0 0 12.5%;flex:0 0 12.5%;max-width:12.5%;padding:.5rem}
}

@media screen and (max-width:991px) {
    .map-div, .map-div #map {height:40vh!important}
    .list {padding-top:40vh}
    .pos-fixed {bottom:calc(60vh - var(--navbar-height));left:0;width:100%;z-index:9999}
    #cart {right:calc(3.75rem - 85vw);width:85vw}
    #filter {display:grid}
    #products aside {
        margin-left:-240px;
        padding:1rem;
        background:var(--lgold);
        position:fixed;
        z-index:9999;
        transition: all 500ms;
        top:0;
        left:0;
        max-height:100vh;
        overflow-y:scroll;
        -webkit-overflow-scrolling:touch;
    }
    #products > div {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }
    #products h1 {font-size:1.25rem}
    body.ware .bg-white {padding:1.5rem}
    body.ware h1 {font-size:1.5rem}
    .breadcrumb {font-size:1.125rem}
    body.ware .tags span {font-weight:500}
    .def-main .cats {padding:3rem}
    .def-main .cats > a {-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%;padding:.5rem}
    .page-order h3 {margin-top:.5rem}
    body.products .cats > button {-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%;padding:.5rem}
}

@media screen and (max-width:768px) {
    #cart {right:calc(3.75rem - 100vw);width:100vw}
    body.ware section.hAtom {padding-top:1rem;padding-bottom:1rem}
    body.ware .bg-white {padding:.5rem}
    body.ware #ware-editor .ware-item {border:0 none;padding:.5rem;margin-top:2rem;height:auto}
    body.ware h1 {font-size:1.25rem;font-weight:bold;text-align:center}
    body.ware .p-summary, body.ware h2, body.ware .col-12.text-right {text-align:center!important}
    .def-main .cats, .def-list > div > div.row {padding:1.5rem}
    .def-main .img-div {border-radius:1.5rem}
    section[class*=def-] > div {padding:3rem;outline-offset:-2rem}
    section[class*=def-] > div > h2 {padding:.5rem 1rem;width:15rem;font-size:1.25rem;top:.75rem;left:calc(50% - 7.5rem)}
    body.products .cats > button {-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%;padding:.5rem}
}

@media screen and (max-width:480px) {
    .def-main .cats, .def-list > div > div.row {padding:1.5rem 1rem}
    .def-main .img-div {border-radius:1rem}
    body.article h1 {position:absolute;font-size:1.5rem}
}