#step_1{
	width: 500px;
	height: 150px;
	margin-top: 200px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 50px;
	padding-bottom: 50px;

	text-align: center;
	font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
	line-height: 25px;

	background-color: #EBEBEB;
	border: 0.5px solid #888;

	border-radius: 7px 7px 7px 7px;
	-moz-border-radius: 7px 7px 7px 7px;
	-webkit-border-radius: 7px 7px 7px 7px;
	border: 0px solid #000000;

	-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.36);
	-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.36);
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.36);
}
#step_1 label{
	display: block;
}
#step_1 button{
	margin-top: 50px;
}
#frame{
	position:absolute;
    z-index: 500;
}
#toolBox{
	display: none;
	width: 1500px;
	height: 150px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;

	border: 0.5px solid #888;

	text-align: center;
	font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
	line-height: 25px;

	overflow: hidden;
}
#toolBox_message{
	display: block;
	width:100%;
	margin: 20px auto 20px auto;
	padding-top: 20px;

	font-size: 22px;
	float: left;
}
#toolBox input{
	float: left;

	margin-right: 20px;
	margin-left: 20px;

	overflow:hidden;
}

#picture{
	display: none;
	position: absolute;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
	z-index: 1000;
	background-color: #EBEBEB;
	border: 0.5px solid #888;

	text-align: center;
	font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
	line-height: 25px;

	-webkit-box-shadow: inset 0px 0px 15px -1px rgba(0,0,0,0.75);
	-moz-box-shadow: inset 0px 0px 15px -1px rgba(0,0,0,0.75);
	box-shadow: inset 0px 0px 15px -1px rgba(0,0,0,0.75);
}
#container_video{
	display:block;
	position:absolute;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0);
}
#webcam, #preview{
	display: none;

}
#preview{
	position:absolute;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 1);
}
#take_picture{
	display: none;
}
#picture_message{
	margin-top: 50px;
}

.countdown {
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	text-align: center;
	vertical-align: middle;
	color: rgba(214,84,82,1);
	font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
	font-size: 120px;
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
	line-height: 120px;
	z-index: 3000;
}


