.divprincipal{
 
    word-wrap: break-word;
}

.links{
    color: black;
    text-decoration: none;
    text-align: center;
    

}



.texto:hover{

    color:rgb(134, 134, 131);

   

}

.color {
  color:rgb(26, 48, 121);
}


.grupo{
  
    align-items: center;
    padding:10px;
    display:none;
}

.grupoasunt{
  
    align-items: center;
    padding:10px
}

#toastmesagge {
    visibility: hidden;
    position: fixed;
    z-index: 1;
    right: 2.5%;
    top: 50%;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: .25rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,.1);
    max-width: 310px;
    width: 310px;
    background-color: #ffffff;
    opacity: 1;
  }


.break-word {
    word-break: break-all;
}

.icono {

    transition: all 300ms;
    position: relative;
}

.icono:hover{
    transform: scale(1.15);
    opacity: 0.5;
}






    @media (max-width:700px) and (min-width:500px) {
        .h2{
           font-size: 12px;
        }
    }

    #toastmesagge.mostrar {
        visibility: visible;
        -webkit-animation: fadein 0.5s, fadeout 0.5s 4.6s;
        animation: fadein 0.5s, fadeout 0.5s 4.6s;
      }
      
      @-webkit-keyframes fadein {
        from {right: 0; opacity: 0;} 
        to {right: 2.5%; opacity: 1;}
      }
      
      @keyframes fadein {
        from {right: 0; opacity: 0;}
        to {right: 2.5%; opacity: 1;}
      }
      
      @-webkit-keyframes fadeout {
        from {right: 2.5%; opacity: 1;} 
        to {right: 0; opacity: 0;}
      }
      
      @keyframes fadeout {
        from {right: 2.5%; opacity: 1;}
        to {right: 0; opacity: 0;}
      }
      
      #toastmesagge.cerrar {
        /* visibility: visible; */
        -webkit-animation: fadeout 0.5s 4.8s;
        animation: fadeout 0.5s 4.8s;
      }
       
      @-webkit-keyframes fadeout {
        from {right: 2.5%; opacity: 1;} 
        to {right: 0; opacity: 0;}
      }
       
      @keyframes fadeout {
        from {right: 2.5%; opacity: 1;}
        to {right: 0; opacity: 0;}
      }