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

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

:root {
    --gray:#E2E4DE;
    --red:#CF203A;
    --green:#4B5733;
    --lgreen:#879461;
    --green-rgb:75,87,51;
}

/* font */
body {font-family:'Inria Serif';font-weight:normal;color:var(--green)}
h1, h2, h3, h4, h5, 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}

/* basics */
.form-check {padding:0}
#cart-list .form-check {padding-left:1.25rem}
.form-text {font-weight:normal}
main {position:relative;overflow:hidden}
.bg-1, .bg-2, .bg-3, .bg-4, .bg-5 {position:absolute;z-index:0;width:25%;height:auto;opacity:.4}
.bg-1 {top:25vh;left:-2%}
.bg-2 {top:75vh;right:-2%;-webkit-transform:scaleX(-1);transform:scaleX(-1);}
.bg-3 {top:225vh;left:-2%}
.bg-4 {top:275vh;right:-2%;-webkit-transform:scaleX(-1);transform:scaleX(-1);}
.bg-5 {top:425vh;left:-2%}
[class*=container] {position:relative}
small em {color:var(--lgreen)}

/* 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:20vh;
    right:calc(6rem - 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}
#cart.open .close-i {display:block}
#cart.open .open-i {display:none}
#cart .open-cart {display:inline-block;color:white!important;font-size:3rem;margin-right:2.75rem;position:relative;background:var(--green);padding:.25rem .75rem;border-radius:.5rem}
#cart.open .open-cart {padding:0 0 0 1rem;background:var(--green);color:white!important}
#cart .float-cart {
    display:inline-block;
    max-height:75dvh;
    overflow-y:scroll;
    width:100%;
    background-color:var(--green);
    color:white;
    padding:1rem
}
#cart .btn-cart > small {
    position:absolute;
    color:white;
    top:-.5rem;
    right:-.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 .btn, #cart-editor .btn {padding:.125rem .5rem;margin:.5rem}
#cart .q-div {background:var(--gray);display:flex;color:var(--lgreen);height:auto}
#cart .quantity, #cart-editor .quantity {padding:.5rem 1rem;display:inline-block}
.unit {padding:.5rem 0}
#cart-editor a {text-decoration:none}
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(--green)}
[id*=q-left], [id*=q-right] {cursor:pointer;}
#cart button[name=removeFromCart] {vertical-align:bottom}
.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(--gray)}
body.shop #cart .total {position:fixed;bottom:0;background:var(--gray);z-index:1;height:4rem;padding-top:.5rem;padding-bottom:.5rem}

/* shop */
body.shop {background:white}
#shop-nav {position:fixed;bottom:0;background:var(--gray);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}

/* finder */
body.finder {background:white}
body.finder nav {padding-top:1rem}

/* custom input */
.form-control {border: 1px solid var(--green);color:var(--green)}
.form-control::placeholder {color:var(--lgreen)}
.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:var(--gray);border:1px solid var(--green)}
.custom-check input:checked ~ .checkmark {background-color:var(--green)}
.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(--green);
}
.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(--green);
    background-blend-mode: multiply;
    font-size: 2em;
    margin-top: -3px;
    border-radius: 1px;
    border-color: var(--green);
}
.ui-slider .ui-slider-range {
    background-color: var(--lgreen);
    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(--green);
    padding-left: 1rem;
    text-align: center;
    width: 49%;
}
#range-filter-min-price, #range-filter-max-price {padding-left:.25rem}
.range-filters label {
    position: absolute;
}


/* colors */
a, a:link, a:visited {color:var(--lgreen)}
a:hover {color:var(--green)}
a.btn-success {color:white}

.bg-green {background-color:var(--green)}
.bg-lgreen {background-color:var(--lgreen)}
.bg-gray {background-color:var(--gray)}

.text-green {color:var(--green)}
.text-lgreen {color:var(--lgreen)}

.alert-green {color:var(--green);background-color:rgba(var(--green-rgb),.2);border-color:transparent}

