/* html,body { height: 100%; margin: 0px; padding: 0px; } */

main {width: calc( 100vw - 100px);}

#nip1, #nip2, #nip3 {z-index:1;top:0;}
#nip1 {left: calc( -100vw + 30px );z-index:1;}
#nip2 {right: calc( -100vw + 35px );z-index:2;}
#nip3 {right: calc( -100vw + 50px );z-index:1;} /* grün */


@media screen and (max-width:1216px) {
#nip1 {left: calc( -100vw + 25px );z-index:1;}
#nip2 {right: calc( -100vw + 25px );z-index:2;}
#nip3 {right: calc( -100vw + 30px );z-index:1;} /* grün */
}

@media screen and (max-width:768px) {
#nip1 {left: calc( -100% + 10px );z-index:1;}
#nip2 {right: calc( -100% + 10px );z-index:2;}
#nip3 {right: calc( -100% + 20px );z-index:1;} /* grün */
}




/*  todo: wenn inaktiv mit toxo-klasse gesteuert 
#nip 1-3 pos nur wenn aktiv 
#nip1.arc, #nip2.arc, #nip2.kap, #nip3.kap, #nip1.int, #nip3.int {filter: brightness(200%);filter: saturate(0);}

*/


#nip1, #nip2, #nip3 {position:fixed;height:100%;
width:100%;transition: right 0.4s ease;}

#nip1 {background: rgba(220,127,127,0.9);} 
#nip1 {color:black!important;}
#nip1 a:hover {color:white;}

#nip2 {background: rgba(62,5,176,0.9)}  
#nip2 a{ color:rgba(256,256,256,0.8);} 
#nip2 a:hover {color:rgba(256,256,256,1);}

#nip3 {background: rgba(48,176,5,0.9);color:black; }  
#nip3 {color:black;} 
#nip3 a:hover {color:white;}

#nip1.hover {-webkit-box-shadow: 0px 0px 40px 5px rgba(220,127,127,0.5); 
box-shadow: 0px 0px 40px 5px rgba(220,127,127,0.5);} 
#nip2.hover {-webkit-box-shadow: 0px 0px 40px 10px rgba(62,5,176,0.3); 
box-shadow: 0px 0px 40px 5px rgba(62,5,176,0.3)} 
#nip3.hover {-webkit-box-shadow: 0px 0px 40px 5px rgba(48,176,5,0.5);
box-shadow: 0px 0px 40px 5px rgba(48,176,5,0.5);} 
#nip1.hover, #nip2.hover, #nip3.hover 
	{filter: saturate(100%);}

#nip1 a, #nip2 a, #nip3 a {font-size:40px;}
#nip1 a:hover, #nip2 a:hover, #nip3 a:hover {text-underline: none;}
#nip1 h2, #nip2 h2, #nip3 h2 {font-size:60px;text-underline: none;}

#nip1.show {left:0px;transition: all 0.1s ease;} 
#nip3.show, #nip2.show  {right:0px;transition: all 0.1s ease;} 

#nipnavigation:hover {filter: saturate(1.5);} 

nav,.wp-block-navigation{padding-top:0;display:block;}

.container.nipcontainer  {padding:80px 0 0 50px;color:white;} 

	@media screen and (max-width:992px) {
.container.nipcontainer {padding:50px 0 0 70px;color:white;}
#nip3 .container.nipcontainer {padding:20px 0 0 70px;}
#nip1 h2, #nip2 h2, #nip3 h2 {font-size:30px;text-underline: none;}
#nip1 a, #nip2 a, #nip3 a {font-size:20px;}
}

#nip-navigation img {width:150px;height:auto;}