body{
	margin: 0;
	padding: 0;
	background: #0aaff;
	background-color: skyblue;
}

p{
	color: black;
}

a{
	color: yellow;
}

b{
	color: black;
font-size:25px;}

.intro{
	text-align: center;
font-size:16px;} 

.listp{
 	
	text-align: center;
Margin-Left:240px;} 

.listb{
 	display: inline-block;
 	text-align: left;
font-size:22px;}

.listc{
 	display: inline-block;
 	text-align: left;
}

.slidershow{
 	width: 640px;
 	height; 480px;
}

.slidershow_middle{
 	overflow: hidden;
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%,-50%);
}

.navigation{
 	position: absolute;
 	bottom: 50%;
 	left: 50%;
	transform: translatex(-50%,-50%);
 	display: flex;
}

.bar{
 	width: 30px;
 	height: 7px;
 	border: solid #fff;
 	margin: 6px;
 	cursor: pointer;
 	transition: 0.4s;
}

.bar:hover{
 	background: #fff;
}

input[name="r"]:checked ~ .bar[name="l"]{
 	background: #0f0;
}

input[name="r"]{
 	position: absolute;
	visibility: hidden;
}

.slides{
 		overflow: hidden;
    	width: 300%;
    	height: 100%;
        display: flex;
}

.slide{
    	width: 33%;
    	transition: 0.7s;
}

.slide img{
    	width: 640px;
    	height: 480px;
}


r1:checked ~ .s1{
	margin-left: 0px;
 	background: #0f0;
}

r2:checked ~ .s1{
	margin-left: -640px;
 	background: #0f0;
}

r3:checked ~ .s2{
	margin-left: -1280px;
 	background: #0f0;
}

#slider{
	overflow: hidden;
    width: 30%;
    height: 20%;
}
#slider figure{
	position: relative;
    width: 200%;
    margin: 0;
    left: 0;
	animation: 10s slider infinite;
}

#slider figure img {
	float: left;
	width: 25%;
}

@keyframes slider{
	0% {
    	left: 0;
	}
	20% {
    	left: 0;
	}
    25% {
    	left: -100%;
   	}
    45% {
    	left: -100%;
	}
	50% {
		left -200%;
	}
	70% {
    	left -300;
	}
	95% {
    	left -300;
    100% {
    	left -400%;
    }