/*================================================================
/*
/* Handcrafted with love by all the good people of STUDIO SYNAPSE
/*
/*	    www.studiosynapse.cz | justwow@studiosynapse.cz
/*
/*================================================================


/* ********************************************** */
/* ********************************************** */
/* -----  RESPONSIVE Design  ----------------------- */
/* ********************************************** */
/* ********************************************** */


/* =========================================================== */
/* -----  Big screens >1200 px  ------------------------------ */
@media screen and (min-width: 1200px) {
}

/* =========================================================== */
/* -----  Landscape Tablets 1200 px  ------------------------------ */
@media screen and (max-width: 1200px) {
/* -----  menu footer  ------------------------------ */
#menu-footer-menu a { margin:0 1em;}
/* -----  text  ------------------------------ */
.text-plain.narrow { max-width:640px;}
/* -----  grid  ------------------------------ */
.content-grid { width:95%;}
/* -----  images  ------------------------------ */
.img-box.portrait { width:500px;}
.img-box.portrait.smaller { width:400px;}
.img-box.landscape { width:840px;}
.img-box.landscape.smaller { width:620px;}
.img-plain.landscape.smaller { width:440px;}
}


/* =========================================================== */
/* -----  Landscape Tablets 1024 px  ------------------------------ */
@media screen and (max-width:1024px) {
/* -----  vars  ------------------------------ */
:root {
--menu-height:56px;
--footer-height:100vh;
}
/* -----  logo  ------------------------------ */
#theLogo { width:172px; height:80px;}
/* -----  menu footer  ------------------------------ */
#menu-footer-menu a { margin:0 0.75em;}
/* -----  grid  ------------------------------ */
.content-grid {
--box-width-basic:85%;
--box-width-wide:95%;
--box-width-mid:75%;
--box-width-narrow:65%;
--box-width-mini:60%;
}
.content-grid { width:98%;}
/* -----  Positioning  ------------------------------ */
.left,
.right { float:none; margin:0 auto;}
.center { margin:0 auto;}
.offset-x-plus-1 { left:2vw;}
.offset-x-plus-2 { left:4vw;}
.offset-x-minus-1 { left:-2vw;}
.offset-x-minus-2 { left:-4vw;}
.offset-y-plus-1 { top:1vh;}
.offset-y-plus-2 { top:2vh;}
.offset-y-plus-3 { top:4vh;}
.offset-y-minus-1 { top:-2vh;}
.offset-y-minus-2 { top:-4vh;}
}
    
    
/* =========================================================== */
/* -----  Portait Tablets < 850 px  ------------------------------ */
@media screen and (max-width: 850px) {
html { font-size:92%;}
/* -----  Menu  ------------------------------ */
#theMenuSwitch { position:fixed; right:4vw; top:4vw; display:flex; flex-direction:column; justify-content:center; align-items:center; width:80px; height:80px; z-index:110; background-color:var(--color-gm-green); color:var(--color-gm-white); border-radius:50%; font-weight:bold; transition:all 0.25s;}
#theMenuSwitch::after { content:"Menu"; display:block; position:relative; top:14px; font-size:0.75rem;}
#theMenuSwitch i { display:none;}
#theMenuSwitch span { display:block; position:relative; width:24px; height:2px; margin-top:2px; background-color:var(--color-gm-white); border-radius:3px; transition:all 0.15s;}
#theMenuSwitch span::before { content:""; display:block; position:relative; width:24px; height:2px; top:-7px; background-color:var(--color-gm-white); border-radius:3px; transition:all 0.25s;}
#theMenuSwitch span::after { content:""; display:block; position:relative; width:24px; height:2px; top:5px; background-color:var(--color-gm-white); border-radius:3px; transition:all 0.25s;}
#theMenuSwitch:active { background-color:var(--color-gm-white-transparent); color:var(--color-gm-almost-black);}
#theMenuSwitch:active span { background-color:var(--color-gm-white-transparent);}
#theMenuSwitch:active span::before { background-color:var(--color-gm-white-transparent);}
#theMenuSwitch:active span::after { background-color:var(--color-gm-white-transparent);}
#theMenu { display:block; position:fixed; z-index:-1; left:0; top:auto; bottom:0; width:100%; height:100vh; background:none; transform:translate(0,0) !important; opacity:0; backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px);  transition:all 0.5s, z-index 0;}
#theHomeMenu { display:none;}
#menu-hlavni-menu { display:block; position:absolute; left:0; top:0; width:100%; height:auto; padding:9rem 0 3rem; font-size:1.375rem; text-align:center; background-color:rgba(255,255,255,0); border-radius:0px 0px 0 0; transform:translate(0,-50vh); opacity:0; transition:all 0.5s;}
#menu-hlavni-menu li { display:block;}
#menu-hlavni-menu a { display:block; padding:0.675em 0;}
.mobilemenu-on #theMenuSwitch { background-color:var(--color-gm-black);}
.mobilemenu-on #theMenuSwitch::after { content:"Pryč";}
.mobilemenu-on #theMenuSwitch span { background-color:var(--color-gm-black);}
.mobilemenu-on #theMenuSwitch span::before { top:0px; transform:rotate(45deg);}
.mobilemenu-on #theMenuSwitch span::after { top:-2px; transform:rotate(-45deg);}
.mobilemenu-on #theMenu { z-index:100; opacity:1; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); transition:all 0.25s, z-index 0;}
.mobilemenu-on #menu-hlavni-menu { opacity:1; background-color:rgba(255,255,255,0.98); border-radius:0 0 24px 24px; transform:translate(0,0); transition:all 0.35s ease;}
/* -----  MobileLinks  ------------------------------ */
#theMobileLinks { display:flex; position:fixed; z-index:105; left:3.5vw; bottom:1vw; transition:all 0.5s;}
#theMobileLinks a { display:flex; flex-direction:column; justify-content:center; align-items:center; font-size:0.8rem; width:68px; height:68px; margin:0 0.35rem; background-color:var(--color-ab-primary); color:var(--color-ab-secondary); border-radius:50%; font-weight:bold; text-align:center; -webkit-tap-highlight-color:transparent;}
#theMobileLinks a::before { content:"T"; display:block; font-size:2.25em; margin-top:-0.25rem; margin-bottom:-0.35rem;}
#theMobileLinks a.email::before { content:"E";}
#theMobileLinks a.map::before { content:"M";}
#theMobileLinks a:active { background-color:var(--color-ab-active-bg); color:var(--color-ab-active-text);}
.mobilemenu-on #theMobileLinks { bottom:2.75vw;}

/* -----  Slide  ------------------------------ */

}


