/* I N D E X */

body{overflow:hidden;}

.svgfolder{
	width:100%;
	height:80%;
	margin:150px auto 0 auto;
}

#folder1,
#folder2 {
	width: 30%;
	height: 55px;
	padding:2px 0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
#folder1{float:left;margin-left:20%;}
#folder2{float:left;margin-right:20%;}
#folder3{
	width: 40%;
	height: 70px;
	position:absolute;
	bottom:55px;
	right:0;
	z-index:4;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

.linkprivat, .linkjob, .linkabfall{
	width:40%;
	height:20px;
	padding:0;
	position:absolute;
	display:block;
	text-decoration:none;
	font:13px/14px Source;
	font-weight:600;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align:center;
}
.linkprivat{
	margin-left:15%;
	top:220px;
	left:0;
	z-index:5;
	float:left;
}
.linkjob{
	margin-right:15%;
	top:220px;
	right:0;
	z-index:6;
}
.linkabfall{
	right:0;
	bottom:20px;
}
.linkprivat a,
.linkjob a,
.linkabfall a{
	color:#996b88;
}
.linkprivat a:hover,
.linkjob a:hover,
.linkabfall a:hover{
	color:#626362;
}

path{
	fill:#fff;
	stroke:#996b88;
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-miterlimit:5;
}
path:hover{stroke:#626362;}

path.privat{
	stroke-dasharray:239.5325469970703;
	animation:dash1 2s ease-out forwards;
}

@keyframes dash1{
	0%{
		stroke-dashoffset:239.5325469970703;
	}
	80%{
		stroke-dashoffset:8;
	}
	84%{
		stroke-dashoffset:25;
	}
	88%{
		stroke-dashoffset:4;
	}
	92%{
		stroke-dashoffset:8;
	}
	96%{
		stroke-dashoffset:2;
	}
	98%{
		stroke-dashoffset:4;
	}
	100%{
		stroke-dashoffset:0;
	}
}

path.job{
	stroke-dasharray:239.5325469970703;
	animation:dash2 3s ease-in-out forwards;
 }
@keyframes dash2{
	0%{
		stroke-dashoffset:239.5325469970703;
	}
	30%{
		stroke-dashoffset:239.5325469970703;
	}
	80%{
		stroke-dashoffset:8;
	}
	84%{
		stroke-dashoffset:25;
	}
	88%{
		stroke-dashoffset:4;
	}
	92%{
		stroke-dashoffset:8;
	}
	96%{
		stroke-dashoffset:2;
	}
	98%{
		stroke-dashoffset:4;
	}
	100%{
		stroke-dashoffset:0;
	}
}

polygon, line{
	fill:#fff;
	stroke:#996b88;
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-miterlimit:5;
}
polygon{
	fill:#fff;
	stroke-dasharray:170;
	animation:dash3 4s ease-in-out forwards;
}
polygon:hover,line:hover{stroke:#626362;}

@keyframes dash3{
	0%{
		stroke-dashoffset:170;
	}
	60%{
		stroke-dashoffset:170;
	}
	80%{
		stroke-dashoffset:8;
	}
	84%{
		stroke-dashoffset:25;
	}
	88%{
		stroke-dashoffset:4;
	}
	92%{
		stroke-dashoffset:8;
	}
	96%{
		stroke-dashoffset:2;
	}
	98%{
		stroke-dashoffset:4;
	}
	100%{
		stroke-dashoffset:0;
	}
}

.line1{
	stroke-dasharray:100;
	animation:dash4 4s ease-in-out forwards;
}
.line2{
	stroke-dasharray:100;
	animation:dash5 4s ease-in-out forwards;
}
.line3{
	stroke-dasharray:100;
	animation:dash6 4s ease-in-out forwards;
}

@keyframes dash4{
	0%{
		stroke-dashoffset:100;
	}
	70%{
		stroke-dashoffset:100;
	}
	100%{
		stroke-dashoffset:0;
	}
}
@keyframes dash5{
	0%{
		stroke-dashoffset:100;
	}
	80%{
		stroke-dashoffset:100;
	}
	100%{
		stroke-dashoffset:0;
	}
}
@keyframes dash6{
	0%{
		stroke-dashoffset:100;
	}
	90%{
		stroke-dashoffset:100;
	}
	100%{
		stroke-dashoffset:0;
	}
}


.abfall{
	animation:unfall 1s ease-in-out forwards;
	animation-delay:4.5s;
	transform-origin:8.534px 49.504px;
}
@keyframes unfall{
	0% {transform: rotate(0deg);}
	3% {transform: rotate(-5deg);}
	10% {transform: rotate(-10deg);}
	20% {transform: rotate(-50deg);}
	40% {transform: rotate(-80deg);}
	60% {transform: rotate(-60deg);}
	80% {transform: rotate(-80deg);}
	90% {transform: rotate(-70deg);}
	100% {transform: rotate(-80deg);}
}