@import url('https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500');

body{
	font-family: 'Fira Sans', sans-serif;
	font-size:14px;	
	color:#444849;
	margin:0;
	padding:0;
	font-weight: 300;
}

a{
	color:#444849;
	font-weight: 500;
}

/* jay-z: main wrapper for the whole website 
	
	As of December 2014, Jay-Z sold 55 million studio albums worldwide
	
*/
#jay-z{
	margin: 0 auto;
}
/* end jay-z */


#profile{
	display: flex;
	margin:10px 30px;
}

#profile #sidebar{
	width:20%;
	min-width:200px;
	max-width:200px;
	margin-right:2%;
	border-right:1px solid #f5f6f6;
	padding-right:2%;
}

#profile #sidebar .title{
	font-weight: 500;
	margin-bottom:10px;
}

#profile #sidebar #quick-bio{
	font-size:1rem;
}

#profile #sidebar #my-name-is{
	font-weight:500;
	font-size:1.25rem;
	margin-bottom:20px;	
}

#profile #sidebar #quick-links{
	
}

#profile #sidebar #quick-links ul{
	list-style: none;
	margin:0;
	padding:0;	
	margin-bottom:10px;
}

#profile #sidebar #quick-links ul li{
	margin:0;
	padding:0;
	line-height:2rem;
	-webkit-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
	   -moz-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
	     -o-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
	        transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */

}

#profile #sidebar #quick-links ul li i{
	margin-right:10px;
}


#profile #sidebar #quick-links ul li:hover{
	padding-left:5px;
}

#profile #sidebar #quick-links a{
	font-weight: 400;
	text-decoration: none;
}


#profile #main-content{
	
	
}

img#profile-picture{
	width:100%;
	border-radius:5%;
	margin-bottom:20px;
}


#main-content{
	
}

.main-section{
	
}

.main-section .title{
	font-weight: 500;
	font-size:1.1rem;
}

#main-content #im-a-maker #projects{
}

#main-content #im-a-maker #projects .project{
	display: flex;	
	width:100%;
	margin-bottom:20px;
}

#main-content #im-a-maker #projects .project-image{
	width:20%;
	margin-right:2%;
}

#main-content #im-a-maker #projects .project-image img{
	width:100%;
	border-radius:5%;
	
}

#main-content #im-a-maker #projects .project-image a.visit{
	display: block;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	padding:3%;	
	border-radius: 5%;
	width:75%;
	margin:10px auto;
	-webkit-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
	   -moz-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
	     -o-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
	        transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
	
}

#main-content #im-a-maker #projects .project-image a.visit:hover{
	padding-left:15px;
}

#main-content #im-a-maker #projects .project-image .project-launch-date{
	font-weight:500;
	
}

#main-content #im-a-maker #projects .project-info{
	width:50%;
}

#main-content #im-a-maker #projects .project-info .title{
	margin-bottom:10px;
}


.grouped:after {
  content: "";
  display: table;
  clear: both;
}


/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

	#profile{
		display: block;
		width:95vw;
		margin:0;
		padding:0;
		margin:10px auto;
	}

	#profile #sidebar{
		width:100%;
		margin:0;
		padding:0;
		margin:0 auto;
		min-width:100%;
		max-width:100%;
	}
	
	img#profile-picture{
		width:100%;
		max-width:250px;
		margin-bottom:20px;
	}	
	
	#main-content #im-a-maker #projects .project-image{
		width:30%;
		margin-right:2%;
	}	
	
	#main-content #im-a-maker #projects .project-info{
		width:65%;
	}	


}