/*
 *--------------------------------------------------------------------------------------
 *
 *  R e s p o n s i v e   W W W - S l i d e s h o w
 *
 *  made with HTML5, CSS3, and Vanilla JavaScript
 *
 *  Idea from:            https://github.com/leemark/better-simple-slideshow   (1)
 *  Swipe-Support from:   http://hammerjs.github.io/api/                       (2)
 *  Symbol-Icons from:    http://fortawesome.github.io/Font-Awesome/icons/     (2)
 *  EXIF-metadata from:   https://github.com/exif-js/exif-js                   (1)
 *
 *  (1) substantially modified and extended
 *  (2) unmodified
 *
 *  UTF16 Sonderzeichen: http://www.tamasoft.co.jp/en/general-info/unicode.html
 *
 *  Modifications and extensions by:       peter@danninger.eu        27. 09. 2016
 *
 *--------------------------------------------------------------------------------------
 */

body {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  background-color: #333333;
  text-align: center;
}

.pageTitle {
  position: relative;
  display: block;
  width: 100%;
  height: 30px;
  color: #ffffff;
  font-size: 24px;
  font-family: sans-serif;
  font-style: italic;
  margin: 0;
  padding: 0;
  padding-top: 2px;
  text-align: center;
  vertical-align: middle;
}

.pageTitle a {
  color: #ffffff;
  font-size: 18px;
  text-decoration: none;
}

.helpMeta {
  position: absolute;
  display: block;
  visibility: hidden;
  width: 40em;
  white-space: nowrap;
  overflow: visible;
  top: 30px;
  left: 36px;
  z-index: 5;
  opacity: 0.8;
  color: #ffffff;
  background-color: #333333;
  font-size: 16px;
  font-family: sans-serif;
  font-style: italic;
  margin: 0;
  padding: 5px;
  text-align: left;
  vertical-align: top;
  border-style: solid;
  border-width: 2px;
  border-color: #ffffff;
  border-radius: 8px;
}

.slideShow {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  text-align: center;
}

.slides {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  text-align: center;
}

.slides:focus {
 outline: 0;
}

.slides figure {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 95%;      /* wegen title */
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  text-align: center;
}

.slides figure:first-child {
  position: relative;
}

.slides figure img {
  z-index: 0;
  width: auto;
  height: auto;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  max-width: 88%;
  max-height: 88%;
  opacity: 0;
  -webkit-transition: opacity 2s;
  transition: opacity 2s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  text-align: center;
}

.slides .show img {
  z-index: 2;
  opacity: 1;
  position: relative;
}

.slides figure .figTitle {
  position: relative;
  display: block;
  width: 100%;
  height: 30px;
  color: #ffffff;
  font-size: 24px;
  font-family: sans-serif;
  font-style: italic;
  margin: 0;
  padding: 0;
  padding-top: 2px;
  z-index: 0;
  opacity: 0;
  text-align: center;
  vertical-align: middle;
}

.slides .show .figTitle {
  z-index: 2;
  opacity: 1;
}

.slides figure .figTitle a {
  color: #ffffff;
  font-size: 16px;
  text-decoration: none;
}

.slides figure figcaption {
  position: relative;
  width: 100%;
  height: 30px;
  margin: 0;
  padding: 0;
  padding-bottom: 2px;
  font-size: 24px;
  font-family: sans-serif;
  font-style: italic;
  color: #ffffff;
  z-index: 0;
  opacity: 0;
  text-align: center;
  vertical-align: middle;
}

.slides .show figcaption {
  z-index: 2;
  opacity: 1;
}

.slides figure figcaption a {
  color: #ffffff;
  font-size: 16px;
  text-decoration: none;
}

.sym-next, .sym-prev, .sym-first, .sym-download,
.sym-print, .sym-exit, .sym-full, .sym-play,
.sym-info, .sym-map, .sym-help {
  width: 36px;
  height: 36px;
  color: #ffffff;
  position: absolute;
  z-index: 4;
  font-size: 28px;
  opacity: 0.7;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.sym-next:hover, .sym-prev:hover, .sym-first:hover, .sym-download:hover,
.sym-print:hover, .sym-exit:hover, .sym-full:hover, .sym-play:hover,
.sym-info:hover, .sym-map:hover, .sym-help:hover {
  cursor: pointer;
  color: #ffff33;
  opacity: 1;
}

.sym-download {
  top: 32px;
  margin-top: 0px;
  left: 0;
  padding: 5px;
}

.sym-print {
  top: 32px;
  margin-top: 64px;
  left: 0;
  padding: 5px;
}

.sym-exit {
  top: 32px;
  margin-top: 0px;
  right: 1px;
  padding: 5px;
}

.sym-full {
  top: 32px;
  margin-top: 64px;
  right: 1px;
  padding: 5px;
}

.sym-prev {
  top: 45%;
  margin-top: 0;
  left: 0;
  padding: 5px;
}

.sym-first {
  top: 45%;
  margin-top: 64px;
  left: 0;
  padding: 5px;
}

.sym-next {
  top: 45%;
  margin-top: 0;
  right: 1px;
  padding: 5px;
}

.sym-play {
  top: 45%;
  margin-top: 64px;
  right: 1px;
  padding: 5px;
}

.sym-map {
  bottom: 32px;
  margin-bottom: 64px;
  left: 0;
  padding: 5px;
}

.sym-info {
  bottom: 32px;
  margin-bottom: 0px;
  left: 0;
  padding: 5px;
}

.sym-help {
  bottom: 32px;
  margin-bottom: 0px;
  right: 1px;
  padding: 5px;
}

/* CSS3, MS-Edge */
*:fullscreen .show {
  background-color: #333333;
  background-size: contain;
}
*:fullscreen::backdrop {
  background-color: #333333;
}

/* Webkit, Safari, Chrome */
*:-webkit-full-screen {
  background-color: #333333;
  -webkit-background-size: contain;
  background-size: contain;
}
*:-webkit-full-screen::backdrop {
  background-color: #333333;
}

/* Mozilla */
*:-moz-full-screen {
  background-color: #333333;
  /* -moz-background-size: contain; */
  background-size: contain;
}

/* Internet Explorer */
*:-ms-fullscreen {
  background-color: #333333;
  -ms-background-size: contain;
  background-size: contain;
}

/* Opera */
*:-o-fullscreen {
  background-color: #333333;
  -o-background-size: contain;
  background-size: contain;
}

/* old syntax */
*:full-screen {
  background-color: #333333;
  background-size: contain;
}

/* the end */