/* Slideshow */
	
						body {
							font-family: Arial;
							margin: 0;
						}

					img {
						vertical-align: middle;
					}
		
					* 		{
						box-sizing: border-box;
					}
					
						
						
			
		/* Position the image container (needed to position the left and right arrows) */
			.slider {
				position: relative;
				#border: 1px solid #b8860b;
			}

		/* 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;
					background-color: rgba(0, 0, 0, 0.3);
				}

		/* Caption text */
				.text {
					color: #f2f2f2;
					font-size: 15px;
					padding: 8px 12px;
					position: absolute;
					bottom: 8px;
					width: 100%;
					text-align: center;
					background-color: rgba(0, 0, 0, 0.6);
				}

				.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;
				}
				
		/* Fading animation */
				.fade {
					-webkit-animation-name: fade;
					-webkit-animation-duration: 1.5s;
					animation-name: fade;
					animation-duration: 1.5s;
					}

				@-webkit-keyframes fade {
					from {opacity: .4}
					to {opacity: 1}
					}

				@keyframes fade {
					from {opacity: .4}
					to {opacity: 1}
					}
					
					/* Lightbox*/
					
					
				.row > .column {
					padding: 0 8px;
					}


					/* The Modal (background) */
				.modal {
					display: none;
					position: fixed;
					z-index: 1;
					padding-top: 200px;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					overflow: auto;
					background-color: rgba(0, 0, 0, 0.8);
				}

					/* Modal Content */
				.modal-content {
					position: relative;
					background-color: rgba(0, 0, 0, 0.8);
					border: 1px solid #b8860b;
					margin: auto;
					padding: 0;
					width: 90%;
					max-width: 1200px;
				}

					/* The Close Button */
				.close {
					color: white;
					position: absolute;
					top: 30px;
					right: 25px;
					font-size: 50px;
					font-weight: bold;
					padding:50px;
				}

				.close:hover,
				.close:focus {
					color: #999;
					text-decoration: none;
					cursor: pointer;
				}

					/* Caption text */
					.caption-container {
					text-align: center;
					background-color: black;
					padding: 2px 16px;
					color: white;
					}

					img.demo {
					opacity: 0.6;
					}

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

					img.hover-shadow {
					transition: 0.3s;
					}

					.hover-shadow:hover {
					box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
					}