.btn {transition:all 300ms ease 0ms;border-radius:0;font-weight:normal}
.btn-white {
    color:var(--green)!important;
    background-color:white;
    border-color:white;
}
.btn-white:hover, .btn-white.active {color:white!important;background-color:var(--lgreen);border-color:var(--lgreen)}
.btn-green {
    color:white!important;
    background-color:var(--green);
    border-color:var(--green);
}
.btn-green:hover, .btn-green.active {color:white!important;background-color:var(--green);border-color:var(--green)}
.btn-lgreen {
    color:white!important;
    background-color:var(--lgreen);
    border-color:var(--lgreen);
}
.btn-lgreen:hover, .btn-lgreen.active {color:white!important;background-color:var(--lgreen);border-color:var(--lgreen)}
.btn-red {
    color:white!important;
    background-color:var(--red);
    border-color:var(--red);
}
.btn-red:hover, .btn-red.active {color:white!important;background-color:var(--red);border-color:var(--red);opacity:.8;}
.btn-outline-green {color:var(--green);background-color:white;border-color:var(--green)}
.btn-outline-green:hover {color:var(--dgreen)}
.btn-transparent {color:var(--green);background:transparent;border:1 none;display:inline-block}
.btn-file {color:white!important;background-color:var(--green);border-color:var(--green);text-align:left;padding:.5rem 1.5rem}
.btn-file span {display:inline-block;}
.btn-file span:first-child {vertical-align:super;padding-right:.5rem}
.btn-file span:last-child {float:right;margin-top:.5rem}
.badge-green {color:white;background-color:var(--green);border-radius:0}

.qc-cmp2-persistent-link {background:var(--green)!important;border-color:var(--green);color:white!important}

/* default pages */
.error-page #error {height:40vh;margin-bottom:1.5rem}
.error-page div {height:100%}
#login-form .form-control, #forgot-editor .form-control, #password-editor .form-control {border-radius:0}
#password-editor .form-text {text-align:left}
.img-div {display:block;padding-top:100%;background-repeat:no-repeat;background-size:cover;background-position:center}

/* products */
body.termekek section.container-lg, body.products section.container-lg {z-index:auto}
#products #ware-list {min-height:100vh;}
#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:2rem;position:relative;margin:0 -.5rem .25rem}
#products aside .card {border-radius:0;border:0 none;margin-bottom:.25rem}
#products aside .card-header {padding:0;border-radius:0}
#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 small {color:var(--lgreen)}
.ware-div {border:2px solid var(--green);padding:.5rem;height:100%;display:grid;background:white}
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.discount {border-color:var(--red)}
.ware-div h2 {color:var(--red);font-size:1.125rem;padding:.125rem .25rem;text-align:right}
.ware-div.discount h2 {background:var(--red);color:white;text-align:center}
.ware-div h3 {font-size:1rem;font-weight:normal;border-bottom:2px solid var(--green);padding-bottom:.5rem;-webkit-hyphens:auto;-moz-hyphens:auto;hyphens:auto;text-transform:uppercase;text-align:center;margin-bottom:.125rem}
.ware-div h3 a, .ware-div h3 a:link, .ware-div h3 a:visited {color:var(--green)}
.ware-div h4 {background:var(--red);text-align:center;color:white;margin:-.5rem -.5rem 0 -.5rem;font-size:1.25rem;padding:.25rem 0}
.ware-div h5 {font-size:.875rem;margin:.125rem 0 0 0;text-align:right}
.ware-div .product {position:relative}
.ware-div .product button {position:absolute;top:0;right:0;padding:0 .25rem;font-size:1.5rem}
.ware-div .product .edit-btn {position:absolute;top:0;left:0;padding:0 .25rem;font-size:1.5rem}
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}
.ware-div .bottom > small {display:block;text-align:center;color:var(--red);padding:.375rem 0 0 0;font-size:.75rem}
.prof {text-align:right;padding:.375rem 0 0 0;line-height:1.2;font-size:.75rem}
.prof span {color:var(--danger)}
.prof a {color:var(--green)}
.price {margin-bottom:.5rem}
.price > div:nth-child(3) {line-height:1.1;margin-top:.25rem}
.price > div:nth-child(4) {text-align:right;line-height:1.1;margin-top:.25rem}
.price > div:nth-child(2n) {padding-left:0}
.price small {font-size:.75rem}
.price #info-svg {width:1.25rem;height:auto;margin-right:.25rem}
.price {position:relative}
.price label {position:absolute;bottom:0;right:0;background:var(--red);color:white;margin-bottom:0;font-weight:bold;padding:.125rem .25rem}
.ware-div button[name=addToCartAjax] {padding:.125rem .25rem;height:100%}
.ware-div .img-div {width:100%;padding-top:80%;background-position:center;background-repeat:no-repeat;background-size:auto 75%}
.ware-div .tags span {font-size:.75rem;background-color:var(--green);color:white;padding:.125rem .25rem}
.ware-div .tag-btn span {color:white}
.ware-div .q-div {text-align:center;background-color:var(--gray);height:100%}
.ware-div .q-div button {font-size:.75rem;padding:.125rem;margin:.25rem}
.ware-div .q-div .quantity, .ware-div .q-div .unit {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:1rem;right:1rem;width:6rem;height:6rem;display:none;align-items:center;text-align:center;font-size:2rem;cursor:pointer;box-shadow: 0 0 0 0 rgba(var(--green-rgb), .5);background:rgba(var(--green-rgb),.5);animation: pulse 1.5s infinite;z-index:1000;border-radius:50%}
@keyframes pulse {
    0% {
      transform: scale(.85);
    }
    90% {
      transform: scale(1);
      box-shadow: 0 0 0 50px rgba(var(--green-rgb), 0);
      background:rgba(var(--green-rgb),0);
    }
    100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(var(--green-rgb), 0);
      background:rgba(var(--green-rgb),0);
    }
}
.brand-div {text-align:center;padding-bottom:2rem}
.brand-div .btn {width:9rem;height:9rem;border:1px solid var(--green);background:white;margin:.5rem}

