.service-icon {
    aspect-ratio: 1/1;
    height: 120px;
    margin: 0 auto 25px auto;
}
.service-icon svg {
    height: 120px;
    transition: transform 0.3s;
}
.service-icon svg * {
    transition: all 0.3s;
}

/*
.service-icon .animation {

    animation-name: out;
    animation-duration: 200ms;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.79,0.14,0.15,0.86);
    animation-play-state: running;
    animation-fill-mode: both;
}
.service:active .service-icon .animation,
.service:focus .service-icon .animation,
.service:hover .service-icon .animation {
    animation-name: in;
    animation-delay: 0s;
    animation-fill-mode: both;


    animation-direction: alternate;
}
*/
/*
.service .animation1 {
    animation-name: out1;
}
.service:active .animation1,
.service:focus .animation1,
.service:hover .animation1 {
    animation-name: in1;
}

.service .animation2 {
    animation-name: out2;
}
.service:active .animation2,
.service:focus .animation2,
.service:hover .animation2 {
    animation-name: in2;
}

.service .animation22 {
    animation-name: out22;
}
.service:active .animation22,
.service:focus .animation22,
.service:hover .animation22 {
    animation-name: in22;
}
*/
.service:active .service-icon[data-service="2"] .battery,
.service:focus .service-icon[data-service="2"] .battery,
.service:hover .service-icon[data-service="2"] .battery {
    height: 89px;
    transform: translatey(-74px);
    fill: #5fc77b;
}
.service:active .service-icon[data-service="1"] .stroke,
.service:focus .service-icon[data-service="1"] .stroke,
.service:hover .service-icon[data-service="1"] .stroke {
    stroke-dashoffset: 115;
}
.service:active .service-icon[data-service="22"] .stroke,
.service:focus .service-icon[data-service="22"] .stroke,
.service:hover .service-icon[data-service="22"] .stroke {
    stroke-dashoffset: 115;
}

.service:active .service-icon[data-service="28"] svg,
.service:focus .service-icon[data-service="28"] svg,
.service:hover .service-icon[data-service="28"] svg {
    transform: scale(1.15);
}
.service:active .service-icon svg#default-service,
.service:focus .service-icon svg#default-service,
.service:hover .service-icon svg#default-service {
    transform: rotate(20deg);
}
.service:active .service-icon[data-service="29"] svg,
.service:focus .service-icon[data-service="29"] svg,
.service:hover .service-icon[data-service="29"] svg {
    transform: rotate(180deg);
}