/*normalize.css v2.1.0 | MIT License | git.io/normalize */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block;
}

audio, canvas, video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden] {
  display: none;
}

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  overflow: auto; /*scrollibaarit näkyviin*/
}

body {
  margin: 0;
}

a:focus {
  outline: thin dotted;
}

a:active, a:hover {
  outline: 0;
}

h1 {
  font-size: 2em;
  margin: .67em 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b, strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

mark {
  background: #ff0;
  color: #000;
}

code, kbd, pre, samp {
  font-family: monospace,serif;
  font-size: 1em;
}

pre {
  white-space: pre-wrap;
}

q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 0;
  max-width: 100%;
}

.form_radios,
.form_checkboxes,
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: .35em .625em .75em;
}

.form_row h3,
legend {
  border: 0;
  padding: 0;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}

button, input {
  line-height: normal;
}

button, select {
  text-transform: none;
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled], html input[disabled] {
  cursor: default;
}

input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

/* Overthrow CSS:
Enable overflow: auto on elements with overthrow class when html element has overthrow class too */
.overthrow-enabled .overthrow {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/*  ===================
    Global
    ===================  */
    html {
      background-image: url(../images/tampere-bg.gif);
      background-color: white;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      tap-highlight-color: rgba(0, 0, 0, 0);
      color: #444444;
      font-family: "Open Sans", "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
      font-size: 0.875em;
      line-height: 1.57143;
      overflow-y: scroll;
    }

    body {
      background: url(../images/tampere-vohveli-huge.png) -500px -395px no-repeat fixed transparent;
    }

    @media all and (min-width: 48em) {
      body {
        background-position: 200px -375px;
      }
    }
    /*  Paragraph  */
    p {
      margin-top: 0;
    }

    b, strong {
      font-weight: bold;
    }

    /*  Small text  */
    /*  Base margin-bottom  */
    hgroup,
    blockquote, address,
    table, p,
    fieldset, figure,
    pre {
      margin-bottom: 1.57143em;
    }

    /*  Links & selection  */
    a {
      color: #d1443d;
      text-decoration: none;
    }
    a:hover,
    a:hover .icon-arrow-right {
      color: #444444;
    }
    a:focus {
      outline: 0;
    }

    ::-moz-selection,
    ::selection {
      background: #d1443d;
      color: #fff;
      text-shadow: none;
    }

    /*  Horizontal ruler */
    hr {
      clear: both;
      display: block;
      height: 1px;
      border: 0;
      border-top: 1px solid #e0edef;
      padding: 0;
      margin-top: 0;
      margin: 0 0 1.57143em 0;
    }

/*  ===================
    Forms
    * Basic form settings
    ===================  */
    /*  Global form settings  */
    input[type=text],
    input[type=email],
    input[type=url],
    input[type=password],
    input[type=submit],
    textarea {
      color: #9dc6cc;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-color: #fff;
      background-color: #f1f7f8;
      border-radius: 4px;
      border: 0;
      border: 1px solid #e0edef;
      border-top: 1px solid #cfe3e6;
      border-left: 1px solid #cfe3e6;
      line-height: 1.3;
      margin: 0 0 1.57143em;
      outline: 0;
      padding: 0.39286em 0;
      width: 100%;
      text-indent: 6px;
    }
    input[type=text]:-moz-placeholder,
    input[type=email]:-moz-placeholder,
    input[type=url]:-moz-placeholder,
    input[type=password]:-moz-placeholder,
    input[type=submit]:-moz-placeholder,
    textarea:-moz-placeholder {
      color: #9dc6cc;
    }
    input[type=text]::-webkit-input-placeholder,
    input[type=email]::-webkit-input-placeholder,
    input[type=url]::-webkit-input-placeholder,
    input[type=password]::-webkit-input-placeholder,
    input[type=submit]::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder {
      color: #9dc6cc;
    }
    input[type=text]:focus,
    input[type=email]:focus,
    input[type=url]:focus,
    input[type=password]:focus,
    input[type=submit]:focus,
    textarea:focus {
      background: #fff;
      color: #444444;
    }

    textarea {
      min-height: 150px;
      max-width: 100%;
    }

    .main-content #cal-pick-wrapper {
      width: 100%;
    }

    .main-content input.cal-pick {
      width: 36%;
      margin-right: 1%;
      vertical-align: top;
    }

/*  ===================
    Tables
    ===================  */
    table {
      margin: 0;
      border-collapse: collapse;
    }

    .TableBlock {
        clear: both;
    }

	.TableBlock table,
    [path='tampere/komponentti/taulukko'] table {
        margin-bottom: 1.57143em;
    }
    td, th {
      font-size: 1em;
      border: 1px solid #d1443d;
      padding: .78571em .78571em;
    }

    th {
      background-color: #d1443d;
      color: #fff;
    }
    th a, th a:hover {
      border-color: #fff !important;
      color: #fff !important;
    }

    td {
      border-color: #bed9de;
    }

/*  ===================
    Images & embeds
    ===================  */
    embed, object, iframe {
      max-width: 100% !important;
      margin-bottom: 1.57143em;
    }

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

/*  ===================
    Print etc.
    ===================  */
    @media print {
      * {
        background: transparent !important;
        color: black !important;
        text-shadow: none !important;
        filter: none !important;
        -ms-filter: none !important;
      }

      a, a:visited {
        text-decoration: underline;
      }

      a[href]:after {
        content: " (" attr(href) ")";
      }

      abbr[title]:after {
        content: " (" attr(title) ")";
      }

      .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
        content: "";
      }

      pre, blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
      }

      thead {
        display: table-header-group;
      }

      tr, img {
        page-break-inside: avoid;
      }

      img {
        max-width: 100% !important;
      }

      @page {
        margin: 0.5cm;
      }

      p, h2, h3 {
        orphans: 3;
        widows: 3;
      }

      h2, h3 {
        page-break-after: avoid;
      }
    }
/*  ===================
    Global classes
    * extended & for use in html
    ===================  */
    /*  Clearfix  */
    .cf, .nav, .list li, .list-icons, .header-primary, .header-nav-section, .search-primary, .page, .container, .main-content, .breadcrumb, .sidebar, .footer, .footer-primary-last, .component-blog, .component-lift, .component-rating, .form-large .search-form-float, .element-img, .pagination, .service-index ul, .grid-item, .component, .grid-item-inner {
      *zoom: 1;
    }
    .meta-text.author, .cf:before, .nav:before, .list li:before, .list-icons:before, .header-primary:before, .header-nav-section:before, .search-primary:before, .page:before, .container:before, .main-content:before, .breadcrumb:before, .sidebar:before, .footer:before, .footer-primary-last:before, .component-blog:before, .component-lift:before, .component-rating:before, .form-large .search-form-float:before, .element-img:before, .pagination:before, .service-index ul:before, .grid-item:before, .component:before, .grid-item-inner:before, .cf:after, .nav:after, .list li:after, .list-icons:after, .header-primary:after, .header-nav-section:after, .search-primary:after, .page:after, .container:after, .main-content:after, .breadcrumb:after, .sidebar:after, .footer:after, .footer-primary-last:after, .component-blog:after, .component-lift:after, .component-rating:after, .form-large .search-form-float:after, .element-img:after, .pagination:after, .service-index ul:after, .grid-item:after, .component:after, .grid-item-inner:after {
      content: "";
      display: table;
    }
    .cf:after, .nav:after, .list li:after, .list-icons:after, .header-primary:after, .header-nav-section:after, .search-primary:after, .page:after, .container:after, .main-content:after, .breadcrumb:after, .sidebar:after, .footer:after, .footer-primary-last:after, .component-blog:after, .component-lift:after, .component-rating:after, .form-large .search-form-float:after, .element-img:after, .pagination:after, .service-index ul:after, .grid-item:after, .component:after, .grid-item-inner:after {
      clear: both;
    }

    /*  Display & spacing */
    .block {
      display: block;
    }

    .block-spacing {
      margin-bottom: 1.57143em !important;
    }

    /*  Expander classes  */
    .expand {
      cursor: pointer;
    }
    .expand .icon-arrow-down, .expand .icon-calendar {
      color: #d1443d;
    }
    .expand.open .icon-arrow-down:before {
      content: "\2191";
      /*  .icon-arrow-up */
    }

    .js .expand-content {
      display: none;
    }

    /*  Colors classes  */
    .color-brand {
      color: #d1443d;
    }

    .color-white {
      color: #fff;
    }

    .content a:visited,
    .links-basic a:visited {
      color: #007f83;
    }

    .content a:hover,
    .links-basic a:hover {
      color: #d1443d;
    }


/*  Backface visibility
    * Prevent flickering in iOS during transitions
    * Added via .js  */
    .backface-visibility {
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      -o-backface-visibility: hidden;
      backface-visibility: hidden;
    }

/*  ===================
    Event classes
    ===================  */
    /*  All ransformed/transitioned/animated classes  */
    .animate .header-nav-section
    , .animate .search-primary
    , .page.animate
    , .aside-primary.animate {
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }

    .js.csstransforms {
  /*  Header
      CSS Transforms
      * Transitions with translate are much faster
      * These settings include some magic numbers
      but the header content is going to be pretty much static  */
  /*  Set the elements ready for CSS3
      transforms (translate) controlled via .js
      * Works on small breakpoint  */
      /*  Reset the default settings  */
      /*  Rough number to make sure it's hidden  */
  /*  Parent .header-primary class controls the
  child elements behavior  */
  /*  Aside primary  */
}
.js.csstransforms .header-nav-section {
  position: absolute;
  width: 100%;
  z-index: 4;
}
.js.csstransforms .search-primary {
  top: 0;
}
.js.csstransforms .search-primary {
  -webkit-transform: translateY(-113px);
  -moz-transform: translateY(-113px);
  -ms-transform: translateY(-113px);
  -o-transform: translateY(-113px);
  transform: translateY(-113px);
}
.js.csstransforms .header-nav-section {
  -webkit-transform: translateY(-1000px);
  -moz-transform: translateY(-1000px);
  -ms-transform: translateY(-1000px);
  -o-transform: translateY(-1000px);
  transform: translateY(-1000px);
}
.js.csstransforms .header-primary.search-open .search-primary, .js.csstransforms .header-primary.nav-open .header-nav-section {
  -webkit-transform: translateY(56px);
  -moz-transform: translateY(56px);
  -ms-transform: translateY(56px);
  -o-transform: translateY(56px);
  transform: translateY(56px);
}
.js.csstransforms .header-primary.search-open.nav-open .header-nav-section {
  -webkit-transform: translateY(114px);
  -moz-transform: translateY(114px);
  -ms-transform: translateY(114px);
  -o-transform: translateY(114px);
  transform: translateY(114px);
}
.js.csstransforms .aside-primary {
  left: 0;
  -webkit-transform: translateX(-288px);
  -moz-transform: translateX(-288px);
  -ms-transform: translateX(-288px);
  -o-transform: translateX(-288px);
  transform: translateX(-288px);
}
.js.csstransforms .aside-primary.open {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

/*  ===================
    Medium breakpoint
    ===================  */
    @media all and (min-width: 48em) {
      .js.csstransforms {
        /*  Header  */
      }
      .js.csstransforms .search-primary {
        -webkit-transform: translate(301px, 0);
        -moz-transform: translate(301px, 0);
        -ms-transform: translate(301px, 0);
        -o-transform: translate(301px, 0);
        transform: translate(301px, 0);
      }
      .js.csstransforms .header-nav-section {
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        -o-transform: none !important;
        transform: none !important;
        position: static;
        width: auto;
      }
      .js.csstransforms .header-primary.search-open .search-primary {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
      }
    }
/*  ===================
    Large breakpoint
    ===================  */
    @media all and (min-width: 64em) {
      .js.csstransforms .search-primary {
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        -o-transform: none !important;
        transform: none !important;
      }
    }
/*  ===================
    Largest breakpoint
    ===================  */
    @media all and (min-width: 1540px) {
      .js.csstransforms .page.open {
        -webkit-transform: translateX(288px);
        -moz-transform: translateX(288px);
        -ms-transform: translateX(288px);
        -o-transform: translateX(288px);
        transform: translateX(288px);
      }
    }
/*  ===================
    No transforms
    ===================  */
    .js.no-csstransforms {
      /*  Header  */
  /*  Aside primary
      left:-288px; is defined already @ _aside-primary.scss
      because it's no-js fallback
      */
    }
    .js.no-csstransforms .search-primary, .js.no-csstransforms .header-nav-section {
      display: none;
    }
    .js.no-csstransforms .header-primary.search-open .search-primary, .js.no-csstransforms .header-primary.nav-open .header-nav-section {
      display: block;
    }
    .js.no-csstransforms .header-primary.search-open.nav-open .header-nav-section {
      margin-top: 113px;
    }
    .js.no-csstransforms .aside-primary.open {
      left: 0;
    }

/*  ===================
    Medium breakpoint
    ===================  */
    @media all and (min-width: 48em) {
      .js.no-csstransforms {
        /*  Header  */
      }
      .js.no-csstransforms .header-nav-section {
        display: block;
        margin-top: 0 !important;
      }
      .js.no-csstransforms .search-primary {
        display: block;
        top: 0;
        right: -294px;
      }
      .js.no-csstransforms .header-primary.search-open .search-primary {
        right: 44px;
      }
    }
/*  ===================
    Large breakpoint
    ===================  */
    @media all and (min-width: 64em) {
      .js.no-csstransforms {
        /*  Header  */
      }
      .js.no-csstransforms .search-primary {
        right: 0;
        display: block !important;
      }
    }
/*  ===================
    Hide & Show
    ===================  */
    /*  Large screen  */
    .bp-med-visible, .bp-lrg-hidden,
    .bp-sml-visible, .bp-lrgr-visible {
      display: none !important;
    }

    .bp-lrg-visible {
      display: inherit !important;
    }

    /*  Medium screen  */
    @media all and (min-width: 48em) and (max-width: 63.9375em) {
      .bp-lrg-hidden, .bp-med-visible {
        display: inherit !important;
      }

      .bp-lrg-visible, .bp-med-hidden,
      .bp-lrgr-visible {
        display: none !important;
      }

	  table {
          table-layout: fixed;
          width: 100%;
          word-wrap: break-word;
      }

    }
    /*  Small screen  */
    @media all and (max-width: 47.9375em) {
      #nav-secondary .nav-secondary.heading i {
          /*display: block !important;*/
        }
      body:not(.EDIT) .main.front-page, body:not(.EDIT) .main.single-page {
        margin-top: 0 !important;
      }
      .bp-lrg-hidden, .bp-sml-visible {
        display: inherit !important;
      }

      .bp-lrg-visible, .bp-sml-hidden,
      .bp-lrgr-visible {
        display: none !important;
      }
      table {
          table-layout: fixed;
          width: 100%;
          word-wrap: break-word;
      }
    }
    /*  Extra large screen  */
    @media all and (min-width: 1200px) {
      .bp-lrgr-visible {
        display: inherit !important;
      }
    }
    /*  Hide/Show  */
    .hidden {
      display: none;
    }

    .show {
      display: block;
    }

    /*  Visually hidden  */
    .visuallyhidden {
      border: 0;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }

