/* Tools
Any animations, or functions used throughout the project.
Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here
*/

/* Generic
This is where reset, normalize & box-sizing styles go.
*/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

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

/* Grouping content
   ========================================================================== */

/**
 * Add the correct box sizing in Firefox.
 */

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

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

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

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
 */

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

ul {
  padding-inline-start:  20px;
}


/* CSS variables */

:root {
  --column-gap: 2.13%;
  --column-width-multiplier: 8.333;
}

/* Mobile layout */

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}


  .row-fluid .span1,
  .row-fluid .span2,
  .row-fluid .span3,
  .row-fluid .span4,
  .row-fluid .span5,
  .row-fluid .span6,
  .row-fluid .span7,
  .row-fluid .span8,
  .row-fluid .span9,
  .row-fluid .span10,
  .row-fluid .span11,
  .row-fluid .span12{
  min-height: 1px;
  width: 100%;
}

/* Desktop layout */

@media (min-width: 768px) {
  .row-fluid {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  
    .row-fluid .span1 {
      width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span2 {
      width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span3 {
      width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span4 {
      width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span5 {
      width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span6 {
      width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span7 {
      width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span8 {
      width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span9 {
      width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span10 {
      width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span11 {
      width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
    }
  
}
.content-wrapper {
  margin: 0 auto;
  /* padding: 0 1rem; */
}

@media screen and (min-width: 1380px) {
  .content-wrapper {
    padding: 0;
  }
}

.dnd-section > .row-fluid {
  margin: 0 auto;
}

.dnd-section .dnd-column {
  padding: 0 1rem;
}

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}



:root {
  --Tukivrit-Lime: #C0E300;
  --Pvrit-Ametisti: #96008F;
  --Pvrit-Lumme: #004107;
  --Pvrit-Mustikka: #004107;
  --Tukivrit-Vesi: #A3E4E8;
  --Tukivrit-Laventeli: #E0CCFF;
  --Tukivrit-Varjo: #1D1D1D;
  --Pvrit-Valkoinen: #ffffff;
  --Greyscale-Vaaleanharmaa-light: #F2F2F2;
  --font-family: covik-sans-mono,sans-serif;
  --font-family-heading: itc-benguiat, serif;
}

*,
*:before,
*:after {
  margin: 0;
  padding: 0 0 0 0;
  box-sizing: inherit;
  font-family: inherit;
}

html {
  font-size: 62.5%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-family, sans-serif);
  font-size: 1.6rem;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.hidden {
  display: none !important;
}

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

.iframe-height-900 iframe{
  height: 900px;
}

@media screen and (max-width: 900px){
  .iframe-height-900 iframe{
    height: 940px;
  }
}

@media screen and (max-width: 825px){
  .iframe-height-900 iframe{
    height: 1110px;
  }
}

@media screen and (max-width: 765px){
  .iframe-height-900 iframe{
    height: 1330px;
  }
}

@media screen and (max-width: 530px){
  .iframe-height-900 iframe{
    height: 1390px;
  }
}

@media screen and (max-width: 460px){
  .iframe-height-900 iframe{
    height: 1475px;
  }
}

@media screen and (max-width: 390px){
  .iframe-height-900 iframe{
    height: 1580px;
  }
}

/* Reset iOS styling */
textarea,
input.text,
[type="text"],
[type="button"],
[type="submit"],
select,
.input-checkbox {
  -webkit-appearance: none;
  border-radius: 0;
  color: inherit;
}



/* Elements
This is where base styles for elements go.
*/

button,
.button,
.hs-button {
  background: var(--Pvrit-Valkoinen, #fff);
  border: 2px solid var(--Pvrit-Ametisti, #96008f);
  border-radius: 50px;
  color: var(--Pvrit-Ametisti, #96008f);
  cursor: pointer;
  display: inline-block;
  font-family: covik-sans-mono, sans-serif;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  padding: 12px 32px;
  text-align: center;
  text-decoration: none;
  text-align: center;
}

button:hover,
.button:hover,
.hs-button:hover {
  border: 2px solid var(--Ametisti-Light, #b000a8);
  color: var(--Ametisti-Light, #b000a8);
}

button:focus-visible,
.button:focus-visible,
.hs-button:focus-visible {
  border: 2px solid var(--Ametisti-Light, #b000a8);
  color: var(--Ametisti-Light, #b000a8);
}

button:active,
.button:active,
.hs-button:active {
  background: rgba(176, 0, 168, .1);
  border: 2px solid var(--Pvrit-Ametisti, #96008f);
}

button:disabled,
.button:disabled,
.hs-button:disabled {
  background: var(--Pvrit-Valkoinen, #fff);
  border: 2px solid var(--Greyscale-Harmaa-keski, #898989);
  color: var(--Greyscale-Harmaa-keski, #898989);
  cursor: not-allowed;
}

@media screen and (min-width:992px) {
  button,
  .button,
  .hs-button {
    padding: 10px 50px;
  }
}

button.primary,
.button.primary,
.hs-button.primary {
  background: var(--Pvrit-Ametisti, #96008f);
  color: var(--Pvrit-Valkoinen, #fff);
}

button.primary:hover,
.button.primary:hover,
.hs-button.primary:hover {
    background: var(--Ametisti-Light, #b000a8);
}

button.primary:focus-visible,
.button.primary:focus-visible,
.hs-button.primary:focus-visible {
  background: var(--Ametisti-Light, #b000a8);
}

button.primary:active,
.button.primary:active,
.hs-button.primary:active {
  background: var(--Pvrit-Ametisti, #96008f);
  border: 3px solid var(--Tukivrit-Laventeli, #e0ccff);
}

button.primary:disabled,
.button.primary:disabled,
.hs-button.primary:disabled {
  color: var(--Pvrit-Valkoinen, #fff);
  background: var(--Greyscale-Harmaa-keski, #898989);
}

/* Input as a button – requires label after input */
input[type='checkbox']:checked ~ label {
  background-color: #004107;
  border: solid 2px #004107;
  color: #ffffff;
  position: relative;
}
input[type='checkbox']:checked ~ label:hover {
  background-color: #004107;
  border: solid 2px #004107;
  color: #ffffff;
}
input[type='checkbox']:checked ~ label::after {
  content: url('https://22555061.fs1.hubspotusercontent-na1.net/hubfs/22555061/raw_assets/public/ostoprosessi/img/checkbox.svg');
  position: absolute;
  top: calc(50% - 13px);
}


/* No button */

.no-button,
.no-button:hover,
.no-button:focus,
.no-button:active {
    background: none;
    border: none;
    border-radius: 0;
    color: initial;
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    margin-bottom: 0;
    padding: 0;
    text-align: left;
    text-decoration: none;
    transition: none;
}

.lumme-button {
  background: var(--Pvrit-Valkoinen, #fff);
  border: 2px solid var(--Pvrit-Ametisti, #96008f);
  border-radius: 50px;
  color: var(--Pvrit-Ametisti, #96008f);
  cursor: pointer;
  display: inline-block;
  font-family: covik-sans-mono, sans-serif;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  padding: 12px 32px;
  text-align: center;
  text-decoration: none;
  text-align: center;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-content: center;

  svg {
    fill: var(--Pvrit-Ametisti, #96008f);
  }

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

.lumme-button:hover:enabled {
  border: 2px solid var(--Pvrit-Ametisti, #96008f);
  background: var(--Pvrit-Ametisti, #96008f);
  color: var(--Pvrit-Valkoinen, #fff);
}

.lumme-button.primary {
  background: var(--Pvrit-Ametisti, #96008f);
  color: var(--Pvrit-Valkoinen, #fff);
  border: 2px solid var(--Pvrit-Ametisti, #96008f);

  svg {
    fill: var(--Pvrit-Valkoinen, #fff);
  }

}

.lumme-button.primary:hover:enabled {
  background: var(--Pvrit-Valkoinen, #fff);
  color: var(--Pvrit-Ametisti, #96008f);
  border: 2px solid var(--Pvrit-Ametisti, #96008f);

  svg {
    fill: var(--Pvrit-Ametisti, #96008f);
  }
}

.lumme-button.secondary {
  background: transparent;
  color: var(--Pvrit-Lumme, #004107);
  border: 2px solid var(--Pvrit-Lumme, #004107);

  svg {
    fill: var(--Pvrit-Lumme, #004107);
  }
}

.lumme-button.secondary:hover:enabled {
  background: var(--Pvrit-Lumme, #004107);
  color: var(--Pvrit-Valkoinen, #fff);
  border: 2px solid var(--Pvrit-Lumme, #004107);

  svg {
    fill: var(--Pvrit-Valkoinen, #fff);
  }
}

.lumme-button.secondary.white {
  background: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;

  svg {
    fill: #ffffff;
  }
}

.lumme-button.secondary.white:hover:enabled {
  background: #ffffff;
  color: var(--Pvrit-Lumme, #004107);
  border: 2px solid #ffffff;

  svg {
    fill: var(--Pvrit-Lumme, #004107);
  }
}

.lumme-button.lime {
  background: var(--Tukivrit-Lime, #C0E300);
  color: var(--Pvrit-Lumme, #004107);
  border: 2px solid var(--Tukivrit-Lime, #C0E300);

  svg {
    fill: var(--Pvrit-Lumme, #004107);
  }
}
.lumme-button.lime:hover:enabled {
  background: var(--Pvrit-Lumme, #004107);
  color: var(--Tukivrit-Lime, #C0E300);
  border: 2px solid var(--Tukivrit-Lime, #C0E300);

  svg {
    fill: var(--Tukivrit-Lime, #C0E300);
  }
}

.lumme-button.lumme {
  background: var(--Pvrit-Lumme, #004107);
  color: var(--Pvrit-Valkoinen, #fff);
  border: 2px solid var(--Pvrit-Lumme, #004107);

  svg {
    fill: var(--Pvrit-Valkoinen, #fff);
  }
}

.lumme-button.lumme:hover:enabled {
  background: var(--Pvrit-Valkoinen, #fff);
  color: var(--Pvrit-Lumme, #004107);
  border: 2px solid var(--Pvrit-Lumme, #004107);

  svg {
    fill: var(--Pvrit-Lumme, #004107);
  }
}

.lumme-button:disabled {
  background: #6E7071;
  color: var(--Pvrit-Valkoinen, #ffffff);
  border: #6E7071;

  svg {
    fill: var(--Pvrit-Valkoinen, #ffffff);
  }
}
/* The overflow-wrap is meant to prevent long/large words from breaking the mobile responsiveness of a page (e.g. horizontal scrolling). It is preferred to reduce font sizes on mobile to address this, with this CSS specifically helping with extreme scenarios where a reduction in font size is not possible. */

body {
  line-height: 1.4;
  overflow-wrap: break-word;
}

/* Paragraphs */

p {
  margin: 0 0 1.4rem;
  font-size: 1.6rem;
}

/* Anchors */

a {
  cursor: pointer;
  color: #004107;
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin: 0 0 1.4rem;
  font-family: var(--font-family-heading, serif);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  hyphens: none;
}

h1, .h1 {
  font-size: 2.4rem;
}

h2, .h2 {
  font-size: 2.2rem;
}

h3, .h3 {
  font-size: 2rem;
}

h4, .h4 {
  font-size: 2rem;
}

/* Lists */

ul,
ol {
  margin: 0 0 1.4rem;
}

ul ul,
ol ul,
ul ol,
ol ol {
  margin: 0;
}

ul.no-list,
ul.inputs-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

ul.inputs-list input[type="radio"],
ul.inputs-list input[type="checkbox"] {
  margin-right: 0.8rem;
  transform: scale(1.5);
  accent-color: var(--Pvrit-Lumme);
}

ul.inputs-list .hs-input input[type="radio"] {
  transform: scale(1.5);
}

.hs-form-checkbox-display, .hs-form-radio-display, .hs-form-booleancheckbox-display {
  display: flex;
  gap: 10px;
}

/* Custom list icons */
ul.icon {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
ul.icon--checkmark li {
  padding-left: 2.4rem;
  margin-bottom: 0.8rem;
  position: relative;
}

ul.icon--checkmark li:before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'%3E%3Cpath d='M2.95723 4.69988C2.95723 4.23796 3.14073 3.79496 3.46736 3.46833C3.79398 3.14171 4.23698 2.95821 4.6989 2.95821H5.49057C5.95045 2.95795 6.39155 2.77581 6.71765 2.45154L7.27182 1.89738C7.43367 1.73461 7.6261 1.60544 7.83805 1.5173C8.05 1.42916 8.27728 1.38379 8.50682 1.38379C8.73636 1.38379 8.96364 1.42916 9.17558 1.5173C9.38753 1.60544 9.57996 1.73461 9.74182 1.89738L10.296 2.45154C10.6222 2.77613 11.0639 2.95821 11.5231 2.95821H12.3147C12.7767 2.95821 13.2197 3.14171 13.5463 3.46833C13.8729 3.79496 14.0564 4.23796 14.0564 4.69988V5.49154C14.0564 5.95071 14.2385 6.39246 14.5631 6.71863L15.1172 7.27279C15.28 7.43465 15.4092 7.62708 15.4973 7.83903C15.5854 8.05097 15.6308 8.27825 15.6308 8.50779C15.6308 8.73734 15.5854 8.96461 15.4973 9.17656C15.4092 9.38851 15.28 9.58094 15.1172 9.74279L14.5631 10.297C14.2388 10.6231 14.0567 11.0642 14.0564 11.524V12.3157C14.0564 12.7776 13.8729 13.2206 13.5463 13.5473C13.2197 13.8739 12.7767 14.0574 12.3147 14.0574H11.5231C11.0632 14.0576 10.6221 14.2398 10.296 14.564L9.74182 15.1182C9.57996 15.281 9.38753 15.4101 9.17558 15.4983C8.96364 15.5864 8.73636 15.6318 8.50682 15.6318C8.27728 15.6318 8.05 15.5864 7.83805 15.4983C7.6261 15.4101 7.43367 15.281 7.27182 15.1182L6.71765 14.564C6.39155 14.2398 5.95045 14.0576 5.49057 14.0574H4.6989C4.23698 14.0574 3.79398 13.8739 3.46736 13.5473C3.14073 13.2206 2.95723 12.7776 2.95723 12.3157V11.524C2.95697 11.0642 2.77484 10.6231 2.45057 10.297L1.8964 9.74279C1.73363 9.58094 1.60447 9.38851 1.51633 9.17656C1.42819 8.96461 1.38281 8.73734 1.38281 8.50779C1.38281 8.27825 1.42819 8.05097 1.51633 7.83903C1.60447 7.62708 1.73363 7.43465 1.8964 7.27279L2.45057 6.71863C2.77484 6.39253 2.95697 5.95142 2.95723 5.49154V4.69988Z' fill='%23004107'/%3E%3Cpath d='M6.125 8.49935L7.70833 10.0827L10.875 6.91602' fill='%23004107'/%3E%3Cpath d='M6.125 8.49935L7.70833 10.0827L10.875 6.91602' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  position: absolute;
  top: 0.3rem;
  left: 0;
}

/* Code blocks */

pre {
  overflow: auto;
}

code {
  vertical-align: bottom;
}

/* Blockquotes */

blockquote::before {
  content: url("data:image/svg+xml,%3Csvg width='29' height='26' viewBox='0 0 29 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25.313 25.5977C26.0589 25.5977 26.7743 25.3013 27.3017 24.7739C27.8292 24.2464 28.1255 23.5311 28.1255 22.7852V15.917C28.1255 15.1711 27.8292 14.4557 27.3017 13.9283C26.7743 13.4008 26.0589 13.1045 25.313 13.1045H21.4092C21.4092 12.1173 21.4683 11.1273 21.5836 10.1402C21.758 9.09391 22.0505 8.16297 22.4555 7.35016C22.8633 6.53453 23.3864 5.89609 24.0277 5.42922C24.6661 4.90609 25.4789 4.64453 26.4689 4.64453V0.285156C24.8405 0.285156 23.4174 0.633906 22.1939 1.33141C20.9811 2.02184 19.9384 2.97518 19.1424 4.12141C18.3434 5.3851 17.7545 6.76993 17.3986 8.22203C17.04 9.82448 16.8645 11.4625 16.8755 13.1045V22.7852C16.8755 23.5311 17.1718 24.2464 17.6992 24.7739C18.2267 25.3013 18.9421 25.5977 19.688 25.5977H25.313ZM8.43799 25.5977C9.18391 25.5977 9.89928 25.3013 10.4267 24.7739C10.9542 24.2464 11.2505 23.5311 11.2505 22.7852V15.917C11.2505 15.1711 10.9542 14.4557 10.4267 13.9283C9.89928 13.4008 9.18391 13.1045 8.43799 13.1045H4.53424C4.53424 12.1173 4.5933 11.1273 4.70861 10.1402C4.88299 9.09391 5.17549 8.16297 5.58049 7.35016C5.9883 6.53453 6.51143 5.89609 7.15268 5.42922C7.79111 4.90609 8.60392 4.64453 9.59392 4.64453V0.285156C7.96549 0.285156 6.54236 0.633906 5.31892 1.33141C4.10614 2.02184 3.06342 2.97518 2.26736 4.12141C1.4684 5.3851 0.879519 6.76993 0.523613 8.22203C0.164979 9.82448 -0.0105204 11.4625 0.000487345 13.1045V22.7852C0.000487345 23.5311 0.296803 24.2464 0.824249 24.7739C1.3517 25.3013 2.06707 25.5977 2.81299 25.5977H8.43799Z' fill='%2396008F'/%3E%3C/svg%3E%0A");
  display: block;
  clear: both;
  margin-bottom: 2.4rem;
}

blockquote footer {
  text-align: right;
  font-style: italic;
}

blockquote footer::before {
  content: url("data:image/svg+xml,%3Csvg width='33' height='2' viewBox='0 0 33 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='4.37114e-08' y1='0.597656' x2='33' y2='0.597659' stroke='%231D1D1D'/%3E%3C/svg%3E%0A");
  display: inline-block;
  margin-right: 1rem;
  line-height: 1;
  vertical-align: text-top;
}

/* Horizontal rules */

hr {
  border: none;
  border-bottom: 1px solid #CCC;
}

/* Image alt text */

img {
  font-size: 0.583rem;
  word-break: normal;
}

@media only screen and (min-width: 768px) {
  body, p {
    font-size: 1.8rem;
  }

  h1, .h1 {
    font-size: 3.2rem;
  }
  
  h2, .h2 {
    font-size: 2.2rem;
  }
  
  h3, .h3 {
    font-size: 2rem;
  }
  
  h4, .h4 {
    font-size: 1.8rem;
  }
}
.product-card {
  background: var(--Tukivrit-Vesi, #A3E4E8);
  align-content: flex-start;
  border-radius: 8px;
  color: #000;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  overflow: hidden;
  padding: 16px;
  position: relative
}

.product-card ul {
  padding-inline-start: 0;
}

.product-filters__list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 0 16px 0;
  padding: 0;
  width: 100%;
  list-style: none;
}

.product-filters__list li {
  margin: 0 4px 4px 0;
  padding: 0.7rem 1rem;
}

.product-filters__list li.active {
  background: var(--Pvrit-Ametisti, #96008F);
  color: var(--Pvrit-Valkoinen, #FFF);
}


.product-card__container {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(1, 1fr);
  margin: 16px auto;
  padding: 0;
  width: 100%
}

.product-card>:not(.product-card__image) {
  position: relative;
  z-index: 10
}

.product-card__title {
  color: #000;
  font-family: itc-benguiat, serif;
  font-size: 2rem;
  font-weight: 700;
  z-index: 10;
  margin: 0;
}

.product-card__tags {
  margin: 8px 0 0 0;
}

.product-card__tags li {
  background: hsla(0, 0%, 100%, .5);
  border-radius: 50px;
  display: inline-block;
  list-style: none;
  margin-bottom: 6px;
  padding: 8px 16px;
  line-height: 1;
}

.product-card__tags img {
  margin-right: 9px;
  vertical-align: bottom
}

.product-card__variants {
  font-size: inherit;
  font-weight: 700;
  margin: 8px 0 0 0;
  z-index: 10
}

.product-card__variants .variant {
  background: #fff;
  border: 2px solid #004107;
  color: #004107
}

.product-card__variants .variant,
.product-card__variants .variant--active {
  border-radius: 50px;
  display: inline-block;
  list-style: none;
  padding: 4px 8px;
  margin-bottom: 4px;
  /* Note pixel difference to Figma 6 -> padding 4px + 2px border */
}

.product-card__variants .variant--active {
  background: #004107;
  border: 2px solid #004107;
  color: #fff
}

.product-card__description {
  margin: 16px 0 0 0;
  z-index: 10
}

.product-card__description ul {
  margin-left: 10px;
  padding-left: 20px
}

.product-card__line {
  border-bottom: 2px solid hsla(0, 0%, 100%, .5);
  margin: 16px 0 16px 0;
  z-index: 10
}

.product-card__campaign {
  position: relative;
  padding-left: 3rem;
  margin-bottom: 16px;
}
.product-card__campaign::before {
  content: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.95723 4.69988C2.95723 4.23796 3.14073 3.79496 3.46736 3.46833C3.79398 3.14171 4.23698 2.95821 4.6989 2.95821H5.49057C5.95045 2.95795 6.39155 2.77581 6.71765 2.45154L7.27182 1.89738C7.43367 1.73461 7.6261 1.60544 7.83805 1.5173C8.05 1.42916 8.27728 1.38379 8.50682 1.38379C8.73636 1.38379 8.96364 1.42916 9.17558 1.5173C9.38753 1.60544 9.57996 1.73461 9.74182 1.89738L10.296 2.45154C10.6222 2.77613 11.0639 2.95821 11.5231 2.95821H12.3147C12.7767 2.95821 13.2197 3.14171 13.5463 3.46833C13.8729 3.79496 14.0564 4.23796 14.0564 4.69988V5.49154C14.0564 5.95071 14.2385 6.39246 14.5631 6.71863L15.1172 7.27279C15.28 7.43465 15.4092 7.62708 15.4973 7.83903C15.5854 8.05097 15.6308 8.27825 15.6308 8.50779C15.6308 8.73734 15.5854 8.96461 15.4973 9.17656C15.4092 9.38851 15.28 9.58094 15.1172 9.74279L14.5631 10.297C14.2388 10.6231 14.0567 11.0642 14.0564 11.524V12.3157C14.0564 12.7776 13.8729 13.2206 13.5463 13.5473C13.2197 13.8739 12.7767 14.0574 12.3147 14.0574H11.5231C11.0632 14.0576 10.6221 14.2398 10.296 14.564L9.74182 15.1182C9.57996 15.281 9.38753 15.4101 9.17558 15.4983C8.96364 15.5864 8.73636 15.6318 8.50682 15.6318C8.27728 15.6318 8.05 15.5864 7.83805 15.4983C7.6261 15.4101 7.43367 15.281 7.27182 15.1182L6.71765 14.564C6.39155 14.2398 5.95045 14.0576 5.49057 14.0574H4.6989C4.23698 14.0574 3.79398 13.8739 3.46736 13.5473C3.14073 13.2206 2.95723 12.7776 2.95723 12.3157V11.524C2.95697 11.0642 2.77484 10.6231 2.45057 10.297L1.8964 9.74279C1.73363 9.58094 1.60447 9.38851 1.51633 9.17656C1.42819 8.96461 1.38281 8.73734 1.38281 8.50779C1.38281 8.27825 1.42819 8.05097 1.51633 7.83903C1.60447 7.62708 1.73363 7.43465 1.8964 7.27279L2.45057 6.71863C2.77484 6.39253 2.95697 5.95142 2.95723 5.49154V4.69988Z' fill='%23004107'/%3E%3Cpath d='M6.125 8.49984L7.70833 10.0832L10.875 6.9165' fill='%23004107'/%3E%3Cpath d='M6.125 8.49984L7.70833 10.0832L10.875 6.9165' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  position: absolute;
  top: 0.5rem;
  left: 0;
}

.product-card__summary {
  margin: 0;
}

.product-card__summary li {
  list-style: none
}

.product-card__price-container {
  z-index: 10
}

.product-card__price {
  font-family: itc-benguiat, serif;
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}

.product-card__price span {
  font-size: 16px
}

.product-card__note {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 16px
}

.product-card__select {
  margin-top: auto;
  text-align: center;
  width: 100%
}

.product-card__view-more {
  font-weight: 600;
  color: var(--Tukivrit-Varjo, #1D1D1D);
  text-align: center;
  margin: 1.2rem 0;
}

.product-card__image {
  bottom: -15%;
  position: absolute;
  left: 20%;
  transform: scale(180%);
  z-index: 1
}

@media only screen and (min-width:768px) {
  .product-card__container {
    grid-template-columns: repeat(2, 1fr)
  }
  .product-filters__list li {
    margin: 0 8px 8px 0;
    padding: 0.7rem 2.4rem;
  }
}

@media only screen and (min-width:992px) {
  .product-card__container {
    grid-template-columns: repeat(3, 1fr)
  }

  .product-card__variants {
    margin: 12px 0 0 0;
  }

  .product-card__select {
    width: auto
  }
}
label {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--Pvrit-Lumme, #004107);
}

input[type=text],
input[type=search],
input[type=email],
input[type=password],
input[type=tel],
input[type=number],
input[type=file],
textarea {
  display: inline-block;
  font-size: 1.6rem;
  border-radius: 4px;
  padding: 1.2rem;
  border: 2px solid var(--Pvrit-Lumme, #004107);
  background: var(--Pvrit-Valkoinen, #FFF);
  width: 100%;
  margin-bottom: 2rem;
}

input::placeholder {
  color: var(--Greyscale-keskiharmaa, #BCBCBC);
}

input:active,
input:focus,
input:focus-visible,
textarea:active,
textarea:focus,
textarea:focus-visible,
select:active,
select:focus,
select:focus-visible  {
  border: 2px solid var(--Pvrit-Vaalea-Lumme, #7FB722);
  outline: 0;
}

/* We do not use :invalid since we want to show invalid fields after field is edited not when the form is validated.
This way we can mark fields red one by one. Better UX when uset won't feel the form overwhelming right away. */
input[type=text].invalid,
input[type=search].invalid,
input[type=email].invalid,
input[type=password].invalid,
input[type=tel].invalid,
input[type=number].invalid,
input[type=file].invalid {
  border: 2px solid var(--Error-punainen, #C52009);
}

select {
  display: inline-block;
  font-size: 1.6rem;
  border-radius: 4px;
  padding: 1.2rem;
  border: 2px solid var(--Pvrit-Lumme, #004107);
  background: var(--Pvrit-Valkoinen, #FFF);
  width: 100%;
  margin-bottom: 2rem;
  color: var(--Pvrit-Lumme, #004107);
}

input[type=range] {
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 6px;
  margin-top: 5rem;
  margin-bottom: 5rem;
  position: relative;
  background: var(--Primary-Lumme, #004107);
  outline: none;
  border-radius: 5rem;
}
input[type=range]::before {
  content: attr(min);
  position: absolute;
  left: 0;
  top: -4rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--Pvrit-Lumme, #004107);
}
input[type=range]::after {
  content: attr(max);
  position: absolute;
  right: 0;
  top: -4rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--Pvrit-Lumme, #004107);
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 7.2rem;
  height: 3.4rem;
  border-radius: 4.8rem;
  background: var(--Primary-Lumme, #004107) url("//4047198.fs1.hubspotusercontent-na1.net/hubfs/4047198/raw_assets/public/lumme_energia/images/ActionChip.svg");;
  cursor: pointer;
}

input[type=range]::-moz-range-thumb {
  width: 7.2rem;
  height: 3.4rem;
  border-radius: 4.8rem;
  background: var(--Primary-Lumme, #004107) url("//4047198.fs1.hubspotusercontent-na1.net/hubfs/4047198/raw_assets/public/lumme_energia/images/ActionChip.svg");;
  cursor: pointer;
}


/* Custom number input with control buttons */
.input-control__container {
  position: relative;
  display: inline-block;
  border-radius: 4.8rem;
  border: 1px solid var(--Sky-Light, #E9ECEE);
  background: var(--Sky-White, #FFF);
}

input.input-control__input { 
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;

  display: inline-block;
  border-radius: 4px;
  margin: 0;
  border: none;
  background: none;
  width: 100%;
  min-width: 19rem;
  padding: 1.2rem 0 1.2rem 0.8rem; /* Left 0.8 is to make text REALLY center */
  text-align: center;
}

.input-control__increase,
.input-control__decrease {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 5rem;
  padding: 0;
  margin: 0 !important;
  background: var(--Primary-Lumme, #004107);
  border: 1px solid #fff;
  text-align: center;
}
.input-control__increase:hover,
.input-control__decrease:hover {
  border: 1px solid var(--Pvrit-Vaalea-Lumme, #7FB722);
  background: var(--Primary-Lumme, #004107);
}
.input-control__increase {
  left: auto;
  right: 0;
}


/* Custom radio buttons and checkboxes */
input[type='radio'] + .checkmark,
input[type='checkbox'] + .checkmark {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  height: 25px;
  width: 25px;
  background-color: #ffffff;
  object-fit: contain;
  border-radius: 4px;
  border: solid 2px #004107;
}

input[type='radio'] ~ .checkmark  + * {
  line-height: 1.5;
  padding-left: 3.5rem;
}

input[type='radio'] ~ .checkmark  + * {
  line-height: 1.5;
  padding-left: 3.5rem;
}

input[type='radio'] ~ .checkmark {
  border-radius: 50%;
}
input[type='radio'] ~ .checkmark::after {
    position: absolute;
    top: 0;
    left: 0;
    border: 3px solid white;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0.9);
  }

input[type="checkbox"] + .checkmark::after {
  content: '';
  top: -2px;
  left: -2px;
  position: absolute;
}

input[type="checkbox"]:checked ~ .checkmark::after {
  content: url('https://22555061.fs1.hubspotusercontent-na1.net/hubfs/22555061/raw_assets/public/ostoprosessi/img/checkbox.svg');
}

/* Shared for both: checkbox + radio */
input:checked ~ .checkmark {
  background-color: #004107;
}

input.invalid ~ .checkmark {
  border: 2px solid var(--Error-punainen, #C52009);
}

input[type='radio']:checked ~ .checkmark::after {
  content: '';
}



/* Submit button 

--> USE class "button" for submit buttons to make them look like CTAs

*/
body.modal-open {
  height: 100dvh;
  position: fixed;
  overflow: hidden;
  padding-right: 15px;
}

.modal {
  display: none;
  z-index: 40;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  width: 100vw;
  
  /* Standard version (Firefox only for now) */
  scrollbar-color: var(--Pvrit-Ametisti, #96008F) #E8E8E8;
}

.modal::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
.modal::-webkit-scrollbar-thumb {
  background: var(--Pvrit-Ametisti, #96008F);
  border-radius: 10px;
}
.modal::-webkit-scrollbar-track {
  background: #E8E8E8;
  border-radius: 10px;
}

.modal__overlay {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: rgba(29, 29, 29, 0.2);
}

.modal--open {
  display: block;
}

.modal__content {
  z-index: 60;
  position: relative;
  padding: 4.8rem;
  border-radius: 0;
  background: #FFF;
  width: 100vw;
  height: 100dvh;
  overflow-y: auto;
}

.modal__close {
  display: flex;
  position: absolute;
  right: 2rem;
  top: 2rem;
  color: var(--Tukivrit-Varjo, #1D1D1D);
  font-size: 28px;
  font-weight: bold;
  border-radius: 100px;
  background: var(--Brand-Valo, #F6F9FB);
  backdrop-filter: blur(5px);
  padding: 0.8rem;
}

.modal__close:hover,
.modal__close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

@media only screen and (min-width:560px) {
  .modal__content {
    margin: 4.8rem auto;
    border-radius: 8px;
    width: 80vw;
    height: auto;
    max-height: calc(100vh - 6.2rem);
    max-width: min(110rem, 100%);
  }
}

@media only screen and (min-width:768px) {

}
.progressbar {
  color: #898989;
  display: flex;
  justify-content: center;
  gap: 2px;
  list-style: none;
  margin: 0 auto;
  max-width: 460px;
  padding: 20px 0;
  text-align: center;
}

.progressbar li {
  color: var(--Pvrit-Lumme, #004107);
  min-width: 12rem;
}

.progressbar li:before {
  background: var(--Tukivrit-Lime, #C0E300);
  border-radius: 50px;
  color: #fff;
  content: "";
  counter-increment: step;
  display: block;
  font-weight: 700;
  height: 10px;
  line-height: 27px;
  margin: 0 auto 10px;
  text-align: center;
  width: 100%;
}

.progressbar li.active:before {
  background: var(--Tukivrit-Laventeli, #E0CCFF);
}

.progressbar li.active~:before {
  background: var(--Greyscale-Vaaleanharmaa-light, #F2F2F2);
}
.progressbar li.active ~ * {
  color: #898989;
}