/* bookmarks */
#bookmarks > div {
    position: relative;
    width: 100%;
    padding: 1.5rem
}
#bookmarks > div > div.row {margin:1rem -1rem 0 -1rem}
#bookmarks > div > div.row > div {margin-bottom:1rem;padding:0 .5rem}
#bookmarks h1 {font-size:2rem;position:relative;margin:0 -.5rem .25rem}

/* pills */
.nav-pills .nav-link {border-radius:0;padding:.125rem 3rem;background-color:var(--green);color:white;margin-right:1rem}
.nav-pills .nav-link.active {background-color:var(--green)}

/* navbar */
.nav-info {background-color:var(--lgreen);border-top:1px solid white;border-bottom:1px solid white;text-align:center;text-transform:uppercase;padding:.125rem 1rem}
.nav-grp-request {background-color:var(--alert-danger);color:var(--danger);border-top:1px solid white;border-bottom:1px solid white;text-align:center;text-transform:uppercase;padding:.5rem 1rem;font-weight:bold}
.nav-professional {background-color:var(--alert-success);color:var(--success);border-top:1px solid white;border-bottom:1px solid white;text-align:center;text-transform:uppercase;padding:.5rem 1rem;font-weight:bold}
.nav-info a, .nav-info a:link, .nav-info a:visited {color:white}
header {position:relative;z-index:2}
#navbar {padding-top:0;padding-bottom:0;z-index:1050}
#navbar .dropdown-menu {border-color:var(--lgreen);margin-top:0}
#navbar .dropdown-item {color:var(--green)!important}
.nav-item.dropdown:hover .dropdown-menu {display:inline-block}
.nav-item.dropdown > .dropdown-toggle:active {pointer-events:none}
#navbar .nav-hr {border-bottom:1px solid white!important;width:100%;display:none}
#navbar .nav-item a {color:white;text-transform:uppercase;font-weight:bold}
#navbar .nav-usr {display:none}
#navbar .nav-usr a {text-transform:none;font-weight:normal}
#navbar .nav-item button {color:white}
#logo {width:16rem}
#logo-mobil {padding:1rem 0;height:6rem;width:auto}
#menu-svg {width:3rem;height:3rem}
#upper-nav {background-color:white;border-bottom:4px solid var(--green);padding:1rem}
#upper-nav .ml-auto .btn {border-radius:50%}
#navbar input[name=search-key], #navbar button[name=search] {border-radius:0}
#upper-nav .nav-text {display:inline-block;vertical-align:bottom}
#upper-nav .nav-text h5 {font-size:1rem;margin-bottom:0}
#upper-nav .nav-text p {font-size:.75rem;margin-bottom:0}
#upper-nav .nav-item {margin-right:.5rem;}
#upper-nav .menu {font-size:.75rem;}
.bookmarks-btn, .cart-btn {position:relative}
.bookmarks-btn span, .cart-btn span {position:absolute;top:-.5rem;right:-.5rem;border-radius:50%;background-color:var(--red);color:white;width:1.25rem;height:1.25rem;text-align:center;display:grid;align-items:center;font-size:.75rem;font-weight:normal;}
#menu .nav-item .nav-link {position:relative;z-index:1;}
#menu .nav-item {
    background:none;
    padding:.5rem 1rem;
    color:white;
}
.nav-logo {margin-bottom:-1.5rem;border-radius:50%;background:var(--green)!important;padding:0!important}
.nav-logo a {padding:.25rem!important}
.nav-logo #logo {width:6rem;height:auto}
.flip-btn {background-color:transparent;display:inline-block;width:38px;height:38px;perspective:1000px;color:white!important;margin-right:.5rem}
.flip-btn-inner {position:relative;width:100%;height:100%;text-align:center;transition:transform 0.8s;transform-style:preserve-3d}
.flip-btn:hover .flip-btn-inner {transform:rotateY(180deg)}
.flip-btn-front, .flip-btn-back {position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:50%;display:grid;align-items:center}
.flip-btn-front i, .flip-btn-back i {margin:0 auto}
.flip-btn-front {background-color:var(--green)}
.flip-btn-back {background-color:var(--lgreen);transform:rotateY(180deg)}

