:root {
  --color-white:        #ffffff;    /* filter: brightness(0) invert(1); */
  --color-black:        #000000;    /* filter: brightness(0) */
  --color-yellow:       #FDC300;    /* filter: invert(84%) sepia(41%) saturate(928%) hue-rotate(356deg) brightness(101%) contrast(97%); */
  --bar-height:           100px;
  --content-height:       calc(100dvh - var(--bar-height) - var(--bar-height)/2);
}

html
  { -moz-osx-font-smoothing: auto; -webkit-font-smoothing : antialiased; overflow-x: hidden !important; background: var(--color-yellow); }
html, body
  { width: 100% !important; min-height: 100%; font-size: 20px; font-family: "Noto Sans", sans-serif; font-weight: normal;
  color: var(--color-white); background-color: var(--color-yellow); margin: 0 auto; padding: 0 !important; border: none !important; scrollbar-color: var(--color-white) var(--color-yellow); scrollbar-width: thin; }
body
  { background-image: url('../images/background.svg'); background-position: top 200px center; background-size: 120% auto; background-repeat: no-repeat; }
body::-webkit-scrollbar
  { width: .25em; z-index: 1000; }
body::-webkit-scrollbar-track
  { -webkit-box-shadow: inset 0 0 .3em var(--color-yellow); }
body::-webkit-scrollbar-thumb
  { background-color: var(--color-white); outline: none; }
html.blocked
  { overflow-y: hidden !important; background-color: var(--color-yellow); }

div#loading-overlay
  { position: fixed; bottom: 0; left: 0; background-color: var(--color-yellow); overflow: hidden;
  background-image: url('../images/loader.gif'); background-position: center center; background-size: 480px; background-repeat: no-repeat; 
  width: 100%; height: 100%; max-width: none !important; max-height: none !important; z-index: 150; margin: 0; padding: 0; }
body div#loading-content
  { position: relative; margin: 0 auto; }

*
  { font-weight: normal; hyphens: none !important; -moz-hyphens: none !important; -ms-hyphens: none !important; -webkit-hyphens: none !important; }
.no-display
  { display: none; }
a:hover, button:hover
  { text-decoration: none;
  transition: all 0.2s linear; -o-transition: all 0.2s linear; -moz-transition: all 0.2s linear; 
  -khtml-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -ms-transition: all 0.2s linear; }
p a
  { color: var(--color-white); }
p a:hover
  { text-decoration: none; opacity: 7; color: var(--color-white); }

.inner
  { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1em; }
.txt-center
  { text-align: center; }

img
  { max-width: 100%; }
b, strong
  { font-weight: bold !important; }
h1
  { font-family: "Lexend", sans-serif; font-weight: bold; margin: 0 0 1.5em 0; font-size: 1.8em; line-height: 1em; text-align: center; }
h2
  { font-family: "Lexend", sans-serif; font-weight: bold; margin: 1.25em 0 .75em 0; font-size: 1.4em; text-align: left; }

div#back-link
  { position: absolute; width: 100%; text-align: right; z-index: 50; }
div#back-link a
  { font-size: .8em; font-weight: bold; color: var(--color-white); text-decoration: none; }
div#back-link a:hover
  { opacity: .7; }

/*
* containers
*/
div#page-content
  { position: relative; width: 100%; min-height: var(--content-height); background-color: transparent; }
div#page-container
  { padding: 2em 0; }

div#lds-cmp-anchor-container
  { display: none !important; }

/*
* header
*/
header
  { display: block; height: var(--bar-height); width: 100%; padding-top: .5em; position: relative; }
header div#header-logo
  { position: absolute; top: 0; left: 1em; width: auto; height: calc(var(--bar-height) - 1em); }
header div#header-logo a
  { display: block; height: 100%; width: auto; }
header div#header-logo a img
  { filter: brightness(0) invert(1); height: 100%; width: auto; }
header div#header-logo a:hover img
  { opacity: .7; }
header div#header-menu
  { position: absolute; top: calc(((var(--bar-height) - (var(--bar-height) / 2)) / 2) - .5em); right: 1em; width: auto; height: calc(var(--bar-height) / 2); }
header div#header-menu.open div#header-menu-icon,
header div#header-menu div#header-menu-close
  { display: none; }
header div#header-menu div#header-menu-icon,
header div#header-menu.open div#header-menu-close
  { display: block; }
header div#header-menu div img
  { filter: brightness(0) invert(1); width: calc(var(--bar-height) / 2); }
header div#header-menu div img:hover
  { opacity: .7; cursor: pointer; }

/*
* menu
*/
div#menu-overlay
  { display: none; position: relative; width: 100%; min-height: var(--content-height); background-color: transparent; }
div#menu-overlay div#menu-container
  { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: var(--content-height); }
