@charset "utf-8";
/* CSS Document */

select, option{
	-webkit-appearance:none;
	-o-appearance:none;
	-moz-appearance:none;
	-ms-appearance:none;
}

* {
	margin:0;
	padding:0;
	border:0;
	outline:none;
	-webkit-appaerance: none;
	-webkit-text-adjust: none;
	box-sizing:border-box;
	position:relative;

}

::selection {
	background:#000;
	color:#fff;
}

::-moz-selection {
	background:#000;
	color:#fff;
}

html {
	background:#fff;
}

body {
	font:13px/1.5 "Saira Semi Condensed", sans-serif;
	color:#484848;
}

.block{
	display:block;
}

img.block{
	max-width:100%;
	height:auto;
}

header{
	display:block;
	position:fixed;
	left:0;
	top:0;
	width:100%;
}

.order3{
	order:3;
}

.w50{
	width:48%;
}

.mr05{
	margin-right:5px;
}

.mr10{
	margin-right:10px;
}

.mr20{
	margin-right:20px;
}

.intern-area{
	padding:20px;
}

.centered{
	width:100%;
	max-width:1200px;
	margin:0 auto;
}

.posrel{
	position:relative;
}

.inline-block{display:inline-block;}

.flx{display:flex;flex-wrap:wrap;}
.flx-cnt{display:flex;justify-content:center;flex-wrap:wrap;}
.flx-spc{display:flex;justify-content:space-between;flex-wrap:wrap;}
.flx-vend{display:flex;align-items:flex-end;}
.flx-vstrt{display:flex;align-items:flex-start;}
.flx-vcnt{display:flex;flex-direction:column;justify-content:center;}
.flx-hend{display:flex;justify-content:flex-end;}
.flx-hstrt{display:flex;justify-content:flex-start;}
.flx-hcnt{display:flex;justify-content:center;}
.flx-wrap{display:flex;flex-wrap:wrap;}
.flx-nowrap{display:flex;flex-wrap:nowrap;}
.flx-acnt{display:flex;align-items:center;}
.flx-rnd{display:flex;justify-content:space-around;flex-wrap:wrap;}
.flx-col{display:flex;flex-direction: column;}

.order1{order:1;}.order2{order:2;}.order3{order:3;}.order4{order:4;}.order5{order:5;}.order6{order:6;}.order7{order:7;}.order8{order:8;}.order9{order:9;}.order10{order:10;}

.w10{width:9%!important;}.w14{width:13%!important;}.w15{width:14%!important;}.w20{width:19%!important;}.w23{width:22%!important;}.w25{width:24%!important;}.w30{width:29%!important;}.w33{width:32%!important;}.w35{width:34%!important;}.w40{width:39%!important;}.w45{width:44%!important;}.w50{width:49%!important;}.w55{width:54%!important;}.w60{width:59%!important;}.w65{width:64%!important;}.w70{width:69%!important;}.w75{width:74%!important;}.w80{width:79%!important;}.w85{width:84%!important;}.w90{width:89%!important;}.w95{width:94%!important;}.w100{width:100%!important;}

.w10-f{width:10%!important;}.w15-f{width:15%!important;}.w20-f{width:20%!important;}.w25-f{width:25%!important;}.w30-f{width:30%!important;}.w33-f{width:33.333%!important;}.w35-f{width:35%!important;}.w40-f{width:40%!important;}.w45-f{width:45%!important;}.w50-f{width:50%!important;}.w55-f{width:55%!important;}.w60-f{width:60%!important;}.w65-f{width:65%!important;}.w70-f{width:70%!important;}.w75-f{width:75%!important;}.w80-f{width:80%!important;}.w85-f{width:85%!important;}.w90-f{width:90%!important;}.w95-f{width:95%!important;}.w100-f{width:100%!important;}

.mw100{max-width:100%;}

.m0{margin:0!important;}.mb0{margin-bottom:0!important;}.mb5{margin-bottom:5px!important;}.mb10{margin-bottom:10px!important;}.mb20{margin-bottom:20px!important;}.mb30{margin-bottom:30px!important;}.mb40{margin-bottom:40px!important;}.mb50{margin-bottom:50px!important;}.mb60{margin-bottom:60px!important;}.mb70{margin-bottom:70px!important;}.mb80{margin-bottom:80px!important;}.mb90{margin-bottom:90px!important;}.mb100{margin-bottom:100px!important;}.mt0{margin-top:0!important;}.mt10{margin-top:10px!important;}.mt20{margin-top:20px!important;}.mt30{margin-top:30px!important;}.mt40{margin-top:40px!important;}.mt50{margin-top:50px!important;}.mt60{margin-top:60px!important;}.mt70{margin-top:70px!important;}.mt80{margin-top:80px!important;}.mt90{margin-top:90px!important;}.mt100{margin-top:100px!important;}.mr0{margin-right:0!important;}.mr10{margin-right:10px!important;}.mr20{margin-right:20px!important;}.mr30{margin-right:30px!important;}.mr40{margin-right:40px!important;}.mr50{margin-right:50px!important;}.mr60{margin-right:60px!important;}.mr70{margin-right:70px!important;}.mr80{margin-right:80px!important;}.mr90{margin-right:90px!important;}.mr100{margin-right:100px!important;}.ml0{margin-left:0!important;}.ml10{margin-left:10px!important;}.ml20{margin-left:20px!important;}.ml30{margin-left:30px!important;}.ml40{margin-left:40px!important;}.ml50{margin-left:50px!important;}.ml60{margin-left:60px!important;}.ml70{margin-left:70px!important;}.ml80{margin-left:80px!important;}.ml90{margin-left:90px!important;}.ml100{margin-left:100px!important;}

.mauto{margin-left:auto;margin-right:auto;}

