/*css
//==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>
//
// CssHidex v1.16 [ Commercial Version ]
// Copyright (c) phpkobo.com ( http://www.phpkobo.com/ )
// Email : admin@phpkobo.com
// ID : HDXCS-116
// URL : http://www.phpkobo.com/csshidex
//
//==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<
*/
/* control */
.dmk-control{
	visibility:hidden;
	position:absolute;
	top:0;
	left:0;
	font-size:6px;
	width:10em;
	height:10em;
}
.dmk-control.dmk-play{
	visibility:visible;
	animation-name:kf-control;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
	animation-delay:1s;
	animation-duration:3s;
}
@keyframes kf-control{
	0%{
		opacity:1;
		transform:scale(1) translateY(0);
	}
	100%{
		opacity:0;
		transform:scale(1.3) translateY(-80px);
	}
}
/* circle */
.dmk-circle{
	position:relative;
	width:100%;
	height:100%;
	border-radius:50%;
	background-color:#2ecc71;
	transform:rotateY(-90deg);
}
.dmk-control.dmk-play .dmk-circle{
	animation-name:kf-circle;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
	animation-delay:0;
	animation-duration:.5s;
}
@keyframes kf-circle{
	0%{
		transform:rotateY(-90deg);
	}
	100%{
		transform:rotateY(0deg);
	}
}
/* box */
.dmk-box{
	position:absolute;
	top:1.5em;
	left:3.2em;
	width:3.5em;
	height:6em;
	transform:rotateZ(40deg);
}
.dmk-line1{
	position:absolute;
	bottom:0;
	left:0;
	width:0;
	height:1em;
	background-color:white;
}
.dmk-control.dmk-play .dmk-line1{
	animation-name:kf-line1;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
	animation-delay:.5s;
	animation-duration:.2s;
}
@keyframes kf-line1{
	0%{
		width:0;
	}
	100%{
		width:100%;
	}
}
.dmk-line2{
	position:absolute;
	bottom:0;
	right:0;
	width:1em;
	height:0;
	background-color:white;
}
.dmk-control.dmk-play .dmk-line2{
	animation-name:kf-line2;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
	animation-delay:.7s;
	animation-duration:.2s;
}
@keyframes kf-line2{
	0%{
		height:0;
	}
	100%{
		height:100%;
	}
}
/* radiate */
.dmk-radiate{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	border:1px dotted #2ecc71;
	border-radius:50%;
}
.dmk-control.dmk-play .dmk-radiate{
	animation-name:kf-radiate;
	animation-iteration-count:1;
	animation-delay:1s;
	animation-duration:3s;
}
@keyframes kf-radiate{
	0%{
		transform:scale(1);
	}
	100%{
		transform:scale(1.5);
	}
}