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

/* ============================================== */
/* -----  00. VARIABLES  ------------------------------ */
/* ---------------------------------------------- */
:root {
	--font-primary:'BebasNeue', Arial, Helvetica, sans-serif;

	--color-bcg-primary:#f3f3f3;
	--color-bcg-2:#e4e4e4;
	--color-bcg-3:#fff;

	--color-light-highlight:#fff;
	--color-dark-highlight:#000;

	--color-text-primary:#231f20;
	--color-text-inverse:#dbdcc5;
	--color-text-inverse-bcg:#231f20;

	--font-size-xxs:0.75rem;
	--font-size-s:1.125rem;
	--font-size-sm:1.375rem;
	--font-size-m:1.5rem;
	--font-size-l:1.875rem;
	--font-size-xxl:4.5rem;
	--letter-spacing-main:0.05em;
	--line-height-basic:1.333;
	--line-height-condensed:1.15;

	--easing-1-bouncy:cubic-bezier(.62,2.08,.29,.74);
	--easing-2-easeout-ultrasmooth:cubic-bezier(.03,.98,.52,.99);
	--easing-3-easeout-smooth:cubic-bezier(0.1,0.75,0.58,0.99);
	--easing-4-easeinout-smooth: cubic-bezier(0.65, 0, 0.35, 1);
}


/* ============================================== */
/* -----  00. COMMON SETTINGS  ------------------------------ */
/* ---------------------------------------------- */
* { margin:0; padding:0; box-sizing:border-box;}
html { font-size:100%; scroll-behavior:smooth; scroll-padding-top:80px;}
body { font-size:1rem; line-height:var(--line-height-basic); letter-spacing:var(--letter-spacing-main); font-family:var(--font-primary); background-color:var(--color-bcg-primary); color:var(--color-text-primary); padding-bottom:var(--spacing-main);}
b { font-weight:bold;}
li { list-style-type:none;}
img { display:block;}
i, em { font-style:normal;}

/* -----  Links and Buttons etc.  ------------------------------ */
*:focus-visible { outline:2px solid var(--color-text-primary); outline-offset:2px;}
::selection { background:var(--color-dark-highlight); color:var(--color-light-highlight);}
input[type=button], input[type=submit] { -webkit-appearance:none; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; cursor:pointer;}
button { font-family:var(--font-primary); text-decoration:none; color:var(--color-text-inverse-bcg); font-weight:normal; cursor:pointer; -webkit-tap-highlight-color:transparent; border:0; background:none;}
a { text-decoration:none; color:var(--color-text-primary); cursor:pointer; -webkit-tap-highlight-color:transparent;}


/* ============================================== */
/* -----  01. MENU & LOGO ------------------------------ */
/* ---------------------------------------------- */ 
:root {
	--logo-offset:16px;
	--logo-size:164px;
	--menuitem-size:80px;
	--menuitem-size-big:1.2;
	--menu-offset:16px;
	--menu-gap:0 32px;
	--menu-big-item-gap:24px;
}

/* -----  Logo  ------------------------------ */
#theLogo { position:fixed; left:50%; bottom:var(--logo-offset); transform:translateX(-50%) translateY(100px) scale(1.1); opacity:0; z-index:800; pointer-events:none; transition:transform 0.5s var(--easing-3-easeout-smooth), opacity 0.25s var(--easing-3-easeout-smooth);}
.is-scrolled #theLogo { transform:translateX(-50%) translateY(0) scale(1); opacity:1; pointer-events:all;}
.is-on-footer #theLogo { transform:translateX(-50%) translateY(calc(-50vh + (.5 * var(--logo-size)))) scale(1.75); transition:transform 1s var(--easing-4-easeinout-smooth), opacity .75s var(--easing-3-easeout-smooth);}
#theLogo img { position:relative; width:var(--logo-size); aspect-ratio:1 / 1; transform:scale(1); transition:transform 0.35s var(--easing-1-bouncy); filter:drop-shadow(0px 0px 8px var(--color-text-inverse));}
.is-on-footer #theLogo img { filter:drop-shadow(0px 0px 24px var(--color-text-inverse)) drop-shadow(0px 0px 8px var(--color-light-highlight));}
#theLogo a:hover img { transform:scale(1.1); transition:transform 0.35s var(--easing-1-bouncy);}

