@media (min-width:768px){
.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: 99;



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:"Falar pelo Whatsapp";
background-color: #6460ab;
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 {
border:2px solid #fff;
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 *********/