/* Slides */
.myslider div {
	z-index: -1;
	position: absolute;
	top: 0; left: 0;
	width: 100vw;
	height: 100vh;
	margin: 0;
	background: grey;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;

	-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 2s; /* Firefox before 16 */
	-ms-animation: fadein 2s; /* Internet Explorer */
	-o-animation: fadein 2s; /* Opera before 12.1 */
	animation: fadein 2s;
}
@keyframes fadein {
	from {opacity: 0;}
	to {opacity: 1;}
}
@-moz-keyframes fadein { /* Firefox */
	from {opacity: 0;}
	to {opacity: 1;}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
	from {opacity: 0;}
	to {opacity: 1;}
}
@-o-keyframes fadein { /* Opera */
	from {opacity: 0;}
	to {opacity: 1;}
}

/* Thumbs */
.myslider-thumbs {
	overflow: auto;
	position: absolute;
	top: 0; right: 0;
	margin: 0;
	height: 100vh;
	border-left: 3vw solid rgba(0,0,0,0);
	opacity: 0;
	transition: opacity 1s;
}
.show-buttons .myslider-thumbs,
.myslider-thumbs:hover {
	opacity: 1;
}
.myslider-thumbs > a {
	display: block;
	height: 5vh;
	width: 5vw;
	border: 0.5px solid black;
	background: grey;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
}
.myslider-thumbs > a.highlighted {
	border: 1px solid yellow;
}

/* Comments*/
.myslider-comment {
	margin: 0 5vw;
	min-height: 100vh;
	text-align: justify;
	font-size: 2.2vw;
	color: yellow;
	transition: opacity 1s;
}

/* Buttons */
.myslider > a {
	position: absolute;
	top: calc(50vh - 0.5em);
	font-size: calc(2.5vw + 2.5vh);
	text-align: center;
	line-height: 1em;
	color: yellow;
	cursor: pointer;
	opacity: 0;
	transition: opacity 1s;
}
.myslider.show-buttons > a,
.myslider > a:hover {
	opacity: 1;
}

.myslider-previous {
	left: 10vw;
}
.myslider-previous:after {
	font-weight: bold;
	content: '<';
}
.myslider-next {
	right: 10vw;
}
.myslider-next:after {
	font-weight: bold;
	content: '>';
}

/* Stop/play buttons */
.myslider-play {
	left: calc(50vw - 0.5em);
	line-height: 0.8 !important;
}
.myslider-play:after {
	content: '»';
}
.myslider-stop {
	left: calc(50vw - 0.43em);
	margin-top: 0.2em;
	height: 0.6em;
	width: 0.2em;
	border-style: solid;
	border-width: 0 3px;
	border-color: yellow;
	display: none;
}
.show-play .myslider-play {
	display: none;
}
.show-play .myslider-stop {
	display: block;
}

/* Home button */
.myslider-home {
	top: 0.2em !important;
	left: 0.25em;
	width: 0.5em;
	height: 0.5em;
	border: 0.05em solid yellow;
}
.myslider-home:after {
	position: relative;
	bottom: 0.4em;
	right: 0.05em;
	font-size: 0.8em !important;
	content: "X";
}
/* Fullscreen button */
.myslider-fullscreen {
	top: 1em !important;
	left: 0.25em;
	width: 0.5em;
	height: 0.5em;
	border: 0.05em solid yellow;
}
:fullscreen .myslider-fullscreen {
	width: 0.3em;
	height: 0.3em;
	border: 0.15em double yellow;
}
:-ms-fullscreen .myslider-fullscreen {
	width: 0.3em;
	height: 0.3em;
	border: 0.15em double yellow;
}

/* Download button */
.myslider-download {
	top: 1.8em !important;
	left: 0.25em;
	height: 0.3em !important;
	width: 0.5em !important;
	border: 0.05em solid yellow;
	border-top-width: 0.25em;
	line-height: 0.18em !important;
	text-decoration: none;
}
.myslider-download:after {
	font-size: 0.8em !important;
	content: "=";
}