/*** TOPNAV ***/

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

.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: 120px;
z-index: 50;
margin: 0;
background: none;
background-color: rgba(255,255,255,0.85);
}

#topnav.active {
top: 0px;
height: 70px;
background: none;
background-color: rgba(255,255,255,0.85);
webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--lightgrey);
}

#logo {
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
width: 170px;
height: 170px;
padding: 0 5px;
background: url('../images/logo/logo.trans.bg.170x55.png') bottom 0px center no-repeat;
background-size: 100% 32.33%;
border-radius: 50%;
}

#logo:hover .logo-inner {
transform: scale(1.03);
transform-origin: center;
}

.logo-inner {
display: block;
width: 100%;
height: 100%;
background: url('../images/logo/logo.circle.300.png') center center no-repeat;
background-size: 100%;
}

.logo-img {
	animation-name: toggle;
	animation-duration: 0.3s;
}

.logo-full {
width: 100%;
display: block;
}

.logo-tt {
width: 100%;
display: none;
}

#topnav.active #logo {
width: 70px;
height: 70px;
background: none;
margin-top: 0px;
top: 0px;
padding: 5px;
}

#topnav.active .logo-full { display: none; }
#topnav.active .logo-tt { display: block; }

@media only screen and (max-width: 1600px) {
#topnav { height: 110px; }
#logo { width: 160px; height: 160px; background-size: 100% 34.33%; }
}

@media only screen and (max-width: 1440px) {
#topnav { height: 100px; }
#logo { width: 150px; height: 150px; background-size: 100% 36.67%; }
}

@media only screen and (max-width: 1240px) {
#topnav { height: 90px; }
#logo { width: 130px; height: 130px; background-size: 100% 34.33%; }
}

@media only screen and (max-width: 1080px) {
#topnav { height: 80px; }
#topnav.active { height: 60px; }
#logo { width: 110px; height: 110px; background-size: 100% 31.67%; }
#topnav.active #logo { width: 60px; height: 60px; }
}

@media only screen and (max-width: 768px) {
#topnav { height: 70px; }
#logo { width: 100px; height: 100px; background-size: 100% 35.33%; }
}

@media only screen and (max-width: 640px) {
#topnav { background-color: var(--white); }
#logo { background-color: var(--white); }
}

@media only screen and (max-width: 480px) {
}