@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;
}

@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;
}

:root {
    --yellow:#E8BB32;
    --black:#252525;
    --red:#C60309;
    --gray:#5B5554;
    --lgray:#B8B8B8;
    --ware-lgray:#e4e4e4;

    --navbar-height:121px;
    --footer-height:265px;
    --boho-navbar-height:117px;
}

html {scroll-behavior:smooth;}
details {margin-bottom:1rem}

/* font */
body {font-family:'Poppins';font-weight:normal;background:var(--black);color:white;overflow-x:hidden}
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}
.form-text {font-weight:normal}
[class*=container] {position:relative;z-index:1}
small em {color:var(--yellow)}
.vh-min {min-height:calc(100vh - var(--navbar-height) - var(--footer-height))}

/* 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(--yellow);padding:.25rem .75rem;border-radius:.5rem}
#cart.open .open-cart {padding:0 0 0 1rem;background:white;color:black!important}
#cart .float-cart {
    display:inline-block;
    max-height:80vh;
    overflow-y:scroll;
    width:100%;
    background-color:white;
    color:black;
    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 {margin-bottom:1rem}
#cart .btn, #cart-editor .btn {padding:.125rem .5rem;margin:.5rem}
#cart .quantity, #cart-editor .quantity {padding:0 1rem}
.m-div, .q-div {display:inline-block;border:2px solid var(--lgray);border-radius:1rem;padding:2px;line-height:1}
.m-div button[name=m-minus], .m-div button[name=m-plus], .q-div button[name=q-minus], .q-div button[name=q-plus] {cursor:pointer;border-radius:50%;background-color:var(--yellow);color:white;padding:0 .25rem}
.m-div button[name=m-minus], .q-div button[name=q-minus] {background-color:var(--red)}
.m-div .quantity, .q-div .quantity {vertical-align:middle;min-width:2rem;display:inline-block;text-align:center}
.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)}

/* custom input */
.form-control {border: 1px solid var(--yellow);color:var(--black)}
.form-control::placeholder {color:var(--lgray)}
nav .form-group label {color:var(--yellow)}
.custom-check, .custom-radio {
    display: block;
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0;
    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;
    height: 0;
    width: 0;
}
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 1.25rem;
    width: 1.25rem;
    background-color:white;
    cursor: pointer
}
.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:2px solid var(--black)}
.custom-check input:checked ~ .checkmark {background-color:var(--yellow)}
.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: 2px;
    left: 2px;
    width: calc(1rem - 4px);
    height: calc(1rem - 4px);
    border-radius: 50%;
    background:var(--yellow);
}
.custom-check .checkmark:after {
    left: 4px;
    top: 1px;
    width: .5rem;
    height: .75rem;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.custom-radio label, .custom-check label {font-size:.875rem;cursor:pointer}
/* 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(--yellow)}
a:hover {color:var(--yellow)}
pre {color:white}

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

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

.btn {transition:all 500ms ease 0ms;font-weight:bold}
.btn-t {
    color:var(--yellow)!important;
    background-color:transparent;
    border-color:transparent;
    font-size:1.25rem
}
.btn-t:hover, .btn-t.active {color:var(--yellow)!important;background-color:transparent;border-color:transparent;opacity:.8;}
.btn-white {color:var(--yellow)!important;background-color:white;border-color:white;}
.btn-white:hover, .btn-white.active {opacity:.8;}
.btn-icon {color:var(--yellow);background:transparent}
.btn-icon:hover, .btn-icon.active {color:var(--yellow);background:transparent;opacity:.8;}
.btn-tag {color:white!important;background-color:var(--lgray);border-color:var(--lgray);margin:.25rem .25rem 0 0;border-radius:.5rem;font-size:.875rem;font-weight:normal;padding:0 .5rem}
.btn-tag:hover, .btn-tag.active {opacity:.8;}
.btn-yellow {color:white!important;background-color:var(--yellow);border-color:var(--yellow);border-radius:.5rem}
.btn-yellow:hover, .btn-yellow.active {opacity:.8;}
.btn-red {color:white!important;background-color:var(--red);border-color:var(--red);border-radius:50%;margin:0!important;padding:0 .325rem!important}
.btn-yel {color:white!important;background-color:var(--yellow);border-color:var(--yellow);border-radius:50%;margin:0!important;padding:0 .325rem!important}

.qc-cmp2-persistent-link {background:var(--black)!important;border-color:var(--black);color:white!important}
.qc-cmp2-container {z-index:2}

/* default pages */
.error-page #error {height:40vh;margin-bottom:1.5rem}
.error-page div {height:100%}
#password-editor .form-text {text-align:left}
.img-div {display:block;padding-top:66%;background-repeat:no-repeat;background-size:cover;background-position:center}
body.bohofoto section.container-lg {min-height:100vh;display:flex;align-items:center;margin-top:0!important;margin-bottom:0!important;padding-top:var(--boho-navbar-height)}
section#fotoautomata h2 {margin-bottom:1.5rem}
section#referenciak h2, section#csomagajanlatok h2 {text-align:center;display:block;width:100%;margin-top:1.5rem}
section#csomagajanlatok h2 {margin-top:4rem;margin-bottom:2rem}
section#gyik h2 {margin-bottom:2rem}
section#referenciak .nav-pills {justify-content:center;margin-bottom:6rem;margin-top:2rem}
section#referenciak .nav-link {margin-bottom:.5rem}
section#gyik summary {background:var(--yellow);padding:.5rem 1rem;border-radius:.5rem}
section#gyik details[open] summary {background:var(--gray)}
section#gyik p {margin:1rem 0}
section#kapcsolat h2 {margin-top:2rem;margin-bottom:2rem}
section#automatafoglalas form {width:100%}

/* calendar form */
section#automatafoglalas .td-text {margin-top:2rem}
section#automatafoglalas h3 {margin:1rem 0;}
.btn-checkbox {display:none}
.btn-label {display:inline-block;cursor:pointer;transition:.3s;margin:0}
.btn-checkbox:checked + .btn-label {background-color:var(--success);}
.calendar {
    width: 350px;
    background: white;
    border-radius:1.5rem;
    text-align: center;
}
.month {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    background: var(--yellow);
    padding: 1.5rem;
    border-top-left-radius:1.5rem;
    border-top-right-radius:1.5rem;
}
.weekdays, .days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    padding:0 20px;
    color:var(--black)
}
.days {padding-bottom:20px}
.weekdays div {
    font-weight: bold;
    padding: 5px 0;
}
.day, .empty {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--lgray);
    border-radius: 5px;
    font-size: 14px;
}
.empty, .past {background:white}
.day.disabled {background:var(--danger)}
label.day {background:var(--yellow)}
#calendar-editor input {border-radius:.5rem;border:0 none;}
#calendar-editor .grp-chk {padding-left:1.25rem}
#calendar-editor .is-invalid, #calendar-editor .grp-chk .form-check-label {color:var(--yellow)}
.calendar-info span {width:1.5rem;height:1.5rem;border-radius:50%;display:inline-block;margin-top:.5rem}
.calendar-info small {vertical-align:super}

