*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

@font-face{
    font-family: 'Helvetica-Now';
    src: url(../font/HelveticaNowText-Light.ttf);
}

header{
    font-family: 'Helvetica-Now';
}

main{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/*  */

.imgmenu{
    display: none;
}

.checkbtn{
    display: none;
}

#check{
    display: none;
}

/* probando */

.cont_logo{
    margin-left: 20%;
    margin-bottom: -40px;
    justify-content: center;
    margin-right: 0px;
}

.logo{
    width: 200px;
}

nav{
    max-width: 100%;
    min-height: 132px;
    margin: auto;
    background-color: #333;
    font-size: 18px;
    padding: 25px 20px;
}

.menu-big{
    margin-top: 6px;
    margin-bottom: -25px;
}

.menu-horizontal{
    list-style: none;
    display: flex;
    justify-content: center;
    margin-left: 25%;
}

.menu-horizontal > li > a{
    display: block;
    padding: 15px 20px;
    color: white;
    text-decoration: none;
}

.menu-horizontal > li:hover{
    background-color: #ff97e8;
}

.menu-vertical{
    position: absolute;
    z-index: 6;
    display: none;
    list-style: none;
    width: 250px;
    background-color: rgba(0, 0, 0, .5);
    font-size: 17px;
}

.menu-horizontal li:hover .menu-vertical{
    display: block;
}


.menu-vertical li a{
    display: block;
    color: white;
    padding: 15px 15px 15px 20px;
    text-decoration: none;
    align-items: center;
}

.lista{
    list-style: none;
}

.lista li:hover{
    background-color: #23222280;
}

/* Colores de las unidades */

.cill{
    list-style: none;
}

.cill li:hover{
    background-color: #ffb038;
   
}

.llid{
    list-style: none;
}

.llid li:hover{
    background-color: #ffff72d3;
   
}

.ring{
    list-style: none;
}

.ring li:hover{
    background-color: #9acef8;
   
}

.pic{
    list-style: none;
}

.pic li:hover{
    background-color: #fe5c5c;
}

.truc{
    list-style: none;
}

.truc li:hover{
    background-color: #258d19;
}

.fotoinicio > img{
    width: 100%;
    height: 100%;
}

@media only screen and (min-width: 700px){
    .menu-lit{
        display: none;
    }
}

@media only screen and (max-width: 1300px) and (min-width: 700px) {
    .cont_logo{
        margin-left: 1%;
}

    .menu-horizontal{
        margin-left: 30%;
    }

    .menu-big{
        margin-top: 6px;
    }
}

@media only screen and (max-width: 700px){

    .cont_logo{
        margin-left: 0%;
    }
    
    .menu-big{
        display: none;
    }


    /* Menú móvil*/

    ul{
        box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.774);
        position: fixed;
        width: 60%;
        height: 100vh;
        background-color: #ffc0dc;
        top: 0;
        /* left: -100%; */
        text-align: left;
        transition: all .5s;
        display: block;

        left: 0%;

        overflow: scroll;
    }

    .menu-lit{
        position: fixed;
        z-index: 6;
    }

    .ulmenumov{
        left: -100%;
    }
    
    .logomov{
        margin: 25px 20px 0px 20px;
        padding-bottom: 20px;
    }

    /* Animación Hamburguesa */

    .bars__menu{
        width: 34px;
        /* position: absolute; */
        position: fixed;
        right: 30px;
        cursor: pointer;
        justify-content: end;
        margin: 25px 5px 0 0;
    }
    
    .bars__menu span{
        display: block;
        width: 100%;
        background: #ffc0dc;
        transform-origin: 0px 100%;
        transition: all 300ms;
        height: 5px;
        margin-top: 6px;
    }
    
    .activeline1__bars-menu{
        transform: rotate(45deg) translate(-3.5px, 1px); 
    }
    
    .activeline2__bars-menu{
        opacity: 0;
        margin-left: -30px; 
    }
    
    .activeline3__bars-menu{
        transform: rotate(-45deg);
    }

    /* Menú barritas móvil */
    
    .hudselector a{
        color: white;
        display: flex;
    
        border-bottom: white;
        border-top-style: solid ;
        border-top-width: 1px;
    
        display: flex;
        align-content: center;
        flex-wrap: wrap;
        width: 100%;
        justify-content: flex-start;
        padding: 20px;
        padding-left: 15px;
    }

    .textdespmov{
        width: 40%;
    }
    
    .flechamov{
       padding-top: 3px;
        width: 60%;
        display: flex;
        justify-content: flex-end;
    }
    
    .flechamov img{
        transition: all 300ms;
    }
    
    .desplegablemov{
        display: grid;
        grid-template-rows: var(--rows, 0fr);
        transition: .3s grid-template-rows;
    }
    
    .desplegablemov li{
        background-color: #ffd1e4c5;
        overflow: hidden;
    }
    
    .desplegable_movil_sub a{
        padding-left: 40px;
    }
    
    .activedesplegable_agrupament{
        --rows: 1fr;
    }
    
    .activeflecha_agrupament img{
        transform: rotate(90deg);
    }
    
    .activedesp_unitats{
        --rows: 1fr;
    }
    
    .activeflecha_unitats img{
        transform: rotate(90deg);
    }

    /* Unidades movil */

    .desplegable_movil_sub a{
        padding-block: 15px;
    }

    .desplegable_movil_sub a img{
        padding: 0px 8px 0 0;
    }
    
}

@media only screen and (max-width: 400px){

    ul{
        width: 75%;
    }

    .bars__menu{
        right: 15px;
    }
}