/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInGrow {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

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

@keyframes fadeInRight {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }
    to {
        transform: translateX(0px);
        opacity: 1;
    }
}

@keyframes fadeInLeft {
    from {
        transform: translateX(50px);
        opacity: 0;
    }
    to {
        transform: translateX(0px);
        opacity: 1;
    }
}

@keyframes float {
    0% {
        transform: translatey(0px);
    }
    50% {
        transform: translatey(-15px);
    }
    100% {
        transform: translatey(0px);
    }
}

.fade-in,
.fade-to-up,
.fade-to-down,
.fade-to-right,
.fade-to-left,
.fade-in-grow {
    opacity: 0;
}

.fade-in-grow {
    transform: scale(0.5);
}

.fade-in.scrolled {
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.fade-in-grow.scrolled {
    animation-name: fadeInGrow;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.fade-to-left.scrolled {
    animation-name: fadeInLeft;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.fade-to-right.scrolled {
    animation-name: fadeInRight;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.fade-to-up.scrolled {
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.fade-to-down.scrolled {
    animation-name: fadeInDown;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.float.scrolled {
    animation: float 3s ease-in-out infinite;
}


.container-iphone {
    animation-name: fadeInUp;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

.bubble.oberto,
.bubble.blur-two,
.bubble.facebook {
    animation: float 3s ease-in-out infinite;
}

.bubble.woo,
.bubble.blur-one,
.bubble.tiktok,
.bubble.ganalytics {
    animation: float 3s ease-in-out infinite;
    animation-delay: 1s;
}

.bubble.shopify,
.bubble.gads {
    animation: float 3s ease-in-out infinite;
    animation-delay: .5s;
}

#shoes-product {
    animation: float 3s ease-in-out infinite;
    animation-delay: 0s;
}

#bag-product {
    animation: float 3s ease-in-out infinite;
    animation-delay: .5s;
}

#clock-product {
    animation: float 3s ease-in-out infinite;
    animation-delay: 1s;
}

.text-products {
    animation-delay: .7s;
}

.button-transparent{
    animation-delay: .7s;
}

#card-performance{
    animation-delay: .3s;
}

.chart-label,
.chart-label-arrow {
    animation-delay: 2s;
}


/* Animação Pulse */

.blob.green {
    background: #41DC8F;
    box-shadow: 0 0 0 0 #41DC8F;
    animation: pulse-green 2s infinite;
}

.blob {
    background: black;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
    margin: 10px;
    height: 10px;
    width: 10px;
    transform: scale(1);
    animation: pulse-black 1s infinite;
}

.menu-dropdown {
    opacity: 0;
}

.menu-dropdown.active {
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes pulse-green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 #41DC8F;
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(51, 217, 178, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(51, 217, 178, 0);
    }
}


.rotate {
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 15s linear infinite reverse;
}

@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}

@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}

@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
} 
}