/* contact us */
#contact-us-editor input {border-radius:.5rem;border:0 none;}
#contact-us-editor .grp-chk {padding-left:1.25rem}
#contact-us-editor .is-invalid, #contact-us-editor .grp-chk .form-check-label {color:var(--yellow)}
#kapcsolat .fb {margin-top:2rem}
#kapcsolat .fb a {color:white!important}
#kapcsolat .fb i {color:var(--yellow)}

/* products */
#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}
.ware-div.discount {border-color:var(--red);border-top-left-radius:.5rem;border-top-right-radius:.5rem;}
.ware-div h2 {background:var(--red);color:white;font-size:1.5rem;margin:.25rem 0 0 0;padding:.125rem .25rem;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;border-top-left-radius:.25rem;border-top-right-radius:.25rem}
.ware-div h5 {font-size:1rem;margin:0}
.ware-div .product {position:relative}
.ware-div .product button {position:absolute;top:0;right:0;padding:0 .25rem;font-size:1.5rem}
.ware-div .bottom {align-self:flex-end}
.price {margin-bottom:.5rem}
.price > div:first-child {display:grid;align-items:center}
.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=addDirectToCart] {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 .w-div {text-align:center;background-color:var(--gray);height:100%}
.ware-div .w-div button {font-size:.75rem;padding:.125rem;margin:.25rem}
.ware-div .w-div .quantity {vertical-align:middle}
.ware-div button[name=w-plus] {float:right}
.ware-div button[name=w-minus] {float:left}
.ware-div .no-img svg {width:60%;height:60%;margin:10% 20%}
#filter {position:fixed;bottom:1rem;right:1rem;border-radius:50%;background-color:white;border:4px solid var(--lgreen);width:4rem;height:4rem;display:none;align-items:center;text-align:center;font-size:2rem;outline:6px solid var(--green);cursor:pointer;box-shadow: 0 0 0 0 rgba(var(--green-rgb), .5);animation: pulse 1.5s infinite;z-index:9999;}
#filter.active {background-color:var(--green)}
@keyframes pulse {
    0% {
      transform: scale(.85);
    }
    90% {
      transform: scale(1);
      box-shadow: 0 0 0 50px rgba(var(--green-rgb), 0);
    }
      100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(var(--green-rgb), 0);
    }
}
.boho-ware {background:var(--ware-lgray);border-radius:1.5rem;margin-bottom:1rem}
.boho-ware-head {background:white;border-radius:1.5rem;text-align:center;color:var(--black);overflow:hidden;}
.boho-ware-head h3 {padding:1rem 0}
.boho-ware-body {padding:1rem;text-align:center;color:var(--black)}
.boho-ware-footer {text-align:center;padding-bottom:1.5rem}
.boho-ware .img-div {border-radius:1.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:.25rem 1rem;background-color:var(--gray);color:white;margin-right:1rem;border-radius:.25rem}
.nav-pills .nav-link.active {background-color:var(--yellow)}

