/*!                 for HTML                  */
/*!-------<link rel="stylesheet" href="css/callbt.css">----*/
/*!-------<link rel="stylesheet" href="libs/font-awesome-4.7.0/css/font-awesome.min.css">---*/

/* ! ------------------------------------------------------- boton configuracion en general*/
.bt-awesome-container {
   border: 1px solid #a09f9f;
   border-radius: 10px;
   /* display: block; */
   height: 40px;
   width: 160px;
   left: 50%;
   bottom: 3%;
   position: fixed;
   z-index: 999;
   opacity: 0.8;
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   justify-content: space-between;
   flex-wrap: nowrap;
   padding: 2px;
   align-items: center;
   box-shadow: 0 8px 10px rgba(35, 36, 36, 0.3);
   transform: translateX(-50%);
   padding: 0 5px;
}

@media (max-width: 768px) {
   .bt-awesome-container {
      height: 40px;
      width: 140px;
   }
}

.bt-awesome {
   border-radius: 25%;
   cursor: pointer;
   border: 2px solid transparent;
   height: 30px;
   width: 30px;
   text-align: center;
   z-index: 999;
   /** boton color  */
   background: #deb2a9;
   box-shadow: 0 8px 10px rgba(211, 174, 168, 0.3);
}

.bt-awesome a {
   text-decoration: none;
}

/*backgroun de botton blanco por defecto */
.bt-awesome:hover {
   background: #ffffff;

}

/*texto dentro del boton*/
.bt-awesome .text-call {
   /* height: 15px;
   width: 15px; */
   /* border-radius: 75%; */
   position: relative;
}

/* boton, icona dentro de boton*/
.bt-awesome .text-call:after {
   display: block;
   font-family: fontawesome;
   color: #ffffff;
   opacity: 1;
   /*size of the icon*/
   /* font-size: 25px; */
   height: 30px;
   width: 30px;
   line-height: 30px;
   /* -webkit-box-sizing: initial; */
   box-sizing: unset;
}

.bt-awesome .text-call:hover:after {
   opacity: 0;
}

.bt-awesome .text-call span {
   display: block;
   left: 50%;
   top: 50%;
   position: absolute;
   transform: translate(-50%, -50%);
   z-index: 1;
   opacity: 0;
   /* line-height: 12px; */
   font-weight: 600;
   /* text-transform: uppercase; */
   transition: .3s ease-in-out;
   font-family: 'montserrat', Arial, Helvetica, sans-serif;
   font-size: 9px;
}

.bt-awesome .text-call:hover span {
   opacity: 1;
}

/* ! ------------------------------------------------------- boton configuracion en general  END   */
/*! --- call boton, configuracion specificacion de botton*/




/* color de border de boton*/
.callback-bt:hover {
   border: 2px solid #38a3fd;
}

/*  codigo-contenido de icona --- call, email. whatsapp*/
.callback-bt .text-call:after {
   -webkit-box-sizing: initial;
   box-sizing: border-box;
   content: "\f095";
   font-size: 25px;
}

/* texto dentro de boton*/
.callback-bt .text-call span {
   color: #38a3fd;
   font-size: 9px;
}

/*!---------------------------------- --------------------------------------------конец кнопки звонка */
/* ! --------------------------- кнопка WhatsApp*/

.whatsapp-bt:hover {
   border: 2px solid #38fd63;
}

.whatsapp-bt .text-call:after {
   content: "\f232";
   font-size: 30px;
}

.whatsapp-bt .text-call span {
   color: #38fd63;
   /* font-size: 13px; */
}

/*!---------------------------------- ---------------------------------------------------------конец кнопки WhatsApp */
/*!------------------------------ up arrow button*/

.up-bt:hover {
   border: 2px solid #fb005c;
}


.up-bt .text-call:after {
   /* content: "\f0aa"; */
   /* content: "\f062"; */
   /* content: "\f01b"; */
   /* content: "\f176"; */
   /**home*/
   content: "\f015";
   font-size: 30px;
}

.up-bt .text-call span {
   color: #fb005c;
   /* font-size: 13px; */
}