/*https://codepen.io/vixxofsweden/pen/xxGGYOE*/

/* CSS HEX
--red-pigment: #ee2e31;
--star-command-blue: #197bbd;
--kelly-green: #29bf12;
--shocking-pink-crayola: #fb62f6;
--rebecca-purple: #5d2e8c;
--celeste: #EA9010;
--red blood: #621708*/

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

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*/
.centru-text-monitor{
	text-align: center !important;
}
.centru-text-monitor2{
	padding-top: 20px!important;
    text-align: center !important;
    line-height: 15px!important;
}
.menu-bar {
background: rgba(0,0,0,0.5);
display: flex;
}
/*anchor a - menu-link*/
.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-height-trei-linii {
	height:75px !important;
}
.menu-link[aria-haspopup="true"] {
padding-right: 40px;
}
.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%);
}
/*ul level2*/
.mega-menu {
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"] {
//padding-right: 0px;
//font-size:12px;
line-height:12px;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
/* 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);
}
.mega-menu--multiLevel > li:hover >.color19 {
background: linear-gradient(to right,#29BF12, #24A610);
}
/*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{
color:white;
//background-color:#D4292C;
line-height:1.5;
}
/* culori meniu*/
#color1{
//background-color:#D4292C;
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-color:#009BD4;
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-color:#24A610;
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-color:#E058DC;
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-color:#7844AC;
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-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{
	text-align: center;
//background-color:#621708;
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);
}
/* 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;
}

/* ---------- MEDIA QUERIES MENU---------- */
@media all and (min-width: 965px) {
.meniu-mobil{
display:none;
}
.meniu-mobil-p{
//visibility: hidden;
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%;
}
.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;
text-align: center;
}
.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: 0;
width: 100%;
}
.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 all and (max-width: 965px) {
/* monitorul oficial local*/
.monitor{
padding:0 5% 0 7%;

}
.monitor[aria-haspopup="true"] {

line-height:65px;
display: block;
}

.mega-menu--multiLevel > li:hover .arrow, .menu-list >li:hover .arrow2 {
display:none;
}

.mobile-menu-trigger, .mobile-menu-header, .mobile-menu-back-item {
display: block;
}
.mobile-menu-trigger {
background-color: rgba(0,0,0,0.5);
height:65px;
color: #ffffff;
border: 0;
line-height:65px;
font-size: 1.2em;
border-radius: 4px;
text-align:center;
}
.mobile-menu-header {
order: -1;
background: grey;
}
.mobile-menu-header a {
padding: 20px 25px;
color: #ffffff;
visibility: visible;
}
.menu-bar {
flex-direction: column;
position: fixed;
top: 0;
left: -100%;
height: 100vh;
width: 350px;
max-width: 350px;
max-width: 90%;
overflow-x: hidden;
transition: left .3s;
box-shadow: 1px 0px 2px 0px rgba(0,0,0,0.25);
}
.menu-bar > li > [aria-haspopup="true"] ~ ul {
display: flex;
flex-direction: column;
background: #ffffff;
position: absolute;
left: 100%;
top: 0;
max-height: 100vh;
width: 100%;
transition: left .3s;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul > li > [aria-haspopup="true"] {
font-size: 1.2em;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul > li > [aria-haspopup="true"] ~ ul a {
padding-left: 40px;
position:relative;
min-height:20px;
height:auto;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul > li > [aria-haspopup="true"] ~ ul > li > [aria-haspopup="true"] ~ ul a {
padding-left: 80px;
}

.menu-bar > li > [aria-haspopup="true"] ~ ul [aria-haspopup="true"]::after {
content: "+";
background: none;
font-size: 1em;
font-weight: normal;
height: 20px;
line-height: 1;

}
.menu-bar > li > [aria-haspopup="true"] ~ ul [aria-haspopup="true"] ~ ul {
max-height: 0px;
transform-origin: top;
transform: scaleY(0);
transition: max-height .1s;
}
.mega-menu-content {
padding: 20px 25px;
}
.mobile-menu-back-item {
order: -1;

}
.mobile-menu-back-item a {
background: tint(grey,70%);
color: #2a2a2a;
max-height: calc(1.4em + 40px);
margin-top: calc(0px - (1.4em + 40px));
pointer-events: none;

}
.mobile-menu-back-item a::before {
content: "";
width: 14px;
height: 12px;
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowLeft.svg#default');
background-size: 14px;
margin-right: 10px;
display: inline-block;
}
.mobile-menu-trigger:focus ~ ul {
left: 0;
}
.menu-bar:hover, .menu-bar:focus-within {
left: 0;
}
.menu-bar > li > [aria-haspopup="true"]:focus ~ ul {
left: 0;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul {
margin-top: calc(1.4em + 40px);
}
.menu-bar > li > [aria-haspopup="true"] ~ ul:hover, .menu-bar > li > [aria-haspopup="true"] ~ ul:focus-within {
left: 0;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul [aria-haspopup="true"]:focus ~ ul {
max-height: 500px;
animation: dropdown .3s forwards;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul li:focus-within > [aria-haspopup="true"] ~ ul {
max-height: 500px;
transform: scaleY(1);
}
.menu-bar > li:focus-within ~ .mobile-menu-header a {
visibility: hidden;
}
/* meniu dropdown ver mobile - daca mai ramane spatiu in jos, se mareste max-height*/
#color1, #color2, #color3, #color4, #color5, #color6, #color18 {
max-height: 1500px;
}
/* background color sa nu mai fie transparent cand avem meniu de mobile */
#color1{
background-color:#ee2e31;
}
#color2{
background-color:#009BD4;
}
#color3{
background-color:#24A610;
}
#color4{
background-color:#E058DC;
}
#color5{
background-color:#7844AC;
}
#color6{
background-color:#D1810E;
}
#color18{
	text-align: center;
background-color:#621708;
}
.mega-menu--multiLevel>li>ul{
display:block;

}
/*
.meniu-dez:active{
	pointer-events: none !important;
	touch-action: none !important;
}
*/
.meniu-desktop{
display:none;
}
.meniu-desktop-p{
//visibility: hidden;
display:block;
}

}
@media all and (max-width: 965px) and (hover: none) {
.mobile-menu-trigger:hover ~ ul {
left: 0;
}
.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);
}
.meniu-mobil-p {
display:none;
}
}