#navbar #logo {width:6rem;height:auto}
#navbar > div:first-child {align-items:center;margin:0 auto;padding-left:0;padding-right:0}
button.usr-btn {padding:0!important;background:transparent}
#navbar > div:first-child .dropdown {display:inline-block;vertical-align:bottom;}
#navbar > div:first-child .bookmarks-btn, #navbar > div:first-child .usr-btn, #navbar .cart-btn {font-size:1.25rem;border-radius:50%;width:2.5rem;height:2.5rem;display:inline-block;border:1px solid white;text-align:center;color:white!important;padding-top:.25rem;margin-left:.25rem}
#navbar .cart-btn {vertical-align:text-bottom;}
#navbar .navbar-toggler {padding:0;position:relative;top:.25rem}
#navbar > div:first-child > div:first-child {padding-right:0}
#sw {width:2.5rem;height:2.5rem;position:relative;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out;cursor:pointer;border-radius:50%;border:1px solid white;padding:.25rem}
#sw span {display:block;position:absolute;height:.125rem;width:1.5rem;background:white;opacity:1;left:.4375rem;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out}
#sw span:nth-child(1) {top:.75rem}
#sw span:nth-child(2),#sw span:nth-child(3) {top:1.125rem}
#sw span:nth-child(4) {top:1.5rem}
#sw.open span:nth-child(1) {top:1.125rem;width:0%;left:50%}
#sw.open span:nth-child(2) {-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
#sw.open span:nth-child(3) {-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
#sw.open span:nth-child(4) {top:18px;width:0%;left:50%}
#order-btn {background-color:var(--lgreen);color:white}

/* pager */
.page-link {border:0 none;font-weight:bold;border-radius:0!important}
.page-link.active {background-color:var(--green);color:white}

/* footer */
footer {background-color:white;border-top:4px solid var(--green)}
footer .container .row {padding:3rem 0}
footer .container .row > div {-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%;padding:0 1rem}
#ergo {width:3rem;margin-top:.5rem}
#ergo path, #ergo rect {fill:var(--green) !important}

/* cookie */
.cookie {position:fixed;bottom:1rem}
.cookie > div {background-color:var(--green);color:white;padding-top:1rem;padding-bottom:1rem}
#sale-btn {position:fixed;bottom:8rem;right:1rem;width:6rem;height:6rem;align-items:center;text-align:center;box-shadow: 0 0 0 0 rgba(255,49,49,.5);background:rgba(255,49,49,.5);animation: pulse 1.5s infinite;z-index:9999;border-radius:50%}
#sale-btn img {width:100%;height:100%}

/* youtube */
.youtube {
    position:relative;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
    max-width:100%;
}
.youtube iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

