@charset "UTF-8";
/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* 
* @include triangle within a pseudo element and add positioning properties (ie. top, left)
* $direction: up, down, left, right
*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, 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;
}

/* This project is under construction. It's not ready for release yet. As of Feb 11, 2019. */
*, ::before, ::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* Switch to border-box for box-sizing. */
/* Immediately jump any animation to the end point if the user has set their device to "prefers reduced motion". */
/* This could create bad, unintended consequences. Remove as needed, and write your own appropriate code for prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  * {
    -webkit-animation-duration: 0.001s !important;
            animation-duration: 0.001s !important;
    -webkit-transition-duration: 0.001s !important;
            transition-duration: 0.001s !important;
  }
}

body {
  margin: 0;
  /* Remove the tiny space around the edge of the page */
}

/* Switch to using rem units for typography. Fix line-height on headlines. */
h1 {
  font-size: 2rem;
  /* Make all H1 large, remove nested-shrinking sizes. */
  margin: 0.67em 0;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.17rem;
}

h4 {
  font-size: 1.00rem;
}

h5 {
  font-size: 0.83rem;
}

h6 {
  font-size: 0.67rem;
}

h2, h3, h4, h5, h6 {
  line-height: 1;
}

/* Improve readability */
p, ul, ol, dl, address {
  line-height: 1.5;
}

pre {
  white-space: pre-wrap;
  /* Overflow by default is bad. */
}

hr {
  border: .5px solid;
}

/* Are browsers now consistent with margin & padding on lists?
  See: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation  */
nav ul {
  list-style: none;
}

img, video, canvas, audio, iframe, embed, object {
  display: block;
  /* Switch display mode to block, since that's what we usually want for images. */
  vertical-align: middle;
  /* If you override, and make an image inline, it's likely you'll want middle vertical alignment. */
}

img, video {
  max-width: 100%;
  /* Make images and video flexible by default. */
  height: auto;
  /* Ensure images and video maintain their aspect ratio when max-width comes into play. */
}

img {
  border-style: none;
  /* Remove the border on images inside links in IE 10 and earlier. */
}

/* In English, when styling the <q> element, use curly quotes instead of straight quotes. */
/* Code for this is now in the quotes.css file */
/* Support upcoming properties that haven't been broadly implemented yet,
   but for which the initial value and legacy behavior is not be the best behavior.
*/
/* Consistent line spacing, which does not unnecessarily grow to accommodate things that would fit anyway */
/* From CSS Inline Layout Module Level 3: https://drafts.csswg.org/css-inline-3/#line-sizing-property */
:root {
  line-sizing: normal;
}

/* Improve spacing of punctuation marks and at script changes in CJK languages */
/* From CSS Text Module Level 4: https://drafts.csswg.org/css-text-4/#text-spacing-property */
:root {
  -ms-text-spacing: trim-start allow-end trim-adjacent ideograph-alpha ideograph-numeric;
      text-spacing: trim-start allow-end trim-adjacent ideograph-alpha ideograph-numeric;
}

/* Apply a natural box layout model to all elements and remove margins and padding */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  overflow-x: hidden;
  height: 100%;
  scroll-behavior: smooth;
}

body {
  background: #DFDDD1 url("../images/beige-texture.png") repeat;
  color: #030303;
  overflow-x: hidden;
  height: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

h2 {
  font-family: 'Raleway', sans-serif;
  font-size: 1.6rem;
  text-shadow: 0 1px 2px #fff;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding: 20px 0;
  background: url("../images/beige-texture.png") repeat;
  position: relative;
}

section:target:before {
  content: '';
  display: block;
  height: 108px;
}

p {
  max-width: 90ch;
  font-family: 'Raleway', sans-serif;
  font-size: 1.2rem;
}

p:not(:last-of-type) {
  margin-bottom: 20px;
}

p a {
  border-bottom: 5px solid orange;
  color: inherit;
  text-decoration: none;
  font-weight: 500;
  -webkit-transition: color 250ms ease, border 250ms ease-in;
  transition: color 250ms ease, border 250ms ease-in;
}

p a:hover {
  color: orange;
  border: 0;
}

strong {
  font-weight: 900;
}

body {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr minmax(320px, 4fr) 1fr;
      grid-template-columns: 1fr minmax(320px, 4fr) 1fr;
  -ms-grid-rows: min-content min-content 1fr min-content min-content;
      grid-template-rows: -webkit-min-content -webkit-min-content 1fr -webkit-min-content -webkit-min-content;
      grid-template-rows: min-content min-content 1fr min-content min-content;
  grid-row-gap: 30px;
}

header, #about, #projects, #plugs, #contact {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
}

