body{
	background: #fff;
}
*{
	margin: 0;
	padding: 0;
	font-family: 'Helvetica', sans-serif;
}
a{
	text-decoration: none;
}
svg{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60vw;
	fill:#fff;
	stroke:blue;
	stroke-linecap:round;
	stroke-miterlimit:10;
	stroke-width:6px;
}
path{
	stroke-dashoffset: 300;
    stroke-dasharray: 700;
    transform-origin: center;
    transition: stroke-dashoffset 1500ms;
}

path:hover {
	/*animation: kringel 1500ms 1 ease-in-out;*/
	cursor: pointer;
	stroke-dashoffset: 1700;
}

@keyframes kringel{
	from{stroke-dashoffset: 300;}
	/*50%{stroke-dashoffset: 700;stroke-dasharray: 500;}*/
	to{stroke-dashoffset: 1700;}
}
.domain{
	position: absolute;
	left: 50%;
	top: 85%;
	transform: translateX(-50%);
	font-weight: 300;
}
.rope1, .rope2{
	position: absolute;
	transform: translateX(-50%);
	top: 0em;
	margin-top: -2em; 
	height: 70vh;
	transition: .5s, top 1000ms;
}
.rope1{
	left: 40%;
}
.rope2{
	left: 60%;
}
.rope1:hover, .rope2:hover{
	margin-top: 0em;
}
.kunst1, .kunst2{
	position: absolute;
	width: 100vw;
	height: 100vh;
	top: -100vh;
	transition: 1000ms;
}
.kunst1{
	background: #0000ff;
}
.kunst2{
	background: #ff0000;
}
.up1, .up2{
	color: #fff;
	font-size: 20px;
	position: relative;
	top: calc(100vh - 3em);
	left: 50vw;
	transform: translateX(-50%);
}
.prev1, .next1{
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	color: #fff;
	cursor: pointer;
}
.prev1{
	left: -2em;
}
.next1{
	left: calc(100% + 2em);
}
.imageContainer{
	position: relative;
	left: 50%;
	top: 45%;
	width: 70%;
	transform: translate(-50%, -50%);
}
.imageContainer .slide{
	position: absolute;
	top: 50%;
	left: 50%;
	height: 30em;
	transform: translate(-50%, -50%);
	display: none;
}
.slide img{
	height: 100%;
}

.nummer{
	position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 1em;
    color: #fff;
}

@media screen and (max-width: 600px){
	svg{width: 85vw;}
}