/* Animaciones home */

@keyframes inicio {
    0%{
        clip-path: circle(0% at top left);
    }
    100%{
        clip-path: circle(150% at top left);
    }
}

@keyframes complemento {
    0%{
        opacity: 0;
        margin-left: -20%;
    }
    100%{
        opacity: 1;
        margin-left: 0;
    }
}

@keyframes marketing {
    0%{
        opacity: 0;
        margin-top: -20%;
    }
    100%{
        opacity: 1;
        margin-top: 0;
    }
}

@keyframes tarjetas {
    0%{
        opacity: 0;
        margin-left: -20%;
        margin-top: -20%;
    }
    100%{
        opacity: 1;
        margin-left: 0;
        margin-top: 0;
    }
}

@keyframes nosotros{
    from{
        transform: rotateY(45deg);
    }
    to{
        transform: rotateY(0deg);
    }
}

/* animaciones sección desarrollo web */

@keyframes desarrolloweb {
    0%{
        clip-path: circle(0% at top left);
    }
    100%{
        clip-path: circle(150% at top left);
    }
}

/* Animaciones seccion marketing digital */

@keyframes seccionmarketing{
    0%{
        clip-path: circle(0% at top left);
    }
    100%{
        clip-path: circle(150% at top left);
    }
}

@keyframes servicios1{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes servicios2{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes servicios3{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes servicios4{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes servicios5{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes servicios6{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

/* Animaciones sección tarjetas digitales */

@keyframes secciontarjetas{
    0%{
        clip-path: circle(0% at top left);
    }
    100%{
        clip-path: circle(150% at top left);
    }
}

@keyframes pasos{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

/* Clientes */
@keyframes inicioclientes{
    0%{
        clip-path: circle(0% at top left);
    }
    100%{
        clip-path: circle(150% at top left);
    }
}

@keyframes clientes{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

/* contacto */
@keyframes contacto{
    0%{
        clip-path: circle(0% at top left);
    }
    100%{
        clip-path: circle(150% at top left);
    }
}