/* Navigation CSS v.3.1.0 */

.topNav form, .topNav input[type=search] { display: inline-block; }
.topNav form { width: 100%; max-width: 130px; vertical-align: middle; }
.topNav input[type=search] { font-size: small; min-height: 10px; height: 30px; }
.topNav form ::placeholder { font-size: x-small; }
.topNav form { margin-left: var(--padding); }

.topNav button { margin: 0; }
.topNav { text-align: center; }
/*
.topNav nav{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(0, auto));
margin: 0 auto;
justify-content: center;
align-items: center;
text-align: center;
}test delme*/

.topNav nav{
display: inline-block;
width: auto;
margin: 0 auto;
justify-content: center;
align-items: center;
text-align: center;
}

/* fix for mobile */
 @media only screen and (max-width: 500px){
.topNav nav {
justify-content: left;
align-items: center;
text-align: left;
}
.topNav { text-align: left; }
.topNav button { margin-right: var(--padding); }
.topNav form { margin-left: 0; }
}

.dropdownMenu {
width: calc(100% - (2 * var(--bodyPadding)));
/*delme test validator error max-width: calc(900px - (2 * var(--bodyPadding)));*/
max-width: 900px;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
z-index: 999;
display: none;
}

.topNav .dropdownMenuButton { display: none; }

.dropdownMenuButton svg {
max-width: 14px;
vertical-align: middle;
fill: var(--brand) !important;
stroke: var(--c3) !important;
}


.dropdownMenuColumn {
text-align: left;
/*columns: 120px auto;*/
z-index: 2;
margin-top: var(--padding);
}
.dropdownMenuContent a { display: inline-block; }

/* fix */
.dropdownMenuContentWrapper, .dropdownMenuContent { display: inline-block;  }
.showDropdownMenu { display: block; }

.topNav nav ul, .topNav nav li {
padding: 0;
margin: 0;
display: inline;
width: auto;
list-style-type: none;
}

.topNav nav a {
padding: var(--padding);
}



.logo, .logo2{
position: relative;
border-radius: 50%;
display: inline-flex;
vertical-align: middle;
text-align: center;
padding: 1px;
border: 2px dashed color-mix(in srgb, var(--brand) 50%, transparent);
opacity: 1;
transition: transform .250s ease-in-out;
width: 60px;
}

.logo:hover, .logo2:hover{
transform: rotate(360deg);
transition: transform 1.5s ease-in-out;
}

.logo2 { width: 26px; height: 26px; }

@media (prefers-reduced-motion) {
.logo:hover, .logo2:hover{ border-color: var(--c); }
}

/* .screenReader in main.css */

/* end Navigation CSS */