/*Clase madre*/
.fab {
    border: 0px !important;
    border-radius: 70px !important;
    width: 50px;
    height: 50px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
      0 3px 1px -2px rgba(0, 0, 0, 0.12),
      0 1px 5px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
      0 3px 1px -2px rgba(0, 0, 0, 0.12),
      0 1px 5px 0 rgba(0, 0, 0, 0.2);
    margin: 5px;
    background: #e0e1e2;
    color: white !important;
    cursor: pointer;
    outline: none;
  }
  
  .fab i {
    font-size: 24px;
    margin: 0px;
  }
  
  .fab:hover {
    background: #cacbcd;
  }
  
  /*fab contenedor*/
  .fab_contenedor {
    position: fixed;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
  }
  
  .fab_contenedor dl {
    transition: .5s;
    margin: 0px;
    display: flex;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
  }
  
  .fab_contenedor dl dt button {
    transition: .5s;
    transform: scale(.4) translateY(-40px) translateX(0px);
  }
  
  .visible {
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /*Tamaño de botones*/
  /*Enorme*/
  .fab.huge {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px;
    max-width: 80px;
    min-height: 80px;
    max-height: 80px;
  }
  
  .fab.huge i {
    font-size: 28px !important;
  }
  
  /*Grande*/
  .fab.big {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px;
    max-width: 70px;
    min-height: 70px;
    max-height: 70px;
  }
  
  .fab.big i {
    font-size: 23px !important;
  }
  
  /*largo*/
  .fab.large {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px;
    max-width: 60px;
    min-height: 60px;
    max-height: 60px;
  
  }
  
  .fab.large i {
    font-size: 20px !important;
  }
  
  /*Mediano*/
  .fab.medium {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px;
    max-width: 50px;
    min-height: 50px;
    max-height: 50px;
  }
  
  .fab.medium i {
    font-size: 17px !important;
  }
  
  /*Chico*/
  .fab.small {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    max-width: 40px;
    min-height: 40px;
    max-height: 40px;
  }
  
  .fab.small i {
    font-size: 13px !important;
  }
  
  /*Diminuto*/
  .fab.tiny {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px;
    max-width: 30px;
    min-height: 30px;
    max-height: 30px;
  }
  
  .fab.tiny i {
    font-size: 11px !important;
  }
  
  /*Colores para los botones*/
  /*Rojo*/
  .fab.red {
    background: #db2828 !important;
    color: white !important;
  }
  
  .fab.red:hover {
    background: #d01919 !important;
  }
  
  /*Amarillo*/
  .fab.yellow {
    background: #eaae00 !important;
    color: white !important;
  }
  
  .fab.yellow:hover {
    background: #fbbd08 !important;
  }
  
  /*Naranja*/
  .fab.orange {
    background: #f2711c !important;
    color: white !important;
  }
  
  .fab.orange:hover {
    background: #f26202 !important;
  }
  
  /*Oliva*/
  .fab.olive {
    background: #b5cc18 !important;
    color: white !important;
  }
  
  .fab.olive:hover {
    background: #a7bd0d !important;
  }
  
  /*Verde*/
  .fab.green {
    background: #21ba45 !important;
    color: white !important;
  }
  
  .fab.green:hover {
    background: #16ab39 !important;
  }
  
  /*Verde azulado*/
  .fab.teal {
    background: #00b5ad !important;
    color: white !important;
  }
  
  .fab.teal:hover {
    background: #009c95 !important;
  }
  
  /*Azul*/
  .fab.blue {
    background: #2185d0 !important;
    color: white !important;
  }
  
  .fab.blue:hover {
    background: #1678c2 !important;
  }
  
  /*Cafe*/
  .fab.brown {
    background: #a5673f !important;
    color: white !important;
  }
  
  .fab.brown:hover {
    background: #975b33 !important;
  }
  
  /*Gris*/
  .fab.gray {
    background: #e0e1e2 !important;
    color: white !important;
  }
  
  .fab.gray:hover {
    background: #cacbcd !important;
  }
  
  /*Negro*/
  .fab.black {
    background: #1b1c1d !important;
    color: white !important;
  }
  
  .fab.black:hover {
    background: #27292a !important;
  }
  
  /*Pink*/
  .fab.pink {
    background: #e03997 !important;
    color: white !important;
  }
  
  .fab.pink:hover {
    background: #e61a8d !important;
  }
  
  /*Morado*/
  .fab.purple {
    background: #6435c9 !important;
    color: white !important;
  }
  
  .fab.purple:hover {
    background: #5829bb !important;
  }
  
  /*Posiciones*/
  .transform {
    transform: scale(1) translateY(0px) translateX(0px) !important;
  }
  
  .fab_contenedor.top-left.vertical dl button,
  .fab_contenedor.top-right.vertical dl button,
  .fab_contenedor.top-left dl button,
  .fab_contenedor.top-right dl button {
    transform: scale(.4) translateY(-40px) translateX(0px);
  }
  
  .fab_contenedor.bottom-left.vertical dl button,
  .fab_contenedor.bottom-right.vertical dl button,
  .fab_contenedor.bottom-left dl button,
  .fab_contenedor.bottom-right dl button {
    transform: scale(.4) translateY(40px) translateX(0px);
  }
  
  /*default*/
  .fab_contenedor.default {
    left: 10px;
    top: 10px;
  }
  
  /*Arriba izquiera*/
  .fab_contenedor.top-left {
    left: 10px;
    top: 10px;
    display: flex;
    flex-direction: column-reverse;
  }
  
  .fab_contenedor.top-left.vertical,
  .fab_contenedor.top-left.vertical dl {
    flex-direction: column-reverse !important;
  }
  
  .fab_contenedor.top-left.horizontal,
  .fab_contenedor.top-left.horizontal dl {
    flex-direction: row-reverse !important;
  }
  
  .fab_contenedor.top-left.horizontal dl button {
    transform: scale(.4) translateY(0px) translateX(-40px);
  }
  
  /*Arriba derecha*/
  .fab_contenedor.top-right {
    right: 10px;
    top: 10px;
    display: flex;
    flex-direction: column-reverse;
  }
  
  .fab_contenedor.top-right.vertical,
  .fab_contenedor.top-right.vertical dl {
    flex-direction: column-reverse !important;
  }
  
  .fab_contenedor.top-right.horizontal,
  .fab_contenedor.top-right.horizontal dl {
    flex-direction: row !important;
  }
  
  .fab_contenedor.top-right.horizontal dl button {
    transform: scale(.4) translateY(0px) translateX(40px);
  }
  
  /*Abajo izquierda*/
  .fab_contenedor.bottom-left {
    left: 10px;
    bottom: 10px;
    display: flex;
    flex-direction: column;
  }
  
  .fab_contenedor.bottom-left.vertical,
  .fab_contenedor.bottom-left.vertical dl {
    flex-direction: column !important;
  }
  
  .fab_contenedor.bottom-left.horizontal,
  .fab_contenedor.bottom-left.horizontal dl {
    flex-direction: row-reverse !important;
  }
  
  .fab_contenedor.bottom-left.horizontal dl button {
    transform: scale(.4) translateY(0px) translateX(-40px);
  }
  
  /*Abajo derecha*/
  .fab_contenedor.bottom-right {
    right: 10px;
    bottom: 10px;
    display: flex;
    flex-direction: column;
  }
  
  .fab_contenedor.bottom-right.vertical,
  .fab_contenedor.bottom-right.vertical dl {
    flex-direction: column !important;
  }
  
  .fab_contenedor.bottom-right.horizontal,
  .fab_contenedor.bottom-right.horizontal dl {
    flex-direction: row !important;
  }
  
  .fab_contenedor.bottom-right.horizontal dl button {
    transform: scale(.4) translateY(0px) translateX(40px);
  }