/* New approach for tomorrow:
	Take img tags and use them to generate new classes with backgruond images. */


body {
	margin: 0;
}

#slideshow {
	height: 100vh;
	overflow: hidden;
	background-color: black;
	position: relative;

}

#slides img {
	display: none;
	
	position: absolute;
    top: 50%;
    left: 50%;

    width: auto;
    height: auto;

    max-height: none;
    max-width: none;

    min-height: 100%;
    min-width: 100%;

    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

#slideshow-nav {
	height: 30px;
	position: absolute;
	bottom: 0;
	width: 100%;
	opacity: 0.7;
	background-color: black;
	z-index: 99999;
}

#buttons {
	color: white;
	text-align: center;
}

#buttons i {
	margin: 0 2px;
	line-height: 30px;
	cursor: pointer;
}


#thumbnail-nav {
	opacity: 0.5;
	height: 120px;
	background-color: black;
	position: absolute;
	font-size: 30px;
	top: -80px;
	overflow: hidden;
	width: 100%;
	text-align: center;
	color: white;
	z-index: 9999;
	white-space: nowrap;
}


#thumbnails-wrapper {
	position: absolute;
	left: 30px;
	right: 40px;
	margin: 0 auto;
		overflow: hidden;
	max-height: 80px;
}

#thumbnails {
	overflow: hidden;
}



#thumbnail-nav img {
	opacity: 0.8;
	max-height: 100px;
	min-height: 100px;
	max-width: 100px;
	min-width: 100px;
	object-fit: cover;
	overflow: hidden;
	padding: 10px;
	display: inline;
	cursor: pointer;
}

#thumbnail-nav img:hover {
	opacity: 1;
}

#thumbnail-toggle {
	cursor: pointer;
	position: absolute;
	left: 50vw;
	top: 85px;
	z-index: 99;
	opacity: 0.7;
}

#thumbnail-toggle:hover {
	opacity: 0.9;
}

#thumbnail-left {
	position: absolute;
	top: 30px;
	left: 5px;
	opacity: 0.7;
	display: none;
	cursor: pointer;
}

#thumbnail-right {
	position: absolute;
	top: 30px;
	right: 5px;
	opacity: 0.7;
	display: none;
	cursor: pointer;
}

.side-nav {
	position: absolute;
	height: 100%;
	color: white;
	font-size: 60px;
	z-index: 999;
	line-height: 100%;
	opacity: 0.5;
}

.side-nav:hover {
	opacity: 0.7;
}

#left-arrow {
	left: 10px;
}

#right-arrow {
	right: 10px;
}

#slideshow-left, #slideshow-right {
	margin-top: 50vh;
	cursor: pointer;
}