div#menu-overlay div#menu-container div#menu-content
  { margin-top: -3em; }
div#menu-overlay div#menu-container div#menu-content div.menu-category
  { display: block; text-align: center; }
div#menu-overlay div#menu-container div#menu-content div.menu-category + div.menu-category
  { margin-top: 1.5em; }
div#menu-overlay div#menu-container div#menu-content div.menu-category a
  { text-decoration: none; color: var(--color-white); text-transform: uppercase; font-weight: 900; font-size: 1.4em; }
div#menu-overlay div#menu-container div#menu-content div.menu-category a:hover
  { opacity: .7; }
div#menu-overlay div#menu-container a#menu-address
  { display: block; position: absolute; bottom: 3em; text-decoration: none; text-align: center; }
div#menu-overlay div#menu-container a#menu-address div#menu-address-icon
  { }
div#menu-overlay div#menu-container a#menu-address div#menu-address-icon img
  { display: inline-block; width: 30px; height: auto; margin-bottom: .5em; }
div#menu-overlay div#menu-container a#menu-address div#menu-address-text
  { font-size: .8em; color: var(--color-white); line-height: 1em; font-weight: bold; }
div#menu-overlay div#menu-container a#menu-address div#menu-address-ratp
  { display: block; width: 100%; max-width: 400px; margin: .25em auto 0 auto; }
div#menu-overlay div#menu-container a#menu-address div#menu-address-ratp img
  { width: 100%; height: auto; }
div#menu-overlay div#menu-container a#menu-address:hover div#menu-address-text
  { opacity: .7; }

/*
* home
*/
body#body-front
  { overflow: hidden; }
div#home-content
  { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: var(--content-height); }
div#home-carousel
  { position: relative; z-index: 2; width: 100%; }
div#home-carousel div.home-carousel-item
  { min-width: 320px; width: calc((var(--content-height) - var(--bar-height))*0.5); height: calc(var(--content-height) - var(--bar-height)); margin: 0 .5em; cursor: pointer; text-decoration: none; }
div#home-carousel div.home-carousel-item div.home-carousel-item-container
  { position: relative; width: 100%; height: 100%;border: 3px solid var(--color-white); border-radius: 2em; overflow: hidden; }
div#home-carousel div.home-carousel-item div.home-carousel-item-container div.home-carousel-item-image
  { position: absolute; width: 100%; height: 100%; background-position: center center; background-size: cover; transition: all .5s; }
div#home-carousel div.home-carousel-item div.home-carousel-item-container div.home-carousel-item-title
  { position: absolute; width: 100%; color: var(--color-yellow); top: calc(50% - .5em); left: 0; transition: all .5s;
  text-align: center; line-height: 1em; font-size: 2.2em; font-weight: bold; font-family: "Lexend", sans-serif; }
div#home-carousel div.home-carousel-item div.home-carousel-item-container div.home-carousel-item-button
  { position: absolute; width: 70%; background-color: var(--color-yellow); color: var(--color-white); bottom: 4em; left: 15%; transition: all .5s; border: 3px solid var(--color-yellow);
  text-align: center; line-height: 3em; font-size: .8em; text-transform: uppercase; border-radius: calc(1.5em + 2px); font-family: "Lexend", sans-serif; }
div#home-carousel div.home-carousel-item div.home-carousel-item-clip
  { position: absolute; height: var(--bar-height); width: calc(var(--bar-height) * 0.44106); top: calc(var(--bar-height) * -.33); right: 1.5em;
  background: url("../images/clip-icon.png") top left no-repeat; background-size: contain; }
div#home-carousel div.home-carousel-item:hover div.home-carousel-item-container div.home-carousel-item-image
  { transform: scale(1.1); }
div#home-carousel div.home-carousel-item:hover div.home-carousel-item-container div.home-carousel-item-title
  { color: var(--color-white); }
div#home-carousel div.home-carousel-item:hover div.home-carousel-item-container div.home-carousel-item-button
  { border-color: var(--color-white); font-weight: bold; }  
div#home-content .flickity-viewport
  { overflow: visible !important; }

/*
* categories
*/
div#category-container
  { padding: 3em 0; }
div#products-list
  { width: 100%; }
a.product-item
  { display: inline-block; position: relative; border-radius: 2em; border: 3px solid var(--color-white); width: calc(50% - .5em); margin-bottom: 1em; overflow: hidden; clear: left; cursor: pointer; }
a.product-item div.product-item-image
  { display: block; position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; transition: all .5s; }
a.product-item:hover div.product-item-image
  { transform: scale(1.1); }
a.product-item.product-item-1
  { float: left; margin-right: 1em; height: var(--category-width); }
a.product-item.product-item-2
  { height: calc(var(--category-width) * 2 + 1em); clear: none; }
a.product-item.product-item-3
  { clear: left; display: block; width: 100%; height: var(--category-width); }
