* {box-sizing: border-box}
      body {font-family: Verdana, sans-serif; margin:0}
      .mySlides {display: none}
      img {vertical-align: middle;
      }
       
      /* Slideshow container */
      .slideshow-container {
      
         max-width: 1200px;
         position: relative;
         margin: auto;
      }
      /* Next & previous buttons */
      .pre .next {
         cursor: pointer;
         position: absolute;
         top: 50%;
         width: auto;
         padding: 16px;
         margin-top: -66px;
         color: white;
         font-weight: bold;
         font-size: 18px;
         transition: 0.6s ease;
         border-radius: 0 3px 3px 0;
         user-select: none;
      }
      
      /* 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 seethrough */
      .prev:hover, .next:hover {
         background-color: rgba(0,0,0,0.8);
      }
      /* Caption text */
      .text {
         color: black;
         font-size: 15px;
         padding: 6px 8px;
         position: absolute;
         bottom: 8px;
         width: 100%;
         text-align: center;
      }
      /* Number text (1/3 etc) */
      .numbertext {
         color: #f2f2f2;
         font-size: 12px;
         padding: 8px 12px;
         position: absolute;
         top: 0;
      }
      /* The dots/bullets/indicators */
      .dot {
         cursor: pointer;
         height: 15px;
         width: 15px;
         margin: 0 2px;
         background-color: #bbb;
         border-radius: 50%;
         display: inline-block;
         transition: background-color 0.6s ease;
      }
      .active, .dot:hover {
         background-color: #717171;
      }