.log {
    transform-origin: 50% 20%;
    animation-name: log;
}

@keyframes log {
    0% {
        transform: scale(0);
        -webkit-transform: scale(0);
    }

    7%,
    100% {
        transform: scale(1);
         -webkit-transform: scale(1);
    }
}

.text {
    animation-name: text;
}

@keyframes text {

    0%,
    5% {
        opacity: 0;
        visibility: hidden;
        transform: translate(0%, 20%);
        -webkit-transform: translate(0%, 20%);
    }

    12%,
    100% {
        opacity: 1;
        visibility: visible;
        transform: translate(0%, 0%);
        -webkit-transform: translate(0%, 0%);
    }
}


.text1 {

    animation-name: text1;
}

@keyframes text1 {

    0%,
    13% {
        opacity: 0;
        visibility: hidden;
        transform: translate(-20%, 0%);
        -webkit-transform: translate(-20%, 0%);
    }

    20%,
    100% {
        opacity: 1;
        visibility: visible;
        transform: translate(0%, 0%);
        -webkit-transform: translate(0%, 0%);
    }
}

.text2 {
    animation-name: text2;
}

@keyframes text2 {

    0%,
    21% {
        clip-path: inset(0 100% 0 0);
    }

    34%,
    100% {
        clip-path: inset(0 0% 0 0);
    }
}

.text3 {
    animation-name: text3;
}

@keyframes text3 {

    0%,
    25% {
        clip-path: inset(0 100% 0 0);
    }

    45%,
    100% {
        clip-path: inset(0 0% 0 0);
    }
}

.info {
    animation-name: info;
}

@keyframes info {

    0%,
    30% {
        opacity: 0;
        visibility: hidden;
        transform: translate(-20%, 0%);
        -webkit-transform: translate(-20%, 0%);
    }

    40%,
    100% {
        opacity: 1;
        visibility: visible;
        transform: translate(0%, 0%);
        -webkit-transform: translate(0%, 0%);
    }
}

.kb {
    animation-name: kb;
}

@keyframes kb {

    0%,
    35% {
        opacity: 0;
        visibility: hidden;
        transform: translate(-20%, 0%);
        -webkit-transform: translate(-20%, 0%);
    }

    45%,
    100% {
        opacity: 1;
        visibility: visible;
        transform: translate(0%, 0%);
        -webkit-transform: translate(0%, 0%);
    }
}

.qr {
    animation-name: qr;
}

@keyframes qr {

    0%,
    35% {
        opacity: 0;
        visibility: hidden;
        transform: translate(20%, 0%);
        -webkit-transform: translate(20%, 0%);
    }

    45%,
    100% {
        opacity: 1;
        visibility: visible;
        transform: translate(0%, 0%);
        -webkit-transform: translate(0%, 0%);
    }
}