/*  ===================
    Icons

    * Icomoon icons, settings: _icons
        To modify your generated font, use the *dev.svg* file, located in the *fonts*
        folder in this package. You can import this dev.svg file to the IcoMoon app.
        All the tags (class names) and the Unicode points of your glyphs are saved in
        this file. See the documentation for more info on how to use this package:
        http://icomoon.io/#docs/font-face

        ===================  */
        @font-face {
          font-family: 'icomoon';
          src: url("../fonts/icon/icomoon.eot");
          font-weight: normal;
          font-style: normal;
        }
        @font-face {
          font-family: 'icomoon';
          src: url("../fonts/icon/icomoon.woff") format("woff"), url("../fonts/icon/icomoon.ttf") format("truetype"), url("../fonts/icon/icomoon.svg#icomoon") format("svg");
          font-weight: normal;
          font-style: normal;
        }

        .icon, .icon-arrow-right,
        .icon-arrow-down,
        .icon-arrow-left,
        .icon-facebook,
        .icon-twitter,
        .icon-linkedin,
        .icon-rss,
        .icon-list,
        .icon-cross,
        .icon-house,
        .icon-youtube,
        .icon-search,
        .icon-star,
        .icon-star-2,
        .icon-arrow-up,
        .icon-new-tab,
        .icon-plus,
        .icon-minus,
        .external .linktext:after,
        .icon-calendar,
        .icon-flickr {
          font-family: 'icomoon';
          font-size: 16px;
          speak: none;
          font-style: normal;
          font-weight: normal;
          font-variant: normal;
          text-transform: none;
          line-height: 1;
          position: relative;
          top: 2px;
          -webkit-font-smoothing: antialiased;
        }

        .icon-flickr:before {
          content:"\e600";
        }

        .icon-arrow-right:before {
          content: "\2192";
        }

        .icon-arrow-down:before {
          content: "\2193";
        }

        .icon-arrow-left:before {
          content: "\2190";
        }

        .icon-facebook:before {
          content: "\25ab";
        }

        .icon-twitter:before {
          content: "\2604";
        }

        .icon-linkedin:before {
          content: "\25a1";
        }

        .icon-rss:before {
          content: "\25a0";
        }

        .icon-list:before {
          content: "\2630";
        }

        .icon-cross:before {
          content: "\2715";
        }

        .icon-house {
          margin-right: 3px;
        }

        .icon-house:before {
          content: "\2302";
        }

        .icon-youtube:before {
          content: "\25b6";
        }

        .icon-search:before {
          content: "\2316";
        }

        .icon-star:before {
          content: "\2605";
        }

        .icon-star-2:before {
          content: "\2606";
        }

        .icon-arrow-up:before {
          content: "\2191";
        }

        .icon-new-tab:before {
          content: "\2348";
        }

        .icon-calendar:before {
          content: "\e000";
        }

/*  ===================
    Buttons
    ===================  */
    .formInput,
    .formInput input,
    .btn {
  /*  Annoying if the text gets selected
  so we disable it  */
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #f1f7f8;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  font-family: inherit;
  font-size: 100%;
  cursor: pointer;
  border: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 3;
  padding-right: 1em;
  padding-left: 1em;
  border-radius: 4px;
  text-align: center;
}

.formInput:hover,
.formInput input:hover,
.btn, .btn:hover {
  text-decoration: none;
}

.formInput input:active,
.formInput input,:focus,
.btn:active, .btn:focus {
  outline: none;
}

/*  Button sizes  */
.btn--small {
  padding-right: 0.5em;
  padding-left: 0.5em;
  line-height: 2.3;
}

.btn--large {
  padding-right: 1.5em;
  padding-left: 1.5em;
  line-height: 4;
}

.btn--huge {
  padding-right: 2em;
  padding-left: 2em;
  line-height: 5;
}

.btn--full {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  text-align: center;
}

/*  Button font sizes  */
.btn--1 {
  font-size: 3em;
}

.btn--2 {
  font-size: 2em;
}

.btn--3 {
  font-size: 1em;
}

.btn--natural {
  vertical-align: baseline;
  font-size: inherit;
  line-height: inherit;
  padding-right: 0.5em;
  padding-left: 0.5em;
}

/*  Button functions  */
.formInput input,
.btn--primary {
  background-color: #595968;
  color: #fff !important;
  margin-bottom: 1.57143em;
}

.formInput input:hover,
.btn--primary:hover {
  background-color: #464652;
  color: #fff !important;
}

.btn--secondary {
  background-color: #d1443d;
  color: #fff;
  margin-bottom: 1.57143em;
}
.btn--secondary:hover {
  background-color: #36363f;
  color: #fff;
}

.btn--positive {
  background-color: #4A993E;
  color: #fff;
}

.btn--negative {
  background-color: #b33630;
  color: #fff;
}

.btn--inactive, .btn--inactive:hover, .btn--inactive:active, .btn--inactive:focus {
  text-decoration: none;
  background-color: #ddd;
  color: #777;
  cursor: text;
}

/*  Form button  */
.formInput,
.btn--form {
  position: relative;
}

.btn--form button {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  width: 100%;
}

/*  ===================
    Navigations
    ===================  */
    /*  Global nav settings  */
    .nav {
      /*  Extend the necessary icons for basic nav use  */
      /*  For less capable mobile browsers there is a img fallback  */
    }
    .nav a {
      color: #444444;
      display: block;
      padding-top: 0.78571em;
      padding-bottom: 0.78571em;
      padding-left: 6%;
      padding-right: 64px;
      position: relative;
    }
    .nav a:hover {
      color: #d1443d;
    }
    .nav li {
      border-top: 1px solid #e0edef;
      position: relative;
      overflow: hidden;
    }
    .nav > li:first-child {
      border-top: none;
    }
    .nav .icon {
      color: #d1443d;
      height: 100%;
      position: absolute;
      z-index: 1;
  /*  There will be a span element for IE7
  via the icon-fix.js (from icomoon) */
  width: 43px;
  right: 0;
  top: 0;
}
.lt-ie8 .nav .icon span {
  position: relative;
  right: -13px;
  top: 13px;
}
.nav .icon:before {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -8px;
  padding-left: 12px;
  padding-right: 14px;
}
.nav .icon-fallback img {
  display: block;
  width: 16px;
  margin: 14px auto 0 auto;
}

/*  List navigations  */
.nav--list {
  margin-bottom: 1.57143em !important;
  /*  For less capable mobile browsers there is a img fallback  */
}
.nav--list a {
  color: #d1443d;
  padding: 0.52381em 0;
}
.nav--list a:hover {
  color: #444444;
}
.nav--list .icon {
  border: none;
}
.nav--list .icon:before {
  padding-right: 0;
}
.nav--list .icon-fallback {
  display: none;
}

.nav--list-light, .nav--list-light li {
  border-color: #de7872;
}
.nav--list-light a {
  color: #fff;
}
.nav--list-light a .icon {
  color: #e79f9c;
}
.nav--list-light a:hover, .nav--list-light a:hover .icon {
  color: #fff;
}

/*  ===================
    Medium breakpoint
    ===================  */
    @media all and (min-width: 48em) {
      .nav a {
        padding-left: 1.57143em;
      }

      .nav--list li {
        border-top: none;
      }
      .nav--list a {
        padding: 2px 0 2px 12px;
      }
      .nav--list .icon {
        right: auto;
        left: 0;
        width: 10px;
      }
      .lt-ie8 .nav--list .icon {
        left: -18px;
        top: -8px;
      }
    }
/*  ===================
    Lists
    ===================  */
    /*  Global list settings  */
    ul, ol, dd {
      margin-top: 0;
      margin-left: 0.78571em;
      margin-bottom: 1.57143em;
      list-style: disc;
    }

    ol li {
      list-style: decimal;
    }

    /*  Reset lists  */
    .nav, .nav ul, .list, .list-icons, .breadcrumb, .element-anchor-links, .service-index ul, nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    /*  Main list settings  */
    .list {
      margin-bottom: 1.57143em;
    }
    .list a {
      color: #444444;
    }
    .list a:hover,
	.tiedotenosto a:hover {
      color: #d1443d;
    }
    .list li {
      border-bottom: 1px solid #e0edef;
      padding-top: 1.57143em;
      padding-bottom: 1.57143em;
    }
    .list li:first-child {
      padding-top: 0;
    }
    .list li:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
    .list .icon-arrow-right {
      color: #d1443d;
    }
    .list .list-ingress {
      margin: 0 0 0.39286em 0;
    }
    .list h1 {
      margin: 0;
    }
    .list h1:only-child {
      margin-bottom: 0;
    }

    /*  Medium list  */
    .list--medium h1 {
      margin-bottom: 0.39286em;
    }

    /*  Small list  */
    .list--small li {
      padding-top: 0.78571em;
      padding-bottom: 0.78571em;
    }

    .list--light,
    .list--light-style-2 {
      color: #fff;
    }
    .list--light a,
    .list--light-style-2 a {
      color: #fff;
    }
    .list--light a:hover,
    .list--light-style-2 a:hover {
      color: #d1443d;
    }
    .list--light a,
    .list--light-style-2 a {
      border-color: #555555;
    }

    /*  List image  */
    .list-img {
      float: left;
      margin: 0.39286em 1.57143em 0.52381em 0;
    }
    .list-img img {
      display: block;
    }

    /*  Used @ primary aside  */
    .list--light-style-2 h1 {
      color: #fff;
    }
    .list--light-style-2 li {
      border-color: #464652;
      padding-top: 1.57143em;
      padding-bottom: 1.57143em;
    }
    .list--light-style-2 .meta-text a {
      color: #fff;
      padding: 0;
      border: none;
    }
    .list--light-style-2 .meta-text a:hover {
      color: #d1443d;
    }

    /*  List with simple links only  */
    .list--links a, .list--links-small a {
      color: #d1443d;
    }
    .list--links a:hover, .list--links-small a:hover {
      color: #444444;
    }
    .list--links li, .list--links-small li {
      border: 0;
      padding: 0;
    }
    .list--links p, .list--links-small p {
      color: #3e7178;
      font-size: 0.8125em;
      display: block;
      margin: 0 0 4px 20px;
    }

    /*  Icons list  */
    .list-icons {
      margin: -4px 0 1.57143em -4px;
    }
    .list-icons li a {
      float: left;
      margin: 0 5px 0 5px !important;
      padding: 0 !important;
    }

/*  ===================
    Large breakpoint
    ===================  */
    @media all and (min-width: 64em) {
      .list-service-index li {
        width: 25%;
      }
    }
/*  ====================
    Headings
    ====================  */
    h1, h2, h3, h4, h5, h6 {
      color: #33485f;
      font-family: "Lato", Helvetica, Arial, sans-serif;
      font-weight: bold;
      margin-top: 0;
      margin-bottom: 0.78571em;
    }
    h1 .icon-arrow-right, h2 .icon-arrow-right, h3 .icon-arrow-right, h4 .icon-arrow-right, h5 .icon-arrow-right, h6 .icon-arrow-right {
      color: #d1443d;
    }
    a:hover h1, a:hover h2, a:hover h3, a:hover h4, a:hover h5, a:hover h6 {
      color: #d1443d;
    }

    h1 {
      font-size: 1.85714em;
      line-height: 1.4;
    }

    h2 {
      font-size: 1.85714em;
      line-height: 1.333;
    }

    h3 {
      font-size: 1.71429em;
      line-height: 1.5;
    }

    h4 {
      font-size: 1.42857em;
      line-height: 1.5;
    }

    h5 {
      font-size: 1.21429em;
      line-height: 1.5;
    }

    h6 {
      font-size: 1.07143em;
      line-height: 1.5;
    }

/*  Global heading settings
    * Because linked headings need to have colored border underline
      we have to display them inline /w <span> element
    * <h1 class="heading"><span>Heading</span><h1>
    * Not necessary for headings that aren't linked but it's probably
    wise to keep identical settings  */
    .heading span {
      display: inline;
    }
    a .heading span {
      border-bottom: 1px solid #e0edef;
      padding-bottom: 2px;
    }
    .heading .meta-text {
      margin-top: 0.78571em;
    }

    /*  Primary heading  */
    .primary-heading {
      margin: 0;
      padding-bottom: 1.57143em;
    }
    .primary-heading h1 {
      color: #d1443d;
      font-size: 1.85714em;
      margin-bottom: 5px;
    }
    .primary-heading > h2 {
      font-family: "Open Sans", "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
      font-size: 1.07143em;
      line-height: 1.6;
      font-weight: normal;
      margin-bottom: 0;
    }
    .primary-heading > h2:before {
      background-color: #e0edef;
      display: block;
      content: "";
      height: 1px;
      width: 140px;
      margin: 0.78571em 0 0.78571em 0;
    }
    .primary-heading > h2 span {
      margin-top: 0.39286em;
    }
    .primary-heading > h4 {
      margin-top: 0.78571em;
      margin-bottom: 0;
    }
    .primary-heading h2 p:last-child {
      margin-bottom: 0;
    }

    /*  Search result heading  */
    .search-result-heading {
      margin: 0;
      padding-top: 1.57143em;
    }
    .search-result-heading > h2 {
      margin: 0;
      padding: 0;
    }

    /*  Project page heading  */
    .primary-heading--project > h1 {
      -webkit-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
      -moz-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
      box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
      color: #fff;
      display: inline-block;
      font-size: 1.57143em;
      margin-left: -7.14286em;
      padding-top: 0.52381em;
      padding-bottom: 0.52381em;
      padding-right: 1.42857em;
      padding-left: 7.14286em;
      position: relative;
      top: -2.5em;
      margin-bottom: 0;
    }
    .primary-heading--project > h2 {
      margin-top: -2.85714em;
    }

    /*  Component blog heading  */
    .component-heading--blog {
      font-size: 1.57143em;
      line-height: 1.333;
    }

    /*  Component banner heading  */
    .component-banner-heading {
      /*border-bottom: 1px solid #e0edef; */
      line-height: 1.57143;
      font-family: "Open Sans", "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
      font-size: 1em;
      font-weight: normal;
      /*	padding-bottom: 0.78571em;
			margin-bottom: 1.57143em; */
    }

    /*  Meta heading  */
    .meta-heading {
      margin-bottom: 1.5em;
      /*  For less capable mobile browsers there is a img fallback  */
    }
    .meta-heading a:hover h4 {
      color: #fff;
      background-color: #d1443d;
    }
    .meta-heading h4 {
      font-size: 0.85714em;
      text-transform: uppercase;
      background-color: #36363f;
      border-radius: 0 0 0 4px;
      border-right: 4px solid #d1443d;
      color: #fff;
      line-height: 1.6;
      margin: 0;
      padding: 5px 1em;
      position: absolute;
      right: 0;
      top: -1px;
    }
    .meta-heading .icon {
      color: #fff;
      font-size: 14px;
      margin: 0 0 0 -4px;
      right: -4px;
    }
    .meta-heading a h4 .icon,
    .meta-heading a:link h4 .icon,
    .meta-heading a:visited h4 .icon,
    .meta-heading a:hover h4 .icon,
    .meta-heading a:active h4 .icon {
      color: #fff;
    }
    .meta-heading .icon-fallback {
      display: none;
    }

    /*  Footer heading  */
    .footer-heading {
      color: #fff;
      /*  For less capable mobile browsers there is a img fallback  */
    }
    .footer-heading .icon {
      color: #e79f9c;
    }
    .footer-heading .icon-fallback {
      display: none;
    }
    .footer-heading:hover {
      color: #fff;
    }
    .footer-heading:hover .icon {
      color: #fff;
    }

    @media all and (min-width: 48em) {
      .primary-heading h1 {
        font-size: 2.57143em;
      }

      .primary-heading--project h2 {
        margin-top: -5em;
      }
    }
