/*
@font-face { font-weight:100; font-style:normal; font-family: 'exo2'; src: url('./font/exo2-extralight-webfont.woff2') format('woff2'), url('./font/exo2-extralight-webfont.woff') format('woff');}
@font-face { font-weight:200; font-style:normal; font-family: 'exo2'; src: url('./font/exo2-light-webfont.woff2') format('woff2'), url('./font/exo2-light-webfont.woff') format('woff');}
@font-face { font-weight:300; font-style:normal; font-family: 'exo2'; src: url('./font/exo2-thin-webfont.woff2') format('woff2'), url('./font/exo2-thin-webfont.woff') format('woff');}
@font-face { font-weight:400; font-style:normal; font-family: 'exo2'; src: url('./font/exo2-regular-webfont.woff2') format('woff2'), url('./font/exo2-regular-webfont.woff') format('woff');}
@font-face { font-weight:500; font-style:normal; font-family: 'exo2'; src: url('./font/exo2-medium-webfont.woff2') format('woff2'), url('./font/exo2-medium-webfont.woff') format('woff');}
*/

:root {
	--white:#fff;
	--white_0:rgba(255,255,255,0.0);
	--white_5:rgba(255,255,255,0.5);
	--white_8:rgba(255,255,255,0.8);
	--white_9:rgba(255,255,255,0.9);
	--light:#f5f3f3;
	--light_7:rgba(245,243,243,0.7);
	--light_8:rgba(245,243,243,0.8);
	--light_9:rgba(245,243,243,0.9);
	--light_shadow:	#ddd;
	--dark_shadow:	#999;
	--gray:	#192c30;
	--dark:	#0C1618;
	--black:#000;
	
	--color:#EC0B43;
	--color2:#F71950;
	
	
	--red: 		#EC0B43
	--platinum: #DEE5E5
	--light_cfix:#f7f8fa;
	--green: 	#4CB944
	--black2: 	#0C1618
	--blue: 	#3066BE
	
}

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color:var(--dark);
  background-color:var(--light);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



* 			{ margin:0px; padding:0px; border:0px; outline-style: none; vertical-align:top; }
*:focus 	{ outline:none; }

html		{ scroll-behavior: smooth; font-family:Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; font-size:1.5vw; line-height:1.2em; font-weight:400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background:var(--light); color:var(--dark); }
html		{ min-height:100vh; overflow:hidden; overflow-x:hidden; overflow-y:auto; width:100vw; }
html.jump	{ scroll-behavior:auto; }

tac { text-align:center; }
tar { text-align:right; }


h1 { padding:0; line-height:1.5em; height:1.5em; font-weight:300; }
h2 { margin:0 0 1em 0; font-size:2.5rem; font-weight:300; }
h3 { margin:0 0 0.5em 0; font-size:1.75rem; font-weight:300; }
p { margin:0 0 1em 0; }
br { clear:both; }
a { color:inherit; text-decoration:underline; }
a:hover { text-decoration-style:wavy; }
p strong { color:var(--color); }

*::selection {
  color:#fff;
  background-color:var(--color);
}


body { padding-top:calc(100vh - 3rem); }
#intro_wrapper { position:fixed; top:0; }
#intro { height:100vh; background:var(--light); }
#intro_canvas { position:absolute; left:0; top:0; background:var(--black); cursor:pointer; }


@keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; }}


header { position:sticky; top:0; left:0; right:0; height:3rem; background:var(--black); color:var(--light); z-index:10; }
header > nav { line-height:1rem; padding:0 1.5rem; }
header > nav > a { display:inline-block; position:relative; height:1rem; padding:1rem 0.5rem; line-height:1rem; text-decoration:none; color:inherit; transition:color 0.3s; }
header > nav > a:first-child { font-size:2rem; }
header > nav > a[href^="tel"],
header > nav > a[href^="mailto"] { float:right; }
header > nav > a[href^="tel"] > em { opacity:0.5; font-style:normal; }
header > nav > a[href="#intro"] { padding:0; height:3rem; }
header > nav > a[href="#intro"] > svg { display:block; width:3rem; height:3rem; transition:filter 0.3s; }
header > nav > a[href="#intro"] > svg polyline { stroke:var(--white); stroke-width:6; fill:none; }
header > nav > a[href]:empty { padding:1rem 0rem; }
header > nav > a[href]:empty:before { content:''; display:inline-block; width:0.5rem; height:0.5em; background:var(--white); transition:color 0.3s; }
header > nav > a[href].selected:empty:before { background:var(--color); } 
header > nav > a:after { content:''; transition:height 0.5s; }
header > nav > a:after,
header > nav > a>span { display:block; height:0.75rem; position:absolute; left:0; right:0; bottom:0; background:var(--color); mix-blend-mode:multiply;}
header > nav > a.selected:after,
header > nav > a:hover:after { height:2rem }
header > nav > a[href="#intro"]>span,
header > nav > a[href="#intro"]:after { height:0; }
header > nav > a[href="#intro"]:hover:after { height:3rem; }