/* -----  Menu  ------------------------------ */
#theMenu { position:fixed; left:50%; top:var(--menu-offset); transform:translateX(-50%) scale(1); display:flex; flex-direction:row; justify-content:center; align-items:center; z-index:1000; filter:drop-shadow(0px 0px 8px var(--color-text-inverse));}
.main-menu { display:flex; flex-direction:row; justify-content:center; align-items:center; height:var(--menuitem-size); gap:var(--menu-gap);}
.main-menu li { position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; height:var(--menuitem-size); aspect-ratio: 1 / 1;}
.main-menu li::before { content:""; display:block; position:absolute; top:3%; left:66%; height:calc(0.94 * var(--menuitem-size)); aspect-ratio:2 / 1.76; background:url(../images/chain-link.svg) no-repeat center / contain; opacity:0.9;}
.main-menu li:nth-of-type(even)::before { opacity:0.75;}
.main-menu li:last-of-type::before { display:none;}
.main-menu li a { position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; height:var(--menuitem-size); aspect-ratio: 1 / 1; border-radius:50%; background-color:var(--color-text-inverse-bcg); overflow:hidden;
	transform:scale(1); font-size:var(--font-size-s); font-weight:bold; color:var(--color-text-inverse); white-space:nowrap; transition:transform 0.35s var(--easing-1-bouncy), color 0.5s var(--easing-3-easeout-smooth);}
.main-menu li.is-active a b,
.webhome.active-section-2 .main-menu li:first-child a b { border-bottom:1px solid var(--color-text-inverse);}
.main-menu li a:hover { transform:scale(1.1); color:var(--color-light-highlight); background-color:var(--color-dark-highlight); /*outline:2px solid var(--color-dark-highlight); outline-offset:2px;*/}
#theMenu .bigbig { position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; height:calc(var(--menuitem-size-big) * var(--menuitem-size)); aspect-ratio: 1 / 1; border-radius:50%; background-color:var(--color-text-inverse-bcg); overflow:hidden;
	margin-left:var(--menu-big-item-gap); transform:scale(1); font-size:var(--font-size-s); text-align:center; line-height:var(--line-height-condensed); font-weight:bold; color:var(--color-text-inverse); transition:transform 0.35s var(--easing-1-bouncy), color 0.5s var(--easing-3-easeout-smooth);}
#theMenu .bigbig:hover { transform:scale(1.1); color:var(--color-light-highlight); background-color:var(--color-dark-highlight); outline:2px solid var(--color-dark-highlight); outline-offset:2px;}


/* ============================================== */
/* -----  02. LAYOUT  ------------------------------ */
/* ---------------------------------------------- */
:root {
	--spacing-main:40px;
	--border-radius-main:24px;
	--map-pinpoint-size:40px;
}

/* -----  Sections  ------------------------------ */
section { position:relative; display:flex; flex-direction:row; flex-wrap:nowrap; padding:var(--spacing-main); padding-bottom:0; gap:var(--spacing-main); overflow-x:hidden;}
footer { position:relative; display:flex; flex-direction:row; flex-wrap:nowrap; padding:var(--spacing-main); padding-bottom:0; gap:var(--spacing-main); overflow-x:hidden;}

/* -----  Parts  ------------------------------ */
.part { position:relative; width:50%;}
.part.wide { width:100%;}
.part.narrow { width:50%;}
.part.center { margin-left:auto; margin-right:auto;}
.part img { position:relative; width:100%; height:calc(100vh - (2 * var(--spacing-main))); object-position:50% 50%; object-fit:cover; border-radius:var(--border-radius-main);}
.threequarters .part.wide img { height:calc(75vh - (2 * var(--spacing-main)));}
.part.fixed img { position:fixed; top:var(--spacing-main); width:calc((100% - (3 * var(--spacing-main))) / 2); opacity:0; transform:scale(1.15); transition:all 0.25s var(--easing-3-easeout-smooth);}
.is-active .part.fixed img { opacity:1; transform:scale(1);}
.part.fixed.left img { left:var(--spacing-main);}
.part.fixed.right img { right:var(--spacing-main);}