/*  ===================
    Font styles
    ===================  */
    .header-toggle-btn span
    , .footer-back-to-top {
      font-family: "Lato", Helvetica, Arial, sans-serif;
      font-weight: bold;
      text-transform: uppercase;
    }

    .list--small h1
    , .list--light-style-2 h1 {
      font-family: "Open Sans", "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
      font-weight: normal;
    }

/*  ===================
    Text styles
    ===================  */
/*  External links
    * found also @ _icons

    http://bit.ly/110IAVc
    Looks like webkit has some bug with this
    selector: selects all links after it has been declared for
    the first time.

    &[target="_blank"]:after {
        @extend .icon;
        content: "\2348"; // .icon-new-tab
        font-size:15px;
        top:-4px;
        margin-left:2px;
    }

    So I made class .external for external links:

    */
    .external .linktext:after {
      content: "\2348";
      top: -4px;
      margin-left: 2px;
	  margin-right: 3px;
    }

    /*  Superscript & Subscript  */
    .superscript, .subscript {
      position: relative;
      top: -0.5em;
      font-size: 13px;
    }

    .subscript {
      top: auto;
      bottom: -0.5em;
    }

/*  Break all words
    * use in long displayed links
    * used e.g. @ element-link  */
    .wrap {
      -ms-word-break: break-all;
      word-break: break-all;
      word-break: break-word;
      -webkit-hyphens: auto;
      -moz-hyphens: auto;
      hyphens: auto;
    }

/*  Line break @ Medium breakpoint only
    * used @ primary heading
    * Extend to wider breakpoints if needed
    e.g. .bp-lrg-break  */
    @media all and (min-width: 48em) and (max-width: 63.9375em) {
      .bp-med-break {
        display: inline-block;
      }
      .bp-med-break:before {
        content: "-";
      }
    }
/*  ===================

    Link styles
    * Most of the sites links are
    defined by their parent element
    e.g. .component, .list, .nav ...

    ===================  */
    /*  Content links*/
    .content .element-contact a.karttaLinkki .linktext,
    .content .korostuslaatikko a .linktext,
    .content .palveluntarjoaja a.karttaLinkki .linktext,
    .content .palveluntarjoaja .homepage a .linktext,
    .content .TableBlock a .linktext,
    .content .tapahtumalistaus a.ilmoittautuminen .linktext,
    .content .tapahtumalistaus a.karttaLinkki .linktext,
    .content .tapahtumalistaus a.lisatietoja .linktext,
    .content .textarea a .linktext,
    .links-basic a {
      border-bottom: 1px solid #bed9de;
      display: inline;
      padding-bottom: 1px;
    }

/*  ===================
    Meta text
    ===================  */
    .meta-text {
      color: #9999a8;
      font-family: "Lato", Helvetica, Arial, sans-serif;
      text-transform: uppercase;
      font-weight: bold;
    }
    .meta-text a {
      color: #d1443d;
    }

    .meta-text a {
      color: #d1443d;
      border-bottom: 1px solid #bed9de;
      padding-bottom: 2px;
    }
    .meta-text a:hover {
      color: #444444;
      border-bottom-color: #d1443d;
    }

    .meta-text--small {
      font-family: "Open Sans", "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
      text-transform: none;
      font-weight: normal;
    }
    .meta-text--small a {
      padding-bottom: 0;
    }

    .meta-text-breadcrumb {
      display: block;
      margin-bottom: 2px;
    }
    .meta-text-breadcrumb a {
      color: #444444;
    }
    .meta-text-breadcrumb a:hover {
      color: #d1443d;
    }
    .meta-text-breadcrumb .icon {
      color: #9999a8;
    }

/*  ===================

    Font sizing
    * Placed all main font-sizes here to have better control
    * Heading sizes @ _headings
    * Icon basic sizes @ _icons

    ===================  */
    /*  Extra small sizes  */
    .cal-body td {
      font-size: 11px;
    }

    .header-toggle-btn span,
    .footer-back-to-top,
    .external .linktext:after,
    .meta-text .icon,
    .heading .meta-text {
      font-size: 12px;
    }

    .nav-primary-top,
    .search-primary,
    .breadcrumb {
      font-size: 0.9em;
    }

    .search-primary {
      font-size: 1em;
    }

    /*  Medium sizes  */
    .list-icons .icon
    , .list-icons .icon-facebook
    , .list-icons .icon-youtube
    , .list-icons .icon-linkedin
    , .list-icons .icon-twitter
    , .form-large .icon-calendar
    , .aside-primary-btn .icon
    , .header-toggle-btn .icon
    , .icon-rss
    , .component-rating .icon {
      font-size: 20px;
    }

    /*  Zoomable small sizes  */
    .meta-text
    , .meta-text--small {
      font-size: 0.85714em;
    }

    .small-text
    , small
    , .component-blog-meta
    , .component-blog-desc {
      font-size: 0.92857em;
    }

    .list-ingress
    , .list.list--small h1
    , .list--light-style-2 h1 {
      font-size: 1em;
      line-height: 1.57143;
    }

    /*  Zoomable medium sizes */
    .list h1 {
      font-size: 1em;
    }

    /*  Zoomable larger sizes */
    .list--medium h1 {
      font-size: 1.21429em;
    }

    .large-font-size {
      font-size: 1.14286em;
    }

/*  ===================
    Large breakpoint
    ===================  */
    @media all and (min-width: 48em) {
      /*  Small sizes   */
      .nav-primary
      , .nav-secondary--wide {
        font-size: 13px;
      }

      /*  Zoomable small sizes */
      .nav-secondary {
        font-size: 0.92857em;
      }
    }
/*  ===================
    Large breakpoint
    ===================  */
    @media all and (min-width: 64em) {
      /*  Default sizes  */
      .nav-primary
      , .nav-primary-top
      , .search-primary {
        font-size: 1em;
      }

      .nav-primary
      , .nav-secondary.nav-secondary--wide {
        font-size: 1.1em;
      }

      /*  Zoomable sizes  */
      .nav-secondary {
        font-size: 1em;
      }

      .large-font-size
      .nav-secondary ul ul {
        font-size: 14px;
      }
    }

    .nav-secondary ul ul {
      font-size: 13px;
    }
/*  ===================
    Primary header
    =================== */
    .header-primary {
      background-color: #36363f;
      position: relative;
      z-index: 80;
    }

    .header-nav-section {
      clear: both;
    }

    .header-bar {
      background-color: #fff;
      border-bottom: 4px solid #cfe3e6;
      position: absolute;
      height: 52px;
      left: 0;
      top: 0;
      width: 100%;
      z-index: 10;
    }

    .header-logo {
      background-color: #fff;
      border-radius: 4px;
      display: inline-block;
      padding-top: 13px;
      padding-bottom: 1px;
      height: 38px;
      padding-left: 0.78571em;
    }
    .header-logo h1 {
      background-image: url(../images/tampere-sprite.svg);
      background-repeat: no-repeat;
      background-color: #fff;
      background-position: -10px 0;
      font-size: 100%;
      margin: 0 auto;
      width: 126px;
      display: block;
      height: 28px;
      text-indent: -99999px;
    }
    .no-svg .header-logo h1 {
      background-image: url(../images/tampere-sprite.png);
    }

    .header-right-section {
      float: right;
    }

    /*  Navigation/Searchform/Toggle buttons  */
    .header-toggle-btn {
      background-color: #fff;
      border-radius: 0;
      border-bottom: 4px solid #cfe3e6;
      float: left;
      line-height: 52px;
      height: 52px;
      position: relative;
      z-index: 25;
  /*  If we set the border-left directly it'll overlap
  with the border-bottom so use :before instead  */
}
.header-toggle-btn span {
  position: relative;
  top: -1px;
}
.header-toggle-btn .icon {
  position: relative;
  top: 3px;
}
.header-toggle-btn:before {
  border-left: 1px solid #cfe3e6;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  left: 0;
}
.header-toggle-btn.active {
  border-bottom-color: #d1443d;
}

/*  ===================
    Small breakpoint only
    ===================  */
    @media all and (max-width: 19.9375em) {
      .header-toggle-btn span {
        display: none;
      }
    }
/*  ===================
    Medium breakpoint
    ===================  */
    @media all and (min-width: 48em) {
      /*  Resets  */
      .header-primary {
        background-color: #fff;
        height: auto !important;
        overflow: hidden;
      }

      .header-bar {
        background-color: #36363f;
        border: none;
        border-left: 4px solid #595968;
        height: 60px;
        width: 141px;
      }

      .header-logo {
        border-bottom: 1px solid #e0edef;
        border-radius: 4px 4px 0 0;
        padding: 16px 3px 5px 16px;
        margin-left: -4px;
      }

      .header-toggle-btn {
        border: none;
      }

      .header-toggle-btn--nav {
        display: none;
      }

      .header-toggle-btn--search {
        height: 60px;
        line-height: 60px;
        padding: 0 12px;
        background-color: #d1443d;
      }
      .header-toggle-btn--search:before {
        display: none;
      }
      .header-toggle-btn--search .icon {
        color: #fff;
      }
      .header-toggle-btn--search span {
        display: none;
      }
    }
/*  ===================
    Large breakpoint
    ===================  */
    @media all and (min-width: 64em) {
      .header-bar {
        position: relative;
      }

      .header-toggle-btn--search {
        display: none;
      }
    }
/*  ===================
    Main search form
        * @ header
        ===================  */
        .search-primary {
          background-color: #fff;
          left: 0;
          padding: 13px 6% 13px 6%;
          position: absolute;
          top: 56px;
          /*  No-js  */
          /*  101 because for some reasong mobile safari doesn't fit 100% width  */
          width: 89%;
          z-index: 5;
        }
        .search-primary .search-primary-text,
        .search-primary .search-primary-btn {
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
        }
        .search-primary .search-primary-text {
          float: left;
          width: 71.5%;
          margin: 0;
        }
        .search-primary .search-primary-btn {
          background-color: #d1443d;
          color: #fff;
          float: right;
          margin: 0;
          padding-left: 0;
          padding-right: 0;
          position: relative;
          width: 25%;
          right: 1%;
        }
        .search-primary .search-primary-btn .icon-search {
          display: none;
        }

        @media all and (min-width: 48em) {
          .search-primary {
            background-color: #d45049;
            border: none;
            border-right: 1px solid #de7872;
            height: 60px;
            left: auto;
            right: 44px;
            top: 0;
            padding: 0 14px;
            width: 230px;
            z-index: 20;
          }
          .search-primary .search-primary-text {
            position: relative;
            top: 15px;
            text-indent: 0;
            color: #de7872;
            background-color: #D45049;
            padding-left: 0;
            border-radius: 0;
            border-color: transparent;
            border-bottom-color: #de7872;
            width: 63%;
          }
          .search-primary .search-primary-text:-moz-placeholder {
            color: #ecb3b0;
          }
          .search-primary .search-primary-text::-webkit-input-placeholder {
            color: #ecb3b0;
          }
          .lt-ie8 .search-primary .search-primary-text {
            color: #fff;
            width: 60%;
            top: 20px;
          }
          .search-primary .search-primary-text:focus {
            border-radius: 4px;
            text-indent: 6px;
          }
          .search-primary .search-primary-btn {
            background: #D45049;
            border: 1px solid #de7872;
            position: relative;
            top: 15px;
            padding-left: 3px;
            padding-right: 3px;
            line-height: 2.2;
            width: 32%;
          }
          .search-primary .search-primary-btn:hover {
            background-color: #36363f;
            border-color: #36363f;
          }
        }
/*  ===================
    Large breakpoint
    ===================  */
    @media all and (min-width: 64em) {
      .header-bar {
        position: relative;
      }

      .header-toggle-btn--search {
        display: none;
      }

      .search-primary {
        right: 0;
      }
      .search-primary .search-primary-btn .icon-search {
        display: inline;
      }
    }
/*  ===================
    Primary navigation
    * @ header
    ===================  */
    .nav-primary {
      border-top: 1px solid #e0edef;
      background-color: #36363f;
    }
    .nav-primary li {
      background-color: #fff;
    }
    .nav-primary li:last-child {
      border-radius: 0 0 4px 4px;
    }
    .nav-primary li:last-child a {
      border-bottom: none;
    }
    .nav-primary li.active {
      border-left: 4px solid #d1443d;
    }
    .no-js .nav-primary {
      margin-top: 56px;
    }

/*  ===================
    Medium breakpoint
    ===================  */
    @media all and (min-width: 48em) {
      .nav-primary {
        background-color: transparent;
        border: none;
      }
      .no-js .nav-primary {
        margin-top: 0;
      }
      .nav-primary li {
        cursor: pointer;
        border-top: none;
        border-bottom: 4px solid #e0edef;
        float: left;
        width: 14.28571%;
        min-height: 8em;
      }
      .nav-primary li.active {
        border-left: none;
        border-bottom-color: #d1443d;
      }
      .nav-primary li:last-child {
        border-radius: 0;
      }
      .nav-primary li:first-child a {
        border: none;
      }
      .nav-primary li:hover {
        border-color: #d1443d;
      }
      .nav-primary li:hover a {
        color: #d1443d;
      }
      .nav-primary a {
        border: none;
        border-left: 1px solid #e0edef;
        line-height: 1.3;
        min-height: 34px;
        max-width: 7.14286em;
        padding-top: 71px;
        padding-bottom: 11%;
        padding-right: 10%;
        padding-left: 10%;
        position: absolute;
        bottom: 0;
      }
      .nav-primary .icon-arrow-right {
        display: none;
      }
    }
/*  ===================
    Primary navigation top
    * @ header
    ===================  */
    .nav-primary-top {
      border-top: none;
      border-bottom: 1px solid #464652;
      margin-left: -3%;
      background-color: #36363f;
      padding: 0.78571em 3%;
      /*  For less capable mobile browsers there is a img fallback  */
      /*  Edit some of the basic list-icon settings  */
    }
    .nav-primary-top a {
      color: #fff;
      padding-right: 0.85714em;
    }
    .nav-primary-top li {
      border-color: #464652;
      float: left;
      margin-left: 3%;
      width: 47%;
    }
    .nav-primary-top li:first-child, .nav-primary-top li:nth-child(2) {
      border: none;
    }
    .nav-primary-top li.active a {
      color: #d1443d;
    }
    .nav-primary-top .icon-arrow-right {
      color: #fff;
      border: none;
      width: auto;
    }
    .nav-primary-top .icon-arrow-right:before {
      padding: 0;
    }
    .nav-primary-top .icon-fallback {
      display: none;
    }
    .nav-primary-top .list-icons {
      position: absolute;
      right: 430px;
      margin: 0;
    }
    .nav-primary-top .list-icons a {
      color: #9999a8;
    }
    .nav-primary-top .list-icons a:hover {
      border: none;
      color: #fff;
    }

