*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* header {
    width: 100%;
    position: relative;
    object-fit: cover;
} */

#meniu {
    width: 100%;
    position: fixed;
    top: 15em;
    z-index: 2;
}

.grid_meniu {
    display: grid;
    grid-template-columns: 5fr 20fr;
    gap: 1em;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
}

.logo_nume {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    justify-content: center;
    text-align: right;
}

.logo img {
    width: 2.5vw;
    height: auto;
}

.nume_scoala {
    font-size: 0.8em;
    text-align: center;
    width: 100%;
    color: whitesmoke;
}

.menu-bar {
    display: flex;
}

.imagine_meniu {
    position: absolute;
    width: 20vw;
    height: auto;
    margin: 0.5em auto;
    display: flex;
    top: 10%;
    left: 55%;
}

.menu-link {
    padding: 0 25px 0 25px;
    height: 50px;
    line-height: 50px;
    color: white;
    transition: background .2s, color .2s;
    position: relative;
    z-index: 1;
}

.menu-link[aria-haspopup="true"]::after {
    content: "";
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowRight.svg#light');
    background-size: 14px;
    width: 14px;
    height: 14px;
    position: absolute;
    right: 1%;
    top: 50%;
    transform: translateY(-50%);
}

.actvt[aria-haspopup="true"]::after {
    content: "";
    color: rgba(0, 0, 0, 0.511);
    background-image: rgba(0, 0, 0, 0.511);
    background-size: 14px;
    width: 14px;
    height: 14px;
    position: absolute;
    right: 1%;
    top: 50%;
    transform: translateY(-50%);
}

/*ul level2*/
.mega-menu {
    background: #ffffffcb;
    z-index: 10;
}

.mega-menu--multiLevel {
    flex-direction: column;
}

.monitor[aria-haspopup="true"] {
    /* line-height: 12px; */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* culori level 2 care raman onhover daca trecem pe nivelul 3 */
.mega-menu--multiLevel>li:hover>.color13 {
    background: linear-gradient(to right, #93b5c6, #93b5c6);
}

.mega-menu--multiLevel>li:hover>.color14 {
    background: linear-gradient(to right, #ffb4a2ff, #ffb498);
}

.mega-menu--multiLevel>li:hover>.color15 {
    background: linear-gradient(to right, #F0CF65, #F0CF66);
}

.mega-menu--multiLevel>li:hover>.color16 {
    background: linear-gradient(to right, #b5838dff, #b5838d);

}

.mega-menu--multiLevel>li:hover>.color19 {
    background: linear-gradient(to right, #DDEDAA, #DDEDAA);
}

/*a level1*/
.menu-bar-link {
    height: 65px;
    line-height: 65px;
    text-transform: uppercase;
    font-size: 1vw;
}

/* a level2*/
.mega-menu-link {
    color: rgba(0, 0, 0, 0.511);
    height: auto;
    font-weight: bolder;
}

/* a level3*/
.menu-list-link {
    color: white-smoke;

}

/* culori meniu*/
#color1 {
    background: rgba(147, 181, 198, 0.5);
    background-color: rgba(147, 181, 198, 0.5);
    background-image: linear-gradient(to right, rgba(147, 181, 198, 1), rgba(147, 181, 198, 0.5));
}

#color1 a:hover {
    background: linear-gradient(to right, #93b5c6, #93b5c7);
}

#color2 {
    background: rgba(255, 180, 162, 0.5);
    background-image: linear-gradient(to right, rgba(255, 180, 162, 1), rgba(255, 180, 162, 0.5));
}

#color2 a:hover {
    background: linear-gradient(to right, #00ADEC, #009BD4);
}

#color3 {
    background-color: rgb(221, 237, 170);
    background: rgba(221, 237, 170, 0.5);
    background-image: linear-gradient(to right, rgba(221, 237, 170, 1), rgba(221, 237, 170, 0.5));
}

#color3 a:hover {
    color: rgba(0, 0, 0, 0.511);
    background: linear-gradient(to right, rgb(221, 237, 170), #DDEDAA);
}

#color4 {
    background: rgba(240, 207, 101, 0.5);
    background-image: linear-gradient(to right, rgba(240, 207, 101, 1), rgba(240, 207, 101, 0.5));
    background-color: rgba(240, 207, 101, 0.75);
}

#color4 a:hover {
    background: linear-gradient(to right, rgb(240 207 101), #F0CF65);
}

#color5 {
    background-color: rgb(215, 129, 106);
    background: rgba(215, 129, 106, 0.5);
    background-image: linear-gradient(to right, rgba(215, 129, 106, 1), rgba(215, 129, 106, 0.5));

}

#color5 a:hover {
    background: linear-gradient(to right, #D7816A, #D7826A);

}

#color6 {
    background-color: #D1810E;
    background: rgba(209, 129, 14, 0.5);
    background-image: linear-gradient(to right, rgba(209, 129, 14, 1), rgba(209, 129, 14, 0.5));
}

