:root {
	--back:		#ffffff;
	--front:	#000000;
  --white:		#ffffff;
  --black:		#000000;
}

@font-face { font-family:'montserrat'; font-weight:200; font-style:normal; src: url('./fonts/montserrat-extralight-webfont.woff2') format('woff2'), url('./fonts/montserrat-extralight-webfont.woff') format('woff'), url('./fonts/montserrat-extralight-webfont.ttf') format('truetype'), url('./fonts/montserrat-extralight-webfont.svg#montserratextralight') format('svg'); }
@font-face { font-family:'montserrat'; font-weight:300; font-style:normal; src: url('./fonts/montserrat-light-webfont.woff2') format('woff2'), url('./fonts/montserrat-light-webfont.woff') format('woff'), url('./fonts/montserrat-light-webfont.ttf') format('truetype'), url('./fonts/montserrat-light-webfont.svg#montserratlight') format('svg'); }
@font-face { font-family:'montserrat'; font-weight:500; font-style:normal; src: url('./fonts/montserrat-medium-webfont.woff2') format('woff2'), url('./fonts/montserrat-medium-webfont.woff') format('woff'), url('./fonts/montserrat-medium-webfont.ttf') format('truetype'), url('./fonts/montserrat-medium-webfont.svg#montserratmedium') format('svg'); }
/*
@font-face { font-family:'montserrat'; font-weight:100; font-style:normal; src: url('./fonts/montserrat-thin-webfont.woff2') format('woff2'), url('./fonts/montserrat-thin-webfont.woff') format('woff'), url('./fonts/montserrat-thin-webfont.ttf') format('truetype'), url('./fonts/montserrat-thin-webfont.svg#montserratthin') format('svg'); }
@font-face { font-family:'montserrat'; font-weight:400; font-style:normal; src: url('./fonts/montserrat-regular-webfont.woff2') format('woff2'), url('./fonts/montserrat-regular-webfont.woff') format('woff'), url('./fonts/montserrat-regular-webfont.ttf') format('truetype'), url('./fonts/montserrat-regular-webfont.svg#montserratregular') format('svg'); }
@font-face { font-family:'montserrat'; font-weight:600; font-style:normal; src: url('./fonts/montserrat-semibold-webfont.woff2') format('woff2'), url('./fonts/montserrat-semibold-webfont.woff') format('woff'), url('./fonts/montserrat-semibold-webfont.ttf') format('truetype'), url('./fonts/montserrat-semibold-webfont.svg#montserratsemibold') format('svg'); }
@font-face { font-family:'montserrat'; font-weight:700; font-style:normal; src: url('./fonts/montserrat-bold-webfont.woff2') format('woff2'), url('./fonts/montserrat-bold-webfont.woff') format('woff'), url('./fonts/montserrat-bold-webfont.ttf') format('truetype'), url('./fonts/montserrat-bold-webfont.svg#montserratbold') format('svg'); }
@font-face { font-family:'montserrat'; font-weight:800; font-style:normal; src: url('./fonts/montserrat-extrabold-webfont.woff2') format('woff2'), url('./fonts/montserrat-extrabold-webfont.woff') format('woff'), url('./fonts/montserrat-extrabold-webfont.ttf') format('truetype'), url('./fonts/montserrat-extrabold-webfont.svg#montserratextrabold') format('svg'); }
@font-face { font-family:'montserrat'; font-weight:900; font-style:normal; src: url('./fonts/montserrat-black-webfont.woff2') format('woff2'), url('./fonts/montserrat-black-webfont.woff') format('woff'), url('./fonts/montserrat-black-webfont.ttf') format('truetype'), url('./fonts/montserrat-black-webfont.svg#montserratblack') format('svg'); }
*/


* 			{ margin:0px; padding:0px; border:0px; outline-style: none; }
*:focus 	{ outline:none; }
html		{ font-size:1.0666vw; font-family:'montserrat',Verdana, Arial, sans-serif; font-weight:300; line-height:1.25em; scroll-behavior: smooth; overflow:hidden; overflow-y:auto; }
body		{ color:var(--front); background-color:var(--back); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;  }

.fl 		{ float:left  !important; }		.tar	{ text-align:right   !important; }		.vat	{ vertical-align:top    !important; }
.fr 		{ float:right !important; }		.tac	{ text-align:center  !important; }		.vam	{ vertical-align:middle !important; }
.cb 		{ clear:both  !important; }		.taj	{ text-align:justify !important; }		.vab	{ vertical-align:bottom !important; }
.cl 		{ clear:left  !important; }		.tal	{ text-align:left    !important; }
.cr 		{ clear:right !important; }

.hidden 	{ display:none !important; }

h1,h2,h3,h4,h5,h6 { font-family:inherit; color:inherit; margin:0px; padding:0px; line-height:1.25em; }
h1 			{ font-size:4.0rem; font-weight:200; text-transform:uppercase; margin-bottom:4.0rem; text-indent:-0.4rem; }
h2			{ font-size:3.0rem; font-weight:300; text-transform:uppercase; margin-bottom:3.0rem; text-indent:-0.3rem; }
h3 			{ font-size:1.5rem; font-weight:300; text-transform:uppercase; margin-bottom:1.5rem; text-indent:-0.15rem; }

