* {
  padding: 0;
  margin: 0;
  box-sizing: border-box; }

body {
  background: #fcfcfc;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: grid;
  grid-template-rows: 21.1em auto 8em;
  min-height: 100vh; }
  @media only screen and (max-width: 720px) {
    body {
      grid-template-rows: 17em auto 8em; } }
  body.home, body.login {
    display: block; }

h1 {
  font-style: normal;
  font-weight: 500;
  font-size: 5.2em;
  line-height: 1.2em;
  letter-spacing: -.02em;
  color: #FFFFFF; }
  @media only screen and (max-width: 640px) {
    h1 {
      font-size: 4.8em; } }

h2 {
  font-style: normal;
  font-weight: 500;
  font-size: 4.4em;
  line-height: 1.2em;
  text-align: center;
  letter-spacing: .02em;
  color: #393F42; }
  @media only screen and (max-width: 640px) {
    h2 {
      font-size: 3.4em; } }

h3 {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 500;
  font-size: 3.2em;
  line-height: 120%;
  letter-spacing: 0.00625em;
  color: #393F42; }
  @media only screen and (max-width: 640px) {
    h3 {
      font-size: 2.8em; } }

h4 {
  font-family: Montserrat;
  font-style: normal;
  font-weight: normal;
  font-size: 2.5em;
  line-height: 142%;
  letter-spacing: 0.008em;
  color: #393F42; }

h5 {
  font-style: normal;
  font-weight: 500;
  font-size: 1.8em;
  line-height: 1.33em;
  text-align: center;
  letter-spacing: 0.0011em;
  color: #202020; }

.b-normal {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 1.6em;
  line-height: 1.5em;
  letter-spacing: 0.0125em;
  color: #687179; }

.body-lead {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 2.4em;
  line-height: 1.5em;
  color: #687179; }
  @media only screen and (max-width: 640px) {
    .body-lead {
      font-size: 2.1em; } }

.body-large {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 1.8em;
  line-height: 2em;
  color: #393F42; }
  @media only screen and (max-width: 400px) {
    .body-large {
      font-size: 1.6em; } }

.b-small {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 1.3em;
  line-height: 1.38em;
  text-align: center;
  letter-spacing: 0.015em;
  color: rgba(104, 113, 121, 0.8); }

.navigation-text {
  font-style: normal;
  font-weight: 500;
  font-size: 1.6em;
  line-height: 1em;
  letter-spacing: .0125em;
  color: #FFFFFF; }

.subtitle-1 {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 2.2em;
  line-height: 1.5em;
  color: #FFFFFF; }

.subtitle-2 {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 1.8em;
  line-height: 1.44em;
  color: #687179; }

button {
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.7em;
  letter-spacing: .01em;
  padding: 1em 2em 1em 2em;
  border: none;
  background: white;
  color: #393F42;
  font-weight: 600;
  border-radius: .24em;
  transition: color .1s, background .1s; }
  button:focus {
    outline: none; }
  button.secondary {
    padding: .9em 1.9em .9em 1.9em;
    background: #00a0eb;
    border: .1em solid white;
    color: white; }
  button:hover {
    color: #00A0EB;
    background: white; }
  button.apply-btn {
    font-size: 1.3em;
    background: linear-gradient(180deg, #0097F5 0.51%, #0392EB 97.78%);
    color: white; }
    button.apply-btn:hover {
      background: linear-gradient(180deg, #15AEF4 0.51%, #15AEF4 97.78%); }
  button.submit-btn:hover {
    color: white;
    background: #15AEF4; }
  button.get-it-btn {
    padding: .9em 1.9em .9em 1.9em;
    background: none;
    border: .1em solid #00a0eb;
    color: #00a0eb; }
    button.get-it-btn:hover {
      color: white;
      background: #15AEF4; }
  button.lets-talk-btn {
    padding: .9em 1.9em .9em 1.9em;
    background: #00a0eb;
    border: .1em solid white;
    color: white; }
    button.lets-talk-btn:hover {
      background: #15AEF4;
      color: white; }

.orange-button {
  font-size: 1.2em;
  color: white;
  padding: 0.7em 2em 0.8em 2em;
  background: #FF5F14;
  border-radius: 0.33em; }
  .orange-button:hover {
    background: #FF6E2B;
    color: white; }

form {
  text-align: left; }
  form label {
    font-style: normal;
    font-weight: normal;
    font-size: 1.2em;
    line-height: 167%;
    letter-spacing: 0.083em;
    text-transform: uppercase;
    color: #202020;
    margin-bottom: 0.666em;
    display: inline-block; }
  form input, form textarea {
    display: inline-block;
    width: 100%;
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 1.7em;
    line-height: 1.4em;
    letter-spacing: 0.011em;
    color: #354052;
    padding: 0.75em 0.8em 0.8em 0.8em;
    /*margin-bottom: 2.82em;*/
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(104, 113, 121, 0.3);
    box-sizing: border-box;
    border-radius: 0.235em; }
  form textarea {
    resize: none; }
  form button {
    background: #00A0EB;
    color: white; }
  form .form-item {
    margin-bottom: 4.8em; }
    form .form-item .error {
      display: none;
      font-family: 'Open Sans', sans-serif;
      font-style: normal;
      font-weight: normal;
      font-size: 1.3em;
      line-height: 138%;
      letter-spacing: 0.015em;
      color: #E0131F;
      margin-top: .62em; }
    form .form-item.invalid .error {
      display: block; }
    form .form-item.invalid input, form .form-item.invalid textarea {
      border: 2px solid #E0131F; }

header {
  position: relative;
  z-index: 20;
  background-image: url(../img/img-header-normal.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: center; }
  header h1 {
    position: relative;
    left: -0.1em; }
  header.header-large {
    background-image: url(../img/img-header.jpg); }
  header .inner {
    /*margin: 0 14.8em;*/
    padding: 0 14.8em;
    max-width: 144em;
    width: 100%;
    margin: 0 auto; }
  header a {
    color: inherit;
    text-decoration: inherit; }
  header #dotmetrics-logo {
    width: 18.1em; }
  header .header-wrap {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.4em 0; }
    header .header-wrap .mobile-menu-control {
      display: none;
      width: 2.4em;
      cursor: pointer; }
    header .header-wrap #orange-circle {
      position: absolute;
      right: 10em;
      bottom: -9em; }
    header .header-wrap nav {
      z-index: 5; }
      header .header-wrap nav ol {
        display: flex;
        list-style: none;
        align-items: center; }
        header .header-wrap nav ol li {
          margin: .66em 1.5em;
          opacity: 1; }
          header .header-wrap nav ol li:not(:last-of-type):hover {
            opacity: .8; }
          header .header-wrap nav ol li button {
            font-size: 1em; }
  header .b-wrap {
    padding-top: 12.4em;
    padding-bottom: 25.6em;
    padding-left: 4.42em; }
    header .b-wrap .subtitle-1 {
      margin-top: .72em;
      margin-bottom: 2.3em; }
    header .b-wrap a:first-of-type {
      margin-right: 4em; }
  header .h-title {
    font-style: normal;
    font-weight: normal;
    font-size: 2.2em;
    line-height: 1.31em;
    color: #FFFFFF;
    opacity: 0.7;
    padding-left: 1.9em;
    padding-bottom: 1.36em; }
  @media only screen and (max-width: 1100px) {
    header .inner {
      padding: 0 2.4em;
      margin: 0 auto;
      max-width: 84.6em; } }
  @media only screen and (max-width: 680px) {
    header {
      background-position-x: -9em; }
    header.header-large {
      background-position-x: left;
      background-position-y: bottom;
      background-image: url(../img/img-header-mobile.jpg); }
    header .header-wrap .mobile-menu-control {
      display: block; }
    header .header-wrap #orange-circle {
      position: absolute;
      right: 1.5em;
      bottom: -7.8em;
      width: 4.2em; }
    header .header-wrap nav {
      position: fixed;
      width: 100%;
      height: 100%;
      left: 0px;
      top: 0;
      background: #687179;
      display: none;
      font-size: 3em;
      padding: 5em 1em 1em 2em; }
      header .header-wrap nav.open {
        display: block; }
      header .header-wrap nav ol {
        flex-direction: column;
        align-items: start; }
        header .header-wrap nav ol li {
          margin: .66em 0; }
          header .header-wrap nav ol li button {
            border-width: 1px;
            background: none;
            font-size: .6em; }
      header .header-wrap nav #menu-close {
        position: fixed;
        top: 1.4em;
        right: .8em;
        width: 1em; }
    header .b-wrap {
      padding-top: 7em;
      padding-bottom: 12.4em;
      padding-left: 0em; }
      header .b-wrap h1 {
        font-size: 4.8em; }
      header .b-wrap .subtitle-1 {
        font-size: 2em; }
      header .b-wrap a:first-of-type {
        margin-right: 1.4em; }
      header .b-wrap button {
        padding: 1em 1.5em 1em 1.5em; }
      header .b-wrap button.secondary {
        padding: .9em 1.4em .9em 1.4em; } }
  @media only screen and (max-width: 375px) {
    header {
      font-size: 2.6666666667vw; } }

main {
  overflow: hidden; }
  main.main-ao {
    overflow: visible; }

main section {
  padding-top: 8em;
  text-align: center; }
  main section .text-wrap {
    position: relative;
    display: inline-block;
    max-width: 65.4em;
    margin: 0 2.4em 4.8em 2.4em;
    text-align: left; }
    main section .text-wrap h1 {
      color: #393F42;
      margin-bottom: .6em; }
    main section .text-wrap .body-lead {
      margin-bottom: 2em;
      display: inline-block; }
    main section .text-wrap .body-large {
      text-align: left; }
  @media only screen and (max-width: 640px) {
    main section {
      padding-top: 4em; }
    main section .text-wrap .body-lead {
      margin-bottom: 1.52em; } }

footer {
  background: #354052;
  padding: 2.4em; }
  footer a {
    color: inherit;
    text-decoration: none; }
  footer .footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    max-width: 110em; }
    footer .footer-inner #copy img {
      height: 2.8em; }
    footer .footer-inner #copy span {
      font-family: Open Sans;
      font-style: normal;
      font-weight: normal;
      font-size: 1.5em;
      position: relative;
      bottom: .5em;
      color: white;
      margin-left: 1em; }
    footer .footer-inner #social a {
      margin: 0 1.2em; }
    footer .footer-inner #social img {
      width: 2.4em; }
  @media only screen and (max-width: 470px) {
    footer #dm-text {
      display: none; } }

#s-customers {
  padding: 4.8em 2em 5em 2em;
  box-shadow: inset 0px -1px 0px #E8E8E8; }
  #s-customers h4 {
    font-style: normal;
    font-weight: 600;
    font-size: 1.4em;
    line-height: 1.28em;
    text-align: center;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #0097F5;
    margin-bottom: 3em; }
  #s-customers .list-holder {
    overflow-x: auto; }
    #s-customers .list-holder ul {
      list-style: none;
      display: flex;
      justify-content: center;
      width: 97em;
      height: 3em;
      margin: 0 auto; }
      #s-customers .list-holder ul li {
        font-family: Open Sans;
        font-style: normal;
        font-weight: normal;
        letter-spacing: .0011em;
        font-size: 1.5em;
        margin: 0 2.6em;
        color: rgba(32, 32, 32, 0.6); }

#s-technology {
  /*background-image: url(../img/img-bg-technology.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: center;*/
  position: relative;
  background: linear-gradient(179.45deg, #FFFFFF 3.59%, #F2F3F6 54.87%);
  padding: 8em 2.8em 13em 2.8em;
  /*
  $cardsScalingBreakpoint:1300;
  @media only screen and (max-width: $cardsScalingBreakpoint*1px) {
    .cards-holder{
      font-size: (10/$cardsScalingBreakpoint)*100vw;
    }
  }
 */ }
  #s-technology h2 {
    position: relative; }
  #s-technology .technology-bg {
    position: absolute;
    width: 100%;
    height: 90%;
    top: 10%;
    left: 0;
    background-image: url(../img/img-elements.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center; }
  #s-technology .cards-holder {
    /*
    position: relative;
    margin: 10em auto 0 auto;
    width: 114.6em;
    height: 62em;
    */
    position: relative;
    width: 114.6em;
    height: 63.8em;
    margin-top: 10em;
    max-width: 114.6em;
    width: 100%;
    display: inline-block; }
    #s-technology .cards-holder .card {
      position: absolute;
      background: white;
      padding: 2.4em 3.2em;
      text-align: center;
      width: 32em;
      height: 32.9em;
      border: .1em solid #DDE0E7;
      box-shadow: 0px 0.4em 3.2em rgba(0, 0, 0, 0.05);
      border-radius: .4em; }
      #s-technology .cards-holder .card img {
        width: 9.6em;
        height: 9.6em;
        background: lightgrey; }
      #s-technology .cards-holder .card h5 {
        margin: 0.87em 0 0.87em 0;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden; }
      #s-technology .cards-holder .card p {
        max-height: 8em;
        overflow: hidden;
        font-family: Open Sans;
        font-style: normal;
        font-weight: normal;
        font-size: 1.6em;
        line-height: 150%;
        text-align: center;
        letter-spacing: 0.0125em;
        color: #687179; }
      #s-technology .cards-holder .card:nth-child(1) {
        z-index: 1;
        top: 0em;
        left: 0em; }
      #s-technology .cards-holder .card:nth-child(2) {
        z-index: 3;
        top: 0em;
        left: 48%; }
      #s-technology .cards-holder .card:nth-child(3) {
        z-index: 2;
        bottom: 0em;
        right: 48%; }
      #s-technology .cards-holder .card:nth-child(4) {
        z-index: 4;
        bottom: 0em;
        right: 0em; }
  @media only screen and (max-width: 900px) {
    #s-technology {
      padding-bottom: 2.8em; }
      #s-technology .technology-bg {
        height: 93%;
        top: 7%;
        background-image: url(../img/img-bg-technology-mobile.svg);
        background-size: contain; }
      #s-technology .cards-holder {
        height: auto; }
        #s-technology .cards-holder .card {
          position: relative;
          left: auto !important;
          right: auto !important;
          top: auto !important;
          bottom: auto !important;
          margin: 0 auto 2.4em auto; } }
  @media only screen and (max-width: 640px) {
    #s-technology {
      padding: 4em 2.8em 4em 2.8em; }
      #s-technology .technology-bg {
        height: 98%;
        top: 2%; }
      #s-technology .cards-holder {
        margin-top: 8em; } }

