/* style.css */
.st-container {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	font-family: Arial, sans-serif;
}
 
.st-container > input,
.st-container label {
	position: fixed;
	top: 0;
	width: 20%;
	cursor: pointer;
	font-size: 1.2em;
	height: 1em;
	padding: 0.5em 0;
}
 
.st-container > input {
	opacity: 0;
	z-index: 1000;
}
 
.st-container label {
	z-index: 999;
	background: #00296d;
	color: gold;
	text-align: center;
}
 
#st-control-1, #st-control-1 + label {
	left: 0;
}
 
#st-control-2, #st-control-2 + label {
	left: 20%;
}
 
#st-control-3, #st-control-3 + label {
	left: 40%;
}
 
#st-control-4, #st-control-4 + label {
	left: 60%;
}
 
#st-control-5, #st-control-5 + label {
	left: 80%;
}
 
.st-container > input:checked + label,
.st-container > input:checked:hover + label{
	background: skyblue;
	color: #00296d;
}
 
.st-container > input:hover + label,
.st-container > input:focus + label{
	background: gold;
	color: #00296d;

}
 
.st-scroll,
section {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 2em 0;
}
 
.st-scroll {
	transition: all 0.6s ease-in-out;
}
 
section{
	background: #fff;
	overflow: hidden;
} 
 
#st-control-1:checked ~ .st-scroll {
	transform: translateY(0%);
}
#st-control-2:checked ~ .st-scroll {
	transform: translateY(-100%);
}
#st-control-3:checked ~ .st-scroll {
	transform: translateY(-200%);
}
#st-control-4:checked ~ .st-scroll {
	transform: translateY(-300%);
}
#st-control-5:checked ~ .st-scroll {
	transform: translateY(-400%);
}
 
section * {
  max-width: 50em;
  margin: 0.5em auto;  
}
 
section h2 {
	font-size: 4em;
	text-align: center;
	line-height: 2rem;
	-webkit-backface-visibility: hidden;
}
 
section p {	
	text-align: justify;
	-webkit-backface-visibility: hidden;
}
 
/* Colored sections */
 
#part_1{
	background: #fffbf0;
    
}
 
#part_2{
	background: #ebf5d7;
}
 
#part_3{
	background: #ffebe6;
}
 
#part_4{
	background: #e6f2f7;
}
 
 
 
@media screen and (max-width: 32em) {
	section h2 {
		font-size: 2em;
	}
 
	section p {
		width: 90%;
		left: 5%;
		margin-top: 0;
	}
 
}
 