:root {
	--bg1: rgb(0, 0, 0);
	--nav_bg1: rgb(8, 8, 8);
	--nav_bg2: rgb(255, 255, 255);
	--nav_bg3: rgba(14, 14, 14, .9);
	--font_l: rgb(200, 200, 200);
	--font_d: rgb(0, 0, 0);
	--theme1: rgb(255, 120, 0);
	--theme1-o: rgb(210, 100, 0);
	--theme2: rgb(220, 20, 60);
}

::selection {
	color: var(--font_d);
	background-color: rgba(255, 255, 255, .5);
} .ie ::selection { color: rgb(0,0,0); }

body {
	background-color: var(--bg1);
	overflow-x: hidden;
	overflow-y: overlay;
} .ie { background-color: rgb(0,0,0); }

body::-webkit-scrollbar { width: 8px; height: 8px; }
body::-webkit-scrollbar-thumb { background-color: rgb(130, 130, 130); border-radius: 2px; border: 1px solid rgb(120, 120, 120); }
body::-webkit-scrollbar-thumb:hover { background-color: rgb(140, 140, 140); }
body::-webkit-scrollbar-track { background-color: rgb(100, 100, 100); }
body::-webkit-scrollbar-button { display: none; }
body *::-webkit-scrollbar { width: 5px; height: 5px; }
body *::-webkit-scrollbar-thumb { background-color: rgba(100, 100, 100, .4); }
body *::-webkit-scrollbar-thumb:hover { background-color: rgba(100, 100, 100, .8); }
body *::-webkit-scrollbar-track { background-color: rgba(20, 20, 20, .7); }
body *::-webkit-scrollbar-button { display: none; }
body *::-webkit-scrollbar-corner { background-color: rgba(20, 20, 20, .7); }

/*		ARROW UP		*/
#arrowup {
	display: block;
	position: fixed;
	top: 100px;
	left: -50px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background-color: var(--nav_bg2);
	box-shadow: 5px 5px 8px 1px rgb(0, 0, 0);
	z-index: 999;
	overflow: hidden;
	cursor: pointer;
	transition: .4s 0s all cubic-bezier(.8, 0, .4, 1);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
} .ie #arrowup { background-color: rgb(255, 255, 255); }
#arrowup .arr-container {
	position: absolute;
	top: 50%;
	left: -50%;
	transform: translate(-50%, -50%);
	width: 90%;
	transition: .3s 0s left ease-in-out, .2s 0s top ease-in-out;
}
#arrowup .arr-container img {
	width: 100%;
}
#arrowup.reveal.scrolled {
	left: 30px;
}
#arrowup.reveal.scrolled .arr-container {
	left: 50%;
	transition: .3s .1s left ease-in-out, .2s 0s top ease-in-out;
}
#arrowup.reveal.scrolled:hover .arr-container {
	top: 30%;
}

#nav-mobile-arrowup {
	display: none;
	position: absolute;
	top: 5px;
	right: -50px;
	width: 42px;
	height: 42px;
	padding: 10px;
	box-sizing: content-box;
	cursor: pointer;
	z-index: 999;
	transition: .6s 0s right cubic-bezier(.8, 0, .4, 1);
}
#nav-mobile-arrowup .arr-container {
	position: relative;
	width: 100%;
	height: 100%;
}
#nav-mobile-arrowup .arr-container div {
	position: absolute;
	top: 18px;
	left: 50%;
	background-color: rgb(242, 242, 242);
	width: 50%;
	height: 1px;
	transform-origin: top left;
}
#nav-mobile-arrowup .arr-container div:nth-child(1) { transform: rotateZ(135deg); }
#nav-mobile-arrowup .arr-container div:nth-child(2) { transform: rotateZ(45deg); }
#nav-mobile-arrowup .arr-container div span {
	position: absolute;
	display: block;
	right: 0;
	background-color: var(--theme2);
	width: 0;
	height: 1px;
	transition: .1s 0s width ease-in-out;
} .ie #nav-mobile-arrowup .arr-container div span { background-color: rgb(220, 20, 60); }
#nav-mobile-arrowup.scrolled {
	right: 5px;
}
#nav-mobile-arrowup:hover .arr-container div span {	width: 100%; }

