/* Keep footer at bottom */
		* {
			box-sizing: border-box;
		}

		*:before,
		*:after {
			box-sizing: border-box; 
		}

		html,
		body {
			height: 100%;
			position: relative; 
			margin: 0;
			font-family: Helvetica, sans-serif;
			background-color: #f4f4f4;
		}


		.main-container {
			min-height: 100vh;
			overflow: hidden;
			display: block;
			position: relative;
			padding-bottom: 100px; 
		}

		footer {
			position: absolute;
			bottom: 0;
			width: 100%; 
			text-align: center;
		}

		a {
		  color: #fff;
		}

		/* header */

		.header {
			background-color: #147523;
			box-shadow: 1px 1px 4px 0 rgba(0,0,0,.3);
			position: fixed;
			width: 100%;
			z-index: 3;
			opacity: 0.9;
		}

		.header ul {
			margin: 0;
			padding: 0;
			list-style: none;
			overflow: hidden;
			background-color: #147523;
			opacity: 0.9;
		}

		.header li a {
			display: block;
			padding: 20px 20px;
			border-right: 1px solid #265e2c;
			text-decoration: none;
		}

		.header li a:hover,
		.header .menu-btn:hover {
			background-color: #265e2c;
			color: #fff;
			font-weight: 800;
		}

		.header .logo {
			display: block;
			float: left;
			font-size: 2em;
			padding: 10px 20px;
			text-decoration: none;
			color: #fff;
		}

		/* menu */

		.header .menu {
			clear: both;
			max-height: 0;
			transition: max-height .2s ease-out;
		}

		/* menu icon */

		.header .menu-icon {
			color: #fff;
			cursor: pointer;
			display: inline-block;
			float: right;
			padding: 28px 20px;
			position: relative;
			user-select: none;
		}

		.header .menu-icon .navicon {
			background: #fff;
			display: block;
			height: 2px;
			position: relative;
			transition: background .2s ease-out;
			width: 18px;
		}

		.header .menu-icon .navicon:before,
		.header .menu-icon .navicon:after {
			background: #fff;
			content: '';
			display: block;
			height: 100%;
			position: absolute;
			transition: all .2s ease-out;
			width: 100%;
		}

		.header .menu-icon .navicon:before {
			top: 5px;
		}

		.header .menu-icon .navicon:after {
			top: -5px;
		}

		/* menu btn */

		.header .menu-btn {
			display: none;
		}

		.header .menu-btn:checked ~ .menu {
			max-height: 340px;
		}

		.header .menu-btn:checked ~ .menu-icon .navicon {
			background: transparent;
		}

		.header .menu-btn:checked ~ .menu-icon .navicon:before {
			transform: rotate(-45deg);
		}

		.header .menu-btn:checked ~ .menu-icon .navicon:after {
			transform: rotate(45deg);
		}

		.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
		.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
			top: 0;
		}

		#p1 {
			
			text-align: left;
			position: relative;
			padding: 30px;
			display: inline-block;
			float: right;
		}
		
		#p2 {
			
			text-align: center;
			position: relative;
			padding: 10px;
			display: inline-block;
		}
		
		.clearfix {
			overflow: auto;
		}
		
		.responsive {
		  max-width: 100%;
		  height: auto;
		}
		
		.img1 {
			float: right;
		}
		
		/* 48em = 768px */

		@media (min-width: 48em) {
			.header li {
				float: left;
			}
			.header li a {
				padding: 20px 30px;
			}
			.header .menu {
				clear: none;
				float: right;
				max-height: none;
			}
			.header .menu-icon {
				display: none;
			}
		}