section > a[name] { display:block; height:5rem; }
section > a[name].inner { margin-bottom:-5rem; }

section.light { background-color:var(--light); }
.wrapper { padding:0 2rem 2rem; }

.clip_triangles 	{ clip-path:polygon(0 0, 1rem 1rem,  2rem 0rem,  3rem 1rem,  4rem 0rem,  5rem 1rem,  6rem 0rem,  7rem 1rem,  8rem 0rem,  9rem 1rem,  10rem 0rem,  11rem 1rem,  12rem 0rem,  13rem 1rem,  14rem 0rem,  15rem 1rem,  16rem 0rem,  17rem 1rem,  18rem 0rem,  19rem 1rem,  20rem 0rem,  21rem 1rem,  22rem 0rem,  23rem 1rem,  24rem 0rem,  25rem 1rem,  26rem 0rem,  27rem 1rem,  28rem 0rem,  29rem 1rem,  30rem 0rem,  31rem 1rem,  32rem 0rem,  33rem 1rem,  34rem 0rem,  35rem 1rem,  36rem 0rem,  37rem 1rem,  38rem 0rem,  39rem 1rem,  40rem 0rem,  41rem 1rem,  42rem 0rem,  43rem 1rem,  44rem 0rem,  45rem 1rem,  46rem 0rem,  47rem 1rem,  48rem 0rem,  49rem 1rem,  50rem 0rem,  51rem 1rem,  52rem 0rem,  53rem 1rem,  54rem 0rem,  55rem 1rem,  56rem 0rem,  57rem 1rem,  58rem 0rem,  59rem 1rem,  60rem 0rem,  61rem 1rem,  62rem 0rem,  63rem 1rem,  64rem 0rem,  65rem 1rem,  66rem 0rem,  67rem 1rem,  68rem 0rem,  69rem 1rem,  70rem 0rem,  71rem 1rem,  72rem 0rem,  73rem 1rem,  74rem 0rem,  75rem 1rem,  76rem 0rem,  77rem 1rem,  78rem 0rem,  79rem 1rem,  80rem 0rem, 80rem 100%, 0 100%, 0 0); }
.clip_lefty			{ clip-path:polygon(0 0, 100% 2rem, 100% calc(100% - 2rem), 0 100%); }
.clip_righty		{ clip-path:polygon(0 2rem, 100% 0, 100% 100%, 0 calc(100% - 2rem)); }
.clip_righty_bottom	{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 2rem)); }
.clip_righty_top	{ clip-path:polygon(0 2rem, 100% 0, 100% 100%, 0 100%); }
.clip_lefty_top		{ clip-path:polygon(0 0, 100% 2rem, 100% 100%, 0 100%); }
.clip_zigzag	 	{ clip-path:polygon(0 2rem, 2rem 0, 4rem 2rem, 6rem 0, 8rem 2rem, 10rem 0, 12rem 2rem, 14rem 0, 16rem 2rem, 18rem 0, 20rem 2rem, 22rem 0, 24rem 2rem, 26rem 0, 28rem 2rem, 30rem 0, 32rem 2rem, 34rem 0, 36rem 2rem, 38rem 0, 40rem 2rem, 42rem 0, 44rem 2rem, 46rem 0, 48rem 2rem, 50rem 0, 52rem 2rem, 54rem 0, 56rem 2rem, 58rem 0, 60rem 2rem, 62rem 0, 64rem 2rem, 66rem 0, 68rem 2rem, 70rem 0, 72rem 2rem, 74rem 0, 76rem 2rem, 78rem 0, 78rem 100%, 76rem calc(100% - 2rem), 74rem 100%, 72rem calc(100% - 2rem), 70rem 100%, 68rem calc(100% - 2rem), 66rem 100%, 64rem calc(100% - 2rem), 62rem 100%, 60rem calc(100% - 2rem), 58rem 100%, 56rem calc(100% - 2rem), 54rem 100%, 52rem calc(100% - 2rem), 50rem 100%, 48rem calc(100% - 2rem), 46rem 100%, 44rem calc(100% - 2rem), 42rem 100%, 40rem calc(100% - 2rem), 38rem 100%, 36rem calc(100% - 2rem), 34rem 100%, 32rem calc(100% - 2rem), 30rem 100%, 28rem calc(100% - 2rem), 26rem 100%, 24rem calc(100% - 2rem), 22rem 100%, 20rem calc(100% - 2rem), 18rem 100%, 16rem calc(100% - 2rem), 14rem 100%, 12rem calc(100% - 2rem), 10rem 100%, 8rem calc(100% - 2rem), 6rem 100%, 4rem calc(100% - 2rem), 2rem 100%, 0 calc(100% - 2rem), 0 2rem); }



