/**
 * See: http://www.css-101.org/articles/ken-burns_effect/css-transition.php
 * source: https://codepen.io/planetgrafix/pen/AGmXQK
 */

html,body{
    margin:0;
    height:100%;
    overflow:hidden;
}

* {
  font-weight: normal;
}

:root {
  --wimage: 120vw;
  --himage: 120vh;
}

#slideshow {
    object-fit: cover;
}

#slideshow img {
    position:absolute;
    width:100%;
    height:var(--himage);
    opacity:0;
    object-fit: cover;
    -webkit-transition-property: opacity, -webkit-transform;
    -webkit-transition-duration: 3s, 10s;
       -moz-transition-property: opacity, -moz-transform;
       -moz-transition-duration: 3s, 10s;
        -ms-transition-property: opacity, -ms-transform;
        -ms-transition-duration: 3s, 10s;
         -o-transition-property: opacity, -o-transform;
         -o-transition-duration: 3s, 10s;
            transition-property: opacity, transform;
            transition-duration: 3s, 10s;
}

@media all and (display-mode: fullscreen) {
  #slideshow img {
      position:absolute;
      width:var(--wimage);
      height:var(--himage);
      top:50%;
      left:50%;
      margin-left:calc(var(--himage) * -1.0);
      margin-top:calc(var(--himage) * -0.5);
      opacity:0;
      object-fit: cover;
      -webkit-transition-property: opacity, -webkit-transform;
      -webkit-transition-duration: 3s, 10s;
         -moz-transition-property: opacity, -moz-transform;
         -moz-transition-duration: 3s, 10s;
          -ms-transition-property: opacity, -ms-transform;
          -ms-transition-duration: 3s, 10s;
           -o-transition-property: opacity, -o-transform;
           -o-transition-duration: 3s, 10s;
              transition-property: opacity, transform;
              transition-duration: 3s, 10s;
  }
}


#slideshow img  {
    -webkit-transform-origin: bottom left;
       -moz-transform-origin: bottom left;
        -ms-transform-origin: bottom left;
         -o-transform-origin: bottom left;
            transform-origin: bottom left;
}

#slideshow :nth-child(2n+1) {
    -webkit-transform-origin: top right;
       -moz-transform-origin: top right;
        -ms-transform-origin: top right;
         -o-transform-origin: top right;
            transform-origin: top right;
}

#slideshow :nth-child(3n+1) {
    -webkit-transform-origin: top left;
       -moz-transform-origin: top left;
        -ms-transform-origin: top left;
         -o-transform-origin: top left;
            transform-origin: top left;
}
#slideshow :nth-child(4n+1) {
  -webkit-transform-origin: bottom right;
     -moz-transform-origin: bottom right;
      -ms-transform-origin: bottom right;
       -o-transform-origin: bottom right;
          transform-origin: bottom right;
}

#slideshow .fx:first-child + img ~ img  {
    z-index:-1;
}

#slideshow .fx {
    opacity:1;
    -webkit-transform: scale(1.1);
       -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
         -o-transform: scale(1.1);
            transform: scale(1.1);
}


#zoomA {
  transition: transform ease-in-out 0.3s;
}

.fullscreen {
  position: absolute;
  width: 150%;
  z-index: 1;
}

.fullscreen img {
  width: 100%;
  height: auto;
}

.fullscreen .btn {
  position: relative;
  top: 50%;
  left: 62%;
  transform: translate(-10%, -45%);
  -ms-transform: translate(-10%, -45%);
  background-color: #555;
  padding: 4px 8px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  opacity: 0.4;
}

.fullscreen .btn:hover {
  background-color: black;
}

.kbslidetime {
  position: relative;
  bottom: -120%;
  left: 35%;
  transform: translate(-53%, 39.5%);
  -ms-transform: translate(-53%, 39.5%);
  z-index: 99;
  text-align: left;
}

.kbslidedate {
  position: relative;
  bottom: -120%;
  left: 35%;
  transform: translate(-53%, 40%);
  -ms-transform: translate(-53%, 40%);
  z-index: 99;
  text-align: left;
}

.kbslidedesc {
  position: relative;
  bottom: -118%;
  left: 35%;
  transform: translate(-53%, 41.5%);
  -ms-transform: translate(-53%, 41.5%);
  z-index: 99;
  text-align: left;
}

#shadername {
  position: absolute;
  top: 45px;
  right: 35px;
  color: #f1f1f1;
  font-size: 38px;
  font-weight: bold;
  z-index:  1;
}

#shaderid {
  position: absolute;
  top: 45px;
  right: 35px;
  color: #f1f1f1;
  font-size: 18px;
  font-weight: bold;
  z-index:  1;
}