@charset "utf-8";
/* CSS Document */

#cover
		{
			background-color: rgba(3,22,88,0.20);
			position: absolute;
			top: 0px;
			left: 0px;
			right: 0px;
			bottom: 0px;
			margin: auto;
			font-family: 'Raleway', sans-serif;
		}
		#topnav
		{
			background-color:rgba(255,255,255,0.75);
			height: 60px;
			padding: 10px;
			position: fixed;
			top: 0px;
			right: 10px;
			left: 10px;
			border-radius: 0px 0px 20px 20px;
			z-index: 5;
			min-width: 500px;
		}
		#topnav ul 
		{
			display: flex;
			flex-direction: row;
			justify-content: space-around;
		}
		li
		{
			list-style-type: none;
			font-family: 'Montserrat', sans-serif;
		}
		a 
		{
			transition: 1s ease-in-out;
		}
		a:hover
		{
			color: rgba(140,15,2,0.80);
		}
		#container
		{
			background-color:rgba(140,15,2,0.80);
			width: 75%;
			height: auto;
			max-width: 940px;
			min-width: 500px;
			padding: 30px;
			margin: auto;
			margin-top: 150px;
			margin-bottom: 100px;
		}
		#wrapper
		{
			width: 100%;
			height: auto;
			margin: auto;
		}
		header
		{
			background-image: url(Images/picture014.jpg);
			background-attachment:fixed;
			background-position: top;
			background-size: contain;
			height: 140px;
			padding: 20px;
			border-radius: 20px 20px 0px 0px;
			margin-top: 50px;
			text-align: center;
			font-size: 30px;
			text-shadow: 10px 10px 10px black;
		}
		#slideshow
		{
			background-color: limegreen;
			height: 280px;
			padding: 20px;
		}
		#flexboxcontainer
		{
			display: flex;
			flex-direction: column;
		}
		#pagenav
		{
			background-color: #0376bd;
			height: 40px;
			padding: 20px;
		}
		#pagenav ul 
		{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			
		}
		main
		{
			background-color: white;
			height: auto;
			padding: 20px;
		}
		img.right
		{
			float: right;
		}
		img.left
		{
			float: left;
		}
		img.center
		{
			float: center;
		}
		img
		{
			margin: 2%;
			box-shadow: 5px 5px 10px 3px black;
		}

		
		footer
		{
			background-color: #0376bd;
			height: 20px;
			padding: 20px;
			text-align: center;
		}
		@media only screen and (min-width: 640px)
		{
			#flexboxcontainer
			{
				display: flex;
				flex-direction: row;
			}
			#pagenav
			{
				height: auto;
				width: 20%;
			}
			#pagenav ul 
			{
				display: flex;
				flex-direction: column;
			}
			main
			{
				width: 80%;
			}
		}