@keyframes fadeInUp {

    0% {
  
      opacity: 0;
  
      -webkit-transform: translateY(100px);
  
      -ms-transform: translateY(100px);
  
      transform: translateY(100px);
  
    }
  
  
  
    100% {
  
      opacity: 1;
  
      -webkit-transform: translateY(0);
  
      -ms-transform: translateY(0);
  
      transform: translateY(0);
  
    }
  
}

@-webkit-keyframes float_up_down_two {

    0% {

        -webkit-transform: rotateX(0deg) translateY(0px);

        transform: rotateX(0deg) translateY(0px)

    }

    50% {

        -webkit-transform: rotateX(0deg) translateY(15px);

        transform: rotateX(0deg) translateY(15px)

    }

    to {

        -webkit-transform: rotateX(0deg) translateY(0px);

        transform: rotateX(0deg) translateY(0px)

    }

}

@keyframes float_up_down_two {

    0% {

        -webkit-transform: rotateX(0deg) translateY(0px);

        transform: rotateX(0deg) translateY(0px)

    }

    50% {

        -webkit-transform: rotateX(0deg) translateY(15px);

        transform: rotateX(0deg) translateY(15px)

    }

    to {

        -webkit-transform: rotateX(0deg) translateY(0px);

        transform: rotateX(0deg) translateY(0px)

    }

}

@-webkit-keyframes fadeInLeft {

    0% {

        opacity: 0;

        -webkit-transform: translateX(-700px);

        transform: translateX(-700px);
  
    }
  
  
  
    100% {
  
        opacity: 1;

        -webkit-transform: translateX(0);

        transform: translateX(0);
  
    }
  
}
  
  
  
@keyframes fadeInLeft {
  
    0% {
  
        opacity: 0;

        -webkit-transform: translateX(-700px);

        -ms-transform: translateX(-700px);

        transform: translateX(-700px);

    }
  
  
  
    100% {
  
        opacity: 1;

        -webkit-transform: translateX(0);

        -ms-transform: translateX(0);

        transform: translateX(0);
  
    }
  
}
@-webkit-keyframes fadeInRight {

    0% {

        opacity: 0;

        -webkit-transform: translateX(700px);

        transform: translateX(700px);
  
    }
  
  
  
    100% {
  
        opacity: 1;

        -webkit-transform: translateX(0);

        transform: translateX(0);
  
    }
  
} 
  
@keyframes fadeInRight {
  
    0% {
  
        opacity: 0;

        -webkit-transform: translateX(700px);

        -ms-transform: translateX(700px);

        transform: translateX(700px);

    }
  
  
  
    100% {
  
        opacity: 1;

        -webkit-transform: translateX(0);

        -ms-transform: translateX(0);

        transform: translateX(0);
  
    }
  
}

@-webkit-keyframes slideInDown {

    0% {

        -webkit-transform: translate3d(0, -100%, 0);

        transform: translate3d(0, -100%, 0);

        visibility: visible;

    }



    100% {

        -webkit-transform: translate3d(0, 0, 0);

        transform: translate3d(0, 0, 0);

    }

}



@keyframes slideInDown {

    0% {

        -webkit-transform: translate3d(0, -100%, 0);

        transform: translate3d(0, -100%, 0);

        visibility: visible;

    }



    100% {

        -webkit-transform: translate3d(0, 0, 0);

        transform: translate3d(0, 0, 0);

    }

}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-fill-mode: both;
    animation-name: fadeInUp;
    visibility: visible;
    animation-duration: 750ms;
}

.fadeInUp-1750ms {
    -webkit-animation-name: fadeInUp;
    animation-fill-mode: both;
    animation-name: fadeInUp;
    visibility: visible;
    animation-duration: 750ms;
    animation-delay: 1750ms;
}

.fadeInUp-1950ms {
    -webkit-animation-name: fadeInUp;
    animation-fill-mode: both;
    animation-name: fadeInUp;
    visibility: visible;
    animation-duration: 750ms;
    animation-delay: 1950ms;
}

.fadeInUp-2150ms {
    -webkit-animation-name: fadeInUp;
    animation-fill-mode: both;
    animation-name: fadeInUp;
    visibility: visible;
    animation-duration: 750ms;
    animation-delay: 2150ms;
}

#home-header-image > img
{
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
    animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
    -webkit-animation-name: float_up_down_two;
    animation-name: float_up_down_two;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    animation-fill-mode: both;
    visibility: visible; 
    animation-duration: 1500ms; 
    animation-delay: 0ms; 
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
    animation-fill-mode: both;
    visibility: visible; 
    animation-duration: 1500ms; 
    animation-delay: 0ms; 
}

.slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
    visibility: visible;
    animation-duration: 1750ms;

    animation-name: slideInDown; 

    animation-duration: 1750ms; 

    animation-iteration-count: 1;

    animation-timing-function: linear;

  

    -webkit-animation-name: slideInDown; 

    -webkit-animation-duration: 1750ms; 

    -webkit-animation-iteration-count: 1;

    -webkit-animation-timing-function: linear;

  

    -moz-animation-name: slideInDown; 

    -moz-animation-duration: 1750ms;

    -moz-animation-iteration-count: 1;

    -moz-animation-timing-function: linear;

  

    -ms-animation-name: slideInDown; 

    -ms-animation-duration: 2s; 

    -ms-animation-iteration-count: 1;

    -ms-animation-timing-function: linear;

}

.feature-content:hover > .shape-1 {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    transition: all .5s linear;
    transition-delay: .1s;
}

.feature-content > .shape-1 {
    content: '';
    width: 273px;
    height: 273px;
    background: #d858f5;
    border-radius: 50%;
    position: absolute;
    top: -148px;
    left: -83px;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}

.feature-content:hover > .shape-2 {
    opacity: 0.6;
    -webkit-transform: translate(0 ,0);
    -ms-transform: translate(0 ,0);
    transform: translate(0 ,0);
    transition: all .9s linear;
}

.feature-content > .shape-2 {
    content: '';
    width: 493px;
    height: 493px;
    background: #c647fe;
    border-radius: 50%;
    position: absolute;
    top: -250px;
    left: -180px;
    z-index: 1;
    -webkit-transform: translate(-50% ,-50%);
    -ms-transform: translate(-50% ,-50%);
    transform: translate(-50% ,-50%);
    opacity: 0;
}

.feature-content:hover > .shape-3 {
    opacity: 0.4;
    -webkit-transform: translate(0 ,0);
    -ms-transform: translate(0 ,0);
    transform: translate(0 ,0);
    transition: all 1.3s linear;
}

.feature-content > .shape-3 {
    content: '';
    width: 500px;
    height: 500px;
    background: #a461e8;
    border-radius: 50%;
    position: absolute;
    top: -200px;
    left: -150px;
    z-index: 1;
    -webkit-transform: translate(-50% ,-50%);
    -ms-transform: translate(-50% ,-50%);
    transform: translate(-50% ,-50%);
    opacity: 0;
}