@media screen and (max-width: 600px) {
	 .pushNav {
		 width: 75%;
		 right: -75%;
	}
}
 @media screen and (min-width: 601px) {
	 .pushNav {
		 width: 350px;
		 right: -350px;
	}
}
 ul.pushNav {
	 padding: 0;
	 margin: 0;
	 list-style-type: none;
}
 .pushNav {
	 height: 100%;
	 position: fixed;
	 top: 0;
	 z-index: 100;
	 overflow: auto;
	 background: #2e2f35;
	 transition: ease-in-out 0.3s;
}
 .pushNav hr {
	 border: 1px solid #555;
}
 .pushNav, .pushNav a {
	 font-size: 1em;
	 font-family: helvetica, sens-serif;
	 font-weight: 100;
	 color: #fff;
	 text-decoration: none;
}
 .pushNavIsOpen {
	 overflow: auto;
	 height: 100%;
}
 .js-topPushNav.isOpen, .pushNav_level.isOpen {
	 right: 0;
}
 .closeLevel, .openLevel {
	 cursor: pointer;
}
 .openLevel, .closeLevel, .pushNav a {
	 padding: 1em 0;
	 display: block;
	 text-indent: 20px;
	 transition: background 0.3s ease-in-out;
}
 .openLevel:hover, .closeLevel:hover, .pushNav a:hover {
	 background: #494a50;
}
 .hdg {
	 background-color: #1e1e24;
}
 .closeLevel, closelevel > i {
	 font-size: 1em;
	 color: #a5a5a4;
}
 .burger {
	 position: absolute;
	 top: 24px;
	 right: 48px;
	 
	 display: none;
}
 .burger i {
	 font-size: 3em;
}
 .screen {
	 position: fixed;
	 background: rgba(0, 0, 0, 0.7);
	 width: 100%;
	 height: 0;
	 top: 0;
	 bottom: 0;
	 right: 0;
	 opacity: 0;
	 transition: opacity 0.3s ease-in-out;
}
 .pushNavIsOpen .screen {
	 height: 100%;
	 opacity: 1;
}
 .fa {
	 display: inline;
	 padding: 5px;
}

 .wrapper {
	 max-width: 625px;
	 margin: 120px auto;
	 padding: 0 20px;
	 color: #fff;
	 font-family: "Trebuchet MS", Helvetica, sans-serif;
	 font-weight: 100;
	 font-size: 1.1em;
	 line-height: 1.4em;
}
 .wrapper a {
	 color: #20c270;
	 text-decoration: none;
}
 .wrapper button {
	 background-color: #20c270;
	 margin: 50px auto;
	 display: block;
	 padding: 10px 40px;
	 border: none;
}
 .wrapper button:hover {
	 background-color: #18a960;
}
 .wrapper button a {
	 color: #fff;
	 font-size: 2em;
}
 
 
 	@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"); /* import font */

		:root{
			--white: #f9f9f9;
			--black: #36383F;
			--gray: #85888C;
		} /* variables*/

		/* Reset */
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		body{
			background-color: var(--white);
			font-family: "Poppins", sans-serif;
			margin: 0;
		}
		a{
			text-decoration: none;
		}
		ul{
			list-style: none;
		}
		
		nav {
			float: right;
		}
		
		p{
			width: 60%;
			justify-content: center;			
			margin: 0 auto;
			padding: 8;
		}
		
		h1, h2, h3, h4, h5{
			
			width: 60%;
			justify-content: center;			
			margin: 0 auto;
			padding: 8;
		}
		
		figure{
			
			width: 60%;
			justify-content: center;			
			margin: 0 auto;
			padding: 8;
			
		}
		
		@media screen and (max-width: 750px) {
			p{
				width: 80%;
			}
			
			h1, h2, h3, h4, h5{
				
				width: 80%;
			}
			
			figure{
				
				width: 80%;
				
			}
			
		}
		
		th,td{
			text-align: center;
			
		}
		
		
		/* Logo */
		.logo{
			display: inline-block;
			color: var(--white);
			font-size: 25px;
			margin-left: 10px;
		}
		
		.header {
			width:100%;
			background-size: cover;
			background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ) , url("header.jpg");
			/*position: fixed;*/
			top: 0;
			z-index: 3;
			height: 200px;
		}
		
		.homepage {
			width:100%;
			background-size: cover;
			background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ) , url("images/home.jpg");
			/*position: fixed;*/
			top: 0;
			z-index: 3;
			height: 200px;
				
		}
		
		.homepage h1 {
				
			color: var(--white);
			text-align: center;
			
		}
		
		
    #nav1 {
	  list-style: none inside;
	  margin: 0;
	  padding: 0;
	  text-align: center;
	  
	}

	#nav1 li {
	  display: block;
	  position: relative;
	  float: left;
	  text-align: center;
	  /* menu background color */
	  
	}
	



	#nav1 li a {
	  display: block;
	  padding: 12;
	  text-decoration: none;
	  width: 100%;
	  /* this is the width of the menu items */
	  /*line-height: 20px;*/
	  /* this is the hieght of the menu items */
	  color: #ffffff;
	  /* list item font color */
	}
	
	
	
	#nav1 li li {
	  display: block;
	  position: relative;
	  float: left;
	  text-align: center;
	  /* menu background color */
	  background-color: white;
	  width: 200;
	  border: 1px solid #D3D3D3;
	  z-index: 4;

	  
	}
	
	#nav1 li li li {
	  display: block;
	  position: relative;
	  float: left;
	  text-align: center;
	  /* menu background color */
	  background-color: white;
	  width: 200;
	  border: 1px solid #D3D3D3;
	  z-index: 4;
	}

	#nav1 li li a {
	  font-size: 80%;
	  text-align: center;
	  width: 100%;
	  color: #000000;
	}
	
	#nav1 li li li a {
	  font-size: 80%;
	  text-align: center;
	  width: 100%;
	  color: #000000;
	}


	/* smaller font size for sub menu items */

	#nav1 li li:hover { 
		color: white;
		background-color: #00CCFF
	}
	#nav1 li li li:hover { 
		background-color: #00CCFF
	}
	
	#nav1 li li a:hover { 
		color: white;
		text-decoration: none;
	}
	
	#nav1 li li li a:hover { 
		color: white;	
		text-decoration: none;
	}
	
	#nav1 a:hover {
		text-decoration: underline;
			
	}

	/* highlights current hovered list item and the parent list items when hovering over sub menues */

	#nav1 ul {
	  position: absolute;
	  padding: 0;
	  left: 0;
	  display: none;
	  text-align: center;
	  /* hides sublists */
	}

	#nav1 li:hover ul ul {
	  display: none;
	  background: #7D7676;
	}
	
	#nav1 li:hover ul ul ul{
	  display: none;
	  background: #7D7676;
	}


	/* hides sub-sublists */

	#nav1 li:hover ul {
	  display: block;
	  background: #7D7676;
	}


	/* shows sublist on hover */

	#nav1 li li:hover ul {
	  display: block;
	  /* shows sub-sublist on hover */
	  margin-left: 100%;
	  /* this should be the same width as the parent list item */
	  margin-top: -35px;
	  /* aligns top of sub menu with top of list item */
			
	}
	
	#nav1 li li li:hover ul {
	  display: block;
	  /* shows sub-sublist on hover */
	  margin-left: 100%;
	  /* this should be the same width as the parent list item */
	  margin-top: -35px;
	  /* aligns top of sub menu with top of list item */
	}
	
	@media screen and (max-width: 750px) {
	  #main-menu {
		display: none;
	  }
	  .burger {
		display: inline-block;
	  }
	}
	
	#div-footer {
		background-color: black;
		width:100%;
	}
	
	#div-footer p {
		color: white;
	}
	
	#div-footer a {
		color: white;
	}
	
	.ez-toc-title{
		font-weight: bold;
	}
	
	#toc {
		text-align: left;
		border: 1px solid #D3D3D3;
		width: fit-content;
		float: right;
		margin: 5px;
		padding: 5px;
	}
	
	#toc a {
	  text-decoration: none;
	  /* this is the width of the menu items */
	  /*line-height: 20px;*/
	  /* this is the hieght of the menu items */
	  color: black;
	  /* list item font color */
	}
	
	#toc a:hover {
		text-decoration: underline;
			
	}
	
	#toc ol {
		
		list-style-type: decimal;
		padding-left: 40px;
	}
	
	#return-to-top {
		position: fixed;
		bottom: 20px;
		right: 20px;
		background: rgb(0, 0, 0);
		background: rgba(0, 0, 0, 0.7);
		width: 50px;
		height: 50px;
		display: block;
		text-decoration: none;
		-webkit-border-radius: 35px;
		-moz-border-radius: 35px;
		border-radius: 35px;
		display: none;
		-webkit-transition: all 0.3s linear;
		-moz-transition: all 0.3s ease;
		-ms-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}
	#return-to-top i {
		color: #fff;
		margin: 0;
		position: relative;
		left: 11px;
		top: 13px;
		font-size: 19px;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-ms-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}
	#return-to-top:hover {
		background: rgba(0, 0, 0, 0.9);
	}
	#return-to-top:hover i {
		color: #fff;
	}
	
	h1 {
		text-align: center;
	}
	
	figure ol {
		
		list-style-type: decimal;
		padding-left: 40px;
		text-align: left;
	}
	
	figure ul {
		
		list-style-type: disk;
		padding-left: 40px;
		text-align: left;
	}
	
	.myHouse {
	  width: 32%;
	  height: 400px;
	  display: inline-block;
	  margin-bottom: 2px;
	  
	}

	/* The block of code below tells the browsers what to do on a screen that has a width of 320px or less */

	@media screen and (max-width: 750px) {
	  
	  .myHouse {
	  width: 90%;
	  display: block; /* Stops it from floating */
	  margin-bottom: 10px; /* Space between the stacked elements */
		
	  }
	 } 
	 
	  
	@media screen and (max-width: 749px) {
	  #upAndDown { display: none; }
	  #sideBySide { display: block; }
	}

	@media screen and (min-width: 750px) {
	  #sideBySide { display: none; }   /* hide it elsewhere */
	  #upAndDown { display: block; }
	}