header {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2;
}

section {
  height: 100%;
}

#about {
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2 / 3;
}

#projects {
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
  grid-row: 3 / 4;
}

#project-list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(350px, 1fr))[auto-fill];
      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-auto-rows: minmax(260px, -webkit-max-content);
  grid-auto-rows: minmax(260px, max-content);
  grid-gap: 10px;
}

#project-list .featured {
  grid-row: span 2;
}

#project-list .major {
  grid-row: span 2;
}

#project-list .minor {
  grid-row: span 1;
}

#plugs {
  -ms-grid-row: 4;
  -ms-grid-row-span: 1;
  grid-row: 4 / 5;
}

#contact {
  -ms-grid-row: 5;
  -ms-grid-row-span: 1;
  grid-row: 5 / 6;
}

header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 20px 0;
  background: url("../images/beige-texture.png") repeat;
  z-index: 2;
}

header h1 {
  max-width: 150px;
  margin: 0;
  font-family: 'Raleway', serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 1px 2px #fff;
  text-align: left;
}

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

header h1 span {
  color: orange;
  display: block;
}

header nav {
  margin-left: 20px;
}

header nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

header nav ul li:not(:last-of-type) {
  margin-right: 10px;
}

header nav ul a {
  font-family: 'Raleway', sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  -webkit-transition: color 250ms ease, font-size 250ms ease;
  transition: color 250ms ease, font-size 250ms ease;
}

@media (max-width: 560px) {
  header nav ul a {
    font-size: .8rem;
  }
}

header nav ul a:hover {
  color: orange;
}

#about h2 {
  display: none;
}

#about p.large {
  font-size: 2rem;
  line-height: 1;
  max-width: 60ch;
}

#projects {
  font-family: 'Raleway', sans-serif;
  font-size: 1rem;
  position: relative;
}

#projects #project-list {
  margin-top: 20px;
  width: 100%;
}

#projects .project-list-item {
  display: block;
  height: 100%;
}

#projects .project {
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: white;
  color: #E0DED2;
  text-decoration: none;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 30px;
  height: 100%;
  opacity: .9;
}

#projects .project.defunct:hover {
  cursor: not-allowed;
}

#projects .project:hover:before {
  content: attr(data-title);
  position: absolute;
  display: inline-block;
  padding: 20px 30px;
  background: #000;
  color: #fff;
  font-size: 1rem;
  font-family: inherit;
  z-index: 2;
}

#projects .project:after {
  content: '';
  position: absolute;
  top: 50px;
  bottom: 0;
  left: 50px;
  right: 0;
  background-size: cover;
  z-index: -1;
  opacity: .2;
  height: calc(100% - 100px);
  width: calc(100% - 100px);
  -webkit-transition: opacity 500ms ease, z-index 500ms ease, top 250ms ease-in, left 250ms ease-in, height 250ms ease-in, width 250ms ease-in;
  transition: opacity 500ms ease, z-index 500ms ease, top 250ms ease-in, left 250ms ease-in, height 250ms ease-in, width 250ms ease-in;
}

#projects .project h3 {
  font-family: 'Raleway', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
}

#projects .project .light {
  text-shadow: 0 1px 2px #000;
  color: #E0DED2;
}

#projects .project .dark {
  text-shadow: 0 1px 2px #fff;
  color: #030303;
  font-weight: 900;
}

#projects .project:hover:after {
  z-index: 1;
  opacity: 1;
  top: 5px;
  left: 5px;
  height: calc(100% - 10px);
  width: calc(100% - 10px);
}

#projects #aava .project {
  background-color: #009BDF;
  color: black;
}

#projects #aava .project:after {
  background-image: url("/images/aava-usability_audit.png");
}

#projects #aspectum .project {
  background-color: #B53F82;
}

#projects #aspectum .project:after {
  background-image: url("/images/aspectum-wireframe.png");
}

#projects #aw .project {
  background-color: #3c3e3e;
}

#projects #aw .project:after {
  background-image: url("/images/aw-localisation.png");
}