.p0{padding:0!important;}.p5{padding:5px!important;}.p10{padding:10px!important;}.p20{padding:20px!important;}.p30{padding:30px!important;}.p40{padding:40px!important;}.p50{padding:50px!important;}.p60{padding:60px!important;}.p70{padding:70px!important;}.p80{padding:80px!important;}.p90{padding:90px!important;}.p100{padding:100px!important;}.pb0{padding-bottom:0!important;}.pb10{padding-bottom:10px!important;}.pb20{padding-bottom:20px!important;}.pb30{padding-bottom:30px!important;}.pb40{padding-bottom:40px!important;}.pb50{padding-bottom:50px!important;}.pb60{padding-bottom:60px!important;}.pb70{padding-bottom:70px!important;}.pb80{padding-bottom:80px!important;}.pb90{padding-bottom:90px!important;}.pb100{padding-bottom:100px!important;}.pt0{padding-top:0!important;}.pt10{padding-top:10px!important;}.pt20{padding-top:20px!important;}.pt30{padding-top:30px!important;}.pt40{padding-top:40px!important;}.pt50{padding-top:50px!important;}.pt60{padding-top:60px!important;}.pt70{padding-top:70px!important;}.pt80{padding-top:80px!important;}.pt90{padding-top:90px!important;}.pt100{padding-top:100px!important;}.pr0{padding-right:0!important;}.pr10{padding-right:10px!important;}.pr20{padding-right:20px!important;}.pr30{padding-right:30px!important;}.pr40{padding-right:40px!important;}.pr50{padding-right:50px!important;}.pr60{padding-right:60px!important;}.pr70{padding-right:70px!important;}.pr80{padding-right:80px!important;}.pr90{padding-right:90px!important;}.pr100{padding-right:100px!important;}.pl0{padding-left:0!important;}.pl10{padding-left:10px!important;}.pl20{padding-left:20px!important;}.pl30{padding-left:30px!important;}.pl40{padding-left:40px!important;}.pl50{padding-left:50px!important;}.pl60{padding-left:60px!important;}.pl70{padding-left:70px!important;}.pl80{padding-left:80px!important;}.pl90{padding-left:90px!important;}.pl100{padding-left:100px!important;}

.plpercent{padding-left:14%!important;}
.prpercent{padding-right:14%!important;}

.op0{opacity:0;}.op10{opacity:.1;}.op20{opacity:.2;}.op30{opacity:.3;}.op40{opacity:.4;}.op50{opacity:.5;}.op60{opacity:.6;}.op70{opacity:.7;}.op80{opacity:.8;}.op90{opacity:.9;}

.bg-white{background:#fff;}
.bg-black{
	background:#1c1c1c;
}

.borderblack{border:1px solid rgba(0,0,0,.75);}



.ovrly{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	max-width:1200px;
	height:100%;
	position:absolute;
	left:0;
	right:0;
	top:0;
	margin:auto;
}


.white{color:#fff;}
.tac{text-align:center;}

.slider{
	overflow:hidden;
	display:block;
	width:100%;
	height:100vh;
	background: rgb(0,0,0); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(17,17,17,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(17,17,17,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(17,17,17,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#111111',GradientType=0 ); /* IE6-9 */
	transition:900ms;
}

.slider p{
	color:rgba(255,255,255,.25);
	text-transform:uppercase;
}

.flex-center{
	display:flex;
	align-items:center;
	justify-content:center;
}

.flex-center-column{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
}

.flex-space-center{
	display:flex;
	align-items:center;
	justify-content:space-between;
}

.slider > .centered{
	position:absolute;
	left:0;
	top:0;
	right:0;
	height:100%;
}

.tansfromTransition, .tansfromTransitionSmall{
	transition:300ms;
	transition-timing-function: ease-in;
}

#particles-js, #particles-js-blur{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:99%;
	pointer-events:none;
}

#particles-js-blur{
	filter:blur(4px);
}

.scrollme{
	content:"";
	display:block;
	width:16px;
	height:27px;
	border:1px solid rgba(255,255,255,.25);
	border-radius:15px;
	position:absolute;
	left:0;
	right:0;
	bottom:20px;
	margin:0 auto;
	z-index:2;
	background:rgba(255,255,255,.1);
	cursor:pointer;
	opacity:.5;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#131313+0,1c1c1c+9,2b2b2b+24,111111+40,000000+43,2c2c2c+58,2c2c2c+58,474747+61,666666+75,595959+88,4c4c4c+100&0.25+0,0.15+100 */
background: -moz-linear-gradient(45deg, rgba(19,19,19,0.25) 0%, rgba(28,28,28,0.24) 9%, rgba(43,43,43,0.23) 24%, rgba(17,17,17,0.21) 40%, rgba(0,0,0,0.21) 43%, rgba(44,44,44,0.19) 58%, rgba(71,71,71,0.19) 61%, rgba(102,102,102,0.18) 75%, rgba(89,89,89,0.16) 88%, rgba(76,76,76,0.15) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, rgba(19,19,19,0.25) 0%,rgba(28,28,28,0.24) 9%,rgba(43,43,43,0.23) 24%,rgba(17,17,17,0.21) 40%,rgba(0,0,0,0.21) 43%,rgba(44,44,44,0.19) 58%,rgba(71,71,71,0.19) 61%,rgba(102,102,102,0.18) 75%,rgba(89,89,89,0.16) 88%,rgba(76,76,76,0.15) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, rgba(19,19,19,0.25) 0%,rgba(28,28,28,0.24) 9%,rgba(43,43,43,0.23) 24%,rgba(17,17,17,0.21) 40%,rgba(0,0,0,0.21) 43%,rgba(44,44,44,0.19) 58%,rgba(71,71,71,0.19) 61%,rgba(102,102,102,0.18) 75%,rgba(89,89,89,0.16) 88%,rgba(76,76,76,0.15) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40131313', endColorstr='#264c4c4c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.scrollme:hover{
	opacity:1;
}

.scrollme:before{
	content:"";
	display:block;
	width:2px;
	height:5px;
	background:rgba(255,255,255,.5);
	position:absolute;
	left:0;
	right:0;
	top:4px;
	margin:0 auto;
	animation-duration: 2000ms;
	animation-iteration-count: infinite;
    animation-name: scroll;
    animation-timing-function: ease-in-out;
	border-radius: 100%;
}

.scrollme:hover #anitext{ 
	opacity: 0;
}

#anitext {
	position: absolute;
	top: 0;
	left: 150%;
	margin:auto;
	font-size: 12px;
	line-height:22px;
	white-space: nowrap;
	color:rgba(255,255,255,.5);
	font-weight:100;
	text-align:center;
	width:0;
	transition:opacity 600ms;
}

#logo{
	display:inline-block;
	height:auto;
	margin:0 0 15px;
	order:1;
	font-weight:600;
	text-align:center;
	color:#000;
	font-size:140px;
	line-height:.67;
	letter-spacing:-10px;
	width:181px;
	max-width:100%;
	animation:none;
	background:rgba(255,255,255,.65);
	text-indent:-6px;
	border-radius:3px;
	transition:300ms;
}

#logo.reverse{
	color:#fff;
	background:#000;
}

