@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500'); /* Raleway Font */
@import url('https://fonts.googleapis.com/css?family=Open+Sans'); /* Open Sans Font */
@import url('sz.css');
:root {
	/*--tan35:0.47381472041445;*/
	--tan35:0.70020753821;
	--pageWidth:100vw;
	--pageHeigth:100vh;
	--maxWidth:1400px;
	--offset:calc(100vw - var(--maxWidth));
	--hasSBLeft: '. sidebarLeft main main main main .';
	--hasSBRight: '. main main main main sidebarRight .';
	--hasSBLeftRight: '. sidebarLeft main main main sidebarRight .';
	--colorAlpha:1;
	--c00:255, 255, 255;
	--c01:228, 134, 50;
	--c02:243, 171, 70;
	--b01:21, 21, 21;
	--b02:19, 19, 19;
	--b03:8, 8, 8;
	--color00:rgb(255, 255, 255);
	--color01:rgb(228, 134, 50);
	--color02:rgb(243, 171, 70);
	--bgColor01:rgb(21, 21, 21);
	--bgColor02:rgb(19, 19, 19);
	--bgColor03:rgb(8, 8, 8);
	/*--bgColor01:rgb(12, 11, 25);*/
	/*--bgColor02:rgb(15, 15, 44);*/
	--hFooter:120px;
	--font01:'Wallpoet', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
	--font02:-apple-system,BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
	--font03:Raleway, sans-serif;
}
@media screen and (min-width: 1451px) {
	:root {
		--maxWidth:1400px;
	}
}
@media screen and (max-width: 1450px) {
	:root {
		--maxWidth:1200px;
	}
}


@font-face {
    font-family:'Wallpoet';
    font-style:normal;
    font-weight:400;
    src: 
		local('Wallpoet'),
		local('Wallpoet-Regular'),
		url(../fonts/Wallpoet-Regular.woff2) format('woff2'),
		url(../fonts/Wallpoet-Regular.ttf) format('ttf');
}



html , body {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
}

body{
	margin: 0;
	padding: 0;
	background:var(--bgColor01) url(../img/bg.png);
	color:#fff;
	font-family:var(--font02);
	line-height:1.5rem;
}

h1, h2, h3, h4, h5 {
	font-family:var(--font03);
	text-transform:uppercase;
	/*color:var(--color01);*/
	/*border-right:3px solid var(--color01);*/
}
h1.heading, h2.heading, h3.heading, h4.heading, h5.heading { position:relative; display:inline-block; font-family:var(--font01); }
h1.heading:after, h2.heading:after, h3.heading:after, h4.heading:after, h5.heading:after {
	content:''; position:absolute; left:calc(100% + 12px); top:calc(50% - 0px); height:4px; background-color:var(--color01);
	width:calc(var(--maxWidth) - 100% - 12px );
}
h1.heading.reveal:after { width:5px !important; transition:width 1s ease-in; }
h1.heading.reveal.show:after { width:calc(var(--maxWidth) - 100% - 12px )!important; }

h1.shortHrLeft:after, h2.shortHrLeft:after, h3.shortHrLeft:after, h4.shortHrLeft:after, h5.shortHrLeft:after {
	content:''; display:block;
	width:60px; height:1px;
	border-top:2px solid var(--color02);
}

/*short-hr-left*/

hr {
	width:100%;
	height:2px;
	background:var(--color01);
	margin:20px 0;
	border:none;
}

nav li { list-style:none; }

#socialBar { grid-area:socialBar; display:none; }
body.hasSocialBar #socialBar { display:block; }
#pageHeader { grid-area:header; white-space:nowrap; --hBgOpacity:1; }
body.hasTeaser #pageHeader { --hBgOpacity:0.4; }
#pageTeaser { grid-area:teaser; display:none; }
body.hasTeaser #pageTeaser { display:block; }
#pageMain { grid-area:main; /*border-left:3px solid var(--color01);*/ padding:0 0 50px 0; }
#sidebarLeft { grid-area:sidebarLeft; display:none; padding:0 0 50px 0; }
body.hasLeftSideBar #sidebarLeft { display:block; padding:0 0 50px 0; }
#sidebarRight { grid-area:sidebarRight; border-right:3px solid var(--color01); display:none; }
#pageFooter { grid-area: footer; }
  
