/* Przycisk demo */
#demo {
	width: 100px;
	height: 100px;
	background: var(--color_p5);
	border-radius: 50%;
	position: absolute;
	top: 30px;
	left: 1000px;
	line-height: 100px;
	text-align: center;
	font-size: 28px;
	cursor: pointer;
	box-shadow: 0 0 5px rgba(0,0,0,0.9), 0 0 5px rgba(0,0,0,0.9);
	transition: all .3s ease;
}

#demo_desc {
	position: absolute;
	top: 150px;
	left: 960px;
	opacity: 0;
	transition: all 1s ease;
}

#demo:hover {
	box-shadow: 0 0 2px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.9);
}

#demo:hover+div {
	opacity: 1;
}

#demo:active {
	box-shadow: 0 0 15px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.9);	
}

.hidden {
	display: none;
}


/* Canvas informacyjny */
#demo_info {
	position: absolute;
	top: 350px;
	left: 50px;
}


/* Demonstracja */
.ping {
	border-radius: 50%;
	width: 1px;
	height: 1px;
	position: absolute;
	top: 12px;
	left: 640px;
	border: 4px solid var(--color_p3);
	z-index: 20;
	transform: translate(-50%, -50%);
	animation-name: ping;
  animation-duration: 1s;
  animation-iteration-count: 3;
}

 @keyframes ping
  {
  	0% { 	width: 1px;
					height: 1px;}
    50% { width: 30px; 
					height: 30px;}
    100% {width: 1px; 
					height: 1px;}
   }