/*Page Styling*/

/*Header Navigation Bar Styling*/

	.mobileheader, .tabletheader {
		top: 0;
		position: sticky;
		position: -webkit-sticky;
		box-sizing: border-box;
		background-color: #D3F5D8;
		width: 100%;
	}

	.headerlogo {
		float:inline-start;
	}
	.headerlink a {
		color: black;
	}
	.headerlink a:hover {
		border-radius: 5px;
		background-color: #36454F;
		color: white;
	}
	.headerlink a.active {
		border-radius: 5px;
		background-color: #36454F;
		color: white;
	}

	@media only screen and (max-width: 600px) {
	  .headerrow {overflow: hidden; position: relative; background-color: #D3F5D8;}
	  .headerrow #myLinks {display: none; background-color: grey;}
	  .headerrow a {color: white; padding: 5px; text-decoration: none; font-size: 18px; display: inline-block;}
	  .headerrow a.MenuIcon {display: block; position: absolute; right: 0; top: 0;}
	  .headerimg {max-height: 40px;}
	  .headerlink a {font-size: 18px; padding-top: 10px; padding-bottom: 10px;}
	  .bar1, .bar2, .bar3 {width: 35px; height: 5px; background-color:black; margin: 6px 0; transition: 0.4s;}
	  .change .bar1 {transform: translate(0, 11px) rotate(-45deg);}
	  .change .bar2 {opacity: 0;}
	  .change .bar3 {transform: translate(0, -11px) rotate(45deg);}
	}

	@media only screen and (min-width: 600px) {
	  .tabletheader {padding: 10px; height: 75px; align-content: center;}
	  .headerrow {display: flex; justify-content: center; align-items:center;}
	  .headerlogo {width:30%}
	  .headerimg {max-width: 100%;}
	  .headerlink {width:14%; float:inline-start; text-align: center;}
	  .headerlink a {font-size: 22px;}
	}

	@media only screen and (min-width: 800px) {
	  .tabletheader {padding: 15px; height: 100px; align-content: center;}
	  .headerrow {display: flex; justify-content: center; align-items:center;}
	  .headerlogo {width:40%}
	  .headerimg {max-width: 100%;}
	  .headerlink {width:12%; float:inline-start; text-align: center;}
	  .headerlink a {font-size: 25px;}
	}

/*Body Styling*/

	body {
		box-sizing: border-box;
		margin: auto;
		max-width: 1024px;
		font-family: Helvetica;
		background-color: #EFEFEF;
		color: black;
		overflow-y: scroll;
	}

	@media only screen and (max-width: 600px) {
	  h1 {font-size: 18px; color: black; padding-left: 5px; padding-right: 5px;}
	  p {font-size: 18px; color: black; padding-left: 5px; padding-right: 5px;}
	  li {font-size: 18px; color:black; padding-left: 5px; padding-right: 5px;}
	}
	@media only screen and (min-width: 600px) {
	  h1 {font-size: 22px; color: black; padding-left: 10px; padding-right: 10px;}
	  p {font-size: 22px; color: black; padding-left: 10px; padding-right: 10px;}
	  li {font-size: 22px; color: black; padding-left: 10px; padding-right: 10px;}
	}
	@media only screen and (min-width: 800px) {
	  h1 {font-size: 25px; color: Black; padding-left: 15px; padding-right: 15px;}	 
	  p {font-size: 25px; color: black; padding-left: 15px; padding-right: 15px;}
	  li {font-size: 25px; color: black; padding-left: 15px; padding-right: 15px;}	  
	}

	.page-container {
		position: relative;
		min-height: 100vh;
	}

/*Footer Styling*/
    .footer {
		box-sizing :border-box;
		font-family: Helvetica;
		background-color: #E7E6E6;
		width: 100%;
	}

	@media only screen and (max-width: 600px) {
	  .pfooter {font-size: 8px;}
	  .left {width: 40%}
	  .middle {width: 20%}
	  .middle_left, .middle_right {width: 50%}
	  .right {width: 40%}
	  .footersubrow {padding-left: 5px; padding-right: 5px;}
	}
	@media only screen and (min-width: 600px) {
	  .pfooter {font-size: 11px;}
	  .left {width: 35%}
	  .middle {width: 30%}	
	  .middle_left, .middle_right {width: 50%}
	  .right {width: 35%}
	  .footersubrow {padding-left: 10px; padding-right: 10px;}
	}
	@media only screen and (min-width: 800px) {
	  .pfooter {font-size: 15px;}
	  .left {width: 30%}
	  .middle {width: 40%}
	  .middle_left, .middle_right {width: 50%}
	  .right {width: 30%}
	  .footersubrow {padding-left: 15px; padding-right: 15px;}
	}

	.footerrow {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.footercolumn {
		float:inline-start;
	}

	.left {
		box-sizing :border-box;
	}

	.middle {
		box-sizing :border-box;
		display: flex;
		justify-content: center;	
	}

	.right {
		box-sizing :border-box;
	}

	.footersubrow {
		display: flex;
		justify-content: center;
		align-items: center;
	}