/* variables
	Whith those variables we can change line-heights and margin-bottom of <spans> nad calculate so that they always cross in the middle.
	var(--burger lines-c) needs to be equal to <spans> we use to build burger.
Also when adding or removing spans lines with :nth-child(n) need to be changed, so that first and last line cross, and all those lines in the middle need to be removed.
*/
:root {
	--burger-lines-c: 3;
	--burger-margins-c: calc(var(--burger-lines-c) - 1);
	--burger-width: 1.2rem;
	--burger-lines-h: 1px;
	--burger-line-mb: 0.4rem;
	--burger-h: calc((var(--burger-lines-h) * var(--burger-lines-c)) + (var(--burger-line-mb) * var(--burger-margins-c)) - var(--burger-lines-h));
	--burger-animation-top: calc(var(--burger-h) / 2);
}


.burger-menu{
	position: relative;
	width: var(--burger-width);
    cursor: pointer;
	display: block;
}

.burger-menu span{
    background: #fff;
    display: block;
    width: var(--burger-width);
    height: var(--burger-lines-h);
    margin-bottom: var(--burger-line-mb);
    position: relative;
    top: 0;
    transition: all ease-out 0.4s;
}

header.open .burger-menu span:nth-child(2){
    width: 0;
    opacity: 0;
}

header.open .burger-menu span:nth-child(3){
    transform: rotate(45deg);
    top: calc(var(--burger-animation-top) * (-1));
}

header.open .burger-menu span:nth-child(1){
    transform: rotate(-45deg);
    top: var(--burger-animation-top);
}


.burger-menu span:last-child { margin-bottom: 0; }