body {
		  font-family: Arial;
		  margin: 0;
		}

		* {
		  box-sizing: border-box;
		}

		img {
		  vertical-align: middle;
		}

		/* Position the image container (needed to position the left and right arrows) */
		.container {
		  position: relative;
		}

		/* Hide the images by default */
		.mySlides {
		  display: none;
		}

		/* Add a pointer when hovering over the thumbnail images */
		.cursor {
		  cursor: pointer;
		}

		/* Next & previous buttons */
		.prev,
		.next {
		  cursor: pointer;
		  position: absolute;
		  top: 40%;
		  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;
		}

		/* 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);
		}

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

		/* Container for image text */
		.caption-container {
		  text-align: center;
		  background-color: #222;
		  padding: 2px 16px;
		  color: white;
		}

		.row:after {
		  content: "";
		  display: table;
		  clear: both;
		}

		/* Six columns side by side */
		.column {
		  float: left;
		  width: 16.66%;
		}

		/* Add a transparency effect for thumnbail images */
		.demo {
		  opacity: 0.6;
		}

		.active,
		.demo:hover {
		  opacity: 1;
		}