#projects #credita .project {
  background-color: #007E70;
}

#projects #credita .project:after {
  background-image: url("/images/credita-wireframes.png");
}

#projects #eauto .project {
  background-color: #EF7D0F;
}

#projects #eauto .project:after {
  background-image: url("/images/eauto-storyboard.png");
}

#projects #edilex .project {
  background-color: #084076;
}

#projects #edilex .project:after {
  background-image: url("/images/edilex.png");
}

#projects #editads .project {
  background-color: #222;
}

#projects #educare .project {
  background-color: #C63C3C;
}

#projects #educare .project:after {
  background-image: url("/images/educare-visual_design.png");
}

#projects #egate .project {
  background-color: #1184C4;
}

#projects #egate .project:after {
  background-image: url("/images/egate-usability_testing.png");
}

#projects #eski .project {
  background-color: #000099;
}

#projects #eski .project:after {
  background-image: url("/images/eski-administration.png");
}

#projects #etklaki .project {
  background-color: #004274;
}

#projects #etklaki .project:after {
  background-image: url("/images/etklaki-ui_specs.png");
}

#projects #finlex .project {
  background-color: #8CB1CF;
}

#projects #finlex .project:after {
  background-image: url("/images/finlex-visual_design.png");
}

#projects #haaga-helia .project {
  background-color: #0081C9;
}

#projects #haaga-helia .project:after {
  background-image: url("/images/haaga-helia-sitemap.png");
}

#projects #headpower .project {
  background-color: #0083ab;
}

#projects #headpower .project:after {
  background-image: url("/images/headpower.png");
}

#projects #hilma .project {
  background-color: #0066B2;
}

#projects #hilma .project:after {
  background-image: url("/images/hilma.png");
}

#projects #it-kouluttajat .project {
  background-color: #ff6633;
}

#projects #it-kouluttajat .project:after {
  background-image: url("/images/it-kouluttajat-visual_design.png");
}

#projects #kala .project {
  background-color: #4687b5;
}

#projects #kala .project:after {
  background-image: url("/images/kala.png");
}

#projects #keuda .project {
  background-color: #6CA53B;
}

#projects #keuda .project:after {
  background-image: url("/images/keuda-req_meeting.png");
}

#projects #lingsoft .project {
  background-color: #F7B512;
}

#projects #lingsoft .project:after {
  background-image: url("/images/lingsoft-testing_report.png");
}

#projects #lymphatix .project {
  background-color: #52BB58;
}

#projects #lymphatix .project:after {
  background-image: url("/images/lymphatix-visual_design.png");
}

#projects #meconet .project {
  background-color: #00346D;
}

#projects #meconet .project:after {
  background-image: url("/images/meconet-user_journey.png");
}

#projects #oedema .project {
  background-color: #000;
}

#projects #oedema .project:after {
  background-image: url("");
}

#projects #promode .project {
  background-color: #5B5756;
}

#projects #promode .project:after {
  background-image: url("/images/promode-wireframe.png");
}

#projects #ptok .project {
  background-color: #51ab59;
}

#projects #ptok .project:after {
  background-image: url("/images/ptok-interaction_design.png");
}

#projects #references .project {
  background-color: #f39d05;
}

#projects #references .project:after {
  background-image: url("/images/references-wireframe2.png");
}

#projects #sls .project {
  background-color: #1D4B4F;
}

#projects #sls .project:after {
  background-image: url("/images/sls-wireframe2.png");
}

#projects #sytyke .project {
  background-color: #75767A;
}

#projects #sytyke .project:after {
  background-image: url("/images/sytyke-ia.png");
}

#projects #talentum .project {
  background-color: #8DC73F;
}

#projects #talentum .project:after {
  background-image: url("/images/talentum-wireframe2.png");
}

#projects #talous .project {
  background-color: #117996;
}

#projects #talous .project:after {
  background-image: url("/images/talous.png");
}

#projects #tff .project {
  background-color: #E2000F;
}

#projects #tff .project:after {
  background-image: url("/images/tff-sitemap.png");
}

#projects .tags {
  font-family: 'Raleway', sans-serif;
  font-size: .8rem;
  margin-top: 50px;
  text-transform: uppercase;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
}

#projects li.tag {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1;
  margin: 3px 0;
  padding: 5px 8px;
  border-radius: 12px;
  background-color: #E0DED2;
  color: #030303;
}

