html {
	background: #7fff;
}

main {
	display: inline-flex;
	flex-flow: row wrap;
	width: 100%;
	align-content: stretch;
}

img.portrait {
	transition-duration: 500ms;
}

div.nav {
	list-style: none;
	text-decoration: none;
}

li a {
	display: inline-block;
	padding: 5px;
	justify-content: flex-start;
	list-style: none;
}

a.nav:hover, a.contact:hover {
	transition-duration: 500ms;
	background: #fffa;
}

a.social:hover {
	background: #fffa;
	border-radius: 20%;
	transition-duration: 500ms;
}

div.about {
	flex-direction: column;
	position: relative;
}

h1.jobtitle {
	float: inline-block;
}

div.contact {
	display: inline-block;
	float: left;
	padding: 5px;
	list-style: none;
	text-decoration: none;
	justify-content: bottom;
}

a.contact, a.social, a.nav {
	transition-duration: 500ms;
}

div.history {
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	padding-left: 40px;
}

div.jobhistory {
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	padding-left: 40px;
}

p.objective:hover, li.skills:hover, li.jobhistory:hover {
	font-size: 18px;
	font-weight: bold;
	transition-duration: 250ms;
}

li.skills, li.jobhistory, p.objective {
	transition-duration: 250ms;
}

div.col-2 {
	border: none;
	height: 100%;
}

a:link, a:visited {
	color: black;
	text-decoration: none;
	list-style: none;
}

a:hover, a:active, a:visited {
	color: black;
}

a.social {
	display: inline-block;
}

@media only screen and (min-width: 720px) {
  /* For desktop: */
  div.col-2 {flex-grow: 1;border-right: 4px solid lightblue;}
  .col-3 {width: 100%;}
  .col-4 {width: 100%;}
  .col-5 {width: 65%;
  	padding-left: 40px;
	list-style: none;}
 main {
	flex-direction: row;
}

img.portrait:hover {
	border-radius: 50%;
	width: 228px;
	height: 228px;
	transition-duration: 500ms;
}
}

@media only screen and (max-width: 720px) {
  div.col-5 {padding-left: 5px;}
	}