body{
	background-color: #b1c0be;
	width: 100%; /* needed for mobile view to look good, make sure no padding for body, use padding for section */
	max-width: 640px; /* width of mobile in landscape */
	margin: auto; /* used to centre the body */
}

h1, h2{
	margin: 0; /* this overwrite the default margins set by the browser */
}

header, section, nav{
	padding: 10px; /* padding needs to be made here rather than in body otherwise the padding causes the right edge of page to be beyond the screen */ 
}

section{
	position: relative; /* needs to be moved up doue to nav being moved up for the hamburger to line up with h1 */
	top: -20px;
}

hr{
	margin-top: 1px solid Black;
}	
/*----------menu----------*/
nav ul{ 
	padding: 0;
	margin: 0;
}

nav ul li {
	width: 100%;
	border-bottom: 1px solid #003748;
}


nav ul li:first-child { /* ul used for the menu so is easy to style */
	border-top: 1px solid #003748;
}

nav ul li.current{ /* current page needs to have this class added to the list item in the navigation */
	background-color: #b1c0be;
}

nav ul li a {
	margin: 0;
	text-decoration: none;  /* text-decoration creates decorative lines on/under/above text, I don't want that so I set it to none */
	transition: color 0.3s ease;
}

a { /* this applies to all links on the website */
	color: #003748;
}

nav{ 
	position: relative; /* move the element relitive to where it should be */
	top: -35px;
	left: 20px;

}

#hamburger_container{
	float: right; /* float is used here so that the hamburger menu icon is to the right of the page */
	position: relative;
	right: -25px;
}

#menuToggle{
	/*display: block; /**/
	position: relative;
	top:-30px;
	z-index: 1;
}

#menuToggle input{
	display: block;
	width: 40px;
	height: 32px;
	cursor: pointer;
	opacity: 0; 
	z-index: 2; 
	float: right; /* float was used so that the checkbox that is hidden behind the hamburger is to the right of the page */
	position: relative;
	top: -6px;
	left: -15px;

	-webkit-touch-callout: none;
}


#menuToggle div span{
	display: block;
	width: 33px;
	height: 4px;
	margin-bottom: 5px;
	position: relative;

	background: #004e63;
	border-radius: 3px;

	z-index: 1; /* the z-index is a layering system used when there are multiple layers is an interface */

	transform-origin: 4px 0px;

	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
			  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
			  opacity 0.55s ease;
}

#menuToggle div span:first-child{ /* the first span within the div in the menu toggle element */
	transform-origin: 0% 0%;
}

#menuToggle div span:nth-last-child(2){
	transform-origin: 0% 100%;
}


#menuToggle input:checked ~ div span{ /* this piece of code transforms all the slices of hamburger into a cross once the user has clicked the hamburger button */
	opacity: 1;
	transform: rotate(45deg) translate(-5px, -15px);
	background: #003748;
}


#menuToggle input:checked ~ div span:nth-last-child(3){
	opacity: 0;
	transform: rotate(0deg) scale(0.2, 0.2);
}


#menuToggle input:checked ~ div span:nth-last-child(2){
	opacity: 1;
	transform: rotate(-45deg) translate(-5px, 15px);
}

#menu_dropdown_container{
	position: fixed; /* positioned relative to the viewport, height is set to zero so dropdown is above the content */
	max-width: 620px; /* body width less padding */
	/*width: 100%;*/ /* to have the menu go across entire screen in mobile width remove padding from nav as well as add this 100% */
	width: calc(100% - 20px); /* to give a 10px "padding" around menu on mobile screen*/
	margin: 36px 0 0 -20px;
	background: #90A7A7;
	-webkit-font-smoothing: antialiased;
	transform: translate(0%, -120%); /* brings dropdown menu from the top, keeps it out of the way while not being used */
	transition: opacity 0.3 ease;
	opacity: 0; 	
	text-align: center;
	z-index: 2;
}

#menu_dropdown_container img{
	width: 100%
}

#menu_links li{
	padding: 10px 0;
	font-size: 22px;
	list-style-type: none; 
}


#menuToggle input:checked ~ div:last-child{
	transform: scale(1.0, 1.0);
	opacity: 1;
	transition: opacity 0.55s ease;
}