/*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: rgba(0,0,0,.8);
  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: right;
}
.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;
}
.fab.small i.dan{
  font-size:17px;
}
/*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: #d01919 !important;
  color: white !important;
}
.fab.red:hover{
  background:  #A40E4C !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: #78BE20 !important;
  color: white !important;
}
.fab.green:hover{
  background: #218838 !important;
}
/*Verde azulado*/
.fab.teal{
  background: #00b5ad !important;
  color: white !important;
}
.fab.teal:hover{
  background: #009c95 !important;
}
/*Azul*/
.fab.blue{
  background: #2589BD !important;
  color: white !important;
}
.fab.blue:hover{
  background: #4181a3 !important;
}
/*Cafe*/
.fab.brown{
  background: #a5673f !important;
  color: white !important;
}
.fab.brown:hover{
  background: #975b33 !important;
}
/*Gris*/
.fab.gray{
  background: #CECCCC !important;
  color: #A5A1A1 !important;
}

.fab.gray:hover{
  background: #FEFDFD!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: 50px;
  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);
}

.btnfloater {
  margin-right: 10px;
  margin-top: 15px;
}