@media only screen and (max-width: 767px) {
	#arrowup {
		display: none;
	}
	#nav-mobile-arrowup {
		display: block;
	}
}

/*		MAIN		*/
main {
	position: relative;
	visibility: hidden;
	opacity: 0;
	transition: .5s .1s ease-out;
	transition-property: visibility, opacity;
}

main.reveal {
	visibility: visible;
	opacity: 1;
}


/*		DEMO		*/
#section-demo, main section, main section .sec-content {
	position: relative;
	min-height: 700px;
	height: 100vh;
	max-height: 1200px;
	color: var(--font_l);
	overflow: hidden;
} .ie #section-demo, main section, main section .sec-content { color: rgb(200,200,200); }
@media only screen and (max-width: 767px) {
	#section-demo, main section, main section .sec-content {
		max-height: 1000px;
	}
}

#demo-content, #demo-content>div,  #demo-content .container {
	height: 100%;
}
#demo-content .filler {
	display: block;
}
#demo-content .container {
	position: relative;
}

#demo-sm {
	position: relative;
	display: none;
	height: 20%;
	cursor: default;
}
#demo-sm div {
	position: absolute;
	bottom: 0;
	padding: 0;
	text-align: center;
}
#demo-sm h1 {
	font-size: 10vw;
	font-weight: 400;
	color: var(--theme1);
} .ie #demo-sm h1 { color: rgb(255, 120, 0); }
@media only screen and (max-width: 376px) {
	#demo-sm h1 {
		font-size: 37px;
	}
}
#demo-sm h5 {
	font-weight: 300;
}

#demo-header {
	position: relative;
	height: 60%;
	transition: .3s 0s height ease-in-out;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#demo-content.vid-active #demo-header {
	height: 30%;
}
#demo-header span.underline {
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 1px;
	background-color: var(--theme2);
	transition: .2s 0s width ease-in-out;
} .ie #demo-header span.underline { background-color: rgb(220, 20, 60); }
#demo-header *:hover>span.underline {
	width: 120%;
}
#demo-header>div {
	position: absolute;
	bottom: 0;
	padding: 32px;
	font-weight: 300;
}
#demo-header #demo-wrap {
	margin: 0 auto;
	width: 288px;
	padding: 12px 20px;
	border-radius: 2px;
}
#demo-header #demo-wrap>* {
	display: inline-block;
	vertical-align: top;
}

#demo-header #demo-vid-start {
	position: relative;
	width: 160px;
	font-size: 42px;
	cursor: pointer;
}
#demo-header #demo-vid-start #playbutton {
	font-size: 42px !important;
	display: table;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}

#demo-download {
	position: relative;
	right: 0;
	width: 63px;
	height: 63px;
	margin-left: 20px;
}
#demo-download #dropdown-toggle {
	position: absolute;
	width: 100%;
	height: 100%;
	cursor: pointer;
	border: 1px solid rgba(0,0,0,0);
	border-radius: 2px;
	transition: .15s border;
	
}
#demo-download #dropdown-toggle span {
	position: absolute;
	display: table;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 32px !important;
}
#demo-download #dropdown-container {
	position: absolute;
	top: 80%;
	right: -2.6px;
	width: 248px;
	height: 0;
	padding: 0 20px;
	box-sizing: content-box;
	visibility: hidden;
	opacity: 0;
	border: rgba(20, 20, 20, .9);
	border-radius: 2px;
	background-color: rgb(40, 40, 40);
	overflow: hidden;
	z-index: 700;
	transition: .2s all ease-in-out;
}
#demo-download #dropdown-container #items {
	display: table;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 200px;
}
.ie #demo-download #dropdown-container #items {	width: auto; }
#demo-download #dropdown-container .dropdown-element {
	position: relative;
	display: inline-block;
	margin: 0 20px;
}
#demo-download #dropdown-container .dropdown-element a {
	display: block;
	width: 60px;
	padding: 10px 0;
	font-size: 25px;
	color: rgb(180, 180, 180);
	text-align: center;
	text-decoration: none;
}
#demo-download #dropdown-container .dropdown-element a:hover {
	color: rgb(255, 255, 255);
}
#demo-download.active #dropdown-container {
	top: calc(100% + 10px);
	height: 80px;
	padding: 25px 20px;
	opacity: 1;
	visibility: visible;
}
#demo-download.active #dropdown-toggle {
	border: 1px solid rgb(210, 100, 0);
	border: 1px solid var(--theme1-o);
}


