@font-face {
  font-family: "Inria Sans";
  font-style: normal;
  font-weight: 300;
  src: url("../assets/InriaSans-Light.woff") format("woff"); }

@font-face {
  font-family: "Inria Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/InriaSans-Regular.woff") format("woff"); }

@font-face {
  font-family: "Inria Sans";
  font-style: normal;
  font-weight: bold;
  src: url("../assets/InriaSans-Bold.woff") format("woff"); }

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

img,
svg {
  border: none;
  display: block; }

input,
textarea,
select,
button {
  background-color: transparent;
  border: none;
  border-radius: 0;
  display: inline-block;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
  outline: none;
  padding: 0;
  -moz-appearance: none;
  -webkit-appearance: none; }

figure {
  margin: 0; }

fieldset {
  border: none;
  margin: 0;
  padding: 0; }

body {
  background-color: white;
  color: #222;
  font: 300 normal 1em/1.4 "Inria Sans", 'Helvetica Neue', Arial, sans-serif;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: none;
  -webkit-touch-callout: none;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: auto;
  -webkit-font-smoothing: subpixel-antialiased;
  -ms-content-zooming: none; }

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

.field {
  margin: 1.25rem 0; }
  .field[data-label]::before,
  .field label {
    content: attr(data-label);
    display: block;
    color: gray;
    font-size: 1rem;
    font-weight: bold;
    line-height: 2; }
  .public .field[data-label]::before {
    display: none; }
    
.form input,
.form select,
.form textarea,
.form [contenteditable] {
  background: transparent;
  -webkit-box-shadow: inset 0 0 0 1px gray;
  box-shadow: inset 0 0 0 1px gray;
  border: none;
  display: block;
  font-size: 1.375rem;
  line-height: 1.36364em;
  margin: 0;
  outline: none;
  padding: 0.45455em 0.68182em;
  width: 100%;
  -webkit-appearance: none; }
  .form input:focus,
  .form select:focus,
  .form textarea:focus,
  .form [contenteditable]:focus {
    -webkit-box-shadow: inset 0 0 0 1px black;
    box-shadow: inset 0 0 0 1px black; }

.form input[type="submit"] {
  background-color: #222;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: white; 
  }


.grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .grid > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%; }
  .grid > .split {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%; }
  @media (min-width: 760px) {
    .grid > * {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
      flex: 0 0 50%; }
    .grid > .split {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 25%;
      flex: 0 0 25%; } }

.text-medium {
  font-size: 1.25em; }
  .text-medium span {
    font-size: inherit !important; }

.header {
  min-height: 50vw; }
  .header .left {
    background: transparent url("../photos/photo-1487266659293-c4762f375955.jpg") center/cover no-repeat; }
  .header > * {
    padding: 1.25em;
    position: relative; }
  .header .right {
    -ms-flex-item-align: end;
    align-self: flex-end; }
  .header .logo {
    margin-top: 5em;
    max-width: 7.5em; }
    @media (min-width: 760px) {
      .header .logo {
        max-width: 10em;
        margin: 0; } }
  @media (min-width: 760px) {
    .header > * {
      padding: 5em; }
    .header .right {
      padding-bottom: 2.5em; } }
      
.header .left a {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}      

.filter {
  height: 80px;
  overflow: hidden; }
  .filter .filters {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 1.25em 0;
    min-height: 160px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    padding: 0 0.625em; }
    .filter .filters li {
      list-style: none; }
      .filter .filters li:first-child {
        margin-left: auto; }
      .filter .filters li:last-child {
        margin-right: auto; }
    .filter .filters a {
      display: block;
      line-height: 2.5em;
      padding: 0 0.625em;
      text-transform: uppercase;
      white-space: nowrap; }

.items {
  background-color: #efeeec;
  overflow: hidden;
  position: relative; }
  .items .arrow-left,
  .items .arrow-right {
    background-color: white;
    border-radius: 50%;
    cursor: pointer;
    font-size: 3.75em;
    opacity: 1;
    line-height: 1.1;
    position: absolute;
    top: 50%;
    text-align: center;
    -webkit-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
    -webkit-transform: translate3d(0%, -50%, 0);
    transform: translate3d(0%, -50%, 0);
    visibility: visible;
    height: 0.75em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 0.75em;
    z-index: 10; }
    .items .arrow-left.hidden,
    .items .arrow-right.hidden {
      opacity: 0;
      visibility: hidden; }
    .items .arrow-left.disabled,
    .items .arrow-right.disabled {
      pointer-events: none; }
  .items .arrow-left {
    left: 1.25rem; }
    .items .arrow-left.hidden {
      -webkit-transform: translate3d(-100%, -50%, 0);
      transform: translate3d(-100%, -50%, 0); }
  .items .arrow-right {
    right: 1.25rem; }
    .items .arrow-right.hidden {
      -webkit-transform: translate3d(100%, -50%, 0);
      transform: translate3d(100%, -50%, 0); }
  .items .carousel {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none; }
    .items .carousel::-webkit-scrollbar {
      width: 0 !important; }

