#controls{
	border: none;
	position: absolute;
	display: flex;
	top: 10px;
	z-index: 3;

}

#flex1{
	border: none red;
	display: flex;
	align-items: center;
	justify-content: center;

}

#scroll-container{
	display: grid;
	grid-gap: 5px;
	margin-top: 50px;
	margin-bottom: 0px;
	margin-right: 5px;
	margin-left: 5px;

}

.slideshow-container {
	display: none;
}

.tof{
	border: none cyan;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#sticky-container{
	border: none lime;
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

#info-content{
	display: none;
	z-index: 1;
	border: none magenta;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	width: 100%;
}

#textbox{
	border: none pink;

	width: 80%;

}

#text{
	background-color: white;
}

#close{
	display: none;
	background-color: white;
	text-decoration: none;

}

#close:hover{
	font-style: oblique;
}


@media screen and (min-width: 720px){

	#scroll-container{
		display: none;
	}

	#flex1{
		border: none red;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	.slideshow-container {
		z-index: 0;
		border: none blue;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
	}

	.mySlides {
	 	display: none;
	 	justify-content: center;
	 	align-items: center;
	 	height: 90%;
	 	width: 100%;
	}

	.tof{
		width: 100%;
		height: 100%;
		object-fit: contain;

	}

	#click{
		border: none lime;
		position: absolute;
		z-index: 1;
		display: flex;
		height: 100%;
		width: 100%;
	}

	#textbox{
		width: 455px;
	}

	.prev{
	 	cursor: w-resize;
	 	width: 50%;
	 	height: 100%;
	}

	.next{
		cursor: e-resize;
		width: 50%;
		height: 100%;
	}

}

@media screen and (min-width: 2000px){
	.mySlides{
		height: 60%;
	}
}