@font-face {
  font-family: Montserrat;
  src: url(font/Montserrat-Regular.ttf);
}
@font-face {
  font-family: MontserratBlack;
  src: url(font/Montserrat-SemiBold.ttf);
}
body{
	font-family: MontserratBlack, sans-serif;
	line-height: 1.7;
	margin: 0 auto;
	background: #e3e3e3;
}
p{
	font-family: Montserrat, sans-serif;
}
#header{
	border-bottom:1px solid #999999;
	padding:20px;
	border-top:1px solid #999999;
	display:flex;
	text-align:center;
	justify-content: space-between;
	align-items: center;
	background: #FFFFFF;
}
#header p{
	word-spacing: 1em;
	color:#3d3d3b
}
.contact{
	border-top: 1px solid #e3e3e3;
	padding-top:1em;
}
.contact a{
	text-decoration:none;
	padding:1vh;
}
.flex-item{
	flex: 100%;
    height: 100%;
}
.flex-item p{
	margin-left:1em;
	margin-right:1em;
}
.flex-item a{
	margin-bottom:10px;
	padding:1vh;
}
#projects{ 
	display:flex;
	justify-content: space-evenly;
	text-align:center;
	align-content: center;
	flex-wrap: wrap;
	flex-direction: row;
	margin-bottom: 4em;
	padding-bottom: 4em;
}
#projects h3{
	padding-top:20px;
	padding-bottom:20px;
}
#projects img{
	border: 1px solid #555;
	margin-bottom: 1em;
}
a:link{
	color: #3d3d3b;
}
a:visited{
	color: #3d3d3b;
	text-decoration: none;
}
a:hover{
	background: #909090;
	color: #FFFFFF;
}
.footer {
	border-top:1px solid #999999;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	text-align:center;
	background: #FFFFFF;
	padding-top:1em;
}
.footer h5{
	margin-top: 4px;
	margin-bottom: 4px;
}
@media (max-width: 950px) {
	
	#header{
		flex-direction: column;
		width:100%;
		padding:0px;
	}
	.flex-item img{
		width:300px;
	}
	.flex-item p{
		padding-left: 3em;
		padding-right: 3em;
	}
}