.animated {
 animation-duration: 1s;
 animation-fill-mode: both;
}
/* Optional Delays, change values here  */
.one { animation-delay: 0.5s!important; }
.two { animation-delay: 1.2s!important; }
.three { animation-delay: 2s!important; }

/* Animations start here  */
/* FADE IN  */
@keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); 
  }
  to { opacity: 1; 
      -webkit-transform: none;
     transform: none;
  } }
.fadeIn { animation-name: fadeIn; }
/* FADE IN DOWN */
@keyframes fadeInDown {
  from { opacity: 0; transform: translate3d(0, -100%, 0); }
  to { opacity: 1; transform: none; } }
.fadeInDown { animation-name: fadeInDown; }
/* FADE IN UP */
@keyframes fadeInUp {
 from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to { opacity: 1; transform: none; } }
.fadeInUp { animation-name: fadeInUp; }
/* FADE IN LEFT */
@keyframes fadeInLeft {
  from { opacity: 0; transform: translate3d(-30px, 0, 0)rotateZ(30deg); }
  to { opacity: 1; transform: none; } }
.fadeInLeft { animation-name: fadeInLeft; }
/* FADE IN RIGHT */
@keyframes fadeInRight {
  from { opacity: 0; transform: translate3d(100%, 0, 0); }
  to { opacity: 1; transform: none; } }
.fadeInRight { animation-name: fadeInRight; }
/* @end standaard animaties  */
.fadeup.in-view {
  animation: fadeInUp;
  }
 .fadein.in-view {
    animation: fadeIn;
    }
  .fadedown.in-view {
 animation: fadeInDown;
 }
.fadeleft.in-view {  
  animation: fadeInLeft;
}
.faderight.in-view{
 animation: fadeInRight 2s!important;
}   
.in-view{
 animation-duration: 1s!important;
}
/* ANIMATION WPP ***/
#wpp-flutuante {
position: fixed!important;
width: 60px;
height: 60px;
bottom: 30px;
right: 25px;
z-index: 9999;
background-image: url('../images/icon-whatsapp.svg');
background-size:60px;
display: inline-block;
opacity:0;
transition:all 0.5s ease-in-out;
}
#wpp-flutuante.show{
	opacity:1
}
#wpp-flutuante::before{
content:"Agende sua Consulta!";
color:#fff;
display:inline-block;
white-space:nowrap;
padding:0.5rem 0;
width:0;
text-align:center;
position:absolute;
border-radius:30px;
right:65px;
top:50%;
overflow:hidden;
transition:width 0.5s ease-in-out;
transform:translate(0, -50%);
}
#wpp-flutuante:hover::before {
	width:200px;
	overflow:hidden;
  left:auto;
	right:65px;
}
#wpp-flutuante::after{
	content:"1";
  padding:2px 8px;
  font-size:10px;
  display:block;
  position:absolute;
  color:#fff;
  font-weight:bold;
  background-color:red;
  border-radius:100%;
  right:0;
  top:-5px;
  transition:opacity 0.5s ease-in-out;
}
#wpp-flutuante:hover::after{
	opacity:0;
}
@media only screen and (max-width:1400px){
    #wpp-flutuante{
      bottom:115px;
    }
}
/********* FIX WPP ENDS *********/