.vault-door-wrapper {
    display: flex;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url('../img/vault_background.jpg');
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .vault-door-keypad {
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url('../img/keypad.png');
        position: absolute;
        cursor: pointer;
    }

        .vault-door-keypad:hover {
            opacity: .8;
        }

    .vault-door-wheel {
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url('../img/background_wheel.png');
        position: absolute;
    }

.vault-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: rgba(0,0,0,.8);
}

    .vault-top-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

        .vault-message {
            color: #fff;
            font-size: 3vmin;
        }

            .vault-message.error {
                color: #f00;
            }

            .vault-message.correct {
                color: #0f0;
            }

            #vaultEntry {
                color: #fff;
                font-size: 3vmin;
                height: 4vmin;
                display: flex;
                align-items: center;
                justify-content: center;
                display: block;
            }

                #vaultEntry:after {
                    content: "|";
                    animation-name: blinker;
                    animation-iteration-count: infinite;
                    animation-timing-function: cubic-bezier(1,0,0,1);
                    animation-duration: 1s;
                    -webkit-appearance: none !important;
                    appearance: none !important;
                }

                @keyframes blinker {
                    from {
                        opacity: 1.0;
                    } to {
                        opacity: 0.0;
                    }
                }

    .vault-keypad-background {
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url('../img/keypad_blank.png');
        width: 60vmin;
        height: 50vmin;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

        .vault-keypad-wrapper {
            position: absolute;
            width: 51vmin;
            height: 40vmin;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-direction: column;
            margin-top: -1vmin;
        }

        .vault-keypad-row {
            display: flex;
            justify-content: space-between;
            width: 100%;
        }

            .vault-keypad-row:last-of-type {
                justify-content: flex-end;
                margin-top: 1.3vmin;
                margin-bottom: -0.5vmin;
            }

            .vault-keypad-row:last-of-type .vault-keypad-key {
                font-size: 2vmin;
            }

                .vault-keypad-row:last-of-type .vault-keypad-key-outer:first-of-type {
                    color: #D01B22;
                    width: 8vmin;
                }

                    .vault-keypad-row:last-of-type .vault-keypad-key-outer:first-of-type .vault-keypad-key {
                        width: 7vmin;
                    }

                .vault-keypad-row:last-of-type .vault-keypad-key-outer:nth-of-type(2) {
                    color: #EBDA00;
                    width: 8vmin;
                    margin-left: 1.3vmin;
                }

                    .vault-keypad-row:last-of-type .vault-keypad-key-outer:nth-of-type(2) .vault-keypad-key {
                        width: 7vmin;
                    }

                .vault-keypad-row:last-of-type .vault-keypad-key-outer:last-of-type {
                    color: #00974B;
                    width: 8vmin;
                    margin-left: 1.3vmin;
                }

                    .vault-keypad-row:last-of-type .vault-keypad-key-outer:last-of-type .vault-keypad-key {
                        width: 7vmin;
                    }

            .vault-keypad-key-outer {
                border: .15vmin solid #44494C;
                border-radius: .8vmin;
                width: 7vmin;
                height: 5.3vmin;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                background: rgb(153,153,153);
                background: -moz-linear-gradient(45deg, rgba(153,153,153,1) 0%, rgba(209,211,212,1) 100%);
                background: -webkit-linear-gradient(45deg, rgba(153,153,153,1) 0%,rgba(209,211,212,1) 100%);
                background: linear-gradient(45deg, rgba(153,153,153,1) 0%,rgba(209,211,212,1) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#d1d3d4',GradientType=1 );
                touch-action: manipulation;
            }

                .vault-keypad-key-outer:hover {
                    background: #FFFA52;
                }

                .vault-keypad-key {
                    position: absolute;
                    font-family: "Inconsolata", sans-serif;
                    font-weight: 700;
                    font-size: 4vmin;
                    line-height: 4vmin;
                    border: .18vmin solid #44494C;
                    border-radius: .4vmin;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 6vmin;
                    height: 4vmin;
                    touch-action: manipulation;
                }

    .vault-bottom-wrapper {
        font-size: 3vmin;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 60vmin;
    }

        .vault-timer {
            color: #f00;
        }

        .vault-audio {
            color: #fff;
        }

@media(max-aspect-ratio: 1024/768 ) {
    .vault-door-wrapper {
        width: 100vw;
        height: 75vw;
    }
        .vault-door-keypad {
            width: 19.9vw;
            height: 20vw;
            left: 11.8vw;
            top: 4.5vw;
        }

        .vault-door-wheel {
            width: 54vw;
            height: 58vw;
            left: 23.5vw;
            top: 9.1vw;
            border-radius: 50%;
            background-size: 101vw;
            background-position: -23.7vw -9.4vw;
        }
}

@media(min-aspect-ratio: 1024/768 ) {
    .vault-door-wrapper {
        width: 133.5vh;
        height: 100vh;
    }
        .vault-door-keypad {
            width: 26vh;
            height: 21.7vh;
            left: 16vh;
            top: 8.4vh;
        }

        .vault-door-wheel {
            width: 71.6vh;
            height: 71.7vh;
            left: 32.5vh;
            top: 12.1vh;
            border-radius: 50%;
            background-size: 134vmin;
            background-position: -32.7vmin -12.4vmin;
        }
}

@media(max-width: 800px), (max-height: 800px) {
    .vault-message {
        font-size: 7vmin;
        text-align: center;
        margin: 0 3vmin;
    }

    #vaultEntry {
        font-size: 6vmin;
        height: 6vmin;
    }

    .vault-bottom-wrapper {
        width: 96vmin;
    }

        .vault-audio,
        .vault-timer {
            font-size: 6vmin;
        }

    .vault-keypad-background {
        width: 96vmin;
        height: 81vmin;
    }

        .vault-keypad-key-outer {
            width: 13vmin;
            height: 9.3vmin;
        }

            .vault-keypad-key {
                width: 11.5vmin;
                height: 8vmin;
                font-size: 8vmin;
            }

    .vault-keypad-wrapper {
        width: 89vmin;
        height: 72vmin;
    }

    .vault-keypad-row:last-of-type {
        margin-bottom: 2.5vmin;
    }

    .vault-keypad-row:last-of-type .vault-keypad-key-outer {
        width: 19vmin !important;
    }

        .vault-keypad-row:last-of-type .vault-keypad-key {
            width: 17vmin !important;
            font-size: 5vmin !important;
        }

}