/* ---------------------------------------------- hand cursor */

.cursor, #cursor  {cursor:  url(../img/nav/cursor.cur), auto; }


/* ---------------------------------------------- canvas menu */
input#nav,label.nav-label {display:none;}


/*Navigation (aufgeklappt) */
input#nav[type=checkbox]:checked ~ nav {
    min-height: 90vh;

}

/*Navigation (nicht aufgeklappt) */
nav {
	position: absolute;
    max-width: 280px;
    max-height: 0;
    right:0;
    top: 2.5vh;
	z-index:99;
	overflow:hidden;
	-webkit-transition:max-height .30s ease,padding .30s ease;
	-moz-transition:max-height .30s ease,padding .30s ease;
	-o-transition:max-height .30s ease,padding .30s ease;
	transition:max-height .30s ease,padding .30s ease;

}


/*-----------------------------Menü *
/* Nav-Link Box. */	
nav ul {	
        position: relative;
        width:auto;  
        margin: 0;
        padding-right:60px;

}
    
/*-----------------------------Typo */

nav ul li {
    display:block;
	list-style:none;
	height:auto;    
    text-align: right;
}


nav ul li a{
    font-weight:300;
	text-transform:none;
	text-decoration:none;
	font-family:'Roboto', sans-serif;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	text-rendering:optimizeLegibility;
	-webkit-transition:color .8s ease;
	-moz-transition:color .8s ease;
	-o-transition:color .8s ease;
	transition:color .8s ease;
}


nav ul li a:hover{color:#f2961a;}   
nav ul li .active{color:#f2961a; font-weight: 500;}


nav ul li span{width: 100%; display:inline-block;}
.praxis{
    font-family:'Roboto', sans-serif; 
    font-size: 90%;
    font-weight:300;
    font-style:normal; 
    color:#f2961a;
    padding-top:5px; 
    letter-spacing:0.03em;
    
}
.line{border-top:solid rgba(10,10,10) 1pt; margin-top:25px;}



/*Dropdownmenü Hacken */
input#nav,label.nav-label {

		text-transform:uppercase;
		text-decoration:none;
		font:30px 'Roboto',sans-serif;
		-webkit-font-smoothing:antialiased;
		-moz-osx-font-smoothing:grayscale;
		text-rendering:optimizeLegibility;
		-webkit-transition:border-color .3s ease;
		-moz-transition:border-color .3s ease;
		-o-transition:border-color .3s ease;
		transition:border-color .3s ease;
	}

/*Navigation (eingeklappt) */
label.nav-label {
    position: absolute;
    display: block;
    height: 60px;
    width: 60px;
    right: 10px;
	}

/* div / Hintergrund / Navi-BTN */
label.nav-label:after {
        
		content: '';
		position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
		display: block;
		background:rgb(255,255,255);
		z-index: 98;
		pointer-events: none;
		opacity:0;
		-webkit-transition:opacity .3s ease;
		-moz-transition:opacity .3s ease;
		-o-transition:opacity .3s ease;
		transition:opacity .3s ease;
    
    

background-image:url("../img/nav/nav-mandala.svg");
background-repeat: no-repeat;
background-position: left bottom;
background-size: contain;
-webkit-background-size: contain;
-o-background-size: contain;
 }





    label.nav-label span,
	label.nav-label span:before,
	label.nav-label span:after {
		content: '';
	    position: absolute;
	    right: 0;
	    display:block;
	    width: 25px;
	    height: 2px;
	    font-size: 0;
	    background-color: rgb(10,10,10);
		-webkit-transition:background-color .3s ease;
		-moz-transition:background-color .3s ease;
		-o-transition:background-color .3s ease;
		transition:background-color .3s ease;
	}
	label.nav-label span {
	/* Abstand zwischen BTN und Text */
	    top: 0;
	    border: 22px solid transparent;
	    border-top-width: 30px;
	    border-bottom-width: 30px;
	    background-clip: padding-box;
		z-index:101;
	}

	label.nav-label span:before,
	label.nav-label span:after {
		-webkit-transition:all .3s ease;
		-moz-transition:all .3s ease;
		-o-transition:all .3s ease;
		transition:all .3s ease;
	}
	label.nav-label span:before {
		top: -9px;
	}
	label.nav-label span:after {
		bottom: -9px;
	}
	
	input#nav[type=checkbox]:checked ~ label.nav-label:after  {
		opacity:1;
	
	}
	
	input#nav[type=checkbox]:checked ~ label.nav-label span {
		background-color: transparent;
	}
	
	input#nav[type=checkbox]:checked ~ label.nav-label span:before,
	input#nav[type=checkbox]:checked ~ label.nav-label span:after {
		left: 0px;
		width: 25px;
        background-color: #f2961a;
	}
	
	input#nav[type=checkbox]:checked ~ label.nav-label span:before {
		top: 0;
		-webkit-transform: rotate(135deg);
	    -moz-transform: rotate(135deg);
	    -ms-transform: rotate(135deg);
	    -o-transform: rotate(135deg);
	    transform: rotate(135deg);
	}

	input#nav[type=checkbox]:checked ~ label.nav-label span:after {
		bottom: 0;
		-webkit-transform: rotate(-135deg);
	    -moz-transform: rotate(-135deg);
	    -ms-transform: rotate(-135deg);
	    -o-transform: rotate(-135deg);
	    transform: rotate(-135deg);
	}





/*------------------------------------------------------------------------------Typo hell, BG dunkel */
@media only screen and (max-height:970px) and (max-width:1023px){ 
nav ul li a {color:rgb(251,251,251);}
.line{border-color:#f2961a;}
label.nav-label:after {background:rgb(50,50,50); background-image:none;}
header .mandala{display: none;}

}



/*----------------------------------------------------------------------------------HOCHFORMAT */




/*--------------------------*/
@media only screen and (max-height:666px) {
input#nav[type=checkbox]:checked ~ nav {padding-top: 10px; overflow-y: auto;} 
nav {top: 60px;}
nav ul {padding-right: 50px; padding-bottom: 150px;}
nav ul li a {line-height: 40px;} 
}




/*--------------------------*/
@media only screen and (min-height:667px){
input#nav[type=checkbox]:checked ~ nav {padding-top: 30px; overflow-y: hidden;}
nav ul li a {line-height: 4vh;}
}





/*--------------------------*/
@media only screen and (min-height:1024px) and (orientation:portrait){
input#nav[type=checkbox]:checked ~ nav {padding-top: 60px;}
nav ul li a {line-height: 3.5vh;}
}

/*--------------------------*/
@media only screen and (min-width:1024px) and (orientation:landscape){
input#nav[type=checkbox]:checked ~ nav {top:6.5vh; padding-top: 0px; padding-right: 60px;}
nav ul {padding-right: 30px;}
.line{margin-top:10px;}
nav ul li a {line-height: 4.4vh;}
}