html, body, div, span, applet, object, iframe,
h2, h3, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* for IE/Mac */
.clearfix {
  display: inline-block;
}

/* Styles */
body {
  background: #fff;
  border-right: 0;
  border-left: 0;
  border-bottom: 0;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
	font-weight: 300;
	line-height: 1.3em;
  margin: 0px auto 150px;
  width: 920px;
  vertical-align: top;
}

strong {
  font-weight: 600;
}

.hometext strong {
	display: inline-block;
	margin-bottom: 4px;
}

em {
  font-style: italic;
}

.home strong {
  display: inline-block;
}

.home a {
  color: #000;
  line-height: 24px;
  text-decoration: none;
  display: inline-block;
}

:root {
  --mainColor: #000;
}

a {
  color: inherit;
  text-decoration: none;
}

a.photo, a.photo:hover {
	background: none;
}

a {
	background: linear-gradient( to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) ), linear-gradient( to right, rgb(200 0 86), rgb(255 116 0), rgb(255 169 0) );
    background-size: 100% 2px, 0 2px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size 300ms;
    margin-bottom: 1px;
}

a:hover {
  background-size: 0 1px, 100% 2px;
}

li {
  color: #333;
  list-style-type: disc;
  margin: 0 0 4px 0;
}

h1 {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  margin: 0 0 5px 0;
}

h2 {
  font-size: 30px;
  font-weight: 100;
  line-height: 36px;
  grid-column: span 2;
}

h2.intro {
  margin: 0 0 30px 0;
  grid-column: span 3;
}

p.intro {
  font-size: 16px;
  line-height: 24px;
}

h2.project {
	font-size: 24px;
  font-weight: 600;
  line-height: 34px;
  margin-bottom: 0;
}

h4.project {
	font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  margin-bottom: 4px;
}

h3 {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  margin: 0 0 4px;
}

.metrics h3 {
	margin: 0 0 6px;
}

h3.intro {
  margin: 40px 0 15px;
}

.pcm {
  margin: 8px 0;
}

p {
  color: #333;
  font-size: 16px;
  line-height: 22px;
  margin-bottom: 16px;
}

header {
  display: block;
  font-size: 16px;
  line-height: 18px;
  margin: 40px 0 60px;
	padding: 0 20px;
}

.title {
	display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  grid-column: span 2;
  margin-top: 4px;
	vertical-align: top;
}

.profile-photo {
	display: inline-block;
	width: 44px;
	margin-right: 4px;
}

.projectlink {
  font-size: 18px;
  line-height: 24px;
}

nav {
  align-self: end;
  justify-self: end;
}

nav a {
  text-align: right;
  font-weight: 500;
}

main {
  margin-top: 40px;
	padding: 0 20px;
}

article {
  line-height: 20px;
}

.grid, .home {
	display: flow-root;
  grid-row-gap: 0;
  grid-column-gap: 50px;
  grid-template-columns: 1fr;
  background: #f8f8f8;
  padding: 16px;
  border-radius: 8px;
	font-size: 14px;
	margin: 12px 0;
}

.metrics {
	display: inline-grid;
	grid-template-columns: 275px 175px 175px 175px;
  grid-gap: 8px;
	background: #f8f8f8;
	padding: 16px;
	border-radius: 8px;
	grid-column: span 4;
}

.question {
	display: flow-root;
  grid-template-columns: 1fr;
	font-size: 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid #eee;
}

.question p {
	margin-bottom: 0;
}

.pos {
  color: #3bae1f;
	font-weight: bold;
}

.neg {
  color: #ff4242;
	font-weight: bold;
}

.center {
	display: grid;
  border-radius: 8px;
  text-align: center;
  align-items: center;
}

.last {
	border-bottom: 0;
	padding-bottom: 0;
}

.grid2 {
  display: -ms-grid;
  display: grid;
  grid-row-gap: 25px;
  grid-column-gap: 90px;
  grid-template-columns: 1fr 1fr;
}

.grid3 {
  display: -ms-grid;
  display: grid;
  grid-row-gap: 20px;
  grid-column-gap: 40px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
	margin-bottom: 20px;
}

.hpcard {
  grid-template-columns: 1fr;
	padding: 20px 20px 6px 20px;
  border: 1px solid #ddd;
  border-radius: 16px;
}

.grid3 .fullw, .grid3 h2 {
  grid-column: span 4;
}

.grid3 .fullw p {
  grid-column: span 2;
}

.caption-image {
  grid-column: span 3;
	margin-bottom: 20px;
}

.caption-image img {
	border: 1px solid #f6f6f6;
}

.noborder img {
	border: 0;
}

.caption-image ul li {
  margin-left: 15px;
  font-size: 16px;
  line-height: 24px;
}

.caption-image li {
  margin-bottom: 15px;
}

.caption-image ul li.aboutlist {
	margin-bottom: 6px;
}

.caption strong {
  display: inline-block;
  line-height: 20px;
  margin-bottom: 3px;
}

.caption p {
  margin-bottom: 20px;
}

.start {
  grid-column: 1 / 2;
}

.halfw {
	grid-column: span 2;
}

.fullw {
  grid-column: span 4;
}

.fullw li {
  margin: 0 0 12px 16px;
}

.project-title {
	line-height: 1.3em;
}

.subtext {
  display: inline-block;
  font-size: 14px;
  line-height: 20px;
  margin: 8px 0 0 0;
}

img {
  border-radius: 5px;
  max-width: 100%;
}

.classeOfMyImage{
 background: url('http://dummyimage.com/100x100/000/fff');
}
.classeOfMyImage:hover {
 background: url('https://media.tenor.com/images/1fe5b893dd6eb6905c4efabb103e6281/tenor.gif');
}

.textblock {
  grid-column: span 2;
}

.icon {
  font-size: 22px;
  margin-right: 5px;
  position: relative;
  top: 3px;
}

p.about-links {
  margin-bottom: 10px;
}

.back:before {
    background-color: #000;
    content: "";
    display: block;
    height: 5px;
    margin: 30px 0;
    width: 25px;
}

.nostylelink, .nostylelink a:hover {
  text-decoration: none;
  border: 0;
  background: none;
  display: block;
}

@media (max-width: 768px) {
  h1 {
    margin: 0 0 5px 0;
  }
  header {
    grid-template-columns: 1fr;
    grid-row-gap: 25px;
  }

  .home {
    grid-template-columns: 1fr;
  }

  nav a {
    display: inline-block;
    margin: 0 20px;
  }
}

@media (max-width: 480px) {
  body {
    padding: 20px;
		width: auto;
  }

  a {
    padding-bottom: 1px;
  }

  h1 {
    font-size: 24px;
    font-weight: 600;
    line-height: 40px;
    margin: 0 0 0 0;
  }

	.title {
		line-height: 20px;
	}

.grid {
	margin: 0;
	padding: 12px;
	width: 100%;
}

.question {
	grid-column: span 1;
}

.metrics {
	overflow: auto;
}

.home a {
  line-height: 20px;
}

.home {
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 40px;
  }

  .subtext {
    margin: 0 0 10px 0;
  }

  .homethumb {
    margin-right: 15px;
  }

  header,  article .start, h2, .grid3, .caption, .grid, .fullw, .caption-image {
    grid-template-columns: 1fr;
    grid-row-gap: 15px;
  }

	.caption-image {
		grid-column: span 4;
	}

  section, section.start {
    grid-column: span 3;
  }

  h2 {
    font-size: 32px;
    font-weight: 300;
    line-height: 38px;
    margin: 0 0 20px 0;
    grid-column: span 1;
  }

  section li {
    margin: 0 0 8px 18px;
  }
}