*
	{
		box-sizing: border-box;
	}

	div
	{
	/* border: 1px #0f0 solid; */
	}

	body
	{
		font-family: Verdana, sans-serif;
		text-align: center;
	}


	#container
	{
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-top: 40px;
	/* background-color: #00a; */
	height: 450px;
	align-items: center;
  	justify-content: center;
	}

	.mySlides
	{
		display: none;
	}

	.mySlides img
	{
	display: block;
	max-width: 100%;
	height: auto;
	max-height: 400px;
	margin: auto;
	order:1;
	padding: 8px;
	border: 1px #ddd solid;
	}



	/* Caption text */
	.text
	{
		color: #000;
		font-size: 12px;
		padding: 10px 0 0  12px;
		position: relative;
		width: 100%;
		text-align: center;
		letter-spacing: 10px;
		text-transform: uppercase;
	}

#dot-container
	{
	margin-top: 0px;
	width: 100%;
	display: block;
	order: 2;
	}


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

	}

	.active
	{
		background-color: #717171;
	}

	/* Fading animation */
	.fade
	{
		-webkit-animation-name: fade;
		-webkit-animation-duration: 1.0s;
		animation-name: fade;
		animation-duration: 1.0s;
	}

	@-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)
	{
		.text
		{
			font-size: 8px;
		}
	}