.circle-button {
	width: 10px;
	height: 10px;
	border-radius: 10px;
	border: 2px solid gray;
	background-color: black;
	float: left;
	margin: 2px;
}
.slider-buttons .active {
	border: 2px solid white;
	background-color: white;
}
.slider-buttons {
	margin: 0 auto;
    height: 10%;
}
.circle-button {
	cursor: pointer;
}
.slider {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.panel1, .panel2, .panel3, .panel4, .panel5, .panel6, .panel7, .panel8, .panel9, .panel0 {
	margin: 0;
	width: 100%;
	height: 100%;
	display: none;
}
.panel0 { z-index: -1010;  } 
.panel1 { z-index: -1001; }
.panel2 { z-index: -1002; }
.panel3 { z-index: -1003; }
.panel4 { z-index: -1004; }
.panel5 { z-index: -1005; }
.panel6 { z-index: -1006; }      
.panel7 { z-index: -1007; }       
.panel8 { z-index: -1008; }       
.panel9 { z-index: -1009;  }      
.left-arrow, .right-arrow {
	position: relative;
	width: 10px;
	height: 10px;			
	border-top: 10px solid white;
	border-left: 10px solid white;
	cursor: pointer;
}
.left-arrow {
	transform: rotateZ(315deg);
}
.right-arrow {
	transform: rotateZ(135deg);
	left: 50%;
}
.left-arrow-button, .right-arrow-button {
	z-index: 999;
}
.circle-under-arrow {
	width: 40px;
	height: 40px;
	border-radius: 40px;
	background-color: rgba(0,0,0,0);
}
.left-arrow-button, .right-arrow-button, .slider-content  {
	float: left;
}
.slider-content {	
	height: 100%;
	width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}