body
	{
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		background-color: #389fff;  /* blue */
	}
	
	
	/*
	================================================
		HEADER
	================================================
	*/
	
	header
	{
		width: 100%;
		height: 543px;
		margin: 0;
		padding: 0;
		background-color: #b7dcff;
	}
	
	header #bgr
	{
		width: 100%;
		height: auto;
	}
	
	header img
	{
		width: 100%;
		max-height: auto;
	}
	
	nav
	{
		width: auto;
		height: auto;
		position: relative;
		position: relative;
		bottom: 180px;
		text-align: center;
	}
	
	nav ul
	{
		display: inline-block;
		padding: 0;
		background-color: #389fff;  /* blue */
		border-radius: 20px;
	}
	
	nav ul li
	{
		float: left;
		list-style: none;
		padding: 20px;
	}
	
	nav ul li a
	{
		padding: 20px;
		text-decoration: none;
		color: white;
		text-transform: uppercase;
	}
	
	nav ul li a:hover
	{
		color: black;
	}
	
	@media screen and (max-width: 1300px)
	{	
		header
		{
			height: auto;
		}
		nav
		{
			bottom: 0;
		}
		
		nav ul
		{
			border-radius: 0;
		}
		
		nav ul li
		{
			padding: 10px 50px;
		}
	}
	
	
	/*
	================================================
		MAIN
	================================================
	*/
	
	
	main
	{
		width: 100%;
		height: 100%;
		z-index: 3;
		background-color: #b7dcff;
	}
	
	main #middle-section
	{
		max-width: 1300px;
		height: auto;
		display: flex;
		margin: 0 auto;
		position: relative;
		top: -20px;
		z-index: 3;
		background-color: white;
		border-radius: 20px;
	}
	
	main #middle-section #left-column
	{
		max-width: 70%;
		z-index: 3;
	}
	
	main #middle-section #right-column
	{
		max-width: 30%;
		z-index: 3;
	}
	
	main #middle-section p
	{
		padding: 0 20px;
		font-size: 1.2em;
		line-height: 1.5em;
		z-index: 3;
	}
	
	@media screen and (max-width: 1300px)
	{
		main #middle-section
		{			
			border-radius: 0;
		}
	}
	
	@media screen and (max-width: 700px)
	{
		main #middle-section
		{
			top: 0;
			border-radius: 0;
			flex-direction: column;
			align-items: center;
		}
		
		main #middle-section #left-column
		{
		max-width: 100%;
		}
	
	main #middle-section #right-column
		{
		max-width: 100%;
		}
	}
	
	
	main #middle-section #right-column ul
	{
		padding: 0;
	}
	
	main #middle-section #right-column ul li
	{
		display: block;
		list-style: none;
		background-color: #ff1b8f;  /* pink */
		margin: 10px;
		padding: 20px;
		text-align: center;
		border-radius: 20px;
	}
	
	main #middle-section #right-column ul li a
	{
		color: white;
		text-decoration: none;
		font-size: 20px;
	}
	
	main #middle-section #right-column ul li a:hover
	{
		color: #343434;
	}
	
	
	/*
	================================================
		FOOTER
	================================================
	*/
	
	footer
	{
		width: 100%;
		height: 100px;
		background-color: #389fff; /* blue */
		position: relative;
		top: -80px;
		z-index: 1;
	}
	
	footer #footer-div
	{
		max-width: 800px;
		margin: 0 auto;
		position: relative;
		top: 100px;
	}
	
	footer #footer-div .footer-list
	{
		display: inline-block;
		margin: 0 100px;
	}
	
	footer #footer-div .footer-list ul li
	{
		padding: 5px;
		list-style: none;
	}
	
	footer #footer-div .footer-list ul li a
	{
		color: #343434;
		text-decoration: none;
	}
	
	footer #footer-div .footer-list ul li a:hover
	{
		color: white;
	}
	
	@media screen and (max-width: 1200px)
	{
		footer
		{
			top: 0;
		}
		
		footer #footer-div
		{
			max-width: 400px;
			top: 0;
		}
		
		footer #footer-div .footer-list
		{
			margin: 0 20px;
		}
		
		footer #footer-div .footer-list ul li
		{
			padding-top: 10px;
		}
	}