#main {font-family:Geneva, sans-serif;font-size:10px;}
.canvas {width:150px;height: 100%;position:relative;}
.point {position:absolute;height:1px;width:1px;background-color:#c00;}
.dot_container {position:absolute;padding:1px;padding:1px;}

.dot {position:relative;height:12px;width:12px;background-color:#000;border-radius:6px;float:left;margin:12px -3px 0 0 ;}
.dot_number {position:relative;float:left;}

.line {
	height:4px;
	position:absolute;
	background-color:#000;
}

.hidden_image {opacity:0;position:absolute;width:635px;height:841px;}
#img_left{background:url(../images/scissors_left.png) no-repeat 28px 10px;}
#img_right{background:url(../images/scissors_right.png) no-repeat 184px 28px;}

/* active dot */

.active .dot {
background-color:#2196f3;
}
h5 {
	font-family:Arial;
	font-size: 70px;
	position: fixed;
    right: 100px;
	top: 100px;
}
button {
	background-color: #4CAF50;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 46px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2b665e;
	position: fixed;
    right: 100px;
    bottom: 100px;
}
button:disabled {
	background-color:#768d87;
}
#completed {
	    position: fixed;
    z-index: 15;
    bottom: 50%;
    background-color: rgba(0, 0, 0, 0.8);
    left: 45%;
	color: white;
}   
#completed h3{
	color: white !important;
	text-align: center !important;;
} 
/*
.active .dot_number {
-webkit-animation: numberColor .7s linear infinite alternate;
-moz-animation: numberColor .7s linear infinite alternate;
-o-animation: numberColor .7s linear infinite alternate;
animation: numberColor .7s linear infinite alternate;
color:#f00;
}

/* active dot pulse */
/*
@-webkit-keyframes dotBackgroundColor{ from{background-color:#f00;}to{background-color:#000;}}
@-moz-keyframes dotBackgroundColor{ from{background-color:#f00;}to{background-color:#000;}}
@-o-keyframes dotBackgroundColor{ from{background-color:#f00;}to{background-color:#000;}}
@keyframes dotBackgroundColor{ from{background-color:#f00;}to{background-color:#000;}}

@-webkit-keyframes numberColor{ from{color:#f00;}to{color:#000;}}
@-moz-keyframes numberColor{ from{color:#f00;}to{color:#000;}}
@-o-keyframes numberColor{ from{color:#f00;}to{color:#000;}}
@keyframes numberColor{ from{color:#f00;}to{color:#000;}}

.active:hover .dot {
	background-color:#f00;
	-moz-animation:none;
	-webkit-animation:none;
	-o-animation:none;
	animation:none;
}
.active:hover .dot_number {
	color:#f00;
	-moz-animation:none;
	-webkit-animation:none;
	-o-animation:none;
	animation:none;
}
.active:hover {cursor:pointer;}
*/
/* animate image rotate */
#img_left.animate {
	-moz-transform-origin:342px 382px;

	-moz-animation: imgRotateLeft .7s linear infinite alternate;
	-webkit-animation: imgRotateLeft .7s linear infinite alternate;
	-o-animation: imgRotateLeft .7s linear infinite alternate;
	animation: imgRotateLeft .7s linear infinite alternate;
}

@-webkit-keyframes	imgRotateLeft{ from{-webkit-transform:rotate(0deg);}to{-webkit-transform:rotate(-21deg);}}
@-moz-keyframes		imgRotateLeft{ from{-moz-transform:rotate(0deg);}to{-moz-transform:rotate(-21deg);}}
@-o-keyframes		imgRotateLeft{ from{-o-transform:rotate(0deg);}to{-o-transform:rotate(-21deg);}}
@keyframes			imgRotateLeft{ from{transform:rotate(0deg);}to{transform:rotate(-21deg);}}


#img_right.animate {
	-moz-transform-origin:342px 382px;

	-webkit-animation: imgRotateRight .7s linear infinite alternate;
	-moz-animation: imgRotateRight .7s linear infinite alternate;
	-o-animation: imgRotateRight .7s linear infinite alternate;
	animation: imgRotateRight .7s linear infinite alternate;
}

@-webkit-keyframes	imgRotateRight{ from{-webkit-transform:rotate(0deg);}to{-webkit-transform:rotate(21deg);}}
@-moz-keyframes		imgRotateRight{ from{-moz-transform:rotate(0deg);}to{-moz-transform:rotate(21deg);}}
@-o-keyframes		imgRotateRight{ from{-o-transform:rotate(0deg);}to{-o-transform:rotate(21deg);}}
@keyframes			imgRotateRight{ from{transform:rotate(0deg);}to{transform:rotate(21deg);}}

