.btn-lock {
    padding-left: calc(1.01vw);
    border: calc(0.2vw) solid #fff;
    /* right: calc(2.8vw); */
    scale: 0.8;
    z-index: 3;
    position: relative;
    /* top: calc(50% - 32px);
    left: calc(50% - 32px); */
    display: inline-block;
    background: #00bfe7;
    width: calc(4.15vw);
    height: calc(4.15vw);
    box-sizing: border-box;
    /* 18px */
    padding-top: calc(0.75vw);
    /* 12px */
    border-radius: 50%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.btn-lock svg {
    top: calc(1vw);
    position: absolute;
    fill: none;
    transform: translate3d(0, 0, 0);
}

.btn-lock svg .bling {
    stroke: #fff;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 3;
    stroke-dashoffset: 15;
    transition: all 0.3s ease;
}

.btn-lock svg .lock {
    stroke: #fff;
    stroke-width: 4px;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 36;
    transition: all 0.4s ease;
}

.btn-lock svg {
    height: calc(2.2vw);
    width: calc(2.3vw);
}

.btn-lock svg .lockb {
    fill: #fff;
    fill-rule: evenodd;
    clip-rule: evenodd;
    transform: rotate(8deg);
    transform-origin: 14px 20px;
    transition: all 0.2s ease;
}

#inpLock1,
#inpLock2,
#inpLock3 {
    display: none;
}

#inpLock1:checked+label,
#inpLock2:checked+label,
#inpLock3:checked+label {
    background: #100028;
}

#inpLock1:checked+label svg,
#inpLock2:checked+label svg,
#inpLock3:checked+label svg {
    opacity: 1;
}

#inpLock1:checked+label svg .bling,
#inpLock2:checked+label svg .bling,
#inpLock3:checked+label svg .bling {
    animation: bling6132 0.3s linear forwards;
    animation-delay: 0.2s;
}

#inpLock1:checked+label svg .lock,
#inpLock2:checked+label svg .lock,
#inpLock3:checked+label svg .lock {
    stroke-dasharray: 48;
    animation: locked 0.3s linear forwards;
}

#inpLock1:checked+label svg .lockb,
#inpLock2:checked+label svg .lockb,
#inpLock3:checked+label svg .lockb {
    transform: rotate(0);
    transform-origin: 14px 22px;
}

@keyframes bling6132 {
    50% {
        stroke-dasharray: 3;
        stroke-dashoffset: 12;
    }

    100% {
        stroke-dasharray: 3;
        stroke-dashoffset: 9;
    }
}

@keyframes locked {
    50% {
        transform: translateY(1px);
    }
}