/* -----  Map  ------------------------------ */
.pinpoint { position:absolute; z-index:100; left:calc(50% - (var(--map-pinpoint-size) / 2)); top:calc(50% - (var(--map-pinpoint-size) / 2)); display:flex; flex-direction:column; justify-content:center; align-items:center; height:var(--map-pinpoint-size); aspect-ratio: 1 / 1; border-radius:50%; background-color:var(--color-text-inverse-bcg);
	transform:scale(1); font-size:var(--font-size-xxs); text-align:center; line-height:var(--line-height-condensed); font-weight:bold; color:var(--color-text-inverse); transition:transform 0.5s var(--easing-1-bouncy), color 0.4s var(--easing-3-easeout-smooth);}
.pinpoint::before,
.pinpoint::after { content:""; position:absolute; inset:0; border-radius:50%; background:var(--color-dark-highlight); animation:ripple 2.8s ease-out infinite; z-index:-1;}
.pinpoint::after { animation-delay:.85s; }
.pinpoint:hover { transform:scale(1.5); color:var(--color-light-highlight); background-color:var(--color-dark-highlight);}

/* ============================================== */
/* -----  03. TEXT STYLES  ------------------------------ */
/* ---------------------------------------------- */
:root {
	--text-max-width:560px;
}

/* -----  textbox  ------------------------------ */
.textbox { position:relative; display:flex; flex-direction:column; justify-content:center; min-height:calc(100vh - (2 * var(--spacing-main))); padding-left:var(--spacing-main); padding-right:var(--spacing-main); padding-top:calc(var(--spacing-main) * 2); padding-bottom:calc(var(--spacing-main) * 4);}
.texts.big .textbox { padding-top:0; padding-bottom:var(--spacing-main);}
.narrow.center .textbox { min-height:0; padding-top:var(--spacing-main); padding-bottom:var(--spacing-main);}

/* -----  common  ------------------------------ */
h1 { font-size:var(--font-size-xxl); font-weight:normal; line-height:var(--line-height-condensed); margin:.25em 0 0;}
h2 { font-size:var(--font-size-l); line-height:var(--line-height-condensed); width:85%; max-width:var(--text-max-width); margin:1.75em 0 0.15em;}
p { font-size:var(--font-size-sm); width:85%; max-width:var(--text-max-width); margin:0.25em 0 0.5em;}
.texts strong { color:var(--color-dark-highlight);}
.texts a { color:var(--color-text-primary); border-bottom:1px solid var(--color-text-primary);}
.texts a:hover { color:var(--color-dark-highlight); border-bottom:1px dashed var(--color-dark-highlight);}
.texts.big p { font-size:var(--font-size-l); width:90%; max-width:var(--text-max-width);}



/* ============================================== */
/* -----  11. SPECIAL EFFECTS  ------------------------------ */
/* ---------------------------------------------- */

/* -----  Parallax  ------------------------------ */
.parallaxed { overflow:hidden; border-radius:var(--border-radius-main);}
.parallaxed img { --px:0; --py:0; scale:1.15; translate:var(--px) var(--py); will-change:translate;}


/* ============================================== */
/* -----  21. ANIMATIONS  ------------------------------ */
/* ---------------------------------------------- */

/* -----  Animations  ------------------------------ */
@keyframes ripple {
  0%   { transform: scale(1);   opacity: 0.35; }
  100% { transform: scale(2.8); opacity: 0; }
}


/* ============================================== */
/* -----  31. Special Add Ons   ------------------------------ */
/* ---------------------------------------------- */

/* -----  Specialni funkce  ------------------------------ */
.nosee { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* -----  Skip Link  ------------------------------ */
.skip-link { position:absolute; top:-100%; left:0; padding:0.5em 1em; background:var(--color-text-inverse-bcg); color:var(--color-text-inverse); z-index:9999; font-size:var(--font-size-s);}
.skip-link:focus { top:0;}