header{background:var(--color__white);box-shadow:0 3px 6px rgb(0 0 0 / .1607843137);position:sticky;top:0;left:0;width:100%;z-index:50}header .wrapper{background:var(--color__white);display:flex;flex-flow:row wrap;align-items:center;position:relative;z-index:10;gap:30px}header .wrapper>div{display:flex;align-items:center;justify-content:center;gap:30px;flex:1 1 0%}header .wrapper>div.header__logo{padding:30px;background:var(--color__main);flex:2 1 0%}header .wrapper>div img{height:auto;max-height:120px;width:auto}header .header__button button{border-top:5px solid var(--color__main);border-bottom:5px solid var(--color__main);height:60px;width:75px;transition:var(--transition)}header .header__button button span{display:block;position:relative;height:100%;width:100%}header .header__button button span::before,header .header__button button span::after{content:"";display:block;background:var(--color__main);width:100%;height:5px;position:absolute;left:50%;transform-origin:center;transition:var(--transition)}header .header__button button span::before{top:25%;transform:translate(-50%)}header .header__button button span::after{bottom:25%;transform:translateX(-50%)}header nav{bottom:0;left:50%;transform:translateX(-50%);width:100%;transition:var(--transition)}header nav::before{content:"";position:absolute;top:0;left:50%;width:100vw;height:100%;background:var(--color__white);transform:translateX(-50%);box-shadow:0 3px 6px rgb(0 0 0 / .1607843137)}header nav.wrapper{position:absolute;z-index:5}header nav ul{padding:30px 0;display:flex;flex-flow:row wrap;justify-content:space-between;gap:30px;width:100%}header nav ul li a{font-weight:400;text-decoration:none;padding-bottom:5px;position:relative}header nav ul li a::after{bottom:0;position:absolute;left:50%;content:"";background:var(--color__blue);height:5px;border-radius:2.5px;width:0;transform:translateX(-50%);transition:var(--transition)}header nav ul li a:hover::after{width:100%}body.toggle--menu header .header__button button{border-color:#fff0}body.toggle--menu header .header__button button span::before,body.toggle--menu header .header__button button span::after{border-radius:2.5px}body.toggle--menu header .header__button button span::before{top:50%;transform:translate(-50%,-50%) rotate(45deg)}body.toggle--menu header .header__button button span::after{bottom:50%;transform:translate(-50%,50%) rotate(-45deg)}body.toggle--menu header nav{transform:translate(-50%,100%)}@media (max-width:960px){header .wrapper{gap:15px}header .wrapper>div.header__logo{padding:15px 30px}header .header__button button{border-top:4px solid var(--color__main);border-bottom:4px solid var(--color__main);height:48px;width:60px}header .header__button button span::before,header .header__button button span::after{height:4px}}@media (max-width:768px){header .wrapper>div{gap:15px}header .wrapper>div.header__logo{padding:15px}}