@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;700&display=swap');

:root {
    --site: #cda557;
    --site-rgb: 205,165,87;
    --site-3: rgba(205,165,87,.3);
    --site2: #e5e5e5;
    --site3: #595959;
    --wh10: rgba(255,255,255,.1);
    --bl10: rgba(0,0,0,.1);

    --success: #66AA42;
    --success-light: #95BF7E;
    --danger: #CF423C;
    --danger-light: #FC7D49;

    --navbar: 168px;
    --navbar-fixed: 56px;
}

#sz2020 {position:fixed;right:-1rem;bottom:-1rem;z-index:9999;}

.d-grid {display: grid}

body {font-family: 'Raleway', sans-serif;font-weight: 300;}
h1,h2,h3,h4,h5,h6 {font-weight: 700;}
.font-montserrat {font-family: 'Montserrat', sans-serif}
.fs-0 {font-size: 0}
.fs-1 {font-size: .75rem}
.fs-2 {font-size: 1rem}
.fs-3 {font-size: 1.25rem}
.fs-4 {font-size: 1.5rem}
.fs-5 {font-size: 2rem}
.fs-6 {font-size: 3rem}
.fs-7 {font-size: 4rem}
.fs-8 {font-size: 10rem}
.fs-9 {font-size: 20rem}
.text-wrap {white-space: normal}

a, a:link, a:visited {color: var(--site)}
a:hover {color: var(--site2)}

footer a, footer a:link, footer a:visited {color: var(--site2)}
footer a:hover {color: var(--site)}

.text-site {color: var(--site)!important}
.text-site2 {color: var(--site2)!important}
.text-site3 {color: var(--site3)!important}
.bg-site {background-color: var(--site)}
.bg-site2 {background-color: var(--site2)}
.bg-wh10 {background-color: var(--wh10)}
.border-bl10 {border-color: var(--bl10)!important}
.border-wh10 {border-color: var(--wh10)!important}
.border-site {border-color: var(--site)!important}
.border-site2 {border-color: var(--site2)!important}
.border-site2:hover {border-color: var(--site)!important}
.border-site3 {border-color: var(--site3)!important}
.border-site3:hover {border-color: var(--site)!important}
.border-success {border-color: var(--success)!important}
.border-danger {border-color: var(--danger)!important}
.badge-site {background-color: var(--site);color: var(--light)!important}
.badge-site:hover {background-color: var(--site2);color: var(--dark)!important}
.badge-site2 {background-color: var(--site2);color: var(--dark)!important}
.badge-site2:hover {background-color: var(--secondary);color: white!important}

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

.btn-site {
    color: var(--light)!important;
    background-color: var(--site);
    border-color: var(--site)
}
.btn-site path {fill: var(--light)}
.btn-site:hover {
    color: var(--dark)!important;
    background-color: var(--site2);
    border-color: var(--site2)
}
.btn-site.active {
    color: var(--dark)!important;
    background-color: var(--site2)!important;
    border-color: var(--site2)
}
.btn-pager.active {color:white!important;background-color:var(--site);border-color:var(--site)}

.btn-success, .btn-green {
    color: white!important;
    background-color: var(--success-light)!important;
    border-color: var(--success-light)!important
}
.btn-success path {fill: white}
.btn-success:hover, .btn-success.active, .btn-green:hover, .btn-green.active {
    color: white!important;
    background-color: var(--success)!important;
    border-color: var(--success)!important
}
.bg-success {background-color: var(--success)!important}

.btn-danger, .btn-red {
    color: white!important;
    background-color: var(--danger-light)!important;
    border-color: var(--danger-light)!important
}
.btn-danger path {fill: white}
.btn-danger:hover, .btn-danger.active, .btn-red:hover, .btn-red.active {
    color: white!important;
    background-color: var(--danger)!important;
    border-color: var(--danger)!important
}
.bg-danger {background-color: var(--danger)!important}

.btn-site-trans {
    color: var(--site);
    background-color: transparent;
    border-color: transparent
}
.btn-site-trans path {fill: var(--site)}
.btn-site-trans:hover {
    color: var(--light);
    background-color: var(--site);
    border-color: var(--site)
}
.btn-site-trans.active {
    color: var(--light);
    background-color: var(--site);
    border-color: var(--site)
}

.btn-site2 {
    color: var(--dark);
    background-color: var(--site2);
    border-color: var(--site2)
}
.btn-site2 path {fill: var(--dark)}
.btn-site2:hover {
    color: white;
    background-color: var(--secondary);
    border-color: var(--secondary)
}
.btn-site2.active {
    color: white!important;
    background-color: var(--secondary)!important;
    border-color: var(--secondary)
}

.btn-white {
    color:var(--site)!important;
    background-color:white;
    border-color:white;
}

