@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);

.dot2dot{background: #fbfaf8; border-radius:9px; overflow: hidden; font-family: 'Roboto', sans-serif; position:relative; border-radius: 9px; 
	-webkit-transition: -webkit-filter 0.2s linear;
	-moz-transition: -moz-filter 0.2s linear;
	-o-transition: -o-filter 0.2s linear;
	transition: filter 0.2s linear;}

	.oio_panel{width:100%; height:50px; border-bottom: 1px solid #e6e5e1; display: table; background: #eeedeb; border-radius: 9px 9px 0 0; z-index:100;}
		.oio_panel .steps{ height:50px; font-weight:300; color:#505050; font-size:30px; text-align: center; line-height: 35px; padding:0 7px 0 8px; border-right: 1px solid #e6e5e1; float: left; margin-bottom: -50px;}
			.oio_panel .steps span{font-size: 10px; clear: both; display: block; line-height: 8px;}

	.dot2dot .complete{display: table;  margin:7px auto 0;}
		.dot2dot .complete .dot_color{display: block; float: left; text-align: center; float: left; margin:0; width: 50px;}
			.dot2dot .complete .dot_count{font-size: 10px;  display: block; line-height:18px; width:50px;}
			.dot2dot .complete .dot{ width: 20px; height: 20px; margin:0 auto; border-radius: 50%; color: #fff; line-height: 20px; text-align: center; font-size:13px;}

	.oio_wrap{position: relative; overflow: hidden;}
		.oio_wrap .oio_sel_cursor{z-index: 10; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

		
		.oio_wrap .oio_wrap_lines{z-index: 20; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
			.oio_wrap .oio_wrap_lines .oio_line{position: absolute;}
		
		.oio_wrap .oio_wrap_dots{z-index: 30; position: absolute; top: 0; left: 0; width:100%; height:100%; }
			.oio_wrap .oio_dot{position: absolute;}
				.oio_wrap .oio_dot .dot{position:absolute; border-radius: 50%; left: 0; top: 0; bottom: 0; right: 0; margin: auto;}

		.oio_wrap_modal{z-index:200; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; display: none; opacity: 0; border-radius: 8px; background: rgba(33, 36, 46, 0.95); -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; transition: opacity 0.2s linear;}

	.dot2dot.blur .oio_wrap, .dot2dot.blur .oio_panel{
		-webkit-filter: blur(3px); 
		-moz-filter: blur(3px); 
		-o-filter: blur(3px); 
		-ms-filter: blur(3px); 
		filter: blur(3px);
	}

.remodal .complete{margin-top: 30px; margin-bottom: 30px;}

.remodal{width: 70%; position: relative; margin:100px auto 0; border-radius:6px; text-align: center; padding: 20px 35px; font-size: 16px; background: #f4f4f4; color: #182a3c;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-clip: padding-box;
	-webkit-box-shadow: 0px 0px 8px #171a24;
	box-shadow: 0px 0px 8px #171a24;
	-webkit-transform: scale(0.95);
	-moz-transform: scale(0.95);
	-ms-transform: scale(0.95);
	-o-transform: scale(0.95);
	transform: scale(0.95);
	-webkit-transition: -webkit-transform 0.2s linear;
	-moz-transition: -moz-transform 0.2s linear;
	-o-transition: -o-transform 0.2s linear;
	transition: transform 0.2s linear;
}

	.remodal-confirm, .remodal-cancel{display: inline-block; width: 120px; padding: 9px 0; margin: 5px; font-size: 10pt; cursor: pointer; text-decoration: none; text-align: center; border-radius: 50px;
		-webkit-transition: all 0.2s linear;
		-moz-transition: all 0.2s linear;
		-o-transition: all 0.2s linear;
		transition: all 0.2s linear;
	}
		.remodal-confirm{border: 2px solid #16a085; background: #f4f4f4; color: #16a085;}
		.remodal-confirm:hover, .remodal-confirm:active{background: #16a085; color: #f4f4f4;}
		.remodal-cancel{border: 2px solid #c0392b; background: #f4f4f4; color: #c0392b;}
		.remodal-cancel:hover, .remodal-cancel:active{background: #c0392b; color: #f4f4f4;}

	.remodal h2{font-size:30px; margin:10px 0;}