@charset "utf-8";
/* CSS Document */
    .Nav_Stamm{
        position: relative;
        top: 0px;
		margin: 0px auto;
		text-align: center;
        padding: 0;
  	    -moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
        width: 100%;
    }

	.Nav_Root {
        --Poswidth: 100px;
        --Posheight: 100px;
        --Poswidth_close: 70px;
        --Posheight_close: 70px;
		list-style: none;
		position: relative;
		display: inline-block;
        background-color: #f7f7f7;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));
        background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7); 
        background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7); 
        background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7); 
        background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7); 
        color: #a7a7a7;
        width: var(--Poswidth);
        height: var(--Posheight);
        border-radius: 50%;
        box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
        margin-right: 25px;
        margin-left: 25px;
        margin-bottom: 50px;
        z-index: 2;
        -webkit-transition: all 2s linear;
        -moz-transition: all 2s linear;
        -ms-transition: all 2s linear;
       -o-transition: all 2s linear;
       transition: all 2s linear;
	}
    .Nav_Root:before {
      content: "";
      display: block;
      background: #fff;
      border-top: 2px solid #ddd;
      position: absolute;
      top: -10px;
      left: -10px;
      bottom: -10px;
      right: -10px;
      z-index: -1;
      border-radius: 50%;
      box-shadow: inset 0px 8px 48px #ddd;
    }


	@-moz-keyframes rotate {
		0% {transform: rotate(0deg);}
		100% {transform: rotate(-360deg);}
	}

	@-webkit-keyframes rotate {
		0% {transform: rotate(0deg);}
		100% {transform: rotate(-360deg);}
	}

	@-o-keyframes rotate {
		0% {transform: rotate(0deg);}
		100% {transform: rotate(-360deg);}
	}

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

	.round, .round_mobil {
		display: flex;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		padding-top: 30px;		
		text-decoration: none;		
		text-align: center;
		font-size: 25px;		
		text-shadow: 0 1px 0 rgba(255,255,255,.7);
		letter-spacing: -.065em;
		font-family: "Hammersmith One", sans-serif;		
		-webkit-transition: all .25s ease-in-out;
		-o-transition: all .25s ease-in-out;
		-moz-transition: all .25s ease-in-out;
		transition: all .25s ease-in-out;
		box-shadow: 2px 2px 7px rgba(0,0,0,.2);
		border-radius: 300px;
		border-width: 2px;
		border-style: solid;
        margin: 0;
        padding: 0;
  	    -moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        z-index: 3;
	}
	.round:hover {
		width: 130%;
		height: 130%;
		left: -15%;
		top: -15%;
		font-size: 33px;
		-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
		-o-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
		-moz-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
		box-shadow: 5px 5px 10px rgba(0,0,0,.3);
		border-size: 10px;
		-webkit-transform: rotate(-360deg);
		-moz-transform: rotate(-360deg);
		-o-transform: rotate(-360deg);
		transform: rotate(-360deg);
	}

    .round_mobil:hover{

    }

	a.green {
        opacity: 0.9;
		background-color: rgba(255,255,255,0.00);
		color: rgba(0,63,71,1);
		border-color: rgba(255,255,255,1);
        margin: 0;
        padding: 0;
  	    -moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
	}

	a.green:hover {
		color: ghostwhite;
	}

	.round span.round, .round_mobil span.round_mobil {
		opacity: 0;
		-webkit-transition: all .5s ease-in-out;
		-moz-transition: all .5s ease-in-out;
		-o-transition: all .5s ease-in-out;
		transition: all .5s ease-in-out;
		font-size: 1px;
		border: none;
		color: black;
        margin: 0;
        padding: 5px;
  	    -moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
	}

	.round span:hover, .round_mobil span:hover {
		opacity: .85;
		font-size: 18px;
		-webkit-text-shadow: 0 1px 1px rgba(0,0,0,.5);
		-moz-text-shadow: 0 1px 1px rgba(0,0,0,.5);
		-o-text-shadow: 0 1px 1px rgba(0,0,0,.5);
		text-shadow: 0 1px 1px rgba(0,0,0,.5);	
        text-align: center;
	}

	.round div:hover, .round_mobil div:hover {
		filter: blur(15px);	
	}

	.green span {
		background: ghostwhite;	
        margin: 0;
        padding: 0;
  	    -moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
/*
-----------------TEXT UND ICON POSITIONIERUNG----------------------
*/
#Nav_Root_home{
    display: none;
}

#nav_btn_CloseButton_AufgabenKurs{
	position: relative;
	display: block;
	height: 90px;
	width: 90px;
	background: url(../img/close_black.png);
	background-repeat: no-repeat;
	background-size: 50px 50px;
	background-position: center center;
	cursor: pointer;
}

#nav_btn_home{
	position: relative;
	display: block;
	height: 90px;
	width: 90px;
	background: url(../img/Icon_home_black.png);
	background-repeat: no-repeat;
	background-size: 50px 50px;
	background-position: center center;
	cursor: pointer;
}

#nav_btn_news{
	position: relative;
	display: block;
	height: 90px;
	width: 90px;
	background: url(../img/Icon_News_black.png);
	background-repeat: no-repeat;
	background-size: 50px 50px;
	background-position: center center;
	cursor: pointer;
}