#color6 a:hover {
    background: linear-gradient(to right, #EA9010, #D1810E);
}

#color18 {
    background-color: rgb(189, 79, 108);
    background: rgba(189, 79, 108, 0.5);
    background-image: linear-gradient(to right, rgba(189, 79, 108, 1), rgba(189, 79, 108, 0.5));
}

#color18 a:hover {
    background: linear-gradient(to right, rgb(189, 79, 108), rgba(189, 78, 108));
}

/* on click sau on hover pe meniul principal. Daca se vrea onclick stergem asta.*/
.menu-bar li:hover>ul {
    display: block;
}

/* descreierea meniului*/
.menu-description {
    color: #fff !important;
    font-family: Montserrat, Arial, Helvetica, sans-serif;
    display: block;
    opacity: .7;
    font-size: 12px;
    font-weight: 300 !important;
    line-height: 15px;
    padding-top: 0;
}

/* sageti inainte de scris in meniu*/
.arrow,
.arrow2 {
    display: none;
}

.mega-menu--multiLevel>li:hover .arrow,
.menu-list>li:hover .arrow2 {
    display: inline-block;
    padding-right: 2px;
}

.evaluare {}

/* ******************************* TELEFON ***************************** */
/* Extra small devices (phones, less than 640px) */
@media screen and (max-width: 640px) {
    /* ========== header ========== */

    .header {
        top: 10px
    }

    .header .menu {
        display: none;
    }

    .header .menu>ul>li .menu-subs.menu-mega>.list-item>ul>li>a {
        display: block;
    }

    h1,
    h2,
    h5 {
        text-align: center;
        font-size: 0.8em;
        /* padding: 4px; */
    }

    .header {
        background-color: rgba(0, 0, 0, 0.549);
        position: fixed;
        display: block;
        top: 0px;
        left: 0;
        width: 100%;
        height: auto;
        margin: 0 auto;
        z-index: 1;
    }

    .brand {
        font-weight: 100;
        text-align: center;
        font-size: 0.9rem;
        padding: 1em;
        border: none;
        outline: none;
        z-index: 1;
        position: fixed;
        top: 6.6rem;
        width: 15em;
        left: 7rem;
        color: whitesmoke;
    }

    .stema_meniu {
        position: fixed;
        top: 5em;
        left: 5rem;
        z-index: 1;
        width: 2.5em;
        height: auto;
        border-radius: 60px;
    }

    .header .menu>ul>li .menu-column-1 {
        width: 17%;
        margin: 3em auto;
    }

}

/* ******************************* TABLETA ***************************** */
/* Small devices (tablets, 640px and up) */
@media screen and (min-width: 641px),
handheld and (min-width: 641px) and (max-width: 980px) {
    .menu-bar {
        display: none;
    }

    .header {
        background-color: rgba(0, 0, 0, 0.549);
        position: fixed;
        display: block;
        top: 10px;
        left: 0;
        width: 100%;
        height: auto;
        margin: 0 auto;
        z-index: 1;
        padding: 1.5rem;
    }

    .brand {
        font-weight: 100;
        text-align: center;
        font-size: 0.35em;
        padding: 1em 0;
        border: none;
        outline: none;
        z-index: 9;
        position: fixed;
        top: 6em;
        width: 15rem;
        left: 10em;
        color: whitesmoke;
    }

    .stema_meniu {
        position: fixed;
        z-index: 1;
        width: 2.4rem;
        height: auto;
        left: 5rem;
        top: 5.3em;
        border-radius: 60px;
    }
}


