<div class="container"> <!-- This creates a container for my slideshow -->
	<!-- label for radio id creates a navigation bar, a button to go back and a button to go forward. Radio buttons let me choose one of the navigations and stays there -->
	<input type="radio" id="i1" name="images" checked />
	<input type="radio" id="i2" name="images" />
	<input type="radio" id="i3" name="images" />
	<input type="radio" id="i4" name="images" />
	<input type="radio" id="i5" name="images" />

	<div class="slide_img" id="one" >

			<img src="images/Books.jpg" alt="starting image for website">

				<label class="prev" for="i5"><span>&#x2039;</span></label>
				<label class="next" for="i2"><span>&#x203a;</span></label>

	</div>

	<div class="slide_img" id="two" >

			<img src="images/School.jpg" alt="front of school">

				<label class="prev" for="i1"><span>&#x2039;</span></label> <!-- The &#x2039 is the arrow tag in the slide show-->
				<label class="next" for="i3"><span>&#x203a;</span></label>

	</div>

	<div class="slide_img" id="three" >
			<img src="images/reading.jpg" alt="Inside reading room">

				<label class="prev" for="i2"><span>&#x2039;</span></label>
				<label class="next" for="i4"><span>&#x203a;</span></label>
	</div>

	<div class="slide_img" id="four" >
			<img src="images/INSIDE.jpg" alt="books">

				<label class="prev" for="i3"><span>&#x2039;</span></label>
				<label class="next" for="i5"><span>&#x203a;</span></label>
	</div>

	<div class="slide_img" id="five" >
			<img src="images/COUTNER.jpg" alt="Front counter">

				<label class="prev" for="i4"><span>&#x2039;</span></label>
				<label class="next" for="i1"><span>&#x203a;</span></label>

	</div>

	<div id="nav_slide">
		<label for="i1" class="dots" id="dot1"></label>
		<label for="i2" class="dots" id="dot2"></label>
		<label for="i3" class="dots" id="dot3"></label>
		<label for="i4" class="dots" id="dot4"></label>
		<label for="i5" class="dots" id="dot5"></label>
	</div><!--This code is for the dots at the bottom of the slide show, when you click on a specific dot it brings you to that part of the slide show-->

</div>

#i1, #i2, #i3, #i4, #i5{ display: none;}

.container {
	margin: 0 auto;
	margin-top: 20px;
	position: relative;
	width: 100%;
	height: 100%;
	padding-bottom: 50%;
	user-select: none;
	background-color: #1c1c1c;
	border: solid 10px #333;
	border-radius:10px ;
	}

.container .slide_img{ /* Places all my images in the container */
	position: absolute;
	width: 100%;
	height: 100%;
	}

.container .slide_img img{ /* Sets the image in place in the container */
	width: inherit; /* Sets the width to 100% */
	height: inherit; /* Sets the height to 100% */
	}

.prev, .next{
	width: 12%;
	height: inherit;
	position: absolute;
	top:0;
	background-color: rgba(88, 88, 88,.2);
	color:rgba(244, 244, 244,.9);
	z-index: 99;
	transition: .45s;
	cursor: pointer;
	text-align: center;
	}/* *

.next{right:0;}/* This creates a navigation part on the left of the slide showshow.  */

.prev{left:0;}/* This creates a navigation part on the right side of the slideshow */

.next
{
	margin-left:381px;
}
label span{
	position: absolute;
	font-size: 100pt;
	top: 50%;
 	transform: translateY(-50%);
	}

.prev:hover, .next:hover{
	transition: .3s;
	background-color: rgba(88, 88, 89,.8);
	color: #ffffff;
	}/*This is for the effect that is shown when you go on the next part of the slideshow, the image will fade in from a dark shade of grey,*/

.container #nav_slide{
	width: 100%;
	bottom: 12%;
	height: 11px;
	position: absolute;
	text-align: center;
	z-index: 99;
	cursor: default;
}

#nav_slide .dots{
	top: -5px;
	width: 18px;
	height: 18px;
	margin: 0 4px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.6);
	transition: .4s;
}

#nav_slide .dots:hover {
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.9);
	transition: .25s
}

.slide_img{z-index: -1;}

	#i1:checked ~ #one  ,
	#i2:checked ~ #two  ,
	#i3:checked ~ #three,
	#i4:checked ~ #four ,
	#i5:checked ~ #five
	{z-index: 9; animation: scroll 1s ease-in-out;}

	#i1:checked  ~  #nav_slide #dot1,
	#i2:checked  ~  #nav_slide #dot2,
	#i3:checked  ~  #nav_slide #dot3,
	#i4:checked  ~  #nav_slide #dot4,
	#i5:checked  ~  #nav_slide #dot5
	{ background-color: rgba(255,255,255,.9);}

@keyframes scroll{
	0%{	opacity:.4;}
	100%{opacity:1;}
}