#s-inforgaphics {
  padding-bottom: 8em;
  background: linear-gradient(179.38deg, #F2F3F6 3.59%, #FFFFFF 54.87%); }
  #s-inforgaphics #infographics-select.hidden {
    display: none; }
  #s-inforgaphics #graphs-info {
    display: none; }
  #s-inforgaphics .graphs {
    display: grid;
    grid-template-columns: 46em 46em;
    grid-column-gap: 3em;
    grid-row-gap: 3em;
    justify-content: center;
    margin-top: 5em;
    margin-bottom: 4.8em; }
    #s-inforgaphics .graphs .component {
      /*width: 46em;
      height: 36.6em;*/
      background: #FFFFFF;
      border: 0.0625em solid #DDE0E7;
      box-shadow: 0em 0.25em 2em rgba(0, 0, 0, 0.05);
      border-radius: .25em; }
  @media only screen and (max-width: 1015px) {
    #s-inforgaphics .graphs {
      grid-template-columns: 46em; } }
  @media only screen and (max-width: 640px) {
    #s-inforgaphics {
      padding-bottom: 4em; } }
  @media only screen and (max-width: 500px) {
    #s-inforgaphics .graphs {
      font-size: 2vw; } }

#s-careers {
  padding-bottom: 8em;
  background: white; }
  #s-careers .career-items {
    max-width: 85.8em;
    margin: 8em auto 0 auto; }
    #s-careers .career-items .item {
      padding: 3em;
      /*
      display: flex;
      justify-content: space-between;
      align-items: center;*/
      display: grid;
      grid-template-columns: 35% auto 35%;
      grid-template-rows: auto;
      align-items: center;
      box-shadow: inset 0px -.1em 0px #E9E9E9; }
      #s-careers .career-items .item:nth-child(odd) {
        background: #FFFFFF; }
      #s-careers .career-items .item:nth-child(even) {
        background: #FAFBFC; }
      #s-careers .career-items .item .left {
        grid-column: 1 / 2;
        text-align: left;
        /*width: 35%;*/ }
        #s-careers .career-items .item .left h4 {
          font-family: 'Montserrat', sans-serif;
          font-style: normal;
          font-weight: 500;
          font-size: 1.7em;
          line-height: 1.5em;
          color: #202020; }
        #s-careers .career-items .item .left span {
          font-family: 'Open Sans', sans-serif;
          font-style: normal;
          font-weight: normal;
          font-size: 1.3em;
          line-height: 2em;
          color: #687179; }
      #s-careers .career-items .item .info {
        grid-column: 2 / 3;
        font-family: 'Open Sans', sans-serif;
        font-style: normal;
        font-weight: 600;
        font-size: 1.5em;
        line-height: 1.33em;
        color: #687179; }
      #s-careers .career-items .item .right {
        grid-column: 3 / 4;
        /*width: 35%;*/
        text-align: right; }
  @media only screen and (max-width: 640px) {
    #s-careers .career-items {
      margin-top: 4em; }
      #s-careers .career-items .item {
        grid-template-columns: auto;
        grid-row-gap: 2.4em;
        padding: 2.4em; }
        #s-careers .career-items .item .info {
          text-align: left;
          grid-column: 1 / 2;
          grid-row: 2/3; }
        #s-careers .career-items .item .right {
          grid-row: 1 / 3; } }

