@import url(https://fonts.googleapis.com/css?family=Libre+Baskerville:700);


#lock-plate{
	background: transparent;
    font-family: "Orbitron";
}

    #lock-plate span{
    	display: block;
    	position: absolute;
    	width: 15px;
    	height: 15px;
    	border-radius: 10px;
    	box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.6), inset 0 -1px 0 rgba(255, 255, 255, 0.8);
    	background: #bdc1c4;
    }

        #lock-plate span:first-child{
        	top: 9px;
        	left: 9px;
        }

        #lock-plate span:nth-child(2){
            top: 9px;
            right: 9px;
        }

        #lock-plate span:nth-child(3){
            bottom: 9px;
            left: 9px;
        }

        #lock-plate span:nth-child(4){
            bottom: 9px;
            right: 9px;
        }

#lock-wrapper{
    display: flex;
    align-items: center;
    width: 445px;
    padding: 0 20px 0 8px;
    border-radius: 7px;
    height: 250px;
    overflow: hidden;
    margin: 0 auto;

    justify-content: space-between;
    border-radius: 5px;
    background-color: #000;
    box-shadow: 10px 4px 8px #111;background-color: #333;
    border: 2px #000 solid;
    border-radius: 5px;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    background: rgb(51,51,51);
    background: -moz-linear-gradient(top,  rgba(51,51,51,1) 0%, rgba(17,17,17,1) 51%, rgba(51,51,51,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(51,51,51,1)), color-stop(51%,rgba(17,17,17,1)), color-stop(100%,rgba(51,51,51,1)));
    background: -webkit-linear-gradient(top,  rgba(51,51,51,1) 0%,rgba(17,17,17,1) 51%,rgba(51,51,51,1) 100%);
    background: -o-linear-gradient(top,  rgba(51,51,51,1) 0%,rgba(17,17,17,1) 51%,rgba(51,51,51,1) 100%);
    background: -ms-linear-gradient(top,  rgba(51,51,51,1) 0%,rgba(17,17,17,1) 51%,rgba(51,51,51,1) 100%);
    background: linear-gradient(to bottom,  rgba(51,51,51,1) 0%,rgba(17,17,17,1) 51%,rgba(51,51,51,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#333333',GradientType=0 );
}

.lock-dial{
    height: 210px;
    width: 68px;
    margin-left: 11px;
    position: relative;
    cursor: move;
    border: 5px solid #000;
    overflow: hidden;
    background-color: #000;
    box-shadow: 10px 4px 8px #111;
    color: #000;
}

#lock-wrapper .lock-dial ul{
	margin: 0;
	padding: 0;
	text-align: center;
	list-style: none;
	font-size: 53px;
	line-height: 70px;
	color: #000;
	text-shadow: 0 -2px 0 #212c42;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;
	transition: box-shadow .45s linear, color .25s linear;
	-webkit-transition: box-shadow .45s linear, color .25s linear;
     box-shadow: 10px 4px 8px #111;
}

    #lock-wrapper .lock-dial ul li{
        font-weight: 400;
        font-size: 40px;
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,204,204,1)), color-stop(9%,rgba(204,204,204,1)), color-stop(9%,rgba(170,170,170,1)), color-stop(50%,rgba(204,204,204,1)), color-stop(72%,rgba(170,170,170,1)), color-stop(100%,rgba(0,0,0,1)));
        background: -webkit-linear-gradient(top,  rgba(204,204,204,1) 0%,rgba(204,204,204,1) 9%,rgba(170,170,170,1) 9%,rgba(204,204,204,1) 50%,rgba(170,170,170,1) 72%,rgba(0,0,0,1) 100%);
        background: -o-linear-gradient(top,  rgba(204,204,204,1) 0%,rgba(204,204,204,1) 9%,rgba(170,170,170,1) 9%,rgba(204,204,204,1) 50%,rgba(170,170,170,1) 72%,rgba(0,0,0,1) 100%);
        background: -ms-linear-gradient(top,  rgba(204,204,204,1) 0%,rgba(204,204,204,1) 9%,rgba(170,170,170,1) 9%,rgba(204,204,204,1) 50%,rgba(170,170,170,1) 72%,rgba(0,0,0,1) 100%);
        background: linear-gradient(to bottom,  rgba(204,204,204,1) 0%,rgba(204,204,204,1) 9%,rgba(170,170,170,1) 9%,rgba(204,204,204,1) 50%,rgba(170,170,170,1) 72%,rgba(0,0,0,1) 100%);
    }

#lock-wrapper .lock-dial ul li.top-gradient {
    background: rgb(17,17,17);
    background: -moz-linear-gradient(top,  rgba(17,17,17,1) 0%, rgba(238,238,238,1) 90%, rgba(102,102,102,1) 90%, rgba(102,102,102,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(17,17,17,1)), color-stop(90%,rgba(238,238,238,1)), color-stop(90%,rgba(102,102,102,1)), color-stop(100%,rgba(102,102,102,1)));
    background: -webkit-linear-gradient(top,  rgba(17,17,17,1) 0%,rgba(238,238,238,1) 90%,rgba(102,102,102,1) 90%,rgba(102,102,102,1) 100%);
    background: -o-linear-gradient(top,  rgba(17,17,17,1) 0%,rgba(238,238,238,1) 90%,rgba(102,102,102,1) 90%,rgba(102,102,102,1) 100%);
    background: -ms-linear-gradient(top,  rgba(17,17,17,1) 0%,rgba(238,238,238,1) 90%,rgba(102,102,102,1) 90%,rgba(102,102,102,1) 100%);
    background: linear-gradient(to bottom,  rgba(17,17,17,1) 0%,rgba(238,238,238,1) 90%,rgba(102,102,102,1) 90%,rgba(102,102,102,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111111', endColorstr='#666666',GradientType=0 );
}

#lock-wrapper .lock-dial ul li.bottom-gradient {
    background: rgb(238,238,238);
    background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(238,238,238,1) 9%, rgba(204,204,204,1) 9%, rgba(17,17,17,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(9%,rgba(238,238,238,1)), color-stop(9%,rgba(204,204,204,1)), color-stop(100%,rgba(17,17,17,1)));
    background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 9%,rgba(204,204,204,1) 9%,rgba(17,17,17,1) 100%);
    background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 9%,rgba(204,204,204,1) 9%,rgba(17,17,17,1) 100%);
    background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 9%,rgba(204,204,204,1) 9%,rgba(17,17,17,1) 100%);
    background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 9%,rgba(204,204,204,1) 9%,rgba(17,17,17,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#111111',GradientType=0 );
}

#lock-wrapper.unlocked .lock-dial ul{
	color: green;
	text-shadow: 0 0 5px #3f3;
}

@media(max-width: 480px) {
	#lock-wrapper {
		width: 90vmin;


	}

		.lock-dial {
			width: 14vmin;
		}

			#lock-wrapper .lock-dial ul li {
				font-size: 12vmin;
			}
}

@media(max-height: 400px) {
	.briefcase-combination-wrapper {
		top: 12vmin;
	}
}