.log {
    width: 260px; 
    height: 390px;
    font-size: 44px;

 /*   width: 200px;
    height: 300px;
    font-size: 33px;*/
    
    width: 100px;
    height: 150px;
    font-size: 17px;

    width: 80px;
    height: 120px;
    font-size: 15px;
        
    width: 60px;
    height: 54px;
    font-size: 12px;
 
 /*    width: 50px;
    height: 75px;
    font-size: 10px;
    */
       
    position: relative;
}

.log .cirk {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.log .okno {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.log .okno svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.log .okno svg:nth-child(1) ellipse {
    cx: 50%;
    cy: 50%;
    rx: calc(50% - 6.923%);
    ry: calc(50% - 4.615%);
    fill: none;
    stroke-width: calc(13.846% - 3%);
/*    stroke-width: 36px;*/
    stroke: #D5D5D5;
}

.log:hover .okno svg:nth-child(2) ellipse {
    cx: 50%;
    cy: 50%;
/*
    rx: calc(50% - 18px);
    ry: calc(50% - 18px);
    stroke-width: 36px;
 */
    rx: calc(50% - 6.923%);
    ry: calc(50% - 4.615%);
    stroke-width: calc(13.846% - 3.5%);

    fill: none;
    
    stroke: #000000;
    stroke-dasharray: 117.7%;
    animation: load 13s;
    animation: load 11s;
    stroke-dashoffset: -390;
    stroke-dashoffset: -117.7%;
    
}

.log .okno svg:nth-child(3) ellipse {
    cx: 50%;
    cy: 50%;
/*
    rx: calc(50% - 18px);
    ry: calc(50% - 18px);
    stroke-width: 36px;    
*/
    rx: calc(50% - 6.923%);
    ry: calc(50% - 4.615%);
    stroke-width: calc(13.846% - 3.5%);
        
    fill: none;
        
    stroke: #000000;
    /*stroke: rgba(243, 190, 90, 1);*/
    stroke-dasharray: 390;
    stroke-dasharray: 117.7%;
}

@-webkit-keyframes load {0% {stroke-dashoffset: 0;}}
@-moz-keyframes load {0% {stroke-dashoffset: 0;}}
@-o-keyframes load {0% {stroke-dashoffset: 0;}}
@-ms-keyframes load {0% {stroke-dashoffset: 0;}}
@keyframes load {0% {stroke-dashoffset: 0;}}

.tablo {
    width: 100%;
    position: relative;
    height: 100%;
    overflow: hidden; 
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.tablo div {
 /*   width: 75px;
    width: 28.846%;*/
}
.tablo .numbers {
    position: relative;
    width: 25%;
    line-height: 100%;
    top: 100%;

    font-size: 1em; 
    height: 100%;
    left: 0;
    float: left;
    overflow: hidden;
}

.line {
    width: 60%;
    position: relative;
    height: 16%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.tablo .numbers div span {
    position: relative;
    float: left;
    width: 100%;
    height: calc(100% / 10);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: QuantAantiqua;
}
.line .numbers.startper div span {
    display: none;
}
.tablo .numbers div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% * 10);
}
.tablo .numbers div div {
    width: 100%;
    height: 100%;
}
.line .numbers.startper {
    top: 0;
    right:0;
    left:unset;
}

.tablo {
    opacity:0; 
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
    color: #000000;
}

.log:hover .tablo {
    opacity: 1;

}
.percent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.percent span {
    font-size: 3.8em;
    font-family: QuantAantiqua;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    color: black;
}
.log:hover .percent span {
    /*opacity: 0;*/

    font-size: 1em;
    transform: translate(150%,0);
    -webkit-transform: translate(150%,0);
    -o-transform: translate(150%,0);
    -moz-transform: translate(150%,0);
}

/*поднимаем окошко единицы*/
.log:hover .tablo .numbers.startone {
    animation: start 0.5s steps(1, end);
    animation-fill-mode:forwards;
    animation-duration: 0.5s;
    /*animation-delay: 0.5s;*/
}

/*поднимаем цифры единицы*/
.log:hover .tablo .numbers .one {
    animation: move 0.1s steps(10, end) infinite;
    animation-fill-mode:forwards;
    animation-duration: 1s;
    animation-delay: 0.5s; /*ждём поднятия окошка*/
    animation-iteration-count:10;
}

/*опускаем окошко единицы*/
.log:hover .tablo .numbers.endone .span {
    animation: moveend 0.1s steps(1, end);
    animation-fill-mode:forwards;
    animation-duration: 0.0s;
    animation-delay: 10.5s; /*ждём опускания окошка*/
}

/*поднимаем окошко десятки*/
.log:hover .tablo .numbers.startten {
    animation: start 0.5s steps(1, end);
    animation-fill-mode:forwards;
    animation-duration: 0.5s;
    animation-delay: 0.9s;
}
/*поднимаем цифры десятки*/
.log:hover .tablo .numbers .ten {
    animation: move9 1s steps(9, end);
    animation-fill-mode:forwards;
    animation-duration: 9s;
    animation-delay: 1.4s;/*ждём поднятия окошка*/
}

/*поднимаем окошко сотни*/
.log:hover .tablo .numbers.starthun {
    animation: start 0.5s steps(1, end);
    animation-fill-mode:forwards;
    animation-duration: 0.5s;
    animation-delay: 9.9s;
}

/*поднимаем цифры сотни*/
/* это код для бесконенчности нам надо только 1 обойдёмся подъёмом */
/*
.log:hover .tablo .numbers .hun {
    animation: move 1s steps(10, end) ;
    animation-duration: 100s;
    animation-delay: 10.5s;
}*/

@-webkit-keyframes moveend {100% {top: 100%;}}
@-moz-keyframes moveend {100% {top: 100%;}}
@-o-keyframes moveend {100% {top: 100%;}}
@-ms-keyframes moveend {100% {top: 100%;}}
@keyframes moveend {100% {top: 100%;}}

@-webkit-keyframes move9 {0% {top: 0;} 100% {top: -90%}}
@-moz-keyframes move9 {0% {top: 0;} 100% {top: -90%}}
@-o-keyframes move9 {0% {top: 0;} 100% {top: -90%}}
@-ms-keyframes move9 {0% {top: 0;} 100% {top: -90%}}
@keyframes move9 {0% {top: 0;} 100% {top: -90%}}

@-webkit-keyframes move {0% {top: 0;} 100% {top: -100%;}}
@-moz-keyframes move {0% {top: 0;} 100% {top: -100%;}}
@-o-keyframes move {0% {top: 0;} 100% {top: -100%;}}
@-ms-keyframes move {0% {top: 0;} 100% {top: -100%;}}
@keyframes move {0% {top: 0;} 100% {top: -100%;}}


@-webkit-keyframes start {0% {top: 100%;} 100% {top: 0;}}
@-moz-keyframes start {0% {top: 100%;} 100% {top: 0;}}
@-o-keyframes start {0% {top: 100%;} 100% {top: 0;}}
@-ms-keyframes start {0% {top: 100%;} 100% {top: 0;}}
@keyframes start {0% {top: 100%;} 100% {top: 0;}}



/*

@-webkit-keyframes moveend {100% {top: 62.4px;}}
@-moz-keyframes moveend {100% {top: 62.4px;}}
@-o-keyframes moveend {100% {top: 62.4px;}}
@-ms-keyframes moveend {100% {top: 62.4px;}}
@keyframes moveend {100% {top: 62.4px;}}

@-webkit-keyframes move9 {0% {top: 0;} 100% {top: -561.6px;}}
@-moz-keyframes move9 {0% {top: 0;} 100% {top: -561.6px;}}
@-o-keyframes move9 {0% {top: 0;} 100% {top: -561.6px;}}
@-ms-keyframes move9 {0% {top: 0;} 100% {top: -561.6px;}}
@keyframes move9 {0% {top: 0;} 100% {top: -561.6px;}}


@-webkit-keyframes move {0% {top: 0;} 100% {top: -624px;}}
@-moz-keyframes move {0% {top: 0;} 100% {top: -624px;}}
@-o-keyframes move {0% {top: 0;} 100% {top: -624px;}}
@-ms-keyframes move {0% {top: 0;} 100% {top: -624px;}}
@keyframes move {0% {top: 0;} 100% {top: -624px;}}

@-webkit-keyframes start {0% {top: 62.4px;} 100% {top: 0;}}
@-moz-keyframes start {0% {top: 62.4px;} 100% {top: 0;}}
@-o-keyframes start {0% {top: 62.4px;} 100% {top: 0;}}
@-ms-keyframes start {0% {top: 62.4px;} 100% {top: 0;}}
@keyframes start {0% {top: 62.4px;} 100% {top: 0;}}*/