html 
{
	font-size: 16px;
	box-sizing: border-box;
}

a
{
	outline: none;
	text-decoration: none;
	color: #2a2a2a;
}

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

*::selection
{
	background: #d6d6d6;
}

::-moz-selection 
{
  background: #d6d6d6;
}

/* Clearfix */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear : both; }
.clearfix { *zoom: 1; }

main
{
	max-width: 1024px;
	margin: 0 auto;
	display: block;
	font-family: 'Open Sans', sans-serif;
	color: #2a2a2a;
}

@media (min-width: 480px)
{
	main
	{
		padding: 18px;
	}
}

@media (min-width: 1072px)
{
	main
	{
		padding: 0;
	}
}

.logo
{
	display: block;
	filter: opacity(1);
	transition: 0.1s filter ease-out;
	margin: 0 auto;
	width: 270px;
}

.logo:hover
{
	filter: opacity(0.7);
	transition: 0.1s filter ease-out;
}

.logo > img
{
	display: block;
	float: left;
	padding-top: 5px;
	width: 50px;
}

.logo .identity
{
	float: left;
	padding-left: 0.8em;
}

.logo .identity .name
{
	font-size: 2em;
	margin-bottom: 0.15em;
}

.logo .identity .title
{
	font-size: 0.9em;
}

header
{
	margin-bottom: 1.5em;
	margin-top: 30px;
}

nav
{
	float: none;
	text-align: center;
	margin-top: 2em;
}

nav > ul > li
{
	display: inline;
}

nav > ul > li > a
{
	display: inline-block;
	text-transform: uppercase;
	font-size: 0.9em;
	color: #2a2a2a;
	text-decoration:none;
	transition: 0.1s color ease-out;
}

nav > ul > li:last-child > a
{
	padding-right: 0;
}

nav > ul > li > a:hover
{
	color: #a581c1;
	transition: 0.1s color ease-out;
}

footer
{
	margin-top: 45px;
	margin-bottom: 25px;
}

@media (min-width: 480px)
{
	.logo
	{
		float: left;
		margin: 0;
		width: 380px;
	}
		
	.logo > img
	{
		padding-top: 5px;
		width: 73px;
	}

	.logo .identity
	{
		padding-left: 1.2em;
	}

	.logo .identity .name
	{
		font-size: 2.7em;
		margin-bottom: 0.15em;
	}

	.logo .identity .title
	{
		font-size: 0.9em;
	}
	
	nav
	{
		float: right;
		margin: 0;
	}
	
	nav > ul > li > a
	{
		font-size: 0.9em;
		padding: 1em 2.5em 1.5em 2.5em;
	}
	
	header
	{
		margin-bottom: 2em;
		margin-top: 15px;
		margin-left: 20px;
		margin-right: 20px;
	}	
	
	footer
	{
		margin-top: 70px;
		margin-bottom: 25px;
	}
}

@media (min-width: 1072px)
{
	header
	{
		margin: 0;
		margin-bottom: 2em;
		margin-top: 50px;
	}
	
	footer
	{
		margin-top: 180px;
		margin-bottom: 25px;
	}
}

.text-link
{
	color: #a581c1;
	transition: 0.1s color ease-out;
}

.text-link:hover
{
	color: #2a2a2a;
	transition: 0.1s color ease-out;
}

.splash
{
	margin: 0 auto;
	padding: 0 2em;
	margin-bottom: 60px;
	margin-top: 30px;
}

.splash-content
{
	margin-top: 40px;
	margin-bottom: 70px;
	max-width: 480px;
}

.splash-content > p
{
	margin-left: 2em;
}

@media (min-width: 480px)
{
	.splash
	{
		max-width: 480px;
		margin-left: 50px;
		margin-bottom: 120px;
		margin-top: 90px;
	}
}

h2
{
	font-size: 2.4em;
	font-style: normal;
	font-weight: 300;
	font-family: 'Zilla Slab', serif;
	color: #a581c1;
	margin-bottom: 0.5em;
	margin-top: 1em;
}

p
{
	font-size: 0.82em;
	line-height: 1.5em;
}

.gallery
{	
}

.gallery-row
{
}

.gallery-item
{
	width: 50%;
	float: left;
	text-align: center;
}

