body > header {padding-top: 1px;padding-bottom: 1px;}
#logo {float: left; margin: 0 1em auto auto;}
@media (max-width: 576px) {
    #logo {
        float: none;
        margin: auto;
    }
}

body > main {
    padding-top: 1em;
    padding-bottom: 1em;
}

#contact-info {
    margin:0;padding:0;
    list-style-type:none;
    float:right;
    display:inline-block;
    font-size: 0.8rem;
    line-height: 2rem;
}
#contact-info li {
    position:relative;
    margin:0 20px 0 0;
    float:left;
    display:inline-block;
}
body > header > h1 { font-size: 1.7rem; }

body > header { position:relative; }
#eu-logo { position:fixed; top:0; width: 1130px; background-color: #fff; z-index: 1000; }
@media (max-width: 575px) {
    body > header {margin-top: 50px;}
}
@media (min-width: 576px) {
    #eu-logo {width: 510px;}
    body > header {margin-top: 50px;}
}
@media (max-width: 767px) {
    body>footer>ul img { width: 36px; }
}
@media (min-width: 768px) {
    #eu-logo {width: 700px;}
    body > header {margin-top: 65px;}
}
@media (min-width: 992px) {
    #eu-logo {width: 920px;}
    body > header {margin-top: 85px;}
}
@media (min-width: 1200px) {
    #eu-logo {width: 1130px;}
    body > header {margin-top: 105px;}
}

#read-button, #read-button-chat {position: fixed; width: auto; display: inline-block; margin:0; padding: 0.5em; bottom: 1em; right: 9ex; background-color: #2a608d; color: white; border-radius: 5%; z-index: 10000;}
#read-button:hover, #read-button:focus, #read-button-chat:hover, #read-button-chat:focus {background-color: #7aa3d3;}
#read-button-chat {right: 20ex; z-index: 3000000000;}

.neon-text {
    color: #333;
    text-shadow: 0 0 5px #ff005e, 0 0 10px #ff005e, 0 0 20px #ff005e, 0 0 40px #ff005e, 0 0 80px #ff005e;
    animation: glow 2.5s infinite alternate;
}
@keyframes glow {
    0% { text-shadow: 0 0 5px #ff005e, 0 0 10px #ff005e, 0 0 20px #ff005e, 0 0 40px #ff005e, 0 0 80px #ff005e; }
    100% { text-shadow: 0 0 10px #00d4ff, 0 0 20px #00d4ff, 0 0 40px #00d4ff, 0 0 80px #00d4ff, 0 0 160px #00d4ff; }
}

#index #menu-index,

#despre #menu-despre,
#despre-rapoarte #menu-despre,
#despre-echipa #menu-despre,
#despre-rapoarte #menu-rapoarte,
#despre-echipa #menu-echipa,

#servicii #menu-servicii,
#termeni #menu-termeni,

#proiecte #menu-proiecte,
#proiecte-ateliere #menu-proiecte,
#proiecte-scoala-de-vara #menu-proiecte,
#proiecte-digitalizare-pnrr #menu-proiecte,
#proiecte-gradina-senzoriala #menu-proiecte,
#proiecte-ateliere #menu-ateliere,
#proiecte-scoala-de-vara #menu-scoala-de-vara,
#proiecte-digitalizare-pnrr #menu-digitalizare-pnrr,
#proiecte-gradina-senzoriala #menu-gradina-senzoriala,

#implicare #menu-implicare,
#campanii #menu-implicare,
#campanii #menu-campanii,
#doneaza #menu-doneaza,
#feedback #menu-feedback,
#contact #menu-contact
{
    background-color: #7aa3d3;
}

#site-navigation {
    position: relative;
    margin:0 auto;
    width:100%;
    height:auto;
    display:inline-block;
    background:#2a608d;
}

#site-navigation ul {
    margin:0;padding:0;
    list-style-type:none;
    float:left;
    display:inline-block;
}
#site-navigation ul li {
    position:relative;
    margin:0 10px 0 0;
    float:left;
    display:inline-block;
}
#site-navigation li > a:after { content: ' »'; } /* Change this in order to change the Dropdown symbol */
#site-navigation li > a:only-child:after { content: ''; }
#site-navigation ul li a {
    padding:10px 20px;
    display:inline-block;
    color:white;
    text-decoration:none;
}
#site-navigation ul li a:hover, #site-navigation ul li a:focus {
    opacity:0.5;
}
#site-navigation ul li ul {
    position:absolute;
    top: 3em;
    left:-999em;
    z-index:10;
    background: #2a608d;
    float:left;
}
#site-navigation ul li ul li {
    width:100%;
    z-index:10;
    text-wrap: nowrap;
    border-bottom:1px solid rgba(255,255,255,.3);
}
#site-navigation ul li:hover ul, #site-navigation>ul>li:has(a:focus) ul {
    left:0;
}

