.box_wrapper {
	max-width:500px;
	background: url("src/box.jpg");
	background-size: 100% auto;
	margin:0 auto;
	padding:0;
}

.box_buffer_1 {
	height:0;
	padding-bottom:32%;
	position:relative;
}

.box_buffer_2 {
	height:0;
	padding-bottom:15%;
	position:relative;
}


.round_wrapper {
	max-width:75%;
	background: url("src/back.jpg") bottom center no-repeat;
	background-size:100% auto;
	margin:0 auto;
	padding-top:18%;
	position:relative;
}

.round_box {
	height:0;
	padding-bottom:100%;
}

.stencil {
	width:50%;
	height:48.3%;
	position:absolute;
	top:49%;
	left:12%;
	border-radius:5%;
	background: url("src/stn.png");
	background-size: 100% auto;
	box-shadow: 0 5px 15px rgba(0,0,0,0.19), 0 5px 5px rgba(0,0,0,0.23);
	cursor: -webkit-grab;
	cursor: grab;
}

.round_text {
	display:none;
	max-width:600px;
	padding:10px 20px;
	margin:0 auto;
	background:#fff;
}

.click_zone_1, .click_zone_2, .click_zone_3, .click_zone_0, .digit_1, .digit_2, .digit_3, .digit_0 {
	width:15%;
	height:15%;
	position:absolute;
	border-radius:15%;
	border:2px solid transparent;
}

.digit_1, .digit_2, .digit_3, .digit_0 {
	background:url("src/digits.png") top center repeat-y;
	background-size:100% auto;
	background-color:#fff;
	transition: all 0.2s ease-in-out;
}

.click_zone_0, .digit_0 {
	top:0;
	left:12%;
}

.click_zone_1, .digit_1  {
	top:0;
	left:32%;
}

.click_zone_2, .digit_2  {
	top:0;
	left:52%;
}

.click_zone_3, .digit_3  {
	top:0;
	left:72%;
}

.click_zone_1, .click_zone_2, .click_zone_3, .click_zone_0 {
	z-index:100;
	border-color:#003;
	background: rgb(255,255,255);
background: -moz-linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 65%, rgba(0,0,0,0.3) 85%, rgba(0,0,0,0.7) 100%);
background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 65%, rgba(0,0,0,0.3) 85%, rgba(0,0,0,0.7) 100%);
background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 65%, rgba(0,0,0,0.3) 85%, rgba(0,0,0,0.7) 100%);
}

.click_zone_1:hover, .click_zone_2:hover, .click_zone_3:hover, .click_zone_0:hover {
	cursor:pointer;
} 

.grabbed {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