#s-learn-more {
  background: #F6811E;
  padding-bottom: 12em;
  padding-left: 2.4em;
  padding-right: 2.4em; }
  #s-learn-more > * {
    color: white; }
  #s-learn-more p {
    margin: 1.3em 0 1.77em; }
  #s-learn-more button {
    background: none; }
    #s-learn-more button:hover {
      background: white; }
  #s-learn-more.blue {
    background: #00A0EB; }

#s-about {
  position: relative;
  padding-top: 12em;
  padding-bottom: 12em;
  background: #fcfcfc; }
  #s-about .decoration {
    position: absolute; }
  #s-about #circle-outlines {
    top: 3.7em;
    left: 0em; }
    @media only screen and (max-width: 640px) {
      #s-about #circle-outlines {
        top: -13.3em;
        left: -2em;
        width: 13em; } }
  #s-about .text-wrap .tags {
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 1.8em;
    line-height: 2em;
    text-align: left;
    margin-top: 2.66em;
    color: white; }
    #s-about .text-wrap .tags span {
      background: #0997FC;
      line-height: 2em;
      display: inline-block;
      margin-bottom: .1em;
      padding: 0 .3em 0 .3em; }
  #s-about .text-wrap #yellow-triangle {
    top: -8em;
    left: -23em; }
    @media only screen and (max-width: 1100px) {
      #s-about .text-wrap #yellow-triangle {
        top: -8em;
        left: -2em; } }
    @media only screen and (max-width: 640px) {
      #s-about .text-wrap #yellow-triangle {
        top: -4em;
        left: -1em;
        width: 2.7em; } }
  #s-about .story-container {
    margin: 0 2.4em; }
  #s-about .story {
    position: relative;
    display: inline-block;
    padding: 8em 2.4em;
    /*background: rgba(255, 239, 64, .7);*/
    max-width: 128em;
    width: 100%; }
    #s-about .story:before {
      content: "";
      background: rgba(255, 239, 64, 0.7);
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2; }
    #s-about .story #circle-turquoise {
      top: -6.2em;
      left: 5.5em; }
      @media only screen and (max-width: 1100px) {
        #s-about .story #circle-turquoise {
          left: auto;
          right: 2.3em;
          top: -4.3em;
          width: 8.7em; } }
    #s-about .story #rectangles-blue {
      z-index: 3;
      bottom: 26em;
      left: -2.3em; }
    #s-about .story #triangle-strokes {
      z-index: 3;
      top: 50em;
      right: -3.2em; }
    #s-about .story .story-inner {
      position: relative;
      z-index: 3;
      margin: 0 2.4em; }
      #s-about .story .story-inner h2 {
        text-align: left;
        max-width: 750px;
        margin: 0 auto; }
      #s-about .story .story-inner ol {
        max-width: 75em;
        display: inline-block;
        list-style: none; }
        #s-about .story .story-inner ol li {
          display: flex;
          font-family: 'Open Sans', sans-serif;
          text-align: left;
          margin-top: 5.6em; }
          #s-about .story .story-inner ol li .year {
            font-weight: bold;
            font-size: 1.8em;
            line-height: 2em;
            color: #0954FC; }
          #s-about .story .story-inner ol li .info {
            margin-left: 5.5em; }
            #s-about .story .story-inner ol li .info p {
              padding-top: 1em;
              font-family: 'Open Sans', sans-serif;
              font-style: normal;
              font-weight: normal;
              font-size: 1.6em;
              line-height: 2em;
              color: #393F42; }
  @media only screen and (max-width: 640px) {
    #s-about .story .story-inner ol li .info p {
      font-size: 1.4em; } }
  @media only screen and (max-width: 640px) {
    #s-about {
      padding-top: 8em;
      padding-bottom: 6.4em; }
      #s-about .text-wrap h1 {
        font-size: 4.8em; }
      #s-about .text-wrap .tags {
        margin-top: 2em; }
      #s-about .story {
        padding-top: 4em;
        padding-bottom: 4em; }
        #s-about .story #rectangles-blue {
          width: 3.1em;
          left: -1.6em; }
        #s-about .story #triangle-strokes {
          width: 4.1em;
          right: -2.1em; }
        #s-about .story .story-inner {
          margin: 0; }
          #s-about .story .story-inner ol li {
            margin-top: 3.2em;
            display: block; }
            #s-about .story .story-inner ol li h4 {
              font-size: 2.4em; }
            #s-about .story .story-inner ol li .info {
              margin-left: 0; } }

