:host,:root{--wb-logo-wrapper-width:80px}header{background-color:#000;color:#fff}header .mainWrapper{align-items:center;display:flex;gap:2em;height:72px;justify-content:space-between;padding:17px 0}header .mainWrapper .logoWrapper a{align-items:flex-end;display:flex;justify-content:center}header .mainWrapper .logoWrapper a .brand{height:38px;width:160px}header .brand .pageWidth{align-items:center;display:flex;flex-direction:column}header .name{background-color:var(--wb-grey-15);color:#fff;padding:15px 0}header .name .pageWidth{align-items:center;display:flex;flex-direction:column}header .name h1{font-size:clamp(1.9rem,7vw,2.1rem);font-weight:400}footer{background-color:#000;color:#fff}footer .pageWidth{display:flex;flex-direction:column}footer .pageWidth .agency{align-items:center;display:flex;font-size:24px;font-size:clamp(18px,4.5vw,24px);justify-content:space-between;padding:20px 0;width:100%}footer .pageWidth .agency a{align-items:center;color:#a8a8a8;display:flex;font-size:1.2rem;padding-bottom:2px;position:relative;transition:all .3s;white-space:nowrap}footer .pageWidth .agency a img{height:100%;opacity:.6;transition:all .3s}footer .pageWidth .agency a:hover{color:#fff}footer .pageWidth .agency a:hover img{opacity:1}footer .pageWidth .agency .social{display:flex;gap:30px}footer .pageWidth .agency .social picture{height:24px;opacity:.7;transition:all .2s;width:24px}footer .pageWidth .agency .social picture:hover{opacity:1}footer .pageWidth .copyAndLegal{align-items:center;border-top:1px solid var(--wb-grey-45);display:flex;gap:20px;padding:25px 0 55px;width:100%}footer .pageWidth .copyAndLegal ul{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}footer .pageWidth .copyAndLegal ul a{color:#a8a8a8;padding-bottom:2px;position:relative;white-space:nowrap}footer .pageWidth .copyAndLegal ul a:after{background-color:#fff;bottom:0;content:"";display:block;height:1px;left:0;position:absolute;right:0;transition:all .3s;width:0}footer .pageWidth .copyAndLegal ul a:hover{color:#fff}footer .pageWidth .copyAndLegal ul a:hover:after{transition:all .3s;width:100%}@media screen and (max-width:900px){footer .pageWidth .agency{align-items:center;display:flex;flex-direction:column}footer .pageWidth .agency .social{margin-top:20px}footer .pageWidth .copyAndLegal{display:flex;flex-direction:column}footer .pageWidth .copyAndLegal .copy{display:block}}