/* default */
body.default h1 {display:none}
body.default #top {padding:5px;margin:1rem 0 0 0;background:rgba(var(--green-rgb),.25)}
body.default #iconz {margin-right:-.25rem}
body.default #iconz a {background:var(--green);color:white;width:100%;height:100%;display:grid;align-items:center;text-align:center}
body.default #iconz .row {margin:0}
body.default #iconz .col-4, body.default #iconz .col-6, body.default #iconz .col-12 {padding:0 .25rem .5rem .25rem}
body.default #iconz .col-8 {padding:0}
body.default #cats a {display:grid;background:var(--green);text-align:center;color:white;padding:.25rem .5rem;font-weight:bold;height:100%;align-items:center}
body.default #cats .row > div {padding:0 .25rem .5rem .25rem}
body.default #cats a i {font-size:2rem;padding:.25rem 0}
body.default main section.container-lg, body.sale main section.container-lg, body.akcio main section.container-lg {background:var(--gray);margin:0 auto 4rem auto;padding:1.5rem 3rem}
body.default main section.container-lg > h2, body.sale main section.container-lg > h2, body.akcio main section.container-lg > h2 {text-align:center;text-transform:uppercase;margin-bottom:1.5rem}
body.default main > h3, body.sale main > h3, body.akcio main > h3 {width:5rem;margin:0 auto;background:var(--green);border-top-left-radius:1rem;border-top-right-radius:1rem;margin-top:4rem;padding:.5rem 1.5rem}

/* user */
body.user section.container-fluid {padding-top:5rem;padding-bottom:5rem}
body.user main .container-lg {border:1px solid var(--lgreen);padding:1.5rem}
body.user .bg-white {padding:1rem}
body.user h1 {font-size:2rem;margin-bottom:1.5rem;position:relative;color:var(--green)}
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 {border:1px solid var(--lgreen);margin:2rem auto;padding:1.5rem;background:white}

/* article */
body.article section.container-fluid {padding-top:5rem;padding-bottom:5rem}
body.article section > .container-lg {border:1px solid var(--lgreen);padding:1.5rem}
body.article .bg-white {padding:1rem}
body.article h1 {font-size:2rem;margin-bottom:1.5rem;position:relative;color:var(--green)}
body.article h3 {font-size:1rem;margin-bottom:0}
#delivery-table th {padding:.25rem .5rem;background:rgba(var(--green-rgb),.2)}
#delivery-table td {padding:.25rem .5rem}

/* search */
body.search section.container-fluid {padding-top:5rem;padding-bottom:5rem}
body.search section > .container-lg {border:1px solid var(--lgreen);padding:1.5rem}
body.search .bg-white {padding:1rem}
body.search h1 {font-size:2rem;margin-bottom:1.5rem;position:relative;color:var(--green)}
body.search h3 {font-size:1rem;margin-bottom:0}

/* ware */
body.ware section.container-fluid {padding-top:5rem;padding-bottom:5rem}
body.ware section > .container-lg:first-child {border:1px solid var(--lgreen);padding:1.5rem;margin-bottom:3rem}
body.ware .bg-white {padding:3rem}
body.ware h1 {font-size:1.5rem;margin-bottom:0;position:relative;color:var(--green);text-transform:uppercase}
body.ware h1 .btn-transparent {border:1px solid var(--green);border-radius:50%;padding:.5rem .5rem .25rem .5rem;vertical-align:inherit}
body.ware article hr {border-color:var(--green);margin:.25rem 0 .5rem;border:2px solid}
body.ware .price > div:first-child {display:block}
body.ware .price > div:nth-child(2) {text-align:right}
body.ware .price > div:nth-child(3) {margin-top:0}
body.ware h2 {color:var(--red);margin-bottom:0}
body.ware .prof-price::before {content:"Az Ön ára: ";font-size:50%}
body.ware table {width:100%;margin-bottom:1rem}
body.ware table tr:nth-child(2n + 1) {background-color:var(--gray)}
body.ware table tr {border-bottom:1px solid var(--green)}
body.ware table tr:last-child {border:0 none}
body.ware table td {padding:.25rem}
body.ware table td:first-child {border-right:1px solid var(--green)}
body.ware table td:last-child {padding-left:1rem}
.color-btn {display:block;color:white;background:var(--lgreen);text-align:left;margin-bottom:2rem}
.color-btn:hover {color:white;opacity:.8;}
.color-btn span {float:right}
.opt-btn {color:white;background:var(--lgreen);margin:0 .5rem .75rem 0}
.opt-btn:hover {color:white;opacity:.8;}
.opt-btn.active {background:var(--green)}
#accessory {background:var(--gray);padding:2rem}
#accessory > h2 {margin-bottom:1rem;text-align:center;color:var(--green);text-transform:uppercase;}
.list-price {background:var(--alert-warning);color:var(--warning);padding:.25rem .5rem;margin-top:.5rem}
body.ware section.container-fluid > h3 {width:5rem;margin:0 auto;background:var(--green);border-top-left-radius:1rem;border-top-right-radius:1rem;margin-top:4rem;padding:.5rem 1.5rem}

