.w1, .w2{
    stroke:white;
    fill:none;stroke-linecap:round;
}
.bckgr{
    fill: #367;
    cx: 60px;
    cy: 60px;
    r: 60px;
    opacity:1;
}
.w1{stroke-width:2}
.w2{stroke-width:4}


/* bend icon */
.dash4{stroke-dasharray:9,6,5;}
.w-plate{fill:white; stroke:none}

@keyframes machine{
    0%{translate: 0 0}
    70%{translate: 0 3%}
    71%{translate: 0 0}
    100%{translate: 0 0}
}
.bend:hover .machine{
    animation: machine 2s linear infinite
}
@keyframes plate{
    0%{}
    70%{scale: 0.97 1.25}
    71%{scale: 1 1}
    100%{scale: 1 1}
}
.bend:hover polygon{
    animation: plate 2s linear infinite;
    transform-origin: 70px 79px;
}

@keyframes no-tremble{
    0%{visibility: hidden}
    69.9%{visibility: hidden}
    70%{visibility: visible}
    100%{visibility: visible}
}
.bend:hover .no-tremble{
    animation: no-tremble 2s linear 999;
}

.tremble{visibility: hidden}
@keyframes tremble-display{
    0%{visibility: visible}
    70%{visibility: hidden}
    100%{visibility: hidden}
}
@keyframes tremble{
    from{}
    to{translate: 0 2px}
}
.bend:hover .tremble{
    visibility: visible;
    animation:
    plate 2s linear 999,
    tremble 50ms linear 9999,
    tremble-display 2s linear 999;
    transform-origin: 70px 79px;
}

/* laser icon */
/*rays*/
.laserr:hover .vanish{
    opacity:0;
    transition: 1ms 1.6s;
}
@keyframes icon-l-2-1{from{}to{stroke-dashoffset:0;}}
.icon-l-2-1{
    stroke-dasharray:1,5,18,20;
    stroke-dashoffset: -44}
.laserr:hover .icon-l-2-1{
    animation: icon-l-2-1 340ms infinite linear;
}
@keyframes icon-l-2-2{from{}to{stroke-dashoffset:0;}}
.icon-l-2-2{
    stroke-dasharray:5,10,1,5,10,20;
    stroke-dashoffset: -51}
.laserr:hover .icon-l-2-2{
    animation: icon-l-2-2 300ms infinite linear;
}
@keyframes icon-l-2-3{from{}to{stroke-dashoffset:0;}}
.icon-l-2-3{
    stroke-dasharray:1,5,10,4,11,12;
    stroke-dashoffset: -43;
    }
.laserr:hover .icon-l-2-3{
    animation: icon-l-2-3 400ms infinite linear;
}
@keyframes icon-l-2-4{from{}to{stroke-dashoffset:85;}}
.icon-l-2-4{
    stroke-dasharray:1,4,1,5,6,10,18;
    stroke-dashoffset: -5}
.laserr:hover .icon-l-2-4{
    animation: icon-l-2-4 600ms infinite linear;
}
@keyframes icon-l-2-5{from{}to{stroke-dashoffset:0;}}
.icon-l-2-5{
    stroke-dasharray:1,5,1,5,10,40;
    stroke-dashoffset: -62}
.laserr:hover .icon-l-2-5{
    animation: icon-l-2-5 500ms infinite linear;
}
@keyframes icon-l-2-6{from{}to{stroke-dashoffset:0;}}
.icon-l-2-6{
    stroke-dasharray:5,10,1,5,1,40;
    stroke-dashoffset: -62}
.laserr:hover .icon-l-2-6{
    animation: icon-l-2-6 550ms infinite linear;
}

.dash3{stroke-dasharray:18,3,9; stroke-linejoin: round}

.icon-l-1{
    cx: 59.4px;
    cy: 91px;
    stroke-dasharray: 0, 53;
    ry: 6.6px;
    rx: 8.3px;
    transform: rotate(-90deg);
    transform-origin: 59px 91px;
}
.laserr:hover .icon-l-1{
    stroke-dasharray: 22, 53;
    transition: 3s;
}
.fall{
    transform-origin: 100% 120%;
}
.laserr:hover .fall{
    transition: 1s 1.7s;
    rotate: -45deg;
}
@keyframes cut{
    0%{stroke-dasharray: 0, 50;}
    43.9%{stroke-dasharray: 0, 50;}
    44%{stroke-dasharray: 24, 26;}
    50%{stroke-dasharray: 45, 26;}
    100%{stroke-dasharray: 45, 26;}
}
.icon-l-1-2{
    transition: 1s 1.3s;
    transform: scale(-1, 1) rotate(90deg);
    stroke-dasharray: 0,50;
    rx: 7.4px;
    ry: 5.5px;
}
.laserr:hover .icon-l-1-2{
    animation: cut 4s 1 forwards;
}

/* ndt icon */
.dash2{stroke-dasharray:45.182,3.6883,0.9221,3.6883;}

@keyframes tomove{
    0%{}
    25%{translate: 10px 4px}
    50%{translate: -5px 10px}
    75%{translate: 2px -2px}
    100%{translate: 0 0 }
}
.ndt:hover .tomove{
    animation: tomove 5s infinite;
}
.ndt-display{display: none;}
#ndt:hover .ndt-display{display: block;}

/* weld icon */
.dash1{stroke-dasharray:9,6,5;}

.icon-w-1{stroke-dasharray:0,7,1,10,0,4}
.icon-w-2{stroke-dasharray:9,6,2,4;}
@keyframes fshhh{
    0%{stroke-dasharray:0,0,0,0,0,0,0,0,0,7,1,10,0,4}
    60%{stroke-dasharray:0,0,0,0,10,7,2,3,0,7,1,10,0,4}
    100%{stroke-dasharray: 0,7,1,10,0,4,10,7,2,3;}
}
@keyframes pshhh{
    0%{stroke-dasharray:0,0,0,0,0,0,9,6,2,4;}
    60%{stroke-dasharray:0,0,0,10,0,12,10,8,6;}
    100%{stroke-dasharray: 9,6,2,4,0,8,0,0,0,0,0;}
}
.icon-w-1, .icon-w-2{
    animation-iteration-count:infinite;
    animation-timing-function: linear;
}
.icon-w-1-1{animation-duration: 600ms;}
.icon-w-1-2{animation-duration: 500ms;}
.icon-w-1-3{animation-duration: 650ms;}
.icon-w-2-1{animation-duration: 450ms;}
.icon-w-2-2{animation-duration: 600ms;}
.icon-w-2-3{animation-duration: 500ms;}
.icon-w-2-4{animation-duration: 650ms;}
.welding:hover .icon-w-1{
    animation-name: fshhh;
}
.welding:hover .icon-w-2{
    animation-name: pshhh;
}

@keyframes shake{
    from{translate: 0 0}
    to{translate: .4% .5%}
}
.welding:hover .main_weld{
    animation: shake 70ms linear infinite alternate;
}