/*  ===================
    Medium breakpoint
    ===================  */
    @media all and (min-width: 48em) {
      .nav-primary-top {
        border: none;
        border-radius: 0 0 0 4px;
        height: 60px;
        line-height: 60px;
        margin-left: 145px;
        padding: 0 0 0 10px;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 15;
      }
      .nav-primary-top li {
        margin: 0;
        width: auto;
      }
      .nav-primary-top li a {
        border: none;
        display: inline;
        margin: 0 0 0 8px;
        padding: 0 0 2px 0;
      }
      .nav-primary-top li a:hover {
        border-bottom: 1px solid #595968;
      }
      .nav-primary-top li.active a {
        border-bottom: 1px solid #fff;
      }
      .nav-primary-top .icon-arrow-right, .nav-primary-top .nav-home span {
        display: none;
      }
    }
/*  ===================
    Medium breakpoint
    ===================  */
    @media all and (min-width: 64em) {
      .nav-primary-top li {
        border-top: none;
      }
      .nav-primary-top li a {
        margin-left: 10px;
      }
    }
/*  ===================
    Components
    ===================  */
/*  Fix some sub-pixel rendering
caused by the absolute positioning in components */
@media all and (min-width: 64em) {
  .front-page .components {
    right: -1px;
  }
}
.component {
  background-color: #fff;
  border-bottom: 1px solid #fff;
  overflow: hidden;
}
.component .grid-item-inner {
  border-right: 4px solid #e0edef;
  box-shadow: inset 0 -1px #CFE3E6;
}

.component .grid-item-inner.underlined {
  border-bottom: 1px solid #cfe3e6;
}

/*  ===================

    Secondary nav
    * Clickable dropdown on mobile & desktop
    * Bp medium: aligns right to the sidebar

    ===================  */
/*  Secondary nav section gives space for the navigation
and floats right @ Medium bp  */
.nav-secondary-inner {
  background: #36363f;
  border: 4px solid #36363f;
  border-top: none;
  padding: 0.78571em;
}

.nav-secondary {
  background-color: #fff;
  border-radius: 4px;
  border-bottom: 4px solid #e0edef;
  overflow: hidden;
  /*  Im hiding the <ul>'s  here
      because it's faster than doing /w .js at the bottom.
      This way we can't see the <ul>'s doing their hiding onload  */
  /*  For the subnav's
  * If it's open/clicked extend the arrow icon to point up  */
}
.js .nav-secondary ul {
  display: none;
}
.js .nav-secondary ul.display {
  display: block;
}
.nav-secondary a {
  border: none;
}
.nav-secondary a:after {
  /*  This generated border was first added to the
      .icon class (@ _navigations), but client wanted the
      border to be present even if there wasn't icon/sub-pages */
      content: "";
      width: 44px;
      height: 100%;
      border-left: 1px solid #e0edef;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 0;
    }
    .nav-secondary > li:first-child {
      border: none;
    }



	.nav-secondary li > a.open {
		border-left: 4px solid #9dc6cc;
	}

	#nav-secondary li li li > a.open {
		padding-left: 24px;
	}

	#nav-secondary li li li li > a.open {
		padding-left: 28px;
	}

	#nav-secondary li li li li li > a.open {
		padding-left: 32px;
	}

	#nav-secondary li li li li li li > a.open {
		padding-left: 36px;
	}

	.nav-secondary li.active > a {
      border-left: 4px solid #d1443d;
    }


    .nav-secondary a.open .icon:before {
      content: "\2191";
      /*  .icon-arrow-up  */
    }
    .nav-secondary ul {
      /*  Third level  */
      /*  Fourth level  */
      /*  Fifth level  */
      /*  Sixth level  */
      /*  Seventh level  */
    }
    .nav-secondary ul ul {
      background-color: #f1f7f8;
    }
    .nav-secondary ul ul a, .nav-secondary ul ul .icon {
      border-color: #e0edef;
    }
    .nav-secondary ul ul ul {
      background-color: #e0edef;
    }
    .nav-secondary ul ul ul li, .nav-secondary ul ul ul a:after, .nav-secondary ul ul ul .icon {
      border-color: #cfe3e6;
    }
    .nav-secondary ul ul ul ul {
      background-color: #cfe3e6;
    }
    .nav-secondary ul ul ul ul li, .nav-secondary ul ul ul ul a:after, .nav-secondary ul ul ul ul .icon {
      border-color: #bed9de;
    }
    .nav-secondary ul ul ul ul ul {
      background-color: #bed9de;
    }
    .nav-secondary ul ul ul ul ul li, .nav-secondary ul ul ul ul ul a:after, .nav-secondary ul ul ul ul ul .icon {
      border-color: #aed0d5;
    }
    .nav-secondary ul ul ul ul ul ul {
      background-color: #aed0d5;
    }
    .nav-secondary ul ul ul ul ul ul li, .nav-secondary ul ul ul ul ul ul a:after, .nav-secondary ul ul ul ul ul ul .icon {
      border-color: #9dc6cc;
    }

/*  Small floated elements
* used @ service-listing alphabets  */
.nav-secondary--service-index ul {
  border-top: 1px solid #e0edef;
  margin-right: -3px;
}
.nav-secondary--service-index ul li {
  float: left;
  width: 20%;
  border: none;
  margin-bottom: -1px;
}
.nav-secondary--service-index ul li.active a {
  color: #fff;
  /*border: none; */
  background-color: #d1443d;
}
.nav-secondary--service-index ul li a {
  border-top: none;
  border-bottom: 1px solid #e0edef;
  border-right: 1px solid #e0edef;
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}
.nav-secondary--service-index ul li a:after {
  display: none;
}
.nav-secondary--service-index ul li a:hover {
  color: #fff;
  background-color: #d1443d;
}

/*  ===================
    Medium breakpoint
    ===================  */
    @media all and (min-width: 48em) {
      .nav-secondary-section {
        position: relative;
        float: right;
        z-index: 50;
      }

      .nav-secondary-inner {
        background-color: #f8fbfb;
        border: none;
        border-right: 4px solid #e0edef;
        padding: 40px 8%;
      }

      /*  Secondary nav section for projects floats nowhere */
      .nav-secondary-section--project {
        background-color: #f1f7f8;
        float: none;
      }
      .nav-secondary-section--project .nav-secondary-inner {
        border: none;
        padding: 0;
      }

      .nav-secondary {
        border-left: 1px solid #e0edef;
        border-right: 1px solid #e0edef;
    /*  .first class always displays it's content on medium breakpoint <=
    * faster than w/ .js @ bottom */
  }
  .nav-secondary .nav-secondary-heading {
    display: none;
  }
  .lt-ie8 .nav-secondary .nav-secondary-heading {
    position: absolute;
  }
  .js .nav-secondary ul.first {
    display: block;
  }

  /*  Wide project page navigation
  extends the secondary nav */
  .nav-secondary--wide {
    background-color: #f1f7f8;
    border: none;
    border-radius: 0;
    margin: 0;
  }
  .nav-secondary--wide li {
    float: left;
  }
  .nav-secondary--wide li li {
    border-right: 1px solid #e0edef;
  }
  .nav-secondary--wide li li ul {
    display: none !important;
  }
  .nav-secondary--wide li.active a {
    border-left: none;
    background-color: #fff;
    color: #00bd9c;
    border-bottom-color: #d1443d;
  }
  .nav-secondary--wide a {
    border: none;
    border-radius: 0 !important;
    border-bottom: 4px solid #e0edef;
    padding: 1.57143em 0.52381em;
  }
  .nav-secondary--wide a:hover {
    background-color: #fff;
    border-bottom-color: #d1443d;
  }
  .nav-secondary--wide a:after {
    display: none;
  }
  .nav-secondary--wide .icon {
    display: none;
  }
}
/*  ===================
    Large breakpoint
    ===================  */
    @media all and (min-width: 64em) {
      .nav-secondary--wide a {
        padding-left: 0.78571em;
        padding-right: 0.78571em;
      }
    }
/*  =============================

    Various layout elements
    * wrappers, containers, sidebar

    ============================= */
    /*  Main wrapper  */
    .page {
      max-width: 1200px;
      overflow: hidden;
    }

    .main {
      position: relative;
    }
    .main.front-page, .main.single-page {
      margin-top: 58px;
    }
    .main.front-page .dummy-sidebar {
      display: none;
    }
    .main.front-page .component:nth-child(1) .meta-heading h4,
    .main.front-page .component:nth-child(2) .meta-heading h4,
    .main.front-page .component:nth-child(3) .meta-heading h4 {
      top: 0;
    }
    .main.single-page .main-content {
      margin-bottom: 0;
    }

    .container {
      position: relative;
      clear: both;
      border-top: 4px solid #36363f;
    }

    .main-content {
      position: relative;
      float: left;
      width: 100%;
      z-index: 50;
    }

/*  ===================
    Medium small breakpoint
    ===================  */
    @media all and (min-width: 30em) {
      .page {
        margin-left: 44px;
      }
    }
/*  ===================
    Medium  breakpoint
    ===================  */
    @media all and (min-width: 48em) {
      .main, .main.front-page, .main.single-page {
        margin-top: 48px;
      }
    }
/*  Logo image
    @ primary footer
    * scales better as img  */
    .logo-wide {
      max-width: 200px;
      margin: 0 0 1.57143em 0;
      border-radius: 0;
    }

/*  ===================
    Breadcrumb
    ===================  */
    .breadcrumb {
      line-height: 2;
      margin: 0 12px 12px 1.57143em;
      padding: 0;
      text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.8);
      max-width: 92%;
    }
    .breadcrumb li {
      display: block;
      float: left;
    }
    .breadcrumb li.active a {
      color: #d1443d;
    }
    .breadcrumb a {
      color: #444444;
    }
    .breadcrumb a:hover {
      color: #d1443d;
    }
    .breadcrumb .icon-arrow-right {
      color: rgba(0, 0, 0, 0.7);
    }

/*  ===================
    Aside primary
    (Sidebar on the left)
    ===================  */
    .aside-primary {
      display: none;
      background: url(../images/tampere-vohveli-outline.svg) bottom left no-repeat #36363f;
      height: 100%;
      position: absolute;
      overflow: hidden;
      top: 0;
      left: -288px;
      z-index: 100;
      width: 332px;
    }

    .aside-primary-inner {
      border-top: 4px solid #d1443d;
      padding: 3.14286em 4.71429em 1.57143em 1.57143em;
    }

    .aside-primary-toggle {
      background: #464652;
      cursor: pointer;
      height: 100%;
      position: absolute;
      right: 0;
      top: 0;
      width: 44px;
    }
    .aside-primary-toggle:hover {
      background: #494955;
    }
    .aside-primary-toggle:hover .aside-primary-btn .icon-arrow-left {
      background: #d1443d;
    }

    .aside-primary-btn .icon {
      background-color: #595968;
      display: block;
      color: #fff;
      padding: 16px 12px;
      border-bottom: 4px solid #3f3f4a;
      top: 0 !important;
    }
    .aside-primary-btn .icon:hover {
      background: #d1443d;
    }
    .aside-primary-btn .icon-text {
      background-image: url(../images/tampere-sprite.svg);
      background-repeat: no-repeat;
      background-position: -10px -80px;
      display: block;
      height: 160px;
      text-indent: -9999px;
      margin-top: 14px;
    }
    .no-svg .aside-primary-btn .icon-text {
      background-image: url(../images/tampere-sprite.png);
    }
    .aside-primary.open .aside-primary-btn .icon {
      background-color: #d1443d;
    }
    .aside-primary.open .aside-primary-btn .icon:before {
      content: "\2715";
      /* Extend to Icon cross .icon-cross  */
    }
    .aside-primary.open .aside-primary-btn span {
      background-position: -54px -80px;
    }

/*  ===================
    Medium small breakpoint
    ===================  */
    @media all and (min-width: 30em) {
      .aside-primary {
        display: block;
      }
    }
/*  ===================
    Medium  breakpoint
    ===================  */
    @media all and (min-width: 48em) {
      .aside-primary-btn .icon-list {
        font-size: 20px;
        padding: 20px 12px;
      }
    }
/*  ===================

    Sidebar
    * Small breakpoint: at the bottom
    * Medium breakpoint: on the right
    * Used @ osioetusivu, osiosivu, projektisivu

    ===================  */
    .sidebar {
      float: right;
      border-top: 1px solid #e0edef;
      background-color: #f8fbfb;
      position: relative;
      z-index: 50;
    }
    .sidebar .component {
      background-color: #f8fbfb;
    }

/*  ===================
    Medium  breakpoint
    ===================  */
    @media all and (min-width: 48em) {
      .dummy-sidebar {
        background-color: #fff;
        background-color: #f8fbfb;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        width: 35%;
        z-index: 0;
      }
      .dummy-sidebar .inner {
        border-right: 4px solid #e0edef;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        right: 0;
      }
    }
/*  ===================
    Primary footer
    ===================  */
    .footer {
      position: relative;
      clear: both;
      z-index: 60;
    }

    .footer-primary {
      background-color: #d45049;
    }
    .footer-primary .grid-item, .footer-primary .component {
      background-color: #D45049;
    }
    .footer-primary .f-2, .footer-primary .f-4, .footer-primary .f-6 {
      background: #d1443d;
    }

    .footer-back-to-top {
      background-color: #fff;
      color: #444444;
      border-right: 4px solid #e0edef;
      border-left: 1px solid #cfe3e6;
      display: block;
      padding: 12px 0;
      text-indent: 6%;
    }

    .footer-primary-last, .footer-primary-last .f-7, .footer-primary-last .f-8 {
      background-color: #fff;
    }
    .footer-primary-last .f-7 .grid-item-inner {
      border-bottom: 1px solid #e0edef;
    }

    .footer-primary-last {
      min-height: 776px;
    }

/*  Logo image
    @ primary footer
    * scales better as img  */
    .logo-wide {
      max-width: 200px;
      margin: 0 0 1.57143em 0;
      border-radius: 0;
    }

/*  ===================
    Medium only breakpoint
    ===================  */
    @media all and (min-width: 48em) and (max-width: 63.9375em) {
      /*  Last footer item (white area)  */

	  .footer-primary .f-3 {
		background: #d1443d none repeat scroll 0 0;
	}


	  .footer-primary-last .f-7 .grid-item-inner {
        border-bottom: none;
      }
      .footer-primary-last .f-8 .grid-item-inner {
        border-left: 1px solid #e0edef;
      }



    }
