/*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);
}