.logo_ai,
.logo_af {
    margin: 0;padding: 2px 10px;
    font-size: 26px;
    border: 2px solid;
    border-radius: 100px;
    max-height: 50px;max-width: 50px;
}

.logo_ai {
    border-color: hsl(216, 100%, 50%);
    color: hsl(216, 100%, 50%);
    -webkit-animation: slide-right 1000ms cubic-bezier(0.250, 0.460, 0.450, 0.940) 500ms both;
    animation: slide-right 1000ms cubic-bezier(0.250, 0.460, 0.450, 0.940) 500ms both;
}

.logo_af {
    border-color: hsl(300, 100%, 50%);
    color: hsl(300, 100%, 50%);
    -webkit-animation: slide-left 1000ms cubic-bezier(0.250, 0.460, 0.450, 0.940) 500ms both;
    animation: slide-left 1000ms cubic-bezier(0.250, 0.460, 0.450, 0.940) 500ms both;
}

@-webkit-keyframes slide-right {
    0% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    }

    100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    }
}

@keyframes slide-right {
    0% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    }

    100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    }
}

@-webkit-keyframes slide-left {
    0% {
    -webkit-transform: translateX(+100px);
    transform: translateX(+100px);
    }

    100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    }
}

@keyframes slide-left {
    0% {
    -webkit-transform: translateX(+100px);
    transform: translateX(+100px);
    }

    100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    }
}