#szPage {
	--gridTemplateRows: 25px 70px auto var(--hFooter);
	--gridTemplateAreaMain: '. main main main main main .';
	--gridTemplateAreaHeader: 'header header header header header header header';

	display: grid;
	width:99vw;
	min-height:100vh;
	grid-template-columns:
		calc(var(--offset)/2)
		calc(20vw - var(--offset)/5) calc(20vw - var(--offset)/5) calc(20vw - var(--offset)/5) calc(20vw - var(--offset)/5) calc(20vw - var(--offset)/5)
		calc(var(--offset)/2);
	grid-template-rows:var(--gridTemplateRows);
	grid-template-areas:
		var(--gridTemplateAreaHeader)
		var(--gridTemplateAreaMain)
		"footer footer footer footer footer footer footer";
}
body.hasSocialBar #szPage {
	--gridTemplateRows:25px 70px auto var(--hFooter);
	--gridTemplateAreaHeader:
		'socialBar socialBar socialBar socialBar socialBar socialBar socialBar'
		'header header header header header header header';
}
body.hasTeaser #szPage {
	--gridTemplateRows:70px calc(100vh - 70px) auto var(--hFooter);
	--gridTemplateAreaHeader:
		'header header header header header header header'
		'teaser teaser teaser teaser teaser teaser teaser';
}
body.hasTeaser.hasSocialBar #szPage {
	--gridTemplateRows: 25px 70px calc(100vh - 70px) auto var(--hFooter);
	--gridTemplateAreaHeader:
		'socialBar socialBar socialBar socialBar socialBar socialBar socialBar'
		'header header header header header header header'
		'teaser teaser teaser teaser teaser teaser teaser';
}
body.hasLeftSideBar #szPage { --gridTemplateAreaMain:var(--hasSBLeft); }


.headerBrand {
	display:inline-block;
	width:calc((20% - 3px) + var(--offset)/2); transform:skewX(-35deg) translateX(-25px);
	height:45px;
	line-height:45px;
	background:rgba(var(--b03), var(--hBgOpacity));
	padding:0 0 0 calc(var(--offset)/2 + 25px);
	border-right:3px solid rgba(var(--c01), var(--hBgOpacity));
	font-family:var(--font01);;
}
.headerBrand span { display:inline-block; transform:skewX(35deg); }
.headerBrand .brandLogo { max-height:45px; }
.brandLogo img { max-height:32px; vertical-align:middle; filter:grayscale(100%); filter:sepia(1); }
.headerBrand .brandText { max-height:45px; font-size:24px; padding:0 0 0 12px; }

.headerMenu {
	display:inline-block;
	width:calc(80% - var(--offset)/2 - 3px);
	height:45px;
	line-height:45px;
	transform:skewX(-35deg) translateX(37px);
	background:rgba(var(--b03), var(--hBgOpacity));
	padding:0 calc(var(--offset)/2 + 37px - 35px) 0 0;
	margin: 0 0 0 -35px;
	border-left:3px solid rgba(var(--c01), var(--hBgOpacity));
	
	text-align:right;
	/*box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 0px 1px 1px #F3AB46 inset;*/
}
.headerMenu li { display:inline-block; height:45px; padding:0 12px 0 12px; transition:all ease-in-out 0.3s; border:2px solid var(--color01); border-top:none; border-bottom:none; border-color:transparent; }
.headerMenu li.active a { color:var(--color02); }
.headerMenu li:hover { background-color:rgba(var(--b01), 0.8); border-color:var(--color01); box-shadow:inset 0 0 15px var(--bgColor01);}
.headerMenu a {
	display:inline-block;
	transform:skewX(35deg);
	font-family:var(--font01);
	text-transform:uppercase;
	text-decoration:none;
	color:#fff;
	transition:all ease-in-out 0.3s;
}
.headerMenu a:hover { color:var(--color01); }

nav.sideBar a { font-family:var(--font03); text-decoration:none; color:var(--color00); }
nav.sideBar li.active a { color:var(--color02); }

#pageFooter { --footerOffset:calc(var(--tan35) * (var(--hFooter) / 2) ); }
#pageFooter .footerLeft, #pageFooter .footerRight {
	display:inline-block; height:var(--hFooter); background-color:rgba(var(--b03), 0.8); vertical-align:middle;
}
#pageFooter .footerLeft {
	width:calc((30vw - 3px + var(--footerOffset)) ); transform:skewX(35deg) translateX(calc(var(--footerOffset) * -1)); border-right:3px solid var(--color01);
	padding:0 var(--footerOffset) 0 calc(var(--offset)/2 + var(--footerOffset));
}
#pageFooter .footerRight {
	width:calc(70vw - var(--offset)/2 - 3px + var(--footerOffset) * 1.5); transform:skewX(35deg) translateX(calc(var(--footerOffset) * 2)); border-left:3px solid var(--color01);
	padding:0 calc(var(--footerOffset) + var(--offset)/2) 0 var(--footerOffset);
}
#pageFooter .footerContent { transform:skewX(-35deg); height:var(--hFooter); }

