#projects {
  display : flex;
  flex-wrap: wrap;
  justify-content: center;
  top: var(--menu-height);
  max-width: 1440px;
  margin: 0 auto;
}

#projects figure {
  margin : 66px 60px;
  cursor: pointer;
}

#projects figcaption {
  padding-top: 7px;
  line-height: normal;
  letter-spacing: 1px;
  cursor: pointer;
}

.kraft-font {
  font-family: 'kraft-font', Arial, Helvetica, sans-serif;
}

.project-cover {
  color: lightgray;
}

.project-cover:hover {
  color: black;
}

/* SLIDESHOW  START */

.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}



/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: silver;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  top: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: silver;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


.slideImage{
    max-width: calc(100vw - 48px);
    max-height: 90vh;
    padding-top: 5vh;
    padding-bottom: 5vh;
    cursor: pointer;
}

/* SLIDESHOW  END */