* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -ms-content-zooming: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

:root {
  --opacity: 5s;
  --time: 15s;
  /*--scale: 1.2;  */
  --scale: 1.1;
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  background-color: #000;
  color: black;
}

a,
a:hover,
a:active,
a:visited {
  text-decoration: none;
  color: inherit;
}

#slideshow {
  /*    border: 1px solid orange;*/
  position: relative;
  /*    position:absolute;*/
  /*    width: 150vh;*/
  /*    height: 100%;*/
  /*    height: 100%;*/

  aspect-ratio: 1.5 !important;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);

  /*  text-align: center;*/
  /*    height: 50vw;*/
  /*    width: 800px;*/
  /*    height: 400px;*/
  overflow: hidden;
  /*    border:8px solid #ccc;*/
}

#slideshow img {
  position: absolute;
  /*    width:800px;*/
  /*    height:400px;*/
  width: 100%;
  height: 100%;

  /*    margin-top: -50%;*/
  opacity: 0;
  -webkit-transition-property: opacity, -webkit-transform;
  /*    -webkit-transition-duration: 3s, 10s;*/
  -webkit-transition-duration: var(--opacity), var(--time);
  -moz-transition-property: opacity, -moz-transform;
  /*       -moz-transition-duration: 3s, 10s;*/
  -moz-transition-duration: var(--opacity), var(--time);
  -ms-transition-property: opacity, -ms-transform;
  /*        -ms-transition-duration: 3s, 10s;*/
  -ms-transition-duration: var(--opacity), var(--time);
  -o-transition-property: opacity, -o-transform;
  /*         -o-transition-duration: 3s, 10s;*/
  -o-transition-duration: var(--opacity), var(--time);
  transition-property: opacity, transform;
  /*            transition-duration: 3s, 10s;*/
  transition-duration: var(--opacity), var(--time);

  /**
 * We change the point of origin using four corners so images do not move in the same direction. 
 * This technique allows us to create various paths while applying the same translate() values to all images (see the 'fx' class further below).
 */

  -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;
}

/**
 * Because of the stacking context, we need to make sure that the first image (in source) is not hidden by the last one. 
 * The rule below moves all images past the second one down the stack. 
 * This is because the second image needs to show on top of the first one when it transitions in.
 */

/* unused-css-ignore */
#slideshow .fx:first-child + img ~ img {
  z-index: -1;
}

/**
 * Because images are styled with a different point of origin, the following rule will create different panning effects.
 */

/* unused-css-ignore */
#slideshow .fx {
  opacity: 1;
  -webkit-transform: scale(var(--scale));
  -moz-transform: scale(var(--scale));
  -ms-transform: scale(var(--scale));
  -o-transform: scale(var(--scale));
  transform: scale(var(--scale));
}