* {
	text-align: center;
	font-family: Segoe UI, sans-serif;
	color: #1F1E1B;
}
body {
	background: linear-gradient(180deg,rgba(108, 197, 163, 1) 0%, rgba(223, 215, 147, 1) 100%);
	margin: 0;
}
h1 {
	font-size: 48px;
}
#banner {
	position: fixed;
	width: 100%;
	background: linear-gradient(180deg,rgba(31, 30, 27, 1) 0%, rgba(31, 30, 27, 1) 50%, rgba(31, 30, 27, 0) 51%, rgba(31, 30, 27, 0) 100%);
	z-index: 1;
}
img#sig {
	width: 74px;
	margin: 0 auto;
	transition: 0.3s;
	border: 10px solid #1F1E25;
	border-radius: 74px;
}
div#header {
	width: 100%;
	margin: 0 auto 40px auto;
	padding: 100px 0 0 0;
	background: #FEFEFE;
	font-size: 20px; 
}
div#header hr {
	border: 1px solid #262626;
	border-radius: 1px;
	width: 520px;
	margin: 0 auto 25px auto;
}
div#header p#creed {
	box-sizing: border-box;
	width: 1040px;
	font-style: italic;
	border: 2px solid #1F1E1B;
	margin: 30px auto 60px auto;
	padding: 20px 60px;
}
div#header a#resume {
	display: block;
	background: #E8C6BB;
	height: 49px;
	padding: 0;
	font-size: 20px;
	font-weight: bold;
	text-decoration: none;
	color: #1F1E25;
	transition: 0.3s;
}
div#header a#resume p {
	position: relative;
	top: -8px;
}
div#header a#resume p span {
	position: relative;
	top: 4px;
	font-size: 36px;
}
div#header a#resume:hover {
	background: #E0A491;
}
div.section {
	width: 100%;
	height: 49px;
	margin: 30px auto;
	background: linear-gradient(90deg,rgba(46, 45, 40, 1) 33%, rgba(46, 45, 40, 0) 50%);
}
div.section h2	{
	width: 1040px;
	margin: 0 auto;
	padding: 5px 0 0 40px;
	text-align: left;
	font-size: 28px;
	color: #FEFEFE;
}
div#works, div#layouts {
	width: 1040px;
	margin: 0 auto;
	padding: 0 0 0 0;
}
a.tile {
	display: inline-block;
	float: left;
	width: 500px;
	height: 350px;
	margin: 10px;
	background-size: 480px;
	text-decoration: none;
	box-sizing: border-box;
	background-position: center top;
	transition: 0.3s;
	border: 10px solid #2E2D28;
}
a.tile:hover {
	transform: scale(1.02);
}
div#works:after, div#layouts:after {
	content: "";
	clear: both;
	display: table;
}
a.tile h3 {
	margin-top: 275px;
	color: #FEFEFE;
}
a.tile p {
	margin-top: -15px;
	font-style: italic;
	color: #FEFEFE;
}
div#footer {
	width: 100%;
	height: 49px;
	background: #1F1E1B;
}
div#footer p {
	margin: 40px 0 0 0;
	padding: 13px 0 0 0;
	color: #FEFEFE;
}
a#trafficmonitor {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/projectthumb/trafficmonitor_thumb.PNG');
}
a#tactile2 {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/projectthumb/tactile2_thumb.PNG');
}
a#twin {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/projectthumb/twin_thumb.PNG');
}
a#change {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/projectthumb/change_thumb.jpg');
}
a#tactile1 {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/projectthumb/tactile1_thumb.PNG');
}
a#lightrail {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/projectthumb/lightrail_thumb.jpg');
}
a#traffic {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/projectthumb/traffic_thumb.PNG');
}
a#historic {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/projectthumb/historic_thumb.PNG');
}
a#rs_5 {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/layoutthumb/rs_5_thumb.PNG');
}
a#rs_4 {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/layoutthumb/rs_4_thumb.PNG');
}
a#rs_3 {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/layoutthumb/rs_3_thumb.PNG');
}
a#rs_2 {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/layoutthumb/rs_2_thumb.PNG');
}
a#rs_1 {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/layoutthumb/rs_1_thumb.PNG');
}
a#md2_5 {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/layoutthumb/md2_5_thumb.PNG');
}
a#md2_4 {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/layoutthumb/md2_4_thumb.PNG');
}
a#md1_5 {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/layoutthumb/md1_5_thumb.PNG');
}
a#md1_4 {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/layoutthumb/md1_4_thumb.PNG');
}
a#cart_4-3 {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/layoutthumb/cart_4-3_thumb.PNG');
}
a#cart_4-2 {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/layoutthumb/cart_4-2_thumb.PNG');
}
a#cart_4-1 {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/layoutthumb/cart_4-1_thumb.PNG');
}
a#gisa_6-3 {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/layoutthumb/gisa_6-3_thumb.PNG');
}
a#gisa_6-2 {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/layoutthumb/gisa_6-2_thumb.PNG');
}
a#gisa_6-1 {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/layoutthumb/gisa_6-1_thumb.PNG');
}
a#gisa_5 {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/layoutthumb/gisa_5_thumb.PNG');
}
a#gisa_4 {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/layoutthumb/gisa_4_thumb.PNG');
}
a#gisa_3 {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/layoutthumb/gisa_3_thumb.PNG');
}
a#gisa_2 {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/layoutthumb/gisa_2_thumb.PNG');
}
a#gisa_ica2 {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/layoutthumb/gisa_ica2_thumb.PNG');
}
a#gisa_1 {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/layoutthumb/gisa_1_thumb.PNG');
}
a#igis_7 {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/layoutthumb/igis_7_thumb.PNG');
}
a#igis_6 {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/layoutthumb/igis_6_thumb.PNG');
}
a#igis_5 {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/layoutthumb/igis_5_thumb.PNG');
}
a#igis_4 {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/layoutthumb/igis_4_thumb.PNG');
}
a#igis_3-3 {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/layoutthumb/igis_3-3_thumb.PNG');
}
a#igis_3-2 {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/layoutthumb/igis_3-2_thumb.PNG');
}
a#igis_3-1 {
	background-image: linear-gradient(0deg,rgba(46, 45, 40, 1) 0%, rgba(46, 45, 40, 1) 20%, rgba(46, 45, 40, 0) 30%, rgba(46, 45, 40, 0) 100%), url('../images/layoutthumb/igis_3-1_thumb.PNG');
}
@media (max-width: 1300px)  {
	body {
		background-size: 1000px;
	}
	h1 {
		font-size: 58pt;
	}
	div#header {
		padding: 220px 0 0 0;
		margin: 0 auto 60px auto;
	}
	div#header hr {
		border: 2px solid #1F1E1B;
		width: 800px;
		margin-bottom: 55px;
	}
	div#header p#creed {
		width: 800px;
		margin: 60px auto 80px auto;
		padding: 40px 60px;
		border: 4px solid #1F1E1B;
	}
	img#sig {
		width: 150px;
		margin: 0 auto;
		border: 20px solid #1F1E25;
		border-radius: 95px;
	}
	div#header a#resume {
		height: 97px;
		font-size: 40px;
	}
	div#header a#resume p {
		top: -16px;
		margin: 0;
	}
	div#header a#resume p span {
		top: 0px;
		font-size: 72px;
	}
	div.section {
		height: 97px;
		margin: 60px auto;
		background: linear-gradient(90deg,rgba(46, 45, 40, 1) 33%, rgba(46, 45, 40, 0) 80%);
	}
	div.section h2 {
		width: 800px;
		font-size: 36pt;
		margin: 0 auto;
		padding: 17px 0 0 60px;
	}
	div#works, div#layouts, div#footer {
		width: 100%;
	}
	a.tile {
		display: block;
		float: none;
		width: 800px;
		height: 560px;
		margin: 40px auto;
		background-size: 750px;
		border: 20px solid #2E2D28;
	}
	a.tile h3 {
		font-size: 28pt;
		margin-top: 425px;
	}
	a.tile p {
		font-size: 24pt;
		margin-top: -35px;
	}
	div#footer {
		height: 97px;
	}
	div#footer p {
		margin: 40px 0 0 0;
		padding: 28px 0 0 0;
		font-size: 24pt;
	}
}