/*! lotto-self-assessment v0.0.1 | (c) 2020 ZOO.Digital | MIT License | https://github.com/zoodigital/ */
/**
 * @section Base Styles
 */
/* line 8, src/sass/components/_base.scss */
html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* line 11, src/sass/components/_base.scss */
*, *:before, *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

/* line 15, src/sass/components/_base.scss */
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: proxima-nova, sans-serif;
  font-style: normal;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image: linear-gradient(-54deg, #eaf2f5 0%, #c5d8e1 100%);
  color: #2D4550;
  scroll-behavior: smooth;
}

/* line 30, src/sass/components/_base.scss */
code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

/* line 34, src/sass/components/_base.scss */
input,
textarea,
select,
button {
  font: inherit;
}

/* line 41, src/sass/components/_base.scss */
h1, h2, h3, h4 {
  color: #2D4550;
  font-weight: 900;
  margin-top: 0;
}

/* line 42, src/sass/components/_base.scss */
h1 {
  font-size: 24px;
  margin: 0 auto 20px auto;
}

@media only screen and (min-width: 768px) {
  /* line 42, src/sass/components/_base.scss */
  h1 {
    font-size: 32px;
    margin: 30px 0;
  }
}

/* line 50, src/sass/components/_base.scss */
h2 {
  font-size: 21px;
}

@media only screen and (min-width: 768px) {
  /* line 50, src/sass/components/_base.scss */
  h2 {
    font-size: 32px;
  }
}

/* line 56, src/sass/components/_base.scss */
h3 {
  font-size: 18px;
}

@media only screen and (min-width: 768px) {
  /* line 56, src/sass/components/_base.scss */
  h3 {
    font-size: 24px;
  }
}

/* line 62, src/sass/components/_base.scss */
h4 {
  font-size: 24px;
}

/* line 64, src/sass/components/_base.scss */
p {
  line-height: 1.5;
}

/* line 68, src/sass/components/_base.scss */
a {
  color: #2D4550;
  text-decoration: none;
}

/* line 71, src/sass/components/_base.scss */
a:hover {
  text-decoration: underline;
}

