/*
	Author: Jonathan Lum
	Date Modified: 6/4/2017
	File Name: about.css
	
	Brief Description: This is the stylesheet for the about page on the JonEl Media website
*/

    body, html {
        height: 100%;
        background-color: #3b3b3b;
    }

/* temporary fix for page-content */
#page-content { width: auto; height: 100%; }

/* CSS for Desktop 451px and > width */
@media all and (min-width: 451px) {

	#about-content {
		margin: 0 auto;
		border: none;
//border: 1px solid green;
		padding: 0 0 200px 0;
		overflow: hidden;
	}
	#about-content header{
		margin: 0;
border: 1px solid white;
		padding: 0;
		height: 90px;
background-color: grey;
	}
	#about-content header h1 {
		margin: 0;
		border: none;
//border: 1px solid yellow;
		padding: 20px 0;
		color: #FFF;
		text-align: center;
		font-size: 2em;
	}
	#portrait {
		margin: 0;
		border: none;
//border: 1px solid blue;
		padding: 75px 0 20px 0;
		width: 35%;
		float: left;
		height: 500px;
	}
	#portrait img {
		margin: 0 auto;
border: 2px solid #FFF;
		padding: 0;
		width: 400px;
		display: block;
	}
	#about-info {
		margin: 0;
		border: none;
//border: 1px solid green;
		padding: 20px 2% 20px 2%;
		width: 60%;
		color: #FFFFFF;
		float: right;
		height: 500px;
	}
	#about-info h2 {
		margin: 0;
		border: none;
//border: 1px solid yellow;
		padding: 0;
		color: #FFFFFF;
		text-align: center;
	}
	#about-info p {
		margin: 20px 0 20px 0;
		border: none;
//border: 1px solid green;
		padding: 0;
	}
	#linkedin-button {
		height: 50px;
		vertical-align: middle;
	}
	
} 
/* End CSS for Desktop */

/* CSS for Mobile 450px < width */
@media all and (max-width: 450px) {
	
	#about-content {
		margin: 0;
		border: none;
//border: 1px solid green;
		padding: 0 0 100px 0;
	}
	#about-content header{
		margin: 0;
border: 1px solid white;
		padding: 0;
		height: 50px;
background-color: grey;
	}
	#about-content header h1 {
		margin: 0;
		border: none;
//border: 1px solid yellow;
		padding: 0;
		color: #FFF;
		text-align: center;
		font-size: 2em;
	}
	#portrait {
		margin: 0;
		border: none;
//border: 1px solid blue;
		padding: 10px 0 10px 0;
		width: 100%;
	}
	#portrait img {
		margin: 0 auto;
border: 2px solid #FFF;
		padding: 0;
		width: 90%;
		display: block;
	}
	#about-info {
		margin: 0 auto;
		border: none;
//border: 1px solid green;
		padding: 0;
		width: 95%;
		color: #FFFFFF;
	}
	#about-info h2 {
		margin: 0;
		border: none;
//border: 1px solid yellow;
		padding: 0;
		color: #FFFFFF;
		text-align: center;
	}
	#about-info p {
		margin: 0 auto;
		margin-bottom: 20px;
		border: none;
//border: 1px solid green;
		padding: 10px 0 0 0;
		width: 100%;
		text-align: justify;
	}
	#linkedin-button {
		height: 30px;
		vertical-align: middle;
	}
	
}
/* End CSS for Mobile */