.demo1 {font-size: large;width:300px;height:100px;}
.pointer_1,.pointer_2,.pointer_3 {background-image: url('../img/ptr_arrow.png');
	background-size:contain;
	background-repeat:no-repeat;
	position:absolute;
	width:10px;
	height:20px;
	left:0%;top:20%;
}
.pointer_2 {
	left:0%;top:60%;
	z-index:10;
}
.demo2 {
	width:300px;
	height:300px;
}
.cubecontainer {
	perspective: 1000px;
	width:300px;
	height:200px;
}
.demo3 {font-size: large;width:300px;height:100px;}
.pointer_3 {
	left:0%;top:70%;
	z-index:20;
}
.help_panel {
	display: none;
	position:fixed;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	background-color: black;
	background-color: rgba(0, 0, 0, 0.8);
	z-index:1000;
	overflow: hidden;
	opacity:0%;
}
.help_content {
	background-color: white;
	opacity: 100%;
	width:500px;
	height:520px;
	position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}
.close_help {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
	font-family: Verdana,sans-serif;
    line-height: 1.5;
	cursor: pointer;
}
.close_help:hover {
	color: #999999;
}
.demos {
    top: 80%;
    display: flex;
    flex-direction: column;
}
.demos {
    font-size: xx-large;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 40%;
    -webkit-transform: translate(-50%, -40%);
    transform: translate(-50%, -40%);
}