@media all {

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

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

    #menu {
        z-index: 20;
        width: 100vw;
        height: 65px;
        position: fixed;
        /* top: 100px; */
    }

    /* div#meniu{
width:100%;
height:65px;
position: fixed; /* Make it stick/fixed */
    /* z-index: 1; */
    /* }  */

    .logo-p {
        font-size: 1vw;
        width: 70%;
        line-height: 1.5rem;
    }

    #logo {
        float: left;
        width: 20%;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.5);
        height: 65px;
        line-height: 65px;
        display: flex;
        justify-content: center;
    }

    #logo img {
        border-radius: 15px;
        float: left;
        height: 4rem;
        align-self: center;
    }

    /* #logo p {
        padding-top: 1rem;
        text-align: center;
        padding-right: 5%;
        color: whitesmoke;
        font-size: 1.5vw;
    } */

    .menu-bar-link {
        height: 65px;
        /* line-height: 65px; */
        text-transform: uppercase;
        font-size: 12px;
        display: flex;
        align-items: center;
        text-align: center;
    }


    .monitor {
        padding: 0 0 0 5%;
        margin: 0;
    }


    .img-meniu-dreapta {
        width: 200px;
        height: auto;
        text-align: right;
        float: right;
        position: fixed;
        right: 0;
        margin-right: 80px;
        top: 0px;
        display: block;
    }

    .img-meniu-dreapta2 {
        width: 130px;
        height: auto;
        text-align: right;
        float: right;
        position: fixed;
        right: 0;
        margin-right: 80px;
        top: 0px;
        display: block;
    }

    /* nav {
    width: 80%;
    float: left;
} */

    nav {
        width: 80%;
        height: 65px;
        float: left;
    }

    nav ul,
    nav li {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    nav a {
        display: block;
        text-decoration: none;
    }

    nav a:hover,
    nav a:visited {
        text-decoration: none;
    }


    /*ul level1 - menu-bar*/
    .menu-bar {
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        height: inherit;
        align-items: center;

    }

    .meniu-25px {
        line-height: 25px !important;
    }

    /*anchor a - menu-link*/
    .menu-link {
        text-decoration: none;
        padding: 0 25px 0 25px;
        /* height: 40px; */
        /* line-height: 40px; */
        color: white;
        transition: background .2s, color .2s;
        position: relative;
        z-index: 1;
        font-size: 1em;

    }


    .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: 10px;
        top: 50%;
        transform: translateY(-50%);
    }


    .menu-link[aria-haspopup="true"] {
        padding-right: 40px;
    }

    /*ul level2*/
    .mega-menu {
        /* color: rgba(0, 0, 0, 0.511);
        line-height: 3rem; */
        background: #ffffff;
        z-index: 10;
    }

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

    /* monitorul oficial local*/
    .monitor {
        padding: 0 0 0 5%;
        margin: 0;
    }

    .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, #ee2e31, #D4292C);
    }

    .mega-menu--multiLevel>li:hover>.color14 {
        background: linear-gradient(to right, #29bf12, #24A610);
    }

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

    .mega-menu--multiLevel>li:hover>.color16 {
        background: linear-gradient(to right, #894EC4, #7844AC);
    }

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

    /* a level2*/
    .mega-menu-link {
        color: white;
        padding: 10px 25px 10px 25px;
        min-height: 60px;
        height: auto;
        font-weight: bolder;
        line-height: 20px;
    }

    /* a level3*/
    .menu-list-link {
        align-content: center;
        color: white;
        height: 3em;
        /* background-color:#ffcda8; */
    }

    /* culori meniu*/
    #color1 {
        background: rgba(212, 41, 44, 0.5);
        background-image: linear-gradient(to right, rgba(212, 41, 44, 1), rgba(212, 41, 44, 0.5));
    }

    #color1 a:hover {
        background: linear-gradient(to right, #ee2e31, #D4292C);
    }

    #color2 {
        background: rgba(0, 155, 212, 0.5);
        background-image: linear-gradient(to right, rgba(0, 155, 212, 1), rgba(0, 155, 212, 0.5));
    }

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

    #color3 {
        background: rgba(36, 166, 16, 0.5);
        background-image: linear-gradient(to right, rgba(36, 166, 16, 1), rgba(36, 166, 16, 0.5));
    }

    #color3 a:hover {
        background: linear-gradient(to right, #29bf12, #24A610);
    }

    #color4 {
        background: rgba(224, 88, 220, 0.5);
        background-image: linear-gradient(to right, rgba(224, 88, 220, 1), rgba(224, 88, 220, 0.5));
    }

    #color4 a:hover {
        background: linear-gradient(to right, #fb62f6, #E058DC);
    }

    #color5 {
        background: rgba(120, 68, 172, 0.5);
        background-image: linear-gradient(to right, rgba(120, 68, 172, 1), rgba(120, 68, 172, 0.5));
    }

    #color5 a:hover {
        background: linear-gradient(to right, #894EC4, #7844AC);
    }

    #color6 {
        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: rgba(98, 23, 8, 0.5);
        background-image: linear-gradient(to right, rgba(98, 23, 8, 1), rgba(98, 23, 8, 0.5));
    }

    #color18 a:hover {
        background: linear-gradient(to right, #7A1D0A, #621708);
    }

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


    #mobile-menu {
        display: none
    }

    .mobile-close {
        position: absolute;
        top: 2vh;
        left: 35vw;
        background: rgba(255, 255, 255, 0.826);
        color: rgba(0, 0, 0, 0.797);
        border: none;
        font-size: 1.5vw;
        width: 4vw;
        height: 4vw;
        display: none;
        cursor: pointer;
        border-radius: 50%;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Stilizare la hover */
    .mobile-close:hover {
        background: #f0f0f0;
    }

    .carousel-caption p {
        color: white;
        font-size: 2em;
        font-weight: 800;
        /* text-align: left; */
        text-shadow: black 1px 0 10px;
        margin-bottom: 25%;
        /* margin-right:98%; */
        margin-left: -120%;
    }

    .mobile-close {
        display: none;
    }
}