/* line 76, src/sass/components/_base.scss */
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* line 78, src/sass/components/_base.scss */
.flex > div {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

/* line 83, src/sass/components/_base.scss */
.app {
  text-align: center;
  position: relative;
}

/* line 88, src/sass/components/_base.scss */
.app-logo {
  width: 121px;
  height: auto;
  pointer-events: none;
}

/* line 94, src/sass/components/_base.scss */
.app-header {
  background-color: #fff;
  -webkit-box-shadow: 0 2px 15px rgba(45, 69, 80, 0.2);
          box-shadow: 0 2px 15px rgba(45, 69, 80, 0.2);
  width: 100%;
  height: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: fixed;
  top: 0;
  z-index: 99;
}

/* line 108, src/sass/components/_base.scss */
.app-main {
  background: #fff;
  border-radius: 10px;
  margin: 100px auto 0 auto;
  padding: 20px;
  width: 980px;
  max-width: 90%;
}

@media only screen and (min-width: 768px) {
  /* line 108, src/sass/components/_base.scss */
  .app-main {
    margin: 120px auto 0 auto;
    padding: 40px;
  }
}

/* line 121, src/sass/components/_base.scss */
.app-survey {
  margin: 0 auto 0 auto;
  position: relative;
}

/* line 126, src/sass/components/_base.scss */
.app-footer {
  background: #2D4550;
  color: #fff;
  font-size: 14px;
  width: 100%;
  padding: 25px 0;
  margin-top: 20px;
  text-align: center;
}

/* line 134, src/sass/components/_base.scss */
.app-footer a {
  color: #fff;
}

/* line 136, src/sass/components/_base.scss */
.app-footer a:hover {
  color: #c4dc33;
}

/* line 142, src/sass/components/_base.scss */
.app-link {
  color: #c4dc33;
}

/* line 146, src/sass/components/_base.scss */
.results {
  width: 600px;
  max-width: 100%;
  margin: 20px auto 0 auto;
}

/* line 152, src/sass/components/_base.scss */
.breakdown {
  display: block;
  text-align: left;
  margin: 0 auto;
  width: 400px;
  max-width: 100%;
}

/* line 159, src/sass/components/_base.scss */
.breakdown table {
  border: none;
  margin: 0 auto;
  width: 100%;
}

/* line 163, src/sass/components/_base.scss */
.breakdown table td {
  padding: 10px 5px;
  width: 50%;
  font-size: 14px;
}

@media only screen and (min-width: 768px) {
  /* line 163, src/sass/components/_base.scss */
  .breakdown table td {
    font-size: 16px;
  }
}

/* line 170, src/sass/components/_base.scss */
.breakdown table td span {
  font-weight: 700;
}

/* line 177, src/sass/components/_base.scss */
.results-title {
  font-style: italic;
  margin-top: 40px;
}

/* line 186, src/sass/components/_base.scss */
.circle {
  background-color: white;
  border-radius: 50%;
  height: 90px;
  width: 90px;
  position: absolute;
  left: 50%;
  margin-left: -45px;
  top: -15px;
  z-index: -1;
}

@media only screen and (min-width: 768px) {
  /* line 186, src/sass/components/_base.scss */
  .circle {
    top: -10px;
  }
}

/* line 202, src/sass/components/_base.scss */
.toggle,
.results,
.result {
  display: none;
  position: relative;
}

/* line 207, src/sass/components/_base.scss */
.toggle.div0,
.results.div0,
.result.div0 {
  display: block;
}

/* line 212, src/sass/components/_base.scss */
.nonimg,
.lowimg,
.medimg,
.highimg {
  margin: -35px auto 0 auto;
}

@media only screen and (min-width: 768px) {
  /* line 212, src/sass/components/_base.scss */
  .nonimg,
  .lowimg,
  .medimg,
  .highimg {
    margin: -75px auto 0 auto;
  }
}

/* line 222, src/sass/components/_base.scss */
.toggle {
  padding: 20px 0;
}

/* line 224, src/sass/components/_base.scss */
.toggle button {
  display: inline-block;
  margin: 20px auto 0 auto;
}

@media only screen and (min-width: 768px) {
  /* line 224, src/sass/components/_base.scss */
  .toggle button {
    margin: 50px auto 0 auto;
  }
}

/* line 234, src/sass/components/_base.scss */
.tips {
  font-size: 16px;
  margin: 60px auto;
}

/* line 239, src/sass/components/_base.scss */
.tips h2 {
  margin-bottom: 40px;
}

/* line 243, src/sass/components/_base.scss */
.tips img {
  margin-bottom: 10px;
}

/* line 247, src/sass/components/_base.scss */
.tips .flex {
  margin: 30px 0;
  display: block;
}

/* line 250, src/sass/components/_base.scss */
.tips .flex div {
  margin: 30px 0;
}

@media only screen and (min-width: 768px) {
  /* line 247, src/sass/components/_base.scss */
  .tips .flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  /* line 257, src/sass/components/_base.scss */
  .tips .flex div {
    margin: 0;
  }
}

/* line 264, src/sass/components/_base.scss */
.tips a.chev {
  font-weight: 700;
  background: url("../img/chevron.png") no-repeat right center;
  padding-right: 15px;
}

/* line 269, src/sass/components/_base.scss */
.tips a.chev:hover {
  color: #0094b3;
  text-decoration: none;
}

/* line 2, src/sass/components/_form.scss */
form {
  width: 700px;
  max-width: 100%;
  margin: 0 auto 0 auto;
}

/* line 7, src/sass/components/_form.scss */
form h3 {
  text-align: center;
  margin-bottom: 25px;
}

@media only screen and (min-width: 768px) {
  /* line 7, src/sass/components/_form.scss */
  form h3 {
    margin-bottom: 50px;
  }
}

/* line 17, src/sass/components/_form.scss */
button,
.btn-income {
  background-color: #c4dc33;
  border: 0;
  color: #2D4550;
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  line-height: 44px;
  padding: 0 30px;
  text-transform: uppercase;
  height: 44px;
  width: auto;
  min-width: 140px;
  outline: none;
  border-radius: 22px;
  cursor: pointer;
  text-decoration: none;
  -webkit-transition: all .2s;
  transition: all .2s;
}

/* line 37, src/sass/components/_form.scss */
button:hover,
.btn-income:hover {
  background-color: rgba(196, 220, 51, 0.8);
  text-decoration: none;
}

/* line 42, src/sass/components/_form.scss */
button:active, button:focus,
.btn-income:active,
.btn-income:focus {
  background-color: rgba(196, 220, 51, 0.6);
  text-decoration: none;
}

/* line 48, src/sass/components/_form.scss */
button:disabled,
.btn-income:disabled {
  color: #77868e;
  background-color: #e4edf0;
}

/* line 56, src/sass/components/_form.scss */
.styled input[type="radio"] {
  display: none;
}

/* line 60, src/sass/components/_form.scss */
.styled label {
  color: #2D4550;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 20px;
  background-color: #fff;
  border: 1px solid #2D4550;
  border-radius: 3px;
  text-align: center;
  margin: 5px;
  display: inline-block;
  text-transform: uppercase;
  width: 100%;
  cursor: pointer;
}

/* line 74, src/sass/components/_form.scss */
.styled label:hover {
  background-color: #dcebf0;
}

@media only screen and (min-width: 768px) {
  /* line 60, src/sass/components/_form.scss */
  .styled label {
    width: 40%;
  }
}

/* line 82, src/sass/components/_form.scss */
.styled input[type="radio"]:checked + label {
  background-color: #e4edf0;
  cursor: default;
  color: #2D4550;
}

/* line 90, src/sass/components/_form.scss */
.radios {
  width: 100%;
}

@media only screen and (min-width: 768px) {
  /* line 90, src/sass/components/_form.scss */
  .radios {
    margin: 0 auto;
    width: 70%;
  }
  /* line 95, src/sass/components/_form.scss */
  .radios > div {
    padding-left: 40px;
  }
}

/* line 102, src/sass/components/_form.scss */
.rad {
  display: block;
  position: relative;
  padding-left: 25px;
  margin-bottom: 20px;
  cursor: pointer;
  font-size: 14px;
  text-align: left;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 100%;
  /* Hide the browser's default radio button */
  /* Create a custom radio button */
  /* On mouse-over, add a grey background color */
  /* When the radio button is checked, add a blue background */
  /* Create the indicator (the dot/circle - hidden when not checked) */
  /* Show the indicator (dot/circle) when checked */
  /* Style the indicator (dot/circle) */
}

@media only screen and (min-width: 768px) {
  /* line 102, src/sass/components/_form.scss */
  .rad {
    font-size: 18px;
    padding-left: 35px;
  }
}

/* line 121, src/sass/components/_form.scss */
.rad input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* line 128, src/sass/components/_form.scss */
.rad .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #fff;
  border-radius: 50%;
  border: 2px solid #2D4550;
}

