/* fixel.me - (c) 2016 Felix Beuster */

/* resets */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, acronym, address, code, del, dfn,
em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label,
legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;}
body {
  line-height: 1.6;}
table {
  border-collapse: separate;
  border-spacing: 0;}
caption, th, td {
  text-align: left;
  font-weight: normal;}
table, td, th {
  vertical-align: middle;}
blockquote:before, blockquote:after,
q:before, q:after {
  content:"";}
blockquote, q {
  quotes:"" "";}
a img {
  border: none;}


/* layout */

body {
  background: #191f1f;
  color: #f3f9f9;
  font-family: Calibri, Helvetica, Tahoma, Arial, sans-serif;
  height: 100%;
  line-height: 1.6;
  width: 100%;
}

.col {
  margin: 0 auto;
  width: 75%;
}

.row a {
  color: #0ea86c;
  text-decoration: none;
}

.row a:hover {
  text-decoration: underline;
}

.row.header {
  margin: 0 3em 2em 3em;
  padding-top: 4em;
}

.row.header h1 {
  font-weight: normal;
  line-height: 1;
}

.row.header h1 a {
  color: #f3f9f9;
}

.row.header h1 a:hover {
  text-decoration: none;
}

.row.projects {
  overflow: hidden;
  padding: 2em 0;
}

.row.projects:nth-child(2) {
  border-top: 3px solid #0ea86c;
}

.row.projects h2 {
  border-bottom: 1px solid #0ea86c;
  font-weight: normal;
  margin: 0 0 1em 0;
}

.row.projects .project {
  color: #f3f9f9;
  display: block;
  float: left;
  font-size: 1.1em;
  height: 200px;
  opacity: 0.85;
  overflow: hidden;
  transition: all 0.350s;
  width: 50%;
}

.row.projects .project.full_width,
.row.projects .project:nth-child(even):last-child {
  width: 100%;
}

.row.projects .project:hover {
  opacity: 1;
}

.row.projects .apps {
  background: url(../images/apps.jpg) no-repeat bottom center;
}

.row.projects .blender {
  background: url(../images/blender.jpg) no-repeat bottom center;
}

.row.projects .blog {
  background: url(../images/blog.jpg) no-repeat bottom center;
}

.row.projects .defender833 {
  background: url(../images/defender833.jpg) no-repeat bottom center;
}

.row.projects .github {
  background: url(../images/github.jpg) no-repeat bottom center;
}

.row.projects .json {
  background: url(../images/json.jpg) no-repeat bottom center;
}

.row.projects .koytekconsulting {
  background: url(../images/koytekconsulting.jpg) no-repeat bottom center;
}

.row.projects .photos {
  background: url(../images/photos.jpg) no-repeat bottom center;
}

.row.projects .shades {
  background: url(../images/shades.jpg) no-repeat bottom center;
}

.row.projects .project a {
  color: #f3f9f9;
  display: block;
  font-size: 1.6em;
  height: 100%;
  margin-top: -100%;
  opacity: 0;
  text-align: center;
  text-decoration: none;
  transition: all 0.350s;
  width: 100%;
}

.row.projects .project:hover a,
.row.projects .project a:hover {
  margin-top: 0;
  opacity: 0.85;
}

.row.projects .project a span {
  background: #0ea86c;
  display: block;
  height: 100%;
  line-height: 200px;
  margin: 0 auto;
  max-width: 750px;
  opacity: 1;
  padding: 0;
  width: 100%;
}

.row.projects ol {
  margin-left: 2em;
}

.row.projects ol li:not(:last-child) {
  margin-bottom: 0.5em;
}

.row.projects p {
  margin: 1em 0;
}

.row.about {
  -webkit-filter: grayscale(25%);
  filter: grayscale(25%);
  font-weight: normal;
  margin: 1em 0;
  opacity: 0.85;
  padding-top: 2em;
  transition: all 0.350s;
}

.row.about:hover {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
  opacity: 1;
}

.row.about h2 {
  border-bottom: 1px solid #0ea86c;
  margin: 0 0 1em 0;
}

.row.about .wrap {
  background: #f3f9f9;
  overflow: hidden;
}

.row.about .image {
  float: left;
  width: 21%;
}

.row.about .image img {
  display: block;
  margin: 1.5em 0 0 2em;
  width: 100%;
}

.row.about .text {
  float: left;
  width: 79%
}

.row.about p {
  color: #191f1f;
  margin: 1.5em 2em 1.5em 4em;
  overflow: hidden;
}

.row.about p:first-child {
  margin-bottom: 0;
}

.row.about .social {
  overflow: hidden;
  width: 100%;
}

.row.about .social a {
  color: #f3f9f9;
  display: block;
  float: left;
  font-size: 1.15em;
  font-weight: bold;
  height: 100%;
  padding: 0.3em 0;
  text-align: center;
  text-decoration: none;
  width: 25%;
}

.row.about .social a:hover {
  text-decoration: underline;
}

.row.about .social .instagram {
  background: #3f729b;
}

.row.about .social .twitter {
  background: #55acee;
}

.row.about .social .twitch {
  background: #a970ff;
}

.row.about .social .youtube {
  background: #cd201f;
}

.row.copy {
  border-top: 3px solid #0ea86c;
  margin-top: 2em;
  padding: 2em;
  text-align: center;
}

/** cookie **/
.eu_cookie_notifier {
  background: #0ea86c;
  box-shadow: 0 0 10px #333333;
  color: #f3f9f9;
  display: none;
  padding: 1.5em 0;
  position: absolute;
  text-align: center;
  bottom: 0;
  width: 100%;
}

.eu_cookie_notifier a {
  color: #f3f9f9;
  text-decoration: underline;
}

.eu_cookie_notifier a:hover {
  color: #191f1f;
}

.eu_cookie_notifier span:last-child {
  background: #f3f9f9;
  border: 0;
  color: #191f1f;
  cursor: pointer;
  font-weight: bold;
  margin-left: 1.5em;
  padding: 0.5em 1em;
}

.eu_cookie_notifier span:last-child:hover {
  background: #191f1f;
  border: 0;
  color: #f3f9f9;
}