/*=========================

 anime-005

=========================*/
.anime-007{
	position : relative ;
	width : 150px ;
	height : 150px ;
}
.mario, .jump{
	display : flex ;
	flex-direction : column ;
	justify-content : center ;
	align-items : center ;
	position : relative ;
	width : 100% ;
	height : 100% ;
	list-style : none ;
	margin : 0 ;
	padding : 0 ;
}
.jump{
	position : absolute ;
	z-index : 2 ;
	top : 0 ;
	left :0 ;
	opacity : 0 ;
}
.row, .jumpRow{
	display : flex ;
	margin :0  ;
	padding : 0 ;
}
.dot{
	position : relative ;
	margin : 0 0 ;
	padding : 0 ;
	width : 8px ;
	height  :8px ;
	box-sizing : border-box ;
}
.mario .dot{
	animation-duration : .25s ;
	animation-timing-function : steps(2, end) ;
	animation-iteration-count : infinite ;
}
.btnBox{
	position : relative ;
	z-index : 0 ;
	width : 200px ;
	height : 40px ;
	margin : 40px auto 0 ;
	line-height : 40px ;
	text-align : center ;
	color : #FFF ;
	background : #098705;
}
.jumpBtn{
	position : absolute ;
	top : 0 ;
	left : 0 ;
	display : block ;
	width : 100% ;
	height: 100% ;
}
.-jump1{
	z-index : 1;
}
.-jump2{
	z-index : -1;
}
#radio1, #radio2{
	display : none ;
}
#radio1:checked ~ .anime-007 .jump{
	animation : jump 2s linear ;
}
#radio2:checked ~ .anime-007 .jump{
	animation : jump2 2s linear ;
}
#radio2:checked ~ .anime-007 .mario{
	animation : del 2s linear ;
}
#radio1:checked ~ .anime-007 .mario{
	animation : del2 2s linear ;
}
#radio1:checked ~ .btnBox .-jump1,
#radio2:checked ~ .btnBox .-jump2{
	z-index : -1;
}
#radio2:checked ~ .btnBox .-jump1,
#radio1:checked ~ .btnBox .-jump2{
	z-index : 1;
}
@keyframes del{
	0%{
		opacity : 1 ;
	}
	0.1%{
		opacity : 0 ;
	}
	99.9%{
		opacity : 0;
	}
	100%{
		opacity : 1 ;
	}
}
@keyframes del2{
	0%{
		opacity : 1 ;
	}
	0.1%{
		opacity : 0 ;
	}
	99.9%{
		opacity : 0;
	}
	100%{
		opacity : 1 ;
	}
}
@keyframes jump{
	0%{
		opacity : 0 ;
		transform : translate(0,0);
	}
	0.1%{
		opacity : 1;
		transform : translate(0,0);
	}
	40%{
		transform : translate(0,-80px);
	}
	50%{
		transform : translate(0,-100px);
	}
	60%{
		transform : translate(0,-80px);
	}
	99.9%{
		opacity : 1;
		transform : translate(0,0);
	}
	100%{
		opacity : 0 ;
		transform : translate(0,0);
	}
}
@keyframes jump2{
	0%{
		opacity : 0 ;
		transform : translate(0,0);
	}
	0.1%{
		opacity : 1;
		transform : translate(0,0);
	}
	40%{
		transform : translate(0,-80px);
	}
	50%{
		transform : translate(0,-100px);
	}
	60%{
		transform : translate(0,-80px);
	}
	99.9%{
		opacity : 1;
		transform : translate(0,0);
	}
	100%{
		opacity : 0 ;
		transform : translate(0,0);
	}
}
.color_ww{background : transparent ;}
.color_rr{background : #FF0000 ;}
.color_aa{background : #0000FF ;}
.color_bb{background : #3F2B15 ;}
.color_vv{background : #FFDAAB ;}
.jumpDot-w{background : transparent;}
.jumpDot-r{background : #FF0000;}
.jumpDot-a{background : #0000FF;}
.jumpDot-b{background : #3F2B15;}
.jumpDot-v{background : #FFDAAB;}
.color_rw{animation-name : col-rw ;}
.color_cr{animation-name : col-cr ;}
.color_vr{animation-name : col-vr ;}
.color_wr{animation-name : col-wr ;}
.color_vb{animation-name : col-vb ;}
.color_bv{animation-name : col-bv ;}
.color_vw{animation-name : col-vw ;}
.color_wv{animation-name : col-wv ;}
.color_wb{animation-name : col-wb ;}
.color_wv{animation-name : col-wv ;}
.color_bw{animation-name : col-bw ;}
.color_av{animation-name : col-av ;}
.color_rv{animation-name : col-rv ;}
.color_ra{animation-name : col-ra ;}
.color_aw{animation-name : col-aw ;}
.color_va{animation-name : col-va ;}
.color_rb{animation-name : col-rb ;}
@keyframes col-rw{
	0%{background : #FF0000 ;}
	50%{background : #FF0000 ;}
	51%{background : transparent;}
	100%{background : transparent;}
}
@keyframes col-rv{
	0%{background : #FF0000 ;}
	50%{background : #FF0000 ;}
	51%{background : #FFDAAB;}
	100%{background : #FFDAAB;}
}
@keyframes col-rb{
	0%{background : #FF0000 ;}
	50%{background : #FF0000 ;}
	51%{background : #3F2B15;}
	100%{background : #3F2B15;}
}
@keyframes col-cr{
	0%{background : #3F2B15 ;}
	50%{background : #3F2B15 ;}
	51%{background : #FF0000;}
	100%{background : #FF0000;}
}
@keyframes col-vr{
	0%{background : #FFDAAB ;}
	50%{background : #FFDAAB ;}
	51%{background : #FF0000;}
	100%{background : #FF0000;}
}
@keyframes col-wr{
	0%{background : transparent ;}
	50%{background : transparent ;}
	51%{background : #FF0000;}
	100%{background : #FF0000;}
}
@keyframes col-wb{
	0%{background : transparent ;}
	50%{background : transparent ;}
	51%{background : #3F2B15;}
	100%{background : #3F2B15;}
}
@keyframes col-vb{
	0%{background : #FFDAAB ;}
	50%{background : #FFDAAB ;}
	51%{background : #3F2B15;}
	100%{background : #3F2B15;}
}
@keyframes col-bv{
	0%{background : #3F2B15 ;}
	50%{background : #3F2B15 ;}
	51%{background : #FFDAAB;}
	100%{background : #FFDAAB;}
}
@keyframes col-bw{
	0%{background : #3F2B15 ;}
	50%{background : #3F2B15 ;}
	51%{background : transparent;}
	100%{background : transparent;}
}
@keyframes col-vw{
	0%{background : #FFDAAB ;}
	50%{background : #FFDAAB ;}
	51%{background : transparent;}
	100%{background : transparent;}
}
@keyframes col-wv{
	0%{background : transparent ;}
	50%{background : transparent ;}
	51%{background : #FFDAAB;}
	100%{background : #FFDAAB;}
}
@keyframes col-av{
	0%{background : #0000FF ;}
	50%{background : #0000FF ;}
	51%{background : #FFDAAB;}
	100%{background : #FFDAAB;}
}
@keyframes col-ra{
	0%{background : #FF0000 ;}
	50%{background : #FF0000 ;}
	51%{background : #0000FF;}
	100%{background : #0000FF;}
}
@keyframes col-va{
	0%{background : #FFDAAB ;}
	50%{background : #FFDAAB ;}
	51%{background : #0000FF;}
	100%{background : #0000FF;}
}
@keyframes col-aw{
	0%{background : #0000FF ;}
	50%{background : #0000FF ;}
	51%{background : transparent;}
	100%{background : transparent;}
}