#hintergrund {
    width:350px; border:0px solid red; position: absolute;
}

#svg-frame {position:absolute; width:350px; z-index: 1;}

/************************************ SLiDER **************************************/ 

    #texte h2{
		color: #3e6790;
		line-height: 3.2rem;
        font-size: 2.5rem;
        font-weight: 600;
        letter-spacing: .05rem;
        transition: all .5s;
        padding-left: 15px;
      }

    #zeiger{
    	animation-name: slide;
    	animation-duration: 30s;
    	animation-iteration-count: infinite;
  		transform-origin: 50% 50%;
        width:350px; border:0px solid black; position: absolute;

    }
    #zeiger:hover{
    	/*animation-play-state: paused;*/
    }

	#ihaus {
    	animation-name: slidehaus;
    	animation-duration: 30s;
    	animation-iteration-count: infinite;
  		transform-origin: 50% 50%;
        width:350px; border:0px solid green; position: absolute; opacity: 0;
    }
    #ihausb {
        width:350px; border:0px solid green; position: absolute; opacity: 0;
    }

    #iauto {
    	animation-name: slideauto;
    	animation-duration: 30s;
    	animation-iteration-count: infinite;
  		transform-origin: 50% 50%;
        width:350px; border:0px solid green; position: absolute; opacity: 0;
    }
    #iautob {
        width:350px; border:0px solid green; position: absolute; opacity: 0;
    }

    #iwohnw {
    	animation-name: slidewohnw;
    	animation-duration: 30s;
    	animation-iteration-count: infinite;
  		transform-origin: 50% 50%;
        width:350px; border:0px solid green; position: absolute; opacity: 0;
    }
    #iwohnwb {
        width:350px; border:0px solid green; position: absolute; opacity: 0;
    }

    #ischiff {
    	animation-name: slideschiff;
    	animation-duration: 30s;
    	animation-iteration-count: infinite;
  		transform-origin: 50% 50%;
        width:350px; border:0px solid green; position: absolute; opacity: 0;
    }
    #ischiffb {
        width:350px; border:0px solid green; position: absolute; opacity: 0;
    }

    #idoku {
    	animation-name: slidedoku;
    	animation-duration: 30s;
    	animation-iteration-count: infinite;
  		transform-origin: 50% 50%;
        width:350px; border:0px solid green; position: absolute; opacity: 0;
    }
    #idokub {
        width:350px; border:0px solid green; position: absolute; opacity: 0;
    }
	

    @keyframes slide{
    	0% {
			transform: rotate(0deg);
    	}
    	2%,20% {
			transform: rotate(72deg);
    	}
    	22%,40% {
			transform: rotate(144deg);
    	}
    	42%,60% {
			transform: rotate(216deg);
    	}
    	62%,80% {
			transform: rotate(288deg);
    	}
    	82%,100% {
			transform: rotate(360deg);
    	}
    }
    @keyframes slidehaus{
    	0% {
			opacity:1;
    	}
    	5%,20% {
			opacity:0;
		}
    	25%,40% {
			opacity:0;
		}
    	45%,60% {
			opacity:0;
    	}
    	65%,80% {
			opacity:0;
    	}
    	85%,100% {
			opacity:1;
    	}
    }
    @keyframes slideauto{
    	0% {
			opacity:0;
    	}
    	5%,20% {
			opacity:1;
		}
    	25%,40% {
			opacity:0;
		}
    	45%,60% {
			opacity:0;
    	}
    	65%,80% {
			opacity:0;
    	}
    	85%,100% {
			opacity:0;
    	}
    }
    @keyframes slidewohnw{
    	0% {
			opacity:0;
    	}
    	5%,20% {
			opacity:0;
		}
    	25%,40% {
			opacity:1;
		}
    	45%,60% {
			opacity:0;
    	}
    	65%,80% {
			opacity:0;
    	}
    	85%,100% {
			opacity:0;
    	}
    }
	@keyframes slideschiff{
    	0% {
			opacity:0;
    	}
    	5%,20% {
			opacity:0;
		}
    	25%,40% {
			opacity:0;
		}
    	45%,60% {
			opacity:1;
    	}
    	65%,80% {
			opacity:0;
    	}
    	85%,100% {
			opacity:0;
    	}
    }
    @keyframes slidedoku{
    	0% {
			opacity:0;
    	}
    	5%,20% {
			opacity:0;
		}
    	25%,40% {
			opacity:0;
		}
    	45%,60% {
			opacity:0;
    	}
    	65%,80% {
			opacity:1;
    	}
    	85%,100% {
			opacity:0;
    	}
    }
    .st0:hover{
      cursor: pointer;
    }
    .st1:hover{
      cursor: pointer;
    }
	.st2:hover{
      cursor: pointer;
    }
    .st3:hover{
      cursor: pointer;
    }
	.st4:hover{
      cursor: pointer;
    }


	#clicker1on{
    	animation-name: slideclicker1;
    	animation-duration: 30s;
    	animation-iteration-count: infinite;
  		transform-origin: 50% 50%;
    }
    #clicker2on{
    	animation-name: slideclicker2;
    	animation-duration: 30s;
    	animation-iteration-count: infinite;
  		transform-origin: 50% 50%;
    }
    #clicker3on{
    	animation-name: slideclicker3;
    	animation-duration: 30s;
    	animation-iteration-count: infinite;
  		transform-origin: 50% 50%;
    }
	#clicker4on{
    	animation-name: slideclicker4;
    	animation-duration: 30s;
    	animation-iteration-count: infinite;
  		transform-origin: 50% 50%;
    }
    #clicker5on{
    	animation-name: slideclicker5;
    	animation-duration: 30s;
    	animation-iteration-count: infinite;
  		transform-origin: 50% 50%;
    }

    @keyframes slideclicker1{
    	0% {
			left:0;
    	}
    	5%,20% {
			left:-100%;
		}
    	25%,40% {
			left:-100%;
		}
    	45%,60% {
			left:-100%;
    	}
    	65%,80% {
			left:-100%;
    	}
    	85%,100% {
			left:0;
    	}
    }
	@keyframes slideclicker2{
    	0% {
			left:-100%;
    	}
    	5%,20% {
			left:0px;
		}
    	25%,40% {
			left:-100%;
		}
    	45%,60% {
			left:-100%;
    	}
    	65%,80% {
			left:-100%;
    	}
    	85%,100% {
			left:-100%;
    	}
    }
    @keyframes slideclicker3{
    	0% {
			left:-100%;
    	}
    	5%,20% {
			left:-100%;
		}
    	25%,40% {
			left:0px;
		}
    	45%,60% {
			left:-100%;
    	}
    	65%,80% {
			left:-100%;
    	}
    	85%,100% {
			left:-100%;
    	}
    }
    @keyframes slideclicker4{
    	0% {
			left:-100%;
    	}
    	5%,20% {
			left:-100%;
		}
    	25%,40% {
			left:-100%;
		}
    	45%,60% {
			left:0px;
    	}
    	65%,80% {
			left:-100%;
    	}
    	85%,100% {
			left:-100%;
    	}
    }
    @keyframes slideclicker5{
    	0% {
			left:-100%;
    	}
    	5%,20% {
			left:-100%;
		}
    	25%,40% {
			left:-100%;
		}
    	45%,60% {
			left:-100%;
    	}
    	65%,80% {
			left:0px;
    	}
    	85%,100% {
			left:-100%;
    	}
    }

    #clicker1on,#clicker2on,#clicker3on,#clicker4on,#clicker5on{
    	position: absolute;
    	left: -100%;
    	padding: 0;
        margin: 0;
    	width:100%;
        transition: all ease-out .5s;
    }
   
    #clicker1off,#clicker2off,#clicker3off,#clicker4off,#clicker5off{
    	position: absolute;
    	left: -100%;
    	width:100%; 
	    opacity: 0;
    	transition: all ease-out .5s;
        

   	}


   .t-wrap{
        width:100%;
        min-height: 50%;
        margin-bottom: 25px;
    }

    .txt-headl{
        font-family: 'Roboto Condensed Bold', sans-serif;
        flex-direction: column;
        justify-content: center; 
        text-align: center;
        font-size: 2rem;
        line-height: 2.25rem;
        font-weight: 700;
        color:#000;
        margin-top: 25px;

    }
    .txt-headl p{
        font-family: 'Roboto Condensed', sans-serif;
        font-size: 15px;
    }
   	
    #texte{

        display:flex;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        min-width:100%;
        min-height: 100px;
        padding-top: 3rem;

    }

   	#texte p{
        padding-top:15px;
        font-weight: 300;
        color:#000;
        line-height: 1.5rem;
        transition: all .5s;

   	}

    #mysvg{
        overflow: hidden;
        height: 350px;
        display: flex;
        justify-content: center;
    }

    .t-frame{
        display:flex;
        justify-content: center; 
        flex-direction:column;
    }





