/*!************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./scss/style.scss ***!
  \************************************************************************************************************************************************************************************************************/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-size: clamp(16px, 4vw, 24px);
  font-family: 'Open Sans', sans-serif;
  line-height: 1.5;
  overflow: hidden; }

html {
  width: 100vw;
  height: 100vh; }

button {
  cursor: pointer; }

.btn {
  padding: 0.5rem 1.2rem;
  border: 2px solid #044072;
  background-color: #044072;
  color: #fff;
  font-size: 0.7rem;
  transition: all 200ms ease; }
  .btn.btn-white {
    border: 2px solid #fff;
    background-color: #fff;
    color: #044072; }
    .btn.btn-white:hover {
      border: 2px solid #fff;
      background-color: #044072;
      color: #fff; }

.subtitle {
  font-size: 0.8rem; }

.canvas {
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.label {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  transition: opacity .8s ease 2s; }
  .label:not(.active) {
    opacity: 0;
    pointer-events: none;
    transition: opacity .8s ease; }
  .label .needle {
    width: 4px;
    height: 70px;
    background-color: #044072; }
  .label .content-container {
    position: absolute;
    top: 0;
    left: 4px;
    background-color: #fff;
    padding: 0.3rem 0.6rem;
    font-size: 0.6rem; }
  .label span {
    white-space: nowrap; }

.btn-next, .btn-prev {
  border: unset;
  display: inline-block;
  bottom: 0;
  pointer-events: all;
  background-color: #044072;
  padding: 0.5rem 1rem;
  color: #fff; }

.btn-next {
  display: inline-block;
  float: right; }

.btn-toggle {
  border: 3px solid #044072;
  background-color: #fff;
  color: #044072;
  font-weight: bold; }

.screen {
  width: 100%;
  height: 100%;
  /*&:not(.active) {
        display: none;
        opacity: 0;
    }*/ }

.screen-start {
  background-color: #044072;
  color: white;
  transform: translateY(0%); }
  .screen-start .logo {
    width: 6rem;
    height: auto;
    margin-bottom: 1rem; }
  .screen-start .btn {
    margin-top: 4rem; }
  .screen-start .content-center {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    height: 100%; }
    .screen-start .content-center .inner {
      text-align: center;
      position: relative; }
  .screen-start .loading {
    width: 47px;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    opacity: 0; }

.screen-start.screen-end {
  transform: translateY(100%); }

.screen-cards {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  align-items: center;
  padding: 2rem; }
  .screen-cards .card-container {
    display: inline-block;
    max-width: 1000px;
    box-shadow: 2px 0 25px rgba(0, 0, 0, 0.15);
    padding: 1.6rem 1.6rem;
    width: 100%;
    position: relative;
    background-color: white;
    transform: translateY(150%); }
  .screen-cards .card-index {
    font-size: .5rem;
    margin-bottom: .5rem;
    margin-top: -.25rem;
    color: #044072;
    font-weight: bold; }
  .screen-cards .height-setter {
    position: relative;
    margin-bottom: 2rem; }
  .screen-cards .card-content {
    position: absolute;
    font-size: .75rem;
    color: #808080; }
    .screen-cards .card-content:not(.show) {
      opacity: 0;
      pointer-events: none;
      display: none; }
    .screen-cards .card-content .title {
      color: #044072;
      font-weight: bold;
      margin-bottom: .25rem;
      font-size: 1rem; }
    .screen-cards .card-content p {
      max-width: 1000px; }

.screen-animation {
  padding: 3%;
  max-width: 40%;
  box-shadow: 2px 0 25px rgba(0, 0, 0, 0.15);
  background-color: white;
  transform: translateX(-100%);
  overflow: auto; }
  .screen-animation h2 {
    margin-bottom: 1.75rem;
    color: #044072; }
  .screen-animation p {
    font-size: .8rem;
    margin-bottom: 1.2rem; }