@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
   src: local("Open Sans Regular"), local("OpenSans-Regular"), url("http://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2") format("woff2");
   unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
 --color-pru: green;
 --color-border-contenedor: rgba(30, 100, 0, 10);  /* BORDE rgba(0, 0, 0, 0.1); */   
 --cssColorBack: blue; /*#c00;*/
 --cssColorText: #fff;
}

/* IE11 compatibility */
html {
 --color-pru: green;    
 --color-border-contenedor: rgba(0, 0, 0, 0);    
 --cssColorBack:blue ; 
 --cssColorText: #fff;
}

/*
.pruebacolor {
 display:block;   
    
 width: 300px;
 height: 300px;
    
 background-color: var(--color-border-contenedor);
    
}

*/

* {
  box-sizing: border-box;  
}

/*
#container {
  display: flex;
  flex-flow: row wrap;
}

.child {
  height: 50px;
  background: #09f;
  flex: 1 0 100%;
  border: 5px solid white;
  border-radius: 10px;
}

@media (min-width: 400px) {
  .child {
    flex-basis: 50%;
*/
    /*flex-direction: column;*/
/*
  }
}
*/
/*
@media (min-width: 900px) {
  .child {
    flex-basis: 25%;
  }
}
*/

/*----------- Prueba ----------*/
#contenedor {
    display: flex;
    flex-flow: row wrap;
    
    justify-content: center;   /* Horizontalmente */
    align-items: center;
    align-content: center;
    
    font-family: "Open Sans";
    font-style: normal;
    font-weight: normal;
}

.item {
  margin: 10px;
  width: 22%;    /* Para que quepan 4 en mayor de 1024px de ancho de pantalla*/  
}
                                        
@media (max-width: 1024px) {
      .item {
             width: 30% !important; /* Para que quepan 3 */
}}

@media (max-width: 700px) {
      .item {
             width: 47% !important; /* Para que quepan 2 */
}}


/* Para que quepan 1 */
/*
@media (max-width: 357px) {         
      .item {
             width: 90% !important; 
}}
*/                                        
/*-----------------------------*/



/*----------- Título para las ofertas FIJO en el top --------- */
#ofertas-titulo {
    display:block;
    flex: none;
    width: 100%;  
    height: 4em;
    position:sticky;
    top: 0px;
}

.titulo-oferta {
/* color: rgba(90,90,90);*/
 font-family:'Open Sans';
 font-style: normal;
 font-size:28px;
 font-weight: 600;
 width: 100%;
 padding: 10px;
 text-align: center;
 /*margin: 0px -1px 0px -1px;*/

 color: var(--cssColorText, black); /*#fff;*/
 /*background-color: var( --cssColorBack ); *//*#c00; #606060; #c00;*/
 background-color: var( --color-pru );
 box-shadow:0 1px 5px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 0, 0, 0.5);
}
/*-------- FIN Título Ofertas ----------------*/


/*----------- Zoom producto tipo 1 --------- */
#layer-ventana  {
    display: flex;
    flex-flow: column;

    /* Características como flex padre de una columna para sus items */
    /*
    justify-content: center;
    align-items: center;  
    */
    align-items: center;
    /* Centrado de todas las filas */
    
    /*margin: 5px 5px 5px 5px;*/
    padding: 5px 5px 5px 5px;
    z-index: 900;  /* Para que se ponga encima de todos los demás, cuanto más alto el número más encima */
    /*----------------------------------------------------------*/
    
    /* Características como flex padre de una columna para sus items */
    /*justify-content: space-between;*/
    /*align-items:center;*/ 
    /*margin: 5px 5px 5px 5px;*/
    width: 100%;

/*    height: 200px; */
    /*background: black;*/

    background: white;
    overflow-y: hidden;
}

.contenedor-zoom-fotosola img {
  height: 300px;
  width: auto;
  
  padding-top: 10px;
  /*flex-basis: 20%;*/   
  
  justify-content: center;
  align-items: center;

}


.contenedor-zoom-fotortf {
    display: flex;
    flex-flow: row;

    justify-content: space-around;

/*    
    height: 500px;
    */
    /*
    justify-content: space-around ;
    align-items: center;
    width: 100%;
    height:100%;
    flex-basis: 50%;
    
    
    margin-top: 20px;
    overflow-y:auto;
*/
    width: 100%;
    height:100%;
    margin-top: 6px;
    margin-left: 2em;
    margin-right: 2em;
    overflow-y: auto;
    
  /*  background: green; */

  
  border-bottom-right-radius: 15px;
  border-top-left-radius: 15px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: -1px 1px 10px -2px rgba(0, 0, 0, 0.4);  

  
}

