/* Switching images */
div.slideshow {
  width: 100%;
  position: relative;
  margin: auto;
  margin-bottom: 5rem;
  text-align: center;
}

img.slide{
  max-height: 50vh;
  max-width: 90vw;
  transition: opacity 0.25s ease-in-out;
  -moz-transition: opacity 0.25s ease-in-out;
  -o-transition: opacity 0.25s ease-in-out;
  -webkit-transition: opacity 0.25s ease-in-out;
}

/* Buttons to switch images */
div.prev, div.next {
  color: rgba(50 50 50 / 1);

  height: 100%;
  position: absolute;
  display: table;
  top: 0%;
  width: auto;

  transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  -webkit-transition: opacity 0.5s ease-in-out;
}

div.next {
  right: 0;
}



p.arrow {
  user-select: none;
  vertical-align: middle;
  display: table-cell;
  font-weight: bold;
}

/* Description text */
.textbody, .linkbody {
  margin: auto;
  max-width: 60rem;
}

.textbody {
  text-align: justify;
}

@media (max-width: 40rem) {
  .textbody {
    text-align: start;
  }
}

.linkbody {
  margin-top: 5rem;
  text-align: center;
}

a.catalogueLink {
  color: white;
  text-decoration: none;
  padding: 1rem;
  background-color: #f8991d;
  border-radius: 6px 6px 6px 6px;

  transition: background-color 0.3s ease-in-out;
  -moz-transition: background-color 0.3s ease-in-out;
  -o-transition: background-color 0.3s ease-in-out;
  -webkit-transition: background-color 0.3s ease-in-out;
}

a.catalogueLink:hover {
  background-color: #999999;
}

/* Catalogue container */
#outerContainer {
  width: 100%;
  height: 40vw;
  position: relative;
  margin: auto;
}

#container  {
  width: 80vw;
  height: 40vw;
  max-width: 160vh;
  max-height: 80vh;

  perspective: 100rem;
  position: relative;
  margin: auto;
}



.pages {
  width: 50%;
  height: 100%;
  position: absolute;
  left: 0px;

  transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;

  transform-origin: left;
  -moz-transform-origin: left;
  -o-transform-origin: left;
  -webkit-transform-origin: left;

  transition: transform 1.75s ease;
  -moz-transition: transform 1.75s ease;
  -o-transition: transform 1.75s ease;
  -webkit-transition: transform 1.75s ease;
}

figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

img.fillin {
  width: 100%;
  height: 100%;
}

div.center {
  text-align: center;
  padding: 10px;
}