.vit{
    position: relative;
    transition: .3s;
    width: 20px;
    height: 20px;
    margin: 35px 0;
    text-decoration: none;
}
.vit__wrapper{
    position: absolute;
}
.vit__logo{
    fill: #6D6D6D;
    position: absolute;
    z-index: 10;
    transform: scale3d(1,1,1);
    transition: fill .3s ease-in-out;
}
.vit__vlad{
    position: absolute;
}
.vit__it{
    position: absolute ;

}
.vit--animation .vit__wrapper{
    width: 150px;
    height: 24px;
}

/*логотип по центру*/
.vit.center {
    display: none;
}
.vit__wrapper--center{
    right: 50%;
    transform: translateX(50%);
}
.vit__wrapper--center .vit__logo{
    left: 50%;
    transform: translateX(-50%);
}
.vit__wrapper--center .vit__vlad{
    opacity: 0;
    display: none;
    left: 21%;
}
.vit__wrapper--center .vit__it{
    opacity: 0;
    display: none;
    left: 82%;
}
.vit--animation .vit__wrapper--center .vit__logo{
    animation: springLogo--center .3s ease forwards;
    fill: #fff;
    transition: fill .3s ease-in-out;
}
.vit--animation .vit__wrapper--center .vit__vlad{
    display: block;
    animation: fadeInLeft--center .45s ease-in forwards;
}
.vit--animation .vit__wrapper--center .vit__it{
    display: block;
    animation: fadeInLeftIt--center .45s ease-in forwards;
}
.vit--off .vit__wrapper--center .vit__logo{
    animation: springLogoOut--center .5s ease forwards;
}
.vit--off .vit__wrapper--center .vit__vlad{
    animation: fadeOutLeft--center .3s ease-in ;
}
.vit--off .vit__wrapper--center .vit__it{
    animation: fadeOutLeftIt--center .3s ease-in ;
}
/*ключевые кадры */
@keyframes springLogo--center {
    from {
        -webkit-transform: scale3d(1,1,1) translateX(-50%);
        transform: scale3d(1,1,1) translateX(-50%);
        left: 50%;
    }
    to{
        -webkit-transform: scale3d(1.25,1.25,1.25);
        transform: scale3d(1.25,1.25,1.25);
        left: 0;
    }
}
@keyframes springLogoOut--center {
    from {
        -webkit-transform: scale3d(1.25,1.25,1.25);
        transform: scale3d(1.25,1.25,1.25);
        left: 0;
    }
    to {
        -webkit-transform: scale3d(1,1,1) translateX(-50%);
        transform: scale3d(1,1,1) translateX(-50%);
        left: 50%;
    }
}
@keyframes fadeInLeft--center {
    from {
        opacity: 0;
        left: 0;
    }
    70%{
        opacity: 1;
        left: 21%;
    }
    85%{
        -webkit-transform: translate3d(2px, 0, 0);
        transform: translate3d(2px, 0, 0);
    }
    to{
        opacity: 1;
        left: 21%;
    }
}

@keyframes fadeInLeftIt--center {
    from {
        opacity: 0;
        left: 40%;
    }
    70%{
        opacity: .4;
        left: 82%;
    }
    85%{
        -webkit-transform: translate3d(2px, 0, 0);
        transform: translate3d(2px, 0, 0);
    }
    to {
        opacity: 1;
        left: 82%;
    }
}
@keyframes fadeOutLeft--center {
    from{
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    60%{
        opacity: 0;
    }
    to{
        opacity: 0;
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);

    }
}
@keyframes fadeOutLeftIt--center {
    from{
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    60%{
        opacity: 0;
    }
    to{
        opacity: 0;
        -webkit-transform: translate3d(-160%, 0, 0);
        transform: translate3d(-160%, 0, 0);
    }
}


/*Логотип справа*/
.vit__wrapper--right{
    right: 20%;
}
.vit__wrapper--right .vit__logo{
    right: 0;
}
.vit__wrapper--right .vit__vlad{
    right: 31%;
    opacity: 0;
    display: none;
}
.vit__wrapper--right .vit__it{
    right: 10%;
    opacity: 0;
    display: none;
}
.vit--animation .vit__wrapper--right .vit__logo{
    animation: springLogo--right .3s ease forwards;
    fill: #fff;
    transition: fill .3s ease-in-out;
}
.vit--animation .vit__wrapper--right .vit__vlad{
    display: block;
    animation: fadeInLeft--right .45s ease-in forwards;
}
.vit--animation .vit__wrapper--right .vit__it{
    display: block;
    animation: fadeInLeftIt--right .45s ease-in forwards ;
}
.vit--off .vit__wrapper--right .vit__logo{
    animation: springLogoOut--right .5s ease forwards;
}
.vit--off .vit__wrapper--right .vit__vlad{
    animation: fadeOutLeft--right .5s ease;
}
.vit--off .vit__wrapper--right .vit__it{
    animation: fadeOutLeftIt--right .5s ease;
}

/*keyframes*/

@keyframes springLogo--right {
    from {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1);
        right: 0;
    }
    to{
        -webkit-transform: scale3d(1.25,1.25,1.25);
        transform: scale3d(1.25,1.25,1.25);
        right: 100%;
    }
}
@keyframes springLogoOut--right {
    from {
        -webkit-transform: scale3d(1.25,1.25,1.25);
        transform: scale3d(1.25,1.25,1.25);
        right: 100%;
    }
    to {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1);
        right: 0;
    }
}
@keyframes fadeInLeft--right {
    from {
        opacity: 0;
        right: 0;
    }
    70%{
        opacity: 1;
        right: 31%;
    }
    85%{
        -webkit-transform: translate3d(-2px, 0, 0);
        transform: translate3d(-2px, 0, 0);
    }
    to{
        opacity: 1;
        right: 31%;
    }
}

@keyframes fadeInLeftIt--right {
    from {
        opacity: 0;
        -webkit-transform: translate3d(80%, 0, 0);
        transform: translate3d(80%, 0, 0);
    }
    70%{
        opacity: .4;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    85%{
        -webkit-transform: translate3d(-2px, 0, 0);
        transform: translate3d(-2px, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes fadeOutLeft--right {
    from{
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    50%{
        opacity: 0;
    }
    to{
        opacity: 0;
        -webkit-transform: translate3d(40%, 0, 0);
        transform: translate3d(40%, 0, 0);

    }
}
@keyframes fadeOutLeftIt--right {
    from{
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    50%{
        opacity: 0;
    }
    to{
        opacity: 0;
        -webkit-transform: translate3d(80%, 0, 0);
        transform: translate3d(80%, 0, 0);
    }
}