body.ware .discount h1:after {border-color:var(--red)}
body.ware button[name=ajaxLink]::before {font-size:1.5rem}

body.ware article h3 {font-size:1rem;margin-bottom:0}
body.ware .p-summary {margin-bottom:1rem}
body.ware .tags span {font-size:1rem;font-weight:bold;background-color:var(--green);color:white;padding:.125rem .25rem}
body.ware .q-div {text-align:center;background-color:var(--gray);height:100%}
body.ware article .q-div button {font-size:.75rem;padding:.125rem;margin:.25rem}
body.ware .var-div .q-div {padding:.25rem;overflow:auto}
body.ware .q-div .quantity, body.ware .q-div .unit {vertical-align:middle}
body.ware button[name=q-plus] {float:right}
body.ware button[name=q-minus] {float:left}
body.ware button[name=addToCartAjax] {padding:.125rem .25rem;height:100%}
body.ware .img-div {background-size:contain}
body.ware .discount #gallery .img-div {border-color:var(--red)}
body.ware #gallery .col-4 .lightbox div {background-position:center;background-repeat:no-repeat;background-size:contain;padding-top:100%;border:2px solid var(--green)}
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}
#variation-modal h4 {font-size:1rem;font-weight:normal}
#variation-modal h3 {font-size:1.25rem}
#variation-modal .var-div {margin-bottom:1rem;padding:.5rem}
.vbtn {height:2rem!important;display:flex;justify-content:center;align-items:center}
.act .vbtn {animation:press 0.2s 1 linear}
.act img {animation: bi 0.4s 1 linear;position:relative;z-index:9999}
@keyframes press {
    0% {transform:scale(1)}
    50% {transform:scale(0.92)}
    to {transform:scale(1)}
}
@keyframes bi {
    20% {transform:rotate(5deg);top:0px;right:0px}
    80% {transform:scale(0.01) rotate(30deg);top:-4rem;right:-20rem;opacity:0}
    81% {transform:scale(1) rotate(0deg);top:10rem;right:0px;opacity:0}
    100% {top:0px;opacity:1}
}