#logo:hover{
	letter-spacing:-20px;
	width:151px;
}



h1{
	color:rgba(255,255,255,.5);
	font-weight:100;
	font-size:16px;
	line-height:24px;
	font-family:"Saira Semi Condensed";
}

.slider h1{
	order:2;
}

.posabs.flex-center{
	height:100%;
}

@keyframes scroll {
	
	0% {
		top:4px;
		opacity:1;
	}
	99% {
		top:10px;
		opacity:0;
	}
	100% {
		top:10px;
		opacity:1;
	}
}

.scldtlwrapper{
	display:block;
	width:216px;
	position:absolute;
	left:-102px;
	right:0;
	margin:auto;
	padding:0 0 40px;
	opacity: 0;
	pointer-events:none;
	bottom:50%;
	transition:300ms;
	margin-bottom:-30px;
	z-index:100;
}

.scldtlwrapper>div{
	border:1px solid rgba(255,255,255,.075);
	box-shadow:0 0 10px 2px rgba(0,0,0,.5);
	padding:10px;
	border-radius:2px;
	background:rgba(255,255,255,.1);
	text-align:center;
	color:rgba(255,255,255,.5);
	font-weight:100;
	font-size:12px;
	line-height:20px;	
	background: -moz-linear-gradient(45deg, rgba(19,19,19,0.25) 0%, rgba(28,28,28,0.24) 9%, rgba(43,43,43,0.23) 24%, rgba(17,17,17,0.21) 40%, rgba(0,0,0,0.21) 43%, rgba(44,44,44,0.19) 58%, rgba(71,71,71,0.19) 61%, rgba(102,102,102,0.18) 75%, rgba(89,89,89,0.16) 88%, rgba(76,76,76,0.15) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, rgba(19,19,19,0.25) 0%,rgba(28,28,28,0.24) 9%,rgba(43,43,43,0.23) 24%,rgba(17,17,17,0.21) 40%,rgba(0,0,0,0.21) 43%,rgba(44,44,44,0.19) 58%,rgba(71,71,71,0.19) 61%,rgba(102,102,102,0.18) 75%,rgba(89,89,89,0.16) 88%,rgba(76,76,76,0.15) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, rgba(19,19,19,0.25) 0%,rgba(28,28,28,0.24) 9%,rgba(43,43,43,0.23) 24%,rgba(17,17,17,0.21) 40%,rgba(0,0,0,0.21) 43%,rgba(44,44,44,0.19) 58%,rgba(71,71,71,0.19) 61%,rgba(102,102,102,0.18) 75%,rgba(89,89,89,0.16) 88%,rgba(76,76,76,0.15) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40131313', endColorstr='#264c4c4c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.scldtlwrapper strong{
	font-weight:100;
	text-transform: uppercase;
}

.scrollme:hover .scldtlwrapper{
	pointer-events:all;
	bottom:100%;
	opacity:1;
}

#navi{
	text-align:center;
}

#navi ul{
	list-style: none;
	margin:0;
	padding:0;
}

#navi li{
	display:block;
}

#navi li:not(:last-of-type){
	border-bottom:1px dashed rgba(255,255,255,.1);
}

#navi li a{
	display:block;
	color:rgba(255,255,255,.5);
	padding:7px 10px;
	font-weight:100;
	font-size:12px;
	line-height:18px;
	text-decoration:none;
	transition:color 600ms;
}


#navi li a:hover{
	color:rgba(255,255,255,1);
}

.triangle{
	display:block;
	position:absolute;
	left:0;
	top:10%;
	right:0;
	margin:auto;
	height:80%;
	width:auto;
	opacity:.04;
	max-width:100%;
}

#imprint{
	display:block;
	position:absolute;
	left:0;
	bottom:10px;
	width:100%;
	color:rgba(255,255,255,.3);
	font-weight:100;
	padding:0 20px;
}

#imprint ul{
	display:flex;
	margin:0;
	padding:0;
	justify-content:flex-end;
	list-style:none;
}

#imprint li{
	display:block;
	position:relative;
}

#imprint li a{
	display:block;
	text-transform:uppercase;
	color:rgba(255,255,255,.3);
	padding:10px 15px;
	text-decoration:none;
	font-weight:100;
	transition:color 600ms;
}

#imprint li a:hover{
	color:rgba(255,255,255,.6);
}

#imprint li:not(:last-of-type):after{
	content:"";
	width: 0;
	height: 0;
	display:block;
	border-style: solid;
	border-width: 6px 3px 0 3px;
	border-color: #ffffff transparent transparent transparent;
	position:absolute;
	right:-3px;
	top:0;
	bottom:0;
	margin:auto;
	opacity:.15;
}

.area{
	padding:80px 0;
	overflow-x:hidden;
}

h2{
	text-align:center;
	font-weight:400;
	color:rgba(0,0,0,.75);
	font-size:16px;
	line-height:22px;
	position:relative;
}

