.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{


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:250px;

		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;

}


#wpp-flutuante::before{
  background-color:#194453;
  color:#fff;
}


@media only screen and (max-width:1400px){

    #wpp-flutuante{

    bottom:115px;

    }

}

/********* FIX WPP ENDS *********/