#s-shop {
  padding-top: 12em;
  padding-bottom: 18em; }
  #s-shop h1 {
    color: #393F42; }
  #s-shop .shop-items {
    min-height: 500px;
    display: grid;
    grid-template-columns: 36em 36em 36em;
    grid-gap: 3.2em;
    justify-content: center;
    margin-top: 8em; }
    #s-shop .shop-items .shop-item {
      display: grid;
      grid-template-rows: 10em auto 10.6em 5.6em;
      padding: 4.8em 0;
      background: #FFFFFF;
      border: 1px solid #DDE0E7;
      box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.05);
      border-radius: 4px;
      height: 100%; }
      #s-shop .shop-items .shop-item h3 {
        padding: 0 1.1em; }
      #s-shop .shop-items .shop-item .offer-info {
        font-family: 'Open Sans', sans-serif;
        font-style: normal;
        font-weight: normal;
        font-size: 1.7em;
        line-height: 165%;
        text-align: center;
        color: #687179;
        padding: 0 2em 1.3em 2em;
        border-bottom: 1px solid rgba(225, 232, 238, 0.5); }
      #s-shop .shop-items .shop-item .price {
        font-family: 'Open Sans', sans-serif;
        font-style: normal;
        font-weight: 300;
        font-size: 4.4em;
        line-height: 132%;
        align-self: center;
        text-align: center;
        letter-spacing: -0.022em;
        color: #00A0EB; }
        #s-shop .shop-items .shop-item .price .currency {
          font-size: .5em;
          position: relative;
          top: -1.2em;
          left: -.6em; }
        #s-shop .shop-items .shop-item .price .subscription-type {
          font-size: .48em;
          color: #687179;
          opacity: 0.6;
          position: relative;
          left: .6em; }
      #s-shop .shop-items .shop-item .btn-wrapper {
        padding: 0 6em; }
        #s-shop .shop-items .shop-item .btn-wrapper button {
          width: 100%;
          height: 100%; }
  @media only screen and (max-width: 1200px) {
    #s-shop .shop-items {
      grid-template-columns: 36em; } }
  @media only screen and (max-width: 640px) {
    #s-shop {
      padding-top: 6.4em; }
      #s-shop .shop-items {
        grid-template-columns: 35em; } }

