/* v.1.1.2 */


.headerBannerImg {
padding-top: 10px;
display: block;
margin: 0 auto;
max-height: 120px;
margin-bottom: -30px;
position: relative;
z-index: -1;
}


.menu {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-gap: 5px;
margin: 0 auto;
justify-content: center;
}

@media (max-width: 150px) {
.menu { display: block; width: 100%;}
}

.menu a {
display: flex;
min-width: 100%;
justify-content: start;
align-content: center;
margin: 0 auto;
text-wrap: balance;
text-align: left;
/*min-height: 50px;*/
text-decoration: none;
}

/*.menu a::first-letter {
font-weight: bold;
}*/

.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); }
}