h2:not(#logo):before{
	content:"";
	display:block;
	position:absolute;
	left:0%;
	top:0;
	width:100px;
	background:green;
	height:100%;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+50,0+100 */
	background: -moz-linear-gradient(45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	animation-duration: 4000ms;
	animation-iteration-count: infinite;
    animation-name: anishine;
    animation-timing-function: ease-in-out;
	opacity:.5;
}

h2:not(#logo):after{
	content:"";
	display:block;
	left:0;
	top:50px;
	right:0;
	margin:auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 5px 0 5px;
	border-color: #000000 transparent transparent transparent;
	position:absolute;
	opacity:.5;
}

h2 + h3{
	text-align:center;
	font-weight:300;
	color:rgba(0,0,0,.45);
	font-size:14px;
	line-height:18px;
	text-transform:uppercase;
	position:relative;
}

h2 + h3:after, h2 + h3:before{
	content:"";
	display:block;
	width:40%;
	height:1px;
	position:absolute;
	top:0;
	left:0;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
	background: -moz-linear-gradient(45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	animation-duration: 4000ms;
	animation-iteration-count: infinite;
    animation-name: aniwidth;
    animation-timing-function: ease-in-out;
}

h2 + h3:before{
	left:auto;
	right:0;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
	background: -moz-linear-gradient(45deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.posabs{
	position:absolute;
	left:0;
	right:0;
	top:0;
}

#canvas{
	opacity:.85;
}

.refs{
	display:flex;
	justify-content:space-between;
	width:100%;
	max-width:900px;
	margin:80px auto 0;
	flex-wrap:wrap;
	box-shadow:0 0 10px 0 rgba(0,0,0,.1);
	background:rgba(255,255,255,.5);
}

.refs.smaller{
	margin:20px auto 0;
	max-width:500px;
	box-shadow:0 0 10px 0 rgba(0,0,0,.03);
	background:rgba(255,255,255,.85);
	align-items: center;
}

.refs a{
	width:25%;
	margin:0 0;
	padding:15px;
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
	transition:300ms;
	color:rgba(0,0,0,1);
	text-decoration: none;
	font-weight:800;
}

.refs a .tool{
	display:block;
	white-space:nowrap;
	position:absolute;
	left:0;
	bottom:100%;
	color:rgba(0,0,0,.65);
	padding:5px;
	border-radius:4px;
	font-size:12px;
	line-height:16px;
	border:1px solid rgba(0,0,0,.05);
	pointer-events:none;
	font-weight:300;
	opacity:0;
	transition:300ms;
	box-shadow:0 0 8px 0 rgba(0,0,0,.2);
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0.5+100 */
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.75) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.75) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0.75) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#80ffffff',GradientType=0 ); /* IE6-9 */
}

.refs a:hover .tool{
	bottom:113%;
	opacity: 1;
}

.refs a:nth-of-type(4n) .tool, .refs .zerts a:nth-of-type(2n) .tool{
	left:auto;
	right:0;
}

.refs a:nth-of-type(4n) .tool:before, .refs .zerts a:nth-of-type(2n) .tool:before{
	left:auto;
	right:4px;
}

.refs a .tool:before{
	content:"";
	display:block;
	position:absolute;
	left:4px;
	bottom:-6px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 2.5px 0 2.5px;
	border-color: #000000 transparent transparent transparent;
	opacity:.25;
}

.refs a.small-ref{
	width:12.5%;
}

.refs a:hover img{
	transform:scale(.97);
}

.refs a.small-ref:hover img{
	transform:scale(1.1);
}

.refs a.small-ref:hover:after{
	background:rgba(255,255,255,.1);
}

.refs a:after{
	content:"";
	display:block;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:rgba(255,255,255,.5);
	z-index:1;
	transition:300ms;
}

.refs a:hover:after{
	background:rgba(255,255,255,.35);
}

.refs a:not(:nth-last-of-type(1)):not(:nth-last-of-type(2)):not(:nth-last-of-type(3)):not(:nth-last-of-type(4)):not(:nth-last-of-type(5)):not(:nth-last-of-type(6)):not(:nth-last-of-type(7)):not(:nth-last-of-type(8)){
	border-bottom:1px solid rgba(0,0,0,.15);
}

.refs a:not(:nth-of-type(4n)), .refs a.border-right{
	border-right:1px solid rgba(0,0,0,.15);
}

.refs a img{
	display:block;
	max-width:100%;
	height:auto;
	transition:300ms;
}

.refs .shinecontainer{
	display:block;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	overflow:hidden;
	pointer-events:none;
	z-index:5;
}