.contenedor-zoom-fotosola {
    display: flex;
    flex-flow: row;

    justify-content: space-around;
    width: 100%;
    height:100%;
    margin-top: 6px;
    margin-left: 2em;
    margin-right: 2em;
    overflow-y: auto;
  
  border-bottom-right-radius: 15px;
  border-top-left-radius: 15px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: -1px 1px 10px -2px rgba(0, 0, 0, 0.4);  

  
}

.contenedor-zoom-fotosola  img {
  
  height: 400px;
  width: auto;
  margin: auto;

}

.contenedor-zoom-fotortf  img {
  
  height: 400px;
  width: auto;
  margin: auto;

  margin-left: 3%;
  margin-right: 3%;
  
}

.contenedor-zoom-fotortf .caract-rtf {
  /*flex-basis: 80%;*/
    
  /* align-self: center; */
  /*padding-top: 10px;*/
  
  
  flex-basis: 50%;
  padding: 10px 10px 10px 10px;
  margin-top: 3em;
  margin-bottom: 3em;
  

  
}

.contenedor-zoom-fotortf .caract-texto {
  /*flex-basis: 80%;*/
    
  /* align-self: center; */
  /*padding-top: 10px;*/
  
  font-family:'Open Sans';
  font-style: normal;
  font-size:13px;
  color: #707070;
  
  margin-top: 3em;
  margin-bottom: 3em;
  margin-right: 3em;
  /*
  margin: 3em 3em 3em 3em;
 */
  text-align: justify;
  line-height: 1.3em ;

  /*
  text-justify: distribute;
 
  flex-basis: 50%;
  padding: 10px 10px 10px 10px;
  margin-top: 3em;
  margin-bottom: 3em;
*/
}


/*
.contenedor-zoom-fotortf .caract-texto {
  flex-basis: 50%;
  padding: 10px 10px 10px 10px;
  margin-top: 3em;
  margin-bottom: 3em;
  
  text-align:left;
  font-family:'Open Sans';
  font-style: normal;
  font-size: 14px;
  font-weight: 400;
  width: 100%;

  margin-right: 3em;
  color: var( --cssColorBack );

  
}
*/

.titulo-cerrar {
  display:flex;   
  flex-flow: row;
  justify-content:space-between;
  width: 100%;    
}


.titulo-cerrar .ventana-titulo {
 text-align:left;
 font-family:'Open Sans';
 font-style: normal;
 font-size:28px;
 font-weight: 500;
 width: 100%;

 padding: 10px 10px 10px 10px;
 margin-right: 5px;
 margin-left: 45px;
 color: var( --cssColorBack );
 
 text-align: center;
 text-shadow: 1px 1px 2px #808080;
 
 /* 
 color:#c00;
 background: #404040;
*/ 
} 

.titulo-cerrar .ventana-cerrar {
 align-self: center;
 text-align:center;
 font-family:'Open Sans';
 font-style: normal;
 font-size:28px;
 font-weight: 600;
 width: 4em;
 height: auto;
 padding: 10px 10px 10px 10px;
  
 color:#c00;
 background: white;

 border-radius: 4px;
 border: 1px solid rgba(0, 0, 0, 0.1);

}


/* No subraye la X de cerrar */
.titulo-cerrar a {
    text-decoration: none;
}    
.titulo-cerrar .ventana-cerrar:hover {
  color:white;
  background:#c00;
  
}

/*-------------------------------------------*/



/*-------------------------------------------------------------------------------------------*/
/* Catálogo en Filas Zoom1,2,3,4,5,6 */
/*-------------------------------------------------------------------------------------------*/
.contenedor-fila-catalogo-zoom {
    display: flex;
    flex-flow: column;
    
    /* Características como flex padre de una columna para sus items */
    /*justify-content: space-between;*/
    /*align-items:center;*/ 
    /*margin: 5px 5px 5px 5px; */
    width: 100%;
    /*height: 144px;*/
    /*----------------------------------------------------------*/
   
    /* Características como item de un contenedor flex tipo row */
    /*flex-shrink: 0;*/  /* No se achica ancho automáticamente */
    /*-------------------------------------------------------------------------------------------*/
}

.contenedor-fila-catalogo-zoom-individual {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    
    width: 100%;   
    height: 144;
}