#portfolio_wrapper { padding:0; position:relative; background:var(--white); z-index:2; scroll-snap-type: y proximity;}
#portfolio_wrapper > h2 { margin-left:2rem; position:relative; z-index:5; }
#portfolio_wrapper > h2 + a { height:0; }
#portfolio_wrapper article { padding:5rem 2rem 2rem; }
#portfolio_wrapper article > div.images { display:inline-block; width:56.25vw; }
#portfolio_wrapper article > div.images > img {  display:block; width:100%; height:66.66%; margin:0 0 3vw 0; /*box-shadow:0 0.2rem 0.5rem var(--light_shadow);*/ }
#portfolio_wrapper article > div.metadata { display:inline-block; direction:ltr; width:34.75vw; margin:0 3vw 0 0; position:sticky; top:5rem; }
#portfolio_wrapper article > div.metadata ul { display:block; padding:0 }
#portfolio_wrapper article > div.metadata ul > li { display:block; padding:0 0 0 1em; position:relative; }
#portfolio_wrapper article > div.metadata ul > li:before { display:block; position:absolute; top:0; left:0; content:"\3e"; font-family:'icomoon'; }
#portfolio_wrapper article.clip_zigzag { background-color:var(--light); direction:rtl; padding-bottom:5rem; }
#portfolio_wrapper article.clip_zigzag > div.metadata { margin-right:0; margin-left:3vw;  }
#portfolio_wrapper article.clip_zigzag:last-child { transform:translateY(2rem); margin-top:-2rem; }


