.burger-icon{--burger-icon-width:22px;--burger-line-height:calc(var(--burger-icon-width) / 16);--burger-icon-gap:calc(var(--burger-icon-width) / 16 * 3.5);--burger-icon-top-padding:calc(var(--burger-icon-width) / 10);position:relative;width:var(--burger-icon-width);height:var(--burger-icon-width);transform:rotate(0deg);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transition:.5s ease-in-out;-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;cursor:pointer}@media(min-width:768px){.burger-icon{--burger-icon-width:32px}}.burger-icon span{position:absolute;left:0;display:block;height:var(--burger-line-height);width:100%;border-radius:var(--burger-line-height);background:#fff;opacity:1;transform:rotate(0deg);transition:.3s ease-in-out}.burger-icon span:first-child{top:calc(var(--burger-line-height) + var(--burger-icon-top-padding))}.burger-icon span:nth-child(2),.burger-icon span:nth-child(3){top:calc(var(--burger-line-height)*2 + var(--burger-icon-gap) + var(--burger-icon-top-padding))}.burger-icon span:nth-child(4){top:calc(var(--burger-line-height)*3 + var(--burger-icon-gap)*2 + var(--burger-icon-top-padding))}.burger-icon__open span:first-child{top:calc(var(--burger-line-height)*2 + var(--burger-icon-gap));left:50%;width:0}.burger-icon__open span:nth-child(2){transform:rotate(45deg)}.burger-icon__open span:nth-child(3){transform:rotate(-45deg)}.burger-icon__open span:nth-child(4){top:calc(var(--burger-line-height)*2 + var(--burger-icon-gap));left:50%;width:0}