#nav_btn_links{
	position: relative;
	display: block;
	height: 90px;
	width: 90px;
	background: url(../img/Icon_Links_black.png);
	background-repeat: no-repeat;
	background-size: 50px 50px;
	background-position: center center;
	cursor: pointer;
}

#nav_btn_bilder{
	position: relative;
	display: block;
	height: 90px;
	width: 90px;
	background: url(../img/Icon_Bilder_black.png);
	background-repeat: no-repeat;
	background-size: 50px 50px;
	background-position: center center;
	cursor: pointer;
}
#nav_btn_bio{
	position: relative;
	display: block;
	height: 90px;
	width: 90px;
	background: url(../img/Icon_Bio_black.png);
	background-repeat: no-repeat;
	background-size: 50px 50px;
	background-position: center center;
	cursor: pointer;
}
#nav_btn_kurse{
	position: relative;
	display: block;
	height: 90px;
	width: 90px;
	background: url(../img/Icon_Kurse_black.png);
	background-repeat: no-repeat;
	background-size: 50px 50px;
	background-position: center center;
	cursor: pointer;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
#nav_btn_aufgabe{
	position: relative;
	display: block;
	height: 90px;
	width: 90px;
	background: url(../img/Icon_Aufgaben_black.png);
	background-repeat: no-repeat;
	background-size: 50px 50px;
	background-position: center center;
	cursor: pointer;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.nav_label{
    display: block;
    width: 140px;
    text-transform: uppercase;
    position: absolute;
	height: auto;
	text-align: center;
	vertical-align: text-top;
	font-family: 'Istok Web', sans-serif;
	font-size: 14px;
    left: calc(50% - 70px);
    top: calc(100% + 15px);
	-webkit-transition: left 3s ease;
	-moz-transition: left 3s ease;
	-o-transition: left 3s ease;
	-ms-transition: left 3s ease;
	transition: left 3s ease;
	color: rgba(255,255,255,.5);
	text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
}

.nav_pic{
	-webkit-transition: left 2s ease;
	-moz-transition: left 2s ease;
	-o-transition: left 2s ease;
	-ms-transition: left 2s ease;
	transition: left 2s ease;
}

#nav_btn_CloseButton_AufgabenKurs.on,#nav_btn_home.on, #nav_btn_news.on, #nav_btn_links.on, #nav_btn_bilder.on, #nav_btn_bio.on, #nav_btn_kurse.on, #nav_btn_aufgabe.on, #Nav_Root_home label.on, #Nav_Root_news label.on, #Nav_Root_links label.on, #Nav_Root_bilder label.on, #Nav_Root_bio label.on, #Nav_Root_kurse label.on, #Nav_Root_aufgabe label.on{
    filter: blur(5px);
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
}

#Nav_Root_home{
    display: none;
}
/*
---------------------------------------------------------------------------------------
animation: transfer_btn_aufgabe 1.5s infinite;
---------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------
----------------- NEWS PULS ANIMATION  ------------------------------------------------
---------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------
*/
#nav_btn_Contain_news.on {
    animation: ring_innen 1.5s infinite;
}

#nav_btn_Contain_news.klein_impulse {
    animation: ring_return 3s infinite;
}

#Nav_Root_news.on:after {
  content: '';
  width: 30px; height: 30px;
  border-radius: 100%;
  border: 6px solid red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ring 1.5s infinite;
}

@keyframes ring {
  0% {
    width: 100%;
    height: 100%;
    opacity: 1;
  }
  100% {
    width: 200px;
    height: 200px;
    opacity: 0;
  }
}

@keyframes ring_innen {
  0% {
    border-color: red;
  }
  100% {
    border-color: white;
  }
}

@keyframes ring_return {
  0% {
    border-color: white;
  }
  100% {
    border-color: red;
  }
}




#Nav_Root_news.nonews{
        background-color: #848484;
        background-image: -webkit-gradient(linear, left top, left bottom, from(##848484), to(#E5E5E5));
        background-image: -webkit-linear-gradient(top, ##848484, #E5E5E5); 
        background-image: -moz-linear-gradient(top, ##848484, #E5E5E5); 
        background-image: -ms-linear-gradient(top, ##848484, #E5E5E5); 
        background-image: -o-linear-gradient(top, ##848484, #E5E5E5); 
        color: #E5E5E5;
        box-shadow: 0px 3px 8px #6E6E6E, inset 0px 2px 3px #848484;
}



#Nav_Root_news.nonews:before {
    content: "";
    display: block;
    background: #E6E6E6;
    border-top: 2px solid #6E6E6E;
    position: absolute;
    top: -10px;
    left: -10px;
    bottom: -10px;
    right: -10px;
    z-index: -1;
    border-radius: 50%;
    box-shadow: inset 0px 8px 48px #6E6E6E;
    cursor: not-allowed;
}
#nav_btn_news.nonews{
	position: relative;
	display: block;
	height: 90px;
	width: 90px;
	background: url(../img/Icon_News_grey.png);
	background-repeat: no-repeat;
	background-size: 50px 50px;
	background-position: center center;
	cursor: not-allowed;
}

#nav-klein-news.nonews{
	color: #585858;
}
#nav-link-bild-news.nonews{
    background-color: transparent;
	background: url(../img/Icon_News_grey.png);
	background-repeat: no-repeat;
	background-size: 35px 35px;
	background-position: center center;
    border: 2px solid #585858;
}