.cart-item.placed {background-color:#fefefe;color:#000000;font-weight:bold}

.alert-site {background:rgba(var(--site-rgb),.3)}
.alert-site .form-check {padding-bottom:.5rem}

.w-height {height:calc(100vh - var(--navbar) - var(--navbar-fixed))}
.w-min-height {min-height:calc(100vh - var(--navbar) - var(--navbar-fixed))}

.card-site, .card-site .card-header {border-radius: 0;border: 0 none;}
.card-site .card-body {border: 1px solid var(--site2);border-top: 0 none;padding: 0;color: var(--secondary)}
.card-site .card-body a, .card-site .card-body a:link, .card-site .card-body a:visited {color: var(--secondary)}
.card-site .card-body a:hover {color: var(--site)}
.card-site .card-header {background-color: var(--site);color: white;font-weight: bold;}
.card-site .card-body a {font-weight:700}

.card.border-site2:hover .card-footer {background-color: var(--site-3)}

/* 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(--site);padding:.25rem .75rem;border-radius:.5rem}
#cart.open .open-cart {padding:0 0 0 1rem;background:var(--site);color:white!important}
#cart .float-cart {
    display:inline-block;
    max-height:80vh;
    overflow-y:scroll;
    width:100%;
    background-color:var(--site);
    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:rgba(0,0,0,.1);display:inline-block;color:white;height:auto;border-radius:.25rem}
#cart .quantity, #cart-editor .quantity {padding:.5rem 1rem;display:inline-block}
#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}

.img-div {display:block;padding-top:100%;background-repeat:no-repeat;background-size:cover;background-position:center}

body.checkout .custom-radio svg {height:1.5rem;width:auto}

body.paymentlog #cart-list {font-size:1.25rem}

#cart-page .login .btn-div {padding: 3rem 1rem;background-color: rgba(var(--site-rgb),.2);text-align: center;margin: 1rem 0}
#cart-page .delivery-address .form-check {padding-left:0}
#cart-page [class*=shipper-form-] {padding:0;border:0 none;margin:1px}

/* animation */
.border-site2,
.card.border-site2 .card-footer {
    transition: border 1000ms;
    transition-timing-function: ease;
}

/* cart carousel */
.cart-carousel {
    height: 200px;
    overflow: hidden
}

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

/* custom input */
#user-editor .delivery, #user-editor .takeaway, #user-editor .person, #user-editor .company, #user-editor .parcelshop {padding-left:0}
#user-editor .form-check {padding-bottom:.5rem}
.form-control {border: 1px solid var(--site);color:var(--site)}
.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:white;border:1px solid var(--site)}
.custom-check input:checked ~ .checkmark {background-color:var(--site)}
.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(--site);
}
.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);
}

/* GLS */
#gls-print-pos {height: 2.3rem}

/* 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(--site); -webkit-box-shadow: 0 0 3px var(--site); }
	50% { background-color: var(--danger); -webkit-box-shadow: 0 0 40px var(--danger); }
	100% { background-color: var(--site); -webkit-box-shadow: 0 0 3px var(--site); }
}
@-moz-keyframes glowing {
  0% { background-color: var(--site); -moz-box-shadow: 0 0 3px var(--site); }
  50% { background-color: var(--danger); -moz-box-shadow: 0 0 40px var(--danger); }
  100% { background-color: var(--site); -moz-box-shadow: 0 0 3px var(--site); }
}
@-o-keyframes glowing {
  0% { background-color: var(--site); box-shadow: 0 0 3px var(--site); }
  50% { background-color: var(--danger); box-shadow: 0 0 40px var(--danger); }
  100% { background-color: var(--site); box-shadow: 0 0 3px var(--site); }
}
@keyframes glowing {
  0% { background-color: var(--site); box-shadow: 0 0 3px var(--site); }
  50% { background-color: var(--danger); box-shadow: 0 0 40px var(--danger); }
  100% { background-color: var(--site); box-shadow: 0 0 3px var(--site); }
}

@media screen and (max-width:1440px){
    .fs-4 {font-size: 1.25rem}
    .fs-5 {font-size: 2rem}
    .fs-7 {font-size: 4rem}
    .fs-9 {font-size: 15rem}
}
@media screen and (max-width:1024px){
    .cart-carousel {height: 150px}
    .fs-4 {font-size: 1.125rem}
    .fs-5 {font-size: 2rem}
    .fs-7 {font-size: 3rem}
    .fs-9 {font-size: 14rem}
}
@media screen and (max-width:768px){
    .fs-5 {font-size:1.5rem}
    .fs-7 {font-size: 2.5rem}
    .fs-9 {font-size: 12rem}
}
@media screen and (max-width:480px){
    .cart-carousel {height: 100px}
    .fs-5 {font-size: 1.5rem}
    .fs-7 {font-size: 2rem}
    .fs-9 {font-size: 10rem}
}

@media screen and (min-width:1200px){
    .d-xl-grid {display: grid!important}
}
@media screen and (min-width:992px){
    .d-lg-grid {display: grid!important}
}
@media screen and (min-width:768px){
    .d-md-grid {display: grid!important}
}
@media screen and (min-width:576px){
    .d-sm-grid {display: grid!important}
}