/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

@font-face {
  font-family: 'nokia_pure_headlineextra_bold';
  src: url(fonts/nokiapureheadline_extrabold-webfont.woff2) format("woff2"), url(fonts/nokiapureheadline_extrabold-webfont.woff) format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'nokia_pure_headlinelight';
  src: url(fonts/nokiapureheadline_light-webfont.woff2) format("woff2"), url(fonts/nokiapureheadline_light-webfont.woff) format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'nokia_pure_headlineregular';
  src: url(fonts/nokiapureheadline_regular-webfont.woff2) format("woff2"), url(fonts/nokiapureheadline_regular-webfont.woff) format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'nokia_pure_headlineultraLt';
  src: url(fonts/nokiapureheadline_ultralight-webfont.woff2) format("woff2"), url(fonts/nokiapureheadline_ultralight-webfont.woff) format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'nokia_pure_textbold';
  src: url(fonts/nokiapuretext-bold-webfont.woff2) format("woff2"), url(fonts/nokiapuretext-bold-webfont.woff) format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'nokia_pure_textlight';
  src: url(fonts/nokiapuretext-light-webfont.woff2) format("woff2"), url(fonts/nokiapuretext-light-webfont.woff) format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'nokia_pure_textmedium';
  src: url(fonts/nokiapuretext-medium-webfont.woff2) format("woff2"), url(fonts/nokiapuretext-medium-webfont.woff) format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'nokia_pure_textregular';
  src: url(fonts/nokiapuretext-regular-webfont.woff2) format("woff2"), url(fonts/nokiapuretext-regular-webfont.woff) format("woff");
  font-weight: normal;
  font-style: normal; }

.progress-bar-wrapper {
  display: block;
  margin-top: 10px;
  width: 100%;
  min-height: 6px;
  height: 6px;
  background-color: #edf2f5;
  border-radius: 6px; }
  .progress-bar-wrapper .progress-bar-fill {
    border-radius: 6px;
    height: 6px;
    background-color: #0065ED;
    transition: width 0.5s ease-in-out; }

.SlidesWrapper {
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding: 40px 0;
  min-height: 700px; }
  .outro-active .SlidesWrapper {
    min-height: auto; }
  .intro-active .SlidesWrapper {
    min-height: auto; }
  @media (max-width: 1000px) {
    .SlidesWrapper {
      min-height: auto; } }
  @media all and (max-width: 1100px) {
    .SlidesWrapper {
      padding: 40px 24px; } }

.Slide {
  width: 100%; }

.IntroSlide {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-top: 80px;
  padding-bottom: 80px; }
  @media (max-width: 600px) {
    .IntroSlide {
      padding-top: 48px;
      padding-bottom: 48px; } }
  .IntroSlide .IconWrapper {
    width: 30%;
    position: relative; }
  .IntroSlide .TitleWrapper {
    width: 70%; }
  .IntroSlide .BodyWrapper {
    padding-left: 30%;
    width: 100%; }
  @media (max-width: 600px) {
    .IntroSlide .BodyWrapper {
      padding-left: 0;
      width: 100%; } }
  .IntroSlide svg {
    right: 10%;
    position: absolute;
    max-width: 80%; }
    @media (max-width: 600px) {
      .IntroSlide svg {
        height: 100px;
        width: 80px;
        position: relative;
        right: auto; } }

.OutroSlide {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; }
  .OutroSlide > * {
    max-width: 50%;
    padding: 20px; }
    @media (max-width: 600px) {
      .OutroSlide > * {
        max-width: 100%;
        padding: 0; } }

.OutroSlide p {
  margin: 30px 0; }