a 			{ color:inherit; text-decoration:underline; }
a[name]		{ display:block; height:0; }
p 			{ margin:0 0 2.5rem 0; }
strong		{ font-weight:500; }





nav { display:block; position:fixed; top:0; left:0; width:100vw; height:100vh; color:var(--white); z-index:10; border-radius:5px; background:rgba(0,0,0,0.9); opacity:0; pointer-events:none; transition:opacity 0.3s; }
nav > ul { position:absolute; right:0; top:16.333rem; padding-right:7.666rem; text-align:right; }
nav > ul > li { display:block; }
nav > ul > li > a { display:block; text-transform:uppercase; text-decoration:none; padding:0 0; font-size:1.5rem; line-height:3.75rem; }
nav > mark { position:absolute; right:0; top:18.208rem; margin-top:0; width:4rem; border-bottom:1px solid var(--white); transition:margin-top 0.3s; }
nav > a.tel,
nav > a.mail { display:block; position:absolute; left:6rem; top:16.333rem; font-size:1.5rem; line-height:3.75rem; padding-left:3rem; text-decoration:none; }
nav > a.tel:before,
nav > a.mail:before { display:block; position:absolute; left:1rem; top:50%; font-size:1.5rem; width:1em; height:1em; line-height:1em;  margin:-0.5em; transition:font-size 0.3s; }
nav > a.mail { margin-top:3.75rem; }


#toggle_menu { position:fixed; right:6.666rem; top:5.66rem; width:6.666rem; height:6.666rem; z-index:20; mix-blend-mode:difference; cursor:pointer; }
#toggle_menu:before,
#toggle_menu:after { content:' '; position:absolute; left:0; top:2.333rem; width:100%; border-bottom:1px solid var(--white); transition:transform 0.3s, 0.3s top 0.2s, border-color 0.5s; }
#toggle_menu:after { top:4.333rem; }

#toggle_menu.show:before,
#toggle_menu.show:after { transform:rotate(-45deg); top:3.333rem; border-color:var(--white); transition:0.3s transform 0.2s, top 0.3s, border-color 0.5s; }
#toggle_menu.show:after	{ transform:rotate(45deg); }
#toggle_menu.show + nav { opacity:1; pointer-events:all; }





figure { display:block; width:100%; position:relative; /*border-radius:5px;*/ overflow:hidden; }
figure picture,
figure img { display:block; width:100%; object-fit:cover; transition:1.3s opacity 0.2s; }
figure:after { content:''; display:block; position:absolute; left:0; top:0; bottom:0; right:0; background:var(--black); z-index:1; opacity:0; transition:opacity 0.3s; }
figure > figcaption { position:absolute; left:3.333rem; bottom:3.333rem; color:var(--white); opacity:0; filter:blur(0.5rem); transition:0.3s opacity 0.3s, filter 0.3s; z-index:2; }
figure > figcaption > h3 { margin-bottom:1.25rem; font-size:2.25rem; }
figure > figcaption > p { margin-bottom:0; }



.wrapper { display:block; position:relative; margin:0 auto; padding:13.333rem 18.666rem 0 6.666rem; width:calc(100vw - 25.332rem); }

.wrapper_intro { overflow:hidden; padding:0; width:100vw; position:fixed; }
.wrapper_intro > figure { width:calc(100vw - 1.332rem); height:calc(100vh - 1.332rem); margin:0.666rem; overflow:hidden; }
.wrapper_intro > figure > picture,
.wrapper_intro > figure img { width:100%; height:100%; opacity:1; object-position: 50% 0; }
.wrapper_intro > figure > figcaption { left:6rem; top:6rem; bottom:auto; opacity:1; filter:none;}
.wrapper_intro > figure > figcaption > h1 { position:relative; z-index:30; }
.wrapper_intro + div.fake_intro { height:100vh; }


.wrapper_portfolio { position:relative; background:var(--back); }
.wrapper_portfolio > h2 { text-align:right; }
.wrapper_portfolio > div { display:inline-block; vertical-align:middle; width:32.2rem; }
.wrapper_portfolio > div + div { margin-left:4rem; }
.wrapper_portfolio > div > figure { display:block; margin-bottom:4rem; }
.wrapper_portfolio > div > figure:last-child { margin-bottom:0; }


/*
.wrapper_bio { position:relative; background:#fff; position:relative; }
.wrapper_bio:before { content:''; display:block; position:absolute; left:32.2rem; border-right:1px solid #000; top:5rem; bottom:5rem; }
.wrapper_bio > div { display:inline-block; vertical-align:top; width:32.2rem; }
.wrapper_bio > div + div { margin-left:3.33rem; }
.wrapper_bio > div p:last-child { margin-bottom:0; }
*/

