input[type="checkbox"]{
    display: none;
}
nav{
    background-color: rgba(16,16,16,.5);
    width: 450px;
    height: 99.8%;
    position: absolute;
    left: -450px;
    transition: all .7s;
    z-index: 1;
}
input[type="checkbox"]:checked ~ nav{
    transform: translateX(450px);
}
.label{
	/*display: block;*/
    display: inline-block;
	flex-wrap:wrap;
    padding: 15px;
    position: absolute;
    left: 1%;
    top: 1%;
    z-index: 1000;
}
/*Középső vonal megjelenése*/
.label .span{
    background: #fff;
    display:block;
    height:2px;
    width:30px;
    position:relative;
    transition: all .2s ease-out;

}
/*Alsó vonal*/
.label .span:before{
    content: '';
    transform: translateY(8px);
    background: #fff;
    display:block;
    height:100%;
    width:100%;position: absolute;
    transition: all .2s ease-out;

}

/*Felső vonal*/
.label .span:after{
    transform: translateY(-8px);
    background: #fff;
    content:"";
    display:block;
    height:100%;
    width:100%;
    position:absolute;
    transition:all .2s ease-out;
    /*top:-5px;  */

}

 /*Kattintásra a középső vonal eltűnik*/
 .input:checked ~ .label .span{
    background:transparent;
}

/*Kattintásra a középső vonal eltűnik és az alsó vonal jobb sarka felemelkedik 45fokban*/      
.input:checked ~ .label .span:before{
    transform: rotate(-45deg);
    top:0;
    background-color: #fff;

}

/*Kattintásra a középső vonal eltűnik és az feldő vonal jobb sarka lemegy 45fokban*/          
.input:checked ~ .label .span:after{
    transform: rotate(45deg);
    top:0;
    background-color: #fff;

}