/* move animation to separate class */
.fadeIn {
    animation: fadeIn 2s;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @-moz-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @-webkit-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @-o-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @-ms-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }


.fadeInUp{
    animation: fadeInUp 2s;
    animation-fill-mode: forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(100px);
      }
      to {
        opacity: 1;
      }
  }

  .fadeInRight{
    animation: fadeInRight 3s;
    animation-fill-mode: forwards;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(300px);
      }
      to {
        opacity: 1;
      }
  }
  
  @-moz-keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(300px);
      }
      to {
        opacity: 1;
      }
  }
  
  @-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(300px);
      }
      to {
        opacity: 1;
      }
  }
  
  @-o-keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(300px);
      }
      to {
        opacity: 1;
      }
  }
  
  @-ms-keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(300px);
      }
      to {
        opacity: 1;
      }
  }


  .fadeInLeft{
    animation: fadeInLeft  3s;
    animation-fill-mode: forwards;
}

@keyframes fadeInLeft  {
    0% {
       opacity: 0;
       transform: translateX(-20px);
    }
    100% {
       opacity: 1;
       transform: translateX(0);
    }
 }   
  
  @-moz-keyframes fadeInLeft  {
    0% {
        opacity: 0;
        transform: translateX(-20px);
     }
     100% {
        opacity: 1;
        transform: translateX(0);
     }
  }
  
  @-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
     }
     100% {
        opacity: 1;
        transform: translateX(0);
     }
  }
  
  @-o-keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
     }
     100% {
        opacity: 1;
        transform: translateX(0);
     }
  }
  
  @-ms-keyframes fadeInLeft {
    0% {
       opacity: 0;
       transform: translateX(-20px);
    }
    100% {
       opacity: 1;
       transform: translateX(0);
    }
  }

.icon-sync, .icon-layer, .icon-puzzle, .icon-eraser{
  transition: 0.5s;
}

.sync:hover{
  background-color: #FF930E;
}

.sync:hover .icon-sync{
  color: white;
}

.layer:hover{
  background-color: #18DC59;
}

.layer:hover .icon-layer{
  color: white;
}

.eraser:hover{
  background-color: #5A49F8;
}

.eraser:hover .icon-eraser{
  color: white;
}

.puzzle:hover{
  background-color: #36BAFE;
}

.puzzle:hover .icon-puzzle{
  color: white;
}

.owl-item img{
  transition: 0.5s;
}

.owl-item img:hover{
  filter: grayscale(0%) !important;
}