#glowingNodes { position:fixed; left:0; top:0; width:100vw; height:100vh; }
#randomparticle { position:absolute; left:0; top:0; width:100vw; height:100vh; }


#titleTeaser {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%, calc(-50% - 70px));
	color:var(--color00);
	font-weight:300;
	font-size:3rem;
	font-family:Raleway, sans-serif;
	border:unset;
}

table { margin:0 6px 25px 6px; }
tr { --trBgOpacity:0; background:rgba(var(--b03), var(--trBgOpacity)); }
tr:nth-child(even) { --trBgOpacity:0; }
tr:nth-child(odd) {--trBgOpacity:0.4; }

th {
	background:rgba(var(--b03), 1);
	position: sticky;
	top: 0; /* Don't forget this, required for the stickiness */
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
	z-index:+1;
}

td { padding:6px 8px 6px 8px; }

.colored { color:var(--color01); }

.wFull { width:100vw; }
.hFull { height:100vh; }
.h100 { height:100px; }
.h200 { height:200px; }

.o010 { opacity:0.1; }
.o020 { opacity:0.2; }
.o030 { opacity:0.3; }
.o040 { opacity:0.4; }
.o050 { opacity:0.5; }
.o060 { opacity:0.6; }
.o070 { opacity:0.7; }
.o080 { opacity:0.8; }
.o090 { opacity:0.9; }
.o100 { opacity:1; }


.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
[class*="col-"] { float:left; padding:15px; }
.row::after { content:''; clear:both; display:table; }

.card { background:linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)); }
[class*="col-"] .card { padding:25px 35px; }

.cardRight, .cardLeft { padding:20px 40px; margin:0; }



.reveal { position:relative; opacity:0; }
.reveal.show { opacity: 1; }

.show.fade-top { animation: fade-top 1s ease-in; }
.show.fade-bottom { animation: fade-bottom 1s ease-in; }
.show.fade-left { animation: fade-left 1s ease-in; }
.show.fade-right { animation: fade-right 1s ease-in; }


.loader {
	--loaderAlpha:0.2;
	--loaderAlphaStart:1;
	--loaderAlphaEnd:0.1;
	--loaderAlphaStart:1;
	--loaderAlphaStep1:calc( var(--loaderAlpha) * var(--loaderAlphaStart) );
	--loaderAlphaStep2:calc( var(--loaderAlpha) * ((var(--loaderAlphaStart) - var(--loaderAlphaEnd)) * 50 / 100) );
	--loaderAlphaStep3:calc( var(--loaderAlpha) * ((var(--loaderAlphaStart) - var(--loaderAlphaEnd)) * 60 / 100) );
	--loaderAlphaStep4:calc( var(--loaderAlpha) * ((var(--loaderAlphaStart) - var(--loaderAlphaEnd)) * 40 / 100) );
	--loaderAlphaStep5:calc( var(--loaderAlpha) * ((var(--loaderAlphaStart) - var(--loaderAlphaEnd)) * 20 / 100) );
	--loaderAlphaStep6:calc( var(--loaderAlpha) * var(--loaderAlphaEnd) );
	left:calc(50% - 60px); top:calc(50% - 60px);
	border: 16px solid rgba(var(--c02), var(--loaderAlpha)); /* Light grey */
	border-top-color:var(--color01);
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 4s linear infinite;
}
  
@keyframes spin {
	0% { transform: rotate(0deg); border-color:rgba(var(--c02), var(--loaderAlphaStep1)); border-top-color:var(--color02); }
	25% { border-color:rgba(var(--c02), var(--loaderAlphaStep2)); border-right-color:var(--color01); }
	50% { border-color:rgba(var(--c02), var(--loaderAlphaStep6)); border-bottom-color:var(--color02); }
	75% { border-color:rgba(var(--c02), var(--loaderAlphaStep2)); border-left-color:var(--color02); }
	100% { transform: rotate(360deg); border-color:rgba(var(--c02), var(--loaderAlphaStep1)); border-top-color:var(--color02); }
}


@keyframes fade-top {
	0% { transform:translateY(-50px); opacity:0; }
	100% { transform:translateY(0); opacity:1; }
}
@keyframes fade-bottom {
	0% { transform:translateY(50px); opacity:0; }
	100% { transform:translateY(0); opacity:1; }
}
@keyframes fade-left {
	0% { transform:translateX(-100px); opacity:0; }
	100% { transform:translateX(0); opacity:1; }
}
  
@keyframes fade-right {
	0% { transform:translateX(100px); opacity:0; }
	100% { transform:translateX(0); opacity:1; }
}