.foto-zoom {
  display: flex;
  flex-basis: 20%;   
  justify-content: center;
  align-items: center;

  /*max-width: 144px;*/

}
.foto-zoom img{
  height: 128px; 
  width: auto;
  /*padding-top: 5px;*/
  /*padding-left: 5px;*/
  justify-content: center;
               
  /*background-color:#c00;*/
}
/* Zoom 64,48  80,64  112,96  144,128  176,160  208,192*/
.linea-zoom1 {height: 64px;}
.zoom1 img   {height: 48px;}
.linea-zoom2 {height: 80px;}
.zoom2 img   {height: 64px;}
.linea-zoom3 {height: 112px;}
.zoom3 img   {height: 96px;}
.linea-zoom4 {height: 144px;}
.zoom4 img   {height: 128px;}
.linea-zoom5 {height: 176px;}
/*.zoom5 { max-width: 176px; min-width: 176px;} CUADRADO */
.zoom5 img   {height: 160px;}
.linea-zoom6 {height: 208px;}
.zoom6 img   {height: 192px;}


.texto-zoom {
  display: flex;
  flex-flow: column;    
  margin: 5px 5px 5px 5px;
  /*----------------------------------------------------------*/
  flex-basis: 60%;  

  order:3;
}

.texto-codigo-zoom {
    text-align:left;
    /*align-item: flex-start;*/
    color: GrayText;    
    font-size: 11px;
    padding-left: 10px;
}

.texto-titulo-zoom {
 text-align:left;
 font-family:'Open Sans';
 font-style: normal;
 font-size:18px;
 font-weight: 600;
 width: 100%;
 height: 70%;
 padding: 10px 10px 10px 10px;
 
 color:#404040;
 
} 

.precio-zoom {
/*    
 align-self: flex-start;   
*/
 flex-basis: auto;
 
 display:flex;
 flex-flow: row;
 align-self: center;
 order:2;
    
 color: var( --cssColorBack );  /*#c00;*/   
 background-color: var( --cssColorText );  /*#fff;*/
 
 font-family: "Open Sans";
 font-style: normal;
 font-weight: 600;
 font-size:18px;

 width: auto;
 padding: 10px;
 margin-bottom: 12px;
 margin-top: 15px;
 margin-right: 15px;
 
 
 border-bottom-right-radius: 15px;
 border-top-left-radius: 15px;
 border: 1px solid rgba(0, 0, 0, 0.1);

 box-shadow: -1px 1px 10px -2px rgba(0, 0, 0, 0.4);
 
}
   
/* Para que no subraye ningún link del contenedor */
#contenedor-fila-catalogo-detalle a:link { text-decoration: none;}
#contenedor-fila-catalogo-detalle a:visited { text-decoration: none;}

#contenedor-fila-catalogo-zoom a:link { text-decoration: none;}
#contenedor-fila-catalogo-zoom a:visited { text-decoration: none;}

/* ------ Cuando onMouseOver --------------*/    
.contenedor-fila-catalogo-zoom-individual:hover {
    border: 1px solid #bbb;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);
  /*  transition: box-shadow 0.30s linear; */
    background-color: var( --cssColorBack ); /*#c00;*/
}
.contenedor-fila-catalogo-zoom-individual:hover .foto-zoom { background-color:#fff; }
.contenedor-fila-catalogo-zoom-individual:hover .texto-codigo-zoom { color: var( --cssColorText ); } /*white; }*/ 
.contenedor-fila-catalogo-zoom-individual:hover .texto-titulo-zoom { color: var( --cssColorText ); } /*white; }*/
/*-------------------------------------------------------------------------------------------*/




/*---------- CATALOGO RESPONSIVE -----------------*/
#contenedor-fila-catalogo {
    display: flex;
    flex-flow: row wrap;
    
    justify-content: center;   /* Horizontalmente */
    align-items: center;
    align-content: center;
    
    /*
    display: flex;
    flex-flow: row nowrap;
    
    justify-content: center;   
    align-items: flex-start;  
    align-content: flex-start;
    */
    
    border: 1px solid var(--color-border-contenedor); /*rgba(0, 0, 0, 0.1);*/
    
    /*padding: 5px;
    margin: 5px;*/
    
    /*margin: auto;*/
    
    font-family: "Open Sans";
    font-style: normal;
    font-weight: normal;

    
    /*min-width: 25%;*/
    /* Para crear scroll automático vertical de las filas a partir de la altura que le digamos en px o % */
/*  overflow-y: auto;
    max-height: 60%;   /* Esto ver como asignarlo automáticamente en javascript en pixeles o porcentaje */
    /*width: 200px;*/
}
/*--------------------------------------------------------------------------------------------*/