/* ---------- MEDIA QUERIES MENU---------- */
/* laptop / monitor */
@media (min-width: 981px) {

    /* ---------------------------MENIU---------------------------------- */
    /* ========== meniu ========== */

    header video {
        width: 100%;
        height: 50vh;
        background-color: white;
        position: relative;
        object-fit: cover;
    }

    #logo p {
        color: whitesmoke;
        /* line-height: 2rem; */
        z-index: 1;
        /* padding-top: 1em; */
        font-size: 1.5vw;
        /* width: 100%; */
    }

    .meniu-mobil {
        display: none;
    }

    .meniu-mobil-p {
        display: block;
    }

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

    .menu-bar {
        position: relative;
    }

    .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%;
        height: 100%;
    }

    .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 {
        background-color: #D4292C;
    }

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

    .menu-bar>li>[aria-haspopup="true"]:focus,
    .menu-bar>li:focus-within>[aria-haspopup="true"],
    .menu-bar>li:hover>#color9,
    .verde-titlu {
        background-color: #24A610;
    }

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

    .menu-bar>li>[aria-haspopup="true"]:focus,
    .menu-bar>li:focus-within>[aria-haspopup="true"],
    .menu-bar>li:hover>#color11,
    .mov-titlu {
        background-color: #7844AC;
    }

    .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: #621708;
    }

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

    /*     
    .logo-icon {
        display:grid; 
        grid-template-columns:20% 80%;
        gap:8px;
        background-color: rgba(0, 0, 0, 0.5);
    } */

    .mega-menu {
        position: absolute;
        top: 100%;
        left: 0;
        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;
    }

    .mobile-close {
        display: none;
    }
}