.refs .shinecontainer:before{
	content:"";
	display:block;
	position:absolute;
	left:-50%;
	top:0;
	width:50px;
	background:green;
	height:100%;
	z-index:2;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+50,0+100 */
	background: -moz-linear-gradient(45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	animation-duration: 12000ms;
	animation-iteration-count: infinite;
    animation-name: anishine2;
    animation-timing-function: ease-in-out;
	opacity:.25;
	transform:rotate(20deg);
}

.anitriangle{
	animation-iteration-count:1;
	opacity:.85;
	height:100%;
	top:0;
}

h3{
	margin:0 0 10px;
	font-weight:400;
}

p{
	font-weight:200;
	text-align: justify;
}

.refs .fadein {
	transform-origin: left center;
	transition:500ms;
	transform: rotateY(-90deg);
}

.refs .fadein.faded {
	transform:rotateY(0deg);
}

.fadein:nth-of-type(2) {transition-delay: 50ms;}
.fadein:nth-of-type(3) {transition-delay: 100ms;}
.fadein:nth-of-type(4) {transition-delay: 150ms;}
.fadein:nth-of-type(5) {transition-delay: 200ms;}
.fadein:nth-of-type(6) {transition-delay: 250ms;}
.fadein:nth-of-type(7) {transition-delay: 300ms;}
.fadein:nth-of-type(8) {transition-delay: 350ms;}

.fadein:nth-of-type(9) {transition-delay: 400ms;}
.fadein:nth-of-type(10) {transition-delay: 450ms;}
.fadein:nth-of-type(11) {transition-delay: 500ms;}
.fadein:nth-of-type(12) {transition-delay: 550ms;}
.fadein:nth-of-type(13) {transition-delay: 600ms;}
.fadein:nth-of-type(14) {transition-delay: 650ms;}
.fadein:nth-of-type(15) {transition-delay: 700ms;}
.fadein:nth-of-type(16) {transition-delay: 750ms;}

.fadein:nth-of-type(17) {transition-delay: 800ms;}
.fadein:nth-of-type(18) {transition-delay: 850ms;}
.fadein:nth-of-type(19) {transition-delay: 900ms;}
.fadein:nth-of-type(20) {transition-delay: 950ms;}
.fadein:nth-of-type(21) {transition-delay: 1000ms;}
.fadein:nth-of-type(22) {transition-delay: 1050ms;}
.fadein:nth-of-type(23) {transition-delay: 1100ms;}
.fadein:nth-of-type(24) {transition-delay: 1150ms;}

.zerts{
	display:flex;
	justify-content:space-between;
	flex-wrap: wrap;
}

.refs .zerts a{
	display:block;
	position:relative;
	width:50%;
	border:none;
	padding:20px;
}

.refs .zerts a:nth-of-type(1){
	border-bottom:1px solid rgba(0,0,0,.15);
	border-right:1px solid rgba(0,0,0,.15);
}

.refs .zerts a:nth-of-type(2){
	border-bottom:1px solid rgba(0,0,0,.15);
}

.refs .zerts a:nth-of-type(3){
	border-right:1px solid rgba(0,0,0,.15);
}

.zerts a img{
	display:block;
	max-width:100%;
	height:auto;
}

.refs .zerts a .tool{
	bottom:100%;
}

.refspop{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display:none;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,383838+100&0.65+0,0.85+0,0.85+100 */
	background: -moz-linear-gradient(top, rgba(0,0,0,0.85) 0%, rgba(56,56,56,0.85) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.85) 0%,rgba(56,56,56,0.85) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%,rgba(56,56,56,0.85) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.refspop.active{
	display:block;
}

.refspop .overlay{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display:block;
}

.popdetails{
	display:block;
	position:absolute;
	left:0;
	right:0;
	top:40px;
	margin:auto;
	border-radius:5px;
	background:rgba(255,255,255,.85);
	max-width:800px;
	max-height:90vh;
	overflow-x: hidden;
	overflow-y: auto;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.85+0,0.65+100 */
background: -moz-linear-gradient(45deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.65) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, rgba(255,255,255,0.85) 0%,rgba(255,255,255,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, rgba(255,255,255,0.85) 0%,rgba(255,255,255,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9ffffff', endColorstr='#a6ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.close-pop{
	display:block;
	position:sticky;
	top:0;
	float:right;
	font-weight:900;
	color:#000;
	padding:10px;
	text-decoration: none;
	font-size:14px;
	line-height:14px;
}

.popcontent > div:not(.showcontent){
	padding:20px 20px 10px;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
}

.popcontent .ref-opt{
	display:block;
	width:24%;
	margin:0 .5% 10px;	
	border:1px solid #ccc;
	border-radius:3px;
	background:#fff;
}

.popcontent .ref-opt:before{
	content:"";
	display:block;
	font-size:14px;
	line-height:18px;
	background-position:left 15px center;
	background-repeat:no-repeat;
	background-size:25px;
	padding:15px 20px 15px 50px;
}

.popcontent .ref-opt.ref-design:before{
	content:"Design";
	background-image:url(../img/icon-photoshop.png);
}

.popcontent .ref-opt.ref-template:before{
	content:"Template";
	background-image:url(../img/icon-html5.png);
}

.popcontent .ref-opt.ref-seo:before{
	content:"SEO";
	background-image:url(../img/icon-google.png);
}

.popcontent .ref-opt.ref-sea:before{
	content:"SEA";
	background-image:url(../img/icon-googleadwords.png);
}

.popcontent .ref-opt.ref-javascript:before{
	content:"Javascript";
	background-image:url(../img/icon-jquery.png);
}

.popcontent .ref-opt.ref-betreuung:before{
	content:"Betreuung";
	background-image:url(../img/icon-betreuung.png);
}

.popcontent .ref-opt.ref-wordpress:before{
	content:"Wordpress";
	background-image:url(../img/icon-wordpress.png);
}

.popcontent .ref-opt.ref-php:before{
	content:"PHP";
	background-image:url(../img/icon-php.png);
}

.popcontent .ref-opt.ref-opencart:before{
	content:"Open Cart";
	background-image:url(../img/icon-opencart.png);
}

.popcontent .ref-opt.ref-bootstrap:before{
	content:"Bootstrap";
	background-image:url(../img/icon-bootstrap.png);
}

.popcontent .ref-opt.ref-shopbetreuung:before{
	content:"Shop Betreuung";
	background-image:url(../img/icon-cart.png);
}

.popcontent .ref-opt.ref-ebay:before{
	content:"Ebay Betreuung";
	background-image:url(../img/icon-ebay.png);
}

.ref-headline{
	display:block;
	text-align:center;
	padding:20px 0 0;
	font-weight:600;
	font-size:18px;
	line-height:26px;
	color:#1c1c1c;
	margin:0;
}

.ref-link{
	display:block;
	width:200px;
	text-align:center;
	background:#1c1c1c;
	color:#fff;
	font-size:14px;
	line-height:18px;
	padding:10px 20px;
	margin:0 auto 20px;
	text-decoration:none;
	border-radius:3px;
	overflow:hidden;
}

.ref-link:before{
	content:"Im neuen Tab öffnen";
	display:block;
	position:absolute;
	left:0;
	pointer-events:none;
	bottom:-100%;
	width:100%;
	height:100%;
	font-size:14px;
	line-height:18px;
	padding:10px 20px;
	color:#1c1c1c;
	background:#fff;
	text-align:center;
	box-sizing:border-box;
	opacity:0;
	transition:300ms;
}

.ref-link:hover:before{
	left:0;
	bottom:0;
	opacity:1;
}

.showcontent{
	display:flex;
	justify-content: center;
	padding:20px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,1e1e1e+100 */
	background: rgb(0,0,0); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(30,30,30,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(30,30,30,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(30,30,30,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#1e1e1e',GradientType=0 ); /* IE6-9 */
	border:1px solid rgba(0,0,0,.5);
	position: relative;
}

.showcontent:before{
	content:"";
	display:block;
	width:100%;
	height:1px;
	background:rgba(255,255,255,.1);
	position:absolute;
	left:0;
	top:0;
}

.showmobile, .showdesktop{
	position:relative;
	margin:0 10px;
}

.showmobile img{
	display:block;
	width:142px;
	height:auto;
	border-radius:16px;
}

.showdesktop img{
	display:block;
	width:396px;
	height:auto;
	border-radius:16px;
}

.showmobile:after, .showdesktop:after{
	content:"";
	display:block;
	pointer-events: none;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:url(../img/smartphone.png);
	background-size: cover;
	z-index: 1;
}

.showdesktop:after{
	background:url(../img/desktop.png);
}

#about{
	background-image:url(../img/bg.jpg);
	background-size:cover;
	background-attachment:fixed;
	height:100vh;
	position:relative;
	overflow:hidden;
}

#about:before{
	content:"";
	display:block;
	position:absolute;
	top:0;
	left:50%;
	width:200%;
	height:100%;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.7+0,0.7+40,0.5+50,0.8+60,0.7+60,0.7+100 */
	background: -moz-linear-gradient(-45deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 40%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.7) 60%, rgba(0,0,0,0.7) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 40%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.7) 60%,rgba(0,0,0,0.7) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 40%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.7) 60%,rgba(0,0,0,0.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#b3000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	animation-duration: 10000ms;
	animation-iteration-count: infinite;
    animation-name: bgani;
    animation-timing-function: ease-in-out;
}

.interface{
	display:block;
	position:relative;
	padding-left:75px;
	position:absolute;
	left:0;
	right:0;
	margin:auto;
	bottom:40px;
	width:420px;
	transition:1200ms;
	opacity:0;
}

.interface.faded{
	bottom:100px;
	opacity:1;
}

.interface > svg{
	display:block;
	opacity:.25;
	height:150px;
	stroke-width:.5;
	stroke-dasharray:219px;
	stroke-dashoffset:-219px;
	transition:2400ms;
	transform:none!important;
	pointer-events:none;
}

.interface > svg.faded{
	stroke-dashoffset:0;
}

.interface .circle{
	display:block;
	width:150px;
	height:150px;
	border-radius:100%;
	border:1px solid rgba(255,255,255,.25);
	display:flex;
	align-items:center;
	justify-content:center;
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	margin:auto;
}


.interface .circle:before{
	content:"";
	display:block;
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	margin:auto;
	width:92%;
	height:92%;
	border:4px solid rgba(255,255,255,.2);
	border-radius:100%;
	border-top-color:rgba(255,255,255,0);
	border-left-color:rgba(255,255,255,0);
	border-bottom-color:rgba(255,255,255,0);
}

.circle .innercircle{
	display:block;
	width:90%;
	height:90%;
	border-radius:100%;
	border:3px solid rgba(255,255,255,.25);
	background-image:url(../img/pattern.png);
	background-size:20px;
}

.circle .innercircle:before, .skill-entry .icon:before{
	content:"";
	display:block;
	width:95%;
	height:95%;
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	margin:auto;
	border-radius:100%;
	border-top:1px solid rgba(255,255,255,.5);
	border-bottom:2px solid rgba(255,255,255,.2);
	animation-duration: 4000ms;
	animation-iteration-count: infinite;
    animation-name: rotate;
    animation-timing-function: linear;
}

.circle:hover .pyramid-gyro{
	transform:rotate(180deg) scale(.45);
}

.interface-content{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	padding:40px 20px 20px 170px;
	color:rgba(255,255,255,.5);
	font-size:16px;
	line-height:24px;
	z-index:0;
}

.interface-content small{
	font-size:12px;
	line-height:18px;
}

.interface a{
	color:rgba(255,255,255,.5);
	text-decoration:none;
	transition:color 600ms;
}

.interface a:hover{
	color:rgba(255,255,255,.9);
}

.interface-social{
	padding:0;
	margin:0;
	list-style:none;
	display:flex;
	position:absolute;
	left:175px;
	top:-2px;
}

.interface-social li{
	display:block;
}

.interface-social li a{
	display:block;
	padding:0 5px;
	font-size:18px;
	line-height:20px;
	color:rgba(255,255,255,.25);
}

@-webkit-keyframes spin {
	from { -webkit-transform: rotateY(0); }
	to { -webkit-transform: rotateY(360deg); }
}

.pyramid-gyro {
  position: absolute;
  top: 100px;
  left: 50%;
  transform:rotate(180deg) scale(.1);
  margin-top:-120px;
  margin-left: -100px;
	-webkit-perspective: 1000px;
	-webkit-perspective-origin: 50% 100px;
  opacity:0;
  transition:1200ms;
  animation-duration: 4000ms;
	animation-iteration-count: infinite;
	animation-name: flackern;
	animation-timing-function: linear;
}

.pyramid-gyro.faded{
	transform:rotate(180deg) scale(.3);
	opacity:.5;
}

.pyramid-axis {
	position: relative;
	width: 200px;
	-webkit-transform-style: preserve-3d;
  -webkit-animation: spin 16s infinite linear;
}

.pyramid-wall {
	position: absolute;
  border: 100px solid transparent;
}

.front {
  bottom: -20px;
  border-bottom: 200px solid rgba(255,255,255,0.25);
	-webkit-transform: translateZ(25px) rotateX(30deg);
}
.back {
  bottom: -20px;
  border-bottom: 200px solid rgba(255,255,255,0.25);
	-webkit-transform: translateZ(-25px) rotateY(180deg) rotateX(30deg);
}
.left {
  bottom: -20px;
  left: 75px;
  border-bottom: 200px solid rgba(200,200,200,0.25);
	-webkit-transform: rotateY(270deg) translateX(-100px) rotateX(30deg);
	-webkit-transform-origin: center left;
}
.right {
  bottom: -40px;
  right: 150px;
  border-bottom: 200px solid rgba(200,200,200,0.25);
  -webkit-transform: rotateY(-270deg) translateX(100px) rotateX(30deg);
	-webkit-transform-origin: top right;
}
.bottom {
  width: 200px;
  height: 200px;
  background: rgba(255,255,255,.7);
  -webkit-transform: rotateX(90deg) translateY(100px);
	-webkit-transform-origin: bottom center;
}
.shadow {
  position: absolute;
  top: 250px;
  width: 0;
  height: 0;
  box-shadow: 0 0 50px 100px rgba(0,0,0,0.5);
  -webkit-transform: rotateX(90deg) translateX(100px);
}

.fyi {
  position: absolute;
  top: 25px;
  right: 25px;
  width: 250px;
  color: #fff;
}
ul {
  padding: 1em 0 0 2em;
}
li {
  line-height: 24px;
}

#skills{
	color:rgba(255,255,255,.03);
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	font-size:200px;
	line-height:400px;
	text-transform:uppercase;
	margin:auto;
	display:flex;
	align-items:center;
	justify-content:center;
	pointer-events:none;
	font-weight:800;
	transition:600ms;
}



.interskills{
	display:block;
	position:absolute;
	left:5%;
	top:10%;
	font-weight:100;
	font-size:18px;
	line-height:28px;
	color:rgba(255,255,255,.5);
	width:400px;
	opacity:0;
	transition:1200ms;
}

.interskills.righterskills{
	left:auto;
	right:5%;
}

.interskills.faded{
	opacity:1;
	left:10%;
}

.interskills.righterskills.faded{
	left:auto;
	right:10%;
}

.interskills h4{
	font-weight:100;
	margin:0 0 20px;
	position:absolute;
	left:40%;
	top:0;
	font-size:14px;
	line-height:24px;
}

.interskills.righterskills h4{
	left:auto;
	right:56%;
	text-align:right;
}

.interskills > svg{
	opacity:.25;
	height:550px;
	stroke-dasharray:769px;
	stroke-dashoffset:-769px;
	transition:2400ms;
	pointer-events: none;
}

.interskills.righterskills > svg{
	transform:scaleX(-1);
}

.interskills > svg.faded{
	stroke-dashoffset:0;
}

.interskills .interface-content{
	padding:80px 40px;
}

.skill-entry{
	display:block;
	width:100%;
	margin:0 0 10px;
}


.slash{
	display:inline-block;
	width:7px;
	height:14px;
	background:rgba(255,255,255,1);
	transform:skew(-10deg);
	border:1px solid rgba(255,255,255,1);
	margin:0 2px 0 0;
	transition:600ms;
	background:rgba(255,255,255,.2);
	border:1px solid rgba(255,255,255,.25);
}

.slash.trans{
	background:rgba(255,255,255,.2);
	border:1px solid rgba(255,255,255,.25);
}

.skill-bar{
	width:215px;
	display:inline-block;
	vertical-align:top;
}

.skill-bar.started .slash:not(.trans){
	background:rgba(255,255,255,1);
	border:1px solid rgba(255,255,255,1);
}

.skill-bar p{
	font-size:12px;
	line-height:12px;
	font-weight:100;
	margin:0;
}

.righterskills .skill-bar, .righterskills .skill-bar p{
	text-align:right;
}


.skill-entry .icon{
	display:inline-block;
	width:40px;
	height:40px;
	text-align:center;
	line-height:40px;
	border:1px solid rgba(255,255,255,.25);
	border-radius:100%;
	margin:0 10px 0 0;
	background-image:url(../img/pattern.png);
	background-size:20px;
	transition:600ms;
	position:relative;
}

.righterskills .skill-entry .icon{
	margin:0 0 0 10px;
}

.skill-entry .icon img{
	display:block;
	width:30px;
	height:auto;
	margin:5px auto;
	opacity:.75;
	transition:600ms;
}

.skill-entry:hover .icon img{
	opacity:1;
}
 

.skill-entry:hover .icon{
	color:rgba(255,255,255,.85);
}

.certified{
	display:block;
	font-size:10px;
	line-height:10px;
	position:absolute;
	left:-3px;
	top:-3px;
	padding:2px;
	border-radius:100%;
	background:rgba(255,255,255,.5);
	color:#000;
}

.certified .tool{
	pointer-events:none;
	display:block;
	white-space:nowrap;
	position:absolute;
	left:0;
	bottom:70%;
	padding:3px;
	background:rgba(0,0,0,.45);
	color:#fff;
	border-radius:3px;
	transition:600ms;
	opacity:0;
	font-size:12px;
	line-height:16px;
}

.certified:hover .tool{
	bottom:110%;
	opacity:1;
}


.interexp{
	display:flex;
	align-items:center;
	padding:60px 20px 60px 20px;
	flex-direction: column;
	justify-content:space-between;
}

/* .interexp:before{
	content:"";
	display:block;
	height:1px;
	width:100%;
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	background:rgba(0,0,0,.5);
	opacity:.75;
background: rgb(0,0,0);
background: linear-gradient(61deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.5) 15%, rgba(106,106,106,1) 50%, rgba(0,0,0,0.5) 58%, rgba(0,0,0,0.25) 70%, rgba(255,255,255,1) 100%);
} */

.interexp .entry{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	width:100px;
	height:100px;
	border-radius:100%;
	border:1px solid rgba(0,0,0,.5);
	background-image:url(../img/pattern.png);
	background-size:40px;
	background-color:rgba(0,0,0,1);
}
 
.interexp .entry > img{
	display:block;
	max-width:100%;
	max-height:100%;
	border-radius:100%;
}

.interexp .entry:last-of-type{
	margin-bottom:0;
}

.interexp .entry.xs{
	width:40px;
	height:40px;
}

.interexp .entry.s{
	width:60px;
	height:60px;
}

.interexp .entry.m{
	width:90px;
	height:90px;
}

.interexp .entry.l{
	width:120px;
	height:120px;
}

.interexp .entry.xl{
	width:150px;
	height:150px;	
}

.interexp .entry:before{
	content: "";
    display: block;
    width: 90%;
    height: 90%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 100%;
    border-top: 1px solid rgba(255,255,255,.6);
    border-bottom: 2px solid rgba(255,255,255,.2);
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-name: rotate;
    animation-timing-function: linear;
}

.interexp .entry img{
	opacity:.85;
}

.interexp .entry .details{
	display:block;
	position:absolute;
	top:0;
	right:50%;
	color:rgba(0,0,0,.8);
	width:200px;
	padding:15px 15px 15px 30px;
	opacity:0;
	pointer-events:none;
	transition:600ms;
}


.interexp .entry:hover .details{
	right:110%;
	opacity:1;
}

.interexp .entry .details > svg{
	display:block;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	pointer-events: none;
	opacity:1;
	stroke-dasharray:365px;
	stroke-dashoffset:-365px;
	transition:stroke-dashoffset 600ms;
	fill:rgba(255,255,255,.9);
	z-index:1;
}

.interexp  .details > *{
	position:relative;
	z-index:2;
}


.interexp .entry:hover .details svg{
	stroke-dashoffset:0;
}

.highchart{
	display:inline-block;
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	margin: auto;
	display:flex;
	align-items:flex-start;
	justify-content:center;
	box-sizing:border-box;
	padding:5% 0 0;
	opacity:.5;
}

.highchart .container:after{
	content:"";
	display:block;
	width:255px;
	height:255px;
	position:absolute;
	left:0;
	top:-2px;
	right:0;
	bottom:0;
	margin:auto;
	border-radius:100%;
	border-top:4px solid rgba(255,255,255,.5);
	animation-duration: 4000ms;
	animation-iteration-count: infinite;
    animation-name: rotate;
    animation-timing-function: linear;
	pointer-events:none;
}

.highchart .container:before{
	content:"";
	display:block;
	position:absolute;
	left:0;
	top:-4px;
	bottom:0;
	right:0;
	margin:auto;
	width:245px;
	height:245px;
	background-image:url(../img/face.png);
	border-radius:100%;
	background-size:300px;
	background-repeat:no-repeat;
	background-position:center;
	transition:600ms;
}

.highchart .container {
	display:inline-block;
	
	
}

.highchart .container:hover{
	background-size:320px;
}

pie-chart {
	position: relative;
	display: block;
	width: 100%;
}

pie-chart .portfolio-assets-donut-chart-title {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

pie-chart .portfolio-assets-donut-chart-title > h3 {
	max-width: 130px;
	font-weight: normal;
	margin: 0;
	color: #c7c7c7;
}

pie-chart .portfolio-assets-donut-chart {
	display: flex;
	justify-content: center;
	
}

pie-chart .donut-chart-tooltip {
	display: flex;
	justify-content: center;
	align-items: center;
	white-space: normal;
	box-sizing: border-box;
	min-width: 150px;
	background-color: rgba(85,85,85,0.8);
	color: #fff;
	border-radius: 3px;
}

pie-chart .donut-chart-tooltip > i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-style: normal;
	height: 4em;
	width: 4em;
	border-radius: calc(4em/2);
	color: #fff;
	margin-right: 10px;
}

pie-chart .donut-chart-tooltip > i .point-percentage {
	font-size: 1.5em;
}

pie-chart .donut-chart-tooltip .point-name {
	display: inline-block;
	width: 10em;
	padding-right: 1.3em;
}

pie-chart .portfolio-assets-legend {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
}

pie-chart .portfolio-assets-legend li {
	display: flex;
	width: 33.333%;
}

pie-chart .portfolio-assets-legend li:nth-child(3n+2) {
	justify-content: center;
}

pie-chart .portfolio-assets-legend li:nth-child(3n+3) {
	justify-content: flex-end;
}

pie-chart .portfolio-assets-legend li:nth-child(n+4) {
	margin-top: 15px;
}

pie-chart .portfolio-assets-legend li .item-container {
	display: inline-flex;
	width: 90%;
	max-width: 20em;
}

pie-chart .portfolio-assets-legend .color-label > i {
	display: inline-block;
	height: 1em;
	width: 1em;
	margin-right: 20px;
}

pie-chart .portfolio-assets-legend .asset-details {
	position: relative;
	flex: 1;
}

pie-chart .portfolio-assets-legend .asset-details h4 {
	font-size: 1em;
	font-weight: normal;
	padding-right: 2.5em;
	margin: 0;
}

pie-chart .portfolio-assets-legend .asset-details h5 {
	font-size: 1em;
	font-weight: normal;
	color: #888;
	margin: 0;
	margin-top: 5px;
}

pie-chart .portfolio-assets-legend .asset-details .percentage {
	position: absolute;
	top: 0;
	right: 0;
	font-size: 1em;
}

.st0{stroke:#000;stroke-miterlimit:10;}


.minheight{
	min-height:calc(100vh - 210px);
}


.hardborderradius{
	position:relative;
}

.hardborderradius:after{
	content:"";
	display:block;
	position:absolute;
	left:0;
	top:0;
	pointer-events: none;
width: 0;
height: 0;
border-style: solid;
border-width: 15px 15px 0 0;
border-color: #ffffff transparent transparent transparent;
}

.iconed{
	position:relative;
	overflow:hidden;
}

.iconed:before{
	content:"";
	display:block;
	position:absolute;
	left:-30px;
	top:-40px;
	font-size:110px;
	font-family:"Font Awesome 5 Free";
	font-weight:900;
	transform:rotate(7deg);
}

.white.iconed:before{
	color:rgba(255,255,255,.05);
}

.black.iconed:before{
	color:rgba(0,0,0,.05);
}

@keyframes aniwidth {
	
	0% {
		width:0%;
		opacity:1;
	}

	100% {
		width:40%;
		opacity:0;
	}
}

@keyframes anishine {
	
	0% {
		left:0%;
	}

	100% {
		left:100%;
	}
}


@keyframes anishine2 {
	
	0% {
		left:-50%;
	}

	100% {
		left:150%;
	}
}

@keyframes bgani {
	
	0% {
		left:-100%;
	}
	
	50% {
		left:0;
	}

	100% {
		left:-100%;
	}
}

@keyframes rotate {
	
	0% {
		transform:rotate(0deg);
	}

	100% {
		transform:rotate(360deg);
	}
}

@keyframes flackern {	
	0%{opacity:.5;}
	1%{opacity:.75;}
	10%{opacity:.75;}
	11%{opacity:.5;}
	12%{opacity:.75;}
	24%{opacity:.75;}
	25%{opacity:.2;}
	26%{opacity:.5;}
	27%{opacity:.1;}
	28%{opacity:.75;}
	50%{opacity:.75}
	51%{opacity:.9}
	52%{opacity:.75}
	53%{opacity:.85}
	54%{opacity:.5}
	55%{opacity:.75}
	100% {opacity:.75}
}