::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #00cccc; }

::-moz-placeholder {
  /* Firefox 19+ */
  color: #00cccc; }

:-ms-input-placeholder {
  /* IE 10+ */
  color: #00cccc; }

:-moz-placeholder {
  /* Firefox 18- */
  color: #00cccc; }

::placeholder {
  color: #00cccc; }

::-moz-selection {
  background: #b8f8f8; }

::selection {
  background: #b8f8f8; }

html {
  min-height: 100%;
  padding-bottom: 230px;
  position: relative; }

*, *:before, *:after {
  box-sizing: border-box; }

a {
  color: #00cccc;
  text-decoration: none;
  border-bottom: 2px solid #00cccc;
  transition: opacity 0.15s ease; }
  a:hover, a:focus {
    opacity: 0.5; }

body {
  background: #fff;
  color: #3e3c3d;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.5; }

h1 {
  border-bottom: 4px solid #00cccc;
  font-size: 26px; }

h2 {
  margin-bottom: 0;
  font-size: 22px; }

h3 {
  font-size: 18px; }

h1, h2 {
  color: #00cccc; }

@media (min-width: 768px) {
  h1 {
    font-size: 32px; }

  h2 {
    font-size: 24px; }

  h3 {
    font-size: 18px; } }
p {
  margin: 0;
  padding: 10px 0; }

hr {
  border-radius: 5px;
  border: 2px solid #00cccc;
  margin: 20px 0; }

.landing-page .content {
  text-align: center; }
  .landing-page .content p {
    max-width: 680px;
    margin: 0 auto; }

.content {
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 20px; }

.h-step {
  background: #00cccc;
  text-align: center;
  border: none;
  color: #fff;
  font-size: 30px;
  padding: 10px;
  border-radius: 5px;
  margin: 5px; }

.tooltip {
  position: relative;
  font-size: 14px;
  border-radius: 5px;
  background: #f5f4f4;
  border: 2px solid #f5f4f4;
  padding: 10px;
  color: #3e3c3d;
  display: inline-block; }
  .tooltip.has-arrow--top:before {
    content: "";
    display: inline-block;
    border: 12px solid transparent;
    position: absolute; }
  .tooltip.has-arrow--top:before {
    border-bottom-color: #f5f4f4;
    top: -24px;
    left: 50%;
    margin-left: -12px; }

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local("Open Sans Regular"), local("OpenSans-Regular"), url("/assets/fonts/OpenSans-Regular.ttf") format("truetype"); }
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Bold"), local("OpenSans-Bold"), url("/assets/fonts/OpenSans-Bold.ttf") format("truetype"); }
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: local("Open Sans ExtraBold"), local("OpenSans-ExtraBold"), url("/assets/fonts/OpenSans-ExtraBold.ttf") format("truetype"); }
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s; }

.fade-enter, .fade-leave-to {
  opacity: 0; }

.slide-fade-enter-active {
  transition: all .3s ease; }

.slide-fade-leave-active {
  transition: all .3s ease; }

.slide-fade-leave-to {
  transform: translateX(-10px);
  opacity: 0; }

.slide-fade-enter {
  transform: translateX(10px);
  opacity: 0; }

.assistant {
  padding: 10px 10px 30px; }

.assistant__tooltip {
  margin-top: 20px; }

.assistant__form {
  padding: 20px;
  max-width: 700px;
  margin: 0 auto;
  border-radius: 5px;
  overflow: hidden;
  border: 5px solid #e2e2e2;
  background: #fff;
  position: relative; }

.assistant__step {
  position: relative;
  padding: 20px; }

.assistant__text h3 {
  margin: 0;
  padding: 0 0 10px; }
.assistant__text p {
  padding: 0 0 15px; }
.assistant__text .align-center {
  text-align: center; }

.assistant__action {
  text-align: center; }

.assistant__skip {
  padding: 10px 0 0; }

.assistant__additional {
  position: relative;
  padding-bottom: 30px; }

.assistant__label {
  display: block;
  margin-bottom: 20px; }
  .assistant__label.has-spacing {
    padding: 10px 0 0 0; }

.assistant__input-wrapper {
  position: relative; }

.assistant__label__text {
  display: block;
  color: #3e3c3d;
  padding: 3px 5px; }

.assistant__input {
  transition: all 0.15s ease;
  -webkit-appearance: none;
  background: #fff;
  height: 50px;
  line-height: 40px;
  padding: 10px;
  width: 100%;
  border: 2px solid #00cccc;
  border-radius: 5px; }
  .assistant__input:focus {
    outline: none;
    background: #eeffff; }

.btn {
  transition: all 0.15s ease;
  border: 0;
  -webkit-appearance: none;
  height: 50px;
  padding: 0 15px;
  background: #00cccc;
  border: 2px solid #00cccc;
  color: #fff;
  border-radius: 5px;
  line-height: 1.2; }
  .btn:focus, .btn:hover {
    outline: none;
    background: #eeffff;
    color: #00cccc; }
  .btn:hover {
    cursor: pointer;
    outline: none;
    background: #eeffff;
    color: #00cccc; }
  .btn.is-inline-block {
    display: inline-block;
    width: 150px; }
  .btn.is-inline-block-l {
    display: inline-block;
    width: 240px; }
  .btn.is-block {
    display: block;
    width: 100%; }

.submit-align-right {
  padding-top: 10px;
  text-align: right; }

.btn-skip {
  background: none;
  border: 0;
  padding: 0;
  color: #00cccc;
  border-bottom: 2px solid #00cccc; }
  .btn-skip:hover {
    cursor: pointer;
    outline: none;
    opacity: 0.6; }

.btn--round {
  padding: 0;
  width: 44px;
  height: 44px;
  border-radius: 5px;
  font-size: 30px;
  line-height: 1;
  background: #fff;
  color: #00cccc; }

.btn--round-small {
  padding: 0;
  height: 25px;
  width: 68px;
  border-radius: 5px;
  font-size: 11px;
  line-height: 1;
  background: #fff;
  color: #00cccc; }
  .btn--round-small.is-floating-input {
    position: absolute;
    top: 36px;
    right: 20px;
    z-index: 1; }

.assistant__additional {
  text-align: center; }

.assistant__progress {
  position: relative;
  border-bottom: 5px solid #e2e2e2;
  background: #f5f4f4;
  width: 100%;
  height: 30px; }
  .assistant__progress .progress-step-1 {
    left: 20%; }
  .assistant__progress .progress-step-2 {
    left: 40%; }
  .assistant__progress .progress-step-3 {
    left: 60%; }
  .assistant__progress .progress-step-4 {
    left: 80%; }
  .assistant__progress .progress-step-5 {
    left: 100%; }

.assistant__progress__background,
.assistant__progress__value {
  background: #00cccc;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 25px;
  line-height: 25px;
  color: #fff;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  padding-right: 10px; }
  .assistant__progress__background span,
  .assistant__progress__value span {
    position: absolute;
    right: 10px; }

.assistant__progress__value {
  transition: all 0.5s ease;
  color: #b7b6b6;
  background: #f5f4f4; }

@media (min-width: 768px) {
  .assistant__step {
    padding: 30px; } }
.newsletter.is-success, .info.is-success {
  border: 4px solid #00cccc;
  background: #eeffff;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 20px; }
.newsletter .newsletter__input, .info .newsletter__input {
  background: #fff; }

.newsletter__form {
  border: 5px solid #f5f4f4;
  padding: 15px;
  border-radius: 5px;
  margin: 10px 0; }

.newsletter__text {
  font-size: 13px;
  max-width: 540px; }

.newsletter__submit {
  transition: all 0.15s ease;
  height: 50px;
  padding: 0 20px;
  border: none;
  background: #00cccc;
  color: #fff;
  line-height: 14px;
  font-size: 15px;
  border: 2px solid #00cccc;
  border-radius: 5px; }
  .newsletter__submit:hover, .newsletter__submit:focus {
    cursor: pointer;
    color: #00cccc;
    background: #eeffff; }

.newsletter__input {
  transition: all 0.15s ease;
  border-radius: 0;
  -webkit-appearance: none;
  height: 50px;
  width: 100%;
  padding: 0 10px;
  background: #fff;
  background: none;
  border: 2px solid #00cccc;
  font-size: 15px;
  border-radius: 5px; }
  .newsletter__input:focus {
    outline: none;
    background: #eeffff; }

.newsletter__input-hp {
  position: absolute;
  z-index: -1;
  width: 0;
  height: 0;
  border: 0; }

nav {
  max-width: 720px;
  padding: 10px 40px 0;
  margin: 0 auto;
  text-align: center; }
  nav .logo {
    text-decoration: none;
    border: 0; }
    nav .logo img {
      width: 250px; }
    nav .logo:hover {
      transition: all 0.15s ease;
      opacity: 0.6; }

#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px 10px 45px;
  border-top: 5px solid #00cccc;
  background: #f5f4f4;
  text-align: center; }
  #cookie-banner p {
    max-width: 770px;
    margin: 0 auto; }
  #cookie-banner button {
    background: #00cccc;
    color: #fff;
    line-height: 40px;
    border: none;
    padding: 0 30px;
    margin: 0 10px 0 0; }
    #cookie-banner button:hover, #cookie-banner button:focus {
      cursor: pointer;
      opacity: 0.6; }

footer {
  background: #f5f4f4;
  height: 190px;
  padding: 20px 0;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center; }
  footer ul {
    list-style: none;
    margin: 0;
    padding: 0; }
  footer li {
    padding: 5px; }
  footer a {
    color: #b7b6b6;
    border-bottom: 2px solid #b7b6b6;
    transition: all 0.15s ease; }
    footer a:hover {
      color: #00cccc;
      border-color: #00cccc;
      opacity: 1; }
  @media (min-width: 480px) {
    footer {
      padding: 70px 0; }
      footer li {
        padding: 10px;
        display: inline-block; } }

.result .content {
  max-width: 745px;
  padding: 10px; }
.result h2, .result h3 {
  font-size: 20px;
  margin: 0;
  color: #3e3c3d; }

.tab-target {
  display: none; }
  .tab-target.is-active {
    display: block; }

#data-format, #data-text {
  padding: 0 20px; }
  #data-format h4, #data-text h4 {
    margin-bottom: 0; }

#data-graphics {
  padding: 0 20px;
  margin-top: 10px; }

.tabs {
  margin-top: 20px;
  text-align: left;
  background: #f5f4f4;
  border: 2px solid #e2e2e2;
  border-radius: 5px;
  padding: 10px; }

.tab {
  border: 0;
  margin: 0;
  background: #00cccc;
  padding: 10px 10px;
  color: #fff;
  border-radius: 5px;
  border: 2px solid #00cccc;
  outline: none;
  cursor: pointer; }
  .tab.active {
    background: #eeffff;
    color: #00cccc; }
  .tab:hover {
    background: #eeffff;
    color: #00cccc; }

@media (min-width: 768px) {
  .tabs {
    padding: 20px; }

  .tab {
    padding: 10px 20px; } }