/* 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-areas: "a a a a a";*/
/*grid-template-columns: repeat(4, 1fr);*/
/*grid-template-columns: repeat(auto-fill, minmax(130px, max-content));*/
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
/*grid-auto-columns: 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%;
min-height: 100%;
justify-content: start;
align-content: center;
text-transform: lowercase;
padding: 12px;
margin:0;
text-wrap: balance;
text-align: left;
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); }
}