/*-------------------------------------------------------------------------------------------*/
/*---------    Catálogo en modo de CUADROS                                          ---------*/
/*-------------------------------------------------------------------------------------------*/
.contenedor-columna-imagen-oferta {
    display: flex;
    flex-flow: column;
    
    
    /* Características como flex padre de una columna para sus items */
    justify-content: center;
    align-items: center; 
    margin: 5px 5px 5px 5px;
    /*----------------------------------------------------------*/
    
    /* Características como item de un contenedor flex tipo row */
    /*flex-shrink: 0;*/  /* No se achica ancho automáticamente */
    
    /* Lo que mide cada uno, es decir, caben 4 en el ancho del contenedor,
       partiendo de una pantalla de 1024, el catálogo es de 740px +- y no es el 25% porque hay
       que tener el margen para el efecto sombra al posicionarse
       23% son 4, 30% son 3 */
 /*   flex-basis: 30%; */  
    /*
    max-width: 30%;
    width: 30%;
    */
    /*----------------------------------------------------------*/

    width: 22%;    /* Para que quepan 4 en mayor de 1024px de ancho de pantalla*/  
}    


/* Para que quepan 3 */
@media (max-width: 1024px) {
      .contenedor-columna-imagen-oferta {
            width: 30% !important; 
}}
/* Para que quepan 2 */
@media (max-width: 700px) {
      .contenedor-columna-imagen-oferta {
             width: 47% !important; 
}}

/* Para que quepan 1 */
@media (max-width: 400px) {
      .contenedor-columna-imagen-oferta {
             width: 90% !important; 
}}





                                        
/*
@media (min-width: 900px) {
  .contenedor-columna-imagen-oferta {
    flex-basis: 23%;
  }
}

@media (min-width: 1200px) {
  .contenedor-columna-imagen-oferta {
    flex-basis: 15%;
  }
  .foto img {
    height: 176px;
    width: auto;
  }
}
*/

.contenedor-columna-imagen-oferta:hover {
    border: 1px solid #bbb;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.30s linear;
}






.contenedor-columna-imagen-oferta:hover .precio {
       color: var( --cssColorText ); /*#fff;*/
       background-color: var( --cssColorBack ); /*#c00;*/
       transition: background-color 0.30s ease-in-out;
}

.contenedor-columna-imagen-oferta:hover .codigo {
       color: var( --cssColorBack ); /*#c00;*/
       transition: background-color 0.30s ease-in-out;
}

.contenedor-columna-imagen-oferta:hover .titulo {
       color: var( --cssColorText ); /*#fff;*/
       background-color: var( --cssColorBack ); /*#c00;*/
       transition: background-color 0.30s ease-in-out;
}


.foto {
    
/* 
 display: flex;
 flex-flow: column;
 flex-basis: auto;   
*/
 /*height:200px;
 
 max-height: 90%;   
 max-width: 90%;   
 */
 }    

.foto img {

  height: 128px; 
  width: auto;

  /*margin: auto;
  max-width: 25%;*/

}

.precio {
 
 /*   
 flex-flow: row;
 flex-direction: column-reverse;
 align-self: flex-end;   
 */   
 display:flex;
 flex-flow: row;
 align-self: flex-end;   
    
 color:var( --cssColorBack ); /*#c00;*/
 background-color: var( --cssColorText ); /*#fff;*/
 font-family: "Open Sans";
 font-style: normal;
 font-weight: 600;
 font-size:18px;

 width: auto;
 padding: 10px;
 /*margin: 8px auto; 10px 10px 10px;*/
 margin-bottom: 12px;
 margin-top: 15px;
 margin-right: 15px;
 
 border-bottom-right-radius: 15px;
 border-top-left-radius: 15px;
 border: 1px solid rgba(0, 0, 0, 0.1);
 
 /*border: 0px solid #bbb;*/
 /*box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);*/

 box-shadow: -1px 1px 10px -2px rgba(0, 0, 0, 0.4);
 
 /*text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);*/
 
}

.integer {
    float:right;
    order:1;
}

.decimal {
    font-size:12px;
    float:right; 
    padding-left: 2px;  
    order:2 ;
}

.simbol {
 font-size:12px;
 float:right;
 padding-left: 7px;

 order:3 ;
}




