/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
@import url("fonts/MyFontsWebfontsKit.css");

html {
  color: #222222;
  font-size: 1em;
  line-height: 1.4; }

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none; }
::selection {
  background: #b3d4fc;
  text-shadow: none; }

/*
 * A better looking default horizontal rule
 */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0; }

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle; }

/*
 * Remove default fieldset styles.
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical; }

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */
.browserupgrade {
  margin: 0.2em 0;
  background: #cccccc;
  color: #000000;
  padding: 0.2em 0; }

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Hide visually and from screen readers
 */
.hidden {
  display: none !important; }

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }

/*
 * Hide visually and from screen readers, but maintain layout
 */
.invisible {
  visibility: hidden; }

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */ }

.clearfix:after {
  clear: both; }

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */ }

@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */ }

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
@media print {
  *,
  *:before,
  *:after,
  *:first-letter,
  *:first-line {
    background: transparent !important;
    color: #000000 !important;
    /* Black prints faster:
                                      http://www.sanbeiji.com/archives/953 */
    box-shadow: none !important;
    text-shadow: none !important; }
  a,
  a:visited {
    text-decoration: underline; }
  a[href]:after {
    content: " (" attr(href) ")"; }
  abbr[title]:after {
    content: " (" attr(title) ")"; }
  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: ""; }
  pre,
  blockquote {
    border: 1px solid #999999;
    page-break-inside: avoid; }
  /*
   * Printing Tables:
   * http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
    display: table-header-group; }
  tr,
  img {
    page-break-inside: avoid; }
  img {
    max-width: 100% !important; }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3; }
  h2,
  h3 {
    page-break-after: avoid; } }

/*--------------------------------------------------*/
/*------------------->>> FILE <<<-------------------*/
/*--------------------------------------------------*/
/**
  * SASS SECTION INFORMATION
  * ----------------------------------------------- *
  * /////////////////////////////////////////////// *
  * ----------------------------------------------- *
  *
  *     [reset]
  * >>> BASE
  *     [clear]
  *
  * >>> TYPOGRAPHY
  * >>> INPUT
  * >>> INTERACT
  *
  * ----------------------------------------------- *
  *
  * >>> LAYOUT
  *
  * ----------------------------------------------- *
  *
  * >>> MODULE
  *
  *     >>> media
  *     >>> index
  *
  *         core element schema
  *     >>> navigation
  *     >>> hero
  *
  *     >>> teaser
  *
  *     >>> information
  *
  *     >>> accordion
  *
  *     >>> map
  *
  *     >>> section
  *     >>> article
  *
  * ----------------------------------------------- *
  *
  * >>> UTILITIES
  *
  * ----------------------------------------------- *
  *
  * >>> [IE]
  */
/*---------------------------------------------------*/
/*------------------->>> RESET <<<-------------------*/
/*---------------------------------------------------*/
/**
  *
  */
body, section, div, article,
h1, h2, h3, h4, h5,
p,
ul, ol, li,
form, label, input {
  margin: 0;
  padding: 0; }

/*--------------------------------------------------*/
/*------------------->>> BASE <<<-------------------*/
/*--------------------------------------------------*/
/**
  *
  */
*,
*::before, *::after {
  box-sizing: border-box; }

html {
  font-size: 16px;
  font-family: 'Gelion-Regular';
  height: 100%; }

body {
  overflow-y: scroll;
  font-weight: normal;
  font-size: 1rem;
  font-family: 'Gelion-Regular';
  line-height: 1.5;
  color: #848284;
  position: relative;
  /*background-color: #eaeaea;*/
  height: 100%; }

img {
  border: none; }

img, video, object {
  max-width: 100%;
  height: auto; }

figure {
  margin: 0; }
  figure img {
    display: block; }

/*---------------------------------------------------*/
/*------------------->>> CLEAR <<<-------------------*/
/*---------------------------------------------------*/
.clear:before, .section--steps:before, .section--values--start .step--values:before, .navigation:before, #rg2.flex-horizontal:before, #rg4.flex-horizontal:before, #rg3 .radio--wrapper:before, #thanks .content .row:before, .clear:after, .section--steps:after, .section--values--start .step--values:after, .navigation:after, #rg2.flex-horizontal:after, #rg4.flex-horizontal:after, #rg3 .radio--wrapper:after, #thanks .content .row:after {
  display: block;
  content: ' '; }

.clear:after, .section--steps:after, .section--values--start .step--values:after, .navigation:after, #rg2.flex-horizontal:after, #rg4.flex-horizontal:after, #rg3 .radio--wrapper:after, #thanks .content .row:after {
  clear: both; }

ul {
  list-style: none; }

@media only screen and (min-width: 680px) {
  .hide-for-large {
    display: none; } }

.hide-for-small {
  display: none; }
  @media only screen and (min-width: 680px) {
    .hide-for-small {
      display: block; } }

.radio--group label:before, .product--group label:before {
  display: inline-block;
  text-align: center;
  border-radius: 100%;
  background-color: transparent;
  border: 1px solid #EFEFEF;
  color: #fff;
  width: 1.8125rem;
  height: 1.8125rem;
  line-height: 1.6875rem; }
  @media only screen and (min-width: 540px) {
    .radio--group label:before, .product--group label:before {
      width: 2rem;
      height: 2rem;
      line-height: 1.875rem; } }

.radio--group label:after, .product--group label:after {
  background-image: url("img/check.svg");
  width: 0.9375rem;
  height: 0.8125rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; }
  @media only screen and (min-width: 540px) {
    .radio--group label:after, .product--group label:after {
      width: 1.1875rem;
      height: 0.9375rem; } }

.section--steps .step--header:before, .step--counter--inputs .step--header:before, #thanks .content .info-header:before {
  width: 2.375rem;
  height: 2.375rem;
  line-height: 2.25rem;
  border-radius: 100%;
  border: 1px solid transparent;
  background-color: transparent;
  display: inline-block;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 900;
  color: transparent; }

.section--steps, .section--steps .step--inputs, .section--steps .step--inputs .input--container, .step--header .step--header--helper, .section--values--start .step--header .step--header--helper, .step--inputs, .section--steps.section--inputs--anim-out .step--header .step--header--helper, .section--steps.section--inputs--anim-out .step--inputs, .section--steps.section--inputs--anim-out .step--inputs .input--container, .step--edit, .step--values, .section--values--start .step--edit, .section--values--start .step--values {
  opacity: 0;
  visibility: hidden;
  max-height: 0; }

.section--disabled, .section--inputs--start, .section--inputs--start .step--header .step--header--helper, .section--values--start, .step--inputs .input--container, .section--inputs .step--header .step--header--helper, .section--inputs .step--inputs, .section--inputs .step--inputs .input--container, .section--values .step--values, .section--values .step--edit {
  opacity: 1;
  visibility: visible;
  height: auto;
  max-height: 100%;
  transition: max-height 300ms ease-out, opacity 300ms ease-out, height 300ms ease-out, visibility 300ms ease-out; }

h1, .h1, h2, .h2 {
  font-weight: normal;
  font-family: 'Gelion-Bold';
  line-height: 1.2;
  color: #092651;
  margin-top: 0.9375rem;
  margin-bottom: 0.3125rem;
  padding: 0; }

h1, .h1 {
  text-align: center;
  font-size: 38px;
  font-size: calc( 30px + (38 - 30 ) * (100vw - 320px) / (1200 - 320));
  line-height: 60px;
  line-height: calc( 34px + (60 - 34 ) * (100vw - 320px) / (1200 - 320));
  margin-top: 0.2em; }
  @media only screen and (max-width: 320px) {
    h1, .h1 {
      font-size: 30px; } }
  @media only screen and (min-width: 1200px) {
    h1, .h1 {
      font-size: 38px; } }
  @media only screen and (max-width: 320px) {
    h1, .h1 {
      line-height: 34px; } }
  @media only screen and (min-width: 1200px) {
    h1, .h1 {
      line-height: 60px; } }

h2, .h2 {
  font-size: 38px;
  font-size: calc( 18px + (20 - 18 ) * (100vw - 320px) / (960 - 320));
  padding: 20px 0;
  line-height: 25px;
  margin: 0; }
  @media only screen and (max-width: 320px) {
    h2, .h2 {
      font-size: 18px; } }
  @media only screen and (min-width: 960px) {
    h2, .h2 {
      font-size: 20px; } }

