@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap');

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

 html, body {
   margin: 0;
   padding: 0;
   height: 100%;
   color: black;
   font-family: 'Titillium Web', sans-serif;
 }

 .start__button {
   background-color: black;
   display: inline-block;
   border-radius: 0.325rem;
   padding: 0 3.25rem;
   line-height: 3.2625rem;
   font-size: 1.25rem;
   text-decoration: none;
   color: white;
   min-width: 130px;
   font-weight: 600;
   position: relative;
   z-index: 9999;
   border: solid 2px white;
   margin: 10px;
   cursor: pointer;
   height: 3.625rem;
   text-align: center;
 }

 .start__button:hover {
   opacity: 0.9;
 }

 .cta__button {
   background-color: white;
   display: inline-block;
   border-radius: 5px;
   padding: 15px 35px;
   font-size: 25px;
   text-decoration: none;
   color: black;
   font-weight: 700;
   position: relative;
   z-index: 9999;
   border: solid 2px white;
   margin: 10px;
 }

 .second__button {
   background-color: transparent;
   display: inline-block;
   border-radius: 5px;
   padding: 15px 35px;
   font-size: 25px;
   text-decoration: none;
   color: white;
   min-width: 130px;
   font-weight: 700;
   position: relative;
   z-index: 9999;
   border: solid 2px white;
   margin: 10px;
 }

 .back__button {
   background-color: transparent;
   display: inline-block;
   border-radius: 5px;
   padding: 15px 35px;
   font-size: 25px;
   text-decoration: none;
   color: white;
   min-width: 130px;
   font-weight: 700;
   position: relative;
   z-index: 9999;
   border: solid 2px white;
   margin: 10px;
 }

 .bottom {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   background-color: #fff;
   padding: 15px 10px;
   box-shadow: 0px -2px 12px rgba(0, 0, 0, 0.1);
 }

 .bottom__container {
   max-width: 1200px;
   margin: auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .progress {
   width: 80%;
   height: 10px;
   position: relative;
   border-radius: 5px;
   overflow: hidden;
   background-color: #ecedf5;
   margin-bottom: 30px;
   display: block;
   margin-top: 80px;
 }

 .progress__inner {
   position: absolute;
   top: 0;
   border-radius: 5px;
   height: 100%;
   left: 0;
   width: 0%;
   background-color: black;
   transition: .4s width linear
 }

 .quiz__question {
   font-weight: 900;
   margin-top: 0;
   font-size: 34px;
   margin-bottom: 50px;
 }

 .container {
   display: flex;
   height: calc(100% - 74px);
   width: 100%;
   align-items: center;
   justify-content: center;
   padding: 15px 10px;
 }

 .answer.go {
   margin-right: 0 !important;
 }

 .answer__input {
   appearance: none;
   -moz-appearance: none;
   -webkit-appearance: none;
   width: 1px;
   height: 1px;
   position: absolute;
   outline: none !important;
 }

 .answer__label {
   background-color: white;
   font-size: 14.4px;
   margin: 10px;
   padding: 30px;
   display: inline-block;
   border-radius: 20%;
   color: #A7AACB;
   text-align: center;
   font-weight: 600;
   box-shadow: 0 0 50px rgb(185, 185, 185);
   cursor: pointer;
 }

 .answer {
   display: inline-block;
   margin-right: 10px;
 }

 .quiz__inner {
   width: 80vw;
   text-align: center;
   padding: 30px 30px 30px 30px;
   border-radius: 30px;
 }

 .quiz__summary {
   background-color: transparent !important;
   color: white;
 }

 .answer__input:checked+.answer__label {
   border-color: #5861af;
   color: #14152C;
   box-shadow: 0px 0px 1px 4px rgba(88, 97, 175, 0.2)
 }

 .answer__input:checked+.answer__label .answer__tick {
   opacity: 1;
   visibility: visible;
 }

 .answer__char {
   line-height: 24px;
   display: inline-block;
   width: 26px;
   text-align: center;
   font-size: 13px;
   border-radius: 4px;
   color: #c8cae0;
   border: 1px solid #c8cae0;
   font-weight: 600;
   vertical-align: middle;
   margin-right: 15px;
 }

 .answer__tick {
   display: inline-block;
   vertical-align: middle;
   background-color: #5861af;
   margin-left: 20px;
   line-height: 14px;
   border-radius: 50%;
   padding: 4px;
   opacity: 0;
   visibility: hidden;
 }

 .answer__tick path {
   fill: #fff
 }

 .quiz__inner {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
 }

 .quiz__step:not(.quiz__step--current) {
   visibility: hidden;
   opacity: 0;
   display: none;
 }

 .question__emoji {
   font-size: 45px;
   margin-bottom: 15px;
   display: inline-block;
   margin-right: 15px;
 }

 .navigation__btn--disabled {
   opacity: 0.4;
 }

 .submit__container {
   margin-top: 25px;
 }

 .submit {
   background-color: #fff;
   line-height: 50px;
   display: inline-block;
   border-radius: 5px;
   padding: 10px 20px;
   font-size: 20px;
   text-decoration: none;
   color: black;
   min-width: 130px;
   font-weight: 600;
   text-transform: uppercase;
   cursor: pointer;
 }

 .job_name {
   font-size: 180px;
   text-transform: uppercase;
   line-height: 180px;
   color: white;
 }

 .quiz__step--10 {
   margin-top: 120px;
 }

 .result {
   color: white !important;
   font-size: 50px;
   line-height: 2;
 }

 .thanks__tick {
   line-height: 50px;
   width: 50px;
   font-size: 25px;
   color: #fff;
   background-color: #5861af;
   border-radius: 50%;
   display: inline-block;
   text-align: center;
 }

 .thanks__title {
   font-weight: 900;
   margin-top: 15px;
   text-align: center;
   font-size: 40px;
 }

 .thanks {
   text-align: center;
 }

 /* Bubble Images */
 .bubble_img {
   width: 25vh;
   position: absolute;
   left: 20%;
   top: 12%;
   z-index: -5;
 }

 /* Emojis */
 /* Background */
 .bg {
   background: white;
   animation: colorchange linear 3s infinite;
   -webkit-animation: colorchange linear 20s infinite;
 }

 .bg_green {
    background-repeat: repeat-y;
    background-size: 100% !important;
    background: url("../images/med-bg.svg"), linear-gradient(30deg, rgba(0,150,64,1) 0%, rgba(149,193,30,1) 100%);
 }

 .bg_pink {
    background-repeat: no-repeat;
		background-size: 120% !important;
		background: url("../images/inf-bg.svg"), linear-gradient(30deg, rgba(48,38,131,1) 0%, rgba(148,42,116,1) 100%);
      }

 .bg_blue {
  background-repeat: no-repeat;
  background-size: 100% !important;
  background: url("../images/ict-bg.svg"), linear-gradient(30deg, rgba(0,105,180,1) 0%, rgba(0,158,227,1) 100%);
 }

 .bg_navy {
  background-repeat: no-repeat;
  background-size: 120% !important;
  background: url("../images/elo-bg.svg"), linear-gradient(30deg, rgba(48,38,131,1) 0%, rgba(0,105,180,1) 100%);
}

 .area {
   display: none;
 }

 .circles {
   opacity: 50%;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
 }

 .circles li {
   position: absolute;
   display: block;
   list-style: none;
   width: 20px;
   height: 20px;
   animation: animate 5s linear infinite;
   animation-iteration-count: 1;
   bottom: 0px;
   font-size: 80px;
 }

 .circles li:nth-child(1) {
   left: 25%;
   width: 80px;
   height: 80px;
   animation-duration: 1s;
   bottom: -200px;
 }

 .circles li:nth-child(2) {
   left: 10%;
   font-size: 110px;
   bottom: -100px;
   animation-duration: 1.5s;
 }

 .circles li:nth-child(3) {
   left: 70%;
   font-size: 90px;
   bottom: -200px;
   animation-duration: 2s;
 }

 .circles li:nth-child(4) {
   left: 40%;
   font-size: 70px;
   bottom: -100px;
   animation-duration: 1.5s;
 }

 .circles li:nth-child(5) {
   left: 60%;
   font-size: 80px;
   animation-duration: 1s;
   bottom: -30px;
 }

 .circles li:nth-child(6) {
   left: 75%;
   font-size: 60px;
   bottom: -40px;
   animation-duration: 2s;
 }

 .circles li:nth-child(7) {
   left: 32%;
   font-size: 100px;
   bottom: -60px;
   animation-duration: 2s;
 }

 .circles li:nth-child(8) {
   left: 50%;
   font-size: 80px;
   animation-duration: 2s;
   bottom: -30px;
 }

 .circles li:nth-child(9) {
   left: 18%;
   font-size: 65px;
   animation-duration: 2s;
   bottom: -60px;
 }

 .circles li:nth-child(10) {
   left: 85%;
   font-size: 85px;
   animation-duration: 2s;
   bottom: -30px
 }

 @keyframes animate {
   0% {
     opacity: 0;
   }

   from {
     transform: translateY(30);
     opacity: 1;
     border-radius: 0;
   }

   to {
     transform: translateY(-1200px);
     opacity: 0;
     border-radius: 50%;
   }

 }

 .removebg {
   background-color: transparent !important;
 }

 .removeprogress {
   display: none !important;
 }

 @media screen and (max-width: 1280px) {
   .job_name {
     font-size: 120px;
     line-height: 100% !important;
   }

   .answer__label img {
     height: 60px !important;
   }

   .answer__label {
     font-size: 12px;
   }
 }

 @media screen and (max-width: 900px) {
   .job_name {
     font-size: 100px;
     line-height: 100% !important;
   }

   .bubble_img {
     width: 270px;
   }

   .answer__label img {
     height: 50px !important;
   }

   .answer__label {
     font-size: 10px;
   }
 }

 /* Responive Mobile */
 @media screen and (max-width: 374px) {

   /* Startpage */
   .quiz__inner {
     width: 90vw;
   }

   .start__quiz {
     font-size: 35px;
     line-height: 35px;
     margin-bottom: 20px;
   }

   .start__button {
     font-size: 18px;
     padding: 10px 20px;
     margin: 0px;
     margin-bottom: 20px;
   }

   /* Questions */
   .progress {
     margin-top: 0px;
   }

   .quiz__question {
     font-size: 18px;
     margin-bottom: 30px;
   }

   .answer__label {
     padding: 16px;
     margin: 0px;
     margin-bottom: 20px;
   }

   .answer__label img {
     height: 40px !important;
   }

   /* Result */
   .job_name {
     font-size: 50px;
     line-height: 50px;
   }

   .bubble_img {
     width: 220px;
     left: 15%
   }

   .quiz__step--10 {
     margin-top: 60px;
   }

   .cta__button {
     font-size: 18px;
     padding: 10px 25px;
     width: 80vw;
   }

   .second__button {
     font-size: 18px;
     padding: 10px 25px;
     width: 80vw;
   }
 }

 @media screen and (min-width:375px) and (max-width: 700px) {

   /* Startpage */
   .quiz__inner {
     width: 90vw;
   }

   .start__quiz {
     font-size: 45px;
     line-height: 50px;
     margin-bottom: 20px;
   }

   .start__button {
     font-size: 22px;
     display: inline;
     padding: 10px 20px;
     margin: 0px;
     margin-bottom: 20px;
   }

   .answer__label img {
     height: 40px !important;
   }

   /* Questions */
   .progress {
     margin-top: 0px;
   }

   .quiz__question {
     font-size: 22px;
     margin-bottom: 30px;
   }

   .answer__label {
     font-size: 8px !important;
     margin: 0px;
     margin-bottom: 20px;
   }

   .answers {
     margin: 0px 20px 0px 20px;
   }

   /* Result */
   .result{
     font-size: 30px;
   }


   .job_name {
     font-size: 46px;
     line-height: 60px;
   }

   .bubble_img {
     width: 25vh;
     display: flex;
     justify-content: center;
     left: 25%;
     top: 17%;
   }

   .circles li {
     position: absolute;
     width: 20px;
   }

   .circles li:nth-child(3) {
     animation-duration: 1s;
   }

   .circles li:nth-child(4) {
     display: none;
   }

   .circles li:nth-child(8) {
     display: none;
   }

   .circles li:nth-child(9) {
     display: none;
   }

   .circles li:nth-child(10) {
     display: none;
   }

   .button.large{
    width: 80vw;
   }
}

.home {
  position: fixed;
  left: 50px;
  top: 50px;
  height: 50px;
  z-index: 100;
  padding: 0;
  font-size: 1rem;
  font-style: normal;
  padding: 0px 30px 0px !important;
  border: 2px solid #ffffff;
  text-transform: uppercase;
}

.button.large {
  font-size: .7rem;
}

.home-mobile{
  text-transform: uppercase;
}

.icon {
  text-decoration: none;
  border-bottom: none;
  position: relative;
}

em, i {
  font-style: italic;
}

.icon.solid:before {
  font-weight: 900;
}

.icon:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  text-transform: none !important;
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
}

.fa-long-arrow-alt-left:before {
  margin-right: 0rem;
}