#timeline_wrapper { padding-left:0; padding-right:0; margin-top:-3rem; position:relative; background:var(--white_5); z-index:1; }
#timeline_wrapper > h2 { margin-bottom:0; text-align:center; }
#timeline_wrapper > ul { display:block; position:relative; overflow:hidden; overflow-x:scroll; white-space:nowrap; padding:18rem 2rem calc(5rem + 1px) 2rem; -ms-overflow-style: none; scrollbar-width: none; }
#timeline_wrapper > ul::-webkit-scrollbar { display: none; }
#timeline_wrapper > ul > li { display:inline-block; vertical-align:bottom; width:max-content; min-width:6rem; height:2rem; position:relative; }
#timeline_wrapper > ul > li:before { display:block; content:''; position:absolute; left:0; bottom:1rem; margin-bottom:-1px; right:0; border-bottom:2px solid var(--black); }
#timeline_wrapper > ul > li > ul {  }
#timeline_wrapper > ul > li > ul:before { content:attr(data-rok); font-size:2rem; position:absolute; top:100%; left:0; font-weight:100; }
#timeline_wrapper > ul > li > ul > li { display:inline-block; width:0; padding-left:2rem; white-space:nowrap; height:2rem; line-height:1.6rem; position:relative; transform:rotate(-60deg); transform-origin:1rem 50%; }
#timeline_wrapper > ul > li > ul > li > a { color:var(--gray); text-decoration:none; cursor:default; }
#timeline_wrapper > ul > li > ul > li > a:before { display:block; content:''; position:absolute; left:50%; top:50%; width:1em; height:1em; margin:-0.5em; box-sizing:border-box; border:2px dashed var(--black); background:var(--light); transition:1s border-width; transform:rotate(15deg); }
#timeline_wrapper > ul > li > ul > li > a[href] { color:var(--black); border-width:2px; cursor:pointer; }
#timeline_wrapper > ul > li > ul > li > a[href]:before { border-color:var(--black); border-style:solid; border-width:1px; }
#timeline_wrapper > ul > li > ul > li > a[href]:hover:before { border-width:0.5em; transition:0.5s border-width;}
#timeline_wrapper:before,
#timeline_wrapper:after { display:block; content:' '; position:absolute; top:0; bottom:0; width:3rem; left:0; z-index:2; background:linear-gradient(to left,var(--white_0),var(--white)); pointer-events:none; }
#timeline_wrapper:after { left:auto; right:0; background:linear-gradient(to right,var(--white_0),var(--white)); }
#timeline_wrapper > #timeline_future,
#timeline_wrapper > #timeline_past { position:absolute; left:0; bottom:3.1rem;  width:3.5rem; height:24rem; background:linear-gradient(to left,rgba(245,243,243,0),rgba(245,243,243,1) 40%); z-index:3; }
#timeline_wrapper > #timeline_past { left:auto; right:0; background:linear-gradient(to right,rgba(245,243,243,0),rgba(245,243,243,1) 40%); }
#timeline_wrapper > #timeline_past:before,
#timeline_wrapper > #timeline_past:after,
#timeline_wrapper > #timeline_future:before,
#timeline_wrapper > #timeline_future:after	{ display:block; content:''; position:absolute; bottom:0; margin-bottom:4.25rem; border:0.75rem solid transparent; border-width:0.75rem 1.5rem; border-right-color:var(--black); border-left-color:var(--black); }
#timeline_wrapper > #timeline_past:before	{ left:0; right:auto;border-right-width:0; }
#timeline_wrapper > #timeline_future:before	{ right:0; left:auto;  border-left-width:0; }
#timeline_wrapper > #timeline_past:after,
#timeline_wrapper > #timeline_future:after { font-size:calc(0.75rem - 3px); bottom:calc(0.75rem - 1em); border-width:1em 2em; border-right-color:var(--light); border-left-color:var(--light); transition:1s font-size; }
#timeline_wrapper > #timeline_past:after { left:calc(0.5rem - 0.75em); border-right-width:0 !important;}
#timeline_wrapper > #timeline_future:after { right:calc(0.5rem - 0.75em); border-left-width:0 !important; }
#timeline_wrapper > #timeline_past:hover:after,
#timeline_wrapper > #timeline_future:hover:after { font-size:0; transition:0.5s font-size; }
#timeline_wrapper > ul > li > ul > li span { display:block; position:absolute; left:1rem; top:1rem; padding-top:3.5rem; font-size:0.7rem; transform:rotate(60deg); transform-origin:0 0; text-indent:0.25rem; line-height:2em;  max-width:2px; overflow:hidden; transition:max-width 0.5s;  }
#timeline_wrapper > ul > li > ul > li span:after { display:block; content:''; position:absolute; left:0; top:0.5rem; height:0; border-left:2px solid var(--black); transition:0.3s height 0.5s; }
#timeline_wrapper > ul > li > ul > li span:before { display:block; content:''; position:absolute; left:2px; bottom:0; height:0; right:0; border-bottom:2px solid var(--black); z-index:0; }
#timeline_wrapper > ul > li > ul > li:hover span { max-width:100vw; transition:2s max-width 0.4s; }
#timeline_wrapper > ul > li > ul > li:hover span:after { height:5.46rem; transition:height 0.7s; }
#timeline_wrapper > ul > li > ul > li[data-rank="1"] { font-size:0.7rem;  }
#timeline_wrapper > ul > li > ul > li[data-rank="2"] { font-size:1.0rem;  }
#timeline_wrapper > ul > li > ul > li[data-rank="3"] { font-size:1.25rem; }
#timeline_wrapper > ul > li > ul > li[data-rank="4"] { font-size:1.5rem; text-indent:0.5rem; }
#timeline_wrapper > ul > li > ul > li[data-rank="1"] > span { top:0.90rem; left:1.05rem;  }
#timeline_wrapper > ul > li > ul > li[data-rank="2"] > span { top:1.00rem; left:0.9rem;  }
#timeline_wrapper > ul > li > ul > li[data-rank="3"] > span { top:1.14rem; left:0.7rem;  }
#timeline_wrapper > ul > li > ul > li[data-rank="4"] > span { top:1.21rem; left:0.6rem;  }
#timeline_wrapper > ul > li:first-child { padding-left:3rem; }
#timeline_wrapper > ul > li:first-child > ul:before { text-indent:3rem; }
#timeline_wrapper > ul > li:last-child { padding-right:5rem; }
#timeline_wrapper > ul { padding-left:0; padding-right:0; }
#timeline_wrapper > #timeline_future,
#timeline_wrapper > #timeline_past { background:none; display:none; }


