/*----------------------------------------------*/
/*----- nouveau css compilé à partir de scss ---*/ 
/*----------------------------------------------*/
@import url("https://fonts.googleapis.com/css?family=Ubuntu");
#vwatch {
  font-family: "Ubuntu", sans-serif !important;
  font-size: 14pt;
}


#tf-widget-menu {
	font-family: "Ubuntu", sans-serif !important;
	font-size: 14pt;
	filter: url("#shadowed-goo");
}

.menu-open-button {
  cursor: pointer;
  background: #00bcd4;
  border-radius: 100%;
  width: 50px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 80px;
}

.menu-item {
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 80px;
}

.menu-item-icone {
  cursor: pointer;
  background: #00bcd4;
  border-radius: 100%;
  width: 50px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 80px;
}

.menu-item-title, .menu-item-icone {
  position: absolute;
  right: 0px;
  bottom: 0px;
}

.menu-open-button, .menu-item {
  position: absolute;
  right: 0px;
  bottom: 0px;
}

.tf-menu-open {
  display: none;
}

.menu-item-icone {
  z-index: 2;
}

.menu-item-title {
  display: none;
  z-index: 1;
  width: 350px;
  height: 50px;
}

.text-item-title {
  line-height: 1;
  right: 60px;
  position: absolute;
  top: 27%;
}

.tf_close {
  width: 25px;
  height: 3px;
  background: white;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -12.5px;
  margin-top: -1.5px;
  opacity: 0;
}

.tf_close-1 {
  transform: translate3d(0, 0, 0) rotate(45deg) scale(0, 0);
}

.tf_close-2 {
  transform: translate3d(0, 0, 0) rotate(-45deg) scale(0, 0);
}

#tf-menu-open:checked ~ #tf-widget-menu .menu-open-button .tf_close-1 {
  opacity: 0.8;
  transition: opacity 0.4s ease-in-out;
  transform: translate3d(0, 0, 0) rotate(45deg) scale(1.1, 1.1);
}
#tf-menu-open:checked ~ #tf-widget-menu .menu-open-button .tf_close-2 {
  opacity: 0.8;
  transition: opacity 0.4s ease-in-out;
  transform: translate3d(0, 0, 0) rotate(-45deg) scale(1.1, 1.1);
}
#tf-menu-open:checked ~ #tf-widget-menu .menu-open-button #bulle {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.tf-menu-open + .menu-open-button .tf_close-1 {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  transform: translate3d(0, 0, 0) rotate(45deg) scale(1.1, 1.1);
}
.tf-menu-open + .menu-open-button .tf_close-2 {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  transform: translate3d(0, 0, 0) rotate(-45deg) scale(1.1, 1.1);
}
.tf-menu-open + .menu-open-button #bulle {
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
}

#tf-widget-menu {
  position: fixed;
  right: 20px;
  bottom: 20px;
  margin-left: 0px;
  padding-top: 0px;
  padding-left: 0px;
  width: 90px;
  height: 40px;
  box-sizing: border-box;
  font-size: 20px;
  text-align: center;
}

#tf-menu-open:checked + #tf-widget-menu {
  height: 470px;
}

#tf_icone_bulle {
  padding-top: 1px;
  padding-left: 1px;
  width: 40px;
}

/*--- whatsapp button ---*/
.menu-item-icone.whatsapp {
  background: #00E676;
}

.menu-item-icone.whatsapp:hover {
  background: #0fca6f !important;
}

.menu-item-icone.whatsapp svg {
  width: 46px;
  margin-top: 5px;
  margin-left: 8px;
}

/*--- messenger button ---*/
.menu-item-icone.messenger {
  background: #0085FF;
}

.menu-item-icone.messenger:hover {
  background: #0b77da !important;
}

.menu-item-icone.messenger svg {
  width: 35px;
  margin-top: 1px;
  margin-left: 1px;
}

/*--- rendez-vous button ---*/
.menu-item-icone.tf_rdv svg {
  width: 34px;
  margin-top: 0px;
  margin-left: 0px;
}

#tf_day_calandar {
  position: absolute;
  margin-top: 21px;
  margin-left: 16px;
  line-height: 1;
  font-size: 14pt;
}

/*--- rendez-vous button ---*/
.menu-item-icone.tf_callback svg {
  width: 34px;
  margin-top: 0px;
  margin-left: 0px;
}

