/*	==========================================================================
	Reset styles
	==========================================================================	*/
*, *::after, *::before {box-sizing:border-box; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10px' height='10px' viewBox='0 0 10 10'%3E%3Ccircle fill='%23ffffff' cx='5' cy='5' r='5' /%3E%3C/svg%3E") 5 5,auto;}

html {line-height:1.15; -webkit-text-size-adjust:100%;}

body {margin:0;}
main {display:block;}
h1 {font-size:2em; margin:0.67em 0;}

hr {box-sizing:content-box; height:0; overflow:visible;}
pre {font-family:monospace, monospace; font-size:1em;}

a {background-color:transparent;}
abbr[title] {border-bottom:none; text-decoration:underline; text-decoration:underline dotted;}
b, strong {font-weight:bolder;}
code, kbd, samp {font-family:monospace, monospace; font-size:1em;}
small {font-size:80%;}
sub, sup {font-size:75%; line-height:0; position:relative; vertical-align:baseline;}
sub {bottom:-0.25em;}
sup {top:-0.5em;}

img {border-style:none;}

button, input, optgroup, select, textarea {font-family:inherit; font-size:100%; line-height:1.15; margin:0;}
button, input {overflow:visible;}
button, select {text-transform:none;}
button, [type="button"], [type="reset"], [type="submit"] {-webkit-appearance:button;}
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {border-style:none; padding:0;}
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {outline:1px dotted ButtonText;}
fieldset {padding:0.35em 0.75em 0.625em;}
legend {box-sizing:border-box; color:inherit; display:table; max-width:100%; padding:0; white-space:normal;}
progress {vertical-align:baseline;}
textarea {overflow:auto;}
[type="checkbox"], [type="radio"] {box-sizing:border-box; padding:0;}
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {height:auto;}
[type="search"] {-webkit-appearance:textfield; outline-offset:-2px;}
[type="search"]::-webkit-search-decoration {-webkit-appearance:none;}
::-webkit-file-upload-button {-webkit-appearance:button; font:inherit;}

details {display:block;}
summary {display:list-item;}

template {display:none;}
[hidden] {display:none;}


/*	==========================================================================
	Fonts
	==========================================================================	*/



/* Body */
/*
@font-face {font-family:'body'; font-weight:700; font-style:normal; font-display:fallback; src:url('../fonts/body/body-bold.woff2') format('woff2'), url('../fonts/body/body-bold.woff') format('woff');}
@font-face {font-family:'body'; font-weight:800; font-style:normal; font-display:fallback; src:url('../fonts/body/body-extrabold.woff2') format('woff2'), url('../fonts/body/body-extrabold.woff') format('woff');}
*/

/* Krisis */
/*
@font-face {font-family:'krisis'; font-weight:400; font-style:normal; font-display:fallback; src:url('../fonts/krisis/krisis-regular.woff2') format('woff2'), url('../fonts/krisis/krisis-regular.woff') format('woff');}
@font-face {font-family:'krisis'; font-weight:500; font-style:normal; font-display:fallback; src:url('../fonts/krisis/krisis-medium.woff2') format('woff2'), url('../fonts/krisis/krisis-medium.woff') format('woff');}
*/

/* Stratos */
@font-face {font-family:'stratos'; font-weight:400; font-style:normal; font-display:fallback; src:url('../fonts/stratos/stratos-regular.woff2') format('woff2'), url('../fonts/stratos/stratos-regular.woff') format('woff');}
/*@font-face {font-family:'stratos'; font-weight:500; font-style:normal; font-display:fallback; src:url('../fonts/stratos/stratos-medium.woff2') format('woff2'), url('../fonts/stratos/stratos-medium.woff') format('woff');}
@font-face {font-family:'stratos'; font-weight:600; font-style:normal; font-display:fallback; src:url('../fonts/stratos/stratos-semibold.woff2') format('woff2'), url('../fonts/stratos/stratos-semibold.woff') format('woff');}
*/

/* 
@font-face {font-family:'neuehaasunica-ultralight'; src:url('../fonts/neuehaasunica/neuehaasunica-ultralight.eot'); src:url('../fonts/neuehaasunica/neuehaasunica-ultralight.eot') format('embedded-opentype'), url('../fonts/neuehaasunica/neuehaasunica-ultralight.woff2') format('woff2'), url('../fonts/neuehaasunica/neuehaasunica-ultralight.woff') format('woff'), url('../fonts/neuehaasunica/neuehaasunica-ultralight.ttf') format('truetype'), url('../fonts/neuehaasunica/neuehaasunica-ultralight.svg#neuehaasunica-ultralight') format('svg'); font-weight:normal; font-style:normal;}
@font-face {font-family:'neuehaasunica-thin'; src:url('../fonts/neuehaasunica/neuehaasunica-thin.eot'); src:url('../fonts/neuehaasunica/neuehaasunica-thin.eot') format('embedded-opentype'), url('../fonts/neuehaasunica/neuehaasunica-thin.woff2') format('woff2'), url('../fonts/neuehaasunica/neuehaasunica-thin.woff') format('woff'), url('../fonts/neuehaasunica/neuehaasunica-thin.ttf') format('truetype'), url('../fonts/neuehaasunica/neuehaasunica-thin.svg#neuehaasunica-thin') format('svg'); font-weight:normal; font-style:normal;}
@font-face {font-family:'neuehaasunica-light'; src:url('../fonts/neuehaasunica/neuehaasunica-light.eot'); src:url('../fonts/neuehaasunica/neuehaasunica-light.eot') format('embedded-opentype'), url('../fonts/neuehaasunica/neuehaasunica-light.woff2') format('woff2'), url('../fonts/neuehaasunica/neuehaasunica-light.woff') format('woff'), url('../fonts/neuehaasunica/neuehaasunica-light.ttf') format('truetype'), url('../fonts/neuehaasunica/neuehaasunica-light.svg#neuehaasunica-light') format('svg'); font-weight:normal; font-style:normal;}
@font-face {font-family:'neuehaasunica-regular'; src:url('../fonts/neuehaasunica/neuehaasunica-regular.eot'); src:url('../fonts/neuehaasunica/neuehaasunica-regular.eot') format('embedded-opentype'), url('../fonts/neuehaasunica/neuehaasunica-regular.woff2') format('woff2'), url('../fonts/neuehaasunica/neuehaasunica-regular.woff') format('woff'), url('../fonts/neuehaasunica/neuehaasunica-regular.ttf') format('truetype'), url('../fonts/neuehaasunica/neuehaasunica-regular.svg#neuehaasunica-regular') format('svg'); font-weight:normal; font-style:normal;}
@font-face {font-family:'neuehaasunica-medium'; src:url('../fonts/neuehaasunica/neuehaasunica-medium.eot'); src:url('../fonts/neuehaasunica/neuehaasunica-medium.eot') format('embedded-opentype'), url('../fonts/neuehaasunica/neuehaasunica-medium.woff2') format('woff2'), url('../fonts/neuehaasunica/neuehaasunica-medium.woff') format('woff'), url('../fonts/neuehaasunica/neuehaasunica-medium.ttf') format('truetype'), url('../fonts/neuehaasunica/neuehaasunica-medium.svg#neuehaasunica-medium') format('svg'); font-weight:normal; font-style:normal;}
@font-face {font-family:'neuehaasunica-bold'; src:url('../fonts/neuehaasunica/neuehaasunica-bold.eot'); src:url('../fonts/neuehaasunica/neuehaasunica-bold.eot') format('embedded-opentype'), url('../fonts/neuehaasunica/neuehaasunica-bold.woff2') format('woff2'), url('../fonts/neuehaasunica/neuehaasunica-bold.woff') format('woff'), url('../fonts/neuehaasunica/neuehaasunica-bold.ttf') format('truetype'), url('../fonts/neuehaasunica/neuehaasunica-bold.svg#neuehaasunica-bold') format('svg'); font-weight:normal; font-style:normal;}
@font-face {font-family:'neuehaasunica-heavy'; src:url('../fonts/neuehaasunica/neuehaasunica-heavy.eot'); src:url('../fonts/neuehaasunica/neuehaasunica-heavy.eot') format('embedded-opentype'), url('../fonts/neuehaasunica/neuehaasunica-heavy.woff2') format('woff2'), url('../fonts/neuehaasunica/neuehaasunica-heavy.woff') format('woff'), url('../fonts/neuehaasunica/neuehaasunica-heavy.ttf') format('truetype'), url('../fonts/neuehaasunica/neuehaasunica-heavy.svg#neuehaasunica-heavy') format('svg'); font-weight:normal; font-style:normal;}
@font-face {font-family:'neuehaasunica-black'; src:url('../fonts/neuehaasunica/neuehaasunica-black.eot'); src:url('../fonts/neuehaasunica/neuehaasunica-black.eot') format('embedded-opentype'), url('../fonts/neuehaasunica/neuehaasunica-black.woff2') format('woff2'), url('../fonts/neuehaasunica/neuehaasunica-black.woff') format('woff'), url('../fonts/neuehaasunica/neuehaasunica-black.ttf') format('truetype'), url('../fonts/neuehaasunica/neuehaasunica-black.svg#neuehaasunica-black') format('svg'); font-weight:normal; font-style:normal;}
@font-face {font-family:'neuehaasunica-xblack'; src:url('../fonts/neuehaasunica/neuehaasunica-xblack.eot'); src:url('../fonts/neuehaasunica/neuehaasunica-xblack.eot') format('embedded-opentype'), url('../fonts/neuehaasunica/neuehaasunica-xblack.woff2') format('woff2'), url('../fonts/neuehaasunica/neuehaasunica-xblack.woff') format('woff'), url('../fonts/neuehaasunica/neuehaasunica-xblack.ttf') format('truetype'), url('../fonts/neuehaasunica/neuehaasunica-xblack.svg#neuehaasunica-xblack') format('svg'); font-weight:normal; font-style:normal;}


@font-face {font-family:'graphik'; src:url('../fonts/graphik/graphik-light.woff2') format('woff2'), url('../fonts/graphik/graphik-light.woff') format('woff'); font-weight:300; font-style:normal;}
@font-face {font-family:'graphik'; src:url('../fonts/graphik/graphik-regular.woff2') format('woff2'), url('../fonts/graphik/graphik-regular.woff') format('woff'); font-weight:normal; font-style:normal;}
@font-face {font-family:'graphik'; src:url('../fonts/graphik/graphik-medium.woff2') format('woff2'), url('../fonts/graphik/graphik-medium.woff') format('woff'); font-weight:500; font-style:normal;}
@font-face {font-family:'graphik'; src:url('../fonts/graphik/graphik-semibold.woff2') format('woff2'), url('../fonts/graphik/graphik-semibold.woff') format('woff'); font-weight:600; font-style:normal;}
@font-face {font-family:'graphik'; src:url('../fonts/graphik/graphik-bold.woff2') format('woff2'), url('../fonts/graphik/graphik-bold.woff') format('woff'); font-weight:bold; font-style:normal;}
@font-face {font-family:'graphik'; src:url('../fonts/graphik/graphik-black.woff2') format('woff2'), url('../fonts/graphik/graphik-black.woff') format('woff'); font-weight:900; font-style:normal;}
 */



/*	==========================================================================
	Settings
	==========================================================================	*/


[data-theme='dark']:root  {
	--color-background:		0,0,0;
	--color-primary:		255,255,255;
	--color-accent:			0,0,255;
}

[data-theme='light']:root {
	--color-background:		255,245,246;
	--color-primary:		0,0,0;
	--color-accent:			0,255,255;
}

:root {
	/* Colors */


	/* Sizes */
	--size-base:			1280; /*px*/
	--size-scale:			1680; /*px*/
	--size-2:				2px; /* 0.156vw; */
	--size-4:				4px; /* 0.313vw; */
	--size-8:				8px; /* 0.625vw; */
	--size-16:				16px; /* 1.25vw; */
	--size-20:				20px; /* 1.563vw; */
	--size-24:				24px; /* 1.875vw; */
	--size-32:				32px; /* 2.5vw; */
	--size-40:				40px; /* 3.125vw; */
	--size-44:				44px; /* 3.438vw; */
	--size-48:				48px; /* 2.75vw; */
	--size-52:				52px; /* 4.063vw; */
	--size-56:				56px; /* 4.375vw; */
	--size-60:				60px; /* 4.688vw; */
	--size-64:				64px; /* 5vw; */
	--size-72:				72px; /* 5.625vw; */


	/* Shadows */

	/* Transition */
	--transition-speed-regular:.5s;
	--transition-curve-regular:cubic-bezier(0.16, 1.08, 0.38, 0.98);
	--transition-regular: all var(--transition-speed-regular) var(--transition-curve-regular);


	--transition-speed-bounce:.3s;
	--transition-curve-bounce:cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


/*	==========================================================================
	App styles
	==========================================================================	*/
html, button, input, select, textarea {}
::-moz-selection {background:rgba(var(--color-accent),.7); text-shadow:none;}
::selection {background:rgba(var(--color-accent),.7); text-shadow:none;}


html, body, .root {width:100%; height:100%;}
	html {font-size:var(--size-16);}
	body {color:rgba(var(--color-primary),1); background:rgba(var(--color-background),1); transition:background 1.2s var(--transition-curve-regular);}
	body, button, input, select, textarea {font-family:'stratos', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;}

hr {display:block; height:1px; border:0; margin:0; padding:0;}


ul, ol {list-style:none; margin:0; padding:0;}

h1, h2, h3, h4, h5, h6 {margin:0; padding:0;}
h1 {}
h2 {}
h3 {}

p {font-size:20px; line-height:24px; margin:0; font-weight:normal;}
b, strong {}
i {}
ins {}

figure {margin:0;}

a {text-decoration:none;}
a, a:active, a:visited {}
a:hover {}


/*	==========================================================================
	Animation
	==========================================================================	*/


/*	==========================================================================
	Helper
	==========================================================================	*/



/*	==========================================================================
	Components
	==========================================================================	*/


/*	==========================================================================
	Cusstom
	==========================================================================	*/




/* Global Layout */
.layout {margin:0 auto; width:100%; max-width:1200px;}
	.layout_header {display:flex; flex-direction:row; justify-content:flex-start; align-items:center;}
	.layout_content {height:100%;}
	.layout_footer {display:flex; flex-direction:row; justify-content:flex-end; align-items:center;}









/* Content */
.content {height:100%; min-height:100%;}

	/* Barba Wrapper */
	.barba-container_home {height:100%;}
	.barba-container_about {height:100%;}
	.barba-container_contacts {height:100%;}
	.barba-container_single-work {height:100%;}





	.body {width:100%; height:100%; padding:32px 64px; position:relative; display:flex; flex-direction:column; background:url('../images/me.jpg') no-repeat 50% 30%; background-size:cover;}
		.body::before {content:''; pointer-events:none; position:absolute; opacity:1; left:0; top:0; right:0; bottom:0; background:rgba(var(--color-background),0); transition:var(--transition-regular); box-shadow:inset 0 0 120px 60px rgba(0,0,0,.2); mix-blend-mode:color;}
/*		.body::after {content:''; position:absolute; opacity:1; left:0; top:0; right:0; bottom:0; background:rgba(var(--color-background),0); transition:var(--transition-regular);}*/
		.body:hover::before {opacity:1; background:rgba(var(--color-accent), 1);}
/*		.body:hover::after {opacity:0;}*/



		.body::after {content:''; pointer-events:none; position:absolute; opacity:0; left:0; top:0; right:0; bottom:0; transition:var(--transition-regular); background:url('../images/text4.jpg') no-repeat 50% 50%; background-size:cover; border-width:20px; border-style:solid; border-color:#dedede; mix-blend-mode: color-dodge;}
		.body:hover::after {opacity:1;}

    




	.body {opacity:0; animation-name:fadein; animation-duration:1s; animation-delay:1s; animation-timing-function:var(--transition-curve-regular); animation-fill-mode:forwards;}
	@keyframes fadein {
		0% { opacity: 0; }
		40%   { opacity: 1; }
		50%   { opacity: 1; }
		100%   { opacity: 1; }
	}

	.logo {flex:1; display:flex; align-items:center; position:relative; transition:var(--transition-regular); mix-blend-mode:color-dodge;}


	.author {padding-bottom:8px; position:relative; transition:var(--transition-regular); mix-blend-mode:color-dodge;}
	.dash {position:relative; display:inline-block; padding:0 8px;}
		.dash-el {display:block; position:relative; top:-3px; width:2px; height:8px; transform:rotate(13deg); background:rgba(var(--color-primary), 0.4);}


	.author, .logo path {transition:var(--transition-regular);}
	.body:hover .author, .body:hover .logo path {color:#fcfcfc; fill:#dedede;}