.wrapper_bio { padding-bottom:1rem; background:var(--back); padding-left:13.333rem; }
.wrapper_vystavy { display:block; float:right; width:29.423rem; margin:0; padding-top:0; padding-left:6.666rem; padding-bottom:13.333rem; background:var(--back); }
.wrapper_vystavy:before,
.wrapper_vystavy:after { content:' '; display:block; position:absolute; top:0; bottom:0; right:100%; width:41rem; background:var(--back); }
.wrapper_vystavy:after { background:transparent; border-right:0.5px solid var(--front); bottom:13.333rem; top:-13rem; }
.wrapper_vystavy p:last-child { margin-bottom:0; }
.wrapper_vzdelani { display:block; width:23.666rem; margin:0; padding:0 0 0 0; padding:0 0 0 13.333rem; background:var(--back); }
.wrapper_vzdelani p + h3 { padding-top:1.625rem; }



/* .wrapper_kontakt { transform:translateY(-100%); margin-left:5.33rem; width:max-content; padding:0; } */
.wrapper_kontakt { margin:13.333rem 0 0 0; padding:0; position:sticky; top:13.333rem; left:13.333rem; width:20rem; z-index:2; }
.wrapper_kontakt a { display:block; width:max-content; margin-bottom:1rem; line-height:2rem; padding-left:3rem; font-weight:500; text-decoration:none; position:relative; }
.wrapper_kontakt a:last-child { margin-bottom:0; }
.wrapper_kontakt a:before { display:block; position:absolute; left:1rem; top:1rem; font-size:1.5rem; width:1em; height:1em; line-height:1em;  margin:-0.5em; transition:font-size 0.3s; }


a#kontakt { clear:both; }


.wrapper_copy { height:100vh; }
.wrapper_copy > p { position:absolute; bottom:0; right:6.666rem; font-size:1rem; line-height:1.25em; font-weight:300; color:var(--black); }
.wrapper_copy:before { content:''; display:block; position:absolute; left:0; top:0; bottom:0; width:39rem; background:var(--back); }



@media (hover:hover){ 
	.wrapper_kontakt a:hover:before { font-size:2.5rem; }
	nav > a.tel:hover:before,
	nav > a.mail:hover:before{ font-size:2.5rem; }
	
/*	.wrapper_portfolio figure:hover > picture,
	.wrapper_portfolio figure:hover > img { opacity:0.33; transition:opacity 0.3s; } */
	.wrapper_portfolio figure:hover > figcaption { opacity:1; filter:blur(0); transition:0.4s opacity 0.2s, 0.8s filter 0.2s; }
	.wrapper_portfolio figure:hover:after { opacity:0.66; }
}

@media (hover:none){ 
/*	figure.show > picture,
	figure.show > img { opacity:0.33; transition:opacity 0.3s; } */
	figure.show > figcaption { opacity:1; filter:blur(0); transition:0.4s opacity 0.2s, 0.8s filter 0.2s; }
	figure.show:hover:after { opacity:0.66; }
}


@media (prefers-color-scheme:dark){ 
	:root {
		--back:		#000000;
		--front:	#ffffff;
	}	
}




#bio + .wrapper_kontakt { display:none; }

@media (orientation:portrait) and (max-width:1279px){ 

	html { font-size:2.1333vw; }
	.wrapper { padding:3.333rem; padding-right:12.222rem; width:calc(100vw - 15.777rem); }
	.wrapper_intro { padding:0; width:100vw; }
	.wrapper_intro > figure > figcaption { top:3.666rem; left:4.444rem; }
	#toggle_menu { top:4.25rem; right:4.444rem; width:4.444rem; height:4.444rem; }
	#toggle_menu:before { top:1.481rem; border-bottom-width:2px; }
	#toggle_menu:after { top:2.962rem; border-bottom-width:2px; }
	#toggle_menu.show:before,
	#toggle_menu.show:after { top:2.222rem; }
	nav > ul { padding-right:5rem; }
	nav > a.tel, nav > a.mail { left:4.444rem; }
	nav > mark { width:3rem; }
	.wrapper_portfolio > h2 { text-align:left; }
	.wrapper_portfolio > div { width:100%; }
	.wrapper_portfolio > div + div { margin-left:0; }
	.wrapper_vystavy,
	.wrapper_vzdelani { float:none; padding-top:0; }
	.wrapper_vystavy:before,
	.wrapper_vystavy:after { content:none; display:none; }
	.wrapper_kontakt { padding:0; width:max-content; width:14rem; left:calc(100vw - 18.444rem); top:calc(100vh - 28rem); }
	.wrapper_bio { padding-top:6.666rem; }
	#bio + .wrapper_kontakt { display:block; margin-bottom:-24.666rem; margin-top:3.333rem; height:18rem; z-index:1; }
	.wrapper_vzdelani + .wrapper_kontakt { display:none; }
	.wrapper_copy { background:#000; }
	.wrapper_copy:before { display:none; content''; }
	.wrapper_copy > p { left:4.444rem; bottom:2rem; }
}