/* navbar */
#navbar {padding:1.5rem 1rem;display:block!important}
#navbar button {color:var(--yellow)}
.nav-item.dropdown:hover .dropdown-menu {display:inline-block}
.nav-item.dropdown > .dropdown-toggle:active {pointer-events:none}
#navbar input[name=search-key], #navbar button[name=search] {border-radius:0}
.bookmarks-btn {position:relative;display:inline-block}
.bookmarks-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 {margin-left:-15px;margin-right:-15px}
#menu .nav-item .nav-link {position:relative;z-index:1;}
#menu .nav-item {
    background:none;
    padding:.5rem 1rem;
    color:white;
    padding-left:0;
}
#navbar #logo {width:8rem;height:auto}
button.usr-btn {padding:0!important;background:transparent}
#navbar > div:first-child .dropdown {display:inline-block;vertical-align:bottom;}
#navbar > div:first-child > div:first-child {padding-left:0;padding-right:0}
#navbar .navbar-nav {flex-direction:row;padding-top:1rem}
#navbar .navbar-nav .btn {padding-left:1rem;padding-right:1rem}
#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;padding:.25rem}
#sw span {
    display:block;
    position:absolute;
    height:.25rem;
    width:1.5rem;
    background:var(--yellow);
    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:.5rem}
#sw span:nth-child(2),#sw span:nth-child(3) {top:1.125rem}
#sw span:nth-child(4) {top:1.75rem}
#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%}
#bohoMenu .nav-link {color:white!important;margin:0 .5rem;border:1px solid var(--black)}
#bohoMenu .nav-link.active, #bohoMenu .nav-link:hover {border-color:white;transition: all 1000ms;}
body.bohofoto header {border-bottom:4px solid var(--yellow);position:fixed;top:0;width:100%;background:var(--black);z-index:1050}

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

/* footer */
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(--yellow) !important}

/* cookie */
.cookie {position:fixed;bottom:1rem}
.cookie > div {background-color:var(--yellow);color:white;padding-top:1rem;padding-bottom:1rem;border-radius:.25rem}

/* default */
body.default section.container-lg {margin-top:4rem;margin-bottom:4rem}

