@import url('https://fonts.googleapis.com/css?family=Just+Another+Hand');
.fourptext {
    position: relative;
    width:100%;
    margin-top: -2em;
}
.icons {
    margin-top:-3.5em;
}
#sechs .hochkant {
    left: 99%;
    top: 30%;
}

.slider {
	margin: 0 auto;
	margin-top: 20px;
	position: relative;
	width: 70%;
/*	height: 0;*/
	padding-bottom: 55%;
	user-select: none;
    width:100%;
    margin-bottom:15em;

}
.slider h1 {
    font-size: 7.8em;
    
}

.slider input {
		display: none;
	}

.slide {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: -1;

}


.slide .anz {
			width: inherit;
			height: inherit;
    background:#fff;
		}
.slide .schieber {
    position: relative;
    
/*
    
    left:0;
*/
    z-index:10000;
    display: inline-flex;
    top:-2em;
    
}
.bgwhite {
    background:#fff;
}

.slide .prev, .slide .next {
			width: 3%;
			position: absolute;
			bottom: -2em;
			background-color: rgba(255, 82, 82, .2);
			z-index: 99;
			transition: .45s;
			cursor: pointer;
			text-align: center;
		}
.slide .next {
    left: 12em;
    position:relative;
    display: inline-flex;
		}
.slide .next h4 {
    position:absolute;
    right:2em;
    color: #DE000F;
    bottom:-1.3em;
        display: inline-flex;

}
.slide .prev {
			left: -2em;
        position:relative;

		}
.slide .prev h4 {
    position:absolute;
    left:2em;
    color: #DE000F;
    bottom:-1.3em;
        display: inline-flex;

}

.slide .prev:hover, .slide  .next:hover {
			transition: .3s;
			background-color: rgba(255, 82, 82, .8);

		}

.slide .prev span, .slide .next span {
			position: absolute;
			width: 0px;
			height: 0px;
			border: solid 10px;
			top: 50%;
			transform: translateY(-50%);
		}

.slide .prev span {
			border-color: transparent;
/*			right: 35%;*/
		}
.slide .next span {
			border-color: transparent;
/*			left: 35%;*/
		}
	

.slider #nav_slide {
		width: 100%;
/*		bottom: 1em;*/
		height: 11px;
		position: absolute;
		text-align: center;
		z-index: 99;
		cursor: default;
        top:20em;
}
.slider #nav_slide2 {
		width: 100%;
		height: 11px;
		position: relative;
		z-index: 99;
		cursor: default;
        margin-left:5em;
        top:-40px;
}

#nav_slide .dots {
        top: 18px;
		width: 24.5%;
    	height: 2px;
        padding:0px;margin:0px;
		position: relative;
	    display: inline-block;
		background-color: #cccccc;
		transition: .4s;
		cursor: pointer;
		}
#nav_slide2 .doties {
        padding:0px;
    	width: 80px;
	    height: 70px;
        position: relative;
		display: inline-block;
        text-align: left;
		transition: .4s;
		cursor: pointer;

		}
		
#dot1:hover {background: #CCCCCC;}
#dot2:hover {background: #CCCCCC;}
#dot3:hover {background: #CCCCCC;}
#dot4:hover {background: #CCCCCC;}

#i1:checked ~ #nav_slide #dot1 {background: #DE000F;}
#i2:checked ~ #nav_slide #dot2 {background: #DE000F;}
#i3:checked ~ #nav_slide #dot3 {background: #DE000F;}
#i4:checked ~ #nav_slide #dot4 {background: #DE000F;}


#dotie1 {background-image: url(../img/Slidericon1Grau.svg);}
#dotie2 {background-image: url(../img/Slidericon2Grau.svg);}
#dotie3 {background-image: url(../img/Slidericon3Grau.svg);}
#dotie4 {background-image: url(../img/Slidericon4Grau.svg);}




#dotie1:hover {
    background-image: url(../img/Slidericon1Rot.svg);
    position: relative;
    width:80px;
    top:-17px;

}
#dotie2:hover {
    background-image: url(../img/Slidericon2Rot.svg);
    position: relative;
    width:80px;
    top:-17px;

}
#dotie3:hover {
    background-image: url(../img/Slidericon3Rot.svg);
    position: relative;
    width:80px;
    top:-17px;

}
#dotie4:hover {
    background-image: url(../img/Slidericon4Rot.svg);
    position: relative;
    width:80px;
    top:-17px;

}


#i1:checked ~ #nav_slide2 #dotie1 {
    background-image: url(../img/Slidericon1Rot.svg);
    position: relative;
    width:80px;
    top:-17px;

}
#i2:checked ~ #nav_slide2 #dotie2 {
    background-image: url(../img/Slidericon2Rot.svg);
    position: relative;
    width:80px;
    top:-17px;
}
#i3:checked ~ #nav_slide2 #dotie3 {
    background-image: url(../img/Slidericon3Rot.svg);
    position: relative;
    width:80px;
    top:-17px;

}
#i4:checked ~ #nav_slide2 #dotie4 {
    background-image: url(../img/Slidericon4Rot.svg);
    position: relative;
    width:80px;
    top:-17px;

}


#i1:checked ~ #one,
#i2:checked ~ #two,
#i3:checked ~ #three,
#i4:checked ~ #four {
	z-index: 9;
	animation: scroll 0.5s ease-in-out;
}



@keyframes scroll {
	0% { opacity: .4;}
	100% { opacity: 1;}
}