.fodraszar {width:2.5rem;height:2.5rem;padding:0;border-radius:50%;justify-content:center;display:grid;align-items:center;position:absolute;top:.5rem;left:1rem;z-index:1}
body.default .fodraszar {left:1.5rem}
.fodraszar img {width:2rem;height:2rem}
.tooltip > .tooltip-arrow, .tooltip > .tooltip-inner {background-color:#c82333}
.tooltip.show {opacity:1}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {border-bottom-color:#c82333}

/* column */
body.column section.container-lg {padding-top:5rem;padding-bottom:5rem}
body.column {color:var(--green)}
body.column h1 {font-size:2rem;margin-bottom:1.5rem;position:relative;color:var(--green)}

/* gallery */
body.gallery section.container-lg {padding-top:5rem;padding-bottom:5rem}
.gallery-img {background-color:white;padding:2.5rem 1.5rem 1.5rem}
body.gallery h1 {font-size:2rem;margin-bottom:1.5rem;position:relative;color:var(--green)}

/* cart */
#cart h2 {color:white}
#cart-page {background:white;padding:1.5rem}
#cart-page h1, #cart-page h2 {font-size:2rem;margin-bottom:1.5rem;position:relative;color:var(--green)}
#cart-page h2 {margin-top:1.5rem}
#cart-page > div.row {background:var(--green);color:white;margin:0;font-weight:bold}
#cart-page > div.row div {padding:.5rem;text-align:center}
#cart-page #cart-form #cart-editor {margin:0}
#cart-page #cart-form #cart-editor .page-order {margin-bottom:.5rem}
#cart-page #cart-form #cart-editor .page-order .row {border:1px solid var(--green);padding-top:1rem;padding-bottom:1rem}
#cart-page #cart-form #cart-editor .page-order .row > div:first-child {padding:0 3rem}
#cart-page #cart-form #cart-editor .page-order .row > div:last-child {font-weight:bold;font-size:1.25rem;border-left:2px solid var(--green)}
#cart-page #cart-form #cart-editor .page-order .row > div {justify-content:center;display:flex;align-items:center}
#cart-page #cart-form #cart-editor .page-order .row > div:nth-child(2) {text-align:left;display:block}
#cart-page .quantity {padding:.5rem!important;vertical-align:middle;font-weight:bold}
#cart-page .unit {vertical-align:middle}
#cart-page .q-div {background:var(--gray);margin:0 auto}
#cart-page .img-div {width:100%}
#cart-page .total {padding:0;margin-left:auto;font-weight:bold}
#cart-page .total hr {border-color:var(--green)!important}
#cart-page .total hr:first-child {margin-bottom:.125rem}
#cart-page .total hr:last-child {margin-top:.125rem}
#cart-page .total .row > div:nth-child(2), #cart-page .total .row > div:nth-child(6) {font-weight:bold;font-size:1.25rem}
#cart-page .total .row > div:nth-child(1), #cart-page .total .row > div:nth-child(5) {display:grid;align-items:end}

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

#cart-form .img-div {background-size:contain}
.delivery, .takeaway, .person, .company, .parcelshop {padding:.5rem 0}
body.cart main > section.container-lg, body.checkout main > section.container-lg, body.confirm main > section.container-lg {border:1px solid var(--lgreen);padding:1.5rem;background:white}
.vw-logos {border:0 none!important;margin-bottom:2rem;background:transparent!important}
body.checkout .row .form-check {margin-top:1rem}
body.checkout .row .form-check .custom-radio {font-size:1.25rem}
body.checkout .row .form-check .checkmark {width:1.5rem;height:1.5rem}
body.checkout .row .form-check .custom-radio .checkmark:after {width:1.25rem;height:1.25rem}

.delivery-address > .form-check {padding:.25rem 0}
.delivery-address [class*=shipper-form-] {padding:.5rem 0;margin:.5rem 0;border:0 none}
.delivery-address [class*=shipper-form-]:empty {padding:0;margin:0}

#address-list, #invoice-list {margin-top:.5rem}
#invoice-list .alert-light {background-color:rgba(var(--green-rgb),.2)!important}

#post-modal.modal {padding:0!important}
#post-modal.modal .modal-dialog {width:calc(100% - 2rem);max-width:none;height:calc(100% - 2rem);margin:1rem}
#post-modal.modal .modal-content {height:100%;border:0;border-radius:2rem}
#post-modal.modal .modal-body {overflow-y:auto}

/* google maps */
.map-responsive {overflow:hidden;padding-bottom:50%;position:relative;height:0;width:100%}
.map-responsive iframe {left:0;top:0;height:100%;width:100%;position:absolute}

/* opening hours */
.ohs {background-color:var(--gray);margin:.5rem 0;font-weight:bolder;}
.ohs div[class*=col] {border-bottom:1px solid var(--green);padding:.125rem .25rem}
.ohs div[class*=col]:nth-last-child(1), .ohs div[class*=col]:nth-last-child(2) {border-bottom:none}
.ohs .col-4 {border-right:1px solid var(--green)}

/* animation */
.glowing {
	-webkit-animation: glowing 1500ms infinite;
	-moz-animation: glowing 1500ms infinite;
	-o-animation: glowing 1500ms infinite;
	animation: glowing 1500ms infinite;
}
@-webkit-keyframes glowing {
	0% { background-color: var(--lgreen); -webkit-box-shadow: 0 0 3px var(--lgreen); }
	50% { background-color: var(--green); -webkit-box-shadow: 0 0 40px var(--green); }
	100% { background-color: var(--lgreen); -webkit-box-shadow: 0 0 3px var(--lgreen); }
}
@-moz-keyframes glowing {
  0% { background-color: var(--lgreen); -moz-box-shadow: 0 0 3px var(--lgreen); }
  50% { background-color: var(--green); -moz-box-shadow: 0 0 40px var(--green); }
  100% { background-color: var(--lgreen); -moz-box-shadow: 0 0 3px var(--lgreen); }
}
@-o-keyframes glowing {
  0% { background-color: var(--lgreen); box-shadow: 0 0 3px var(--lgreen); }
  50% { background-color: var(--green); box-shadow: 0 0 40px var(--green); }
  100% { background-color: var(--lgreen); box-shadow: 0 0 3px var(--lgreen); }
}
@keyframes glowing {
  0% { background-color: var(--lgreen); box-shadow: 0 0 3px var(--lgreen); }
  50% { background-color: var(--green); box-shadow: 0 0 40px var(--green); }
  100% { background-color: var(--lgreen); box-shadow: 0 0 3px var(--lgreen); }
}

@media screen and (min-width:1200px){
    .d-xl-grid {display:grid !important}
    #menu .nav-item:hover::before,
    #menu .nav-item:hover::after {
        width:100%;
        height:100%;
    }
    #menu .nav-item:hover::before {
        border-top-color:white;
        border-right-color:white;
        transition:
        width 0.1s ease-out,
        height 0.1s ease-out 0.1s;
    }
    #menu .nav-item:hover::after {
        border-bottom-color:white;
        border-left-color:white;
        transition:
        border-color 0s ease-out 0.2s,
        width 0.1s ease-out 0.2s,
        height 0.1s ease-out 0.3s;
    }
}
@media screen and (min-width:992px){
    .d-lg-grid {display:grid !important}
}