/* line 140, src/sass/components/_form.scss */
.rad:hover input ~ .checkmark {
  background-color: #e4edf0;
}

/* line 145, src/sass/components/_form.scss */
.rad input:checked ~ .checkmark {
  background-color: #fff;
}

/* line 150, src/sass/components/_form.scss */
.rad .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* line 157, src/sass/components/_form.scss */
.rad input:checked ~ .checkmark:after {
  display: block;
}

/* line 162, src/sass/components/_form.scss */
.rad .checkmark:after {
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #c4dc33;
}

/* line 1, src/sass/components/_progress.scss */
.progressbar {
  counter-reset: step;
  padding: 0;
  margin: 90px auto 20px auto;
  position: relative;
  display: block;
  width: 500px;
  max-width: 100%;
}

@media only screen and (min-width: 768px) {
  /* line 1, src/sass/components/_progress.scss */
  .progressbar {
    margin: 120px auto 40px auto;
  }
}

/* line 14, src/sass/components/_progress.scss */
.progressbar li {
  list-style-type: none;
  width: 9%;
  display: inline-block;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  color: #ebebeb;
  position: relative;
}

@media only screen and (min-width: 768px) {
  /* line 14, src/sass/components/_progress.scss */
  .progressbar li {
    width: 10%;
  }
}

/* line 27, src/sass/components/_progress.scss */
.progressbar li:before {
  width: 22px;
  height: 22px;
  font-weight: 700;
  content: counter(step);
  counter-increment: step;
  line-height: 18px;
  border: 2px solid #ebebeb;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: #fff;
  position: relative;
  z-index: 2;
}

/* line 43, src/sass/components/_progress.scss */
.progressbar li:after {
  width: 100%;
  height: 2px;
  content: '';
  position: absolute;
  background-color: #ebebeb;
  top: 12px;
  left: -50%;
  z-index: 1;
}

/* line 53, src/sass/components/_progress.scss */
.progressbar li:first-child:after {
  content: none;
}

/* line 56, src/sass/components/_progress.scss */
.progressbar li.active {
  color: #fff;
}

/* line 59, src/sass/components/_progress.scss */
.progressbar li.active:before {
  border-color: #0094b3;
  background-color: #0094b3;
}

/* line 63, src/sass/components/_progress.scss */
.progressbar li.active:after {
  background-color: #0094b3;
}