.myButton {
	width: 200px;
	height: 50px;
	-moz-box-shadow:inset 0px 1px 0px 0px #9fb4f2;
	-webkit-box-shadow:inset 0px 1px 0px 0px #9fb4f2;
	box-shadow:inset 0px 1px 0px 0px #9fb4f2;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #7892c2), color-stop(1, #2161b0));
	background:-moz-linear-gradient(top, #7892c2 5%, #2161b0 100%);
	background:-webkit-linear-gradient(top, #7892c2 5%, #2161b0 100%);
	background:-o-linear-gradient(top, #7892c2 5%, #2161b0 100%);
	background:-ms-linear-gradient(top, #7892c2 5%, #2161b0 100%);
	background:linear-gradient(to bottom, #7892c2 5%, #2161b0 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7892c2', endColorstr='#2161b0',GradientType=0);
	background-color:#7892c2;
	border:1px solid #1e2e5c;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Trebuchet MS;
	font-size:13px;
	font-weight:bold;
	padding:6px 12px;
	text-align: center;
	text-decoration:none;

	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	box-sizing: border-box;
}
.myButton_small{
	width: 70px;
	height: 50px;
	-moz-box-shadow:inset 0px 1px 0px 0px #F4D2A3;
	-webkit-box-shadow:inset 0px 1px 0px 0px #F4D2A3;
	box-shadow:inset 0px 1px 0px 0px #F4D2A3;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #C29778), color-stop(1, #B07721));
	background:-moz-linear-gradient(top, #C29778 5%, #B07721 100%);
	background:-webkit-linear-gradient(top, #C29778 5%, #B07721 100%);
	background:-o-linear-gradient(top, #C29778 5%, #B07721 100%);
	background:-ms-linear-gradient(top, #C29778 5%, #B07721 100%);
	background:linear-gradient(to bottom, #C29778 5%, #B07721 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#C29778', endColorstr='#B07721',GradientType=0);
	background-color:#C29778;
	border:1px solid #5C441E;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Trebuchet MS;
	font-size:13px;
	font-weight:bold;
	padding:6px 12px;
	text-align: center;
	text-decoration:none;
	outline: none;

	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	box-sizing: border-box;
}
.myButton_small.checked{
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #C29778), color-stop(1, #D65452));
	background:-moz-linear-gradient(top, #C29778 5%, #D65452 100%);
	background:-webkit-linear-gradient(top, #C29778 5%, #D65452 100%);
	background:-o-linear-gradient(top, #C29778 5%, #D65452 100%);
	background:-ms-linear-gradient(top, #C29778 5%, #D65452 100%);
	background:linear-gradient(to bottom, #C29778 5%, #D65452 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#C29778', endColorstr='#D65452',GradientType=0);
	background-color:#C29778;
	border:1px solid #5C441E;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Trebuchet MS;
	font-size:13px;
	font-weight:bold;
	padding:6px 12px;
	text-decoration:none;
}
.myButton_small{
	width: 70px;
	height: 50px;
    margin-right: 20px;
    margin-left: 20px;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    overflow: hidden;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2161b0), color-stop(1, #7892c2));
	background:-moz-linear-gradient(top, #2161b0 5%, #7892c2 100%);
	background:-webkit-linear-gradient(top, #2161b0 5%, #7892c2 100%);
	background:-o-linear-gradient(top, #2161b0 5%, #7892c2 100%);
	background:-ms-linear-gradient(top, #2161b0 5%, #7892c2 100%);
	background:linear-gradient(to bottom, #2161b0 5%, #7892c2 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2161b0', endColorstr='#7892c2',GradientType=0);
	background-color:#2161b0;
}
.myButton:active {
	position:relative;
	top:1px;
}
.myButton:focus {
    outline: none;
}
.myButton.checked {
	-moz-box-shadow:inset 0px 1px 0px 0px #9fb4f2;
	-webkit-box-shadow:inset 0px 1px 0px 0px #9fb4f2;
	box-shadow:inset 0px 1px 0px 0px #9fb4f2;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #7892c2), color-stop(1, #D65452));
	background:-moz-linear-gradient(top, #7892c2 5%, #D65452 100%);
	background:-webkit-linear-gradient(top, #7892c2 5%, #D65452 100%);
	background:-o-linear-gradient(top, #7892c2 5%, #D65452 100%);
	background:-ms-linear-gradient(top, #7892c2 5%, #D65452 100%);
	background:linear-gradient(to bottom, #7892c2 5%, #D65452 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7892c2', endColorstr='#D65452',GradientType=0);
	background-color:#7892c2;
	border:1px solid #1e2e5c;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Trebuchet MS;
	font-size:13px;
	font-weight:bold;
	padding:6px 12px;
	text-decoration:none;
}
.myButton_temp {
	-moz-box-shadow:inset 0px 1px 0px 0px #9acc85;
	-webkit-box-shadow:inset 0px 1px 0px 0px #9acc85;
	box-shadow:inset 0px 1px 0px 0px #9acc85;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #74ad5a), color-stop(1, #68a54b));
	background:-moz-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
	background:-webkit-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
	background:-o-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
	background:-ms-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
	background:linear-gradient(to bottom, #74ad5a 5%, #68a54b 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#74ad5a', endColorstr='#68a54b',GradientType=0);
	background-color:#74ad5a;
	border:1px solid #3b6e22;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:13px;
	font-weight:bold;
	text-decoration:none;
	text-align: center;

	width: 200px;
	height: 50px;
    margin-right: 20px;
    margin-left: 20px;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    overflow: hidden;
}
.myButton_temp:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #68a54b), color-stop(1, #74ad5a));
	background:-moz-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
	background:-webkit-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
	background:-o-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
	background:-ms-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
	background:linear-gradient(to bottom, #68a54b 5%, #74ad5a 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#68a54b', endColorstr='#74ad5a',GradientType=0);
	background-color:#68a54b;
}
.myButton_temp:active {
	position:relative;
	top:1px;
}
.myButton_temp:focus {
    outline: none;
}

#create_frame{
	margin-top: 40px;
}

.grid,.case{
	position: relative;
	border: solid 1px rgba(0,0,0,1);
	box-sizing: border-box;
	z-index: 400;
}
.case{
	float:left;
	width:25%;
	height:25%;
}