<div id="about">
			<div class="left">
				<div class="header"><p>about</p></div>
				<div class="bg"></div>
			</div>
			<div class="right">
				<p class="about_text"></p>
				<!-- put button here -->
			</div>
		</div>


		<div id="footer">
			<p id="footer_text">Made for <i class="fa fa-heart"></i></p>
			<p id="social">
				<i class="fa fa-envelope"></i>
 				<i class="fa fa-github"></i>
 				<i class="fa fa-facebook"></i>
 				<i class="fa fa-twitter"></i>
 				<i class="fa fa-paypal"></i>
			</p>
		</div>









html, body {
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	line-height: 0;
}

#about {
	width: 100%;
	height: 800px;
	position: absolute;
}

.header {
	display: table-cell;
	background-color: rgba(255,82,82,0.8);
	height: 110px;
	width: 260px;
	position: absolute;
	top: 0;
	left: 0;
	padding: 0 50px;
	z-index: 10;
}

.header p {
	text-align: center;
	margin: 0;
	font-size: 80px;
	color: #f9f9f9;
	font-family: Montserrat, sans-serif;
	line-height: 110px;
}

.left {
	/*display: table-cell;*/
	position: absolute;
	left: 0;
	top: 0;
	float: left;
	width: 64%;
	height: 100%;
}

.bg {
	background: url("../static/img/aboutpic.svg") 100% 100% no-repeat;
	top: 0;
	left: 0;
	float: left;
	position: absolute;
	width: 100%;
	height: 100%;
}

.right {
	position: absolute;
	right: 0;
	top: 0;
	/*float: left;*/
	width: 50%;
	height: 100%;
	background-color: #ff5555;
}

#footer {
	position: relative;
	background-color: #ff3333;
	width: 100%;
	height: 100px;
}

#footer p {
	font-family: Open Sans, sans-serif;
	font-size: 40px;
	color: #f9f9f9;

}

#footer_text {
	margin: 0 0 0 30px;
	float: left;
	line-height: 100px;
	/*text-align: left;*/
}

#social {
	float: right;
	/*text-align: right;*/
	margin: 0 30px 0 0;
	line-height: 100px;
}

#social i {
	margin: 0 10px 0 10px;
}

@media screen and (max-width: 551px) {

}