/*--- rendez-vous visioconference ---*/
.menu-item-icone.tf_visio svg {
  width: 40px;
  margin-top: 1px;
  margin-left: 5px;
}

.menu-open-button {
  z-index: 10;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 400ms;
  transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  margin-bottom: 0px;
}

.menu-open-button:hover {
  transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

#tf-menu-open:checked ~ #tf-widget-menu .menu-open-button {
  transition-timing-function: linear;
  transition-duration: 200ms;
  transform: scale(1.1, 1.1) translate3d(0, 0, 0);
}
#tf-menu-open:checked ~ #tf-widget-menu .menu-open-button:hover {
  transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

#tf-menu-open:checked ~ #tf-widget-menu .menu-open-button svg {
  opacity: 0;
  transition-duration: 600ms;
}

/*--- ferme le menu ---*/
.menu-item:nth-child(3) {
  transition-timing-function: ease-in;
  transition-duration: 300ms;
}
.menu-item:nth-child(4) {
  transition-timing-function: ease-in;
  transition-duration: 300ms;
}
.menu-item:nth-child(5) {
  transition-timing-function: ease-in;
  transition-duration: 300ms;
}
.menu-item:nth-child(6) {
  transition-timing-function: ease-in;
  transition-duration: 300ms;
}
.menu-item:nth-child(7) {
  transition-timing-function: ease-in;
  transition-duration: 300ms;
}
.menu-item:nth-child(8) {
  transition-timing-function: ease-in;
  transition-duration: 300ms;
}

/*--- ouvre le menu ---*/
#tf-menu-open:checked ~ #tf-widget-menu .menu-item {
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
#tf-menu-open:checked ~ #tf-widget-menu .menu-item:nth-child(4) {
  transition-duration: 200ms;
  transform: translate3d(0px, -70px, 0);
}
#tf-menu-open:checked ~ #tf-widget-menu .menu-item:nth-child(5) {
  transition-duration: 320ms;
  transform: translate3d(0px, -140px, 0);
}
#tf-menu-open:checked ~ #tf-widget-menu .menu-item:nth-child(6) {
  transition-duration: 440ms;
  transform: translate3d(0px, -210px, 0);
}
#tf-menu-open:checked ~ #tf-widget-menu .menu-item:nth-child(7) {
  transition-duration: 560ms;
  transform: translate3d(0px, -280px, 0);
}
#tf-menu-open:checked ~ #tf-widget-menu .menu-item:nth-child(8) {
  transition-duration: 680ms;
  transform: translate3d(0px, -350px, 0);
}
#tf-menu-open:checked ~ #tf-widget-menu .menu-item:nth-child(9) {
  transition-duration: 800ms;
  transform: translate3d(0px, -420px, 0);
}

/*--- Au suvol de l'icone ---*/
#tf-menu-open:checked ~ #tf-widget-menu .menu-item .menu-item-icone:hover {
  background: #00add4;
}
#tf-menu-open:checked ~ #tf-widget-menu .menu-item .menu-item-icone:hover + .menu-item-title {
  display: block;
  transition-timing-function: ease-in;
  transition-duration: 200ms;
}

/*--- widget etat meduim inactif ---*/
#tf-widget-medium.inactif {
  display: none;
}

/*--- widget etat meduim actif---*/
#tf-widget-medium {
  width: 320px;
  height: 50px;
  position: absolute;
  bottom: 0px;
  right: 20px;
  z-index: 1;
  display: flex;
}

.tf-widget-medium-left {
  width: 25px;
  height: 50px;
  border-radius: 25px 0 0 25px;
  background: #00bcd4;
}

.tf-widget-medium-center {
  width: 100%;
  background: #00bcd4;
}

.tf-title-medium {
  color: white;
  left: 100px;
  width: 190px;
  position: absolute;
  line-height: 1;
  font-size: 0.9em;
}

.tf-widget-medium-avatar {
  bottom: 0px;
  left: 17px;
  position: absolute;
}

.tf-widget-medium-avatar img {
  width: 100px;
}

/*--- fin etat medium ---*/

/*--- fin etat medium ---*/


/*----------------------------------------------*/
/*--- fin nouveau css ---*/
/*----------------------------------------------*/