#s-contact, #s-shop-form {
  padding-top: 12em; }
  #s-contact .text-wrap, #s-shop-form .text-wrap {
    position: relative;
    margin-bottom: 12.8em; }
  #s-contact .decoration, #s-shop-form .decoration {
    position: absolute; }
  #s-contact .triangle-strokes-2, #s-shop-form .triangle-strokes-2 {
    bottom: 17em;
    left: -17em; }
  #s-contact .rectangles-blue-orange, #s-shop-form .rectangles-blue-orange {
    top: -8em;
    right: -20em; }
  #s-contact .success-view, #s-contact .error-view, #s-shop-form .success-view, #s-shop-form .error-view {
    display: none; }
    #s-contact .success-view .b-normal, #s-contact .error-view .b-normal, #s-shop-form .success-view .b-normal, #s-shop-form .error-view .b-normal {
      display: block; }
    #s-contact .success-view a, #s-contact .error-view a, #s-shop-form .success-view a, #s-shop-form .error-view a {
      text-decoration: none;
      color: #F6811E; }
  @media only screen and (max-width: 1100px) {
    #s-contact .triangle-strokes-2, #s-shop-form .triangle-strokes-2 {
      top: -8em;
      left: -4em;
      width: 6em; }
    #s-contact .rectangles-blue-orange, #s-shop-form .rectangles-blue-orange {
      width: 3.7em;
      top: -5.5em;
      right: 0em; } }
  @media only screen and (max-width: 640px) {
    #s-contact, #s-shop-form {
      padding-top: 8em; }
      #s-contact .text-wrap, #s-shop-form .text-wrap {
        margin-bottom: 8em; } }