/* =========================================================== */
/* -----  Portait Small Tablets and Big Phones 600 px  ------------------------------ */
@media screen and (max-width: 600px) {
html { font-size:90%;}
:root {
--lineheight-default:1.25;
--lineheight-text:1.4;
--lineheight-text-spacious:1.6;
--lineheight-text-condensed:1.167;
--lineheight-title:1.3125;
--fontsize-default:1.2rem;
--fontsize-mini:1.125rem;
--fontsize-mini-bigger:1.3125rem;
--fontsize-title:1.5rem;
--fontsize-title-mini:1.25rem;
--fontsize-title-big:2rem;
--fontsize-title-ultra:4.5rem;
}
/* -----  Menu  ------------------------------ */
#theMenuSwitch { width:72px; height:72px;}
/* -----  logo  ------------------------------ */
#theLogo { width:148px; height:62px;}
/* -----  Titles  ------------------------------ */
.mega-title { display:none;}
.iscover .mega-title { display:block;}
.iscover.home .mega-title { display:none;}
.footer-title { display:none;}
.cover .cover-title { padding:0 3em 18vh;}
.iscover .mega-title.page-title { font-size:16vw; bottom:60vh; font-weight:bold;}
.iscover .mega-title.page-title.minimize { font-size:12vw; bottom:62vh;}
/* -----  Slides  ------------------------------ */
.slide.minimizemore { min-height:50.125vh;}
.slide.minimizemore .slide-content { min-height:50.125vh;}
/* -----  Text basic  ------------------------------ */
.text-plain { margin:4rem auto; width:90%;}
.text-plain.narrow { padding:4rem 0;}
.linklist { width:90%;}
.linklist.wide { width:90%;}
/* -----  grid  ------------------------------ */
.content-grid {
--box-width-basic:95%;
--box-width-wide:95%;
--box-width-mid:95%;
--box-width-narrow:95%;
--box-width-mini:95%;
--box-padding-basic:3rem 2rem;
--box-padding-wide:3rem 2rem;
--box-padding-mid:3rem 2rem;
--box-padding-narrow:3rem 2rem;
--box-padding-mini:3rem 2rem;
--radius-image-inside:3px 3px 8px 8px;
--radius-box-with-image:3px 3px 0 0;
}
/* -----  Cover Products  ------------------------------ */
.cover .slide-content { overflow:hidden;}
/* -----  Cover Products  ------------------------------ */
.coverproductsset { height:70vh; width:82%; grid-template-rows:1fr 1fr 1fr 1fr; grid-template-columns:1fr 1fr; gap:12px; margin-top:-15vh;}
.coverproductsset img.product-size-1 { width:9vh;}
.coverproductsset img.product-size-2 { width:14vh;}
.coverproductsset img.product-size-3 { width:17vh;}
.coverproductsset img.product-size-4 { width:8.5vh;}
.coverproductsset img:nth-of-type(1) { --item-rotate:rotate(-12deg); --item-translate:translate(0vw,0px);}
.coverproductsset img:nth-of-type(2) { --item-rotate:rotate(10deg); --item-translate:translate(0vw,-1vw);}
.coverproductsset img:nth-of-type(3) { --item-rotate:rotate(4deg); --item-translate:translate(0vw,3vw);}
.coverproductsset img:nth-of-type(4) { --item-rotate:rotate(18deg); --item-translate:translate(0vw,2vw);}
.coverproductsset img:nth-of-type(5) { grid-column:auto; grid-row:auto; --item-rotate:rotate(-5deg); --item-translate:translate(0vw,5vw);}
.coverproductsset img:nth-of-type(6) { grid-column:auto; grid-row:auto; --item-rotate:rotate(4deg); --item-translate:translate(0vw,-2vw);}
.coverproductsset img:nth-of-type(7) { grid-column:auto; grid-row:auto; --item-rotate:rotate(-6deg); --item-translate:translate(0vw,-9vw);}
.coverproductsset img:nth-of-type(8) { grid-column:auto; grid-row:auto; --item-rotate:rotate(8deg); --item-translate:translate(0vw,-8vw);}
/* -----  Buttons  ------------------------------ */
:root {
	--margin-button:6px 10px;
}
.box-buttons { --margin-button:4px 4px 6px;}
.box-buttons { margin-bottom:-6px;}
/* -----  Text boxes  ------------------------------ */
.text-box.withimage { padding:var(--box-padding-basic); padding-top:calc(3rem + 30vw);}
.text-box.withimage img { width:100%; height:32vw;}
/* -----  Product box  ------------------------------ */
.products-box { padding:2.5rem 2rem 3rem;}
.products-grid img { height:36vw; margin:1.25rem 1.75rem;}
.products-grid.bigger-items img { height:54vw; margin:1.25rem .75rem;}
.products-grid.biggest-items img { height:60vw; margin:1.25rem .75rem;}
/* -----  img box  ------------------------------ */
.img-box.portrait { width:70%px;}
.img-box.portrait.smaller { width:70%;}
.img-box.landscape { width:90%; aspect-ratio:1 / 0.7;}
.img-box.landscape.smaller { width:90%;}
.img-plain { max-width:32vw;}
.img-plain.landscape { width:90%;}
.img-plain.landscape.smaller { width:90%;}
/* -----  Flower  ------------------------------ */
.flowerpower {
	--flower-leaf-width:70vw;
	--flower-leaf-height:70vw;
}
.presentation-plain { width:100%;}
.flowerpower { padding:0 0 2rem 0;}
.leaf { position:relative;}
.leaf:nth-of-type(2) { --flower-leaf-offset-x:0vw; --flower-leaf-offset-y:0vw;}
.leaf:nth-of-type(3) { --flower-leaf-offset-x:0vw; --flower-leaf-offset-y:0vw;}
.leaf:nth-of-type(4) { --flower-leaf-offset-x:0vw; --flower-leaf-offset-y:0vw;}
.slide.active .leaf:nth-of-type(4) { --flower-leaf-rotate-offset:-20deg;}
.leaf:nth-of-type(5) { --flower-leaf-offset-x:0vw; --flower-leaf-offset-y:0vw;}
.slide.active .leaf:nth-of-type(5) { --flower-leaf-rotate-offset:75deg;}
/* -----  positioning  ------------------------------ */
.offset-x-plus-1 { left:0;}
.offset-x-plus-2 { left:0;}
.offset-x-minus-1 { left:0;}
.offset-x-minus-2 { left:0;}
/* -----  GDPR Box  ------------------------------ */
#gdprBox { width:44vw; left:2vw; padding:18px 0 24px; text-align:center;}
.isloaded #gdprBox { padding:18px 0 24px;}
.scrolled #gdprBox { padding:18px 0 24px;}
#gdprBox img { float:none; width:64px; margin:2px auto 4px;}
#gdprBox .button.tiny { margin:5px 0 0 0; float:none;}
#gdprBox span { float:none; width:auto; text-align:center; margin:12px 3% 8px;}
/* -----  GDPR V2 Box  ------------------------------ */
#gdprBoxV2 { right:50%; margin-right:-140px;} 
#gdprSettings { width:100vw;}

}


/* =========================================================== */
/* -----  Portait Phones in general 450 px  ------------------------------ */
@media screen and (max-width: 450px) {
}