.gallery-item > a
{
	width: 95%;
	display: inline-block;
}

.gallery-item > a > img
{
	filter: opacity(1);
	transition: 0.1s filter ease-out;
	width: 100%;
}

.gallery-item > a:hover > img
{
	filter: opacity(0.7);
	transition: 0.1s filter ease-out;
}

.gallery-item > a > h3
{
	text-align: center;
	text-transform: uppercase;
	font-size: 0.9em;
	padding-top: 0.7em;
	margin-bottom: 2em;
}

@media (min-width: 480px)
{
	.gallery-item
	{
		width: 25%;
	}
}

.social-links
{
	text-align: center;
}

.social-link
{
	width: 30px;
	height: 30px;
	background-size: cover;
	display: inline-block;
	margin: 0 5px 0 5px;
	filter: opacity(0.5);
	transition: 0.1s filter ease-out;
}

.social-link:hover
{
	filter: opacity(1);
	transition: 0.1s filter ease-out;
}

#social-twitter
{
	background-image: url("../media/twitter-logo.png");
}

#social-linkedin
{
	background-image: url("../media/linkedin-logo.png");
}

#social-instagram
{
	background-image: url("../media/instagram-logo.png");
}

.home-button
{
	display: inline-block;
	text-transform: uppercase;
	font-size: 0.9em;
	color: #2a2a2a;
	text-decoration:none;
	margin: 1em 0 1.3em 0;
	transition: 0.1s color ease-out;
}

.home-button:hover
{
	color: #a581c1;
	transition: 0.1s color ease-out;
}

.portfolio
{
	margin-top: 1em;
	margin-bottom: 6em;
}

.portfolio-item
{
	margin-top: 1em;
	margin-bottom: 1em;
	text-align: center;
}

.portfolio-item > img
{
	max-width: 100%;
}

.about
{
	margin: 0 auto;
	margin-top: 50px;
	margin-bottom: 50px;
	padding: 0 1em;
	width: 100%;
}

.info > p
{
	margin-bottom: 1.5em;
}

.info > h4
{
	font-size: 1em;
	margin-top: 1.5em;
	margin-bottom: 1em;
	font-weight: 600;
}

.info > ul
{
	font-size: 0.8em;
}

.info > ul > li
{
	margin-bottom: 0.8em;
}

.color-link
{
	color: #a581c1;
	transition: 0.1s color ease-out;
}

.color-link:hover
{
	color: #2a2a2a;
	transition: 0.1s color ease-out;
}

.avatar
{
	height: 200px;
	width: 200px;
	margin: 0 auto;
	margin-bottom: 40px;
}

.avatar img
{
	border-radius: 50%;
	max-width: 100%;
    max-height: 100%;
}

@media (min-width: 480px)
{
	.about
	{
		width: 450px;
		margin-top: 100px;
	}

	.avatar
	{
		height: 300px;
		width: 300px;
		margin-bottom: 60px;
		transform: translate(-10px, 0);
	}
}

.content-page
{
	margin-top: 1.5em;
	padding: 0 1em;
}

.info
{
	margin-top: 40px;
}

.page-info
{
	font-size: 0.9em;
	line-height: 1.5em;
	margin-bottom: 2em;
	margin-top: 0em;
}

.game-jam-entry
{
	margin-top: 2em;
	margin-bottom: 4em;
}

.game-jam-title
{
	font-weight: 600;
}

.game-jam-info
{
	margin-top: 1.5em;
	margin-bottom: 2em;
	font-size: 1.1em;
}

.game-jam-link
{
	margin-top: 0.5em;
	margin-bottom: 1em;
}

.game-jam-link > a
{
	font-size: 1.1em;
	color: #a581c1;
	transition: 0.1s color ease-out;
	margin-right: 1.5em;
}

.game-jam-link > a:hover
{
	color: #2a2a2a;
	transition: 0.1s color ease-out;
}

@media (min-width: 480px)
{
	.content-page
	{
		margin-top: 1em;
		padding: 0;
	}
	
	.page-info
	{
		margin-top: 1em;
	}
}

.embed-video-wrapper
{	
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	
	margin-top: 2em;
	margin-bottom: 3em;
}

.embed-video-wrapper > iframe 
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}