@media screen and (max-width: 900px){ /*The dropdown is only used if screen < 900px */
	.dropbutton {
		background-color: rgba(0, 0, 0, 0.0);
		color: white;
		padding: 10px;
		border: none;
		cursor: pointer; /* changes the cursor to a pointer when over the dropbutton */
		text-align: center;
	}

	/* creates the 'burger' style button */
	.dropbutton span {
		display: block;
		width: 30px;
		height: 4px;
		margin-bottom: 5px;
		position: relative;
		background: white;
		border-radius: 3px;
	}

	.dropdown {
		position: fixed;
		top: 10px;
		z-index: 2; /* affects the dropdowns render priority, 2 puts it as the last
		* to be rendered so it's ontop of all other elements */
	}

	.content {
		display: none; /* stops the contents of the list being shown until it needs to be */
		min-width: 120px;
		z-index: 1;
		position: fixed;
		top: 50px;
		text-align: center;
		color: white;
		padding: 10px 0;
	}

	.content a {
		padding: 10px 10px;
		display: block;
	}
	
	/* Displays the contents of the list when hovering/clicking on the navigation section */
	.dropdown:hover .content{
		display: block;
	}

	
	/* When the cursor is over an item in the dropdown list, change it's background colour */
	.content a:hover	{
		background-color: rgb(240, 240, 240)
	}

	
}