.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:"Fale conosco!";


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