#demo-video {
	position: absolute;
	top: 30%;
	left: 50%;
	width: 100%;
	height: calc(70% - 185px);
	opacity: 0;
	visibility: hidden;
	transition: .5s .1s;
	transition-property: left, opacity, visibility;
}
#demo-content.vid-active #demo-video {
	opacity: 1;
	visibility: visible;
	left: 0;
}

#demo-video #demo-close {
	position: absolute;
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	background-color: var(--nav_bg2);
	border-radius: 50%;
	overflow: hidden;
	z-index: 5;
	cursor: pointer;
	box-shadow: 5px 5px 8px 1px rgb(0, 0, 0);
	transition: left .4s 0s;
} .ie #demo-video #demo-close {background-color: rgb(255, 255, 255); }
.vid-active #demo-video #demo-close {
	left: -70px;
	transition: left .5s .3s;
}
#demo-video #demo-close div {
	position: absolute;
	left: 50px;
	width: 100%;
	height: 100%;
	transition: left .2s;
}
#demo-video #demo-close div span {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 65%;
	height: 2px;
	transform-origin: center;
	background-color: rgb(36, 36, 36);
}
#demo-video #demo-close div span:nth-child(1) { transform: translateX(-50%) rotate(45deg); }
#demo-video #demo-close div span:nth-child(2) { transform: translateX(-50%) rotate(-45deg); }
.vid-active #demo-video #demo-close div {
	left: 0;
	transition: left .2s .5s;
} 

@media only screen and (max-width: 767px) {
	#demo-video #demo-close {
		top: 20px;
		left: 50%;
		transform: translateX(-50%);
		transition: top .4s 0s;
	}
	.vid-active #demo-video #demo-close {
		left: 50%;
		top: -60px;
		transition: top .5s;
	}
	#demo-video #demo-close div {
		left: 0;
		top: 50px;
		transition: top .2s;
	}
	.vid-active #demo-video #demo-close div {
		top: 0;
		transition: left .2s .5s;
	}
}

#demo-video #player-container {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	min-width: 350px;
	width: 100%;
	min-height: 250px;
	height: 100%;
	margin: 0 auto;
	border: 1px solid rgba(0,0,0,.7);
	z-index: 10;
}

#demo-desc {
	position: absolute;
	bottom: calc(40% - 185px);
	width: 100%;
	transition: .3s 0s bottom ease-in-out;
	cursor: default;
}
#demo-content.vid-active #demo-desc {
	bottom: 0;
}
#demo-desc div {
	padding: 32px;
	overflow: hidden;
	text-align: center;
}
#demo-desc div h1 {
	font-size: 52px;
	color: var(--theme1);
	font-weight: 300;
	text-shadow: 0 0 1px rgba(0, 0, 0, .8);
	letter-spacing: 1px;
} .ie #demo-desc div h1 { color: rgb(255, 120, 0); }
#demo-desc div h5 {
	margin-top: 25px;
	padding-left: 3px;
	font-size: 22px;
	color: inherit;
	font-weight: 400;
}