.IntroSlide {
  color: #fff; }
  .IntroSlide h1,
  .IntroSlide h2,
  .IntroSlide p {
    color: #fff; }
  .IntroSlide h1 {
    font-family: "nokia_pure_textbold"; }
    @media (max-width: 600px) {
      .IntroSlide h1 {
        font-size: 1.5rem;
        line-height: 2rem; } }
  @media (max-width: 600px) {
    .IntroSlide h2 {
      font-size: 1rem;
      line-height: 1.6rem;
      margin: 0;
      padding: 0; } }
  .IntroSlide button {
    background-color: #fff;
    color: #000; }

.MythSlide {
  display: flex;
  flex-direction: column; }
  .MythSlide h1 {
    margin: 0.5rem 0 32px;
    padding: 0;
    color: #1d1e20; }
    @media (max-width: 600px) {
      .MythSlide h1 {
        font-size: 1.5rem;
        line-height: 2rem; } }
  .MythSlide h2 {
    color: #124191;
    margin: 0;
    padding: 0; }
  .MythSlide h3 {
    color: #124191;
    font-size: 0.75rem;
    margin: 0;
    padding: 0; }
  .MythSlide-content {
    display: flex; }
    @media (max-width: 1000px) {
      .MythSlide-content {
        flex-wrap: wrap; } }
    .MythSlide-content h2 {
      color: #124191;
      font-family: "nokia_pure_textbold";
      font-size: 1.5rem;
      margin: 0.5rem 0 0.2rem 0; }
    .MythSlide-content h3 {
      color: #124191;
      font-family: "nokia_pure_headlineultraLt";
      font-size: 1rem;
      margin-top: 0rem; }
    .MythSlide-content .explanation a {
      color: #0065ED;
      text-decoration: none; }
    .MythSlide-content > * {
      display: flex;
      flex-direction: column;
      padding: 0;
      width: 50%; }
      .MythSlide-content > *.results {
        padding-right: 5%; }
      @media (min-width: 1001px) {
        .MythSlide-content > *:first-child {
          width: 20%; }
        .MythSlide-content > *.results {
          width: 50%; }
        .MythSlide-content > *.more-info-box {
          width: 30%; } }
      @media (max-width: 1000px) {
        .MythSlide-content > *:first-child {
          width: 100%; }
        .MythSlide-content > *.results {
          width: 60%; }
        .MythSlide-content > *.more-info-box {
          width: 40%; } }
      @media (max-width: 600px) {
        .MythSlide-content > *:first-child {
          width: 100%; }
        .MythSlide-content > *.results {
          width: 100%; }
        .MythSlide-content > *.more-info-box {
          width: 100%; }
          .MythSlide-content > *.more-info-box a {
            margin: 0;
            padding: 24px !important; }
            .MythSlide-content > *.more-info-box a img {
              max-height: 150px;
              width: auto; } }
      .MythSlide-content > *:first-child {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start; }
        @media (max-width: 1000px) {
          .MythSlide-content > *:first-child {
            width: 100%;
            flex-direction: row;
            padding-bottom: 2rem; } }
        .MythSlide-content > *:first-child button {
          position: relative;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          height: 48px;
          border-radius: 24px;
          padding: 0 38px 0 58px;
          border: 1px solid #124191;
          background-color: #fff;
          font-size: 1.5rem;
          color: #1d1e20;
          font-family: nokia_pure_headlinelight;
          margin: 0 20px 20px 0; }
          @media (max-width: 1000px) {
            .MythSlide-content > *:first-child button {
              margin: 0 2% 2% 0;
              width: auto; } }
          .MythSlide-content > *:first-child button svg {
            left: 20px;
            position: absolute; }
          .MythSlide-content > *:first-child button.active {
            border: 1px solid #0065ED;
            background-color: #0065ED;
            font-family: "nokia_pure_textmedium";
            color: #fff; }
      .MythSlide-content > *.more-info-box a {
        padding: 15px 30px;
        padding-bottom: 55px;
        background-color: #edf2f5;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        text-decoration: none;
        color: #0065ED; }
        .MythSlide-content > *.more-info-box a h3 {
          color: #0065ED;
          font-size: 1.04rem;
          margin: 15px 0 0 0;
          font-family: "nokia_pure_textbold"; }
        .MythSlide-content > *.more-info-box a p,
        .MythSlide-content > *.more-info-box a h5 {
          margin: 0.1rem 0;
          padding: 0; }
        .MythSlide-content > *.more-info-box a h5 {
          font-family: "nokia_pure_textlight";
          font-size: 1.05rem;
          line-height: 1.5rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
          max-width: 100%;
          width: 100%; }
        .MythSlide-content > *.more-info-box a .Icon {
          align-self: center;
          max-width: 200px;
          margin-top: 20px;
          margin-bottom: 20px; }
        .MythSlide-content > *.more-info-box a .Arrow {
          max-width: 100%;
          margin-left: 15px; }

.Slide {
  transition: opacity 0.3s linear; }

.fade-enter {
  display: none; }

.fade-enter-done {
  display: flex; }

.fade-exit {
  opacity: 1; }

.fade-exit-active {
  opacity: 0; }

.more-info-box__cta {
  display: flex;
  width: 100%;
  align-items: center; }
  .more-info-box__cta > div {
    flex: 0 1 100%; }

.Navigation {
  display: flex;
  flex-direction: column;
  padding-top: 30px;
  width: 100%;
  transition: opacity 0.5s ease;
  flex: 1; }
  .Navigation.hidden {
    opacity: 0; }
  .Navigation button {
    border: 1px solid #0065ED;
    color: #0065ED;
    padding: 12px 38px;
    background-color: #fff;
    margin: 0 10px 30px 0; }
    .Navigation button.primary {
      border: 1px solid #0065ED;
      color: #ffffff;
      background-color: #0065ED; }
    .Navigation button.disabled {
      border-color: #bec8d2;
      color: #bec8d2;
      cursor: default; }

* {
  box-sizing: border-box; }

html, body {
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
  font-family: 'nokia_pure_textlight';
  color: #1D1E20; }

body {
  font-size: 16px;
  background-color: #fff; }
  body.intro-active {
    background-color: #124191; }

h1, h2, h3, h4, h5 {
  font-family: 'nokia_pure_textmedium';
  font-weight: normal; }

h1 {
  font-family: 'nokia_pure_headlineultraLt';
  font-size: 2.5rem;
  line-height: 2.8rem;
  margin: 1rem 0;
  color: #1d1e20; }

h2 {
  font-family: 'nokia_pure_headlineultraLt';
  font-size: 1.5rem;
  line-height: 1.5rem;
  margin: 1.5rem 0 0.5rem; }

.title-info p {
  font-family: 'nokia_pure_headlineultraLt';
  font-size: 1rem;
  line-height: 1.4rem;
  margin: -24px 0 64px; }

.results ul li,
p {
  font-family: 'nokia_pure_headlineultraLt';
  font-size: 1rem;
  line-height: 1.4rem;
  margin: 1rem 0; }

strong {
  font-family: 'nokia_pure_textbold'; }

img {
  max-width: 100%; }

a.button,
button {
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 3px;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  background-color: #0065ED;
  color: #ffffff; }
  a.button.active,
  button.active {
    background-color: red; }
  a.button:focus,
  button:focus {
    outline: none; }

#Next-Intro,
#Next-Outro {
  min-width: 186px;
  padding-top: 16px;
  padding-bottom: 16px;
  display: inline-block;
  text-align: center;
  font-size: 16px; }

#react {
  background-color: inherit;
  padding: 0;
  margin: 0 auto 0;
  width: 1140px;
  max-width: 100%; }
  @media (max-width: 1000px) {
    #react {
      width: 100%;
      height: auto; } }