/*==========================================================================================*/
body
{
	color: rgb(0, 0, 128);
	background-image: url("background.jpg");
	background-color: #ecd8f1
}
/*==========================================================================================*/
	* {box-sizing:border-box}
	body {font-family: Verdana,sans-serif;margin:0}
	.mySlides {display:none}
	
/* Slideshow container */
	.slideshow-container 
	{
		max-width: 620px;	
		position: relative;
		margin: auto;
	}

/* currentSlide container dots */
	.currentSlide 
	{
		margin-top: 100px;
		/*margin: auto;*/
	}

/* Next & previous buttons */
	.prev, .next
	{
		cursor:       pointer;
		position:     absolute;
		top:          50%;
		width:        auto;
		padding:      16px;
		margin-top:   -22px;
		color:         #000080; 	
		font-weight:   bold;
		font-size:     18px;
		transition:    0.6s ease;
		border-radius: 0 3px 3px 0;
	}

/* Position the "next button" to the right */
	.next
	{
		right: 0;
		border-radius: 3px 0 0 3px;
	}

/* On hover, add a background color with a little bit see-through */
	.prev:hover, .next:hover 
	{
		background-color: rgba(255, 130, 130, 0.8);
	}

/* Caption text */
	.text 
	{
		color: navy;
		font-size: 15px;
		padding: 8px 12px;
		position: absolute;
		bottom: 8px;
		width: 100%;
		text-align: center;
	}

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

/* The dots/bullets/indicators */
	.dot 
	{
		height:15px;
		width: 15px;
		margin: 0 2px;
		background-color: maroon;
		border-radius: 50%;
		display: inline-block;
		transition: background-color 0.6s ease;
	}

	.active, .dot:hover 
	{
		background-color: #717171;
	}

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

/* On smaller screens, decrease text size */
	@media only screen and (max-width: 300px) 
	{
		.prev, .next, .text {font-size: 11px}
	}