h3, h4, .h3, .h4 {
  font-weight: 900;
  font-size: 18px;
  color: #092651;
  letter-spacing: -0.5px;
  line-height: 22px;
  margin-bottom: 1.625rem; }

p {
  font-family: 'Gelion-Regular';
  margin: 0.3125rem 0 1.25rem 0;
  font-size: 1.25rem; }
  p:empty {
    display: none; }

label {
  font-weight: 600;
  font-size: 16px;
  color: #404040;
  letter-spacing: -0.41px;
  line-height: 22px; }
  label a {
    color: #092651;
    text-decoration: underline; }

input {
  font-weight: 600;
  font-size: 18px;
  color: #404040;
  letter-spacing: -0.5px;
  line-height: 22px; }

.error {
  color: #d0021b; }

a {
  text-decoration: none; }

.campaign {
  text-align: left; }

a.helper {
  text-align: left;
  font-weight: 400;
  font-size: 16px;
  color: #848284;
  line-height: 22px; }
  a.helper .underline {
    text-decoration: underline; }
  a.helper:hover {
    color: #514f51; }

.roskasahko {
  color: #ee1064; }

.ilmastosahko {
  color: #a1cd3a; }

.porssisahko {
  color: #b03c8d; }

.arkisahko {
  color: #ffbe22; }

.bonussahko {
  color: #52c329; }

.saastosahko {
  color: #868686 ; }

.yrityssahko {
  color: #e5005b;
}

.new-contract-additional-info {
    color: #092651;
    text-align: center;
    font-weight: 600;
}

.header {
    background-color: #fff;
    /*border-top: 4px solid #092651;*/
    margin-bottom: 1.4375rem;
    position: relative;
    display: inline-block;
    width: 100%;
}
  .header > a {
    padding: 1.125rem 1.25rem 1.625rem;
    display: inline-block;
    width: 100%;
    border-bottom: 2px solid #F4F5F5; }
    .header > a img {
      max-width: 50%; }
  .header h1 {
    margin-bottom: 1.4375rem; }
  @media only screen and (min-width: 767px) {
    .header > a {
      padding: 1.5rem 1.875rem;
      border-bottom: 2px solid #F4F5F5; }
      .header > a img {
        /*width: 20%;*/
        /*width: 13.3125rem;*/
        /*height: 2.9375rem;*/
        margin-left: 5%; }
    .header h1 {
        margin-bottom: 0.3125rem;
        /*margin-top: calc( 0px - 91px + 61px);*/ } }
  .header .lang-selector {
    float: right;
    position: absolute;
    top: 22px;
    right: 20px; }
    @media only screen and (min-width: 500px) {
      .header .lang-selector {
        top: 25px; } }
    @media only screen and (min-width: 767px) {
      .header .lang-selector {
        top: 31px;
        right: 5% } }
    .header .lang-selector .lang-item {
      margin-right: 0.9375rem;
      display: inline-block; }
      .header .lang-selector .lang-item:last-child {
        margin-right: 0; }
      .header .lang-selector .lang-item.current-lang a {
        color: #092651; }
    .header .lang-selector a {
      color: #848284;
      font-weight: 900;
      position: relative;
      text-transform: uppercase; }
      .header .lang-selector a:before {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        height: 1em;
        margin: auto; }

.base--container {
  position: relative;
  /*min-width: 90%;*/
  /*background-color: #F6F6F6;*/
  margin: 0 auto;
  width: 90%;
  height: auto !important;
  /* real browsers */
  min-height: 100%; }

form {
  counter-reset: section;
  padding-bottom: 5rem; }

form section, .section--wrapper {
  width: 100%;
  /*max-width: 60.625rem;*/
  margin: 0 auto; }

.section--steps {
  border-radius: 6px;
  min-height: 60px;
  margin: 0 0.9375rem 1.25rem;
  width: calc(100% - 30px);
  position: relative; }
  @media only screen and (max-width: 539px) {
    .section--steps {
      margin-top: 1.8125rem; } }
  .section--steps .step--header:before {
    counter-increment: section;
    /* Increment the section counter*/
    content: counter(section);
    /* Display the counter */ }
  .section--steps .step--inputs {
    transition: opacity 300ms ease-in 0ms, visibility 300ms ease-in 0ms, height 300ms ease-in 0ms; }
    .section--steps .step--inputs .input--container {
      transition: opacity 300ms ease-in 0ms, visibility 300ms ease-in 0ms, height 300ms ease-in 0ms; }

.step--counter--inputs .step--header:before {
  counter-increment: section;
  /* Increment the section counter*/
  content: counter(section);
  /* Display the counter */ }

.step--header {
  position: relative;
  width: 100%; }
  @media only screen and (min-width: 540px) {
    .step--header {
      padding-left: 4.8125rem; } }
  @media only screen and (max-width: 539px) {
    .step--header:before {
      background-color: #F6F6F6;
      top: -1.25rem;
      position: absolute;
      left: 50%;
      -ms-transform: translateX(-50%);
      transform: translateX(-50%); } }
  @media only screen and (min-width: 540px) {
    .step--header:before {
      position: absolute;
      left: 1.5rem;
      top: 0.75rem; } }
  @media only screen and (max-width: 539px) {
    .step--header h2 {
      text-align: center;
      padding-top: 1rem; } }
  @media only screen and (min-width: 540px) {
    .step--header h2 {
      display: inline-block; } }
  .step--header .step--header--helper {
    transition: opacity 300ms ease-in 0ms, visibility 300ms ease-in 0ms, height 300ms ease-in 0ms;
    margin: 0.625rem 1.3125rem 0.625rem;
    text-align: right;
    float: right; }
    @media only screen and (min-width: 540px) {
      .step--header .step--header--helper {
        margin: 0.625rem 1.3125rem 1.1875rem; } }
    @media only screen and (min-width: 540px) {
      .step--header .step--header--helper {
        margin: 1.1875rem 1.3125rem; } }
  @media only screen and (max-width: 500px) {
    .step-2 .step--header .step--header--helper {
      position: absolute;
      top: 30px;
      right: 0px; } }

.step--inputs {
  width: 100%;
  max-width: 33.125rem;
  margin: 0 auto;
  float: none; }
  .step--inputs.first {
    max-width: 43.75rem; }
  .step--inputs.full {
    max-width: none; }
    .step--inputs.full .customerType-2 {
      max-width: 33.125rem;
      width: 100%;
      max-width: 33.125rem;
      margin: 0 auto;
      float: none;
      padding: 0.875rem 0.9375rem 1.5rem; }
      @media only screen and (min-width: 740px) {
        .step--inputs.full .customerType-2 {
          padding-left: 35px; } }

.step-1 .step--inputs {
  padding: 0.875rem 0.9375rem 1.5rem; }

.step-3 .step--inputs, .step-4 .step--inputs {
  padding: 0.875rem 0.9375rem 1.5rem; }
  @media only screen and (min-width: 740px) {
    .step-3 .step--inputs, .step-4 .step--inputs {
      padding-left: 35px; } }

.section--disabled {
  border: 1px solid rgba(151, 151, 151, 0.2); }
  .section--disabled .step--header h2 {
    opacity: 0.2;
    transition: all 300ms ease-out; }
  .section--disabled .step--header:before {
    color: rgba(120, 121, 124, 0.51);
    border-color: rgba(120, 121, 124, 0.51);
    background-color: #F6F6F6; }
  .section--disabled .step--inputs, .section--disabled .step--values, .section--disabled .step--edit, .section--disabled .step--header--helper {
    display: none; }

.section--inputs--start, .section--close--start, .section--values--start {
  transition: background-color 300ms ease-in 0ms, box-shadow 300ms ease-in 0ms;
  background-color: #fff;
  box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.23); }
  .section--inputs--start .step--header h2, .section--close--start .step--header h2, .section--values--start .step--header h2 {
    transition: all 300ms ease-out;
    opacity: 1; }
  .section--inputs--start .step--header:before, .section--close--start .step--header:before, .section--values--start .step--header:before {
    transition: all 300ms ease-out;
    border-color: #092651;
    background-color: #092651;
    color: #fff; }

.section--values--start .step--header .step--header--helper {
  transition: opacity 100ms ease-in 0ms, visibility 100ms ease-in 0ms, height 100ms ease-in 0ms; }

.step--inputs {
  transition: opacity 300ms ease-in 0ms, visibility 300ms ease-in 0ms, height 300ms ease-in 0ms; }

.section--inputs {
  margin-bottom: 3.3125rem; }
  @media only screen and (min-width: 540px) {
    .section--inputs {
      margin-bottom: 2.5rem; } }
  .section--inputs .step--header {
    margin-bottom: 1rem; }
    .section--inputs .step--header:before {
      border-color: #092651;
      background-color: #092651;
      color: #fff; }
  .section--inputs .step--inputs {
    margin-bottom: 30px; }

.section--steps.section--inputs--anim-out .step--inputs {
  transition: all 300ms ease-in 0ms; }

.section--steps.section--inputs--anim-out .step--inputs .input--container {
  transition: all 300ms ease-in 0ms; }

.step--edit, .step--values {
  overflow: hidden;
  transition: transform 300ms ease-in 0ms; }

.section--values--start {
  margin-bottom: 46px;
  transition: background-color 300ms ease-in 0ms, box-shadow 300ms ease-in 0ms;
  background-color: #fff;
  box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.23); }
  @media only screen and (min-width: 540px) {
    .section--values--start {
      margin-bottom: 30px; } }
  @media only screen and (min-width: 768px) {
    .section--values--start .step--header {
      width: 239px;
      float: left; } }
  .section--values--start .step--header h2 {
    transition: all 300ms ease-out;
    opacity: 1; }
  .section--values--start .step--header:before {
    transition: all 300ms ease-out;
    border-color: #092651;
    background-color: #092651;
    color: #fff; }
  .section--values--start .step--header .step--header--helper {
    display: none; }
  .section--values--start .step--values {
    padding: 0.75rem 1.5rem 0.75rem; }
    @media only screen and (min-width: 768px) {
      .section--values--start .step--values {
        margin-left: 239px;
        width: calc(100% - 239px);
        border-left: 1px solid rgba(151, 151, 151, 0.24);
        padding: 1.625rem 2.25rem 0.75rem; } }
    .section--values--start .step--values .left--container {
      float: left;
      width: 55%; }
      .section--values--start .step--values .left--container img {
        height: 1.5rem;
        width: auto;
        margin-top: -0.3125rem;
        margin-right: 0.625rem; }
      @media only screen and (max-width: 600px) {
        .section--values--start .step--values .left--container {
          width: 100%; } }
    .section--values--start .step--values .right--container {
      float: right;
      width: 45%;
      text-align: right; }
      @media only screen and (max-width: 600px) {
        .section--values--start .step--values .right--container {
          width: 100%;
          text-align: left; } }
    .section--values--start .step--values h3 {
      margin: 0;
      padding-bottom: 15px;
      font-weight: 900;
      font-size: 1.25rem;
      color: #404040;
      line-height: 1.0625rem; }
      .section--values--start .step--values h3.roskasahko {
        color: #ee1064; }
      .section--values--start .step--values h3.ilmastosahko {
        color: #a1cd3a; }
      .section--values--start .step--values h3.porssisahko {
        color: #b03c8d; }
      .section--values--start .step--values h3.arkisahko {
        color: #ffbe22; }
      .section--values--start .step--values h3.bonussahko {
        color: #52c329; }
      .section--values--start .step--values h3.saastosahko {
        color: #868686; }
      .section--values--start .step--values h3.yrityssahko {
        color: #e5005b; }

    .section--values--start .step--values p {
      margin: 0;
      padding-bottom: 15px;
      font-weight: 400;
      font-size: 1.0625rem;
      color: #092651;
      line-height: 1.0625rem; }
  .section--values--start .step--edit {
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    background: #fff;
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.23);
    border-radius: 6px;
    margin-top: -10px; }
    .section--values--start .step--edit .edit--hide {
      width: calc(100% + 6px);
      margin-left: -3px;
      background: #fff;
      height: 10px;
      position: absolute;
      top: -1px; }
    .section--values--start .step--edit a.edit {
      position: relative;
      z-index: 1;
      background-image: url("img/arrow-up.svg");
      background-repeat: no-repeat;
      background-position: 88% 50%;
      padding: 0.5rem 2.1875rem 0.5rem 1.5625rem;
      /* Muokkaa: */
      font-weight: 700;
      font-size: 14px;
      color: #092651;
      letter-spacing: -0.39px;
      line-height: 22px; }
  .section--values--start .step--edit, .section--values--start .step--values {
    overflow: visible;
    transition: max-height 600ms ease-out, opacity 600ms ease-out, height 600ms ease-out, visibility 600ms ease-out; }

.section--values .step--values {
  transition: max-height 600ms ease-out, opacity 600ms ease-out, height 600ms ease-out, visibility 600ms ease-out; }
  @media only screen and (min-width: 540px) {
    .section--values .step--values .bg-image {
      position: relative;
      background-position: 0 0;
      background-repeat: no-repeat;
      background-size: contain;
      padding-left: 60px; }
      .section--values .step--values .bg-image img {
        display: inline-block;
        position: absolute;
        left: -10px;
        top: -10px;
        max-height: 60px;
        max-width: 60px; } }

.section--values .step--inputs, .section--values .step--header--helper {
  display: none; }

.section--values-anim-out .step--edit, .section--values-anim-out .step--values {
  overflow: hidden; }

.section--values-anim-out .step--inputs, .section--values-anim-out .step--header--helper {
  display: none; }

.header--hider {
  display: none !important; }

.ie .section--steps .step--header:before {
  line-height: 36px !important; }

.question {
  display: inline-block;
  width: 1.375rem;
  height: 1.375rem;
  background: #fff;
  border-radius: 100%;
  border: 1px solid #979797;
  text-align: center;
  font-weight: 900;
  font-size: 0.9375rem;
  color: #404040;
  line-height: 1.25rem;
  margin-left: 0.1875rem;
  letter-spacing: normal !important; }

.modal-open {
  overflow: hidden; }

.modal-open .reveal-mod-modal-bg {
  overflow-x: hidden;
  overflow-y: auto; }

.reveal-mod-modal-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #ffffff;
  background: rgba(0, 0, 0, 0.2);
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  transition: all 300ms ease-out; }
  .reveal-mod-modal-bg .reveal-mod-modal {
    display: block; }

.reveal-mod-modal-bg.anim {
  transition: all 300ms ease-out;
  opacity: 1;
  visibility: visible; }

.reveal-mod-modal {
  border-radius: 4px;
  display: none;
  visibility: hidden;
  left: 50%;
  -ms-transform: translate(-50%, -100%);
      transform: translate(-50%, -100%);
  width: 100%;
  max-width: 768px;
  background: #ffffff;
  position: relative;
  z-index: 101;
  opacity: 0;
  transition: all 300ms ease-out;
  font-size: 30px;
  padding: 20px; }
  @media only screen and (min-width: 768px) {
    .reveal-mod-modal {
      padding: 50px;
      margin-top: 50px;
      margin-bottom: 50px; } }
  .reveal-mod-modal p, .reveal-mod-modal strong {
    color: #404040; }

.reveal-mod-modal.anim {
  display: block;
  opacity: 1;
  transition: all 300ms ease-out;
  -ms-transform: translate(-50%, 0%);
      transform: translate(-50%, 0%); }

.close-reveal-modal {
  position: absolute;
  right: 0px;
  top: 0px;
  color: #404040;
  padding: 20px;
  line-height: 20px; }

.reveal-mod-modal .image.page-header {
  padding-bottom: 0; }

.reveal-mod-modal .image.page-header .middle-caption .page-heading {
  margin-bottom: 0 !important; }

.navigation {
  width: 100%;
  max-width: 50rem;
  margin: 0 auto;
  float: none;
  text-align: center; }
  .navigation a {
    z-index: 0;
    position: relative;
    border: 1px solid #D4D4D4;
    border-bottom: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-color: #d4d4d4;
    font-weight: 700;
    font-size: 0.875rem;
    color: #404040;
    letter-spacing: -0.5px;
    line-height: 18px;
    text-align: center;
    display: inline-block;
    margin: 0 5px -1px;
    padding: 6px 20px;
    max-width: calc(47% - 10px); }
    .navigation a:last-child {
      max-width: calc(52% - 10px);
      margin-left: 0; }
    .navigation a.active {
      z-index: 1;
      background-color: #fff;
      border-color: #d3d3d3; }
    .navigation a:hover:not(.active) {
      background-color: #e1e1e1; }
    @media only screen and (min-width: 500px) {
      .navigation a {
        margin: 0 5px -1px;
        padding: 12px 30px 12px;
        font-size: 1.125rem;
        line-height: 22px;
        max-width: none; }
        .navigation a:last-child {
          margin-left: 5px;
          max-width: none; } }
    @media only screen and (min-width: 640px) {
      .navigation a {
        padding: 12px 30px 12px 50px;
        font-size: 1.125rem; }
        .navigation a:before {
          display: inline-block;
          text-align: center;
          border-radius: 100%;
          background-color: transparent;
          border: 1px solid #979797;
          color: #fff;
          width: 1rem;
          height: 1rem;
          line-height: 1.125rem;
          position: absolute;
          top: 50%;
          -ms-transform: translateY(-50%);
          transform: translateY(-50%);
          transition: all 300ms ease-out;
          content: '';
          position: absolute;
          left: 0.9375rem;
          opacity: 1; }
        .navigation a:after {
          background-color: transparent;
          border-radius: 100%;
          width: 0.5rem;
          height: 0.5rem;
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          position: absolute;
          top: 50%;
          -ms-transform: translateY(-50%);
          transform: translateY(-50%);
          transition: all 300ms ease-out;
          content: '';
          position: absolute;
          left: 1.1875rem;
          opacity: 1; }
        .navigation a.active:after {
          background-color: #092651; }
        .navigation a br {
          display: none; } }

.tab-container {
  border-top: 1px solid #D3D3D3;
  border-radius: 4px;
  padding: 0.875rem 0.9375rem 1.5rem; }
  @media only screen and (min-width: 740px) {
    .tab-container #tab-1 {
      padding-left: 35px; } }
  .tab-container #tab-1, .tab-container #tab-2 {
    padding-top: 15px;
    width: 100%;
    max-width: 33.125rem;
    margin: 0 auto;
    float: none; }
  .tab-container #tab-2 {
    max-width: 43.75rem; }

.flex {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  -ms-flex-align: stretch;
      align-items: stretch;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
  -ms-flex-pack: center;
      justify-content: center; }
  .flex a {
    float: left;
    -ms-flex: 0 0 120px;
        flex: 0 0 120px;
    position: relative;
    width: 120px;
    height: 120px;
    border: 1px solid #979797;
    display: block;
    border-radius: 4px;
    margin: 0 10px 60px;
    color: #404040;
    font-size: 16px;
    font-weight: 600;
    text-align: center; }
    .flex a span {
      position: absolute;
      left: 50%;
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      bottom: -40px;
      width: 100%; }
    .flex a img {
      padding: 10px;
      position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }

.radio--group label, .product--group label {
  cursor: pointer;
  display: inline-block;
  position: relative;
  border: 2px solid transparent;
  box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.23);
  border-radius: 0.25rem;
  padding: 0.75rem 0.25rem 0.8125rem;
  margin: 0 0 0.8125rem;
  width: 100%; }
  .radio--group label:before, .product--group label:before {
    line-height: 1.625rem;
    content: '';
    position: absolute;
    left: 0.75rem;
    opacity: 1; }
  .radio--group label:after, .product--group label:after {
    content: '';
    position: absolute;
    left: 1.1875rem;
    opacity: 0; }
  @media only screen and (min-width: 540px) {
    .radio--group label, .product--group label {
      width: calc(100% - 30px);
      padding: 1rem 0.375rem 1.0625rem 1.125rem;
      margin: 0 0.9375rem 1.25rem; } }
  .radio--group label:hover, .product--group label:hover {
    /*border-color: #092651;*/ }

.radio--group input, .product--group input {
  display: none; }
  .radio--group input:invalid + label, .product--group input:invalid + label {
    /*background-color: #fff;*/ }
    .radio--group input:checked + label, .product--group input:checked + label {
        /*background-color: #C3E692;*/
        /*color: #FFFFFF;*/
        border-color: #092651;
    }
    .radio--group input:checked + label:before, .product--group input:checked + label:before {
      opacity: 1;
      /*background-color: #C3E692;*/
      background-color: #092651;
      /*color: white;*/ }
    .radio--group input:checked + label:after, .product--group input:checked + label:after {
      opacity: 1; }
  .radio--group input[disabled] + label, .product--group input[disabled] + label {
    opacity: 0.5; }
  .radio--group input[disabled] + label:hover, .product--group input[disabled] + label:hover {
    border-color: transparent;
    cursor: default; }

.radio--group {
  text-align: center; }
  @media only screen and (max-width: 540px) {
    .radio--group {
      margin-bottom: 30px; } }
  .radio--group label {
    font-weight: 900;
    color: #092651;
    font-size: 1.125rem;
    line-height: 1.25rem;
    letter-spacing: -0.5px;
    transition: opacity 300ms ease-out, background-color 300ms ease-out, color 300ms ease-out, border-color 300ms ease-out, box-shadow 300ms ease-out; }
    .radio--group label:before {
      position: absolute;
      top: 50%;
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      transition: all 300ms ease-out; }
    .radio--group label:after {
      position: absolute;
      top: 50%;
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      transition: all 300ms ease-out; }
    @media only screen and (min-width: 540px) {
      .radio--group label {
        font-size: 1.25rem;
        line-height: 1.375rem;
        border-radius: 50px; } }

.radio--wrapper {
  display: inline; }

@media only screen and (min-width: 693px) {
  #rg2.flex-horizontal .radio--wrapper {
    width: 33.3333333333334%;
    float: left; } }

#rg1 input:valid:not(:checked) + label {
  background-color: transparent;
  box-shadow: none;
  border: 1px solid rgba(140, 140, 140, 0.4);
  border-radius: 50px; }

#rg1 label {
  margin: 0 0.9375rem 0.8125rem;
  width: calc(100% - 30px); }

@media only screen and (min-width: 540px) {
  #rg1 label {
    margin: 0 0.9375rem 1.25rem;
    border: 1px solid transparent;
    width: 14.375rem;
    padding: 1rem 0 1.0625rem;}
    #rg1 label:before, #rg1 label:after {
      display: none; }
    #rg1 label:hover {
      border: 1px solid transparent; }
      #rg1 label:hover:before, #rg1 label:hover:after {
        display: none; }
  #rg1 input:invalid + label:hover {
    background-color: #092651;
    color: #fff; }
  #rg1 input:checked + label {
    background-color: #092651;
    color: #fff;
    box-shadow: inset 1px 1px 3px 0px rgba(0, 0, 0, 0.23);
    border-radius: 50px; }
    #rg1 input:checked + label:before, #rg1 input:checked + label:after {
      display: none; } }

.ie-9 #rg1 input:not(:checked) + label {
  background-color: #fff; }

.ie-9 #rg1 input + label:hover {
  background-color: #092651;
  color: #fff; }

@media only screen and (max-width: 540px) {
  #rg2 {
    margin-top: 20px; } }

.product--group label {
  padding-left: 0.75rem; }
  .product--group label:before {
    -ms-transform: scale(0.9);
        transform: scale(0.9); }
    @media only screen and (max-width: 645px) {
      .product--group label:before {
        -ms-transform: scale(0.9) !important;
            transform: scale(0.9) !important;
        top: 0.75rem !important;
        width: 1.5rem;
        height: 1.5rem;
        left: 0.375rem; } }
  .product--group label:after {
    -ms-transform: scale(0.9);
        transform: scale(0.9); }
    @media only screen and (max-width: 645px) {
      .product--group label:after {
        -ms-transform: scale(0.9) !important;
            transform: scale(0.9) !important;
        width: 0.8125rem !important;
        height: 0.6875rem !important;
        top: 1.1875rem !important;
        left: 0.6875rem; } }
  @media only screen and (max-width: 645px) {
    .product--group label {
      padding: 0.75rem 0.25rem 0.8125rem;
      margin: 0 0 0.8125rem;
      width: 100%; } }
  .product--group label span {
    display: block;
    width: 100%; }
  .product--group label .product--title {
    padding-left: 2rem;
    font-weight: 900;
    font-size: 1rem;
    color: #092651;
    line-height: 1.3125rem; }
    .product--group label .product--title img {
      height: 1.25rem;
      width: auto;
      margin-top: -0.125rem;
      margin-right: 0.25rem; }
    .product--group label .product--title.roskasahko {
      color: #EE1064; }
    .product--group label .product--title.ilmastosahko {
      color: #A1CD3A; }
    .product--group label .product--title.porssisahko {
      color: #B03C8D; }
    .product--group label .product--title.arkisahko {
      color: #FFBE22; }
    .product--group label .product--title.bonussahko {
      color: #52C329; }
    .product--group label .product--title.saastosahko {
      color: #868686; }
    .product--group label .product--title.yrityssahko {
      color: #e5005b; }
  .product--group label .product--description {
    display: none; }
    .product--group label .product--discount--description {
    display: none; }
  .product--group label .product--price {
    margin-bottom: 15px;
    font-weight: 400;
    font-size: 1.0625rem;
    color: #092651;
    line-height: 1.5rem; }
.product--group label .product--price--additional {
    margin-bottom: 15px;
    font-weight: 500;
    font-size: 1.0225rem;
    color: #092651;
    line-height: 0.9rem;
}
  @media only screen and (max-width: 710px){
    .product--group label .product--price {
        margin-bottom: 15px;
        font-weight: 400;
        font-size: 0.9rem;
        color: #404040;
        line-height: 1.5rem;
    }
  }
    .product--group label .product--price {
      margin-bottom: 0;
      margin-top: 0.875rem; }
.product--group label .product--description, .product--group label .product--discount--description, .product--group label .product--price--base, .product--group label .product--contract-length, .product--group label .product--price--base--nomargin {
    font-weight: 400;
    font-size: 1rem;
    color: #808284;
    line-height: 1.375rem;
    white-space: pre-line;
}
  @media only screen and (min-width: 620px) {
    .product--group label {
      padding-left: 3.125rem;
      padding-right: 1.625rem; }
      .product--group label .product--price--base {
        margin-top: 0.5rem; }
      .product--group label:before {
        top: 0.9375rem;
        -ms-transform: scale(1);
            transform: scale(1); }
      .product--group label:after {
        top: 1.5rem;
        -ms-transform: scale(1);
            transform: scale(1); }
      .product--group label .container--left {
        float: left;
        width: 55%; }
      .product--group label .container--right {
        float: right;
        width: 45%;
        text-align: right; }
      .product--group label .product--title {
        padding-left: 0;
        font-size: 1.3125rem; }
        .product--group label .product--title img {
          height: 1.6875rem;
          margin-top: -0.25rem; }
      .product--group label .product--price {
        margin-top: 0; }
      .product--group label .product--description {
        display: block; }
      .product--group label .product--description {
        margin-top: 0.25rem; }
      .product--group label .product--discount--description {
        display: block; }
      .product--group label .product--discount--description {
        margin-top: 0.625rem; }
      .product--group label .product--price--base {
        margin-top: 0.625rem; }
        .product--group label .product--description, .product--group label .product--discount--description, .product--group label .product--price--base, .product--group label .product--contract-length, .product--group label .product--price--base--nomargin {
            font-size: 0.75rem;
            line-height: 0.9375rem;
        } }
  @media only screen and (min-width: 660px) {
    .product--group label {
      padding-left: 4.125rem; } }

.product--group [data-product="arkisahko"] + label .product--title {
  color: #ffbe22; }

.product--group [data-product="ilmastosahko"] + label .product--title {
  color: #a1cd3a; }

.product--group [data-product="roskasahko"] + label .product--title {
  color: #ee1064; }

.product--group [data-product="porssisahko"] + label .product--title {
  color: #b03c8d; }

.product--group [data-product="bonussahko"] + label .product--title {
  color: #52c329; }
.product--group [data-product="saastosahko"] + label .product--title {
  color: #868686; }
.product--group [data-product="yrityssahko"] + label .product--title {
  color: #e5005b; }

@media only screen and (min-width: 693px) {
  #rg4.flex-horizontal {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: justify;
        justify-content: space-between;
    -ms-flex-align: stretch;
        align-items: stretch;
    margin-left: -10px;
    margin-bottom: 20px; }
    #rg4.flex-horizontal .radio--wrapper {
      -ms-flex: 1 1 49%;
          flex: 1 1 49%;
      width: 49%;
      float: left; }
      #rg4.flex-horizontal .radio--wrapper label {
        position: relative;
        height: calc(100% - 20px);
        padding-top: 45px;
        padding-bottom: 27px; }
        #rg4.flex-horizontal .radio--wrapper label span {
          position: absolute;
          top: 50%;
          left: 50%;
          -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          margin-left: 20px;
          width: calc(100% - 30px);
          padding-right: 20px; } }

@media only screen and (min-width: 540px) {
  #rg4.flex-horizontal.radio--group label {
    font-size: 16px;
    margin: 10px;
    padding-left: 40px; }
    #rg4.flex-horizontal.radio--group label:before {
      left: 8px; }
    #rg4.flex-horizontal.radio--group label:after {
      left: 15px; } }

@media only screen and (min-width: 540px) {
  #rg2 {
    margin-left: -10px; } }

@media only screen and (min-width: 646px) {
  #rg3 {
    margin-left: -10px; } }

#rg3 .radio--wrapper {
  display: block; }

.input--container {
  position: relative; }
  @media only screen and (min-width: 740px) {
    .input--container.half {
      width: calc(50%);
      float: left; }
      .input--container.half:last-child {
        float: right;
        margin-right: 0px; } }
  @media only screen and (max-width: 740px) {
    .input--container.half.promoOrigin {
      width: calc(50%);
      float: left; }
      .input--container.half.promoOrigin:last-child {
        float: right;
        margin-right: 0px; } }
  .input--container.help .question-event {
    display: block; }

input {
  /* Input: */
  background: #fff;
  border: 1px solid #6b6b6b;
  border-radius: 4px;
  transition: all 300ms ease-out; }
  input:focus {
    outline: none; }
  input.input-error:not(:focus):not(.input-dirty) {
    background: #fff;
    border: 1px solid #6b6b6b;
    transition: all 300ms ease-out; }
  input:invalid:not(:focus):not(.input-dirty) {
    background: #fff;
    border: 1px solid #6b6b6b;
    transition: all 300ms ease-out; }
  input.input-error:focus {
    background: #fff;
    border: 1px solid #6b6b6b;
    transition: all 300ms ease-out; }
  input:invalid:focus {
    background: #fff;
    border: 1px solid #6b6b6b;
    transition: all 300ms ease-out; }
  input.input-error:not(:focus).input-dirty {
    border: 1px dashed #d0021b;
    background-color: #fffbc6;
    color: #d0021b;
    transition: all 300ms ease-out; }
    input.input-error:not(:focus).input-dirty ~ .input--label--haruki {
      color: #d0021b; }
    input.input-error:not(:focus).input-dirty ~ .not-required {
      right: 30px; }
    input.input-error:not(:focus).input-dirty ~ .error {
      display: inline-block; }
    input.input-error:not(:focus).input-dirty ~ .icon-calendar {
      display: none; }
  input:invalid:not(:focus).input-dirty {
    border: 1px dashed #d0021b;
    background-color: #fffbc6;
    color: #d0021b;
    transition: all 300ms ease-out; }
    input:invalid:not(:focus).input-dirty ~ .input--label--haruki {
      color: #d0021b; }
    input:invalid:not(:focus).input-dirty ~ .not-required {
      right: 30px; }
    input:invalid:not(:focus).input-dirty ~ .error {
      display: inline-block; }
    input:invalid:not(:focus).input-dirty ~ .icon-calendar {
      display: none; }
  input.input-error-server {
    border: 1px dashed #d0021b !important;
    background-color: #fffbc6 !important;
    color: #d0021b !important;
    transition: all 300ms ease-out; }
    input.input-error-server ~ .input--label--haruki {
      color: #d0021b !important; }
    input.input-error-server ~ .not-required {
      right: 30px !important; }
    input.input-error-server ~ .error {
      display: inline-block !important; }
    input.input-error-server.no-label ~ .error.label {
      display: none !important; }
    input.input-error-server ~ .icon-calendar {
      display: none !important; }
  @media only screen and (min-width: 740px) {
    input.input-error.no-label:not(:focus).input-dirty ~ .error.label {
      display: none; }
    input.no-label:invalid:not(:focus).input-dirty ~ .error.label {
      display: none; } }
  input:valid {
    border: 1px solid #000;
    transition: all 300ms ease-out; }
  input:not([required]) {
    opacity: 1; }
    input:not([required]) ~ .input--label--haruki {
      opacity: 1; }
    input:not([required]) ~ .not-required {
      opacity: 1;
      position: absolute;
      top: 50%;
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      right: 10px;
      /* Ei pakollinen: */
      font-weight: 600;
      font-size: 14px;
      color: #404040;
      letter-spacing: -0.41px;
      line-height: 22px; }

/*trasanen 7.2.2017 VEY-209 */
input:-moz-submit-invalid {
  box-shadow: none;
}

input:-moz-ui-invalid {
  box-shadow: none;
}    

.error {
  display: none;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }

.error.empty {
  right: 10px;
  cursor: pointer;
  font-size: 30px; }

.error.label {
  width: 100%;
  padding: 0 10px;
  font-size: 12px;
  transform: translate3d(0, 145%, 0);
  left: 0px;
  text-align: left; }
  @media only screen and (min-width: 500px) {
    .sBonus .error.label {
        top: 180%;
        left: auto;
        font-size: 12px;
        transform: translate3d(0, -225%, 0);
        text-align: left;
    }

    .question-event-product {
        position: absolute;
        left: 102%;
        top: 20%;
    }
  }
  @media only screen and (min-width: 740px) {
    .error.label {
      right: 0;
      left: auto;
      font-size: 16px;
      transform: translate3d(0, -225%, 0);
      text-align: right; }

    .sBonus .error.label {
        top: 320%;
        font-size: 16px;
    }

    .question-event-product {
        position: absolute;
        left: 95%;
        top: 20%;
    }
  }
  @media only screen and (min-width: 870px) {
    .error.label {
      position: absolute;
      top: 50%;
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      text-align: left;
      right: auto;
      padding: 0;
      left: calc(100% + 10px);
      width: 190px; }

    .sBonus .error.label {
        top: 230%;
        left: 0%;
        width: 400px;
    }

    .question-event-product {
        position: absolute;
        left: 95%;
        top: 20%;
    }
  }

/*.question-event-product  {
    position: absolute;
    left: 102%;
    top: 20%;
}*/
.input {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin: 1.25rem 0 1.875rem;
    width: 100%;
    vertical-align: top;
}
  @media only screen and (min-width: 500px) {
    .input {
      margin: 0.625rem 1.25rem 1.875rem 0; } }
  @media only screen and (min-width: 740px) {
    .input {
      width: calc(100% - 30px); } }

.input--field {
  position: relative;
  display: block;
  float: right;
  padding: 12px;
  width: 100%;
  -webkit-appearance: none;
  /* for box shadows to show on iOS */ }

.input--field:focus {
  outline: none; }

.input--label {
  display: inline-block;
  float: left;
  padding: 0 12px;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.input--label-content {
  position: relative;
  display: block;
  padding: 12px 0;
  width: 100%; }

.input--field--haruki {
  width: 100%; }

.input--label--haruki {
  position: absolute;
  width: 100%;
  text-align: left;
  pointer-events: none; }

.input--label-content--haruki {
  transition: transform 0.3s; }

.input--label--haruki::before,
.input--label--haruki::after {
  content: '';
  position: absolute;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 4px;
  transition: transform 0.3s; }

.input--label--haruki::before {
  top: 0; }

.input--label--haruki::after {
  bottom: 0; }

.input--field--haruki:focus + .input--label--haruki .input--label-content--haruki,
.input--field--haruki.input-dirty + .input--label--haruki .input--label-content--haruki {
  transform: translate3d(0, -90%, 0); }

.input--field--haruki:focus + .input--label--haruki::before,
.input--field--haruki.input-dirty + .input--label--haruki::before {
  transform: translate3d(0, -0.5em, 0); }

.input--field--haruki:focus + .input--label--haruki::after,
.input--field--haruki.input-dirty + .input--label--haruki::after {
  transform: translate3d(0, 0.5em, 0); }

.step-1 .step--header--helper {
  position: relative;
  margin-left: 15px;
  margin-right: 15px;
  width: calc(100% - 30px); }
/*
  .step-1 .step--header--helper .remove {
    font-size: 0.875rem;
    color: #6b6b6b;
    display: none; }
    }
*/
  .step-1 .step--header--helper input:not([required]), .step-1 .step--header--helper input:not([required]) ~ .input--label--haruki {
    opacity: 1; }
  .step-1 .step--header--helper .submit{
    /*cursor: pointer;
    font-size: 16px;
    color: #fff;
    letter-spacing: -0.41px;
    font-weight: 700;
    border: 1px solid #6b6b6b;
    background-color: #092651;
    border-radius: 0 4px 4px 0;*/
    position: absolute;
    right: 0;
    top: 0;
    padding: 0 10px;
    line-height: 47px;
    height: 48px; }
    .step-1 .step--header--helper .submit:focus {
        outline: none; }
  .step-1 .step--header--helper .remove {
    cursor: pointer;
    font-size: 16px;
    color: #fff;
    letter-spacing: -0.41px;
    font-weight: 700;
    border: 1px solid #6b6b6b;
    background-color: #092651;
    border-radius: 0 4px 4px 0;
    position: absolute;
    right: 0;
    top: 0;
    padding: 0 10px;
    line-height: 47px;
    height: 48px; }
    .step-1 .step--header--helper .remove:focus {
        outline: none; }
  .step-1 .step--header--helper .question-event {
    float: left;
    margin-left: 10px;
    margin-top: 32px; }
  .step-1 .step--header--helper .input--container {
    width: calc(100% - 35px);
    float: left; }
    .step-1 .step--header--helper .input--container .input--field {
      width: calc(100% - 54px);
      float: left; }
    .step-1 .step--header--helper .input--container .input--label {
      left: 0; }
  @media only screen and (min-width: 540px) {
    .step-1 .step--header--helper {
      margin-left: -77px !important;
      margin-top: 30px !important;
      margin-bottom: 0 !important;
      padding-left: 15px;
      margin-right: 15px;
      width: calc(100% + 77px - 15px); }
      .step-1 .step--header--helper .input--container {
        margin-bottom: 14px; }
      .step-1 .step--header--helper .question-event {
        margin-top: 22px; } }
  @media only screen and (min-width: 680px) {
    .step-1 .step--header--helper {
      margin-left: 15px !important;
      margin-right: 15px !important;
      margin-top: 17px !important;
      width: 345px; }
      .step-1 .step--header--helper .input--container {
        position: relative;
        right: 0;
        top: -4px;
        width: 295px;
        float: left; }
        .step-1 .step--header--helper .input--container .input {
          margin: 0;
          float: right;
          width: calc(100% - 105px); }
        .step-1 .step--header--helper .input--container .input--label {
          left: 0; }
        .step-1 .step--header--helper .input--container .input--field {
          padding: 6px 12px;
          width: 138px;
          float: left; }
        .step-1 .step--header--helper .input--container .input--label-content {
          padding: 6px 0; }
        .step-1 .step--header--helper .input--container .input--field--haruki:focus + .input--label--haruki .input--label-content--haruki,
        .step-1 .step--header--helper .input--container .input--field--haruki.input-dirty + .input--label--haruki .input--label-content--haruki {
          transform: translate3d(-80%, 0, 0); }
        .step-1 .step--header--helper .input--container .input--field--haruki:focus + .input--label--haruki::before,
        .step-1 .step--header--helper .input--container .input--field--haruki.input-dirty + .input--label--haruki::before {
          transform: translate3d(0, -0.5em, 0); }
        .step-1 .step--header--helper .input--container .input--field--haruki:focus + .input--label--haruki::after,
        .step-1 .step--header--helper .input--container .input--field--haruki.input-dirty + .input--label--haruki::after {
          transform: translate3d(0, 0.5em, 0); }
      .step-1 .step--header--helper .remove {
        margin: 0;
        padding: 0 10px;
        height: 36px;
        line-height: 38px; }
      .step-1 .step--header--helper .submit {
        line-height: 37px;
        height: 36px; }
      .step-1 .step--header--helper .question-event {
        margin-top: 2px; } }
  .step-1 .step--header--helper .campaign-invalid, .step-1 .step--header--helper .campaign-valid {
    text-align: left;
    float: left;
    padding-left: 6px;
    padding-top: 6px;
    display: none;
    position: absolute;
    bottom: -26px;
    left: 0;
    font-size: 14px; }
  .step-1 .step--header--helper .input--field.campaign-error, .step-1 .step--header--helper .campaign-invalid {
    color: #d0021b; }
  /* trasanen 28.2.2017 VEY-220
  .step-1 .step--header--helper .input--field.campaign-error ~ .campaign-valid {
    display: none; }
  */
  .step-1 .step--header--helper .input--field.campaign-error ~ .campaign-invalid .remove {
    display: block; }
  /* trasanen 28.2.2017 VEY-220
  .step-1 .step--header--helper .input--field.campaign-enabled ~ .submit {
   display: none; }
  */
  .step-1 .step--header--helper .input--field.campaign-enabled ~ .remove {
    display: block; }
  .step-1 .step--header--helper .input--field.campaign-enabled ~ .campaign-invalid {
    display: none; }
  .step-1 .step--header--helper .input--field.campaign-enabled ~ .campaign-valid {
    display: block; }


@media only screen and (min-width: 740px) {
    .step-1 .input--container.select {
        width: calc(50%);
        float: left;
    }
    .step-1 .input.input--haruki-left.select {
        margin-left: 5px;
    }    
}

@media only screen and (min-width: 740px) {
    .step-2 .input--container.label {
        width: calc(100%);
        float: left;
    }
    .step-2 .input--container.label .input {
        margin-right: 20px;
    }
    .step-2 .input--container.zip {
        width: calc(30%);
        float: left;
    }
    .step-2 .input--container.zip .input {
    margin-right: 20px;
    }
    .step-2 .input--container.addr {
        width: calc(30%);
        float: left;
    }
    .step-2 .input--container.place {
        width: calc(70%);
        float: left;
    }
}

@media only screen and (max-width: 740px) {
    .step-2-post-office-fields {
        margin-top: -25px;
    }

}

@media only screen and (min-width: 740px) {
    .step-3 .input {
        width: calc(100% - 20px); 
    }
    .step-3 .input--container.label {
        width: calc(100%);
        float: left;
    }
    .step-3 .input--container.label .input {
        margin-right: 20px; 
    }
    .step-3 .input--container.zip {
        width: calc(30%);
        float: left; 
    }
    .step-3 .input--container.zip .input {
      margin-right: 20px; }
    .step-3 .input--container.addr {
        width: calc(33%);
        float: left;
    }
    .step-3 .input--container.addr {
        width: calc(30%);
        float: left;
    }
    .step-3 .input--container.place {
        width: calc(70%);
        float: left;
    }
}

@media only screen and (max-width: 740px){
    .step-3-post-office-fields{
        margin-top: -25px;
    }

    /*.step-3-street-fields {
        margin-top: 45px;
    }*/

    .step-3-address-fields{
        margin-top: 5px;
    }

    .step-3-contract-reason-header {
        margin-top: 40px;
    }
}

@media only screen and (min-width: 740px) {
    .step-4 .input--container.label {
        width: calc(100%);
        float: left;
    }
    .step-4 .input--container.label .input {
        margin-right: 20px;
    }
    .step-4 .input--container.zip {
        width: calc(30%);
        float: left;
    }
    .step-4 .input--container.zip .input {
        margin-right: 20px;
    }
    .step-4 .input--container.addr {
        width: calc(30%);
        float: left;
    }    
}

@media only screen and (max-width: 740px) {
    .step-4-post-office-fields {
        margin-top: -27px;
    }

    .step-4-street-fields {
        margin-top: 45px;
    }

    .step-4-post-country-fields {
        margin-top: 40px;
    }
}

.step-3 [name="StartDate"] {
  background-color: transparent; }
  .step-3 [name="StartDate"].input-error:not(:focus):not(.input-dirty) {
    background-color: transparent; }
  .step-3 [name="StartDate"]:invalid:not(:focus):not(.input-dirty) {
    background-color: transparent; }
  .step-3 [name="StartDate"].input-error:focus {
    background-color: transparent; }
  .step-3 [name="StartDate"]:invalid:focus {
    background-color: transparent; }
  .step-3 [name="StartDate"].input-error:not(:focus).input-dirty {
    background-color: #fffbc6; }
  .step-3 [name="StartDate"]:invalid:not(:focus).input-dirty {
    background-color: #fffbc6; }

.step-3 .icon-calendar {
  z-index: -1;
  position: absolute;
  width: 31px;
  height: 31px;
  display: inline-block;
  right: 10px;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-image: url("img/calendar.svg"); }

.step-4 .metering-point-info{
    margin-top: 30px;
}

.ie-9 .input--field--haruki:focus + .input--label--haruki .input--label-content--haruki,
.ie-9 .input--field--haruki.input-dirty + .input--label--haruki .input--label-content--haruki {
    -ms-transform: translate(0, -90%);
    transform: translate(0, -90%);
}

.ie-9 .input--field--haruki:focus + .input--label--haruki::before,
.ie-9 .input--field--haruki.input-dirty + .input--label--haruki::before {
  -ms-transform: translate(0, -0.5em);
      transform: translate(0, -0.5em); }

.ie-9 .input--field--haruki:focus + .input--label--haruki::after,
.ie-9 .input--field--haruki.input-dirty + .input--label--haruki::after {
  -ms-transform: translate(0, 0.5em);
      transform: translate(0, 0.5em); }

.ie-9 .step--header--helper .input--container .input--field--haruki:focus + .input--label--haruki .input--label-content--haruki,
.ie-9 .step--header--helper .input--container .input--field--haruki.input-dirty + .input--label--haruki .input--label-content--haruki {
  -ms-transform: translate(-80%, 0);
      transform: translate(-80%, 0); }

.ie-9 .step--header--helper .input--container .input--field--haruki:focus + .input--label--haruki::before,
.ie-9 .step--header--helper .input--container .input--field--haruki.input-dirty + .input--label--haruki::before {
  -ms-transform: translate(0, -0.5em);
      transform: translate(0, -0.5em); }

.ie-9 .step--header--helper .input--container .input--field--haruki:focus + .input--label--haruki::after,
.ie-9 .step--header--helper .input--container .input--field--haruki.input-dirty + .input--label--haruki::after {
  -ms-transform: translate(0, 0.5em);
      transform: translate(0, 0.5em); }

.button--container {
  text-align: center;
  display: inline-block;
  width: 100%;
  margin-top: 1.875rem;
  position: absolute;
  left: 0;
  bottom: 4px; }

.btn {
  position: absolute;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: -1.25rem;
  display: inline-block;
  background-color: #ebebeb;
  background-image: url("img/arrow.svg");
  background-repeat: no-repeat;
  background-position: right 15px center;
  border: 1px solid #dddddd;
  box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.23);
  border-radius: 50px;
  padding: 0.6875rem 2.75rem 0.75rem 1.375rem;
  font-family: 'Gelion-SemiBold';
  font-weight: normal;
  font-size: 1.25rem;
  color: rgba(38, 38, 38, 0.2);
  letter-spacing: -0.5px;
  line-height: 1.375rem;
  text-transform: none;
  margin-bottom: -1.25rem;
  transition: all 300ms ease-out; }
  .btn.send {
    background-position: right 18px center; }
  .btn.enabled {
    background-color: #092651;
    background-image: url("img/arrow-enabled.svg");
    border-color: #092651;
    color: #fff; 
    border-radius: 50px }

.check--container {
  margin-bottom: 30px; }
  @media only screen and (max-width: 690px) {
    .check--container {
      margin-bottom: 15px; } }

.check--container, .check--wrapper {
  width: 100%;
  float: left; }

.check--wrapper label:before {
  display: inline-block;
  text-align: center;
  border-radius: 100%;
  background-color: transparent;
  border: 1px solid #404040;
  color: #fff;
  width: 1.375rem;
  height: 1.375rem;
  line-height: 1.25rem; }

.check--wrapper label:after {
  background-image: url("img/check.svg");
  width: 0.8125rem;
  height: 0.6875rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; }

.check--wrapper input {
  display: none; }
  .check--wrapper input:checked + label:before {
    opacity: 1;
    background-color: #092651;
    border: 1px solid #092651; }
  .check--wrapper input:checked + label:after {
    opacity: 1; }

.check--wrapper label {
  line-height: 1.25rem;
  cursor: pointer; }
  .check--wrapper label span {
    display: inline-block;
    padding-left: 30px; }
  .check--wrapper label:before {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: all 300ms ease-out;
    content: '';
    position: absolute;
    left: 0;
    opacity: 1; }
  .check--wrapper label:after {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: all 300ms ease-out;
    content: '';
    position: absolute;
    left: 0.25rem;
    opacity: 0; }

.radio--basic {
  margin-bottom: 30px; }
  @media only screen and (max-width: 690px) {
    .radio--basic {
      margin-bottom: 15px; } }

.radio--basic {
  width: 100%;
  float: left; }

.radio--basic .radio--wrapper label:before {
  display: inline-block;
  text-align: center;
  border-radius: 100%;
  background-color: transparent;
  border: 1px solid #979797;
  color: #fff;
  width: 1.375rem;
  height: 1.375rem;
  line-height: 1.25rem; }

.radio--basic .radio--wrapper label:after {
  background-color: transparent;
  border-radius: 100%;
  width: 0.625rem;
  height: 0.625rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; }

.radio--basic .radio--wrapper input {
  display: none; }
  .radio--basic .radio--wrapper input:checked + label:after {
    background-color: #092651; }

.radio--basic .radio--wrapper {
  position: relative;
  width: 50%;
  display: inline-block;
  float: left; }
  @media only screen and (max-width: 690px) {
    .radio--basic .radio--wrapper {
      width: 100%;
      display: inline-block;
      margin-bottom: 15px; } }
  .radio--basic .radio--wrapper label {
    line-height: 1.25rem;
    cursor: pointer; }
    .radio--basic .radio--wrapper label span {
      display: inline-block;
      padding-left: 30px; }
    .radio--basic .radio--wrapper label:before {
      position: absolute;
      top: 50%;
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      transition: all 300ms ease-out;
      content: '';
      position: absolute;
      left: 0;
      opacity: 1; }
    .radio--basic .radio--wrapper label:after {
      position: absolute;
      top: 50%;
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      transition: all 300ms ease-out;
      content: '';
      position: absolute;
      left: 0.375rem;
      opacity: 1; }

#thanks .base--container {
  padding-bottom: 1px; }

#thanks .section--steps {
  max-height: 1800px;
  margin-top: 10px;
  margin-bottom: 50px;
  padding-top: 47px;
  padding-bottom: 1px; }

#thanks .tc {
  text-align: center; }

#thanks hr {
  border-color: rgba(151, 151, 151, 0.23); }

#thanks .heading {
  padding: 0 10px; }
  #thanks .heading h1 {
    margin-top: 0;
    margin-bottom: 30px;
    letter-spacing: normal; }
  #thanks .heading p {
    letter-spacing: normal;
    font-size: 20px;
    color: #6b6e72;
    max-width: 600px;
    margin: 0 auto 40px; }

#thanks .content {
  counter-reset: section;
  max-width: 760px;
  margin: 0 auto; }
  #thanks .content h2 {
    letter-spacing: normal;
    padding-top: 17px;
    padding-bottom: 52px;
    font-size: 28px;
    color: #404040;
    line-height: 40px; }
  #thanks .content .columns {
    padding-left: 54px;
    float: left;
    margin: 0 30px 40px; }
    @media only screen and (min-width: 600px) {
      #thanks .content .columns {
        width: calc(50% - 60px); } }
  #thanks .content .info-header {
    position: relative; }
    #thanks .content .info-header:before {
      position: absolute;
      left: -3.375rem;
      top: 10px;
      counter-increment: section;
      /* Increment the section counter*/
      content: counter(section);
      /* Display the counter */
      border-color: #092651;
      background-color: #092651;
      color: #fff; }
    #thanks .content .info-header h3 {
      letter-spacing: normal;
      margin-bottom: 12px;
      font-size: 20px;
      color: #404040;
      line-height: 60px; }
  #thanks .content .info p strong {
    letter-spacing: normal;
    font-weight: 700; }
  #thanks .content .info p, #thanks .content .info p span {
    letter-spacing: normal;
    font-size: 16px;
    color: #404040;
    line-height: 22px;
    margin-bottom: 8px; }
  #thanks .content .print {
    cursor: pointer;
    letter-spacing: normal;
    vertical-align: middle;
    font-weight: 700;
    font-size: 20px;
    color: #404040;
    line-height: 40px;
    margin-bottom: 50px; }
    #thanks .content .print img {
      vertical-align: sub;
      display: inline-block;
      padding-right: 10px; }

.ie .section--steps .info-header:before {
  line-height: 36px !important; }

@media only print {
  .print, .header h1 {
    display: none; }
  .header a {
    text-align: center; }
  .header {
    border: none;
    margin-bottom: 0; }
  #thanks .section--steps {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px; }
    #thanks .section--steps h1 {
      line-height: 40px; }
  #thanks .heading p {
    margin-bottom: 20px; }
  #thanks .content h2 {
    padding-top: 4px;
    padding-bottom: 20px; }
  #thanks .content .columns {
    margin-bottom: 20px; }
  #thanks .content .columns {
    width: calc(50% - 60px); }
  a[href]:after {
    content: none !important; } }

