.app-header{position:fixed; top:0; left:0; width:100%; z-index: 80; background:var(--main-bg); border-bottom:var(--border); transition:background .25s ease;}
.app-header__row{min-height:3rem;}
.app-header__link{font:var(--title); text-transform: uppercase; position:relative; z-index:10;}

.app-header--intro{color:var(--main-bg); border-bottom:0; background:transparent}
.app-header--intro .app-header__link{color:inherit;}
.app-header__link:hover,
.app-header--intro .app-header__link:hover{color:var(--main-color-hover)}

.app-header__city, .app-header__fastlink{margin:auto;}
.app-header__city svg{width:1.125rem; height:1.125rem; fill:var(--main-color);}

.app-header--menu:after{opacity: 0; }
.app-header--menu{border-bottom:var(--border);background:var(--accent-yellow); color:var(--color-base)}
.app-header--menu .app-header__link{color:var(--color-base)}

.app-logo{display:block; text-align: center;}
.app-logo__name{display:inline-block; vertical-align: middle; max-width:100%; height:1rem;}

.menu-toggle{display:block; width:24px;  height:24px; color:inherit; position:relative; margin:auto;}
.menu-toggle:after, .menu-toggle:before{content:'';display:block;width:100%;height:2px; background:currentColor; position:absolute;left:0; right:0;top:0; bottom:0; margin:auto; transition: all .4s ease;}
.menu-toggle:after{transform: translateY(-3px)}
.menu-toggle:before{transform: translateY(3px);}
.menu-toggle.is-active:after{top:0; bottom:0;transform: translateY(0) rotate(45deg);}
.menu-toggle.is-active:before{top:0; bottom:0; transform: translateY(0) rotate(-45deg);}

.menu-primary{ position:fixed; overflow:hidden; top:0; left:0; right:0; bottom:0; width:100%; height:100%; display: flex; visibility: hidden; flex-direction: column;  justify-content:space-between;}
.menu-primary::after{ content:''; display: block; width:200vw; height:200vw; border-radius: 100%; position:absolute;  z-index:-1;  top:-100vw; left:-50vw; right:0; margin:auto; background:var(--accent-yellow); transform:scale(0); transition:transform .6s ease, color .3s linear;}
.menu-primary__content{ padding:.5rem; }
.menu-primary__footer{padding:.5rem 0; opacity: 0; transition: opacity .6s ease, transform .6s ease; transform: translateY(100px); border-top:var(--border);}
.menu-primary__nav{text-align:center;  display: flex;  flex-direction: column;}
.menu-primary__item{ display: inline-block;overflow: hidden;}
.menu-primary__link{display: inline-block;  text-transform:uppercase;  font-weight:bold;  font-size:1.5rem;  font-family: 'Montserrat', sans-serif;  color:var(--main-color);  margin-bottom:1rem; transition:transform .2s ease; transform: translateY(-300px);}
.menu-primary__link:hover{color:#fff;}
.menu-primary.is-active{visibility: visible; z-index: 79; }
.menu-primary__link:hover{color:#fff;}
.menu-primary.is-show:after{transform:scale(1)}
.menu-primary.is-show .menu-primary__link{ transform: translateY(0); visibility: visible;}
.menu-primary.is-show .menu-primary__footer{opacity: 1; transform: translateY(0); } 

.show-menu{overflow: hidden;}
.show-menu .app-badge{transform: translate(-50%, -2rem);}
.show-menu .app-badge__logo{opacity: 0;}

@media screen and (min-width:47em) {
    .app-logo__name{height:1.5rem;}
    .menu-primary__link{font-size:2rem;}
    .app-header__row{height: 3.5rem; }
}


@media screen and (min-width: 63em) {
}
@media screen and (min-width: 80em) {
    .app-header__row{height: 4rem; }
    .menu-primary__link{font-size:2.5rem;}
}

@media (max-width:64em) and (orientation: portrait)  {
    .menu-primary::after{width: 240vh; height: 240vh; top:-100px; left:50%; transform:translate(-50%, -50%) scale(0)}   
    .menu-primary.is-show:after{transform:translate(-50%, -50%) scale(1)}  
}