.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 *********/