.carousel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0; }
  .carousel .item {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -ms-flex-line-pack: end;
    align-content: flex-end;
    background: transparent -webkit-gradient(linear, left bottom, left top, from(white), to(white)) left top/1px 100% no-repeat;
    background: transparent -webkit-linear-gradient(bottom, white, white) left top/1px 100% no-repeat;
    background: transparent -o-linear-gradient(bottom, white, white) left top/1px 100% no-repeat;
    background: transparent linear-gradient(to top, white, white) left top/1px 100% no-repeat;
    -webkit-box-shadow: inset 0 -2px 0 0 rgba(255, 255, 255, 0);
    box-shadow: inset 0 -2px 0 0 rgba(255, 255, 255, 0);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    padding: 2.5em 1.25em;
    position: relative;
    -webkit-transition: -webkit-box-shadow 100ms;
    transition: -webkit-box-shadow 100ms;
    -o-transition: box-shadow 100ms;
    transition: box-shadow 100ms;
    transition: box-shadow 100ms, -webkit-box-shadow 100ms; }
    .carousel .item:before {
      content: attr(data-tootekood);
      display: block;
      font-weight: bold;
      opacity: 0;
      position: absolute;
      top: 0.625em;
      -webkit-transition: opacity 200ms;
      -o-transition: opacity 200ms;
      transition: opacity 200ms;
      right: 1.25em; }
    .carousel .item:last-child {
      margin-right: auto; }
    .carousel .item.hidden {
      display: none; }
    .carousel .item:hover {
      -webkit-box-shadow: inset 0 -2px 0 0 #bbb;
      box-shadow: inset 0 -2px 0 0 #bbb; }
      .carousel .item:hover:before {
        opacity: 1; }
    .carousel .item.current {
      -webkit-box-shadow: inset 0 -2px 0 0 black;
      box-shadow: inset 0 -2px 0 0 black; }
      .carousel .item.current:before {
        opacity: 1; }
  .carousel img {
    margin-top: auto; }

section.item {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#efeeec), to(#ccc));
  background-image: -webkit-linear-gradient(top, #efeeec, #ccc);
  background-image: -o-linear-gradient(top, #efeeec, #ccc);
  background-image: linear-gradient(to bottom, #efeeec, #ccc);
  height: 100vw;
  overflow: hidden;
  position: relative; }
  @media (min-width: 760px) {
    section.item {
      height: 75vw; } }
  @media (min-width: 960px) {
    section.item {
      height: 55vw; } }
  section.item figure {
    background: transparent none center / 0px 0px no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0; }
    section.item figure[data-joonis] {
      z-index: 10; }
      section.item figure[data-joonis] img {
        opacity: 0; }
      section.item figure[data-joonis]:after {
        background-color: white;
        background-position: center;
        background-repeat: no-repeat;
        background-image: inherit;
        background-size: contain;
        -webkit-box-shadow: 0 0 0 2.5em white;
        box-shadow: 0 0 0 2.5em white;
        content: '';
        position: absolute;
        top: 2.5em;
        left: 2.5em;
        bottom: 5em;
        right: 2.5em; }
    section.item figure img {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transition: opacity 300ms;
      -o-transition: opacity 300ms;
      transition: opacity 300ms;
      -webkit-transform: translate3d(-50%, -40%, 0);
      transform: translate3d(-50%, -40%, 0);
      width: 100%;
      max-width: 100%; }
  section.item h1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.875em;
    font-weight: normal;
    line-height: 1;
    position: absolute;
    bottom: 0.66667em;
    left: 0.66667em;
    margin: 0; }
    section.item h1 span {
      margin-right: 0.5em; }
      section.item h1 span::after,
      section.item h1 span span {
        content: attr(data-label);
        display: block;
        line-height: 1.4;
        text-transform: uppercase;
        font-size: 0.53333em; }
    @media (min-width: 760px) {
      section.item h1 {
        font-size: 3.75em;
        bottom: 0.33333em;
        left: 0.33333em; }
        section.item h1 span::after,
        section.item h1 span span {
          margin-right: 0.66667em;
          font-size: 0.26667em; } }
    @media (min-width: 960px) {
      section.item h1 {
        font-size: 5em;
        bottom: 0.5em;
        left: 0.5em; }
        section.item h1 span::after,
        section.item h1 span span {
          margin-right: 0.5em;
          font-size: 0.2em; } }
  section.item .versions {
    margin: 0;
    padding: 0;
    position: absolute;
    text-align: right;
    top: 1.25em;
    right: 1.25em;
    z-index: 20; }
    section.item .versions li {
      cursor: pointer;
      list-style: none;
      white-space: nowrap;
      line-height: 1.5625em;
      text-transform: uppercase; }
      section.item .versions li:last-child {
        margin-top: 1.5625em; }
      section.item .versions li.current {
        font-weight: bold; }
    @media (min-width: 960px) {
      section.item .versions {
        top: 2.5em;
        right: 2.5em; }
        section.item .versions li {
          line-height: 1.875em; }
          section.item .versions li:last-child {
            margin-top: 1.875em; } }

.terms > *,
.footer > * {
  padding: 1.25em; }

@media (min-width: 960px) {
  .terms > *,
  .footer > * {
    padding: 2.5em; } }

.footer {
  background-color: #efeeec; }

#map {
  position: relative; }
  #map:before {
    content: '';
    display: block;
    padding-top: 56.25%; }


.article {
  margin: 1em auto;
  max-width: 48em;
  padding: 1.25em;
}

a.button {
  align-items: center;
  box-shadow: inset 0 0 0 1px;
  display: flex;
  justify-content: space-between;
  line-height: 3rem;
  margin: 1rem 0;
  padding: 0 1.25rem;
}
a.button:after {
  content: '→';
  display: block;
  margin-left: .5rem;
}