.selects {
    background: #fff;
    border: 1px solid #6b6b6b;
    transition: all 300ms ease-out;
    border-radius: 4px;
    font-weight: 600;
    font-size: 18px;
    color: #404040;
    letter-spacing: -0.5px;
    line-height: 22px;
}

.step1 .input.input--haruki-left{
    margin-top: -10px;
}
.step--inputs .input--container p {
    font-size: 1rem;
    color: #404040;
}
.campaign-prices {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas: "a b";
}
.future-prices {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas: "a b";
}

.camppaign-price1 {
    grid-area: a;
}

.campaign-price2 {
    grid-area: b;
    min-width: 8em;
}

.future-price1 {
    /*min-width: 8em;*/
    grid-area: a;
    margin-bottom: 0px !important;
    font-size: 80% !important;
    font-weight: 400;
}

.future-price2 {
    min-width: 9em;
    grid-area: b;
    margin-bottom: 0px !important;
    font-size: 80% !important;
    font-weight: 400;
    /*margin-left: 15px !important;
    margin-left: 15px !important;*/
}

.futureStartDate {
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    line-height: 0.9375rem !important;
    color: #808284 !important;
    margin-bottom: 5px !important;
    font-weight: bold;
}

.campaign-price {
    font-size: 2.5em;
    line-height: 1em;
    font-weight: 700;
}

.campaign-badge {
    display: inline !important;
    padding: 0.2em 0.6em 0.3em;
    margin-left: 2em;
    font-size: 50%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border-radius: 0.25em;
    background-color: #404040;
}

.campaign-title {
    color: #9E699B;
    font-size: 1.4em;
    font-weight: 800;
    padding-bottom: 0.5em;
    text-transform: uppercase;
}
@media only screen and (max-width: 619px) {
    .campaign-title {
        margin-top: 0.875rem;
    }
}
p.closed-step1-description {
    font-size: 65% !important;
    color: #808284 !important;
    margin-top: 0.25rem !important;
    line-height: 125% !important;
}

.extra-product-description {
    font-size: 0.75rem;
    line-height: 0.9375rem;
}
.extra-product-check--container{
    margin-bottom: 10px !important;
    margin-top: 20px !important;
}
.extra-product-title{
    margin-bottom: 0px !important;
}