#zkusenosti_wrapper { background:var(--white); margin-bottom:-7rem; width:40rem; padding:0 13.333rem 5rem;}
#zkusenosti_wrapper p { margin-bottom:3rem;  }
#zkusenosti_wrapper ul { display:block; padding:0; width:100%; margin:0; }
#zkusenosti_wrapper ul > li { display:block; padding:0 0 0 4rem; position:relative; margin-bottom:2rem; width:100%; margin-left:-4rem; }
#zkusenosti_wrapper ul > li > strong { display:block; font-size:1.25rem; line-height:1.5rem; margin-bottom:0.25rem; font-weight:300; }
#zkusenosti_wrapper ul > li:before { display:block; position:absolute; top:0; left:0; font-size:2.25rem; width:3rem; height:3rem; line-height:3rem; text-align:center;  }
#zkusenosti_wrapper ul > li.icon-clock-running:before { content:' '; display:block; background:url('../img/clock-running.svg') 0.375rem 50% no-repeat; background-size:2.25rem 2.25rem; }


#technologie_wrapper { background:var(--white); color:var(--black); position:relative; }
#technologie_wrapper > div { padding-bottom:10rem; margin-bottom:8rem; }
#technologie_wrapper > div > div { margin-bottom:4rem; }
#technologie_wrapper > div > div h2 { margin-bottom:1rem; }
#technologie_wrapper > div > div.sticky { position:sticky; width:calc(100vw - 4rem); height:11rem; padding:2rem; margin-left:-2rem; top:calc(100vh - 19rem - 5rem); margin-bottom:-16rem; background:var(--light_7); z-index:2; backdrop-filter: blur(0.5vw) grayscale(1); }
#technologie_wrapper > div > div > a { display:inline-block; text-decoration:none; }
#technologie_wrapper > div > div > a + a { margin-left:2rem; }
#technologie_wrapper > div > div > a > img { display:block; width:5rem; height:4rem; object-fit:contain; object-position:50% 100%; margin:0 auto; }
#technologie_wrapper > div > div > a > span { display:block; text-align:center; opacity:0.5; }
#technologie_wrapper > div > div > a.narrow { width:3rem; }
#technologie_wrapper > div > div > a.wide > img { width:7rem; }
#technologie_wrapper > div > div > a.round > img { width:4rem; border-radius:0.5rem; }
#technologie_wrapper > div > div > a.big > img { width:7rem; height:7rem;  }
#technologie_wrapper > div > div > a.big.wide > img { width:10rem; }
#technologie_wrapper > div > div.sticky.clip_righty h3 { padding-top:1rem; }
#technologie_wrapper > div > div.sticky.clip_righty,
#technologie_wrapper > div > div.sticky.clip_righty_top { text-align:right; }
#technologie_wrapper > div { margin-bottom:4.1rem; }
#technologie_wrapper > div > div { margin-bottom:0; padding-top:6rem; }


#o-mne_wrapper { min-height:calc(100vh - 3rem); background:var(--white_5); margin-top:-2rem; position:relative; }
#o-mne_wrapper figure { display:block; float:right; width:47vw; height:53vw; shape-outside:polygon(100.46% -10px, 101.55% 94.85%, 29.34% 94.77%, 4px 27.47%); }
#o-mne_wrapper figure > img { display:block; width:34.75vw; height:34.75vw; margin:9vw; transform:rotate(-20deg); }
#o-mne_wrapper p { text-align:justify; }
#o-mne_wrapper p br { clear:none; }
#o-mne_wrapper p > img,
#o-mne_wrapper p > svg { display:block; width:18rem; margin:-1rem 0 0 21rem; stroke:var(--black); }
#o-mne_wrapper p > svg.animate > g > path { animation: dash_path 25.00s linear forwards 1; stroke:var(--black); }


@keyframes dash_path { to { stroke-dashoffset: 0; }}