#s-shop-form {
  display: none; }
  #s-shop-form .hidden {
    display: none; }

#s-login {
  padding: 0;
  display: grid;
  grid-template-columns: 50% 50%; }
  #s-login > div {
    padding: 0 2.4em 4.8em 2.4em;
    height: 147em; }
  #s-login .text-wrap {
    margin: 0;
    width: 100%; }
  #s-login .login {
    padding-top: 4.2em; }
    #s-login .login .text-wrap {
      max-width: 37em; }
      #s-login .login .text-wrap h1 {
        margin-top: 2.4em;
        margin-bottom: 1.54em; }
      #s-login .login .text-wrap .form-item {
        margin-bottom: 3.2em; }
      #s-login .login .text-wrap .form-item:nth-child(2) {
        margin-bottom: 4.8em; }
      #s-login .login .text-wrap button {
        width: 100%; }
    #s-login .login #login-error {
      display: none;
      font-family: 'Open Sans', sans-serif;
      font-style: normal;
      font-weight: normal;
      font-size: 2em;
      line-height: 138%;
      letter-spacing: 0.015em;
      color: #E0131F;
      margin-top: 1em;
      text-align: center; }
      #s-login .login #login-error.show {
        display: block; }
    #s-login .login .logo {
      position: relative;
      left: -4em; }
      #s-login .login .logo img {
        width: 18.1em; }
    #s-login .login .mobile-text {
      display: none;
      text-align: center;
      margin-top: 1.6em; }
      #s-login .login .mobile-text .b-small {
        color: #687179;
        opacity: 1; }
        #s-login .login .mobile-text .b-small:after {
          content: url(../img/down-arrow.svg);
          position: relative;
          left: 1em; }
  #s-login .get-started {
    overflow: hidden;
    padding-top: 43.5em;
    background: #00A0EB;
    position: relative; }
    #s-login .get-started .bg-top {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%; }
    #s-login .get-started .bg-bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%; }
    #s-login .get-started h1 {
      color: white; }
      #s-login .get-started h1 .underline {
        border-bottom: 0.04em solid white; }
    #s-login .get-started button {
      max-width: 370px;
      width: 100%; }
  @media only screen and (max-width: 1100px) {
    #s-login {
      grid-template-columns: 100%; }
      #s-login > div {
        height: auto; }
      #s-login .login {
        padding-bottom: 1.6em; }
        #s-login .login .logo {
          left: 0; }
        #s-login .login .text-wrap h1 {
          margin-top: 0.8em;
          margin-bottom: 1em;
          font-size: 4.4em; }
        #s-login .login .mobile-text {
          display: block; }
      #s-login .get-started {
        padding-top: 22em;
        padding-bottom: 15em; }
        #s-login .get-started .bg-top {
          top: auto;
          bottom: 50%;
          left: 0;
          width: 100%; }
        #s-login .get-started .bg-bottom {
          bottom: auto;
          left: 0;
          top: 80%;
          width: 100%; } }
  @media only screen and (max-width: 550px) {
    #s-login .get-started .bg-top {
      top: auto;
      bottom: 65%;
      left: 0;
      width: 100%; }
    #s-login .get-started .bg-bottom {
      bottom: auto;
      left: 0;
      top: 80%;
      width: 100%; } }