/* 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}
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}

/* 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}
body.article h3 {font-size:1rem;margin-bottom:0}

/* ware */
body.ware section.container-fluid {padding-top:5rem;padding-bottom:5rem}
body.ware .bg-white {padding:3rem}
body.ware h1 {font-size:2rem;margin-bottom:.5rem;position:relative;color:var(--green)}
body.ware .discount h1:after {border-color:var(--red)}
body.ware button[name=ajaxLink]::before {font-size:1.5rem}
body.ware h2 {color:var(--red)}
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 article hr {border-color:var(--green)}
body.ware .w-div {text-align:center;background-color:var(--gray);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 #gallery .img-div {background-size:contain;border:2px solid var(--green)}
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 {border:1px solid var(--green);margin-bottom:1rem;padding:.5rem}

/* 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/imgfinder */
body.gallery h1 {font-size:2rem;color:var(--yellow);text-align:center;margin:3rem 0 1rem 0}
.result > div {padding:.5rem}
.img-card {border-radius:0;position:relative;color:var(--black)}
.img-card .card-header {position:relative;border-radius:0;padding:.5rem;border-bottom:0 none}
.img-card .btn-icon {position:absolute;bottom:1rem;right:1rem;padding:0}
.img-card .btn-icon.tag {left:1rem;right:auto}
.img-card .card-header .btn-icon {bottom:auto;top:1rem}
.img-card button[aria-expanded=true] {transform:rotate(180deg);}
.img-card.open button[name=ajaxLink] {bottom:-.5rem;top:auto}
.img-card .btn-icon.linked .fa-inverse {color:var(--black)}
.img-card h2 {font-size:1.25rem;font-weight:normal;margin-bottom:0}
.img-card .fa-spinner {color:var(--yellow)}
.img-card h3 {font-size:1.125rem;font-weight:normal;margin-top:1rem}
.img-card .card-body .custom-check {display:inline-block}
button[name=setCol] {height:2.375rem;width:auto;border-radius:0}
body.imgfinder .icons {padding-bottom:1rem;align-items:flex-end}
body.imgfinder .result {margin:0 -.375rem}
.gallery.featured img {border:.5rem solid white}

/* modal */
#modal {color:var(--black)}
#modal .modal-content {overflow:visible}
#modal h2 {font-size:1.25rem;font-weight:normal;margin-bottom:0}
#modal .modal-header {position:relative;border:0 none;}
#modal .modal-header > div {position:initial}
#modal .modal-header .close {color:white;background-color:var(--yellow);border-radius:50%;padding:.5rem .75rem;margin:0;float:none;position:absolute;top:-.5rem;right:.375rem;opacity:1}
#modal h3 {font-size:1.125rem;font-weight:normal;margin-top:1rem}
#modal .modal-footer {justify-content:center}
#modal .modal-body .custom-check {display:inline-block;margin-top:.375rem}
#modal fieldset .form-group {margin-bottom:.125rem}

/* cart */
#cart-page {padding:1.5rem}
#cart-page h1, #cart-page h2, #cart-page h3 {font-size:1rem;margin-bottom:0}
#cart-page h2 {margin-top:1.5rem}
#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-bottom:1px solid var(--gray);padding-bottom:.5rem}
#cart-page #cart-form #cart-editor .page-order > .row:last-child {border:0 none}
body.checkout .page-order > .row {margin:0}
#cart-page .quantity {padding:.5rem!important;vertical-align:middle;font-weight:bold}
#cart-page .q-div {padding:0 3px;background:white;color:black}
#cart-page .img-div {width:100%}
#cart-page .total {padding:0;margin-left:auto}
#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}
.delivery, .takeaway, .person, .company {padding:.5rem 0}
body.cart main > section.container-lg, body.checkout main > section.container-lg {border:1px solid var(--lgreen);padding:1.5rem}

/* events */
#events .img-div {border:.5rem solid white;}
#events h3 {font-weight:normal;font-size:1rem;color:var(--yellow)}
#events a h2 {color:white}
#events h2 {margin-bottom:1rem}
#events h3 {border-left: 2px solid var(--yellow);padding:.5rem 0 .5rem .5rem}
#events .list .row hr {border-color:var(--lgray);margin-top:0}
#events .list .text-right i {padding:.5rem;font-size:1.5rem}
#events .featured h2 {font-size:3rem}
#events .featured.img h2 {font-size:1.75rem;margin-top:.5rem}
#events .featured.img h3 {border:0 none;padding:0}

/* tag */
body.tag h1 small {color:white;background:var(--yellow);padding:.5rem;font-size:1rem;margin:0 1rem .25rem 0}
body.tag h1 span {display:block;margin:.5rem 0}
body.tag section.container-lg h2 {font-size:2rem;margin-bottom:1rem;background:var(--lgray);display:inline-block;color:var(--black);padding:.25rem .5rem}
body.tag .img-div {border:.5rem solid white;}
body.tag a h3 {color:white;font-size:1.25rem;margin-top:.25rem}

/* galleries */
body.gallery .img-div {border:.5rem solid white;}
body.gallery a h2 {font-size:1.5rem;color:white;margin-top:.5rem}

/* 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 */

@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){
    #navbar #logo .letters {display:none}
    #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 .25rem 0}
    #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}
}
@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-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}
    #navbar .navbar-nav {flex-direction:column;}
    #navbar .nav-item {padding:.25rem 1rem}
    #cart {right:calc(4rem - 100vw);width:100vw}
    #cart .quantity {display:block;text-align:center;margin-bottom:.5rem}
    body.ware .bg-white {padding:1rem}
}