@media (min-width: 800px) {  

    #mysvg {
        height: 450px;
    }

    #hintergrund {
        width:450px; border:0px solid red; position: absolute;
    }

    #svg-frame {position:absolute; width:450px; z-index: 1;}

    #zeiger{
        animation-name: slide;
        animation-duration: 30s;
        animation-iteration-count: infinite;
        transform-origin: 50% 50%;
        width:450px; border:0px solid black; position: absolute;

    }

    #ihaus {
        animation-name: slidehaus;
        animation-duration: 30s;
        animation-iteration-count: infinite;
        transform-origin: 50% 50%;
        width:450px; border:0px solid green; position: absolute; opacity: 0;
    }
    #ihausb {
        width:450px; border:0px solid green; position: absolute; opacity: 0;
    }

    #iauto {
        animation-name: slideauto;
        animation-duration: 30s;
        animation-iteration-count: infinite;
        transform-origin: 50% 50%;
        width:450px; border:0px solid green; position: absolute; opacity: 0;
    }
    #iautob {
        width:450px; border:0px solid green; position: absolute; opacity: 0;
    }

    #iwohnw{
        animation-name: slidewohnw;
        animation-duration: 30s;
        animation-iteration-count: infinite;
        transform-origin: 50% 50%;
        width:450px; border:0px solid green; position: absolute; opacity: 0;
    }
    #iwohnwb{
        width:450px; border:0px solid green; position: absolute; opacity: 0;
    }
    #ischiff {
        animation-name: slideschiff;
        animation-duration: 30s;
        animation-iteration-count: infinite;
        transform-origin: 50% 50%;
        width:450px; border:0px solid green; position: absolute; opacity: 0;
    }
    #ischiffb{
        width:450px; border:0px solid green; position: absolute; opacity: 0;
    }

    #idoku {
        animation-name: slidedoku;
        animation-duration: 30s;
        animation-iteration-count: infinite;
        transform-origin: 50% 50%;
        width:450px; border:0px solid green; position: absolute; opacity: 0;
    }
    #idokub{
        width:450px; border:0px solid green; position: absolute; opacity: 0;
    }