/************ ESTILO1 - BASICO *******************************/
/*************************************************************/
.NAVEGACION.estilo1  .widget-area
{
    background-color: rgba(1,1,1,0.06);
    border-radius: 1em;
    margin: 0 auto;
    padding: 1em;
    align-items: flex-start;
}
.NAVEGACION.estilo1  .widget-area h4{
    margin: 0.5em 0.2em;
}
.NAVEGACION.estilo1 nav { padding: 0.5em 0em }

.NAVEGACION.estilo1 nav:not(.items10) { padding-left: 2em; }

.NAVEGACION.estilo1 nav.items10 { column-width: 24em; }




/************ ESTILO 2 -  ****************************/
/*****************************************************/

/*
.NAVEGACION  .widget-area.estilo2 {
    margin: 2em 0em;
}
nav.estilo2 {
    
}
nav.estilo2 .item-navegacion {
    margin: .8em 1em;
    padding: 1em;

    display: flex;
    align-items: center;

    border-color: rgba(1,1,1,0.2);
    border-style: solid;
    border-width: 2px;
    border-radius: 0.3em;    

    text-decoration: none;

    transition: all .25s ease-in;
}
nav.estilo2 .item-navegacion:hover
{
    border-color: currentColor;
    transform: translate(-.5em, -0.1em);
    box-shadow: 6px 2px 5px rgba(1,1,1,0.2);
}

nav.estilo2 .item-navegacion .nav-item-graph {
    display: inherit;
    margin-right: 1em;
}

nav.estilo2 .nav-item-graph svg 
{
    width: 3em;
    height: 3em;
    fill: rgba(1,1,1,0.2);
    transition: fill .25s ease-in;
}

nav.estilo2 .item-navegacion:hover .nav-item-graph svg
{
    fill: currentColor;
}
*/
.NAVEGACION  .widget-area {

}
nav.estilo2 {
    /*font-size: 0.875rem*/
    
}

nav.estilo2 .item-navegacion {
    margin: .8em 1em;
    display: flex;
    align-items: center;
    border-color: rgba(1,1,1,0.2);
    border-style: solid;
    border-width: 0px;
    border-radius: 0.3em;
    text-decoration: none;
    background-color: currentColor;
    position: relative;    
    min-height: 5em;

    transition: all .25s ease-in;
}
nav.estilo2 .item-navegacion:hover
{

}
nav.estilo2 .item-navegacion .nav-item-text {
    color: white;
    padding: 1em;
    margin-right: 5em;

    transition: all .25s ease-in;    
}
nav.estilo2 .item-navegacion:hover .nav-item-text {
    
    transform: translateX(.7em);
}


nav.estilo2 .item-navegacion .nav-item-graph {
    display: flex;
    order: 1;
    width: 5em;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    align-items: center;

   transition: all .8s ease-in .25s;   
}
nav.estilo2 .item-navegacion .nav-item-graph::before {
    background-color: rgba(256,256,256,0.2);
    width: 5em;
    position: absolute;
    content: '';
    top: 0em;
    bottom: 0em;
    border-radius: 0 .3em .3em 0;

   transition: all .8s ease-in .25s;
}

nav.estilo2 .item-navegacion:hover .nav-item-graph {
    
    transform: perspective(200px) rotateY(1turn);
    
}
nav.estilo2 .item-navegacion:hover  .nav-item-graph::before {
    background-color: rgba(0,0,0,0.2);
}

nav.estilo2 .nav-item-graph svg 
{
    padding: 1em;
    width: 3em;
    height: 3em;
    fill: rgba(256,256,256,0.7);   
    z-index: 1;

    transition: all .3s ease-in .75s;
}

nav.estilo2 .item-navegacion:hover .nav-item-graph svg
{
    fill: rgba(256,256,256,1);   

}

/************ ESTILO 4 -  ****************************/
/*****************************************************/

.NAVEGACION.estilo4{

}
.NAVEGACION.estilo4 h4 {
    text-align: center;
    font-size: 1.8em;
}

.NAVEGACION.estilo4 nav
{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 2em auto 0em;
}
.NAVEGACION.estilo4 nav.items-7 {max-width: 60em;}
@media screen and (max-width: 1090px) { .NAVEGACION.estilo4 nav.items-6 {max-width: 50em;} }
@media screen and (max-width: 908px)  { .NAVEGACION.estilo4 nav.items-5 {max-width: 50em;} }
@media screen and (max-width: 728px)  { .NAVEGACION.estilo4 nav.items-4 {max-width: 36em;} }


.NAVEGACION.estilo4 .item-navegacion
{
    display: flex;
    flex-flow: column;
    width: 18em;
    align-items: center;

    text-decoration: none;
    text-transform: uppercase;  
    margin: 1em;
}
.NAVEGACION.estilo4 .nav-item-graph {

}
.NAVEGACION.estilo4.nav-item-text
{

}
.NAVEGACION.estilo4 .nav-item-graph .icon
{

}
.NAVEGACION.estilo4 .nav-item-graph svg {
    max-width: 2em;
    max-height: 2em;
    fill: currentColor;
}


/* estilo4 Icono *******************************/
.NAVEGACION.estilo4 .nav-item-graph {
    font-size: 1.5rem;
    position: relative;
    border-radius: 50%;
    padding: 5px;
    margin: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: color 0.3s ease, background-color 0.3s ease, transform 0.4s ease;

    height: 3em;
    width: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1em;     
}
.NAVEGACION.estilo4 .nav-item-graph svg { fill: white;}


.NAVEGACION.estilo4 .nav-item-graph:after {
        content: "";
        width: 100%;
        height: 100%;
        border: solid 2px;
        transform: scale(0.8);
        position: absolute;
        top: -2px;
        left: -2px;
        border-radius: 50%;
        transition: all 0.4s ease;
}

.NAVEGACION.estilo4 .item-navegacion:hover .nav-item-graph:after {
    transform: scale(1);
    box-shadow: 10px 0 20px rgba(0, 0, 0, 0.19), 6px 0 6px rgba(0, 0, 0, 0.23);
}

.NAVEGACION.estilo4 .nav-item-graph {
        background-color: currentColor;
}

.NAVEGACION.estilo4 .item-navegacion:hover .nav-item-graph svg {
        fill: currentColor;
}

.NAVEGACION.estilo4 .nav-item-graph:after {
        border-color: currentColor;
}

.NAVEGACION.estilo4 .item-navegacion:hover .nav-item-graph {
        background-color: transparent;
        /*transform: rotate(360deg);*/
        /* cursor: pointer; */
        box-shadow: none;
}