/*------------------------------------------------*/
.codigo-zoom {
 
    display: flex;
    flex-flow: row;
    justify-content: space-around;
    align-self:center;

    color: GrayText;    
}

.codigo-zoom .codigo {
    font-size: 11px;
    /*margin: 5px 0px 2px 5px;*/
   /* align-self: left;*/
}

/*------------------------------------------------*/
    
.lineasep {
 width: 96%;   
 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 padding-top: 0px;
 padding-bottom: 0px;
 align-self: center;
}

.titulo {
 /*color: #444;*/

 color: rgba(90,90,90);
 font-family:'Open Sans';
 font-style: normal;
 font-size:13px;
 font-weight: 500;
 width: 100%;
 padding: 10px;
 margin: 0px -1px 0px -1px;
 
 color:#fff;
 background-color: #606060; /*#c00;*/
 }

.contenedor-columna-imagen-oferta:hover .contenedor-zoom {
   visibility: visible;    
   margin-top: -2px; 
}
 
 .contenedor-zoom {
   visibility: hidden;
   
   text-align:center; 
     
   font-family:'Open Sans';
   font-style: normal;
 
   font-size:28px;
   font-weight: 900;

   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
  
   width: 100%;

   border: 0px solid #ccc;
   align-items: center;
  
   color: #fff;
   background: rgba(0,0,0,0.2);
 }
 
 .contenedor-zoom a:link {
    color: #fff;
    text-decoration: none;
 }
 
.contenedor-zoom a:visited {
    color: #fff;
    text-decoration: none;
 }  
/*------------ FIN Catálogo modo CUADROS -----------------------------------------------------------


/*-------------------------------------------------------------------------------------------*/
/* Catálogo en Filas DETALLE  */
/*-------------------------------------------------------------------------------------------*/
.contenedor-fila-catalogo-detalle {
    display: flex;
    flex-flow: column;
    justify-content: flex-end;
    width: 100%;
    
    margin-top: 10px;
    
}

.contenedor-fila-catalogo-detalle-individual {
    display: flex;
    flex-flow: row;
    justify-content: center;
    /*justify-content: space-around;*/
    align-items: baseline;
    font-size:16px;
    
    
    width: 100%;
    /*max-width: 1024px;*/  
    /*height: 144;*/
    height: 2.5em;

/*    
    margin-left: 2em;
    margin-right: 2em;
*/    
}

.texto-codigo-detalle {
    text-align:left;
    font-family:'Open Sans';
    font-style: normal;
    font-size:16px;
    font-weight: 600;
    width: 20%;
    /*height: 70%;*/
    padding: 10px 10px 10px 10px;    
    padding-left: 10px;
    
    color:#404040;

    min-width: 10em;
    
    
    /*flex-basis: max-content;*/
}

.texto-titulo-detalle {
 text-align:left;
 font-family:'Open Sans';
 font-style: normal;
 font-size:16px;
 font-weight: 600;
 width: 60%;
 /*height: 70%;*/
 padding: 10px 10px 10px 10px;
 
 color:#404040;
 
 border-left: 1px solid rgba(0, 0, 0, 0.1);
 border-right: 1px solid rgba(0, 0, 0, 0.1);
 
 /*flex-basis: max-content;*/
} 

.precio-detalle {
 display:flex;
 flex-flow: row;
 align-self: flex-end;
 justify-content: flex-end;
 /*float:right;*/ 
 
/* 
 flex-direction: column-reverse;
 align-self: flex-end; 
 */
 /*flex-start;*/   
 /*flex-basis: auto;*/
 /*flex-basis: max-content;*/
    
 color: var( --cssColorBack );  /*#c00;*/   
 /*background-color: var( --cssColorText );*/ 
 
 /*background-color: #eee;*/

 font-family: "Open Sans";
 font-style: normal;
 font-weight: 600;
 font-size:18px;

 width: 8em;
 
 padding: 10px 10px 10px 10px;

 /*
 margin-right: 0px;
 padding-right: 0px;
 */
/* 
 padding: 10px;
 margin-bottom: 12px;
 margin-top: 15px;
 margin-right: 15px;
*/
/*  
 border-bottom-right-radius: 15px;
 border-top-left-radius: 15px;
 border: 1px solid rgba(0, 0, 0, 0.1);

 box-shadow: -1px 1px 10px -2px rgba(0, 0, 0, 0.4);
*/ 
}

.precio-detalle.integer {
    /*float:right;*/
    order:1;
}