@media (max-width: 980px) {

    header video {
        display: none;
    }

    /* Ascunde submeniurile implicit */
    .mega-menu {
        display: none;
        position: absolute;
        background-color: rgba(0, 0, 0, 0.9);
        list-style: none;
        z-index: 999;
        padding: 10px 0;
        /* width: 50%; */
    }


    /* Stiluri pentru submeniuri */
    .mega-menu.opened-menu {
        display: block;
        /* Afișează meniul deschis */
    }

    .mega-menu li {
        padding: 4px 15px;
    }

    .mega-menu li a {
        line-height: 1.1em;
        font-size: 0.8em;
        color: white;
        text-decoration: none;
        background-color: unset;
    }

    .mega-menu li a:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }

    /* Submeniurile pe mai multe niveluri */
    .menu-list {
        display: none;
        position: absolute;
        top: 0;
        left: 100%;
        background-color: unset;
        z-index: 999;
        padding: 10px 0;
        width: 200px;
    }

    .mega-menu li:hover>.menu-list {
        display: block;
        /* Afișează submeniurile la hover */
    }


    .menu-bar {
        display: none;
    }

    #mobile-menu {
        display: block;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        width: 100%;
        text-align: center;
        padding: 10px;
    }

    .menu-bar.opened-menu {
        display: block;
    }

    .mega-menu {
        position: relative;
        display: none;
    }

    .mega-menu.opened-menu {
        display: block;
    }

    .menu-list {
        position: relative;
        display: none;
    }

    .menu-list.opened-menu {
        display: block;
    }

    .menu-bar {
        display: none;
    }

    .opened-menu {
        height: 120vh;
        font-size: 1em;
        line-height: 5em;
        max-height: 80%;
        display: block;
        /* width: 50%; */
    }

    .closed-menu {

        display: none
    }

    .mega-menu-link {
        display: block;
    }

    .menu-list {
        background-color: none;
        margin-left: -18.5rem;
        position: relative;
        display: none;
    }

    .menu-list li:hover {
        display: block;
    }

    #mobile-menu {
        border-radius: 0;
        height: 6.5rem;
        align-items: center;
        text-align: center;
        font-family: Arial, sans-serif;
        color: whitesmoke;
        background-color: rgba(0, 0, 0, 0.5);
        border: none;
        display: inline-flex;
    }
}


/* tableta / laptop small */
@media (min-width: 641px) and (max-width: 980px) {

    .menu-bar {
        display: none;
    }

    #logo {
        background-color: unset;
        width: 100%;
        align-items: center;
        justify-content: start;
    }

    #logo p {
        color: whitesmoke;
        line-height: 1.1rem;
        z-index: 1;
        font-size: 2vw;
        width: 25em;
    }

    #mobile-menu {
        width: 80%;
    }

    #mobile-menu p {
        padding-left: 20vw;
        margin-top: 1em;
        /* margin-left: 20rem; */
        text-align: center;
    }

    /* 
    #mobile-menu {
        display: block;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        width: 100%;
        text-align: center;
        padding: 10px;
    } */

    .menu-bar.opened-menu {
        display: block;
    }

    .mega-menu {
        position: relative;
        display: none;
    }

    .mega-menu.opened-menu {
        display: block;
    }

    .menu-list {
        position: relative;
        display: none;
    }

    .img-meniu-dreapta {
        display: none;
    }

    .carousel {
        /* width: 100vw;
        position: relative;
        background-size: cover;
        height: 45vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        margin-left: -2rem; */
        display: none;
    }

    /* .carousel-control {
        height: 40vh;
    } */

    .nav-li {
        width: 50%;
    }

    #menu {
        z-index: 20;
        width: 100%;
        position: fixed;
        top: 100px;
    }

    .mobile-close {
        display: none;
    }

}

/* mobile */
@media (max-width: 640px) {

    #logo {
        background-color: unset;
        width: 100%;
        align-items: center;
    }

    #logo p {
        color: whitesmoke;
        font-size: 2.5vw;
        line-height: 1rem;
        width: 25em;
    }

    .logo-icon {
        display: grid;
        grid-template-columns: 10% 90%;
        gap: 8px;
        background-color: rgba(0, 0, 0, 0.5);
    }

    #mobile-menu {
        width: 62%;
    }

    #mobile-menu p {
        padding-left: 9em;
        margin-top: 1em;
        /* margin-left: 20rem; */
        text-align: center;
    }


    .img-meniu-dreapta {
        width: 5em;
        height: auto;
        text-align: right;
        float: left;
        position: fixed;
        right: 0;
        margin-right: 80px;
        top: 0px;
        display: flex;
        position: relative;
    }


    .carousel {
        /* width: 100vw;
        position: relative;
        background-size: cover;
        height: 40vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        margin-left: -2rem; */

        display: none;
        ;
    }

    /* .carousel-control {

        height: 40vh;
    } */

    .nav-li {
        width: 50%;
    }

    #menu {
        z-index: 20;
        width: 100%;
        position: fixed;
        top: 0px;
    }

    .mobile-close {
        display: none;
    }
}