:root {
    --ColorFonsBarraMenu: #ffd200;
    --ColorLletraBarraMenu: #fff;
    --ColorFonsMenu: #ffd200;
    --ColorLletraMenu: #000;
    --ColorFonsSubMenu1: #000;
    --ColorLletraSubMenu1: #fff;
    --ColorFonsSubMenu2: #aaa;
    --ColorLletraSubMenu2: #fff;

    --ColorFonsMenuHover: #000;
    --ColorLletraMenuHover: #fff;
    --ColorFonsSubMenu1Hover: #ffd200;
    --ColorLletraSubMenu1Hover: #000;
    --ColorFonsSubMenu2Hover: #ffd200;
    --ColorLletraSubMenu2Hover: #000;

    --ColorFonsSubMenu1MobilHover: #000;
    --ColorLletraSubMenu1MobilHover: #ffd200;
    --ColorFonsSubMenu2MobilHover: #aaa;
    --ColorLletraSubMenu2MobilHover: #ffd200;
}


.navMenu {margin: 0; padding: 0;}
.navMenu a  {margin: 0; padding: 15px; }
.navMenu ul  {margin: 0; padding: 0;}
.navMenu ul li  {margin: 0; padding: 0;}
.navMenu ul li a  {margin: 0; padding: 15px;}

.containerMenu {
/*     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  
    font-size: 0.9em;  
 */    font-family: 'Arimo', sans-serif;
    font-weight: 100;
    font-size: 100%;

}

.containerMenu a {
 text-decoration: none;
}
.toggleMenu {
    display:  none;
    width: 100%;
    background: var(--ColorFonsBarraMenu);
    color: var(--ColorLletraBarraMenu);
    font-size: 1.5em;
    padding: 6px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;    
}

.TextBarra{
    display: flex;
    align-items: center;
    height: 100%;

}
.TextBarra .icon-menu {font-size: 35px;}
.TextBarra .TextBarraMenu {margin-top: -4px; font-weight: 800;}

.navMenu {
    list-style: none;
    background: var(--ColorFonsMenu);

}
.navMenu:before,
.navMenu:after {
/*     content: " "; 
    display: table;  */
}
.navMenu:after {
    clear: both;
}
.navMenu ul {
    list-style: none;
    width: 9em;
}
.navMenu ul li {
    width: 275px;
}
.navMenu ul li ul li {
    width: 275px;
}

.navMenu a {
    color: var(--ColorLletraMenu);
    /* font-weight: 800; */
   
}
.navMenu li {
    position: relative;
}
.navMenu > li {
    float: left;
    /* border-top: 1px solid #c3c3c3; */
}

.navMenu > li > a:hover {
    color: var(--ColorLletraMenuHover);
    background-color: var(--ColorFonsMenuHover);
}

.navMenu > li > ul > li > a:hover {
    color: var(--ColorLletraSubMenu1Hover);
    background-color: var(--ColorFonsSubMenu1Hover);
}

.navMenu > li > ul > li > ul > li > a:hover {
    color: var(--ColorLletraSubMenu2Hover);
    background-color: var(--ColorFonsSubMenu2Hover);
}

.navMobil > li > ul > li > a:hover {
    color: var(--ColorLletraSubMenu1MobilHover);
    background-color: var(--ColorFonsSubMenu1MobilHover);
}

.navMobil > li > ul > li > ul > li > a:hover {
    color: var(--ColorLletraSubMenu2MobilHover);
    background-color: var(--ColorFonsSubMenu2MobilHover);
}

.navMobil {
    display: flex;
    position: absolute;
    top: 50px;
    z-index: 9999;    
}


.navMobil > li > ul > li > a:hover {
    color: #ffd200;
    background-color: #000;
}

.navMobil > li > ul > li > ul > li > a:hover {
    color: #ffd200;
    background-color: #aaa;
}

.navMenu > li.hover:hover {
   /*  background-color: #000; */
}

.navMenu > li > .parent {
/*     background-image: url("images/downArrow.png");
    background-repeat: no-repeat;
    background-position: right; */
}
.navMenu > li > a {
    display: flex;
}
.navMenu li  ul {
    position: absolute;
    left: -9999px;
}
.navMenu > li.hover > ul {
    left: 0;
}

/* perquè, quan estem a PC s'obri cap a l'esquerra */
.navMenu > li.hover > ul.esquerraMonit { left: -27px;}
.navMenu > li.hover > ul.esquerraMonit > li { width: 150px;}
.navMenu > li.hover > ul.esquerraTPV { left: -74px;}
.navMenu > li.hover > ul.esquerraTPV > li { width: 150px;}
/* I això perquè no afecti a la visualització mòbil */
.navMobil > li.hover > ul.esquerraMonit { left: 0px;}
.navMobil > li.hover > ul.esquerraMonit > li { width: 275px;}
.navMobil > li.hover > ul.esquerraTPV { left: 0px;}
.navMobil > li.hover > ul.esquerraTPV > li { width: 275px;}

.navMenu li li.hover ul {
    left: 100%;
    top: 0;
}
.navMenu li li a {
    display: flex;
    background: var(--ColorFonsSubMenu1);
    color: var(--ColorLletraSubMenu1);
    position: relative;
    z-index:100;
    padding-left: 25px;
    /* border-top: 1px solid #175e4c; */
}
.navMenu li li li a {
    background: var(--ColorFonsSubMenu2);
    color: var(--ColorLletraSubMenu2);
    z-index:200;
    padding-left: 35px;
    /* border-top: 1px solid #1d7a62; */
}

@media screen and (max-width: 900px) {
    .active {
        display: flex;
    }

    .navMenu > li {
        float: none;
    }
    .navMenu > li > .parent {
        /* background-position: 95% 50%; */
    }
    .navMenu li li .parent {
/*         background-image: url("images/downArrow.png");
        background-repeat: no-repeat;
        background-position: 95% 50%; */
    }
    .navMenu ul {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
   .navMenu > li.hover > ul , .navMenu li li.hover ul {
        position: static;
    }

}