:root
{
  --radius-fixed: 50%;
  --radius-static: 42px;
}

section.bouton
{
  align-self: center;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}


#the-one
{
  opacity: 0;
  animation: FadeInHome 1.5s 1s linear forwards;
  /* transition: all .6s; */
}

#the-one img
{
  top: -32px !important;
}


@keyframes Morph
{
  0%
  {
    opacity: 0;
    visibility: hidden;
    top: 0;
    right: 0;
    transform: translate(-2em, -1em);

  }
  100%
  {
    opacity: 1;
    visibility: visible;
    transform: translate(-2em, 90vh);
  }
}



#number-two
{
  position: fixed;
  transform: translate(-1em, -1em);
  bottom: 22px;
  right: 0;
  border-radius: 50%;
  /* font-size: 2em; */
  height: 63px;
  width: 63px;
  z-index: 17;
  text-align: center;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: var(--my-blue);
  border-radius: 50%;
	border:4px solid #ffffff;
  padding: 20px;
	text-decoration: none;
  color: #fff;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);

  opacity: 0;
  visibility: hidden;

  /* transition: all .6s; */
  /* animation: Morph 3s ease-out forwards; */
  /* transform: scale(0); */
}

#number-two i
{
  position: relative;
  top: -1px;
  font-size: 30px;
  text-shadow: 1px 1px #000000;
  transition: .4s;
}

#number-two:hover
{
	background-color: #4980aa;
}

#number-two:hover i
{
  color: rgb(255, 59, 59);
  text-shadow: 1px 1px #fff;
	transform: rotate(20deg);
}



#number-two:active
{
  /* transform: translate(-35px, -10px) scale(0.90); */
  transform: translate(-1em, -1em) scale(0.90);
  box-shadow: none;
}

/* section.bouton[data-scroll-position="-1"] #the-one
{
  opacity: 0;
} */

/* section.bouton[data-scroll-position="-1"] #number-two
{
  animation: Morph 1s ease-out forwards;
  transition: all .6s;
} */


.myButton {
  /* display: flex;
  align-items: center;
  justify-content: center; */

  position: relative;
  overflow: hidden;

  font-family: "Poppins", sans-serif;
  
  text-align: center;
  line-height: 32px;

	box-shadow:inset 0px 0px 15px 3px #23395e;

	background-color: var(--my-blue);
	border-radius:42px;
	border:4px solid #ffffff;

	cursor:pointer;
	color:#ffffff;

	font-size:20px;
  font-weight: bold;
	padding:10px 43px;

	text-decoration:none;

	text-shadow: 1px 1px #000000;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
  transition: .4s;
}
.myButton:hover 
{
	background-color: #4980aa;
  /* border-color: gold; */
}

.myButton:hover i{
  color: rgb(255, 59, 59);
  text-shadow: 1px 1px #fff;
	transform: rotate(20deg);
  transition: .2s;
}
.myButton:active {
  transform: scale(0.93);
  box-shadow: none;
}

.myButton span
{
  position: relative;
  z-index: 3;
  transition: .4s;
}
/* 
.myButton:hover span
{
  color: rgb(255, 59, 59);
  text-shadow: 1px 1px #fff;
  transition: .2s;
} */

.myButton i
{
  position: relative;
  z-index: 3;
  top: 1px;
  font-size: 30px;
  margin-left: 5px;
  transition: .4s;
}

.myButton img {
  opacity: .15;
  position: absolute;
  top: -28px;
  left: -11px;
  height: auto;
  filter: drop-shadow(2px 2px 0px rgba(0, 0, 0, 1));
  width: 105%;
}

.myButton:hover img
{
  animation: heartBeat 2s linear infinite;
}

.myButton img
{
  animation: none;
}


.tarif-bouton .myButton {
  display: flex;
  padding: 8px 20px;
  font-size: 16px;
}

.tarif-bouton .myButton i
{
  position: relative;
  top: 1px;
  font-size: 22px;
  margin-left: 5px;
  transition: .4s;
}


.tarif-bouton .myButton img
{
  /* position: absolute; */
  top: 1px !important;
  left: -7px !important;
}


#whatsapp-button
{
  position: fixed;
  /* transform: translate(-1em, -1em); */
  bottom: 18px;
  left: 18px;
  border-radius: 50%;
  /* font-size: 2em; */
  height: 50px;
  width: 50px;
  z-index: 17;
  text-align: center;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: var(--whatsapp-color);
  border-radius: 50%;
	/* border:4px solid #ffffff; */
  padding: 20px;
	text-decoration: none;
  color: #fff;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);

  /* opacity: 0;
  visibility: hidden; */

  /* transition: all .6s; */
  animation: heartBeat 2.5s infinite;
  /* transform: scale(0); */
}

#whatsapp-button i
{
  position: relative;
  /* top: -1px; */
  font-size: 24px;
  text-shadow: 1px 1px #000000;
  transition: .4s;
}


@media (max-width: 440px) {
  #the-one img
  {
    top: -11px !important;
  }

  .myButton
  {
    padding: 11px 20px;
    font-size: 16px;
    /* line-height: 25px; */
  }
  
  .myButton i
  {
    /* top: 2px; */
    font-size: 25px;
    
  }
  
  .myButton img
  {
    top: -11px;
    left: -7px;
    
  }
}




@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}