/************* MENU ************/

.closebutton {
position: absolute;
right: calc(1em + 2px);
top: 45px;
width: 20px;
display: block;
z-index: 1051;
}

#gzo.scrolled .closebutton { top: 24px; }

a.menuclose {
width: 20px;
height: 20px;
background: url('../images/closebutton.png') center center no-repeat;
background-size: 20px;
display: block;
text-decoration: none;
font-size: 50px;
filter: grayscale(1);
}

a.menuclose:hover {
filter: grayscale(0);
}

.menover {
position: fixed;
top: 0;
z-index: 1050;
display: none;
overflow: auto;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.97);
}

.menover .menures {
position: relative;
width: calc(100% - 90px);
margin: 0 auto;
padding-right: 10px; 
top: 50px;
}

a.mrlink, a.mrlinka {
height: 44px;
font-size: 20px;
line-height: 44px;
text-align: left;
width: 100%;
display: block;
font-weight: var(--normal);
font-style: normal;
text-decoration: none;
}

a.mrlink {
color: var(--anthracite);
}
a.mrlinka {
color: var(--red);
font-weight: var(--bold);
}
.mrlist {
list-style: none;
padding-left: 0;
}
.mrlist li {
width: 100%;
text-align: center;
border-bottom: 1px solid var(--xlightgrey);
}
.mrlist li:last-child {
width: 100%;
text-align: center;
border-bottom: none
}

@media only screen and (max-width: 768px) {
.menover .menures { width: calc(100% - 80px); top: 45px; }
.closebutton { top: 39px; }
#gzo.scrolled .closebutton { top: 22px; }
}

@media only screen and (max-width: 480px) {
.menover .menures { width: calc(100% - 70px); top: 45px; }
.closebutton { right: 22px; top: 40px; }
#gzo.scrolled .closebutton { top: 21px; }
}

@media only screen and (max-width: 420px) {
.closebutton { top: 36px; }
#gzo.scrolled .closebutton { top: 19px; }
}

@media only screen and (max-width: 380px) {
.menover .menures { width: calc(100% - 30px); padding-right: 30px; }
}


/*** TOPNAV ***/

.topanchor {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
max-width: 1px;
max-height: 1px;
overflow: hidden;
}

#topnav {
position: fixed;
display: block;
top: 0px;
width: 100%;
height: auto;
z-index: 50;
margin: 0;
background-color: var(--white);
}

#topnav.active {

}

#topmain {
display: flex;
width: 100%;
padding: 1em 2em;
height: auto;
box-shadow: 0px 0px 7px 0px rgba(115,115,115,0);
}

#topnav.active #topmain {
padding: 1em 2em 0.7em;
box-shadow: 0px 0px 7px 0px var(--anthracite20)
}

.logo {
display: block;
width: 320px;
height: 95px;
overflow: hidden;
padding-right: 0px;
}

.logo img {
display: block;
width: 100%;
}

#topnav.active .logo {
padding-right: 80px;
height: 44px;
}

#menu {
display: block;
flex-grow: 1;
text-align: center;
padding-top: 58px;
}

#topnav.active #menu {
padding-top: 20px;
}

a.navlink {
font-size: 20px;
font-weight: var(--normal);
text-decoration: none;
color: var(--anthracite);
margin: 0 1em;
}

a.navlink:hover { color: var(--red); }

a.navlink.current {
font-weight: var(--bold);
color: var(--red);
}

.phone {
display: block;
width: 210px;
padding-top: 34px;
text-align: right;
}

#topnav.active .phone {
padding-top: 2px;
}

a.navphone {
display: flex;
width: 100%;
align-items: center;
text-decoration: none;
color: var(--anthracite);
text-align: left;
justify-content: right;
}

a.navphone:hover, a.navphone:hover .npt-red {
color: var(--blue);
}

a.navphone:hover .np-icon > svg > g > path {
stroke: var(--blue);
}

.np-icon {
display: block;
width: 45px;
height: auto;
margin-right: 0.5em;
}

@keyframes pulse-zoom {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

@keyframes pulse-zoom2 {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

a.navphone:hover .np-icon {
animation: pulse-zoom 0.9s 0s infinite ease-in-out;
}

#topnav.active .np-icon {
width: 32px;
}

.np-icon > svg, .menbutton > svg {
width: 100%;
display: block;
}

.np-icon > svg > g > path {
fill: var(--white);
stroke: var(--red);
transition: all .3s;
stroke-width: 0.35px;
}

.np-text {
display: block;
font-size: 0.9em;
}

.npt-red {
font-weight: var(--medium);
color: var(--red);
display: block;
font-size: 0.9em;
}

#menbutton { display: none; }

a.menbutton {
display: inline-block;
width: 24px;
height: 19px;
}

.menbutton > svg > g > path {
fill: var(--red);
transition: all .3s;
}


@media only screen and (max-width: 1280px) {
#topmain { padding: 1em; }
#topnav.active #topmain { padding: 1em 1em 0.7em; }
.logo { width: 280px; height: 83px; padding-right: 0px; }
#topnav.active .logo { padding-right: 40px; height: 44px; }
#menu { padding-top: 48px; }
a.navlink { font-size: 18px; margin: 0 0.85em; }
.phone { width: 190px; padding-top: 28px; font-size: 18px; }
#topnav.active .phone { padding-top: 4px; }
.np-icon { width: 40px; }
}

@media only screen and (max-width: 1080px) {
#menu { display: none; }
#topmain { align-items: center; }
#topnav.active #topmain { padding: 0.7em 1em 0.6em; }
.logo { width: 240px; height: 71px; padding-right: 0px; }
#topnav.active .logo { padding-right: 40px; height: 34px; }
.phone { padding-top: unset !important; flex-grow: 1; text-align: center; }
a.navphone { justify-content: center; width: fit-content; margin: 0 auto; }
.np-icon { padding-bottom: 2px; }
#menbutton { display: block; width: 24px; text-align: right; height: 19px; }
}

@media only screen and (max-width: 768px) {
.logo { width: 200px; height: 59px; padding-right: 0px; }
#topnav.active .logo { padding-right: 40px; height: 27px; }
.phone { width: 170px; font-size: 16px; }
.np-icon { width: 36px; padding-bottom: 3px; }
#topnav.active .np-icon { width: 28px; }
}

@media only screen and (max-width: 480px) {
#topmain { padding: 20px; }
#topnav.active #topmain { padding: 14px 20px 12px; }
.phone { width: 24px; text-align: right; padding-right: 24px; }
a.navphone { justify-content: right; }
a.navphone:hover .np-icon > svg > g > path { stroke: var(--red); }
.np-icon { width: 24px !important; padding-bottom: 2px; margin: 0; }
.np-text { display: none; }
}

@media only screen and (max-width: 420px) {
.logo { width: 180px; height: 53px; padding-right: 0px; }
#topnav.active .logo { padding-right: 20px; height: 27px; }
}

@media only screen and (max-width: 359px) {
.logo { width: 160px; height: 47px; padding-right: 0px; }
#topnav.active .logo { padding-right: 0px; height: 27px; }
}