body {
    background: #222;
}

:root {
    --lockwitdth: 300px;
    --lockheigth: 390px;
    --digitheight:50px;
}

@media (max-width: 600px) {
    :root {
        --lockwitdth: 300px;
        --lockheigth: 390px;
        --digitheight: calc(100vw/15);
    }
}

.myCenter {
    position: absolute;
    text-align: center;
    margin: auto;
    height: var(--lockheigth);
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

.myLock {
    display: inline-block;
    text-align: center;
    /*height: 310px;*/
    padding-top: calc(var(--digitheight) - 10px);
    padding-right : calc(var(--digitheight));
    padding-bottom: calc(var(--digitheight) - 10px);
    padding-left: calc(var(--digitheight));
    /*padding: 40px  50px 40px 50px;*/
    margin: auto;
    background: white;
    background: linear-gradient(white, #DCD3CA);
    border-radius: 25px;
    box-shadow: inset 0 -4px 4px #B1AAA1, 0 20px 40px rgba(0, 0, 0, 0.5), 0 2px 5px 1px rgba(0, 0, 0, 0.7);
}

    .myLock .lockInset {
        display: inline-block;
        position: relative;
        padding: calc((var(--digitheight)/2) - 2px); /*23px;*/
        background: linear-gradient(white, #DCD3CA);
        border-radius: 15px;
        box-shadow: inset 0 -8px 4px -4px #B1AAA1, 0 7px 10px rgba(0, 0, 0, 0.07), 0 14px 10px rgba(0, 0, 0, 0.07), 0 20px 10px rgba(0, 0, 0, 0.07), 0 27px 10px rgba(0, 0, 0, 0.07), 0 34px 10px rgba(0, 0, 0, 0.07), 0 2px 3px 1px rgba(0, 0, 0, 0.5);
    }

    .myLock .lockLine {
        position: absolute;
        margin: auto calc((var(--digitheight)/(-2)) + 2px); /*-23px;*/
        width: 100%;
        top: 0px;
        bottom: 0px;
        height: 4px;
        background: linear-gradient(rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 3px, rgba(0, 0, 0, 0.3) 3px);
    }

    .myLock .lockWrapper {
        text-align: center;
        position: relative;
        background: rgba(0,0,0,0.85);
        background: linear-gradient(black 13%, #403C3A, black 75%, #110C14, black 85%);
        border-radius: 8px;
        height: calc(var(--digitheight)*3); /*150px;*/
        box-shadow: inset 0 0 10px 2px black;
        /*overflow:hidden;*/ /*better*/
    }

    .myLock .dial {
        display: inline-block;
        vertical-align: top;
        height: calc(var(--digitheight)*3); /*150px;*/
        /*width: 84px;*/
        width:calc(var(--digitheight)*1.5);
        padding-top: calc(-1*var(--digitheight)); /*-50px;*/
        margin: 0px calc(var(--digitheight)/7);
        /*margin: 0px 7px;*/
        background: linear-gradient(#000000 0%, #000006 3%, #08000d 4%, #292527 7%, #55514c 9%, #847f76 11%, #979289 12%, #bab3a9 15%, #d9cfc6 17%, #f4eae1 19%, #fff4ec 20%, #fffffc 22%, #ffffff 24%, #fffffe 33%, #fffdf5 35%, #fef3eb 37%, #d4ccc2 45%, #ada69d 54%, #726d66 65%, #595550 71%, #4f4b47 74%, #4b4743 76%, #4b4743 79%, #4f4b47 80%, #6a665f 84%, #6d6861 85%, #6a665f 88%, #65605a 89%, #54504b 91%, #0d0711 98%, #02000a 99%, #000004 100%);
        border: calc(var(--digitheight)/10) solid rgba(0, 0, 0, 0.25);
        /*border: 5px solid rgba(0, 0, 0, 0.25);*/
        border-top: none;
        border-bottom: none;
        border-left-image: linear-gradient(white, black);
        overflow: hidden;
        font-size: calc(var(--digitheight) - 5px); /*45px;*/
        font-family: arial;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 -1px 0 rgba(0, 0, 0, 0.5), 0 -2px 0 rgba(255, 255, 255, 0.1);
        color: #827D74;
        cursor: pointer;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), 0 8px 10px rgba(0, 0, 0, 0.2), 0 13px 10px rgba(0, 0, 0, 0.2);
    }

        .myLock .dial ol {
            display: inline;
            position: relative;
            top: calc(-1*var(--digitheight));  /*-50px;*/
        }

            .myLock .dial ol li {
                display: inline-block;
                position: relative;
                font-weight: 600;
                display: block;
                margin: 0 auto;
                height: calc(var(--digitheight) + 1px) ;  /*51px;*/
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }

    .myLock .shadow {
        pointer-events: none;
        position: absolute;
        top: 0px;
        background: linear-gradient(black 5%, transparent 40%, transparent 60%, black 100%);
        border-radius: 8px;
        height: calc(var(--digitheight)*3); /*150px;*/
        width: 100%;
    }

    .myLock .btnEnter {
        font-size: calc(var(--digitheight) - 5px); /*45px;*/
        font-family: arial;
        font-weight: 600;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 -1px 0 rgba(0, 0, 0, 0.5), 0 -2px 0 rgba(255, 255, 255, 0.1);
        color: #333;
        cursor: pointer;
        margin: auto;
        /*width: 350px;*/
        height: var(--digitheight); /*50px;*/
        margin-top: 15px;
        display: block;
        padding: calc((var(--digitheight)/2) - 2px); /*23px;*/
        background: linear-gradient(white, #DCD3CA);
        border-radius: 15px;
        border: 1px solid #999;
        box-shadow: inset 0 -8px 4px -4px #B1AAA1, 0 7px 10px rgba(0, 0, 0, 0.07), 0 14px 10px rgba(0, 0, 0, 0.07), 0 20px 10px rgba(0, 0, 0, 0.07), 0 27px 10px rgba(0, 0, 0, 0.07), 0 34px 10px rgba(0, 0, 0, 0.07), 0 2px 3px 1px rgba(0, 0, 0, 0.5);
    }

        .myLock .btnEnter:active {
            font-size: calc(var(--digitheight) - 6px);  /*44px;*/
            background: linear-gradient(white, #DCD3CA);
            border-radius: 15px;
            border: 1px solid #999;
            vertical-align: -5px;
            box-shadow: inset 0 7px 10px rgba(0, 0, 0, 0.07), inset 0 14px 10px rgba(0, 0, 0, 0.07), inset 0 20px 10px rgba(0, 0, 0, 0.07), inset 0 27px 10px rgba(0, 0, 0, 0.07), inset 0 34px 10px rgba(0, 0, 0, 0.07), inset 0 2px 3px 1px rgba(0, 0, 0, 0.5), inset 0 -8px 4px -4px #B1AAA1;
        }

.animation {
    -webkit-animation: toppos 0.35s ease-out;
    -moz-animation: toppos 0.35s ease-out;
    -ms-animation: toppos 0.35s ease-out;
    -o-animation: toppos 0.35s ease-out;
    animation: toppos 0.35s ease-out;
    /*animation: toppos 0.35s cubic-bezier(0.3,0.2,0.2,1.4);*/
}

@-webkit-keyframes toppos {
    0% {
        top: 0px;
    }

    100% {
        top: calc(var(--digitheight)*-1);
    }
}

#lock #locktitle {
    color: black;
    margin-top: 0px;
}