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



/*Navigation (nicht aufgeklappt) */
nav {
    width: 100%;
    height: 100%;
	z-index:2;
	max-height:0;
	overflow:hidden; 
    position: fixed;
    bottom: 0;
	-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;

}


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

		text-transform:uppercase;
		text-decoration:none;
		font:30px 'Poppins',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:100px;
		padding-left:0px;
		cursor: pointer;
	}


/* --------------------------------------------------------------*Navigation (aufgeklappt) / Animation */   
 input#nav[type="checkbox"]:checked ~ nav {
     min-height:100%;
     background-color: #fdfdfd;
}


/* -------------------------------------------------------------- Hintergrund / Navigation (aufgeklappt) */
label.nav-label:after {
        
		content: '';
		position: fixed;
        top:0px;
		right:0; 
        left:0;
		bottom:0;
		display: block;
        background-color: #fdfdfd;
		z-index: 2;
		pointer-events: none;
		opacity:0;
		-webkit-transition:opacity .3s ease;
		-moz-transition:opacity .3s ease;
		-o-transition:opacity .3s ease;
		transition:opacity .3s ease;

}


/* -------------------------------------------------------------- Hamburger BTN */
    label.nav-label span,
	label.nav-label span:before,
	label.nav-label span:after {
		content: '';
	    position: absolute;
	    display:block;
	    width: 25px;
	    height: 2px;
	    font-size: 0;
	    background-color:#292929;
		-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: 32px;
	    border-bottom-width: 32px;
	    background-clip: padding-box;
		z-index: 3;
	}


/* -------------------------------------------------------------- Hamburger BTN/X Animation*/
	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: #ff3300;
	}
	
	
	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);
	}