/*  ===================
    Medium breakpoint
    ===================  */
    @media all and (min-width: 48em) {
      .footer-back-to-top {
        border-top: 1px solid #cfe3e6;
        padding: 8px 13px 8px 8px;
        position: absolute;
        text-indent: 0;
        top: -36px;
        right: 0;
      }

      .footer-primary .f-3 {
        background: ##D9645E;
      }
      .footer-primary .f-4 {
        background-color: #D45049;
      }
    }
/*  ===================
    Medium large
    ===================  */
    @media all and (min-width: 64em) {
      .footer-primary,
      .footer-primary-last {
        float: left;
      }

      .footer-primary .f-3, .footer-primary .f-6 {
        background-color: #D45049;
      }
      .footer-primary .f-4 {
        clear: both;
      }
      .footer-primary .f-5 {
        background-color: #d1443d;
      }
      .footer-primary .grid-item-inner {
        border-bottom: 1px solid #d9645e;
        min-height: 23.14286em;
        /*  Optimal min-height (?)  */
      }

      .footer-primary-last .f-7 .grid-item-inner {
        border-bottom: none;
      }
      .footer-primary-last .grid-item-inner {
        border-top: 1px solid #e0edef;
        border-right: 4px solid #e0edef;
      }
    }
/*  ===================
    Component event /
    Component article
    ===================  */
    .component-event a, .component-article a {
      color: #444444;
    }
    .component-event a:hover, .component-article a:hover {
      color: #d1443d;
    }
    .component-event .icon-arrow-right, .component-article .icon-arrow-right {
      color: #d1443d;
    }

    .component-event-meta {
      display: block;
      margin-top: 0.39286em;
    }

/*  ===================
    Banner component
    @ front page
    ===================  */
    .component-banner img {
      margin-bottom: 0.78571em;
    }
    .component-banner article:last-child .component-banner-heading {
      border-bottom: 0;
      padding-bottom: 0;
    }

/*  ===================
    Component blog
    ===================  */
    .component-blog {
      /*margin-bottom: 0.78571em;*/
    }

    .component-blog-author {
      display: block;
      border-left: 1px solid #e0edef;
      float: right;
      margin: 0 0 1.57143em 1.57143em;
      max-width: 90px;
      padding-left: 6%;
      text-align: center;
    }
    .component-blog-author img {
      border-radius: 50%;
      display: block;
      height: auto;
      margin: 0 auto 0.78571em auto;
      width: 100px;
    }
    .component-blog-author.left {
      float: left;
      margin: 0 1.57143em 1.57143em 0;
      padding-left: 0;
      padding-right: 6%;
      border: none;
      border-right: 1px solid #e0edef;
    }

/*  ===================
    Component gallup
    ===================  */
    .component-gallup-result {
      background-color: #d1443d;
      border-radius: 4px;
      display: block;
      height: 10px;
      margin-top: 10px;
    }

/*  ===================
    Component lift
    ===================  */
    .component-banner .guillotine-wrapper img,
    .component-lift .guillotine-wrapper img {
        height: auto !important;
        width: 100% !important;
    }

    .component-lift-left {
      margin-bottom: 1.57143em;
    }

    @media all and (min-width: 64em) {
      .component-lift {
        margin-left: 1.57143em;
        margin-top: 1.57143em;
        margin-bottom: 1.57143em;
      }
      .component-lift .component-lift-left {
        float: left;
        margin-left: -3.14286em;
      }
      .component-lift .component-lift-right {
        float: right;
        margin-left: 3.14286em;
      }
    }
/*  ===================
    Rating component
    ===================  */
    .component-rating {
      direction: rtl;
      position: relative;
      text-align: left;
      margin-bottom: 1.57143em;
    }
    .component-rating .icon {
      cursor: pointer;
      color: #36363f;
      display: inline-block;
      width: 10px;
      padding: 0 6px;
      position: relative;
      margin-top: 6px;
      top: 0;
      left: 0;
    }
    .component-rating .icon.active,
    .component-rating .icon:hover:before,
    .component-rating .icon:hover ~ .icon:before {
      color: #d1443d;
      content: "\2605";
      /*  .icon-star  */
    }
    .component-rating .inactive {
      color: #cfe3e6;
    }
    .component-rating.result {
      direction: ltr;
    }
    .component-rating.result .icon {
      cursor: default;
      margin-left: -6px;
      margin-right: 6px;
    }
    .component-rating.result .icon:hover:before,
    .component-rating.result .icon:hover ~ .icon:before {
      color: inherit;
    }
    .component-rating.result p:last-child {
      margin: 0;
    }