@media screen and (max-width:1366px) {
}
@media screen and (max-width:1199px){
    #upper-nav form .input-group {margin:0 auto}
    #cart {right:calc(6rem - 70vw);width:70vw}
    .navbar .container-lg {-ms-flex-align:start;align-items:start}
    .nav-item.dropdown > .dropdown-toggle:active {pointer-events:all}
    #navbar .nav-item {padding:.25rem 1rem}
    #navbar .dropdown-item {padding:.25rem .5rem}
    #navbar .nav-hr, #navbar .nav-usr {display:block}
}
@media screen and (max-width:1024px) {
	.fs-5 {font-size: 2rem}
	.fs-4 {font-size: 1.5rem}
	.fs-3 {font-size: 1.25rem}
}
@media screen and (max-width:991px){
    #logo {width:10rem}
    #cart {right:calc(6rem - 85vw);width:85vw}
    #filter {display:grid}
    #products aside {
        margin-left:-240px;
        position:fixed;
        z-index:9999;
        background:var(--lgreen);
        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}
    body.ware .tags span {font-weight:bold}
    #cart-page #cart-form #cart-editor .page-order .row > div:last-child {border-left:0 none}
}
@media screen and (max-width:768px){
    .fs-5 {font-size: 1.75rem}
	.fs-4 {font-size: 1.5rem}
	.fs-3 {font-size: 1.25rem}
    .nav-pills .nav-link {padding:.125rem 1.5rem;margin-right:.5rem}
    #cart {right:calc(4rem - 90vw);width:90vw}
    #cart .open-cart {font-size:2rem}
    body.ware h1 span {background:transparent}
    body.ware h1:after {border-top:0 none}
}
@media screen and (max-width:480px) {
    h1 {font-size:1.75rem}
    .fs-7 {font-size: 2.5rem}
    .fs-6 {font-size: 2rem}
	.fs-5, #cart h4 {font-size: 1.25rem}
	.fs-4 {font-size: 1.125rem}
	.fs-3 {font-size: 1rem}
	.fs-2 {font-size: .875rem}
    .dropdown-item {white-space:normal}
    #navbar {padding-left:0;padding-right:0}
    #navbar ul {padding-right:0}
    #cart {right:calc(4rem - 100vw);width:100vw}
    #cart .quantity {display:block;text-align:center}
    body.ware .bg-white {padding:1rem}
    .fodraszar {width:4rem;height:4rem}
    .fodraszar img {width:3.5rem;height:3.5rem}
}