* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    background-color: #222;
}
  
header {
    padding: 10px;
    color: #FFFFFF;
}
  
#instructions {
    padding: 15px;
}
  
.frames {
    max-width: 741px;
    max-height: 527px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    padding-bottom: 10px;
}
  
.container {
    position: relative;
    margin: auto;
    text-align: center;
    height: 500px;
}
  
  /* Hide the images by default */
.mySlides {
    display: none;
}
  
.mySlides img {
    max-height: 500px;
}
  
.D9 img, .S7 img {
    max-height: 50%;
    max-width: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    padding-bottom: 10px;
}
  
    /* Add a pointer when hovering over the thumbnail images */
.cursor {
    cursor: pointer;
}
    
    /* Next & previous buttons */
.prev,
.next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      padding: 16px;
      margin-top: -50px;
      color: white;
      font-weight: bold;
      font-size: 20px;
      border-radius: 0 3px 3px 0;
      user-select: none;
      -webkit-user-select: none;
      background-color: #222;
}
    
    /* Position the "next button" to the right */
.next {
      right: 0;
      border-radius: 3px 0 0 3px;
}
  
.prev {
        left: 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: #000000
}
    
    /* Container for image text */
.caption-container {
      text-align: center;
      background-color: #222;
      padding: 2px 16px;
      color: white;
}
  
.dot {
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 20px 5px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
}
    
.active, .dot:hover {
      background-color: #717171;
}
  
.bottomNav {
      position: fixed;
      display: flex;
      font-weight: 600;
      overflow: hidden;
      background-color: #222;
      bottom: 0px;
      width: 100%;
}
  
.bottomNav a {
      float: left;
      flex-grow: 1;
      text-align: center;
      text-decoration: none;
      padding: 16px 15px;
      text-decoration: none;
      font-size: 14px;
      color: #FFFFFF;
}