/*  ===================
    Various elements
    ===================  */
    /*  Contact element  */
    .element-contact span {
      display: block;
    }
    .element-contact .element-contact-title {
      color: #a2a2a2;
    }
    .element-contact a {
      padding-bottom: 1px;
    }

    /*  Highlight element  */
    .element-highlight-box {
      border-radius: 4px;
      border: 1px solid #cfe3e6;
      background-color: #e0edef;
      padding: 1.57143em 6%;
      margin-bottom: 1.57143em;
    }

    /*  Anchor link element  */
    .element-anchor-links {
      margin-bottom: 1.57143em;
    }
    .element-anchor-links a {
      border-bottom: 0;
    }
    .element-anchor-links a:hover .icon {
      color: #d1443d;
    }

    /*  Featured img @ osioetusivu */
    .featured-img {
      position: relative;
    }
    .featured-img img {
      display: block;
      border-radius: 0;
    }
    .featured-img .mask {
      border-top: 1px solid rgba(255, 255, 255, 0.15);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

/* Bit larger and cropped image for
480px > */
@media all and (max-width: 29.9375em) {
  .featured-img {
    overflow: hidden;
  }
  .featured-img img {
    max-width: 100%;
    display: block;
  }
}
/*  ===================
    Form element
    * Basic form settings @ global/_forms
    * Used e.g. @ Global component area
    ===================  */
    .form_radios,
    .form_checkboxes,
    .element-form, .element-form fieldset {
      border: 1px solid #e0edef;
      border-radius: 4px;
      margin-bottom: 1.57143em;
      padding: 1.57143em;
    }

    .form_row h3,
    .element-form label, .element-form legend {
      font-weight: 700;
      margin: 0;
      margin-bottom: 5px;
    }
    .element-form label span {
      font-weight: 400;
      margin-left: 3px;
    }
    .form_row h3,
    .element-form label, .element-form select, .element-form legend, .element-form .form-el {
      display: block;
    }
    .element-form select {
      margin-bottom: 1.57143em;
    }

    .form_radios,
    .form_checkboxes,
    .element-form .form-field {
      margin-bottom: 1.57143em;
    }

    .form_radios input,
    .form_checkboxes input,
    .element-form .form-field input {
      display: inline;
    }

    .form_row h3,
    .form_radios legend,
    .form_checkboxes legend,
    .element-form .form-field legend {
      margin: 0;
    }

    .form-large {
      border-radius: 4px;
      border: 1px solid #e0edef;
      border-bottom: 4px solid #e0edef;
      padding: 1.57143em;
      padding-bottom: 0;
      /*margin-bottom: 3.14286em;*/
    }

    .form-large.margin-bottom {
      margin-bottom: 3.14286em;
    }

    .form-large .search-form-float input, .form-large .search-form-float .btn--form {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    .form-large .search-form-float input {
      float: left;
      width: 72.5%;
    }
    .form-large .search-form-float .btn--form {
      float: right;
      width: 25%;
    }
    .form-large .element-form {
      border: none;
      margin: 0;
      padding: 0;
    }

    .nav-secondary--content {
      border-top: 1px solid #e0edef;
      border-left: 1px solid #e0edef;
      border-right: 1px solid #e0edef;
      margin-bottom: 3.14286em;
    }
    .nav-secondary--content .element-form {
      border: none;
      border-radius: 0;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    .nav-secondary--content .calendar-outer {
      margin-bottom: 1.57143em;
    }
    .nav-secondary--content .calendar-outer a:after {
      display: none;
    }
    .nav-secondary--content .calendar-outer .calendar {
      /*  For less capable mobile browsers there is a img fallback  */
    }
    .nav-secondary--content .calendar-outer .calendar .icon-fallback img {
      display: inline;
    }

/*  ===================
    Link element
    ===================  */
    .element-link .icon
    , .element-link .icon-arrow-right
    , .element-link .icon-arrow-left
    , .element-link .icon-arrow-bottom
    , .element-link .icon-arrow-up {
      color: #d1443d;
    }
    .element-link a {
      border: none !important;
    }
    .element-link a:visited {
        color: #d1443d;
    }
    .element-link.skin1 a:visited,
    .element-attachment.element-link a:visited {
      color: #007f83;
    }
    .element-link a:hover {
      color: #444444;
    }
    .element-link.skin1 a:hover,
    .element-attachment.element-link a:hover {
      color: #d1443d;
    }
    .element-link .element-link-inner {
      font-size: 1em;
      display: block;
      margin: 2px 0 0 20px; /* 20 */
    }
    .element-link.reset-link a:visited {
      color: #d1443d;
    }
    .element-link.reset-link a:hover {
      color: #444444;
    }

	.linkkilista p {
		margin : 0;
	}

	.linkkilista p:empty {
		display: none;
	}

	.linkkilista br {
		display: none;
	}

	.linkkilista  .element-link .element-link-inner br {
		display: block;
	}

/*  ===================

    Image element

    * Used e.g.
        @ Global content area
        @ Components

    * Without the classes images are centered and 280px wide
    * Float classes (.left/.right)
        * Small 120px (.small) images float always
        * Medium 280px images (default sizes, no class)
          and Large sizes 400px (.large)
          float on small medium breakpoint and large breakpoint
          with max-width set to 210px
        * Also in large breakpoint large images are set a little
          bit smaller (350px) to allow better text flow
        * In largest breakpoint large images are set to original size
        * .center is forcing all sizes to center in large breakpoint,
          and this is basically needed only for large images

          ===================  */
          .element-img {
            display: block;
            margin: 0 auto 1.57143em auto;
            max-width: 280px;
          }
          .element-img.small {
            max-width: 120px;
            margin-bottom: 0.78571em;
          }
          .element-img.small.right {
            float: right;
            margin-left: 1.57143em;
          }
          .element-img.small.left {
            float: left;
            margin-right: 1.57143em;
          }
          .element-img img {
            display: block;
          }
          .element-img .caption {
            border-radius: 0 0 4px 4px;
            font-size: 1em;
            padding: 0.78571em;
            border: 1px solid #cfe3e6;
            border-top: none;
            background-color: #f1f7f8;
            position: relative;
            top: -2px;
          }
          .element-img.large {
            max-width: 400px;
          }

          @media all and (min-width: 30em) and (max-width: 47.9375em) {
            .element-img.right, .element-img.left {
              max-width: 210px;
            }
            .element-img.right {
              float: right;
              margin-left: 1.57143em;
            }
            .element-img.left {
              float: left;
              margin-right: 1.57143em;
            }
          }
          @media all and (min-width: 64em) {
            .element-img.right.large, .element-img.left.large {
              max-width: 350px;
            }
            .element-img.right {
              float: right;
              margin-left: 1.57143em;
            }
            .element-img.left {
              float: left;
              margin-right: 1.57143em;
            }
            .element-img.center {
              margin-left: auto;
              margin-right: auto;
              float: none;
            }
          }
/*  ===================
    Table element
    ===================  */
    .element-table {
      width: 100%;
      overflow: auto;
      margin: 0 0 1.57143em;
    }

/*  ===================
    Pagination
    ===================  */
    .pagination {
      margin-bottom: 1.57143em;
      font-weight: bold;
    }
    .pagination a, .pagination span {
      border-radius: 4px;
      color: #d1443d;
      display: block;
      float: left;
      border: 1px solid #e0edef !important;
      border-bottom: 4px solid #e0edef !important;
      padding: 0.39286em 0.52381em !important;
      margin: 0 0 3px 3px;
    }
    .pagination a:hover {
      border-color: #d1443d !important;
      border-bottom-color: #bd342d !important;
      background-color: #d1443d;
      color: #fff;
    }

/*  ===================
    Calendar
    * Scalable table
    ===================  */
    .calendar {
      position: relative;
      font-weight: bold;
      background-color: #fff;
      display: -moz-inline-stack;
      display: inline-block;
      vertical-align: middle;
      *vertical-align: auto;
      zoom: 1;
      *display: inline;
      width: 100%;
      overflow: hidden;
      margin-bottom: 1.57143em;
    }
    .calendar td:first-child {
      border-left: 0;
    }

    .cal-table {
      border-radius: 0 0 4px 4px;
      position: relative;
      border-collapse: separate;
      width: 100%;
      border: 1px solid #e0edef;
      border-top: none;
    }

    .cal-caption {
      border-radius: 4px 4px 0 0;
      text-align: center;
      background: #656576;
      margin-right: 1px;
      /*  For less capable mobile browsers there is a img fallback  */
    }
    .cal-caption, .cal-caption a {
      color: #fff;
      line-height: 44px;
    }
    .cal-caption a {
      display: inline;
      border: none;
      padding: 0;
      padding: 0 10px;
      top: 0;
    }
    .cal-caption a:hover {
      color: #d1443d;
    }
    .cal-caption .cal-prev {
      float: left;
    }
    .cal-caption .cal-next {
      float: right;
    }
    .cal-caption .icon-fallback img {
      margin: 0;
    }

    .cal-body {
      width: 100%;
    }
    .cal-body td {
      padding: 0;
      border: none;
      border-left: 1px solid #e0edef;
    }
    .cal-body a {
      border-top: 1px solid #e0edef;
      display: block;
      padding: 0;
      position: relative;
      line-height: 44px;
      color: #444444;
      text-align: center;
    }
    .cal-body a:hover {
      background: #f1f7f8;
    }

    .cal-off a {
      color: #ccc;
      font-weight: normal;
    }

    .cal-today a {
      color: black;
      background-color: #f1f7f8;
    }

    .cal-selected a {
      margin: 0 -1px;
      color: #fff;
      background: #d1443d;
      border-top: 1px solid #d1443d;
    }
    .cal-selected a:hover {
      color: #fff;
      background-color: #d1443d;
    }

    .cal-check a {
      color: #d1443d;
      overflow: hidden;
    }


    .ui-datepicker-today a:before,
    .cal-check a:before {
      content: '';
      position: absolute;
      top: -6px;
      right: -6px;
      width: 12px;
      height: 12px;
      background-color: #d1443d;
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }

    .lt-ie8 .cal-table {
      *border-collapse: collapse;
    }
    .lt-ie8 .cal-body a {
      zoom: 1;
    }

/*  ===================
    Sitemap list
    ===================  */
    .element-sitemap {
      margin-left: -1.57143em;
      margin-bottom: 1.57143em;
    }
    .element-sitemap ol {
      margin: 0 0 0 1.57143em;
      padding: 0;
      counter-reset: section;
    }
    .element-sitemap li {
      list-style-type: none;
      counter-increment: section;
      padding: 2px 0;
    }
    .element-sitemap li:before {
      /*  Note removing the space after ',' fixes IE7's CSS parser  */
      content: counters(section,".") ". ";
    }
    .element-sitemap li a {
      border-bottom: 1px solid #bed9de;
      padding-bottom: 1px;
      color: #444444;
    }
    .element-sitemap li a:hover {
      color: #d1443d;
    }
    .element-sitemap li .icon-arrow-right {
      color: #d1443d;
    }
    .element-sitemap .icon {
      cursor: pointer;
      color: #d1443d;
    }
    .element-sitemap .icon.open:before {
      content: "\2191";
      /*  .icon-arrow-up  */
    }

/*  ===================
    Service index list
    ===================  */
    .service-index {
      background-color: #fff;
      border-radius: 4px;
      border: 1px solid #cfe3e6;
      border-bottom: 4px solid #e0edef;
      font-weight: bold;
      margin: 0 0 1.57143em 0;
      overflow: hidden;
      text-align: center;
    }
    .service-index ul {
      margin: 0 -6px -1px 0;
    }
    .service-index li {
      float: left;
      display: block;
      width: 20%;
    }
    .service-index a {
      color: #444444;
      display: block;
      border-right: 1px solid #e0edef;
      border-bottom: 1px solid #e0edef;
      padding: 1.57143em 0;
    }
    .service-index a:hover {
      background-color: #d1443d;
      color: #fff;
    }

/*  ===================
    Text sizing
    ===================  */
    .text-sizing {
      position: absolute;
      top: -7px;
      right: 12px;
      text-transform: uppercase;
      font-weight: bold;
    }
    .text-sizing .text-sizing-small-letter,
    .text-sizing .text-sizing-large-letter {
      cursor: pointer;
      margin-left: 5px;
    }
    .text-sizing .text-sizing-small-letter:hover,
    .text-sizing .text-sizing-large-letter:hover {
      color: #d1443d;
    }
    .text-sizing .text-sizing-small-letter {
      font-size: 20px;
    }
    .text-sizing .text-sizing-large-letter {
      font-size: 26px;
    }

/*  ===================
    Comments
    ===================  */
    .comment {
      border-radius: 4px;
      border: 1px solid #e0edef;
      padding: 1.57143em 1.57143em 0 1.57143em;
      margin-bottom: 1.57143em;
    }

/*  ===================

    Grid / Responsive widths
    * These are the main scaffolding elements for the site / components
    * Container (@ _layout) controls the main contents max-width
    * Javascript controls the better floating

    ===================  */
    /*  Grid item  */
    .grid-item, .component {
      float: left;
      position: relative;
      width: 100%;
    }

    .grid-item-inner {
      padding: 1.57143em 6% 0 6%;
    }

    .bp-med-w-100 {
      width: 100%;
    }

    .bp-med-w-35 {
        width: 100%;
    }

    .bp-med-w-50-33 {
      width: 100%;
    }

    .bp-med-w-50-66 {
      width: 100%;
    }

    /*
    ===================
    Medium breakpoint
    ===================
    */
    @media all and (min-width: 48em) {
        .grid-item-inner {
            padding-top: 3em;
            padding-bottom: 1.5em;
            padding-left: 8%;
            padding-right: 8%
        }
        .w-100 {
            width: 100%;
        }
        .bp-med-w-35 {
            width: 35%;
        }
        .bp-med-w-40 {
            width: 40%;
        }
        .bp-med-w-40-30 {
            width: 40%;
        }
        .bp-med-w-50 {
            width: 50%;
        }
        .bp-med-w-50-33 {
            width: 50%;
        }
        .bp-med-w-50-100 {
            width: 50%;
        }
        .bp-med-w-60 {
            width: 60%;
        }
        .bp-med-w-65 {
            width: 65%;
        }
        .bp-med-w-60-70 {
            width: 60%;
        }
        .bp-med-w-70 {
            width: 70%;
        }
        .bp-med-w-100-25 {
            width: 100%;
        }
        .bp-med-w-100-50 {
            width: 100%;
        }
    }

    /*
    ===================
    Large breakpoint
    ===================
    */
    @media all and (min-width: 64em) {
        .bp-med-w-40-30 {
            width: 30%;
        }
        .bp-med-w-50-33 {
            width: 33.33%;
        }
        .bp-med-w-50-66 {
          width: 66.66%;
        }
        .bp-med-w-50-100 {
            width: 100%;
        }
        .bp-med-w-60-70 {
            width: 70%;
        }
        .bp-med-w-100-25 {
            width: 25%;
        }
        .bp-med-w-100-50 {
            width: 50%;
        }

        /*  Large and up breakpoints  */
        .bp-lrg-w-25 {
            width: 25%;
        }
        .bp-lrg-w-50 {
            width: 50%;
        }
        .bp-lrg-w-70 {
            width: 70%;
        }
        .bp-lrg-w-75 {
            width: 75%;
        }
    }

/*  ===================
    Project page
    ===================  */
    /*  Headings  */
    .heading-project-color-1 h1 {
      background: #00bd9c;
      z-index: 41;
    }

    /*  Secondary navigation colors  */
    .nav-project-color-1 .icon-arrow-right, .nav-project-color-1 .icon-arrow-down {
      color: #00bd9c;
    }
    .nav-project-color-1 li.active > a {
      border-left-color: #00bd9c;
    }
    .nav-project-color-1 a:hover {
      color: #00bd9c;
    }

    /*  Secondary navigation wide colors  */
    @media all and (min-width: 48em) {
      .nav-secondary--wide.nav-project-color-1 li.active a {
        background-color: #fff;
        border-bottom-color: #00bd9c;
        color: #00bd9c;
      }
      .nav-secondary--wide.nav-project-color-1 a:hover {
        border-bottom-color: #00bd9c;
      }
    }
/*  Project page colors
* Add .project-page-1 to .main  */
.project-page-1 .component a {
  color: #00bd9c;
}
.project-page-1 .component a:hover {
  color: #444444;
}
.project-page-1 .component a:hover h1, .project-page-1 .component a:hover h2, .project-page-1 .component a:hover h3, .project-page-1 .component a:hover h4, .project-page-1 .component a:hover h5, .project-page-1 .component a:hover h6 {
  color: #00bd9c;
}
.project-page-1 .component.content a:visited, .project-page-1 .component .links-basic a:visited {
  color: #007F83;
}
.project-page-1 .component .primary-heading h2 {
  color: #33485f;
}
.project-page-1 .component .meta-heading h4 {
  border-color: #00bd9c;
}
.project-page-1 .component .meta-heading a:hover {
  color: #fff;
  background-color: #00bd9c;
}
.project-page-1 .component .meta-heading a:hover h4 {
  background-color: #00bd9c;
}
.project-page-1 .component .element-link a {
  color: #444444;
}
.project-page-1 .component .element-link .icon-arrow-right {
  color: #00bd9c;
}
.project-page-1 .component .list a {
  color: #444444;
}
.project-page-1 .component .list a:hover {
  color: #00bd9c;
}
.project-page-1 .component .list a:hover h1 {
  color: #00bd9c;
}
.project-page-1 .component .list .icon-arrow-right {
  color: #00bd9c;
}
.project-page-1 .component table th {
  background-color: #00bd9c;
  border-color: #00bd9c;
}
.project-page-1 .component .list-rating a {
  color: #9999a8;
}
.project-page-1 .component .list-rating a:hover {
  color: #00bd9c;
}
.project-page-1 .component .component-gallup-result {
  background-color: #00bd9c;
}

/*  Headings  */
.heading-project-color-2 h1 {
  background: #e87e04;
  z-index: 41;
}

.project-title-color1 h1 {
	color: #00bd9c;
	margin-top: 21px;
}

.project-title-color2 h1 {
	color: #e87e04;
	margin-top: 21px;
}

/*  Secondary navigation colors  */
.nav-project-color-2 .icon-arrow-right, .nav-project-color-2 .icon-arrow-down {
  color: #e87e04;
}
.nav-project-color-2 li.active > a {
  border-left-color: #e87e04;
}
.nav-project-color-2 a:hover {
  color: #e87e04;
}

/*  Secondary navigation wide colors  */
@media all and (min-width: 48em) {
  .nav-secondary--wide.nav-project-color-2 li.active a {
    background-color: #fff;
    border-bottom-color: #e87e04;
    color: #e87e04;
  }
  .nav-secondary--wide.nav-project-color-2 a:hover {
    border-bottom-color: #e87e04;
  }
}
/*  Project page colors
* Add .project-page-1 to .main  */
.project-page-2 .component a {
  color: #e87e04;
}
.project-page-2 .component a:hover {
  color: #444444;
}
.project-page-2 .component a:hover h1, .project-page-2 .component a:hover h2, .project-page-2 .component a:hover h3, .project-page-2 .component a:hover h4, .project-page-2 .component a:hover h5, .project-page-2 .component a:hover h6 {
  color: #e87e04;
}
.project-page-2 .component .primary-heading h2 {
  color: #33485f;
}
.project-page-2 .component .meta-heading h4 {
  border-color: #e87e04;
}
.project-page-2 .component .meta-heading a:hover {
  color: #fff;
  background-color: #e87e04;
}
.project-page-2 .component .meta-heading a:hover h4 {
  background-color: #e87e04;
}
.project-page-2 .component .element-link a {
  color: #444444;
}
.project-page-2 .component .element-link .icon-arrow-right {
  color: #e87e04;
}
.project-page-2 .component .list a {
  color: #444444;
}
.project-page-2 .component .list a:hover {
  color: #e87e04;
}
.project-page-2 .component .list a:hover h1 {
  color: #e87e04;
}
.project-page-2 .component .list .icon-arrow-right {
  color: #e87e04;
}
.project-page-2 .component table th {
  background-color: #e87e04;
  border-color: #e87e04;
}
.project-page-2 .component .list-rating a {
  color: #9999a8;
}
.project-page-2 .component .list-rating a:hover {
  color: #e87e04;
}
.project-page-2 .component .component-gallup-result {
  background-color: #e87e04;
}

/*  ===================
    Featured img
    ===================  */
    .featured-img-project {
      position: relative;
      z-index: 40;
      overflow: hidden;
      height: 170px;
    }
    .featured-img-project .mask {
      border-top: 1px solid rgba(255, 255, 255, 0.15);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .featured-img-project img {
      border-radius: 0;
      max-width: 185%;
      display: block;
      margin-left: -35%;
    }

    @media all and (min-width: 30em) {
      .featured-img-project {
        height: auto;
      }
      .featured-img-project img {
        max-width: 100%;
        margin: 0;
      }
    }
/*  ============================================

    In english mods
    * Overrides elements in the site
    * Remember to add "in-english" class to body

    ============================================  */
    .in-english {
  /*  No primary aside on the english version
  * Remove the margin from the page wrapper  */
  /*  Logo change
      * @ header
      * NOTE: On smallest view the finnish logo is displayed
      because there isn't space for the wide english logo  */
    }
    .in-english .page {
      margin-left: 0;
    }
    .in-english .nav-primary-top .list-icons {
      right: 500px;
    }
    @media all and (min-width: 30em) {
      .in-english .header-logo h1 {
        background-position: -10px -40px;
        width: 195px;
      }
    }
    @media all and (min-width: 48em) {
      .in-english {
        /*  Give space for the logo  */
      }
      .in-english .header-bar {
        width: 210px;
      }
      .in-english .nav-primary-top {
        margin-left: 214px;
        padding: 0 0 0 8px;
      }
    }

/* Prototyylit                                          */
/********************************************************/
.proto.V,
div.proto {
  opacity: 0.7;
  z-index: 1000;
  position: absolute;
  margin: 3px 0 0 3px;
  padding: 1px 6px 1px 3px;
  background: rgba(60, 155, 30, 0.8);
  border: 1px solid rgba(0, 155, 0, 0.2);
  border-bottom-right-radius: 4px;
  font-family: "Lato", Helvetica, Arial, sans-serif;
  color: #FFF;
  font-weight: bold;
  font-size: 12px;
  text-align: center;
  line-height: 1.5;
  text-shadow: 0 0px 2px #000;
  box-shadow: inset 1px -1px 6px #50C850, inset -1px 1px 2px rgba(100, 155, 100, 0.5);
}
.proto.Kesken,
.proto.K,
.proto.punainen {
  background: #EB4D4D;
  box-shadow: inset 1px -1px 6px #FF7C24, inset -1px 1px 2px rgba(236, 28, 19, 0.73);
  opacity: 0.5;
  text-shadow: 0 0px 2px #000;
}
.proto.OH,
.proto.keltainen {
  background: #EBD84D;
  box-shadow: inset 1px -1px 6px #FFE524, inset -1px 1px 2px #ECCA13;
  opacity: 0.8;
  text-shadow: 0 0px 2px #000;
}
/* Reijon lisäykset */
/********************************************************/
ol.protonavi {
  display: block;
  margin: 10px;
  padding: 0 45px;
}
ol.protonavi li {
  display: inline-block;
  margin: 0 5px 0 10px !important;
  font-size: 12px !important;
}
.errormessage { display: none }

.form_contents .error .errormessage {
	display: block;
	border-style: solid;
	border-color: red;
	border-width: 1px;
	padding: 5px;
}

.component.form-edit form,
.component.form-view form {
    border: 1px solid #e0edef;
    border-radius: 4px;
    margin-bottom: 1.57143em;
    padding: 1.57143em;
    position: relative;
}

.component.form-edit form .form_row.form_checkboxes,
.component.form-view form .form_row.form_checkboxes,
.component.form-edit form .form_row.form_radios,
.component.form-view form .form_row.form_radios {
    border: none;
    padding: 0;
}

.component.form-edit form fieldset,
.component.form-view form fieldset {
    border: 1px solid #e0edef;
    border-radius: 4px;
    margin-bottom: 1.57143em;
    padding: 1.57143em;
}

.component.form-edit form fieldset legend,
.component.form-view form fieldset legend {
    font-weight: bold;
}

.component.form-edit form fieldset legend span.form_required_field,
.component.form-view form fieldset legend span.form_required_field {
    color: #ff6666;
    float: none;
    left: 0;
    margin: 0;
    position: relative;
}

form .form_row label {
  display: inline-block;
  font-weight: normal;
  margin: 0 0 5px 0;
}
.form_row { position: relative }
.form_row h3 {
  font-size: 1em;
  line-height: 1.57143;
  color: #444444;
  background: white;
  left: 15px;
  position: absolute;
  margin-top: -34px;
  font-weight: normal;
}
.form_required_field {
  color: #FF6666;
  float: left;
  position: static;
  margin: 0 5px 0;
}
.form_checkboxes .form_required_field,
.form_radios .form_required_field {
  position: absolute;
  left: -3px;
  margin-top: -31px;
  color: #FF6666;
}
.formInput {
  position: relative;
  background: none;
  padding: 0;
  margin: 0;
}
.formInput input { margin-bottom: 0 }
.form_row.no-grouping {
  padding: 15px 0;
  margin: 0;
  border: none;
}
.form_row.no-grouping h3 { display: none }
.form_row.no-grouping .form_required_field {
  float: left;
  position: static;
  margin: 0 5px 0;
}

/* staton seurantakuva aiheutti sivun pohjalla tyhjän kaistaleen*/
body > img { position: absolute }
#palvelut_aakkosittain .otsikko {
  font-size: 1.5em;
  font-weight: bold;
}
#palvelut_aakkosittain .element-link { margin-top: 10px }
#palvelut_aakkosittain .anchor-list { margin-bottom: 15px }
#palvelut_aakkosittain .anchor-list a {
  font-size: 1.1em;
  font-weight: bold;
}
#cal-pick-wrapper .form_row {
  display: block;
  width: 50%;
  float: left;
}
#cal-pick-wrapper .form_row label {
  font-weight: bold;
  display: block;
}
#cal-pick-wrapper .form_row input.cal-pick {
  width: 75%;
  margin-right: 1%;
}
#cal-pick-wrapper i {
  max-width: 17%;
  min-width: 10px;
  color: #d1443d;
  font-size: 20px;
  line-height: 25px;
}
#ui-datepicker-div {
  display: none;
  z-index: 999999999999 !important;
  background: #FFF;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
  border-top: 1px solid #E0EDEF;
  margin-top: 5px;
  margin-bottom: 5px;
}
.ui-datepicker-next,
.ui-datepicker-prev {
  float: left;
  font-size: 21px;
  color: #FFF;
  cursor: pointer;
  line-height: 1;
  position: relative;
  top: -6px;
}
.ui-datepicker-next:hover,
.ui-datepicker-prev:hover { color: #d1443d }
.ui-datepicker-next { float: right }
.ui-datepicker-title {
  font-weight: bold;
  text-align: center;
}
.ui-datepicker-header {
  background: #656576;
  margin: 0;
  border: none;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  padding: 14px 8px 13px 9px;
  font-size: 0.9em;
  color: #FFF;
  line-height: 1;
}
#ui-datepicker-div th { display: none }
#ui-datepicker-div td {
  text-align: center;
  padding: 0.38571em 0.78571em;
}
#ui-datepicker-div .ui-datepicker-today {
  position: relative;
  overflow: hidden;
}
#ui-datepicker-div td:hover { background: #F1F7F8 }
#ui-datepicker-div td:hover a { color: #333 !important }
#ui-datepicker-div td.ui-datepicker-unselectable:hover { background: none }
#ui-datepicker-div td a {
  color: #656576;
  font-weight: bold;
  font-size: 0.8em;
}
#ui-datepicker-div .ui-datepicker-current-day { background: #d1443d }
#ui-datepicker-div .ui-datepicker-current-day a { color: #FFF }
.cal-pick-divider {
  position: absolute;
  right: 7.5%;
  margin-top: 4px;
}
#integraatio table * { font-size: 0.95em }
#integraatio table th { font-size: 1.2em }
.highlight {
  background: #d1443d;
  color: #FFF;
  border-radius: 5px;
  padding: 0 3px;
}
#keskustelijoita {
  float: right;
  position: relative;
  top: -18px;
}
.meta-text.author img {
  border-radius: 50%;
  float: left;
  height: 50px !important;
  width: 50px !important;
}
.meta-text.author span {
  padding: 15px 15px 0 10px;
  display: block;
  float: left;
  color: #d1443d;
}
.blog-name {
  padding-bottom: 1px;
  color: #d1443d;
}
.form_input label,
.form_textarea label,
.form_select label { font-weight: bold !important }
#ui-datepicker-div .ui-datepicker-unselectable { background: #F0F0F0 !important }
.ui-datepicker-calendar .ui-state-disabled span {
  background: none;
  border: none;
}
.ui-datepicker-buttonpane { display: none }
#ui-datepicker-div td:hover { background: #D1443D !important }
.img-80-80 {
  width: 80px !important;
  height: 80px !important;
}
.img-90-90 {
  width: 90px !important;
  height: 90px !important;
}
.img-120-120,
.img-400-x { height: auto !important }