.precio-detalle.decimal {
    font-size:12px;
    /*float:right;*/ 
    /*padding-left: 2px;*/  
    order:2 ;
}

.precio-detalle.simbol {
 font-size:12px;
 /*float:right;*/
 /*padding-left: 7px;*/

 order:3 ;
}
   
/* Para que no subraye ningún link del contenedor */
.contenedor-fila-catalogo-detalle a:link { text-decoration: none;}
.contenedor-fila-catalogo-detalle a:visited { text-decoration: none;}

/* ------ Cuando onMouseOver --------------*/    
.contenedor-fila-catalogo-detalle-individual:hover {
    border: 1px solid #bbb;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);
    background-color: var( --cssColorBack ); /*#c00;*/
}
.contenedor-fila-catalogo-detalle-individual:hover .texto-codigo-detalle { color: var( --cssColorText ); } /*white; }*/ 
.contenedor-fila-catalogo-detalle-individual:hover .texto-titulo-detalle { color: var( --cssColorText ); } /*white; }*/
.contenedor-fila-catalogo-detalle-individual:hover .precio-detalle { color: var( --cssColorText );} /*white; }*/
/*-------------------------------------------------------------------------------------------*/

 
 
 
/*------------------ MENU TACTIL -------------------------------------------------------------------------*/

#MenuBarFam-tactil {
    margin:auto;
    width:500px;
    font-family:Arial, Helvetica, sans-serif;
    display:block;
}

.contenedor-menu-tactil li a {
       background-color:#000;
       color:#fff;
       text-decoration:none;
       display:block;    /* Para que salga el cursor de la manita no sólo en el texto hRef, sino el ancho del item */
}

ul {
    list-style:none;
}


/* -------- Posicionamiento lineas y submenus -----*/
ul.submenu-principal li {
    position: relative;   /* Las coordenadas de los ul inferiores será relativas al <li> que los contiene */
    width: 170px;
    
    background-color:#000;
    color:#fff;

    margin-left:  0;
    padding-left: 0;


}

ul.submenu-principal ul {
    position: absolute;   /* Esta posición es relativa al <li> que contiene a este <ul> */
/*
    left: 140px;
    top: -1px;
*/
    display:none;   

    z-index: 598;
/*    width: 100%;*/

  top: 100%;
  left: 0;
  width: 100%;

}
/*------------------------*/

.submenu-principal li a:hover {
    background-color:#c00;
}

ul.submenu-principal li:hover > ul {
    display:block;
}
/*


/* Menu FLAT DEMO ------------
http://www.cssmenumaker.com/blog/flat-dropdown-menu-tutorial/#    
------------------------------------------------------------------ */
/*
@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
*/

/* 1ª parte sólo posicionamiento de menú y submenus flotantes, y visibility */
#cssmenu {
  padding: 0;
  margin: 0;
  border: 0;
}

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

#cssmenu ul {
  position: relative;
  z-index: 597;
}

#cssmenu ul li {
  float: left;
  min-height: 1px;
  vertical-align: middle;
}

#cssmenu ul li.hover,
#cssmenu ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default;
}

#cssmenu ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;

  width: 100%;
}

#cssmenu ul ul li {
  float: none;
}

#cssmenu ul ul ul {
  top: 0;
  left: auto;
  right: -99.5%;
  }

#cssmenu ul li:hover>ul {
  visibility: visible;
}

#cssmenu ul ul {
  bottom: 0;
  left: 0;
}

#cssmenu ul ul {
  margin-top: 0;
}

#cssmenu ul ul li {
  font-weight: normal;
}

#cssmenu a {
  display: block;
  line-height: 1em;
  text-decoration: none;
}

/* 2da parte para dar colorido y fix del float en algunos navegadores */
#cssmenu {
  /*background: #333;*/
  /*border-bottom: 4px solid #1b9bff;*/
  font-family: 'Open Sans','Oxygen Mono', Tahoma, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var( --cssColorBack );  /*#c00;*/   
  
/*  background-color: var( --cssColorText ); */ /*#fff;*/
  background-color: white;

}


#cssmenu>ul {
  *display: inline-block;
}

#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}            

/* 3ra parte para los hover y colores  de submenus */
/* Color Menú horizontal sin hover */
#cssmenu a {
  /*  
  background: #333;
  color: #CBCBCB;
  */
  background: #fff; /*var( --cssColorText );*/
  color: var( --cssColorBack );
  border: 1px solid var( --cssColorBack );
  padding: 0 20px;
}

#cssmenu ul {
  text-transform: uppercase;
}

