/*==================================================
------------------------animations------------------
===================================================*/

/*---------------animation product menu------------*/
.products_menu a:hover {
  -webkit-animation: slideLeft 0.2s ease-in;
  animation: slideLeft 0.2s ease-in;
}
.slideLeft.active:hover {
  -webkit-animation-name: none; 
  animation-name: none; 
}
@-webkit-keyframes slideLeft {
 40%{
    -webkit-transform: translateX(-5px);
  }
  60%{
    -webkit-transform: translateX(0);
  }
  80%{
    -webkit-transform: translateX(2px);
  }
}
@keyframes slideLeft {
 40%{
    transform: translateX(-5px);
  }
  60%{
    transform: translateX(0);
  }
  80%{
    transform: translateX(2px);
  }   
}
/*---------------animation products block--------------*/
.magictime {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.spaceInDown {
  -webkit-animation-name: spaceInDown;
  animation-name: spaceInDown;
}
@-webkit-keyframes spaceInDown {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: scale(.2) translate(0%, 200%);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: scale(1) translate(0%, 0%);
  }
}
@keyframes spaceInDown {
  0% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(.2) translate(0%, 200%);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 100%;
    transform: scale(1) translate(0%, 0%);
  }
}

/*---------------------fruits animation-------------------*/
.slideUp_04 {
  -webkit-animation: slideUp 1.5s ease-in-out forwards, floating 1.8s ease-in-out infinite;
  /*animation: slideUp 1.5s ease-in-out forwards, floating 1.8s 1.5s ease-in-out infinite;*/
}
.slideUp_03 {
  -webkit-animation: slideUp 1.55s ease-in-out forwards, floating 2.3s ease-in-out infinite;
  /*animation: slideUp 1.55s ease-in-out forwards, floating 2.3s 1.55s ease-in-out infinite;*/
}
.slideUp_02 {
  -webkit-animation: slideUp 1.6s ease-in-out forwards, floating 2.5s ease-in-out infinite;
  /*animation: slideUp 1.6s ease-in-out forwards, floating 2.5s 1.6s ease-in-out infinite;*/
}
.slideUp_01 {
  -webkit-animation: slideUp 1.65s ease-in-out forwards, floating 2.7s ease-in-out infinite;
  /*animation: slideUp 1.65s ease-in-out forwards, floating 2.7s 1.65s ease-in-out infinite;*/
}
@-webkit-keyframes floating {
  0% {
    -webkit-transform: translateY(0);  
  }
  50% {
    -webkit-transform: translateY(-5px);  
  }
  100% {
    -webkit-transform: translateY(0px);
  }     
}
@keyframes floating {
  0% {
    transform: translateY(0);  
  }
  50% {
    transform: translateY(-5px);  
  } 
  100% {
    transform: translateY(0px);
  }     
}
@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(170%);
  }
  50%{
    -webkit-transform: translateY(-100%);
  }    
  95% {
    -webkit-transform: translateY(20px);
  }
  100%{
    -webkit-transform: translateY(0);
  }
}
@keyframes slideUp {
  0% {
    transform: translateY(170%);
  }
  50%{
    transform: translateY(-100%);
  }     
  95% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0);
  } 
}
/*------------------animation glass---------------*/
.slideUp_glass{
  -webkit-animation: slideUp_glass 1s ease-in-out forwards;
  animation: slideUp_glass 1s ease-in-out forwards;
}
@-webkit-keyframes slideUp_glass {
  0% {
    -webkit-transform: translateY(80%);
  }
  70%{
    -webkit-transform: translateY(-20px);
  }
  100%{
    -webkit-transform: translateY(0);
  }
}
@keyframes slideUp_glass {
  0% {
    transform: translateY(80%);
  }
  70%{
    transform: translateY(-20px);
  }     
  100% {
    transform: translateY(0);
  } 
}
/*------------------------animation background text--------------------*/
.fadeIn{
  -webkit-animation: fadeIn 1s ease-in-out forwards;
  animation: fadeIn 1s ease-in-out forwards;
}
.fadeIn02 {
  -webkit-animation: fadeIn 0.8s ease forwards;
  animation: fadeIn 0.8s ease forwards;
}
@-webkit-keyframes fadeIn {
  0% {
    -webkit-transform: scale(0);
    opacity: 0.0;   
  }
  100% {
    -webkit-transform: scale(1,1);
    opacity: 1; 
  }   
}
@keyframes fadeIn {
  0% {
    transform: scale(0);
    opacity: 0.0;   
  }
  100% {
    transform: scale(1,1);
    opacity: 1; 
  }   
}
/*---------------------animation circle background------------------*/
.circle_fadeIn{
  -webkit-animation: circle_fadeIn 1s ease-in forwards;
  animation: circle_fadeIn 1s ease-in forwards;
}
@-webkit-keyframes circle_fadeIn {
  100% {
    width: 3100px;
    height: 3100px;
  }   
}
@keyframes circle_fadeIn {
  100% {
    width: 3100px;
    height: 3100px;
  }   
}
/*----------------------animation text--------------------*/
.slideRight{
  -webkit-animation: slideRight 1s ease-in forwards;
  animation: slideRight 1s ease-in forwards;
}
@-webkit-keyframes slideRight {
  0% {
    opacity: 0.0;   
    -webkit-transform: translateX(100%);
  } 
  50% {
    opacity: 0;   
    -webkit-transform: translateX(50%);
  } 
  100% {
    opacity: 1;   
    -webkit-transform: translateX(0%);
  }
}
@keyframes slideRight {
  0% {
    opacity: 0.0;   
    transform: translateX(100%);
  } 
  50% {
    opacity: 0;   
    transform: translateX(50%);
  } 
  100% {
    opacity: 1;   
    transform: translateX(0%);
  } 
}
.slideBottom01 {
  -webkit-animation: slideBottom 0.9s ease forwards;
  animation: slideBottom 0.9s ease forwards;
}
.slideBottom02 {
  -webkit-animation: slideBottom 0.5s linear forwards;
  animation: slideBottom 0.5s linear forwards;
}
@-webkit-keyframes slideBottom {
  0% {
    opacity: 0.0;   
    -webkit-transform: translateY(100%);
  } 
  100% {
    opacity: 1;   
    -webkit-transform: translateY(0%);
  }
}
@keyframes slideBottom {
  0% {
    opacity: 0.0;   
    transform: translateY(100%);
  }
  100% {
    opacity: 1;   
    transform: translateY(0%);
  } 
}