/* ---------- MEDIA QUERIES MENU---------- */
/* ******************************* CALCULATOR *************************** */
/* Medium and large devices (desktops, 980px and up) */
@media screen and (min-width: 981px),
handheld and (min-width: 640px) {
    .menu-bar {
        display: flex;
    }

    .menu li {
        list-style-type: none;
    }

    .stema_meniu {
        position: fixed;
        z-index: 1;
        width: 2.5rem;
        height: 4rem;
        left: 2%;
        top: 1em;
        border-radius: 60px;
    }

    .brand {
        font-weight: 100;
        text-align: center;
        font-size: 1vw;
        padding: 1rem;
        color: #1a73e8;
        border: none;
        outline: none;
        z-index: 1;
        position: fixed;
        width: 16vw;
        left: 4vw;
        color: whitesmoke;
        line-height: 1.4;
    }

    .header {
        background-color: rgba(0, 0, 0, 0.549);
        position: fixed;
        display: block;
        top: 0px;
        left: 0;
        width: 100%;
        height: auto;
        margin: 0 auto;
        z-index: 1;
        padding: 0;
    }

    .meniu-mobil {
        display: none;
    }

    .meniu-mobil-p {
        /* //visibility: hidden; */
        display: block;
    }

    .menu [aria-haspopup="true"]~ul {
        display: none;
    }

    .menu-bar>li>[aria-haspopup="true"]::after {
        background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowBottom.svg#light');
    }

    .menu-bar>li {
        width: 25%;
    }

    .menu-bar>li>[aria-haspopup="true"]:hover::after {
        background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowBottom.svg#light');
    }

    .menu-bar>li>[aria-haspopup="true"]:focus~ul {
        display: flex;
        transform-origin: top;
        animation: dropdown .2s ease-out;
    }

    .menu-bar>li>[aria-haspopup="true"]~ul:hover {
        display: flex;
    }

    .menu-bar>li:focus-within>[aria-haspopup="true"]~ul {
        display: flex;
    }

    /*level1 hover - ramane selectata culoarea daca vom da hover si intram in level2*/
    .menu-bar>li>[aria-haspopup="true"]:focus,
    .menu-bar>li:focus-within>[aria-haspopup="true"],
    .menu-bar>li:hover>#color7,
    .rosu-titlu {
        padding: 0;
        background-color: rgba(147, 181, 198, 0.75);
        color: black;
    }

    #color7 .menu-list-link {
        background-color: rgba(147, 181, 198, 0.75);
    }

    .menu-bar>li>[aria-haspopup="true"]:focus,
    .menu-bar>li:focus-within>[aria-haspopup="true"],
    .menu-bar>li:hover>#color8,
    .albastru-titlu {
        background-color: #f0cf65;
    }

    .menu-bar>li>[aria-haspopup="true"]:focus,
    .menu-bar>li:focus-within>[aria-haspopup="true"],
    .menu-bar>li:hover>#color9,
    .verde-titlu {
        /* background-color:#ffb498; */
        background-color: rgba(221, 237, 170, 0.75);
        color: black;
    }

    .menu-bar>li>[aria-haspopup="true"]:focus,
    .menu-bar>li:focus-within>[aria-haspopup="true"],
    .menu-bar>li:hover>#color10,
    .roz-titlu {
        background-color: rgba(240, 207, 101, 0.75);
        color: black;
    }

    #color10 .mega-menu-link a {
        background-color: rgba(240, 207, 101, 0.75);
        color: whitesmoke;
    }

    .menu-bar>li>[aria-haspopup="true"]:focus,
    .menu-bar>li:focus-within>[aria-haspopup="true"],
    .menu-bar>li:hover>#color11,
    .mov-titlu {
        background-color: rgba(215, 129, 106, 0.75);
        /* background-color:#93b5c6; */

    }

    .menu-bar>li>[aria-haspopup="true"]:focus,
    .menu-bar>li:focus-within>[aria-haspopup="true"],
    .menu-bar>li:hover>#color12,
    .galben-titlu {
        background-color: #D1810E;
    }

    .menu-bar>li>[aria-haspopup="true"]:focus,
    .menu-bar>li:focus-within>[aria-haspopup="true"],
    .menu-bar>li:hover>#color17 {
        background-color: rgba(189, 79, 108, 0.75);
    }

    .menu-bar>li>[aria-haspopup="true"]:focus::after,
    .menu-bar>li:focus-within>[aria-haspopup="true"]::after,
    .menu-bar>li:hover>a::after {
        background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowTop.svg#light');
    }

    .mega-menu {
        position: absolute;
        top: 100%;
        left: 13%;
        width: 100%;
        contain: content;
    }

    .mega-menu:hover {
        display: flex;
    }

    .mega-menu a:hover {
        background: tint(#177E89, 85%);
        color: #136a73;
    }

    .mega-menu--multiLevel>li {
        width: 33.333333333333%;
    }

    .mega-menu--multiLevel>li>[aria-haspopup="true"]~ul {
        left: 33.333333333333%;
        width: 33.333333333333%;

    }

    .mega-menu--multiLevel>li>[aria-haspopup="true"]~ul ul {
        width: 100%;
        left: 100%;

    }

    .mega-menu--multiLevel li:hover>[aria-haspopup="true"]~ul {
        display: block;
        transform-origin: left;
        animation: flyout .2s ease-out;
    }

    .mega-menu--multiLevel li:focus-within>[aria-haspopup="true"]~ul {
        display: block;
    }

    .mega-menu--multiLevel li:hover>[aria-haspopup="true"],
    .mega-menu--multiLevel li:hover>a,
    .mega-menu--multiLevel li:focus-within>[aria-haspopup="true"],
    .mega-menu--multiLevel li:focus-within>a {
        background: tint(#177E89, 85%);
        color: white;
    }

    .mega-menu--multiLevel [aria-haspopup="true"]~ul,
    .mega-menu--multiLevel [aria-haspopup="true"] {
        border-left: 1px solid #f0f0f0;
    }

    .mega-menu--multiLevel [aria-haspopup="true"]~ul:hover,
    .mega-menu--multiLevel [aria-haspopup="true"]:hover {
        display: block;
    }

    .mega-menu--multiLevel [aria-haspopup="true"]~ul {
        position: absolute;
        top: 0;
        height: 100%;
    }

    .mega-menu--flat>* {
        flex: 1;
    }

    .mobile-menu-trigger,
    .mobile-menu-header,
    .mobile-menu-back-item {
        display: none;
    }

}

@media screen and (min-width: 1250px),
handheld and (min-width: 640px) {

    .brand {
        font-weight: 100;
        top: 0.5rem;
    }
}




/* 
@media all and (max-width: 965px) and (hover: none) {

    .menu-bar>li>[aria-haspopup="true"]:hover~ul {
        left: 0;
    }

    .menu-bar>li>[aria-haspopup="true"]~ul:hover {
        left: 0;
    }

    .menu-bar>li>[aria-haspopup="true"]~ul [aria-haspopup="true"]:hover~ul {
        max-height: 500px;
        animation: dropdown .3s forwards;
    }

    .menu-bar>li>[aria-haspopup="true"]~ul [aria-haspopup="true"]~ul:hover {
        max-height: 500px;
        transform: scaleY(1);
    }

    .menu-bar>li:hover~.mobile-menu-header a {
        visibility: hidden;
    }

} */

/* pentru telefoane rezolutie max 400px */
/* @media all and (max-width: 1124px) and (min-width: 965px) {
    .menu-bar-link {
        font-size: 12px;
    }
} */

@keyframes dropdown {
    0% {
        opacity: 0;
        transform: scaleY(0);
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scaleY(1);
    }
}

@keyframes flyout {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }

    100% {
        opacity: 1;
        transform: scaleX(1);
    }
}