.s-article {
  position: relative;
  padding-top: 12em; }
  @media only screen and (max-width: 640px) {
    .s-article {
      padding-top: 8em; } }
  .s-article .decoration {
    position: absolute; }
  .s-article button:disabled {
    opacity: .7;
    pointer-events: none;
    background: lightgrey; }
  .s-article .response-message {
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 1.3em;
    line-height: 138%;
    letter-spacing: 0.011em;
    color: #00A0EB;
    margin: 0.77em 0 0 0; }
  .s-article #circle-outlines {
    top: 3.7em;
    left: 0em; }
    @media only screen and (max-width: 640px) {
      .s-article #circle-outlines {
        top: -13.3em;
        left: -2em;
        width: 13em; } }
  .s-article #yellow-triangle {
    top: -8em;
    left: -23em; }
    @media only screen and (max-width: 1100px) {
      .s-article #yellow-triangle {
        top: -8em;
        left: -2em; } }
    @media only screen and (max-width: 640px) {
      .s-article #yellow-triangle {
        top: -4em;
        left: -1em;
        width: 2.7em; } }
  .s-article .text-wrap {
    text-align: left; }
    .s-article .text-wrap .article-block {
      margin-bottom: 8em; }
    .s-article .text-wrap h3 {
      text-align: left;
      margin-bottom: 1em; }
    .s-article .text-wrap p, .s-article .text-wrap ul {
      font-family: 'Open Sans', sans-serif;
      font-style: normal;
      font-weight: normal;
      font-size: 1.8em;
      line-height: 178%;
      color: #393F42;
      margin-bottom: 1.77em; }
      .s-article .text-wrap p a, .s-article .text-wrap ul a {
        text-decoration: none;
        color: #F6811E;
        cursor: pointer; }
    .s-article .text-wrap ul {
      padding-left: 1em; }
    .s-article .text-wrap form {
      max-width: 37em; }
      .s-article .text-wrap form .form-item {
        margin-bottom: 3.2em; }
  @media only screen and (max-width: 400px) {
    .s-article .text-wrap p {
      font-size: 1.6em; } }
  @media only screen and (max-width: 640px) {
    .s-article .text-wrap .article-block {
      margin-bottom: 4.8em; } }

#cookie-snackbar-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  pointer-events: none; }
  #cookie-snackbar-container .inner {
    position: relative;
    padding: 0 14.8em;
    max-width: 144em;
    width: 100%;
    margin: 0 auto; }
    #cookie-snackbar-container .inner #cookie-snackbar {
      pointer-events: all;
      width: 28.5em;
      padding: 2.4em 1.6em 2.4em 5.6em;
      position: absolute;
      right: 17em;
      top: 13.8em;
      background: #FFFFFF;
      box-shadow: 0em 0.4em 1.6em rgba(0, 0, 0, 0.1);
      border-radius: .4em; }
      #cookie-snackbar-container .inner #cookie-snackbar #cookie-icon {
        position: absolute;
        left: 1.9em;
        top: 2.4em; }
      #cookie-snackbar-container .inner #cookie-snackbar p {
        color: #393F42;
        text-align: left; }
        #cookie-snackbar-container .inner #cookie-snackbar p a {
          text-decoration: none;
          color: #F6811E;
          cursor: pointer; }
      #cookie-snackbar-container .inner #cookie-snackbar button {
        margin-top: 1.33em; }
  @media only screen and (max-width: 1100px) {
    #cookie-snackbar-container .inner {
      padding: 0 2.4em;
      margin: 0 auto;
      max-width: 84.6em; }
      #cookie-snackbar-container .inner #cookie-snackbar {
        right: 5em; } }
  @media only screen and (max-width: 640px) {
    #cookie-snackbar-container .inner #cookie-snackbar {
      position: relative;
      margin: 0 auto;
      right: auto;
      top: 10em; } }