.dot_container.first > .image {
	border: 3px solid black;
	border-radius: 5px;
    width: 265px;
    height: 157px;
	position: absolute;
	bottom: -80px;
	right: 20px;
}
.dot_container.second > .image {
	border: 3px solid black;
	border-radius: 5px;
    width: 265px;
    height: 157px;
	position: absolute;
	bottom: -80px;
	left: 20px;
}
.dot_container.first > .image.card0 {
    background-image: url(../images/matches/card1.jpg);
}
.dot_container.second > .image.card0 {
	 background-image: url(../images/matches/card1m.jpg);
}
.dot_container.first > .image.card2 {
    background-image: url(../images/matches/card2.jpg);
}
.dot_container.second > .image.card2 {
	 background-image: url(../images/matches/card2m.jpg);
}
.dot_container.first > .image.card4 {
    background-image: url(../images/matches/card3.jpg);
}
.dot_container.second > .image.card4 {
	 background-image: url(../images/matches/card3m.jpg);
}
.dot_container.first > .image.card6 {
    background-image: url(../images/matches/card4.jpg);
}
.dot_container.second > .image.card6 {
	 background-image: url(../images/matches/card4m.jpg);
}
.dot_container.first > .image.card8 {
    background-image: url(../images/matches/card5.jpg);
}
.dot_container.second > .image.card8 {
	 background-image: url(../images/matches/card5m.jpg);
}
.dot_container.first > .image.card10 {
    background-image: url(../images/matches/card6.jpg);
}
.dot_container.second > .image.card10 {
	 background-image: url(../images/matches/card6m.jpg);
}
.dot_container.first > .image.card12 {
    background-image: url(../images/matches/card7.jpg);
}
.dot_container.second > .image.card12 {
	 background-image: url(../images/matches/card7m.jpg);
}
.dot_container.first > .image.card14 {
    background-image: url(../images/matches/card8.jpg);
}
.dot_container.second > .image.card14 {
	 background-image: url(../images/matches/card8m.jpg);
}
.dot_container.first > .image.card16 {
    background-image: url(../images/matches/card9.jpg);
}
.dot_container.second > .image.card16 {
	 background-image: url(../images/matches/card9m.jpg);
}
.dot_container.first > .image.card18 {
    background-image: url(../images/matches/card10.jpg);
}
.dot_container.second > .image.card18 {
	 background-image: url(../images/matches/card10m.jpg);
}
.dot_container.first > .image.card20 {
    background-image: url(../images/matches/card11.jpg);
}
.dot_container.second > .image.card20 {
	 background-image: url(../images/matches/card11m.jpg);
}
.dot_container.first > .image.card22 {
    background-image: url(../images/matches/card12.jpg);
}
.dot_container.second > .image.card22 {
	 background-image: url(../images/matches/card12m.jpg);
}
.dot_container.first > .image.card24 {
    background-image: url(../images/matches/card13.jpg);
}
.dot_container.second > .image.card24 {
	 background-image: url(../images/matches/card13m.jpg);
}
.dot_container.first > .image.card26 {
    background-image: url(../images/matches/card14.jpg);
}
.dot_container.second > .image.card26 {
	 background-image: url(../images/matches/card14m.jpg);
}
.dot_container.first > .image.card28 {
    background-image: url(../images/matches/card15.jpg);
}
.dot_container.second > .image.card28 {
	 background-image: url(../images/matches/card15m.jpg);
}
.dot_container.first > .image.card30 {
    background-image: url(../images/matches/card16.jpg);
}
.dot_container.second > .image.card30 {
	 background-image: url(../images/matches/card16m.jpg);
}
.dot_container.first > .image.card32 {
    background-image: url(../images/matches/card17.jpg);
}
.dot_container.second > .image.card32 {
	 background-image: url(../images/matches/card17m.jpg);
}
.dot_container.first > .image.card34 {
    background-image: url(../images/matches/card18.jpg);
}
.dot_container.second > .image.card34 {
	 background-image: url(../images/matches/card18m.jpg);
}
.dot_container.first > .image.card36 {
    background-image: url(../images/matches/card19.jpg);
}
.dot_container.second > .image.card36 {
	 background-image: url(../images/matches/card19m.jpg);
}
.dot_container.first > .image.card38 {
    background-image: url(../images/matches/card20.jpg);
}
.dot_container.second > .image.card38 {
	 background-image: url(../images/matches/card20m.jpg);
}
.dot_container.first > .image.card40 {
    background-image: url(../images/matches/card21.jpg);
}
.dot_container.second > .image.card40 {
	 background-image: url(../images/matches/card21m.jpg);
}
.dot_container.first > .image.card42 {
    background-image: url(../images/matches/card22.jpg);
}
.dot_container.second > .image.card42 {
	 background-image: url(../images/matches/card22m.jpg);
}
.dot_container.first > .image.card44 {
    background-image: url(../images/matches/card23.jpg);
}
.dot_container.second > .image.card44 {
	 background-image: url(../images/matches/card23m.jpg);
}
.dot_container.first > .image.card46 {
    background-image: url(../images/matches/card24.jpg);
}
.dot_container.second > .image.card46 {
	 background-image: url(../images/matches/card24m.jpg);
}
.dot_container.first > .image.card48 {
    background-image: url(../images/matches/card25.jpg);
}
.dot_container.second > .image.card48 {
	 background-image: url(../images/matches/card25m.jpg);
}
.dot_container.first > .image.card50 {
    background-image: url(../images/matches/card26.jpg);
}
.dot_container.second > .image.card50 {
	 background-image: url(../images/matches/card26m.jpg);
}
.dot_container.first > .image.card52 {
    background-image: url(../images/matches/card27.jpg);
}
.dot_container.second > .image.card52 {
	 background-image: url(../images/matches/card27m.jpg);
}
.dot_container.first > .image.card54{
    background-image: url(../images/matches/card28.jpg);
}
.dot_container.second > .image.card54 {
	 background-image: url(../images/matches/card28m.jpg);
}
.dot_container.first > .image.card56{
    background-image: url(../images/matches/card29.jpg);
}
.dot_container.second > .image.card56 {
	 background-image: url(../images/matches/card29m.jpg);
}
.dot_container.first > .image.card58 {
    background-image: url(../images/matches/card30.jpg);
}
.dot_container.second > .image.card58 {
	 background-image: url(../images/matches/card30m.jpg);
}
.dot_container.error > .image {
	border: 4px solid red;
    border-radius: 5px;
}
.dot_container.success > .image {
	border: 4px solid green;
    border-radius: 5px;
}
.dot_container.active > .image {
	border: 4px solid #2196f3;
    border-radius: 5px;
}