/* -- slideshow --------------------------------------------------  */
#slide-container {
	position: relative;
	min-height: 500px;
	white-space: nowrap;
	overflow-x: hidden;
}
.lib-slide {
	position: absolute;
	left: -2000px;
}
.lib-slide-description {
	padding: 20px 0px;
}
.lib-slide-img {
	max-width: 700px;
}
.lib-slide-img img {
	max-width: 700px;
	box-shadow: 4px 4px 2px 1px #555555;
}
.noshadow img {
	box-shadow: none;
}

/* --- slide animation: next/prev buttons ----------- */
@keyframes slide-next-imleft2 {
	from {left: calc( 50% - 1080px );}
	to {left: calc( 50% - 1810px );}
}
@keyframes slide-next-imleft1 {
	from {left: calc( 50% - 350px );}
	to {left: calc( 50% - 1080px );}
}
@keyframes slide-next-imcenter {
	from {left: calc( 50% + 380px );}
	to {left: calc( 50% - 350px );}
}
@keyframes slide-next-imright1 {
	from {left: calc( 50% + 1110px );}
	to {left: calc( 50% + 380px );}
}
@keyframes slide-prev-imleft1 {
	from {left: calc( 50% - 1810px );}
	to {left: calc( 50% - 1080px );}
}
@keyframes slide-prev-imcenter {
	from {left: calc( 50% - 1080px );}
	to {left: calc( 50% - 350px );}
}
@keyframes slide-prev-imright1 {
	from {left: calc( 50% - 350px );}
	to {left: calc( 50% + 380px );}
}
@keyframes slide-prev-imright2 {
	from {left: calc( 50% + 380px );}
	to {left: calc( 50% + 1110px );}
}
/* --- slide animation: thumb select (go to slide) - slides 3 times left (mext3) ---- */
@keyframes slide-3-im1 {
	from {left: calc( 50% - 1080px );}
	to {left: calc( 50% - 2540px );}
}
@keyframes slide-3-im2 {
	from {left: calc( 50% - 350px );}
	to {left: calc( 50% - 2540px );}
}
@keyframes slide-3-im3 {
	from {left: calc( 50% + 380px );}
	to {left: calc( 50% - 1810px );}
}
@keyframes slide-3-im4 {
	from {left: calc( 50% + 1110px );}
	to {left: calc( 50% - 1080px );}
}
@keyframes slide-3-im5 {
	from {left: calc( 50% + 1840px );}
	to {left: calc( 50% - 350px );}
}
@keyframes slide-3-im6 {
	from {left: calc( 50% + 2580px );}
	to {left: calc( 50% + 380px );}
}
/* --- slide animation: thumb select (go to slide) - slides 2 times left (next2) ---- */
@keyframes slide-2-im1 {
	from {left: calc( 50% - 1080px );}
	to {left: calc( 50% - 2540px );}
}
@keyframes slide-2-im2 {
	from {left: calc( 50% - 350px );}
	to {left: calc( 50% - 1810px );}
}
@keyframes slide-2-im3 {
	from {left: calc( 50% + 380px );}
	to {left: calc( 50% - 1080px );}
}
@keyframes slide-2-im4 {
	from {left: calc( 50% + 1110px );}
	to {left: calc( 50% - 350px );}
}
@keyframes slide-2-im5 {
	from {left: calc( 50% + 1840px );}
	to {left: calc( 50% + 380px );}
}

/* --- slide buttons -------------------------------------------------------- */
#prev, #next {
	display: inline-block;
    width: 200px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    color: #333333;
    font-size: 20px;
    text-align: center;
    border: 1px solid #666666;
    border-radius: 3px;
}
#prev {
	margin-left: calc( 50% - 220px );
}
#next {
	margin-left: 40px;
}
#prev:hover, #next:hover {
    color: #000000;
    background-color: #eeeeee;
}
#prev:active, #next:active {
	background-color: #dddddd;
}
#prev::selection, #next::selection {
	background-color: transparent;
}

* --- selection using thumb img (down) ------------------------------------------------- */
#thumb-container {
}
.lib-slide-thumb {
	margin: 0 5px 5px 0;
	width: 200px;
	border: 3px solid transparent;
	cursor: pointer;
}
.lib-slide-thumb:hover {
	border-color: #666666;
}
.lib-slide-thumb:active {
	border-color: #aaaaaa;
}


/* ======================================================================================== */
@media screen and (max-width: 850px) {
	#slide-container {
		min-height: calc( 100vw*0.65 );
	}
	.lib-slide-img img {
		max-width: calc( 100vw - 110px );
		box-shadow: 2px 2px 1px 1px #555555;
	}
	.noshadow img {
		box-shadow: none;
	}
	@keyframes slide-next-imleft1 {
		from {left: 0;}
		to {left: -100vw;}
	}
	@keyframes slide-next-imcenter {
		from {left: 100vw;}
		to {left: 0;}
	}
	@keyframes slide-prev-imcenter {
		from {left: -100vw;}
		to {left: 0;}
	}
	@keyframes slide-prev-imright1 {
		from {left: 0;}
		to {left: 100vw;}
	}
	#thumb-container {
		display: none;
	}
}
@media screen and (max-width: 650px) {
	#slide-container {
		min-height: calc( 100vw*0.75 );
	}
	.lib-slide-img img {
		max-width: calc( 100vw - 40px );
	}
	#prev, #next {
		width: 150px;
	}
	#prev {
		margin-left: calc( 50% - 165px );
	}
	#next {
		margin-left: 30px;
	}
}
@media screen and (max-width: 350px) {
	#prev, #next {
		width: 100px;
	}
	#prev {
		margin-left: calc( 50% - 120px );
	}
	#next {
		margin-left: 20px;
	}
}