html {
  scroll-behavior: smooth;
}

.napp-amination
{
     transition: all linear 0.5s;
}

.napp-anim-bounce {
    align-self: flex-end;
    animation-duration: 2s;
    animation-iteration-count: 2;
    transform-origin: bottom;
    
    animation-name: napp-bounce;
    animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);    
}

.napp-anim-bounce-alt {
    align-self: flex-end;
    animation-duration: 2s;
    animation-iteration-count: 2;
    transform-origin: bottom;
    
    animation-name: napp-bounce-alt;
    animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);    
}

@keyframes napp-bounce {
    0%   { transform: scale(1,1)      translateY(0); }
    10%  { transform: scale(1.1,.9)   translateY(0); }
    30%  { transform: scale(.9,1.1)   translateY(-50px); }
    50%  { transform: scale(1.05,.95) translateY(0); }
    57%  { transform: scale(1,1)      translateY(-7px); }
    64%  { transform: scale(1,1)      translateY(0); }
    100% { transform: scale(1,1)      translateY(0); }
} 

@keyframes napp-bounce-alt {
    0%   { transform: scale(1,1)      translateY(0); }
    10%  { transform: scale(1.1,.9)   translateY(0); }
    30%  { transform: scale(.9,1.1)   translateY(-50px); }
    50%  { transform: scale(1.05,.95) translateY(0); }
    57%  { transform: scale(1,1)      translateY(-7px); }
    64%  { transform: scale(1,1)      translateY(0); }
    100% { transform: scale(1,1)      translateY(0); }
} 

.napp-anim-rightin
{
    -webkit-animation: napp-rightin 0.3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: napp-rightin 0.3s; /* Firefox < 16 */
        -ms-animation: napp-rightin 0.3s; /* Internet Explorer */
         -o-animation: napp-rightin 0.3s; /* Opera < 12.1 */
            animation: napp-rightin 0.3s;      
}

@keyframes napp-rightin {
    from { right: -350px; opacity:0}
    to   { right: 0px; opacity:1}
}

/* Firefox < 16 */
@-moz-keyframes napp-rightin {
    from { right: -350px; opacity:0}
    to   { right: 0px; opacity:1}
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes napp-rightin {
    from { right: -350px; opacity:0}
    to   { right: 0px; opacity:1}
}

/* Internet Explorer */
@-ms-keyframes napp-rightin {
    from { right: -350px; opacity:0}
    to   { right: 0px; opacity:1}
}

/* Opera < 12.1 */
@-o-keyframes rightin {
    from { right: -350px; opacity:0}
    to   { right: 0px; opacity:1}
}

.napp-anim-rightout
{
    -webkit-animation: napp-rightout 0.3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: napp-rightout 0.3s; /* Firefox < 16 */
        -ms-animation: napp-rightout 0.3s; /* Internet Explorer */
         -o-animation: napp-rightout 0.3s; /* Opera < 12.1 */
            animation: napp-rightout 0.3s;   
    opacity:0;
    right:-350px;   
}

@keyframes napp-rightout {
    from { right: 0px; opacity:1}
    to   { right: -350px; opacity:0}
}

/* Firefox < 16 */
@-moz-keyframes napp-rightout {
    from { right: 0px; opacity:1}
    to   { right: -350px; opacity:0}
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes napp-rightout {
    from { right: 0px; opacity:1}
    to   { right: -350px; opacity:0}
}

/* Internet Explorer */
@-ms-keyframes napp-rightout {
    from { right: 0px; opacity:1}
    to   { right: -350px; opacity:0}
}

/* Opera < 12.1 */
@-o-keyframes rightout {
    from { right: 0px; opacity:1}
    to   { right: -350px; opacity:0}
}

.napp-anim-fadein
{
    -webkit-animation: napp-fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: napp-fadein 1s; /* Firefox < 16 */
        -ms-animation: napp-fadein 1s; /* Internet Explorer */
         -o-animation: napp-fadein 1s; /* Opera < 12.1 */
            animation: napp-fadein 1s;  
}

@keyframes napp-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes napp-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes napp-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes napp-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.napp-anim-fadeout
{
    -webkit-animation: napp-fadeout 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: napp-fadeout 1s; /* Firefox < 16 */
        -ms-animation: napp-fadeout 1s; /* Internet Explorer */
         -o-animation: napp-fadeout 1s; /* Opera < 12.1 */
            animation: napp-fadeout 1s;  
    opacity:0;
}

@keyframes napp-fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Firefox < 16 */
@-moz-keyframes napp-fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes napp-fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Internet Explorer */
@-ms-keyframes napp-fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Opera < 12.1 */
@-o-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}


.napp-anim-newsletter
{
    transform: scale(1.0) rotate(0deg) translate(-50%, -50%); 
    animation: napp-newsletter 0.5s;   
}

@keyframes napp-newsletter
{
    0%
    {
        transform: scale(0.0) rotate(0deg) translate(-50%, -50%);        
    }
    
    100%
    {
       -webkit-transition: all 0.2s ease-in-out; 
        transition: all 0.5s;    
        transform: scale(1.0) rotate(360deg) translate(-50%, -50%);        
    }
    
}

.napp-anim-horiz
{
    transition: all 0.3s;    
    transform: translate(-50%, -50%);
    animation: napp-horiz 0.5s;  
}

@keyframes napp-horiz
{
    0%
    {
        opacity:0;
        transform: translate(-60%, -50%);
    }
    
    100%
    {
        opacity:1;
        transform: translate(-50%, -50%);        
    }
    
}

.napp-anim-unfold
{
    transition: all 0.3s ease-in-out;
    transform-style: preserve-3d;  
    perspective: 2000px; 
    animation: napp-unfold 0.5s;  
}

@keyframes napp-unfold
{
    0%
    {
        opacity:0;
        transform: rotateY(-60deg) rotateX(-60deg) translate(-50%, -50%);
    }
    
    100%
    {
        opacity:1;
        transform: rotateY(0deg) rotateX(0deg) translate(-50%, -50%);      
    }
    
}

.napp-anim-zoomout
{
    transition: all 0.3s ease-in-out; 
    animation: napp-zoomout 0.5s;  
}

@keyframes napp-zoomout
{
    0%
    {
        opacity:0;
        transform: scale(1.3) translate(0%, 0%);
    }
    
    100%
    {
        opacity:1;
        transform: scale(1.0) translate(-50%, -50%);      
    }
    
}

.napp-anim-popup
{
    animation: napp-popup 0.4s;
    transition: all 0.4s; 
}

@keyframes napp-popup {
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.1);
  }
  60%{
    transform: scale(1.01);
  }
  70%{
    transform: scale(1.02);
  }
  80%{
    transform: scale(1);
  }
  90%{
    transform: scale(1.01);
  }
  100%{
    transform: scale(1);
  }
}