@media only screen and (max-width: 767px) {
	#demo-content .filler {
		display: none;
	}
	#demo-header {
		height: calc(50% - 40px);
	}
	#demo-content.vid-active #demo-header {
		height: 18%;
	}
	#demo-wrap {
		background-color: rgba(25, 25, 30, .65);
	}
	#demo-video {
		top: 45%;
	}
	#demo-video #player-container {
		margin: 0 auto;
	}
	#demo-sm {
		display: block;
	}
	#demo-desc {
		display: none;
	}
}

/*		SECTIONS		*/
main section {
	background-color: rgba(40, 40, 40, .85);
}

section .sec-header {
	position: relative;
	top: 20%;
	min-width: 270px;
	width: 50%;
	height: 270px;
	margin: 0 auto;
	padding: 0;
}
section .sec-header .head-fill {
	position: absolute;
	top: 20px;
	left: -40px;
	width: 100%;
	height: 100%;
	opacity: 0;
	background-color: transparent;
	border: 1px solid rgb(120, 120, 120);
	border-radius: 1px;
	transition: .5s 0s all ease-in-out;
}
section .sec-header .text {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	display: table;
	margin: 0;
	padding: 0;
	color: rgb(255, 255, 255);
	font-size: 52px;
	font-weight: 400;
	transition: .5s 0s all ease-in-out;
}
section.reveal .sec-header .text {
	opacity: 1;
	top: 50%;
	transform: translate(-50%, -50%);
}
section.reveal .sec-header .head-fill {
	opacity: 1;
}
section.reveal .sec-header .head-fill:nth-child(1) {
	top: -5px;
	left: -5px;
}
section.reveal .sec-header .head-fill:nth-child(2) {
	top: 5px;
	left: 5px;
}

@media only screen and (max-width: 767px) {
	.sec-hr {
		display: none;
	}
}
.sec-hr {
	width: 100%;
	height: 1px;
	margin: 0 auto;
	padding: 0;
	background-color: rgba(40, 40, 40, .85);
	border: none;
}
.sec-hr div {
	width: 80%;
	height: 100%;
	margin: 0 auto;
	background-color: rgba(137, 138, 152, .7);
	border-left: 2px solid rgba(168, 171, 208, .75);
	border-right: 2px solid rgba(168, 171, 208, .75);
}

