#toggle.invisible {
   position: absolute;
   opacity: 0;
}

.burger-menu {
   --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
   --line-width: 3rem;
   --line-height: 0.12rem;
   --line-bg: white;
   --line-radius: 10px;
   --line-gap: 0.3rem;
   --line-transition-time: 0.3s;
   position: relative;
   width: var(--line-width);
   height: calc((var(--line-gap) + var(--line-height)) * 2);
   cursor: pointer;
   outline: none;
   -webkit-tap-highlight-color: transparent;
   margin-bottom: 0;
   display: inline-block;
    vertical-align: middle;
    margin-top: -5px;
}
 .burger-menu-lines {
   width: 100%;
   height: 100%;
   display: grid;
   grid-auto-flow: row;
   gap: var(--line-gap);
   transition: var(--line-transition-time);
}
 .burger-menu-lines .line {
   position: relative;
   width: var(--line-width);
   height: var(--line-height);
}
 .burger-menu-lines .line::before, .burger-menu-lines .line::after {
   position: absolute;
   content: "";
   display: block;
   width: 100%;
   height: 100%;
   background: #333333;
   border-radius: var(--line-radius);
   transition: 1.1s var(--ease-out-expo);
}
 .burger-menu-lines .line::before {
   transform: scaleX(0);
   transform-origin: left;
}
 .burger-menu-lines .line::after {
   transform-origin: right;
   transition-delay: 0.25s;
}
 .burger-menu-lines .line:nth-child(1)::before {
   transition-delay: 0s;
}
 .burger-menu-lines .line:nth-child(1)::after {
   transition-delay: 0.25s;
}
 .burger-menu-lines .line:nth-child(2)::before {
   transition-delay: 0.1s;
}
 .burger-menu-lines .line:nth-child(2)::after {
   transition-delay: 0.35s;
}
 .burger-menu-lines .line:nth-child(3)::before {
   transition-delay: 0.2s;
}
 .burger-menu-lines .line:nth-child(3)::after {
   transition-delay: 0.45s;
}
 .btn-activate-menu3d-tgt:hover .line::before {
   transform: scaleX(1);
   transition-delay: 0.25s;
}
 .btn-activate-menu3d-tgt:hover .line::after {
   transform: scaleX(0);
   transition-delay: 0s;
}
 .btn-activate-menu3d-tgt:hover .line:nth-child(1)::before {
   transition-delay: 0.25s;
}
 .btn-activate-menu3d-tgt:hover .line:nth-child(1)::after {
   transition-delay: 0s;
}
 .btn-activate-menu3d-tgt:hover .line:nth-child(2)::before {
   transition-delay: 0.35s;
}
 .btn-activate-menu3d-tgt:hover .line:nth-child(2)::after {
   transition-delay: 0.1s;
}
 .btn-activate-menu3d-tgt:hover .line:nth-child(3)::before {
   transition-delay: 0.45s;
}
 .btn-activate-menu3d-tgt:hover .line:nth-child(3)::after {
   transition-delay: 0.2s;
}
 .burger-menu-close-icon {
   --close-icon-cross-width: 4rem;
   --close-icon-cross-height: 0.1rem;
   --close-icon-cross-color: white;
   --close-icon-cross-radius: 10px;
   --close-icon-cross-transition-time: 0.3s;
   --close-icon-cross-transition-delay: 0.1s;
   position: absolute;
   top: calc(-0.375 * var(--close-icon-cross-width));
   left: calc(-5 * var(--close-icon-cross-height));
   display: block;
   width: var(--close-icon-cross-width);
   height: var(--close-icon-cross-width);
   cursor: pointer;
   transform: scale(0) rotate(-90deg);
   pointer-events: none;
   transition: var(--close-icon-cross-transition-time) var(--close-icon-cross-transition-delay);
}
 .burger-menu-close-icon::before, .burger-menu-close-icon::after {
   position: absolute;
   content: "";
   top: 50%;
   left: 50%;
   background: var(--close-icon-cross-color);
   border-radius: var(--close-icon-cross-radius);
   transform: translate(-50%, -50%) rotate(45deg);
}
 .burger-menu-close-icon::before {
   width: 50%;
   height: var(--close-icon-cross-height);
}
 .burger-menu-close-icon::after {
   width: var(--close-icon-cross-height);
   height: 50%;
}
 #toggle:checked ~ .burger-menu .burger-menu-lines {
   transform: scale(0) rotate(90deg);
}
 #toggle:checked ~ .burger-menu .burger-menu-close-icon {
   transform: scale(1) rotate(0);
   pointer-events: auto;
}
 #toggle:checked ~ .burger-menu .burger-menu-close-icon:hover {
   transform: scale(1) rotate(180deg);
}