.nav-secondary-inner i {
	max-height: 44px;
}

.meta-text.author .img-90-90 {
  width: 50px !important;
  height: 50px !important;
}
#components .statoelement:not(a), #components .elementcontainer { display: block }
.component-edit { background: #FFF }
#aside-primary hgroup {
  font-size: 1.21429em;
  padding: 0;
  margin: 0;
}
#aside-primary hgroup h1 { color: #D1443D }
.pagination span.selected,
.pagination span:hover {
  cursor: pointer;
  border-color: #D45049 !important;
  border-bottom-color: #B1302A !important;
  background-color: #D45049;
  color: #FFF;
}
textarea.ingressi-edit {
  min-height: 0;
  resize: none;
  text-indent: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  color: #333;
  overflow-y: hidden;
}
textarea.title-edit {
  min-height: 0;
  resize: none;
  text-indent: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  color: #D1443D;
  overflow-y: hidden;
}
.col-select {
  z-index: 9999999;
  float: right;
  margin-right: 155px;
  color: #FFF;
  font-size: 0.85714em;
  background-color: #36363F;
  border-radius: 0 0 0 4px;
  padding: 5px 10px;
  top: -1px;
  position: relative;
  border-right: 2px solid #D33;
}
.col-select input {
  vertical-align: middle;
  margin-right: 4px;
}
.col-select label {
  margin-right: 4px;
  font-size: 12px;
}
.col-select h4 {
  display: inline-block;
  padding: 0;
  margin: 0 5px 0 0;
  font-size: 12px;
  color: #FFF;
}
.component-korjaa {
  float: left;
  position: relative;
  background: #FFF;
}
.component-korjaa .meta-heading i { display: none }
.component-korjaa .meta-heading input { margin: 0 }
.component-korjaa .meta-heading h4 {
  padding: 10px;
  z-index: 11000;
}
/*.element-link a {
  word-break: break-all;
} */
.components .cms_outline_selected > .elementcontainer > .component-korjaa .meta-heading h4 { background: #D1443D }
body.dragging.resizing {
  cursor: col-resize !important;
}
img.handle {
  display: none;
  height: 18px;
  z-index: 9999999;
  position: absolute;
  right: 0;
  margin: 8px 10px 0 0;
  cursor: move;
  cursor: -webkit-grab;
  cursor: -moz-grab;
}
img.handle:active {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
}
.dragmode .component-korjaa:hover img.handle { display: block }
.ui-resizable-s,
.ui-resizable-e { display: none !important }
.ui-icon-gripsmall-diagonal-se { display: none !important }
.tapahtuma-aika,
.tapahtuma-paikka {
  font-family: Lato, Helvetica, Arial, sans-serif;
  font-size: 1em;
  line-height: 19px;
  display: block;
  font-weight: bold;
}
body.dragging.resizing img.handle {
  display: block !important;
}
body.dragging.resizing .ui-resizable-handle.ui-resizable-se.ui-icon.ui-icon-gripsmall-diagonal-se {
  display: block !important;
}
.reverse {
  unicode-bidi: bidi-override;
  direction: rtl;
}
.reverse,
.eml,
.element-contact .reverse { display: inline }
.element-contact .eml { display: inline-block }
.component-korjaa embed,
.component-korjaa object,
.component-korjaa iframe,
.component embed,
.component object,
.component iframe { width: 100% }
.proto.sk {
  position: static;
  width: auto;
  float: none;
  clear: both;
  display: inline-block;
  margin-bottom: 5px;
}
.component-korjaa .cms_noimage {
  max-height: 200px;
  width: 100%;
}

/* Leveä */
.bp-med-w-50-66 .component-lift,
.bp-med-w-100 .component-lift {
    display: block;
}
.bp-med-w-50-66 .component-banner,
.bp-med-w-100 .component-banner {
    display: none;
}
/* Kapee */
.bp-med-w-100-50 .component-banner,
.bp-med-w-50-33 .component-banner {
    display: block;
}
.bp-med-w-100-50 .component-lift,
.bp-med-w-50-33 .component-lift {
    display: none;
}

.korostuslaatikko {
  background-color: #e0edef;
  border: 1px solid #cfe3e6;
  border-radius: 4px;
  padding: 1.57143em 6%;
  margin: 1.57143em 0;
}

.korostuslaatikko * { outline: none }
.korostuslaatikko > div { border-radius: 2px }
.korostuslaatikko > div > div { padding: 7px }
.korostuslaatikko p { margin: 0 }
/*
.korostuslaatikko h1,
.korostuslaatikko h2,
.korostuslaatikko h3,
.korostuslaatikko h4,
.korostuslaatikko h5 {
color: #FFF;
} */
.korostuslaatikko .red {
  color: #FFA4A4;
  font-weight: bold !important;
}
.korostuslaatikko .blue {
  color: #A4B2FF;
  font-weight: bold !important;
}
.korostuslaatikko .green {
  color: #A4FFBE;
  font-weight: bold !important;
}
.korostuslaatikko .grey {
  color: #B6B2B2;
  font-weight: bold !important;
}
.korostuslaatikko .yellow-highlight {
  font-weight: bold !important;
  background: #FFFF7A;
  border-radius: 2px;
  margin: 0 2px;
  color: #3E3C3C;
  padding: 0 1px 0 3px;
}
.korostuslaatikko .grey-highlight {
  font-weight: bold !important;
  background: #F3F3F3;
  border-radius: 2px;
  margin: 0 2px;
  color: #3E3C3C;
  padding: 0 1px 0 3px;
}
.ui-dialog {
  z-index: 1000000;
  padding: 30px 30px 30px 20px;
}
.ui-dialog .ui-button {
  text-align: right;
  float: right;
  margin-bottom: 5px;
  background: #D1443D;
  color: #FFF;
  border-radius: 2px;
  padding: 5px 8px;
  box-shadow: 2px 2px 4px -1px rgba(41, 41, 41, 0.44);
  border: 1px solid #F34444;
  border-top: 1px solid #B82C2C;
  border-left: 1px solid #DF5252;
  width: 95px;
  position: relative;
  right: -4px;
}
.ui-dialog .ui-dialog-title {
  text-align: right;
  float: left;
  margin-bottom: 5px;
  position: relative;
  background: #413F3F;
  color: #FFF;
  border: none;
  border-radius: 2px;
  padding: 5px 8px;
  display: block;
  line-height: 1.4;
  box-shadow: 2px 2px 4px -1px rgba(41, 41, 41, 0.44);
  border: 1px solid #000;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
}
.ui-dialog iframe {
  box-shadow: 5px 4px 15px -4px rgba(41, 41, 41, 0.61);
  border: 2px solid #797979;
  border-radius: 2px;
  margin: 0;
  background: #FFFFFF;
}
.karttaBoksi { height: auto !important }
.grid-item-inner .grid-item-inner .elementcontainer,
.grid-item-inner .grid-item-inner .statoelement {
  /*outline: 0 !important;*/
  margin-bottom: 5px;
}
.content_editor.content_side_tab { margin-bottom: 40px }
.content_editor.content_side_tab * { /*outline: 0 !important;_NO__DOTCOMMA__AFTER__*/ }
.primary-heading .list-ingress { margin-bottom: 0 }
.primary-heading .block { margin-bottom: 20px }
.form_row.form_select select { display: block }
.form-preview form {
  border: 1px solid #E0EDEF;
  border-radius: 4px;
  margin-bottom: 1.57143em;
  padding: 1.57143em;
}
.form_row.form_select select,
.form-view .form_row,
.form-edit .form_row,
.form-preview .form_row {
  margin-top: 8px;
  margin-bottom: 1.5em;
  overflow: hidden;
  position: static;
}
.form_contents { position: relative }
.form_row .textarea-counter {
  font-size: 0.9em;
  display: inline-block;
  margin-left: auto;
  text-align: right;
  margin-right: 0;
  float: right;
}
/*

.form-preview .form_checkboxes div > span,
.form-preview .form_radios  div > span,
.form-view .form_checkboxes div > span,
.form-view .form_radios  div > span {
display: block !important;
}

*/
a .linkdescription {
  margin: 0 0 0 5px;
  font-size: 0.85em;
  display: inline;
}
.linkdescription:before {
  content: "(";
  padding-right: 1px;
}
.linkdescription:after {
  content: ")";
  padding-left: 1px;
}
.form-large .search-form-float .hakutarkennecb { width: auto }
.ui-dialog-titlebar { padding: 0 }
.tablespans { display: table }
.tablespans .eml { vertical-align: top }
.elementti .tablespans {
  font-size: 0.92857em;
  line-height: 1.1;
}

.karttaModal { display: inline }
.elementti > div > p { display: inline }
.elementti > p > span > a {
  font-size: 13px;
  margin-left: 3px;
}
.elementti > span > input { vertical-align: top }
.elementti > span > span > a {
  vertical-align: top;
  line-height: 13px;
}
.elementti > span,
.elementti > span > span,
.elementti > p,
.elementti > p > strong,
.elementti > p > span {
  vertical-align: top;
  margin-bottom: 5px;
  clear: left;
  line-height: 13px;
}
.elementti > p:after {
  clear: both;
  display: table;
  content: "";
}
.elementti span img {
  float: left;
  margin-right: 5px;
}
.elementti > p > strong {
  font-size: 1.1em;
  margin-bottom: 8px;
  display: block;
}
.meta-heading h4 { max-width: 100% }
.display_block { display: block }
.btn--form span {
  font-size: 12px;
  margin-right: 5px;
}
.elementti.palveluntarjoaja > strong,
.elementti.palveluntarjoaja > span { display: block }
.elementti .expand-content { overflow: hidden }
.elementti .expand-content > span {
  float: left;
  clear: left;
}
.elementti label.expand { margin-bottom: 5px !important }
.elementti p { display: inline }
hr + hr { display: none }
.list_line li { list-style-image: url(../ElementImages/hyphen2.png) }
table  td.align_right,
table  th.align_right { text-align: right }
.attachmentdescription { margin-left: 5px }
.imagespan_left_row {
  margin: 0;
  display: block;
  float: none;
  clear: both;
  text-align: left;
}
.imagespan_left {
  float: left;
  padding-right: 10px;
}
.imagespan_right_row {
  margin: 0;
  display: block;
  float: right;
  clear: both;
  text-align: right;
}
.imagespan_right_row:after,
.imagespan_left_row:after {
    clear: both;
    content: "";
    display: table;
}
.imagespan_right {
  float: right;
  padding-left: 10px;
}
.imagespan_center {
  margin: 0 auto;
  display: block;
  float: none;
  text-align: center;
}

.imagespan_center .media_caption {
    margin: 0 auto;
    position: relative;
    left: -1px;
	text-align: left;
}

.rajoitteet input {
  width: 14px;

  position: relative;
  bottom: 12px;
  display: inline-block;
}
.rajoitteet img {
  width: 43px;
  max-width: 16%;
  display: inline-block;
}
.rajoitteet div {
  width: 100%;
  line-height: 1;
  vertical-align: top;
  display: inline-block;
}
.rajoitteet div div { max-width: 75% }
.elementti input { display: inline }
.karttaBoksi { display: inline !important }
.elementti p { margin: 0 !important }
.elementti textarea {
  height: 40px;
  min-height: 0;
  margin: 0;
  padding: 5px 1%;
  text-indent: 0;
  width: 98%;
}

.palveluhakemisto .expand i,
.elementti .expand i {
  float: left;
  margin-right: 5px;
}
.korostuslaatikko { clear: both }
.imagespan_left_edit,
.imagespan_right_edit,
.imagespan_left:after,
.imagespan_right:after {
  display: table;
  content: "";
}
.imagespan_left_edit:after,
.imagespan_left:after { clear: left }
.imagespan_right_edit:after,
.imagespan_right:after { clear: right }

.media-120x120 {
    width: 120px;
    height: 120px;
}
.media-280x200 {
    max-width: 280px;
    max-height: 200px;
}
.media-280x350 {
    max-width: 280px;
    max-height: 350px;
}
.media-400x250 {
    max-width: 400px;
    max-height: 250px;
}
.media-original {
    /*width: auto;
    height: auto;*/
}

span.media_caption {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
    display: block;
    border-radius: 0 0 4px 4px;
    font-size: 1em;
    padding: 11px 10px;
    background-color: #f1f7f8;
    position: relative;
    top: 0px;
    text-decoration: none !important;
    font-style: normal;
    box-shadow: inset 0px 0px 0 1px #cfe3e6;
    max-width: 100%;
}
.image-120 span.media_caption {
    width: 120px !important;
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}
.image-280 span.media_caption {
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}
.image-400 span.media_caption {
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}
.diaari-ripustus table {
  border-collapse: collapse;
  margin-bottom: 10px;
}
.diaari-ripustus table,
.diaari-ripustus td {
  background: #FFF;
  padding: 5px;
}
.diaari-ripustus table:nth-child(1) tr:nth-child(1) td {
  border: none;
  font-weight: bold;
  padding: 0;
  text-transform: capitalize;
}
.diaari-ripustus table:nth-child(1) tr:nth-child(2) td {
  background: #d1443d;
  color: #FFF;
  font-weight: bold;
}
.diaari-ripustus table:nth-child(2) tr:nth-child(1) td {
  background: #d1443d;
  color: #FFF;
  font-weight: bold;
}
.component img,
.imagespan_left_row_edit img,
.imagespan_right_row_edit img,
.imagespan_left_edit img,
.imagespan_right_edit img,
.imagespan_center_edit img,
.imagespan_left img,
.imagespan_right img,
.imagespan_center img { /*height: auto !important aiheutti ongelman listauskuvissa julkipuolella*/ }
.statoelement .elementcontainer,
h1 textarea.title-edit,
.statoelement .stato5outline,
.stato5element h1 textarea,
.stato5element .stato5outline { outline: 1px dotted #8D8D8D }
.cms_outline_selected .elementcontainer,
h1 textarea:focus,
.cms_outline_selected .stato5outline { outline: 1px dotted #D1443D }
.component:not([tabindex]) { overflow: visible !important; }
.nav-secondary.nav-secondary--wide {
  /*max-height: 77px;*/
}
.footer-primary .grid-item-inner {
  border-bottom: 1px solid #d9645e;
  min-height: 378px;
}
.guillotine-wrapper {
  overflow: hidden;
  background: #FFF;
}
.ankkurilista {
	margin-bottom: 1.57143em;
}
.guillotine-wrapper img {
  /*visibility: hidden;*/
  max-width: none;
  max-height: none;
}
.ankkurilista {
	margin-bottom: 1.57143em;
}
form .confirm {
	display: none;
}

#chatti .elementcontainer {
	outline: none;
}

#chatti .chatbox {
	xborder: 1px solid #000;
	float: left;
	margin-top: 15px;
}
#chatti .output {
	border: 1px solid #000;
	height: 500px;
	overflow: auto;
	padding: 20px;
	width: 620px;
}

