.thumb.visible {
    display: block !important;
}

.thumb {
    width: 200px;
    height: 200px;
    position: fixed;
    left: calc(50vw - 100px);
    top: calc(50vh - 100px);
    display: none;
    z-index: 1000;

    .check-icon {
        width: 200px;
        height: 200px;
        position: relative;
        border-radius: 50%;
        box-sizing: content-box;
        border: 4px solid #4CAF50;
        background-color: #4CAF50;

        &::before {
            top: 80px;
            left: -2px;
            width: 50px;
            transform-origin: 100% 50%;
            border-radius: 100px 0 0 100px;
        }

        &::after {
            top: 0;
            left: 30px;
            width: 220px;
            transform-origin: 0 50%;
            border-radius: 0 100px 100px 0;
            animation: rotate-circle 4.25s ease-in;
        }

        .thumb-image {
            top: 14px;
            left: 16px;
            width: 160px;
            height: 160px;
            display: block;
            border-radius: 2px;
            position: absolute;
            z-index: 10;
            transform: rotate(-30deg);
            animation: thumb-animate 0.75s;
            background: url('/img/thumb.png') no-repeat center center;
            background-size: contain;
        }

        .icon-circle {
            top: -7px;
            left: -7px;
            z-index: 10;
            width: 205px;
            height: 205px;
            border-radius: 50%;
            position: absolute;
            box-sizing: content-box;
            border: 4px solid rgba(76, 175, 80, .5);
        }
    }
}

@keyframes rotate-circle {
    0% {
        transform: rotate(-45deg);
    }
    5% {
        transform: rotate(-45deg);
    }
    12% {
        transform: rotate(-405deg);
    }
    100% {
        transform: rotate(-405deg);
    }
}

@keyframes thumb-animate {
    0% {
        transform:rotate(-510deg);
        opacity: 0;
    }
    100% {
        transform:rotate(-30deg);
        opacity: 1.0;
    }
}