a.product-item.product-item-4
  { height: var(--category-width); margin-right: 1em; }
a.product-item.product-item-5
  { height: var(--category-width); }  
a.product-item.product-item-6
  { float: left; margin-right: 1em; height: calc(var(--category-width) * 2 + 1em); }

/*
* products
*/
div#product-container
  { padding: 3em 0; position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--content-height); }
div#product-content
  { width: 100%; max-width: 640px; margin: 0 auto; }
div#product-image
  { position: relative; display: block; width: 100%; height: auto; margin-bottom: 1em; }
div#product-image img
  { display: block; width: 100%; height: auto; border: 3px solid var(--color-white); border-radius: 2em; }
div#product-image div#product-image-clip
  { position: absolute; height: var(--bar-height); width: calc(var(--bar-height) * 0.44106); top: calc(var(--bar-height) * -.33); right: 1.5em;
  background: url("../images/clip-icon.png") top left no-repeat; background-size: contain; }
div#product-desc
  { font-size: .8em; margin-bottom: 1em; }
div#product-brand
  { font-weight: bold; line-height: 1em; }
div#product-price
  { font-weight: bold; text-align: right; }
div#product-price-note
  { font-size: .7em; line-height: 1em; text-align: right; }
div#product-button
  { margin-top: 2em; text-align: center; }
div#product-button a#product-button-link
  { display: inline-block; width: 360px; max-width: 100%; background-color: var(--color-white); color: var(--color-yellow); transition: all .5s; border: 3px solid var(--color-white);
  text-align: center; line-height: 1em; padding: 1em; font-size: .8em; text-transform: uppercase; border-radius: calc(1.5em + 2px); font-family: "Lexend", sans-serif; text-decoration: none; }
div#product-button a#product-button-link:hover
  { border-color: var(--color-yellow); }
div#product-nav
  { margin-top: 2em; }
div#product-nav a
  { display: block; color: var(--color-white); font-size: .6em; font-family: "Lexend", sans-serif; font-weight: bold; text-decoration: none; line-height: 1em; }
div#product-nav a:hover
  { opacity: .7; }
div#product-nav div#product-nav-prev
  { text-align: left; line-height: .8em; }
div#product-nav div#product-nav-prev a
  { position: relative; padding-left: 1.5em; }
div#product-nav div#product-nav-prev a::after
  { position: absolute; top: calc(50% - .5em); left: 0; content: "❮"; }
div#product-nav div#product-nav-next
  { text-align: right; line-height: .8em; }
div#product-nav div#product-nav-next a
  { position: relative; padding-right: 1.5em; }
div#product-nav div#product-nav-next a::after
  { position: absolute; top: calc(50% - .5em); right: 0; content: "❯"; }

/*
* footer
*/ 
footer
  { min-height: calc(var(--bar-height)/2); width: 100%; position: relative; text-align: center; text-transform: uppercase; font-size: .6em; }
footer div#footer-rights
  { line-height: 1em; margin-bottom: .5em; font-weight: bold; }
footer div#footer-links
  { line-height: 1em; }
footer div#footer-links a
  { color: var(--color-white); text-decoration: none; }
footer div#footer-links a:hover
  { text-decoration: none; opacity: .7; }
footer div#footer-links a + a
  { margin-left: 1em; }

/*
* media queries
*/
@media (max-width: 768px) {
  :root {
    --bar-height: 80px;
  }
}
@media (max-width: 480px) {
  :root {
    --bar-height: 60px;
    --content-height: calc(100dvh - var(--bar-height) - 3.9em); /* .6 + .6 + .6 + .3 + .6 + .3 + .6 + .3*/
  }
  footer div#footer-rights
    { margin-bottom: 1em; }
  footer div#footer-links a
    { display: block; }  
  footer div#footer-links a + a
    { margin-left: 0; margin-top: .5em; }
}
@media (max-width: 400px) {
  :root {
    --bar-height: 50px;
  }
}
@media (max-height: 800px) {
  div#menu-overlay div#menu-container
    { align-items: normal; }
  div#menu-overlay div#menu-container div#menu-content
    { margin-top: 3em; }
  div#menu-overlay div#menu-container div#menu-content div.menu-category + div.menu-category
    { margin-top: 1em; }
  div#menu-overlay div#menu-container div#menu-content div.menu-category a
    { font-size: 1.2em; }
  div#menu-overlay div#menu-container a#menu-address
    { bottom: 2em; }
}
@media (max-height: 600px) {
  div#menu-overlay div#menu-container div#menu-content
    { margin-top: 2em; }
  div#menu-overlay div#menu-container div#menu-content div.menu-category + div.menu-category
    { margin-top: .5em; }
  div#menu-overlay div#menu-container a#menu-address
    { bottom: 1em; }
}