#chatti .output div {
	margin-top: 5px;
	margin-bottom: 0px;
}

#chatti .output div div {
	margin-top: 0px;
	margin-bottom: 0px;
}

#chatti .messageinfo {
	margin-bottom: 0;
	margin-top: 0;
}

#chatti .messagecontent {
	margin-bottom: 0;
	margin-top: 0;
}

#chatti input.message {
	margin-top: 15px;
	width: 530px;
}
#chatti .error {
	color: red;
	text-align: left;
}
#chatti .self {
	background: none repeat scroll 0 0 #d7e4ed;
	border: 0 solid #bbb;
	border-radius: 15px;
	font-size: 11px;
	margin: 0 auto;
	margin: 10px;
	position: relative;
	padding: 10px;
	width: 500px;
	/* min-height: 75px; */
}
#chatti .self .pointer {
	border-color: transparent #d7e4ed;
	border-style: solid;
	border-width: 15px 0 15px 15px;
	content: "";
	display: block;
	margin-top: -15px;
	position: absolute;
	right: -15px;
	top: 50%;
	width: 0;
	z-index: 1;
}
#chatti .admin .messageinfo strong:before {
	background: url("/images/tampere_vaakuna.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
	content: "";
	display: block;
	float: left;
	height: 16px;
	margin: 0 6px 0 0;
	width: 16px;
}
#chatti .other {
	background: none repeat scroll 0 0 #eee;
	border: 0 solid #bbb;
	border-radius: 15px;
	font-size: 11px;
	margin: 0 auto;
	position: relative;
	padding: 10px;
	width: 500px;

}
.component:not([tabindex]) > .grid-item-inner,
.component-korjaa:not([tabindex]) > .grid-item-inner {
    box-shadow: none;
}
.guillotine-wrapper br {
    display: none !important;
}
body:not(.EDIT):not(.VIEW) .media_caption {
    top: -8px;
}
body:not(.EDIT) .guillotine-wrapper {
    height: auto !important;
}

.ShowInNavigationfalse {
	color: black;
	margin-left: 10px
}
.elementti-kuva .imagespan_right_row,
.elementti-kuva .imagespan_left_row {
    padding-bottom: 1.5em;
}
.elementti-kuva .media-120x120 {
    height: 120px !important;
    width: 120px !important;
}
.elementti-kuva img {
  max-width: 100% !important;
  height: auto !important;
}
.project-page-1 #components .component:first-child .grid-item-inner,
.project-page-2 #components .component:first-child .grid-item-inner {
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
}
.project-page-1 #components .component:first-child .grid-item-inner hgroup,
.project-page-2 #components .component:first-child .grid-item-inner hgroup {
   position: relative;
   padding: 0;
}
.project-page-1 #components .component:first-child .grid-item-inner hgroup h1,
.project-page-2 #components .component:first-child .grid-item-inner hgroup h1{
  top: -1.30em;
}
}
.statoelement.imagespan_right_row_edit:after {
    clear: both;
    display: table;
    content: "";
}
.rajoitteet {
  margin-bottom: 1.57em;
}
.statoelement.imagespan_right_row_edit + .statoelement {
    clear: both;
}
.element-link .icon-arrow-right {
    margin-right: 3px;
}
figure.elementti-kuva {
    margin-bottom: 1.57em;
}
body:not(.EDIT) p:empty {
    display: none;
}
body:not(.EDIT) p:empty + br {
    display: none;
}
.elementti .p-fix p {
    display: block;
    line-height: 1.57143;
}
.p-fix p + p {
    padding: 10px 0 0;
}
.karttaBoksi.hidden {
    display: none !important;
}

.primary-heading-viivallinen h1::after {
    background-color: #e0edef;
    content: "";
    display: block;
    height: 1px;
    margin-top: 21px;
    width: 140px;
    font-size: 15px;
    position: absolute;
    z-index: 1;
}
.no-bottom-padding .primary-heading-viivallinen h1::after {
    margin-bottom: 0;
}
.no-bottom-padding .primary-heading h1 {
    margin-bottom: 0;
}
.no-bottom {
  margin-bottom: 0;
  padding-bottom: 0;
}
.elementti > div > p + p {
    display: block;
    padding: 10px 0 0;
}


.saavutettavuus .selite,
.saavutettavuus input[type='checkbox'],
.saavutettavuus img {
    vertical-align: middle;
    display: inline-block;
    position: static;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.saavutettavuus img {
    min-width: 100%;
    max-width: 100%;
}

.saavutettavuus tr,
.saavutettavuus td,
.saavutettavuus table {
    border: none;
}
.tampere-linkki-inline a {

}
.component-banner h4 a,
.component-banner h3 a,
.component-banner h2 a {
    color: #33485f;
    border-bottom: 1px solid #e0edef;
}

.component-banner h4 a:hover,
.component-banner h3 a:hover,
.component-banner h2 a:hover {
    color: #d1443d;
}
.guillotine-wrapper img {
    width: 100% !important;
}

.element-attachment {
    position: relative;
    padding-left: 20px;
}

.element-attachment a i {
    position: absolute;
    left: 0;
}
.element-attachment .element-link-inner {
    margin-left: 0;
}
#chatti .messagecontent {
  word-wrap: break-word;
}

/* padding-vähennys viivattomiin kuvauksiin */
.grid-item-inner.description {
  /*padding-bottom: 0;*/
  /*margin-bottom: 0;*/
}
.grid-item-inner.description .primary-heading.primary-heading-viivallinen {
  padding-bottom: 0;
}
/*
.component.no-bottom-padding + input + .component,
.component.no-bottom-padding + .component {
    padding-top: 0;
}
.component.no-bottom-padding + input + .component > .grid-item-inner,
.component.no-bottom-padding + .component > .grid-item-inner {
    padding-top: 0;
}*/
/* padding-vähennys viivattomiin kuvauksiin päättyy */
.footer-primary-last .list--links-small a {
  display: inline;
}
#resultsettable_paging span {
  font-size: 0;
}
#resultsettable_paging span a {
  font-size: 12px;
}
.featured-img-project img[src='ElementImages/noimage.png'] {
  width: 1200px !important;
  height: 350px !important;
}
body.EDIT:not(.dragmode) .component {
  position: static !important;
}
body.EDIT:not(.dragmode) #components {
    position: static !important;
    height: auto !important;
}
.dragmode .editor-container .grid-item-inner {
  max-height: 200px;
  overflow: hidden;
}
.dragmode .editor-container .grid-item-inner .meta-heading {
  display: none;
}
.text-sizing .active {
  color: #d1443d;
}
.dragmode .editor-container .grid-item-inner:after {
    content: "";

    width: -moz-calc(100% - 4px);
    width: -webkit-calc(100% - 4px);
    width: calc(100% - 4px);
    height: -moz-calc(100% - 4px);
    height: -webkit-calc(100% - 4px);
    height: calc(100% - 4px);
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    border-bottom: 2px solid rgb(235, 243, 245);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIyJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ4JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc5JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 2%, rgba(255,255,255,0) 48%, rgba(255,255,255,1) 79%, rgba(255,255,255,1) 99%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(255,255,255,0)), color-stop(48%,rgba(255,255,255,0)), color-stop(79%,rgba(255,255,255,1)), color-stop(99%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 2%,rgba(255,255,255,0) 48%,rgba(255,255,255,1) 79%,rgba(255,255,255,1) 99%);
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 2%,rgba(255,255,255,0) 48%,rgba(255,255,255,1) 79%,rgba(255,255,255,1) 99%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 2%,rgba(255,255,255,0) 48%,rgba(255,255,255,1) 79%,rgba(255,255,255,1) 99%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 2%,rgba(255,255,255,0) 48%,rgba(255,255,255,1) 79%,rgba(255,255,255,1) 99%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}


.nav-secondary-inner .yllapito i {
    display: inline;
}


/* Tiedotenoston aikaleiman marginaalit */
.component-event.tiedotenosto h1.heading {
    margin-bottom: 0;
}

.component-event.tiedotenosto time.meta-text {
    display: block;
    margin: 13px 0 25px 0;
}
/* /Tiedotenoston aikaleiman marginaalit */


/* Tarkennetun haun hakunapit */
@media all and (max-width: 30em) {
    .form-large .advanced-search .search-form-float input,
    .pager-ajankohtaistapaalista .form-large .search-form-float input {
        width: 58.5%;
    }
    .form-large .advanced-search .search-form-float .btn--form,
    .pager-ajankohtaistapaalista .form-large .search-form-float .btn--form {
        width: 38%;
    }
}
/* /Tarkennetun haun hakunapit */

.listauskuva img {
	height: auto !important;
}

/* Upotuskomponentti */
#main .upotuskomponentti,
#main .upotuskomponentti iframe {
    max-width: 100% !important;
    width: 100% !important;
}
/* /Upotuskomponentti */

.uutiskeskusnostokuva {
	text-align: left;
	margin-top: 20px;
}

.uutiskeskusnostokuva figure {
	text-align: left;
	float: none;
	margin-bottom: 0;
}

.uutiskeskusnostokuva figure img {
	text-align: left;
	float: none;
}

.uutiskeskusnostokuva .element-img.left.large {
	max-width: 400px;
}

.breadcrumb {
    line-height: 2;
    margin: 0 12px 12px 1.57143em;
    padding: 0;
    text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.8);
    max-width: 80%;
    float: left;
}

.text-sizing {
    position: static;
    text-transform: uppercase;
    font-weight: bold;
    float: right;
    margin: 0 10px;
}

.main .rsbtn {
	display: table;
    position: relative;
    z-index: 50;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    float: right;
    line-height: 45px;
    height: auto !important;
    margin: 0;
	margin-left: 10px;
}

/*
.icon, .icon-arrow-right, .icon-arrow-down, .icon-arrow-left, .icon-facebook, .icon-twitter, .icon-linkedin, .icon-rss, .icon-list, .icon-cross, .icon-house, .icon-youtube, .icon-search, .icon-star, .icon-star-2, .icon-arrow-up, .icon-new-tab, .icon-plus, .icon-minus, .external .linktext:after, .icon-calendar, .icon-flickr {
    font-family: 'icomoon';
    font-size: 16px;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    position: relative;
    top: 2px;
    -webkit-font-smoothing: antialiased;
} */

.icon-volume {
	color: #444444;
	margin-right: 10px;
	text-transform: uppercase;
	font-family: "Lato", Helvetica, Arial, sans-serif;
	font-size: 0.85714em;
}

#xp1 .rsbtn_powered {
	display: none;
	}

#main #xp1 { margin-top: 10px
		}

.rs_preserve .speakerimage {
	border-style: none;
	vertical-align: text-bottom;
	width: 14px;
    height: 14px;
    margin-left: 4px;
}

.rsbtn a {
	vertical-align: middle;
}


.rs_preserve .fa-volume-up {
	font-size: 1.5em;
	vertical-align: middle;
	margin-top:-3px;
}

hgroup.noimage {
	margin-bottom: 45px !important;
}

hgroup.noimage h1 {
	 top: 42px !important;
}

.terveysasemahakuosoite {
  display: block;
}

.terveysasemahaku {
    clear: both;
	width: calc(100% - 120px) !important;	
	float: left;	
}

.terveysasemahakusubmit {
	width: 100px !important;	
	margin-left: 2% !important;
	padding: 7px 0 !important;
	float: left;
}

#terveysasemahakutulos {
  clear: both;
}

.terveysasemahakuohjehaku1 {
	margin-top: 40px;
}