/*	SECTION ARROW-NEXT	*/
section .section-nav {
	position: absolute;
	top: calc(20% + 290px);
	left: 50%;
	transform: translateX(-50%);
	min-width: 270px;
	width: calc(100% - 30px);
	max-width: 500px;
	height: 270px;
}
section .logo-sec {
	font-size: 60px;
	color: var(--theme1);
	font-weight: 400;
	text-align: center;
	-ms-user-select: none;
    user-select: none;
	-webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgb(10, 10, 10);
	-webkit-font-smoothing: antialiased;
	height: 100px;
	opacity: 0;
	visibility: hidden;
	transition: .2s 0s opacity, .2s 0s visibility, .5s 0s font;
} .ie section .logo-sec { color: rgb(255, 120, 0); }
@media only screen and (max-width: 992px) {
	section .logo-sec {
		font-size: 50px;
	}
}
.ie section .logo-sec {
	text-shadow: 1px 0 rgb(10, 10, 10), 0 1px rgb(10, 10, 10), -1px 0 rgb(10, 10, 10), 0 -1px rgb(10, 10, 10);
}
.scrstop section .logo-sec {
	opacity: 1;
	visibility: visible;
	transition: 4s 0s opacity, 3s 0s visibility, .1s .2s font;
}
section .arrows-sec {
	transition: .2s 0s;
}
section .arrows-sec {
	position: relative;
	width: 100%;
	height: 170px;
}
section .arrows-sec .next-sec-arr {
	position: absolute;
	left: 50%;
	top: calc(100% - 50px);
	transform: translateX(-50%);
	opacity: 0;
	visibility: hidden;
	width: 120px;
	height: 50px;
	background-color: rgba(51, 51, 51, .3);
	box-shadow: 2px 2px 2px -1px rgb(0, 0, 0);
	border-radius: 20px;
	border: 1px solid rgb(86, 86, 86);
	cursor: pointer;
	transition: .2s 0s;
}
section.reveal .arrows-sec .next-sec-arr {
	transition: .5s .5s;
	transition-property: top, opacity, visibility;
	opacity: 1;
	visibility: visible;
	top: 20%;
}
section .arrows-sec .next-sec-arr div {
	position: absolute;
    left: 50%;
    bottom: -30px;
    width: 30px;
    height: 2px;
    background-color: rgb(255, 255, 255);
    transform-origin: top left;
	opacity: 0;
	visibility: hidden;
	transition: .3s 0s;
	transition-property: bottom, opacity, visibility;
}
section.reveal .arrows-sec .next-sec-arr div {
	bottom: 10px;
	opacity: 1;
	visibility: visible;
	transition: .7s .5s;
	transition-property: bottom, opacity, visibility;
}
section .arrows-sec .next-sec-arr div:nth-child(1) { transform: rotateZ(315deg); }
section .arrows-sec .next-sec-arr div:nth-child(2) { transform: rotateZ(225deg) translateX(-2px); }
section .arrows-sec .next-sec-arr div span {
	position: absolute;
	right: 0;
	display: block;
	background-color: var(--theme2);
	height: 100%;
	width: 0;
	transition: .2s 0s;
} .ie section .arrows-sec .next-sec-arr div span {background-color: rgb(220, 20, 60); }
section .arrows-sec .next-sec-arr:hover div span {
	width: 100%;
}
@media only screen and (max-width: 767px) {
	section .section-nav {
		position: absolute;
		top: calc(100vh - 70px);
		bottom: auto;
		left: 50%;
		transform: translateX(-50%);
		max-width: none;
		width: 120px;
		max-width: none;
		min-height: unset;
		height: 170px;
		max-height: none;
		z-index: 500;
	}
	section .logo-sec {
		display: none;
	}
	section .arrows-sec .next-sec-arr {
	}
	section.reveal .arrows-sec .next-sec-arr {
		top: 0;
	}
}
@media only screen and (max-height: 700px) and (max-width: 767px) {
	section .section-nav {
		top: 630px;
	}
}

/*		SECTION CONTENT		*/
section .sec-main {
	position: relative;
	width: 100%;
	height: 100%;
}
section .sec-main .tile {
	position: absolute;
	top: 20px;
	left: 10%;
	opacity: 0;
	width: calc(100% - 40px);
	height: 100%;
	margin: 0 auto;
	transition: .5s 0s ease-in-out;
	transition-property: opacity, top, left;
}
section.reveal .sec-main .tile {
	opacity: 1;
	top: 0;
	left: 0;
	transition: .4s .3s ease-in-out;
	transition-property: opacity, top, left;
}
section .sec-main .tile .text {
	position: relative;
	top: 20%;
	transition: .3s 0s ease-in-out;
	transition-property: top;
}
@media only screen and (min-width: 767px) and (max-width: 1200px) {
	section#koszty .sec-main .tile .text {
		top: 85px;
	}
}

@media only screen and (max-width: 767px) {
	section .sec-content>div {
		display: table;
		min-height: unset;
		height: auto;
	}
	section .sec-content>div:nth-child(2) {
		height: calc(100% - 198px);
	}
	section .sec-header .head-fill {
		top: -20px;
		left: 40px;
		transition: .3s 0s all ease-in-out;
	}
	section .sec-header {
		min-width: 180px;
		width: 50%;
		height: auto;
		margin: 40px auto;
		padding: 20px 0;
	}
	section .sec-header .text {
		position: relative;
		top: 0 !important;
		left: 0;
		transform: translate(0);
		bottom: auto;
		transition: .3s 0s all ease-in-out;
	}
	section.reveal .sec-header .text {
		left: 50%;
		transform: translateX(-50%);
	}

	section .sec-main .tile {
		left: 0;
		width: 100%;
	}
	section .sec-main .tile .text {
		top: 0;
		margin: 0 auto;
	}
}