.background {
                position:relative;
                background-image:url('../img/Directorio/6.jpg'),linear-gradient( 180deg, rgba(126, 126, 126, 0.4) 0%, rgba(0, 0, 0, 0.75) 100%);
                background-size: cover;
                left: 0px;
                height: 400px;
                width:100%;
                opacity: 1; 
                background-blend-mode: multiply;
                overflow:hidden;

            }

             @media screen and (max-width: 600px) {
                div.background {
                    height: 500px;
                }

                div.divDepartamentosxLetra{
                    margin-left: 5%;
                }

               
            }
            @media screen and (max-width: 1024px) {
                div.background {
                    height: 500px;
                }
                div.tableLEf{
                    left: 0%;
                }
            }

            .divTextos{
                position:absolute;
                top:  10%;
                left: 25%;
                display: table-cell;
                vertical-align: middle;
                text-align: center;
            }
          
        
            .logoDir{
                
                height:111px;
                background-size: cover;
                overflow:hidden;
                opacity: 1;
                margin-bottom: 40px;
            }

             

            
            @media screen and (max-width: 600px) {
                div.divTextos {
                    left: 0%;
                }
                div.divDepartamentos{
                    left: 25%;
                }
                div.tableLEf{

              
                left: 0%;
            }
            }

            

            .cajasTexto{
                width: 320px;
                height: 40px;
                background: rgba(255, 255, 255, 1) 0% 0% no-repeat padding-box;
                border-radius: 10px;
                opacity: 0.9;
                margin: 8px;
            }


        

            .botones{
                width:  80px;
                height: 40px;
                background: rgba(243, 168, 49, 1) 0% 0% no-repeat padding-box;
                border-radius: 10px;
                color: rgba(255, 255, 255, 1);
                opacity: 1;
                margin: 8px;
            }




           
             .iconosMEdia{
                width:  30px;
                height: 30px;
                border-radius: 10px;
                background-size: cover;
                opacity: 1;
                margin: 15px;
            }











            







             .background2 {
                position:relative;
                background-image:url('../img/Directorio/fondoblanco.jpg');
                background-size: 100%;
                background-repeat: repeat;
                left: 0px;
                /*height: 400px;*/
                width:100%;
                opacity: 1; 
                overflow:hidden;

                
                vertical-align: middle;
                text-align: center;

            }
            .divDepartamentos{
                position:absolute;
                top:  5%;
                left: 45%;
                display: table-cell;
                vertical-align: middle;
                text-align: center;
                
            }


            .divTitulo{
                font: normal normal 600 24px/29px Montserrat;
                letter-spacing: 0px;
                color: #696666;
                opacity: 1;
                margin-top: 38px;

            }

            .divAbc{
                font: normal normal 300 18px/30px Montserrat;
                letter-spacing: 10PX;
                color: #404040;
                opacity: 1;
                width: 1232px;
                height: 22px;
                margin-top: 15px;

            }


            ul.navega li {
                display: inline;
                font: normal normal 300 18px/30px Montserrat;
                letter-spacing: 10PX;
                
                opacity: 1;
                cursor: pointer ;
                margin-top: 10px;
                margin-left:10px ;
          }

          .colorli{
            color: #404040;

          }
         

            .tablaEncabezado{

                background: #000000 0% 0% no-repeat padding-box;
                opacity: 0.8;
                text-align: left;
                color: #FFFFFF;

            }

            .tdTable{
                text-align: left;
                }
            .tableLEf{

               position:relative;
                left: 15%;
                margin-top: 50px;
            }


            .circular--portrait {
  position: relative;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 50%;
}

.circular--portrait img {
  width: 100%;
  height: auto;
}


  .fooicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings'!important;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}         


.divDepartamentosxLetra{
              
             
   
    width: 168px;
    height: 189px;
    min-height: 189px;
    background: #EDEDED 0% 0% no-repeat padding-box;
    box-shadow: inset 6px 6px 6px #FFFFFF1C, 6px 6px 6px #00000015;
    border-radius: 20px;
    opacity: 1;
    letter-spacing: 10PX;
    cursor: pointer ;
    margin-left: 4%;
     margin-top: 3%;

     display: flex;
justify-content: center;
align-items: center;
}
.divDepartamentosxLetra:hover{                    

    box-shadow: inset 3px 3px 3px #77338F, 3px 3px 3px #77338F;
    color: #77338F !important;
    font-weight: bolder;
    cursor: pointer;
}
.divDepartamentosxLetra:hover .textoDepa{                    
    color: #77338F !important;
}
.divDepartamentosxLetra:hover .iconosDirectorio{                    
    filter: invert(29%) sepia(11%) saturate(6422%) hue-rotate(253deg) brightness(85%) contrast(94%);
}

.tableDepa{

   position:relative;
    left: 15%;
    margin-top: 50px;
}


 .iconosDirectorio{
    width:  70px;
    height: 70px;
    background-size: cover;
    opacity: 1;
    margin: 5px;
   
}

.textoDepa{

    text-align: center;
    font: normal normal medium 16px/19px Montserrat;
    letter-spacing: 0px;
    color: #000000;
    opacity: 0.5;
}


.botonTodasCategorias{
    
    height: 40px;
    background: #77338F 0% 0% no-repeat padding-box;
    border-radius: 10px;
    color: rgba(255, 255, 255, 1);
    opacity: 1;
    margin: 8px;
}