#eu-funding {
  position: fixed;
  bottom: 0;
  background: #ffffff;
  width: 100%;
  z-index: 6;
  box-shadow: 0px -4px 16px rgba(0, 0, 0, 0.1); }
  #eu-funding.closed {
    display: none; }
  #eu-funding .inner {
    display: grid;
    grid-template-columns: 35.6em auto 9.6em;
    align-items: center;
    margin: 0 auto;
    max-width: 104em;
    border-left: 1px solid #E7E8EF;
    border-right: 1px solid #E7E8EF;
    min-height: 8em; }
    #eu-funding .inner > div {
      height: 100%;
      border-right: 1px solid #E7E8EF; }
    #eu-funding .inner .eu-logo-container {
      display: flex;
      justify-content: space-around; }
      #eu-funding .inner .eu-logo-container .eu-logo-1 {
        position: relative;
        top: .6em; }
    #eu-funding .inner .eu-text {
      color: #687179;
      padding: 1.62em;
      text-align: left; }
      #eu-funding .inner .eu-text a {
        text-decoration: none;
        color: #F6811E;
        cursor: pointer; }
    #eu-funding .inner button {
      padding: 0;
      background: none;
      border: none;
      font-size: 1em; }
      #eu-funding .inner button:hover {
        opacity: .8; }
      #eu-funding .inner button img {
        position: relative;
        top: .2em; }
  @media only screen and (max-width: 840px) {
    #eu-funding .inner {
      grid-template-columns: auto 9.6em;
      grid-template-rows: 8em auto;
      border: none; }
    #eu-funding .eu-text {
      grid-row: 2 / 3;
      grid-column: 1 / 3;
      border-right: none !important;
      border-top: 1px solid #E7E8EF; } }
  @media only screen and (max-width: 640px) {
    #eu-funding .inner {
      grid-template-columns: auto 6.4em;
      grid-template-rows: 7em auto; }
      #eu-funding .inner .eu-logo-1 {
        width: 13.5em; }
      #eu-funding .inner .eu-logo-2 {
        width: 12.5em; }
      #eu-funding .inner button img {
        width: 4em; } }

#unsubscribe-success {
  display: none; }

.select-hidden {
  display: none;
  visibility: hidden;
  padding-right: 10px; }

.select {
  /*cursor: pointer;*/
  display: inline-block;
  position: relative;
  font-size: 1.6em;
  color: black;
  width: 16.25em;
  height: 2.5em;
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 1.8em;
  line-height: 1.44em;
  /* identical to box height, or 144% */
  text-align: center;
  color: #687179; }

.select-styled {
  position: relative;
  /* top: 0; */
  /* right: 0; */
  /* bottom: 0; */
  /* left: 0; */
  background-color: transparent;
  padding: 0.38em 0.44em;
  width: auto;
  display: inline-block;
  cursor: pointer;
  /*  @include transition(all 0.2s ease-in);*/ }
  .select-styled:after {
    content: "";
    width: 0;
    height: 0;
    border: 0.27em solid transparent;
    border-color: #202020 transparent transparent transparent;
    position: absolute;
    top: 1em;
    right: -.83em; }
  .select-styled:hover {
    color: #9A9FA6;
    /*background-color: darken($select-background, 2);*/ }
  .select-styled:active, .select-styled.active {
    /*background-color: darken($select-background, 5);*/ }
    .select-styled:active:after, .select-styled.active:after {
      top: 0.72em;
      border-color: transparent transparent #202020 transparent; }

.select-options {
  cursor: pointer;
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 999;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: white;
  box-shadow: 0px 0.22em 0.88em rgba(0, 0, 0, 0.15);
  border-radius: .22em; }
  .select-options li {
    margin: 0;
    padding: .8em 1.6em;
    text-align: left;
    /*text-indent: 15px;*/
    box-shadow: inset 0px -1px 0px rgba(32, 32, 32, 0.1);
    /* @include transition(all 0.15s ease-in);*/
    font-size: 0.83em;
    line-height: 1.6em;
    /* identical to box height, or 160% */
    letter-spacing: 0.2px; }
    .select-options li:hover {
      /*color: $select-background;*/
      background: linear-gradient(0deg, rgba(139, 159, 204, 0.1), rgba(139, 159, 204, 0.1)), #FFFFFF; }
    .select-options li[rel="hide"] {
      display: none; }

@media only screen and (max-width: 375px) {
  body {
    font-size: 2.6666666667vw; } }