/* MIO */
#cssmenu .borde-ul {
  border: 1px solid var( --cssColorBack ); /*rgba(0, 0, 0, 0.3); #bbb;*/
  box-shadow:0 1px 5px rgba(0, 0, 0, 0.4), 0 0 15px rgba(0, 0, 0, 0.4);    
}

.triangulo {

    /*
     width: 0; 
     height: 0; 
     border-left: 10px solid var( --cssColorBack );
     border-top: 5px solid transparent;
     border-bottom: 5px solid transparent;      
     
     position: absolute;
     top: 50%;
     right: 5px;
     margin-top: -4px;
    */ 
}

#cssmenu a:hover .triangulo {
/*
     width: 0; 
     height: 0; 

     border-left: 10px solid greenyellow;
     border-top: 5px solid transparent;
     border-bottom: 5px solid transparent; 
     
     
     position: absolute;
     top: 50%;
     right: 5px;
     margin-top: -4px;
*/

    width: 0px;
    height: 12px;
    border-left: 5px solid white; /*#d9534f;*/
    border-right: 5px solid white; /*#d9534f;*/
    border-bottom: 3px solid transparent;

    position: absolute;
     top: 50%;
     right: 5px;
     margin-top: -4px;

     
}


/*---------------------*/


#cssmenu ul ul {
  /*border-top: 4px solid #1b9bff;*/
  text-transform: none;
  min-width: 190px;
  width: 15em;  /* Ancho de los submenus segun font del ul */
}

/* Color submenú sin hover */
#cssmenu ul ul a {
/*
  background: #1b9bff;
  color: #FFF;
  border: 1px solid #0082e7;
*/
  color: #404040; /*var( --cssColorBack );*/  /*#c00;*/   
  background-color: #fff; /*var( --cssColorText );  #fff;*/
  
  border-top: 0 none;
  line-height: 1em; 
  /*padding: 16px 20px;*/
  padding: 0.8em 1.1em;

  
}

#cssmenu ul ul ul {
  border-top: 0 none;
}

#cssmenu ul ul li {
  position: relative
}


/* 3ra parte para los hover y colores  de Menú principal original */
#cssmenu>ul>li>a {
  line-height: 2rem; /* Era 38px del Menú hrz.*/
}

/*
#cssmenu ul ul li:first-child>a {
  border-top: 1px solid #0082e7;
}
*/

/* --- Color fondo subItems cuando Hover*/
#cssmenu ul ul li:hover>a {
  color: var( --cssColorText ); 
  background-color: var( --cssColorBack ); 
}

/*
#cssmenu ul ul li:last-child>a {
  border-radius: 0 0 3px 3px;
  box-shadow: 0 1px 0 #1b9bff;
}

#cssmenu ul ul li:last-child:hover>a {
  border-radius: 0 0 0 3px;
}
*/

#cssmenu ul ul li.has-sub>a:after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -8px;
  font-size: 12px;
  font-weight: 700;
  color: var( --cssColorBack );
}

#cssmenu ul ul li.has-sub:hover>a:after {
  content: '-';
  font-size: 18px;
  right: 12px;
  color: #fff;
}




/* 4ª parte para añadir el + al menú principal, que esté seleccionado la primera opción y algo más */

/* Cuando hover en el título */
#cssmenu ul li:hover>a {
 /* 
    background: #1b9bff;
    color: #FFF;
 */   
 background: rgba(40,40,40,0.1);
 color: var( --cssColorBack );
 border: 1px solid rgba(0,0,0,0.2);
 border-bottom: 0 none;
}

/* Cuando hover en el título Quitarle el borde a todos los subItems */ 
#cssmenu ul li:hover > ul a {
 border: 0 none;
} 



/*
#cssmenu ul li:hover>a,
#cssmenu ul li.active>a {
  background: #1b9bff;
  color: #FFF;
}

#cssmenu ul li.has-sub>a:after {
  content: '+';
  margin-left: 5px;
}
*/

#cssmenu ul li.last ul {
  left: auto;
  right: 0;
}

#cssmenu ul li.last ul ul {
  left: auto;
  right: 99.5%;
}
/* ------------------------------ FIN MENU FLAT ESCRITORIO ---------------------*/





/* Menu FLAT para MOVILES ------------
------------------------------------------------------------------ */
/* 1ª parte sólo posicionamiento de menú y submenus flotantes, y visibility */
#cssmenu-movil {
  padding: 0;
  margin: 0;
  border: 0;
}

