body {
	font-family: Roboto, Tahoma, sans-serif;
	height: 100%;
	margin: 0;
	width: auto !important;
	max-width: 100%;
	background-color:white;
}

.header {
	display:flex;
	justify-content:space-between;
	position:fixed;
	height:90px;
	width:80%;
	padding-left:10%;
	padding-right:10%;
	top: 0;
	z-index: 100;
	background-color:rgba(252, 252, 252);
	box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.15);
}

.nav {
	padding-top:35px;
	word-spacing:60px;
	font-size:18px;
}
@media (max-width: 750px) {
	.header{	
		padding-left:2%;
		padding-right:5%;
		width:93%;
	}
}

.wrapper{
	margin-top:200px;
	min-height: 100%;
	min-width:500px;
	max-width:80%;
	margin:auto;
}

.title{
	max-width:720px;
	padding-top:20px;
	margin-bottom:60px;
}
@media (max-width: 750px) {
	.wrapper{
	}
	.title{
		width:435px;
		margin-bottom:60px;
	}
}

.button {
	background-color: #ffffff; 
	border:solid;
	border-width: 2px;
	border-color:#59AEC5;
	color: #59AEC5;
	padding: 15px 50px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin-right:20px;
	transition: 0.3s;
	transition-property:color,background-color;
}

.about{
	display:flex;
	width:100%;
	margin-top:135px;
}
#profilepic {
	width:450px;
	height:500px; 
}

.aboutme{
	width: 50%;
	padding:0px 50px 0px 50px;
}

@media (max-width: 750px) {
	.about{
		flex-wrap:wrap;
	}
	.aboutme{
		width:100%;
		padding-left:20px;
	}
	.button {
		width:80%;
		margin-bottom:20px;
		
	}
	#profilepic {
		overflow:hidden;
		object-fit:cover;
		object-position:50% 0%;
		width:450px;
		height:200px;
	}
}

.work {
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	padding-top:10px;
}

.worksamples {
	display:flex;
	flex-direction: column;
	position:relative;
	width:390px;
	border-style:solid;
	border-width:1px;
	border-color:#cccccc;
	margin-bottom:50px;
	-webkit-transform: translate(0, 5px);
	-webkit-transition: -webkit-transform 0.5s ease;
	-moz-transform: translate(0, 5px);
	-moz-transition: -moz-transform 0.5s ease;
	transition: -webkit-transform 0.5s ease, box-shadow 0.5s ease;
	box-shadow: 0 10px 15px rgba(0,0,0,0);
}

.worksamples:hover{
	transform: translateY(-10px);
	transition-property:top;
	-webkit-transform: translate(0, -5px);
	-webkit-transition: -webkit-transform 0.5s ease;
	-moz-transform: translate(0, -5px);
	-moz-transition: -moz-transform 0.5s ease;
	transition: -webkit-transform 0.5s ease, box-shadow 0.5s ease;
	box-shadow: 0 10px 15px rgba(0,0,0,0.2);
}

.thumbnail {
	overflow:hidden;
	width:390px;
	height:250px;
	object-fit:contain;
}

.desc {
	display:flex;
	align-items:flex-start;
	flex-direction:column;
	width:360px;
	height:165px;
	padding: 0px 10px 0px 20px;
	background-color:#F5F5F5;
}

.filtertags{
	align-self:flex-end;
}
@media (max-width: 1280px) {
	.worksamples {
		width:480px;
	}
	.thumbnail {
		width:480px;
		height:220px;
		background-color:#cccccc;
	}
	.desc {
		width:440px;
		height:200px;
		padding: 20px 20px 0px 20px;
		background-color:#F5F5F5;
	}
}
@media (max-width: 750px) {
	.thumbnail {
		width:480px;
		height:220px;
		background-color:#cccccc;
	}
	.desc {
		width:440px;
		height:200px;
		padding: 20px 20px 0px 20px;
		background-color:#F5F5F5;
	}
}

.footer{
	position:bottom;
	text-align:center;
	margin-bottom:20px;
}

h1 {
	font-size: 64px;
	margin-bottom:20px;
}

h2 {
	font-size: 22px;
	margin-bottom:-5px;
}

h3{
	font-size:24px;
	font-weight:normal;
	padding-bottom:10px;
}

h4 {
	color:#59AEC5;
	font-size:13px;
	font-weight:normal;
	margin-top:-10px;
	margin-bottom:-5px;
}

p {
	font-size:14px;
	letter-spacing:.5px;
	line-height:18px;
}

.blue {
	color:#59AEC5;
}
.tag {
	background-color:#F5F5F5;
	color:#59AEC5;
	font-size:13px;
	border-radius:15px;
	border:solid;
	border-width:1px;
	border-color:#59AEC5;
	padding:3px 7px;
	margin-left:5px;
}
.link {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

/*ALL THE LINK STYLING BELOW THIS LINE*/

.nav a:link {
	text-decoration:none;
	color:#000000;
	transition: 0.3s;
	transition-property:color,background-color;
}
.nav a:visited {
	text-decoration:none;
	color:#000000;
}

.nav a:hover{
	color:#59AEC5;
	transition: 0.3s;
	transition-property:color;
}

.title a:link {
	text-decoration:none;
}
.title a:hover{
	color:#ffffff;
	background-color:#59AEC5;
	transition: 0.3s;
	transition-property:color,background-color;
}
.aboutme a:link {
	text-decoration:none;
}
.aboutme a:hover{
	color:#ffffff;
	background-color:#59AEC5;
	transition: 0.3s;
	transition-property:color,background-color;
}