.burger-wrapper {
 position:relative;
 overflow:hidden;
}

.burger-backpane {
 position:fixed;
 top:0;
 right:0;
 bottom:0;
 left:0;
 z-index:1;

 background-color:rgba(255,255,255,0);
 transition:background-color 200ms ease-in-out;

 cursor:pointer;
 pointer-events:none;
}

.burger-wrapper.active .burger-backpane,
.burger-wrapper.sleep .burger-backpane {
 background-color:rgba(255,255,255,.5);
 pointer-events:all;
}

.burger-wrapper.sleep .burger-backpane {
 transition:background-color 20ms ease-in;
 cursor:progress;
}

aside.burger {
 position:absolute;
 top:0;
 bottom:0;
 left:0;
 width:360px;
 transform:translateX(-100%);
 transition:transform 200ms ease-in;
 z-index:2;
}

.burger-wrapper.active aside.burger {
 transform:translateX(0);
 transition:transform 200ms ease-out;
}

.burger-navigation {
 width:360px;
 height:100%;
 padding:115px 44px 44px;
 background:var(--mid-blue);
 color:white;
 box-sizing:border-box;
}

.burger-navigation ul {
 margin:0;
 padding:0;
 list-style:none;
 border-bottom:2px solid white;
}

.burger-navigation ul ul {
 border-bottom:none;
}

.burger-navigation li {
 margin:0;
 padding:0;
 list-style:none;
 min-height:52px;
 border-top:2px solid white;
}

.burger-navigation .link,
.burger-navigation .toggle-button {
 display:flex;
 align-items:center;
 justify-content:space-between;
 width:100%;
 min-height:52px;
 padding:0 4px;
 color:white;
 font-size:inherit;
 border:none;
 background:none;
 appearance:none;
 cursor:pointer;
 outline:0;
}

.burger-navigation a {
 display:block;
 color:white;
 text-decoration:none;
}

.burger-navigation ul ul {
 overflow:hidden;
 max-height:0;
 transition:max-height 200ms;
}

.burger-navigation ul li.open > ul {
 max-height:1000px;
 transition:max-height 200ms;
}

.burger-navigation ul ul .link {
 padding-left:36px;
}

.off-button {
 margin:0;
 border:none;
 padding:0;

 position:absolute;
 top:22.5px; 
 width:45px;
 height:45px;
 
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 appearance:none;
 cursor:pointer;
 z-index:3;
}

div.logoConfig {
 position:absolute;
 left:250px;
 top:29px;
}

div.logoHome {
 position:absolute;
 left:288px;
 top:29px;
}

.off-menu-button {
 left:40px;

 color:white;
 background:var(--mid-blue);
}

.off-menu-button .bar {
 width:30px;
 height:3px;
 margin:2.5px;
 background:white;
 transition:margin-left 200ms, margin-right 200ms, transform 200ms, opacity 200ms ease-in-out;
 opacity:1;
}

.burger-wrapper:not(.active) .off-menu-button:hover .bar:nth-of-type(1) {
 margin-left:10px;
}

.burger-wrapper:not(.active) .off-menu-button:hover .bar:nth-of-type(3) {
 margin-right:10px;
}

.burger-wrapper.active .off-menu-button .bar:nth-of-type(1) {
 transform:rotate(45deg) translateY(-4px);
 transform-origin:0 100%;
}

.burger-wrapper.active .off-menu-button .bar:nth-of-type(2) {
 opacity:0;
}

.burger-wrapper.active .off-menu-button .bar:nth-of-type(3) {
 transform:rotate(-45deg) translateY(4px);
 transform-origin:0 0;
}

.off-lang-button {
 border:2px solid var(--mid-blue);
 border-radius:var(--global-border-radius);
 
 right:40px;
 width:41px;
 height:41px;

 color:var(--mid-blue);
 background:white;
 font-size:18px;
 text-decoration:none;
}

.burger-navigation .toggle-subnav {
 display:flex;
 justify-content:center;
 align-items:center;
 width:24px;
 height:24px;
 padding:0;
 border-radius:100%;
 text-align:center;
 border:none;
 background:white;
 color:var(--mid-blue);
 transition:.2s;
 cursor:pointer;
}

.burger-navigation .toggle-subnav .arrow {
 display:block;
 width:24px;
 height:24px;
 line-height:21px;
 font-size:24px;
 text-align:center;
 transition:transform 150ms;
}

.burger-navigation .open > .toggle-button .toggle-subnav .arrow {
 transform:rotate(90deg);
}

.burger-content {
 transform:translateX(0);
 transition:transform 200ms ease-in;
}

.burger-wrapper.active .burger-content {
 transform:translateX(360px);
 transition:transform 200ms ease-out;
}