/* estilo4 texto *******************************/
.NAVEGACION.estilo4 .nav-item-text {
    position: relative;
    padding: .5em;
    text-align: center;
    min-height: 3em;
    width: 100%;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.NAVEGACION.estilo4 .nav-item-text:before,
.NAVEGACION.estilo4 .nav-item-text:after
{
    position: absolute;
    opacity: 0;
    width: 0%;
    height: 2px;
    content: '';
    background: currentColor;
    transition: all 0.4s;
}

.NAVEGACION.estilo4 .nav-item-text:before
{
    left: 0px;
    top: 0px;
}

.NAVEGACION.estilo4 .nav-item-text:after
{
    right: 0px;
    bottom: 0px;
}

.NAVEGACION.estilo4 .item-navegacion:hover .nav-item-text:before,
.NAVEGACION.estilo4 .item-navegacion:hover .nav-item-text:after
{
    opacity: 1;
    width: 100%;
}



/************ ESTILO X - PRINCIPAL ****************************/
/**************^^^^^^^^^^^^^^^^^^*****************************/

/* ESTILO IMITACIÓN RIBAS ***************** NO QUEDA MUY BIEN **********
.NAVEGACION nav.estilo3 {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 2em auto 3em;
    border-style: solid;
    border-color: silver;
    border-width: 1px 0px 0px 1px;
    background: rgba(0,0,0,0.035);
    max-width: 50em;    
}

nav.estilo3 .item-navegacion {
    align-items: center;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    justify-content: space-around;
    flex: 1 1 0;
    border-style: solid;
    border-color: silver;
    border-width: 0px 1px 1px 0px;
    min-width: 15em;
    margin: 0;
    transition: all .4s ease;
}

nav.estilo3 .item-navegacion:hover {

    box-shadow: 0em 1em 6em -16px rgba(0,0,0,0.6);
    background: #FFF;   

}

nav.estilo3 .nav-item-graph {
    display: inherit;
    position: absolute;
    bottom: 0;
    height: 4em;
    width: 100%;
    text-align: center;
}


nav.estilo3 .nav-item-text {
    padding: 1em;
    min-height: 4em;
    margin-bottom: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: gray;
    font-size: 1.2em;
    transition: all .4s ease;    
}
nav.estilo3 .item-navegacion:hover .nav-item-text {
    color: currentColor;
}

nav.estilo3 .nav-item-graph .icon
{
}
nav.estilo3 .nav-item-graph svg {
    width: 3em;
    height: 3em;
    fill: #CCC;
    transition: all .4s ease;
}
nav.estilo3 .item-navegacion:hover .nav-item-graph svg{
    fill: currentColor;
}
*/


/* COLORES variopintos **************/
/*
nav.estilo3 .item-navegacion:nth-child(12n+1) { background-color: #008fd4; }
nav.estilo3 .item-navegacion:nth-child(12n+2) { background-color: #f3a231; }
nav.estilo3 .item-navegacion:nth-child(12n+3) { background-color: #57c269; }
nav.estilo3 .item-navegacion:nth-child(12n+4) { background-color: #b81757; }
nav.estilo3 .item-navegacion:nth-child(12n+5) { background-color: #7e5fa1; }
nav.estilo3 .item-navegacion:nth-child(12n+6) { background-color: #f90; }
nav.estilo3 .item-navegacion:nth-child(12n+7) { background-color: #d7cbb7; }
nav.estilo3 .item-navegacion:nth-child(12n+8) { background-color: #dd6566; }
nav.estilo3 .item-navegacion:nth-child(12n+9) { background-color: #454d5c; }
nav.estilo3 .item-navegacion:nth-child(12n+10) { background-color: #36a6b7; }
nav.estilo3 .item-navegacion:nth-child(12n+11) { background-color: #c6ce00; }
nav.estilo3 .item-navegacion:nth-child(12n+12) { background-color: #088a08; }
*/
/* COLORES gamapequeña arcoiris **************/
/*
nav.estilo3 .item-navegacion:nth-child(5n+1) { background-color: #FF004F; }
nav.estilo3 .item-navegacion:nth-child(5n+2) { background-color: #CB0E78; }
nav.estilo3 .item-navegacion:nth-child(5n+3) { background-color: #A10E9D; }
nav.estilo3 .item-navegacion:nth-child(5n+4) { background-color: #7C21C0; }
nav.estilo3 .item-navegacion:nth-child(5n+5) { background-color: #4F39CC; }
*/

/************ ESTILO 3 -  ****************************/
/*****************************************************/
.NAVEGACION.estilo3 {
    background-color: whitesmoke;
}

.NAVEGACION.estilo3 h4 {
    text-align: center;
}

.NAVEGACION.estilo3 nav {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 2em auto 3em;
    max-width: 70em;
}

.NAVEGACION.estilo3 .item-navegacion {
    align-items: center;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    justify-content: space-around;
    flex: 1 1 0;
    
    margin: 0.5em;
    font-weight: bold;
    border-radius: .5em;
    background-color: currentColor;

    max-width: 15em;
    min-width: 20em;

    transition: all .4s ease; /*, background-color .3s ease .1s;*/
}

.NAVEGACION.estilo3 .item-navegacion:hover {
    box-shadow: 0em 1em 6em -16px rgba(0,0,0,0.5);
    background: #FFF;   
}

.NAVEGACION.estilo3 .nav-item-graph {
    display: inherit;
    position: absolute;
    bottom: 0;
    height: 4.5em;
    width: 100%;
    text-align: center;
}

.NAVEGACION.estilo3 .nav-item-text {
    padding: 1em;
    min-height: 4em;
    margin-bottom: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    font-size: 1.2em;
    transition: all .4s ease;    
}
.NAVEGACION.estilo3  .no-icon .nav-item-text {
   margin: 1em;
}

.NAVEGACION.estilo3 .item-navegacion:hover .nav-item-text {
    color: inherit;
}

.NAVEGACION.estilo3 .nav-item-graph .icon
{
}
.NAVEGACION.estilo3 .nav-item-graph svg {
    width: 3em;
    height: 3em;
    fill: white;
    transition: all .4s ease;
}
.NAVEGACION.estilo3 .item-navegacion:hover .nav-item-graph svg{
    fill: currentColor;
}


/************ ESTILO 5 -  ****************************/
/*****************************************************/

.NAVEGACION.estilo5 {
    background-color: #EEE;
}

.NAVEGACION.estilo5 h4 {
    text-align: center; 
    text-shadow: 1px 1px 6px white;
    font-size: 1.8em;   
}


/* COLORES gamapequeña arcoiris **************/

.NAVEGACION.estilo5 .item-navegacion:nth-child(5n+1) { background-color: #FF004F; }
.NAVEGACION.estilo5 .item-navegacion:nth-child(5n+2) { background-color: #CB0E78; }
.NAVEGACION.estilo5 .item-navegacion:nth-child(5n+3) { background-color: #A10E9D; }
.NAVEGACION.estilo5 .item-navegacion:nth-child(5n+4) { background-color: #7C21C0; }
.NAVEGACION.estilo5 .item-navegacion:nth-child(5n+5) { background-color: #4F39CC; }


.NAVEGACION.estilo5 nav {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 2em auto 3em;
}

.NAVEGACION.estilo5 .item-navegacion {
    align-items: center;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    justify-content: space-around;
    flex: 1 0 0px;
    max-width: 12em;
    min-width: 12em;
    margin: 0.5em;
    font-weight: bold;
    /*background-color: currentColor;*/

    box-shadow: 2px 2px 10px 2px hsl(0, 0%, 0%,.4);

    transition: all .4s ease; /*, background-color .3s ease .1s;*/
}

.NAVEGACION.estilo5 .nav-item-graph {
    display: inherit;
    position: absolute;
    top: 0;
    width: 100%;
    text-align: center;
    padding: 1em 0em 0;
    background-color: hsla(0,0%,0%,.1);
    transition: all .4s ease;
    height: 5rem;
    box-sizing: border-box;
}

.NAVEGACION.estilo5 .nav-item-text {
    padding: 1rem;
    min-height: 5rem;
    margin-top: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    font-size: 1.2em;
    transition: all .4s ease;

}

.NAVEGACION.estilo5 .nav-item-graph .icon
{

}
.NAVEGACION.estilo5 .nav-item-graph svg {
    width: 3em;
    height: 3em;
    fill: white;
    transition: all .4s ease;
}

.NAVEGACION.estilo5 .item-navegacion:hover .nav-item-graph {
    background: hsla(0,0%,100%,.2);
}
.NAVEGACION.estilo5 .item-navegacion:hover .nav-item-text{
    background: hsla(0,0%,0%,.2);
}
.NAVEGACION.estilo5 .item-navegacion:hover
{
    box-shadow: 0px 0px 4px 4px hsl(0, 0%, 100%,.2);
}



/************ ESTILO 6 -  ****************************/
/*****************************************************/

.NAVEGACION.estilo6{
}

.NAVEGACION.estilo6 h4 {
    text-align: center;
}

.NAVEGACION.estilo6 nav {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 2em auto 8em;
    max-width: 60em;    
}

.NAVEGACION.estilo6 .item-navegacion {
    align-items: center;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    justify-content: space-around;
    flex: 1 1 0;
    max-width: 18em;
    min-width: 18em;
    margin: 0.5em;
}
.NAVEGACION.estilo6 .item-navegacion::before ,
.NAVEGACION.estilo6 .item-navegacion::after
{
    content: '';
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    transition: all .4s;    
}
.NAVEGACION.estilo6 .item-navegacion::before {
    background-color: #f0f0f0;
    height: 100%;
    z-index: -1;
    border-radius: .5em .5em 0 0 ;
}

.NAVEGACION.estilo6 .item-navegacion::after{
    background-color: currentColor;
    height: 4px;
    z-index: -1;
    bottom: 0;
}


.NAVEGACION.estilo6 .item-navegacion:hover {
/*
    box-shadow: 0em 1em 6em -16px rgba(0,0,0,0.5);
    background: #FFF;   
*/
}

.NAVEGACION.estilo6 .nav-item-graph {
    display: inherit;
    position: absolute;
    bottom: 0;    
    width: 100%;
    text-align: center;
    padding-bottom: 1em;
}


.NAVEGACION.estilo6 .nav-item-text {
    color: #666;

    padding: 1em;
    min-height: 4em;
    margin-bottom: 4em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /*font-size: 1.2em;*/
    transition: all .1s ease;    
}
.NAVEGACION.estilo6 .item-navegacion:hover .nav-item-text {
    color: inherit;
}

.NAVEGACION.estilo6 .nav-item-graph .icon
{
}
.NAVEGACION.estilo6 .nav-item-graph svg {
    fill: #666;

    width: 3em;
    height: 3em;
    transition: all .1s ease;
}

.NAVEGACION.estilo6 .item-navegacion:hover .nav-item-text,
.NAVEGACION.estilo6 .item-navegacion:hover .nav-item-graph svg{
    fill: white;
    color: white;
}
.NAVEGACION.estilo6 .item-navegacion:hover::after{
    height: 100%;
    border-radius: .5em .5em 0 0 ;    
}




/************ ESTILO 7 -  ****************************/
/*****************************************************/

.NAVEGACION.estilo7 {
    background-color: #EEE;
}

.NAVEGACION.estilo7 h4 {
    text-align: center;
}

.NAVEGACION.estilo7 nav {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 2em auto 4em;
    max-width: 79em
}

.NAVEGACION.estilo7 .item-navegacion {
    align-items: center;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    justify-content: space-around;
    flex: 1 1 0;
    max-width: 18em;
    min-width: 18em;
    margin: 1em;

    background-color: white;
    box-shadow: 1px 1px 12px #999;
}

.NAVEGACION.estilo7 .nav-item-graph {
    display: inherit;
    position: absolute;
    bottom: 0;    
    width: 100%;
    text-align: center;
    padding-bottom: 1em;
}

.NAVEGACION.estilo7 .nav-item-text {
    color: #666;

    padding: 1em;
    min-height: 4em;
    margin-bottom: 4em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    transition: all .3s ease;    
}
.NAVEGACION.estilo7 .nav-item-graph .icon
{
}
.NAVEGACION.estilo7 .nav-item-graph svg {
    fill: #666;
    width: 3em;
    height: 3em;
    transition: all .3s ease;
}


.NAVEGACION.estilo7 .item-navegacion:hover { }
.NAVEGACION.estilo7 .item-navegacion:hover .nav-item-text {
    color: inherit;
}
.NAVEGACION.estilo7 .item-navegacion:hover .nav-item-graph svg{
    transform: scale(1.2);
}

.NAVEGACION.estilo7 .item-navegacion:nth-child(12n+1) svg { fill: #008fd4; }
.NAVEGACION.estilo7 .item-navegacion:nth-child(12n+2) svg { fill: #f3a231; }
.NAVEGACION.estilo7 .item-navegacion:nth-child(12n+3) svg { fill: #57c269; }
.NAVEGACION.estilo7 .item-navegacion:nth-child(12n+4) svg { fill: #b81757; }
.NAVEGACION.estilo7 .item-navegacion:nth-child(12n+5) svg { fill: #7e5fa1; }
.NAVEGACION.estilo7 .item-navegacion:nth-child(12n+6) svg { fill: #f90; }
.NAVEGACION.estilo7 .item-navegacion:nth-child(12n+7) svg { fill: #d7cbb7; }
.NAVEGACION.estilo7 .item-navegacion:nth-child(12n+8) svg { fill: #dd6566; }
.NAVEGACION.estilo7 .item-navegacion:nth-child(12n+9) svg { fill: #454d5c; }
.NAVEGACION.estilo7 .item-navegacion:nth-child(12n+10) svg { fill: #36a6b7; }
.NAVEGACION.estilo7 .item-navegacion:nth-child(12n+11) svg { fill: #c6ce00; }
.NAVEGACION.estilo7 .item-navegacion:nth-child(12n+12) svg { fill: #088a08; }


/************ ESTILO 8 -  ****************************/
/*****************************************************/
.NAVEGACION.estilo8 {
    background-color: #666;
}

.NAVEGACION.estilo8 h4 {
    text-align: center;
    color: white;
}

.NAVEGACION.estilo8 nav{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 2em auto 4em;
    max-width: 70em
}

.NAVEGACION.estilo8 .item-navegacion {
    align-items: center;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    justify-content: space-around;
    flex: 1 1 0;
    max-width: 18em;
    min-width: 18em;
    margin: 1em;

    background-color: inherit;
    /*box-shadow: 1px 1px 12px #999;*/
}

.NAVEGACION.estilo8 .nav-item-graph {
    display: inherit;
    position: absolute;
    bottom: 0;    
    width: 100%;
    text-align: center;
    padding-bottom: 1em;
}

.NAVEGACION.estilo8 .nav-item-text {
    color: white;
    
    padding: 1em;
    min-height: 4em;
    margin-bottom: 4em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    transition: all .3s ease;  

}
.NAVEGACION.estilo8 .nav-item-graph .icon
{
}
.NAVEGACION.estilo8 .nav-item-graph svg {
    fill: white;
    width: 3em;
    height: 3em;
    transition: all .3s ease;
}


.NAVEGACION.estilo8 .item-navegacion:hover { }
.NAVEGACION.estilo8 .item-navegacion:hover .nav-item-text {
    opacity: 1;
}
.NAVEGACION.estilo8 .item-navegacion:hover .nav-item-graph svg{
    transform: scale(1.2);
}
/*
.NAVEGACION.estilo8 .item-navegacion:nth-child(12n+1) svg { fill: #008fd4; }
.NAVEGACION.estilo8 .item-navegacion:nth-child(12n+2) svg { fill: #f3a231; }
.NAVEGACION.estilo8 .item-navegacion:nth-child(12n+3) svg { fill: #57c269; }
.NAVEGACION.estilo8 .item-navegacion:nth-child(12n+4) svg { fill: #b81757; }
.NAVEGACION.estilo8 .item-navegacion:nth-child(12n+5) svg { fill: #7e5fa1; }
.NAVEGACION.estilo8 .item-navegacion:nth-child(12n+6) svg { fill: #f90; }
.NAVEGACION.estilo8 .item-navegacion:nth-child(12n+7) svg { fill: #d7cbb7; }
.NAVEGACION.estilo8 .item-navegacion:nth-child(12n+8) svg { fill: #dd6566; }
.NAVEGACION.estilo8 .item-navegacion:nth-child(12n+9) svg { fill: #454d5c; }
.NAVEGACION.estilo8 .item-navegacion:nth-child(12n+10) svg { fill: #36a6b7; }
.NAVEGACION.estilo8 .item-navegacion:nth-child(12n+11) svg { fill: #c6ce00; }
.NAVEGACION.estilo8 .item-navegacion:nth-child(12n+12) svg { fill: #088a08; }
*/


/************ ESTILO 9 -  ****************************/
/**************^^^^^^^^^^^^^^^^^^*****************************/
.NAVEGACION.estilo9 {
    background-color: whitesmoke;
}


.NAVEGACION.estilo9 h4 {
    text-align: center;
}

.NAVEGACION.estilo9 nav {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 2em auto 4em;
    max-width: 70em
}

.NAVEGACION.estilo9 .item-navegacion {
    align-items: center;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    justify-content: space-around;
    flex: 1 1 0;
    max-width: 18em;
    min-width: 18em;
    margin: 1em;

    background-color: inherit;
    /*box-shadow: 1px 1px 12px #999;*/
}

.NAVEGACION.estilo9 .nav-item-graph {
    display: inherit;
    position: absolute;
    bottom: 0;    
    width: 100%;
    text-align: center;
    padding-bottom: 1em;
}

.NAVEGACION.estilo9 .nav-item-text {
    color: inherit;
    

    padding: 1em;
    min-height: 4em;
    margin-bottom: 4em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    transition: all .3s ease;  

}
.NAVEGACION.estilo9 .nav-item-graph .icon
{
}
.NAVEGACION.estilo9 .nav-item-graph svg {
    fill: currentColor;
    width: 3em;
    height: 3em;
    transition: all .3s ease;
}


.NAVEGACION.estilo9 .item-navegacion:hover { }
.NAVEGACION.estilo9 .item-navegacion:hover .nav-item-text {
    opacity: 1;
}
.NAVEGACION.estilo9 .item-navegacion:hover .nav-item-graph svg{
    transform: scale(1.2);
}


/************ ESTILO 10 -  ****************************/
/*****************************************************/
.NAVEGACION.estilo10 {
    background-color: whitesmoke;
}

.NAVEGACION.estilo10 h4 {
    text-align: center;
}

.NAVEGACION.estilo10 nav {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 2em auto 3em;
    max-width: 70em;
}

.NAVEGACION.estilo10 .item-navegacion {
    align-items: center;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    justify-content: space-around;
    flex: 1 1 0;
    
    margin: 0.2em;
    font-weight: bold;
    background-color: currentColor;

    max-width: 15em;
    min-width: 20em;

    transition: all .4s ease; /*, background-color .3s ease .1s;*/
}

.NAVEGACION.estilo10 .item-navegacion:hover {
    box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.5);
    background: #FFF;   
}

.NAVEGACION.estilo10 .nav-item-graph {
    display: inherit;
    position: absolute;
    bottom: 0;
    height: 4em;
    width: 100%;
    text-align: center;
}

.NAVEGACION.estilo10 .nav-item-text {
    padding: 1em;
    min-height: 4em;
    margin-bottom: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    font-size: 1.2em;
    transition: all .4s ease;    
}
.NAVEGACION.estilo10 .item-navegacion:hover .nav-item-text {
   /* color: inherit;*/
}

.NAVEGACION.estilo10 .nav-item-graph .icon
{
}
.NAVEGACION.estilo10 .nav-item-graph svg {
    width: 3em;
    height: 3em;
    fill: white;
    transition: all .4s ease;
}
.NAVEGACION.estilo10 .item-navegacion:hover .nav-item-graph svg{
    /*fill: currentColor;*/
}

.NAVEGACION.estilo10 .item-navegacion:nth-child(12n+1) { background-color: #008fd4; }
.NAVEGACION.estilo10 .item-navegacion:nth-child(12n+2) { background-color: #f3a231; }
.NAVEGACION.estilo10 .item-navegacion:nth-child(12n+3) { background-color: #57c269; }
.NAVEGACION.estilo10 .item-navegacion:nth-child(12n+4) { background-color: #b81757; }
.NAVEGACION.estilo10 .item-navegacion:nth-child(12n+5) { background-color: #7e5fa1; }
.NAVEGACION.estilo10 .item-navegacion:nth-child(12n+6) { background-color: #36a6b7; }
.NAVEGACION.estilo10 .item-navegacion:nth-child(12n+7) { background-color: #d7cbb7; }
.NAVEGACION.estilo10 .item-navegacion:nth-child(12n+8) { background-color: #dd6566; }
.NAVEGACION.estilo10 .item-navegacion:nth-child(12n+9) { background-color: #454d5c; }
.NAVEGACION.estilo10 .item-navegacion:nth-child(12n+10) { background-color: #36a6b7; }
.NAVEGACION.estilo10 .item-navegacion:nth-child(12n+11) { background-color: #c6ce00; }
.NAVEGACION.estilo10 .item-navegacion:nth-child(12n+12) { background-color: #088a08; }


/************ ESTILO 11 -  ****************************/
/*****************************************************/
.NAVEGACION.estilo11{

}
.NAVEGACION.estilo11 h4 {
    text-align: center;
    font-size: 1.8em;
}

.NAVEGACION.estilo11 nav
{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 2em auto 0em;
}
.NAVEGACION.estilo11 nav.items-7 {max-width: 60em;}
@media screen and (max-width: 1090px) { .NAVEGACION.estilo11 nav.items-6 {max-width: 50em;} }
@media screen and (max-width: 908px)  { .NAVEGACION.estilo11 nav.items-5 {max-width: 50em;} }
@media screen and (max-width: 728px)  { .NAVEGACION.estilo11 nav.items-4 {max-width: 36em;} }


.NAVEGACION.estilo11 .item-navegacion
{
    display: flex;
    flex-flow: column;
    width: 12em;
    align-items: center;
    text-decoration: none;
    margin: 1em;
}

.NAVEGACION.estilo11 .nav-item-graph svg {
    max-width: 2em;
    max-height: 2em;
    fill: currentColor;
}


/* estilo11 Icono *******************************/
.NAVEGACION.estilo11 .nav-item-graph {
    font-size: 1.5rem;
    position: relative;
    border-radius: 50%; 
    padding: 5px;
    margin: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: color 0.3s ease, box-shadow 0.3s ease, transform 0.4s ease;

    height: 3em;
    width: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0em;     
}
.NAVEGACION.estilo11 .nav-item-graph svg { fill: white;}

.NAVEGACION.estilo11 .item-navegacion:hover .nav-item-graph {
    box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.3);
}

.NAVEGACION.estilo11 .nav-item-graph {
        background-color: currentColor;
}

/* estilo11 texto *******************************/
.NAVEGACION.estilo11 .nav-item-text {
    position: relative;
    padding: .5em;
    text-align: center;
    min-height: 3em;
    width: 100%;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.143em;
    color: #444;
}
.NAVEGACION.estilo11 .item-navegacion:hover .nav-item-text 
{ text-decoration: underline; }



/************ ESTILO 12 -  ****************************/
/*****************************************************/
.NAVEGACION.estilo12{

}
.NAVEGACION.estilo12 h4 {
    text-align: center;
    font-size: 1.8em;
}

.NAVEGACION.estilo12 nav
{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 2em auto 0em;
    max-width: 65em;
    width: 100%;
}
.NAVEGACION.estilo12 nav.items-7 {max-width: 60em;}
@media screen and (max-width: 1090px) { .NAVEGACION.estilo12 nav.items-6 {max-width: 50em;} }
@media screen and (max-width: 908px)  { .NAVEGACION.estilo12 nav.items-5 {max-width: 50em;} }
@media screen and (max-width: 728px)  { .NAVEGACION.estilo12 nav.items-4 {max-width: 36em;} }


.NAVEGACION.estilo12 .item-navegacion
{
    display: flex;
    flex-flow: column;
    width: 11em;
    align-items: center;
    text-decoration: none;
    margin: 1em;
}

.NAVEGACION.estilo12 .nav-item-graph svg {
    max-width: 2em;
    max-height: 2em;
    fill: currentColor;
}


/* estilo12 Icono *******************************/
.NAVEGACION.estilo12 .nav-item-graph {
    font-size: 1.5rem;
    position: relative;
    border-radius: 50%; 
    padding: 5px;
    margin: 3px;
    box-shadow: 0 1px 3px currentColor, 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: color 0.3s ease, box-shadow 0.3s ease, transform 0.4s ease;

    background-color: transparent;
    height: 3em;
    width: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0em;     
}
_:-ms-fullscreen, :root .NAVEGACION.estilo12 .nav-item-graph {box-shadow: 1px 1px 12px currentColor, 1px 2px 2px rgba(0,0,0,1);}


.NAVEGACION.estilo12 .nav-item-graph svg { fill: currentColor;}

.NAVEGACION.estilo12 .item-navegacion:hover .nav-item-graph {
    box-shadow: 1px 1px 15px currentColor;
}

/* estilo12 texto *******************************/
.NAVEGACION.estilo12 .nav-item-text {
    position: relative;
    padding: .5em;
    text-align: center;
    min-height: 3em;
    width: 100%;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.143em;
    color: #444;
}
.NAVEGACION.estilo12 .item-navegacion:hover .nav-item-text 
{ text-decoration: underline; }




/************ ESTILO 13 -  ****************************/
/*****************************************************/
.NAVEGACION.estilo13{

}
.NAVEGACION.estilo13 h4 {
    text-align: center;
    font-size: 1.8em;
}

.NAVEGACION.estilo13 nav
{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 2em auto 0em;
}
.NAVEGACION.estilo13 nav.items-7 {max-width: 60em;}
@media screen and (max-width: 1090px) { .NAVEGACION.estilo13 nav.items-6 {max-width: 50em;} }
@media screen and (max-width: 908px)  { .NAVEGACION.estilo13 nav.items-5 {max-width: 50em;} }
@media screen and (max-width: 728px)  { .NAVEGACION.estilo13 nav.items-4 {max-width: 36em;} }


.NAVEGACION.estilo13 .item-navegacion
{
    display: flex;
    flex-flow: column;
    width: 11em;
    align-items: center;
    text-decoration: none;
    margin: 1em;
}

.NAVEGACION.estilo13 .nav-item-graph svg {
    max-width: 2em;
    max-height: 2em;
    fill: #444;
}


/* estilo13 Icono *******************************/
.NAVEGACION.estilo13 .nav-item-graph {
    font-size: 1.5rem;
    position: relative;
    border-radius: 50%; 
    padding: 5px;
    margin: 3px;
    
    transition: color 0.3s ease, box-shadow 0.3s ease, transform 0.4s ease;

    background-color: transparent;
    height: 3em;
    width: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0em;     
}
.NAVEGACION.estilo13 .nav-item-graph svg { fill: #444;}

.NAVEGACION.estilo13 .item-navegacion:hover .nav-item-graph {
    
}

/* estilo13 texto *******************************/
.NAVEGACION.estilo13 .nav-item-text {
    position: relative;
    padding: .5em;
    text-align: center;
    min-height: 3em;
    width: 100%;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.143em;
    color: #444;
}
.NAVEGACION.estilo13 .item-navegacion:hover .nav-item-text 
{ text-decoration: underline; }


/************ ESTILO 14 -  ****************************/
/*****************************************************/
.NAVEGACION.estilo14 {
    /*background-color: whitesmoke;*/
}

.NAVEGACION.estilo14 h4 {
    text-align: center;
}

.NAVEGACION.estilo14 nav {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 2em auto 3em;
    max-width: 70em;
}

.NAVEGACION.estilo14 .item-navegacion {
    align-items: center;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    justify-content: space-around;
    flex: 1 1 0;
    
    margin: 1.5em;
    font-weight: bold;
    border-radius: .5em;
    background-color: inherit;
    
    border: 1px solid transparent;

    max-width: 15em;
    min-width: 20em;

    transition: all .4s ease; /*, background-color .3s ease .1s;*/
}

.NAVEGACION.estilo14 .item-navegacion:hover {
    box-shadow: none;
    background: inherit;  
    border-color: currentColor; 
}

.NAVEGACION.estilo14 .nav-item-graph {
    display: inherit;
    position: absolute;
    bottom: 0;
    height: 4em;
    width: 100%;
    text-align: center;
}

.NAVEGACION.estilo14 .nav-item-text {
    padding: 1em;
    min-height: 5em;
    margin-bottom: 0em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.2em;
    transition: all .4s ease;    

    color: currentColor;
}
.NAVEGACION.estilo14 .item-navegacion:hover .nav-item-text {
    color: inherit;
}

.NAVEGACION.estilo14 .nav-item-graph .icon
{
}
.NAVEGACION.estilo14 .nav-item-graph svg {
    width: 3em;
    height: 3em;
    fill: white;
    transition: all .4s ease;
}
.NAVEGACION.estilo14 .item-navegacion:hover .nav-item-graph svg{
    fill: currentColor;
}

.NAVEGACION.estilo14 .nav-item-descriptionn {
    text-align: center;
    color: initial;
    font-weight: lighter;
    text-transform: none;
    padding: 1em;    

    display: block;
}


/************ ESTILO 15 -  ****************************/
/*****************************************************/
.NAVEGACION.estilo15 {
    /*background-color: whitesmoke;*/
}

.NAVEGACION.estilo15 h4 {
    text-align: center;
}

.NAVEGACION.estilo15 nav {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 2em auto 3em;
    max-width: 70em;
}

.NAVEGACION.estilo15 .item-navegacion {
    
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    display: flex;
    justify-content: center;
    flex: 1 1 0;
    
    margin: 1.5em;
    font-weight: bold;
    background-color: whitesmoke;
    
    border: 1px solid transparent;

    max-width: 15em;
    min-width: 20em;

    overflow: hidden;
    min-height: 12em;

    transition: all .4s ease; /*, background-color .3s ease .1s;*/
}

.NAVEGACION.estilo15 .item-navegacion:hover {
    box-shadow: none;
    /*background: inherit;  */
    /*border-color: currentColor; */
}

.NAVEGACION.estilo15 .nav-item-graph {
    display: inherit;
    position: absolute;
    bottom: 0;
    height: 4em;
    width: 100%;
    text-align: center;
}

.NAVEGACION.estilo15 .nav-item-text {
    padding: 1em;
    min-height: 5em;
    margin-bottom: 0em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.2em;
    transition: all .4s ease;    

    color: currentColor;
}
.NAVEGACION.estilo15 .item-navegacion:hover .nav-item-text {
    color: transparent;
    transform: translate(100%,0);    
}

.NAVEGACION.estilo15 .nav-item-graph .icon
{
}
.NAVEGACION.estilo15 .nav-item-graph svg {
    width: 3em;
    height: 3em;
    fill: white;
    transition: all .4s ease;
}
.NAVEGACION.estilo15 .item-navegacion:hover .nav-item-graph svg{
    fill: currentColor;
}

.NAVEGACION.estilo15 .nav-item-descriptionn {
    position: absolute;
    top: 20%;
    left: 0;
    width: 100%;
    height: 100%;

    text-align: center;
    color: initial;
    font-weight: lighter;
    text-transform: none;
    padding: 1em;    
    box-sizing: border-box;

    transform: translate(0,100%);
    -o-transform: translate(0,100%);
    -ms-transform: translate(0,100%);
    -moz-transform: translate(0,100%);
    -webkit-transform: translate(0,100%);
    transition: all ease .7s;

    background-color: rgba(0,0,0,0.05);

    display: block;
}

.NAVEGACION.estilo15 .item-navegacion:hover .nav-item-descriptionn
{
    transform: translate(0,0);
}



/************ ESTILO 16 -  ****************************/
/*****************************************************/
.NAVEGACION.estilo16 .nav-intro {
	text-align: center;
}
.NAVEGACION.estilo16 .nav-intro p
{
    font-size: 1.4em;
    margin: 0.2em auto 1.5em; 
}

.NAVEGACION.estilo16{

}
.NAVEGACION.estilo16 h4 {
    font-size: 1.8em;
}

.NAVEGACION.estilo16 nav {
	display: flex;
	flex-flow: row wrap;
	margin: 2em 0em 4em 0em;
	padding-left: 2em;
	box-sizing: border-box;
}
.NAVEGACION.estilo16 nav {max-width: 882px;}
@media screen and (max-width: 900px)  { .NAVEGACION.estilo16 nav {max-width: 615px;} }
@media screen and (max-width: 602px)  { .NAVEGACION.estilo16 nav {justify-content: center;} }
@media screen and (max-width: 400px)  { .NAVEGACION.estilo16 nav {padding-left: 0;} }

.NAVEGACION.estilo16 .item-navegacion {
	display: flex;
	flex-flow: row;
	width: 20em;
	text-decoration: none;
	margin: 0em;
    padding: 0.5em 1em;
    box-sizing: border-box;
    
}

.NAVEGACION.estilo16 .nav-item-graph svg {
    max-width: 1.2em;
    max-height: 1.2em;
    /* fill: #444; */
}


/* estilo16 Icono *******************************/
.NAVEGACION.estilo16 .nav-item-graph {
    font-size: 1.5rem;
    position: relative;
    border-radius: 50%; 
    padding: 0px;
    margin: 0px;
    
    transition: color 0.3s ease, box-shadow 0.3s ease, transform 0.4s ease;

    background-color: transparent;
    height: 2em;
    width: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0em;     
}
/* .NAVEGACION.estilo16 .nav-item-graph svg { fill: #444;} */

.NAVEGACION.estilo16 .item-navegacion:hover .nav-item-graph {
    
}

/* estilo16 texto *******************************/
.NAVEGACION.estilo16 .nav-item-text {
    position: relative;
    padding: 0em;
    min-height: 2em;
    width: 100%;
    text-decoration: none;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    font-size: 1.125em;
    /* color: #444; */
}




/************ ESTILO 17 -  ****************************/
/*****************************************************/
.NAVEGACION.estilo17 .nav-intro {
	text-align: center;
}
.NAVEGACION.estilo17 .nav-intro p
{
    font-size: 1.4em;
    margin: 0.2em auto 1.5em; 
}

.NAVEGACION.estilo17{

}
.NAVEGACION.estilo17 h4 {
    font-size: 1.8em;
}

.NAVEGACION.estilo17 nav {
	display: flex;
	flex-flow: row wrap;
	margin: 2em 0em 4em 0em;
	padding-left: 2em;
	box-sizing: border-box;
}
.NAVEGACION.estilo17 nav {max-width: 882px;}
@media screen and (max-width: 900px)  { .NAVEGACION.estilo17 nav {max-width: 615px;} }
@media screen and (max-width: 602px)  { .NAVEGACION.estilo17 nav {justify-content: center;} }
@media screen and (max-width: 400px)  { .NAVEGACION.estilo17 nav {padding-left: 0;} }

.NAVEGACION.estilo17 .item-navegacion {
	display: flex;
	flex-flow: row;
	width: 20em;
	text-decoration: none;
	margin: 0em;
    padding: 0.5em 1em;
    box-sizing: border-box;
    
}




/* estilo17 Icono *******************************/
.NAVEGACION.estilo17 .nav-item-graph svg {
    width: 1em;
    height: 1em;
    /* fill: #444; */
}
.NAVEGACION.estilo17 .nav-item-graph {
    font-size: 1.5rem;
    position: relative;
    border-radius: 50%; 
    padding: 0.5em;
    margin: 0.2em;
    
    transition: color 0.3s ease, box-shadow 0.3s ease, transform 0.4s ease;

    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #db70933d;
    flex: 1 0 auto;
}

.NAVEGACION.estilo17 .item-navegacion:hover .nav-item-graph {
    
}

/* estilo17 texto *******************************/
.NAVEGACION.estilo17 .nav-item-text {
    position: relative;
    padding: 0 0 0 .5em;
    min-height: 2em;
    width: 100%;
    text-decoration: none;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    font-size: 1.125em;
    /* color: #444; */
}




/************ ESTILO 18 -  ****************************/
/*****************************************************/
.NAVEGACION.estilo18 .nav-intro {
	text-align: center;
}
.NAVEGACION.estilo18 .nav-intro p
{
    font-size: 1.4em;
    margin: 0.2em auto 1.5em; 
}

.NAVEGACION.estilo18{

}
.NAVEGACION.estilo18 h4 {
    font-size: 1.8em;
}

.NAVEGACION.estilo18 nav
{
    display: flex;
    flex-flow: row wrap;
	margin: 2em 0em 4em 0em;
	padding-left: 2em;
	box-sizing: border-box;
}
.NAVEGACION.estilo18 nav {max-width: 882px;}
@media screen and (max-width: 900px)  { .NAVEGACION.estilo18 nav {max-width: 615px;} }
@media screen and (max-width: 602px)  { .NAVEGACION.estilo18 nav {justify-content: center;} }
@media screen and (max-width: 400px)  { .NAVEGACION.estilo18 nav {padding-left: 0;} }


.NAVEGACION.estilo18 .item-navegacion
{
    display: flex;
    flex-flow: row;
    width: 20em;
    text-decoration: none;
    margin: 0em;
    padding: 0.5em 1em;
    box-sizing: border-box;
}

.NAVEGACION.estilo18 .nav-item-graph svg {
    width: 1em;
    height: 1em;
    fill: white;
}


/* estilo18 Icono *******************************/
.NAVEGACION.estilo18 .nav-item-graph {
    font-size: 1.5rem;
    position: relative;
    border-radius: 50%; 
    padding: 0.5em;
    margin: 0.2em;
    
    transition: color 0.3s ease, box-shadow 0.3s ease, transform 0.4s ease;

    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: currentColor;
    flex: 1 0 auto;
}

.NAVEGACION.estilo18 .item-navegacion:hover .nav-item-graph {
    
}

/* estilo18 texto *******************************/
.NAVEGACION.estilo18 .nav-item-text {
    position: relative;
    padding: 0 0 0 .5em;
    min-height: 2em;
    width: 100%;
    text-decoration: none;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    font-size: 1.125em;
    /* color: #444; */
}

.NAVEGACION.estilo18 .item-navegacion:nth-child(12n+1) .nav-item-graph { background-color: #008fd4; }
.NAVEGACION.estilo18 .item-navegacion:nth-child(12n+2) .nav-item-graph{ background-color: #f3a231; }
.NAVEGACION.estilo18 .item-navegacion:nth-child(12n+3) .nav-item-graph{ background-color: #57c269; }
.NAVEGACION.estilo18 .item-navegacion:nth-child(12n+4) .nav-item-graph{ background-color: #b81757; }
.NAVEGACION.estilo18 .item-navegacion:nth-child(12n+5) .nav-item-graph{ background-color: #7e5fa1; }
.NAVEGACION.estilo18 .item-navegacion:nth-child(12n+6) .nav-item-graph{ background-color: #36a6b7; }
.NAVEGACION.estilo18 .item-navegacion:nth-child(12n+7) .nav-item-graph{ background-color: #d7cbb7; }
.NAVEGACION.estilo18 .item-navegacion:nth-child(12n+8) .nav-item-graph{ background-color: #dd6566; }
.NAVEGACION.estilo18 .item-navegacion:nth-child(12n+9) .nav-item-graph{ background-color: #454d5c; }
.NAVEGACION.estilo18 .item-navegacion:nth-child(12n+10) .nav-item-graph{ background-color: #36a6b7; }
.NAVEGACION.estilo18 .item-navegacion:nth-child(12n+11) .nav-item-graph{ background-color: #c6ce00; }
.NAVEGACION.estilo18 .item-navegacion:nth-child(12n+12) .nav-item-graph{ background-color: #088a08; }







/************ ESTILO 19 -  ****************************/
/*****************************************************/
.NAVEGACION.estilo19 .nav-intro {
	text-align: center;
}
.NAVEGACION.estilo19 .nav-intro p
{
    font-size: 1.4em;
    margin: 0.2em auto 1.5em; 
}

.NAVEGACION.estilo19{

}
.NAVEGACION.estilo19 h4 {
    font-size: 1.8em;
}

.NAVEGACION.estilo19 nav {
	display: flex;
	flex-flow: row wrap;
	margin: 2em 0em 4em 0em;
	padding-left: 2em;
	box-sizing: border-box;
}
.NAVEGACION.estilo19 nav {max-width: 882px;}
@media screen and (max-width: 900px)  { .NAVEGACION.estilo19 nav {max-width: 615px;} }
@media screen and (max-width: 602px)  { .NAVEGACION.estilo19 nav {justify-content: center;} }
@media screen and (max-width: 400px)  { .NAVEGACION.estilo19 nav {padding-left: 0;} }

.NAVEGACION.estilo19 .item-navegacion {
	display: flex;
	flex-flow: row;
	width: 20em;
	text-decoration: none;
	margin: 0em;
    padding: 0.5em 1em;
    box-sizing: border-box;
    
}


/* estilo19 Icono *******************************/
.NAVEGACION.estilo19 .nav-item-graph svg {
    width: 1em;
    height: 1em;
    fill: #333; 
}
.NAVEGACION.estilo19 .nav-item-graph {
    font-size: 1.5rem;
    position: relative;
    border-radius: 50%; 
    padding: 0.5em;
    margin: 0.2em;
    
    transition: color 0.3s ease, box-shadow 0.3s ease, transform 0.4s ease;

    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ddd;
    flex: 1 0 auto;
}

.NAVEGACION.estilo19 .item-navegacion:hover .nav-item-graph {
    
}

/* estilo19 texto *******************************/
.NAVEGACION.estilo19 .nav-item-text {
    position: relative;
    padding: 0 0 0 .5em;
    min-height: 2em;
    width: 100%;
    text-decoration: none;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    font-size: 1.125em;
    /* color: #444; */
}


/************ ESTILO 20 -  ****************************/
/*****************************************************/
.NAVEGACION.estilo20 .nav-intro {
	text-align: center;
}
.NAVEGACION.estilo20 .nav-intro p
{
    font-size: 1.4em;
    margin: 0.2em auto 1.5em; 
}

.NAVEGACION.estilo20{

}
.NAVEGACION.estilo20 h4 {
    text-align: center;
    font-size: 1.8em;
}

.NAVEGACION.estilo20 nav
{
    display: flex;
    flex-flow: row wrap;
    /* justify-content: center; */
    margin: 2em 0em 4em;
}

/* .NAVEGACION.estilo20 nav.items-7 {max-width: 60em;}
@media screen and (max-width: 1090px) { .NAVEGACION.estilo20 nav.items-6 {max-width: 50em;} }
@media screen and (max-width: 908px)  { .NAVEGACION.estilo20 nav.items-5 {max-width: 50em;} }
@media screen and (max-width: 728px)  { .NAVEGACION.estilo20 nav.items-4 {max-width: 36em;} } */


.NAVEGACION.estilo20 .item-navegacion
{
    display: flex;
    flex-flow: column;
    width: 24em;
    align-items: flex-start;
    text-decoration: none;
    margin: 1em;
    position: relative;
}



/* estilo20 Icono *******************************/
.NAVEGACION.estilo20 .nav-item-graph svg {
    max-width: 1.2em;
    max-height: 1.2em;
    /* fill: #444; */
}
.NAVEGACION.estilo20 .nav-item-graph {
    font-size: 1.5rem;
    position: absolute;
    border-radius: 50%; 
    padding: 0px;
    margin: 0px;
    
    transition: color 0.3s ease, box-shadow 0.3s ease, transform 0.4s ease;

    background-color: transparent;
    height: 2em;
    width: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0em;     
    left: 0;
    top: -0.2em;
}
/* .NAVEGACION.estilo20 .nav-item-graph svg { fill: #444;} */

.NAVEGACION.estilo20 .item-navegacion:hover .nav-item-graph {
    
}

/* estilo20 texto *******************************/
.NAVEGACION.estilo20 .nav-item-text {
	position: relative;
	padding: 0em;
	/* text-align: center; */
	min-height: 2em;
	width: 100%;
	text-decoration: none;
	display: flex;
	align-items: center;
	/* justify-content: center; */
	font-size: 1.125em;
	/* color: #444; */
	font-weight: bold;
	margin-left: 4rem;
	width: calc(100% - 4rem);
}

.NAVEGACION.estilo20 .nav-item-descriptionn {
	display: inherit;
	font-size: 0.9em;
	margin-left: 4rem;
	width: calc(100% - 4rem);
}
@media screen and (max-width: 730px)  {
    .NAVEGACION.estilo20 nav { justify-content: center; }    
}
@media screen and (max-width: 1090px)  {
    .NAVEGACION.estilo20 nav {max-width: 56em;} 
}