#cssmenu-movil ul,
#cssmenu-movil li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#cssmenu-movil ul {
  position: relative;
  z-index: 597;
}

#cssmenu-movil ul li {
  float: left;
  min-height: 1px;
  vertical-align: middle;
}

#cssmenu-movil ul li.hover,
#cssmenu-movil ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default;
}

/* Posicion absolute es lo que hace que deje espacio vertical entre opciones para que quepan las del submenu */
#cssmenu-movil ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;
  width: 100%;
}

#cssmenu-movil ul ul li {
  float: none;
}

/* Posiciona submenus a la derecha o abajo de la opción */
#cssmenu-movil ul ul ul {
/*
overflow: hidden;
transition: .3s all ease-in;
*/
max-height: 300px;
 /* top: 0;*/
  left: auto;
 /* right: -99.5%;*/

  }

#cssmenu-movil ul li:hover>ul {
  visibility: visible;

position:relative;
}

#cssmenu-movil ul ul {
  bottom: 0;
  left: 0;
}

#cssmenu-movil ul ul {
  margin-top: 0;
}

#cssmenu-movil ul ul li {
  font-weight: normal;
}

#cssmenu-movil a {
  display: block;
  line-height: 1em;
  text-decoration: none;
}

/* 2da parte para dar colorido y fix del float en algunos navegadores */
#cssmenu-movil {
  font-family: 'Open Sans','Oxygen Mono', Tahoma, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var( --cssColorBack );  /*#c00;*/   
  background-color: white;
}


#cssmenu-movil>ul {
  *display: inline-block;
}
#cssmenu-movil:after,
#cssmenu-movil ul:after {
  content: '';
  display: block;
  clear: both;
}            

/* 3ra parte para los hover y colores  de submenus */
/* Color Menú horizontal sin hover */
#cssmenu-movil a {
  background: #fff; /*var( --cssColorText );*/
  color: var( --cssColorBack );
  border: 1px solid var( --cssColorBack );
  padding: 0 20px;
}

#cssmenu-movil ul {
  text-transform: uppercase;
}

/* MIO */
#cssmenu-movil .borde-ul {
  border: 1px solid var( --cssColorBack ); /*rgba(0, 0, 0, 0.3); #bbb;*/
  box-shadow:0 1px 5px rgba(0, 0, 0, 0.4), 0 0 15px rgba(0, 0, 0, 0.4);    
}
/*---------------------*/


#cssmenu-movil ul ul {
  text-transform: none;
  min-width: 190px;
  width: 15em;  /* Ancho de los submenus segun font del ul */
}

/* Color submenú sin hover */
#cssmenu-movil ul ul a {
  color: #404040; /*var( --cssColorBack );*/  /*#c00;*/   
  background-color: #fff; /*var( --cssColorText );  #fff;*/
  border-top: 0 none;
  line-height: 1em; 
  padding: 0.8em 1.1em;
}

#cssmenu-movil ul ul ul {
  border-top: 0 none;
}


#cssmenu-movil ul ul li {
  position: relative
}

/* 3ra parte para los hover y colores  de Menú principal original */
#cssmenu-movil>ul>li>a {
  line-height: 2rem; /* Era 38px del Menú hrz.*/
}

/* --- Color fondo subItems cuando Hover*/
#cssmenu-movil ul ul li:hover>a {
  color: var( --cssColorText ); 
  background-color: var( --cssColorBack ); 
}

#cssmenu-movil ul ul li.has-sub>a:after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -8px;
  font-size: 12px;
  font-weight: 700;
  color: var( --cssColorBack );
}

#cssmenu-movil ul ul li.has-sub:hover>a:after {
  content: '-';
  font-size: 18px;
  right: 12px;
  color: #fff;
}

/* 4ª parte para añadir el + al menú principal, que esté seleccionado la primera opción y algo más */

/* Cuando hover en el título */
#cssmenu-movil ul li:hover>a {
 background: rgba(40,40,40,0.1);
 color: var( --cssColorBack );
 border: 1px solid rgba(0,0,0,0.2);
 border-bottom: 0 none;
}

/* Cuando hover en el título Quitarle el borde a todos los subItems */ 
#cssmenu-movil ul li:hover > ul a {
 border: 0 none;
} 
#cssmenu-movil ul li.last ul {
  left: auto;
  right: 0;
}

#cssmenu-movil ul li.last ul ul {
  left: auto;
  right: 99.5%;
}

/*----------- FIN MENU para MOVILES ---------------------------------------------*/