/*==========================================================================================*/
body
{
	color: rgb(5, 5, 5);
	background-image: url("background.jpg");
	background-color: #ecd8f1
}
/*==========================================================================================*/

	*{box-sizing: border-box;}

	img 
	{
		vertical-align: middle;
	}

/* Position the image container (needed to position the left and right arrows) */
	.slideshow-container
	{
		max-width: 620px;	
		position: relative;
		margin: auto;
	}
/* 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: 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;
	}

/* 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: 9.00%;
	}

/* The dots/bullets/indicators */
	.row
	{
		margin: 0 300px;
	}


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

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