/* http://gnatkovsky.com.ua/css-animaciya-elementov.html */
.slideRight{
    animation-name: slideRight;
    -webkit-animation-name: slideRight; 
  
    animation-duration: 2s; 
    -webkit-animation-duration: 2s;
  
    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     
  
    visibility: visible !important; 
  }
  
  @keyframes slideRight {
    0% {
        transform: translateX(-150%);
    }
    50%{
        transform: translateX(8%);
    }
    65%{
        transform: translateX(-4%);
    }
    80%{
        transform: translateX(4%);
    }
    95%{
        transform: translateX(-2%);
    }           
    100% {
        transform: translateX(0%);
    }   
  }
  
  @-webkit-keyframes slideRight {
    0% {
        -webkit-transform: translateX(-150%);
    }
    50%{
        -webkit-transform: translateX(8%);
    }
    65%{
        -webkit-transform: translateX(-4%);
    }
    80%{
        -webkit-transform: translateX(4%);
    }
    95%{
        -webkit-transform: translateX(-2%);
    }           
    100% {
        -webkit-transform: translateX(0%);
    }
  }
  
  .slideRightReverse{
    animation-name: slideRightReverse;
    -webkit-animation-name: slideRightReverse; 
  
    animation-duration: 2s; 
    -webkit-animation-duration: 2s;
  
    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     
  
    visibility: visible !important; 
  }
  
  @keyframes slideRightReverse {
      50%{
          transform: translateX(8%);
      }
      65%{
          transform: translateX(-4%);
      }
      80%{
          transform: translateX(4%);
      }
      95%{
          transform: translateX(-98%);
      }
      100% {
        transform: translateX(-150%);
    }   
  }
  
  @-webkit-keyframes slideRightReverse {
      50%{
          transform: translateX(8%);
      }
      65%{
          transform: translateX(-4%);
      }
      80%{
          transform: translateX(4%);
      }
      95%{
          transform: translateX(-98%);
      }
      100% {
        transform: translateX(-150%);
    }   
  }
  
  
  
  .slideLeft{
    animation-name: slideLeft;
    -webkit-animation-name: slideLeft;  
  
    animation-duration: 2s; 
    -webkit-animation-duration: 2s;
  
    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     
  
    visibility: visible !important; 
  }
  
  @keyframes slideLeft {
    0% {
        transform: translateX(150%);
    }
    50%{
        transform: translateX(-8%);
    }
    65%{
        transform: translateX(4%);
    }
    80%{
        transform: translateX(-4%);
    }
    95%{
        transform: translateX(2%);
    }           
    100% {
        transform: translateX(0%);
    }
  }
  
  @-webkit-keyframes slideLeft {
    0% {
        -webkit-transform: translateX(150%);
    }
    50%{
        -webkit-transform: translateX(-8%);
    }
    65%{
        -webkit-transform: translateX(4%);
    }
    80%{
        -webkit-transform: translateX(-4%);
    }
    95%{
        -webkit-transform: translateX(2%);
    }           
    100% {
        -webkit-transform: translateX(0%);
    }
  }
  
  .slideDown{
    animation-name: slideDown;
    -webkit-animation-name: slideDown;  
  
    animation-duration: 1s; 
    -webkit-animation-duration: 1s;
  
    animation-timing-function: ease;    
    -webkit-animation-timing-function: ease;    
  
    visibility: visible !important;                     
  }
  
  @keyframes slideDown {
    0% {
        transform: translateY(-100%);
    }
    50%{
        transform: translateY(8%);
    }
    65%{
        transform: translateY(-4%);
    }
    80%{
        transform: translateY(4%);
    }
    95%{
        transform: translateY(-2%);
    }           
    100% {
        transform: translateY(0%);
    }       
  }
  
  @-webkit-keyframes slideDown {
    0% {
        -webkit-transform: translateY(-100%);
    }
    50%{
        -webkit-transform: translateY(8%);
    }
    65%{
        -webkit-transform: translateY(-4%);
    }
    80%{
        -webkit-transform: translateY(4%);
    }
    95%{
        -webkit-transform: translateY(-2%);
    }           
    100% {
        -webkit-transform: translateY(0%);
    }   
  }
  
  .slideDown{
    animation-name: slideDown;
    -webkit-animation-name: slideDown;  
  
    animation-duration: 1s; 
    -webkit-animation-duration: 1s;
  
    animation-timing-function: ease;    
    -webkit-animation-timing-function: ease;    
  
    visibility: visible !important;                     
  }
  
  @keyframes slideDown {
    0% {
        transform: translateY(-100%);
    }
    50%{
        transform: translateY(8%);
    }
    65%{
        transform: translateY(-4%);
    }
    80%{
        transform: translateY(4%);
    }
    95%{
        transform: translateY(-2%);
    }           
    100% {
        transform: translateY(0%);
    }       
  }
  
  @-webkit-keyframes slideDown {
    0% {
        -webkit-transform: translateY(-100%);
    }
    50%{
        -webkit-transform: translateY(8%);
    }
    65%{
        -webkit-transform: translateY(-4%);
    }
    80%{
        -webkit-transform: translateY(4%);
    }
    95%{
        -webkit-transform: translateY(-2%);
    }           
    100% {
        -webkit-transform: translateY(0%);
    }   
  }
  
  .slideUp{
    animation-name: slideUp;
    -webkit-animation-name: slideUp;    
  
    animation-duration: 1s; 
    -webkit-animation-duration: 1s;
  
    animation-timing-function: ease;    
    -webkit-animation-timing-function: ease;
  
    visibility: visible !important;         
  }
  
  @keyframes slideUp {
    0% {
        transform: translateY(100%);
    }
    50%{
        transform: translateY(-8%);
    }
    65%{
        transform: translateY(4%);
    }
    80%{
        transform: translateY(-4%);
    }
    95%{
        transform: translateY(2%);
    }           
    100% {
        transform: translateY(0%);
    }   
  }
  
  @-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(100%);
    }
    50%{
        -webkit-transform: translateY(-8%);
    }
    65%{
        -webkit-transform: translateY(4%);
    }
    80%{
        -webkit-transform: translateY(-4%);
    }
    95%{
        -webkit-transform: translateY(2%);
    }           
    100% {
        -webkit-transform: translateY(0%);
    }   
  }
  
  .slideExpandUp{
    animation-name: slideExpandUp;
    -webkit-animation-name: slideExpandUp;  
  
    animation-duration: 3s; 
    -webkit-animation-duration: 3s;
  
    animation-timing-function: ease-out;    
    -webkit-animation-timing-function: ease -out;
  
    visibility: visible !important; 
  }
  
  @keyframes slideExpandUp {
    0% {
        transform: translateY(100%) scaleX(0.5);
    }
    30%{
        transform: translateY(-8%) scaleX(0.5);
    }   
    40%{
        transform: translateY(2%) scaleX(0.5);
    }
    50%{
        transform: translateY(0%) scaleX(1.1);
    }
    60%{
        transform: translateY(0%) scaleX(0.9);      
    }
    70% {
        transform: translateY(0%) scaleX(1.05);
    }           
    80%{
        transform: translateY(0%) scaleX(0.95);     
    }
    90% {
        transform: translateY(0%) scaleX(1.02);
    }   
    100%{
        transform: translateY(0%) scaleX(1);        
    }
  }
  
  @-webkit-keyframes slideExpandUp {
    0% {
        -webkit-transform: translateY(100%) scaleX(0.5);
    }
    30%{
        -webkit-transform: translateY(-8%) scaleX(0.5);
    }   
    40%{
        -webkit-transform: translateY(2%) scaleX(0.5);
    }
    50%{
        -webkit-transform: translateY(0%) scaleX(1.1);
    }
    60%{
        -webkit-transform: translateY(0%) scaleX(0.9);      
    }
    70% {
        -webkit-transform: translateY(0%) scaleX(1.05);
    }           
    80%{
        -webkit-transform: translateY(0%) scaleX(0.95);     
    }
    90% {
        -webkit-transform: translateY(0%) scaleX(1.02);
    }   
    100%{
        -webkit-transform: translateY(0%) scaleX(1);        
    }
  }
  
  .expandUp{
    animation-name: expandUp;
    -webkit-animation-name: expandUp;   
  
    animation-duration: 0.7s;   
    -webkit-animation-duration: 0.7s;
  
    animation-timing-function: ease;    
    -webkit-animation-timing-function: ease;        
  
    visibility: visible !important; 
  }
  
  @keyframes expandUp {
    0% {
        transform: translateY(100%) scale(0.6) scaleY(0.5);
    }
    60%{
        transform: translateY(-7%) scaleY(1.12);
    }
    75%{
        transform: translateY(3%);
    }   
    100% {
        transform: translateY(0%) scale(1) scaleY(1);
    }   
  }
  
  @-webkit-keyframes expandUp {
    0% {
        -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);
    }
    60%{
        -webkit-transform: translateY(-7%) scaleY(1.12);
    }
    75%{
        -webkit-transform: translateY(3%);
    }   
    100% {
        -webkit-transform: translateY(0%) scale(1) scaleY(1);
    }   
  }
  
  .fadeIn{
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn; 
  
    animation-duration: 2s; 
    -webkit-animation-duration: 2s;
  
    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     
  
    visibility: visible !important; 
  }
  
  @keyframes fadeIn {
    0% {
        transform: scale(0);
        opacity: 0.0;       
    }
    60% {
        transform: scale(1.1);  
    }
    80% {
        transform: scale(0.9);
        opacity: 1; 
    }   
    100% {
        transform: scale(1);
        opacity: 1; 
    }       
  }
  
  @-webkit-keyframes fadeIn {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.0;       
    }
    60% {
        -webkit-transform: scale(1.1);
    }
    80% {
        -webkit-transform: scale(0.9);
        opacity: 1; 
    }   
    100% {
        -webkit-transform: scale(1);
        opacity: 1; 
    }       
  }
  
  .bigEntrance{
    animation-name: bigEntrance;
    -webkit-animation-name: bigEntrance;    
  
    animation-duration: 2s; 
    -webkit-animation-duration: 2s;
  
    animation-timing-function: ease-out;    
    -webkit-animation-timing-function: ease-out;    
  
    visibility: visible !important;         
  }
  
  @keyframes bigEntrance {
    0% {
        transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
        opacity: 0.2;
    }
    30% {
        transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);        
        opacity: 1;
    }
    45% {
        transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    60% {
        transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);     
        opacity: 1;
    }   
    75% {
        transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    90% {
        transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);      
        opacity: 1;
    }   
    100% {
        transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }       
  }
  
  @-webkit-keyframes bigEntrance {
    0% {
        -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
        opacity: 0.2;
    }
    30% {
        -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);        
        opacity: 1;
    }
    45% {
        -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    60% {
        -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);     
        opacity: 1;
    }   
    75% {
        -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    90% {
        -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);      
        opacity: 1;
    }   
    100% {
        -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }               
  }