#projects li.tag:not(:first-of-type) {
  margin-left: 6px;
}

#projects #projects-filtered {
  margin: 20px 0 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

#projects #projects-filtered > p {
  margin-bottom: 20px;
  width: 100%;
  max-width: none;
}

#projects #projects-filtered input {
  display: none;
}

#projects #projects-filtered label {
  border: 0;
  border-radius: 0;
  margin-right: 5px;
  margin-bottom: 5px;
  padding: .5rem 1rem;
  background: #EEE;
  color: #222;
  font-size: .9rem;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
}

#projects #projects-filtered input:checked + label,
#projects #projects-filtered label:hover {
  background-color: orange;
  text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}

#projects li.project-list-item {
  opacity: 0;
  position: absolute;
  left: -20000px;
  -webkit-transition: opacity 500ms ease-in, position 500ms ease-in;
  transition: opacity 500ms ease-in, position 500ms ease-in;
}

#projects input#all:checked ~ ul li.project-list-item.all,
#projects input#rs:checked ~ ul li.project-list-item.rs,
#projects input#audit:checked ~ ul li.project-list-item.audit,
#projects input#ia:checked ~ ul li.project-list-item.ia,
#projects input#id:checked ~ ul li.project-list-item.id,
#projects input#dev:checked ~ ul li.project-list-item.dev,
#projects input#utest:checked ~ ul li.project-list-item.utest,
#projects input#ftest:checked ~ ul li.project-list-item.ftest,
#projects input#analytics:checked ~ ul li.project-list-item.analytics,
#projects input#admin:checked ~ ul li.project-list-item.admin,
#projects input#lang:checked ~ ul li.project-list-item.lang,
#projects input#pm:checked ~ ul li.project-list-item.pm,
#projects input#vd:checked ~ ul li.project-list-item.vd {
  opacity: 1;
  position: static;
  -webkit-transition: opacity 500ms ease-in, position 500ms ease-in;
  transition: opacity 500ms ease-in, position 500ms ease-in;
}

#plugs {
  position: relative;
  font-family: 'Raleway', sans-serif;
}

#plugs ul {
  position: relative;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: repeat(5, 1fr);
  grid-gap: 40px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#plugs ul li {
  height: 100%;
  clear: both;
}

#plugs #plug-jari {
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-column: 1 / span 3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / span 1;
  position: relative;
}

#plugs #plug-jari div {
  float: right;
  shape-outside: circle(50%);
  width: 80px;
  height: 80px;
}

#plugs #plug-jari blockquote:after {
  content: '"';
  font-family: 'Palanquin Dark', sans-serif;
  font-size: 10rem;
  position: absolute;
  top: -60px;
  right: 0;
}

#plugs #plug-aga {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / span 1;
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  grid-row: 2 / span 2;
}

@media (max-width: 779px) {
  #plugs #plug-aga {
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-column: 1 / span 3;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2 / span 1;
  }
}

#plugs #plug-jussi {
  -ms-grid-column: 2;
  -ms-grid-column-span: 2;
  grid-column: 2 / span 2;
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  grid-row: 2 / span 2;
}

@media (max-width: 779px) {
  #plugs #plug-jussi {
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-column: 1 / span 3;
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    grid-row: 3 / span 1;
  }
}

#plugs #plug-sami {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / span 2;
  -ms-grid-row: 4;
  -ms-grid-row-span: 3;
  grid-row: 4 / span 3;
}

@media (max-width: 779px) {
  #plugs #plug-sami {
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-column: 1 / span 3;
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    grid-row: 4 / span 1;
  }
}

#plugs #plug-tomi {
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-column: 3 / span 1;
  -ms-grid-row: 4;
  -ms-grid-row-span: 2;
  grid-row: 4 / span 2;
}

@media (max-width: 779px) {
  #plugs #plug-tomi {
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-column: 1 / span 3;
    -ms-grid-row: 5;
    -ms-grid-row-span: 1;
    grid-row: 5 / span 1;
  }
}

#plugs blockquote {
  color: #030303;
  font-size: 1.2rem;
}

#plugs blockquote p {
  margin-top: 10px;
  margin-left: 20px;
  position: relative;
}

#plugs blockquote p:before {
  content: "–";
  position: absolute;
  left: -20px;
}
/*# sourceMappingURL=screen.css.map */