/*! Handmade by http://esmes.fi */
/*=== RESET */
*,
::before,
::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

html {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

input,
textarea {
  border: 0;
  border-radius: 0;
  font: inherit;
}

button,
[type="button"],
[type="reset"],
[type="submit"],
[role="button"] {
  cursor: pointer;
}

/* HTML5 for old-ie */
article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

template {
  display: none;
}

::-moz-selection,
mark {
  background: color(alt-bg);
  color: color(fg);
}

::selection,
mark {
  background: color(alt-bg);
  color: color(fg);
}

address,
button,
input,
optgroup,
select,
textarea {
  font: inherit;
}

a img {
  border-style: none;
}

/* Responsive SVG */
img[src*='.svg'] {
  width: 100%;
  height: auto;
}

html {
  font-size: 16px;
}

body {
  font-family: 'Untitled-Serif';
/*  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.4); */
}

h1, h2, u {
  font-weight: normal;
  font-family: 'Untitled-Sans';
}

.root {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.floater {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
}

.floater.floater--top {
  padding-top: 2.5rem;
  top: 0;
}

.floater.floater--middle {
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 15;
}

.floater.floater--bottom {
  padding-bottom: 0.9375rem;
  bottom: 0;
}

.prop {
  position: absolute;
  -webkit-transform: translate(-50%, -50%) scale(0.5);
      -ms-transform: translate(-50%, -50%) scale(0.5);
          transform: translate(-50%, -50%) scale(0.5);
  z-index: 1;
  font-size: 0;
}

.prop img {
  opacity: 0;
  outline: 1px solid rgba(0, 0, 0, 0.1);
  max-width: 1000px;
  max-height: 1000px;
}

.prop img:-moz-broken {
  display: none;
}

.prop img.loaded {
  opacity: 1;
}

.prop.hide img, .prop.hide img.loaded {
  opacity: 0;
}

[role="do-magic"] {
  display: inline-block;
  cursor: pointer;
  position: relative;
}

[role="do-magic"].initial::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  -webkit-transform: translate(-50%, -50%) scale(1);
      -ms-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  background: url("../svg/squiggle.svg") no-repeat 50% 50%;
  background-size: contain;
  z-index: -1;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

[role="do-magic"].initial:hover::before {
  -webkit-transform: translate(-50%, -50%) scale(0.97);
      -ms-transform: translate(-50%, -50%) scale(0.97);
          transform: translate(-50%, -50%) scale(0.97);
}

.floater {
  line-height: 1.875rem;
}

.floater u {
  display: inline-block;
  position: relative;
  text-decoration: none;
  margin-bottom: 0.3125rem;
}

.floater u::after {
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 2px;
  content: '';
  border-bottom: 1px solid #000;
}

.floater h1 {
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-size: 2.625rem;
  margin-bottom: 1.875rem;
  padding: 0 2.5rem;
}

.floater h1 img {
  height: 2.625rem;
  width: auto;
}

.floater h2 {
  font-size: 1.375rem;
}

.floater .contact {
  display: inline-block;
  vertical-align: top;
  margin-bottom: 1.5625rem;
  padding: 0 2.5rem;
}

.floater .clients {
  width: 90%;
  margin: 0 auto;
  line-height: 1.5rem;
  margin-bottom: 1.5625rem;
}

a {
  color: #000;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

span.sep {
  display: inline-block;
  padding: 0 0.5rem;
}

@media (max-width: 750px) {
  html {
    font-size: 14.4px;
  }
}

@media (max-width: 500px) {
  html {
    font-size: 12.8px;
  }
}

@media (max-width: 650px) {
  .floater.floater--middle {
    top: 42%;
  }
  .prop {
    -webkit-transform: translate(-50%, -50%) scale(0.3);
        -ms-transform: translate(-50%, -50%) scale(0.3);
            transform: translate(-50%, -50%) scale(0.3);
  }
}

/* Oletus: mobiili → ei rivinvaihtoa */
.desktop-break {
  display: none;
}

/* Desktop */
@media (min-width: 601px) {
  .desktop-break {
    display: inline;
  }
}

/*# sourceMappingURL=main.css.map */