* {
	padding : 0px;
	margin : 0px;
	box-sizing: border-box;
}
body {
	background-color : black;
}
.container {
	position : absolute;
	left : 50%;
	top : 50%;
	width : 600px;
	height : 600px;
	margin-left : -300px;
	margin-top : -300px;
	border : 1px solid black;
	overflow : hidden;
	background: -webkit-linear-gradient(top, #8adcf7 0%, #bbe8fd 100%);
	background: linear-gradient(to bottom, #8adcf7 0%, #bbe8fd 100%);
}
.window  {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #000;
	z-index: 9;
	-webkit-transition: opacity 0.6s;
	transition: opacity 0.6s;
}
.window .susliks {
	position: relative;
	top: 6px;
	left: 0;
	margin: 0 auto;
}
.susliks {
	position : absolute;
	top: 70px;
	left: 7px;
	width : 56px;
	height : 100px;
	border-radius : 20px;
	background : #e3c498;
	cursor : pointer;
	background-image : -webkit-radial-gradient(20px 23px, circle, #000000 5%, rgba(255, 255, 255, 0) 5%),
						 -webkit-radial-gradient(17px 20px, circle, #ffffff 10%, rgba(255, 255, 255, 0) 10%),
						 -webkit-radial-gradient(36px 23px, circle, #000000 5%, rgba(255, 255, 255, 0) 5%),
						 -webkit-radial-gradient(39px 20px, circle, #ffffff 10%, rgba(255, 255, 255, 0) 10%),
						 -webkit-radial-gradient(center 36px, circle, #000000 8%, rgba(255, 255, 255, 0) 8%),
						 -webkit-radial-gradient(center 48px, circle, #ffffff 20%, rgba(255, 255, 255, 0) 20%);
	background-image : radial-gradient(circle at 20px 23px, #000000 5%, rgba(255, 255, 255, 0) 5%),
						 radial-gradient(circle at 17px 20px, #ffffff 10%, rgba(255, 255, 255, 0) 10%),
						 radial-gradient(circle at 36px 23px, #000000 5%, rgba(255, 255, 255, 0) 5%),
						 radial-gradient(circle at 39px 20px, #ffffff 10%, rgba(255, 255, 255, 0) 10%),
						 radial-gradient(circle at center 36px, #000000 8%, rgba(255, 255, 255, 0) 8%),
						 radial-gradient(circle at center 48px, #ffffff 20%, rgba(255, 255, 255, 0) 20%);
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
.susliks:before, .susliks:after {
	content : '';
	left : -5px;
	top : -5px;
	width : 20px;
	height : 20px;
	position : absolute;
	background : #e3c498;
	border-radius : 50%;
	background-image : -webkit-radial-gradient(center, circle, #000000 40%, rgba(255, 255, 255, 0) 40%);
	background-image : radial-gradient(circle at center, #000000 40%, rgba(255, 255, 255, 0) 40%);
}
.susliks:after {
	left : auto;
	right : -5px;
}
.not-button {
	cursor : default;
}
.group input[type="radio"] + .susliks {
	opacity : 0;
}
.group input[type="radio"]:checked + .susliks {
	opacity : 1;
}
h1, h2, p {
	color: #fff;
	text-align: center;
}
h1 {
	line-height: 50px;
}
h2 {
	margin-top: 100px;
	margin-bottom: 10px;
}
.meta {
	margin-top: 50px;
	opacity: 0.6;
}
#end {
	top: -800px;
	opacity: 1;
	display: block;
	border-bottom: 2px solid #fff;
}
#end .susliks {
	position: absolute;
	left: 50%;
	top: auto;
	margin-left: -30px;
	bottom: -54px;
}
#startFlag:checked ~ #end {
	-webkit-animation: end 1s linear 15s forwards;
	animation: end 1s linear 15s forwards;
}
@-webkit-keyframes end {
	from {
		top: -800px;
	}
	to {
		top: 0;
	}
}
@keyframes end {
	from {
		top: -800px;
	}
	to {
		top: 0;
	}
}
.btn-group  {
	margin: 80px auto;
	width: 100px;
	height: 90px;
	overflow: hidden;
	position: relative;
}
.btn-group label {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40px;
	background: #51a70d;
	color: #fff;
	text-align: center;
	line-height: 40px;
	cursor: pointer;
	border-bottom: 4px solid #62b210;
	border-radius: 4px;
}
.hole {
	position : absolute;
	left : 0px;
	top : 70px;
	width : 68px;
	height : 100px;
	background-image : -webkit-linear-gradient(left, #2a7d2f 0%, #78fc73 25%, #78fc73 35%, #113e15 95%);
	background-image : linear-gradient(to right, #2a7d2f 0%, #78fc73 25%, #78fc73 35%, #113e15 95%);
	border-left : 1px solid #236d22;
	box-shadow : 0px 2px 5px 0px rgba(0, 0, 0, 0.6);
}
.hole:before {
	display : block;
	content : '';
	position : absolute;
	width : 84px;
	height : 24px;
	margin-left : -8px;
	top : -24px;
	background-image : -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.3) 2px,
												 rgba(255, 255, 255, 0.3) 3px, rgba(255, 255, 255, 0) 4px ),
					-webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.4) 3px, rgba(255, 255, 255, 0.2) 5px,
												 rgba(255, 255, 255, 0) 6px ),
					-webkit-linear-gradient(left, #2a7d2f 0%, #78fc73 25%, #78fc73 35%, #113e15 95%);
	background-image : linear-gradient(to bottom, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.3) 2px,
												 rgba(255, 255, 255, 0.3) 3px, rgba(255, 255, 255, 0) 4px ),
					linear-gradient(to top, rgba(0, 0, 0, 0.4) 3px, rgba(255, 255, 255, 0.2) 5px,
												 rgba(255, 255, 255, 0) 6px ),
					linear-gradient(to right, #2a7d2f 0%, #78fc73 25%, #78fc73 35%, #113e15 95%);
}
.time-wrapper  {
	position: absolute;
	left: -150px;
	top: 20px;
	-webkit-transition: 1s;
	transition: 1s;
}
#startFlag:checked ~ .time-wrapper {
	left: 20px;
}
#startFlag:checked ~ .time-wrapper .progress {
	-webkit-animation: progress 15s linear 0s forwards;
	animation: progress 15s linear 0s forwards;
}
@-webkit-keyframes progress {
	from {
		width: 0;
		background: #00ff00;
	}
	to {
		width: 136px;
		background: #ff0000;
	}
}
@keyframes progress {
	from {
		width: 0;
		background: #00ff00;
	}
	to {
		width: 136px;
		background: #ff0000;
	}
}
.time-wrapper p {
	color: #fff;
	line-height: 24px;
}
.time {
	border: 2px solid #fff;
	width: 140px;
	height: 20px;
}
.time .progress {
	height: 16px;
	width: 0;
}
#map {
	position: absolute;
	bottom: 0;
	left: -600px;
	width: 1800px;
	height: 800px;
	-webkit-transform: perspective(600px) rotateX(45deg);
	transform: perspective(600px) rotateX(45deg);
	-webkit-transform-origin: center bottom;
	-ms-transform-origin: center bottom;
	transform-origin: center bottom;
}
.map  {
	width: 5%;
	height: 100%;
	float: left;
}
.map:nth-child(2n) {
	background: #62b210;
}
.map:nth-child(2n+1) {
	background: #51a70d;
}
.group {
	position: absolute;
	width : 68px;
}
.group:nth-child(1) {
	left: 45px;
	top: 210px;
}
.group:nth-child(2) {
	left: 165px;
	top: 270px;
}
.group:nth-child(3) {
	left: 345px;
	top: 250px;
}
.group:nth-child(4) {
	left: 80px;
	top: 370px;
}
.group:nth-child(5) {
	left: 400px;
	top: 410px;
}
.group:nth-child(6)  {
	left: 470px;
	top: 230px;
}
.group input[type="radio"] {
	position : absolute;
	top : -1000px;
	left : 0px
}
.points {
	position: absolute;
	top: -100px;
	left: 50%;
	width: 100px;
	height: 48px;
	margin-left: -50px;
	background: rgba(0, 0, 0, 0.2);
	border: 4px solid #ffffff;
	border-radius: 4px;
	color: #fff;
	-webkit-transition: top 1s;
	transition: top 1s;
}
#startFlag:checked ~ .points {
	top: 20px;
}
.points .points-viewport {
	overflow: hidden;
	height: 40px;
	width: 100%;
}
.points-list {
	margin-top : -480px;
}
.points-list input[type="radio"] {
	position : absolute;
	top : -1000px;
	left : 0px;
}
.points-list .block {
	width : 100px;
	height : 40px;
	transition : all 1s linear 0s;
	-webkit-transition : all 1s linear 0s;
}
.points-list input[type="radio"]:checked + .block{
	height : 0px;
}
.point {
	display: block;
	height: 40px;
	text-align: center;
	font-size: 30px;
	font-weight: bold;
	cursor: default;
}
#startFlag  {
	position: absolute;
	top: -20px;
	left: -20px;
	z-index: 999;
}
#startFlag:checked + #start {
	opacity: 0;
	pointer-events: none;
	-webkit-pointer-events: none;
}
.group input[type="radio"]:checked + .susliks1 {
	-webkit-animation-name: susliks1;
	animation-name: susliks1;
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
	-webkit-animation-duration: 10s;
	animation-duration: 10s;
}
@-webkit-keyframes susliks1 {
	0% {
		top: 70px;
	}
	10% {
		top: 0;
	}
	15% {
		top: 0;
	}
	20% {
		top: 70px;
	}
	100% {
		top: 70px;
	}
}
@keyframes susliks1 {
	0% {
		top: 70px;
	}
	10% {
		top: 0;
	}
	15% {
		top: 0;
	}
	20% {
		top: 70px;
	}
	100% {
		top: 70px;
	}
}
.group input[type="radio"]:checked + .susliks2 {
	-webkit-animation-name: susliks2;
	animation-name: susliks2;
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
	-webkit-animation-duration: 10s;
	animation-duration: 10s;
}
@-webkit-keyframes susliks2 {
	0% {
		top: 70px;
	}
	30% {
		top: 70px;
	}
	60% {
		top: 0;
	}
	70% {
		top: 0;
	}
	90% {
		top: 0;
	}
}
@keyframes susliks2 {
	0% {
		top: 70px;
	}
	30% {
		top: 70px;
	}
	60% {
		top: 0;
	}
	70% {
		top: 0;
	}
	90% {
		top: 0;
	}
}
.group input[type="radio"]:checked + .susliks3 {
	-webkit-animation-name: susliks3;
	animation-name: susliks3;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation-duration: 5s;
	animation-duration: 5s;
}
@-webkit-keyframes susliks3 {
	0% {
		top: 70px;
	}
	30% {
		top: 70px;
	}
	60% {
		top: 0;
	}
	70% {
		top: 0;
	}
	90% {
		top: 70px;
	}
}
@keyframes susliks3 {
	0% {
		top: 70px;
	}
	30% {
		top: 70px;
	}
	60% {
		top: 0;
	}
	70% {
		top: 0;
	}
	90% {
		top: 70px;
	}
}
.group input[type="radio"]:checked + .susliks4 {
	-webkit-animation-name: susliks4;
	animation-name: susliks4;
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
	-webkit-animation-duration: 8s;
	animation-duration: 8s;
}
@-webkit-keyframes susliks4 {
	0% {
		top: 70px;
	}
	10% {
		top: 70px;
	}
	15% {
		top: 0;
	}
	30% {
		top: 70px;
	}
}
@keyframes susliks4 {
	0% {
		top: 70px;
	}
	10% {
		top: 70px;
	}
	15% {
		top: 0;
	}
	30% {
		top: 70px;
	}
}
.group input[type="radio"]:checked + .susliks5 {
	-webkit-animation-name: susliks5;
	animation-name: susliks5;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation-duration: 10s;
	animation-duration: 10s;
}
@-webkit-keyframes susliks5 {
	0% {
		top: 70px;
	}
	70% {
		top: 70px;
	}
	80% {
		top: 0;
	}
	90% {
		top: 70px;
	}
}
@keyframes susliks5 {
	0% {
		top: 70px;
	}
	70% {
		top: 70px;
	}
	80% {
		top: 0;
	}
	90% {
		top: 70px;
	}
}
.group input[type="radio"]:checked + .susliks6 {
	-webkit-animation-name: susliks6;
	animation-name: susliks6;
	-webkit-animation-delay: 4s;
	animation-delay: 4s;
	-webkit-animation-duration: 6s;
	animation-duration: 6s;
}
@-webkit-keyframes susliks6 {
	0% {
		top: 70px;
	}
	70% {
		top: 70px;
	}
	90% {
		top: 0;
	}
	100% {
		top: 70px;
	}
}
@keyframes susliks6 {
	0% {
		top: 70px;
	}
	70% {
		top: 70px;
	}
	90% {
		top: 0;
	}
	100% {
		top: 70px;
	}
}
.group input[type="radio"]:checked + .susliks7 {
	-webkit-animation-name: susliks7;
	animation-name: susliks7;
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
	-webkit-animation-duration: 6s;
	animation-duration: 6s;
}
@-webkit-keyframes susliks7 {
	0% {
		top: 70px;
	}
	20% {
		top: 70px;
	}
	25% {
		top: 0;
	}
	35% {
		top: 70px;
	}
}
@keyframes susliks7 {
	0% {
		top: 70px;
	}
	20% {
		top: 70px;
	}
	25% {
		top: 0;
	}
	35% {
		top: 70px;
	}
}
.group input[type="radio"]:checked + .susliks8 {
	-webkit-animation-name: susliks8;
	animation-name: susliks8;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation-duration: 8s;
	animation-duration: 8s;
}
@-webkit-keyframes susliks8 {
	0% {
		top: 70px;
	}
	50% {
		top: 70px;
	}
	60% {
		top: 0;
	}
	70% {
		top: 70px;
	}
}
@keyframes susliks8 {
	0% {
		top: 70px;
	}
	50% {
		top: 70px;
	}
	60% {
		top: 0;
	}
	70% {
		top: 70px;
	}
}
.group input[type="radio"]:checked + .susliks9 {
	-webkit-animation-name: susliks9;
	animation-name: susliks9;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation-duration: 10s;
	animation-duration: 10s;
}
@-webkit-keyframes susliks9 {
	0% {
		top: 70px;
	}
	10% {
		top: 70px;
	}
	20% {
		top: 0;
	}
	40% {
		top: 70px;
	}
}
@keyframes susliks9 {
	0% {
		top: 70px;
	}
	10% {
		top: 70px;
	}
	20% {
		top: 0;
	}
	40% {
		top: 70px;
	}
}
.group input[type="radio"]:checked + .susliks10 {
	-webkit-animation-name: susliks10;
	animation-name: susliks10;
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
	-webkit-animation-duration: 8s;
	animation-duration: 8s;
}
@-webkit-keyframes susliks10 {
	0% {
		top: 70px;
	}
	40% {
		top: 70px;
	}
	55% {
		top: 0;
	}
	65% {
		top: 70px;
	}
}
@keyframes susliks10 {
	0% {
		top: 70px;
	}
	40% {
		top: 70px;
	}
	55% {
		top: 0;
	}
	65% {
		top: 70px;
	}
}
.group input[type="radio"]:checked + .susliks11 {
	-webkit-animation-name: susliks11;
	animation-name: susliks11;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation-duration: 10s;
	animation-duration: 10s;
}
@-webkit-keyframes susliks11 {
	0% {
		top: 70px;
	}
	40% {
		top: 70px;
	}
	50% {
		top: 0;
	}
	60% {
		top: 70px;
	}
}
@keyframes susliks11 {
	0% {
		top: 70px;
	}
	40% {
		top: 70px;
	}
	50% {
		top: 0;
	}
	60% {
		top: 70px;
	}
}
.group input[type="radio"]:checked + .susliks12 {
	-webkit-animation-name: susliks12;
	animation-name: susliks12;
	-webkit-animation-delay: 3s;
	animation-delay: 3s;
	-webkit-animation-duration: 6s;
	animation-duration: 6s;
}
@-webkit-keyframes susliks12 {
	0% {
		top: 70px;
	}
	30% {
		top: 70px;
	}
	50% {
		top: 0;
	}
	55% {
		top: 70px;
	}
}
@keyframes susliks12 {
	0% {
		top: 70px;
	}
	30% {
		top: 70px;
	}
	50% {
		top: 0;
	}
	55% {
		top: 70px;
	}
}