body>footer {
    clear: both;
    border-top: 1px solid #2a608d;
    position: relative;
    background-color: #eee;
    padding-top: 1em;
}

body>footer li, body>footer p {
    font-size: 0.8em;
}
body>footer>ul {
    width: 40%;
    margin: 0 4%;
    float: left;
}
body>footer>ul>li>a { padding: 0.5em;}
#copy-info {
    margin-top: 2em;
    padding-top: 1em;
    clear: both;
    text-align: center;
    border-top: 1px solid #2a608d;
}
#eu-info {
    clear: both;
    border-top: 1px solid #2a608d;
    padding: 1em 0 0 2em;
    margin-bottom: 1em;
}
#eu-info p, #eu-info ul, #eu-info li { margin: 0; }

.error {color: red;}
dt { font-weight: bold; }
blockquote {font-style: italic;}

h2+.grid>article, p+.grid>article, .grid+article, h2+article {margin-top: 0;}
article {padding-top: calc(var(--spacing) * 2);}
.grid.max2 {grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));}
.grid article {margin-top: 0;}
.left { float: left; margin-right: 2em; }
.clear { clear: both; }
#proiecte-scoala-de-vara > main img { float: left; margin-right: 2em; }
#proiecte-scoala-de-vara > main img.right { float: right; margin-left: 1em; }
#proiecte-gradina-senzoriala > main img { height: 300px; width: auto; }
@media (max-width: 767px) {
    #proiecte-scoala-de-vara > main img,
    #proiecte-scoala-de-vara > main img.right,
    #proiecte-gradina-senzoriala > main img
    { float: none; margin: 1em 0; width: 100%; height: auto; }
}

.gallery_wrapper {
    --img-size: calc(100px - 0.5rem / 2);
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(10, var(--img-size));
    grid-template-rows: repeat(8, var(--img-size));
}
@media (max-width: 1199px) {
    .gallery_wrapper { zoom: 0.8; }
}
@media (max-width: 991px) {
    .gallery_wrapper { zoom: 0.65; }
}
@media (max-width: 767px) {
    .gallery_wrapper { display: none; }
}

.gallery_wrapper a {
    position: relative;
    filter: brightness(0.7) saturate(0.7);
    max-width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    grid-column: span 2;
    border-radius: 0.5rem;
    clip-path: path(
            "M 80 20 C 100 0 100 0 120 20 C 140 40 160 60 180 80 C 200 100 200 100 180 120 C 160 140 140 160 120 180 C 100 200 100 200 80 180 C 60 160 40 140 20 120 C 0 100 0 100 20 80 Z"
    );
    transition: filter 500ms, clip-path 500ms;
}
.gallery_wrapper img {
    max-width: 100%;
    aspect-ratio: 1;

}
.gallery_wrapper a:nth-of-type(6),
.gallery_wrapper a:nth-of-type(15),
.gallery_wrapper a:nth-of-type(25) {
    grid-column: 2 / span 2;
}
.gallery_wrapper a:nth-of-type(19) {
    grid-column: 3 / span 2;
}

.gallery_wrapper a:hover, .gallery_wrapper a:focus {
    filter: brightness(1) saturate(1.5);
    z-index: 100;
    clip-path: path(
            "M 0 0 C 100 0 100 0 200 0 C 200 50 200 50 200 80 C 200 100 200 100 200 120 C 200 150 200 150 200 200 C 100 200 100 200 0 200 C 0 150 0 150 0 120 C 0 100 0 100 0 80 Z"
    );
}

.gallery_wrapper a:not(:hover), .gallery_wrapper a:not(:focus) {
    animation: zIndexFix 500ms;
}
@keyframes zIndexFix {
    0%, 100% { z-index: 10; }
}

.stripe { text-align: center; }
.stripe li { list-style-type: none; display: inline-block; padding: 0 1em;}

article {position: relative;}
.link-up { text-align: right; margin:0; padding-left: 1em; position: absolute; bottom: 1em; right: 1em; }
.link-up a:before {content: "⇧"}

.es-message-user p { color: #fff; }