body, html {
	padding: 0;
	margin: 0;
	font-family: sans-serif;
	position: relative;
}

body {
	padding-top: 18vh;
}

/* /////////////// */
/* Einstiegs-Seite */
/* /////////////// */

body.landing {
	padding: 0;
	margin: 0;
	font-family: sans-serif;
}

body.landing section#header {
	padding: 3vh 5vw;
	text-align: center;
	background-color: #5b9bd5;
}

body.landing section#header img {
	width: 90vw;
}

body.landing section.main_content {
	padding: 2vh 5vw;
	text-align: center;
}

body.landing section.main_content h1 {
	font-size: 4vh;
	margin-top: 1vh;
}

body.landing section.main_content h2 {
	font-size: 3vh;
	margin-top: 1vh;
}

body.landing section.main_content p {
	font-size: 2vh;
}

body.landing section.main_content a.button {
	font-size: 2.5vh;
	font-weight: bold;
	text-decoration: none;
	background-color: #5b9bd5;
	color: #ffffff;
	display: block;
	padding: 3vh 3vw;
	width: 60vw;
	margin: 2vh auto;
	border-radius: 2vw;
}

/* /////////////// */
/* Fragen-Seite */
/* /////////////// */

section.questions {
	background-color: #ffffff;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	padding: 0 0 30px 0;
	display: none;
}

div.name_wrapper {
	background-color: #ffffff;
}
@media screen and (min-width: 989px) {
	div.name_wrapper {
		width: 600px;
		padding: 20px 45px 30px 45px !important;
		border-right: 1px solid #eeeeee;
	}
}
}@media (max-width: 988px) {
	div.name_wrapper {
		width: 100%;
		padding: 3vw 5vw 5vw 5vw !important;
		font-size: 3vw !important;
	}
	div.name_wrapper input {
		width: 86% !important;
	}
}

@media screen and (min-width: 767px) and (max-width: 988px) {
	div.name_wrapper {
		font-size: 3vw !important;
		padding: 2vh 5vw 3vh 5vw;
	}
}
@media (max-width: 768px) {
	div.name_wrapper {
		font-size: 5vw !important;
		width: 100%;
		padding: 3vw 5vw 5vw 5vw !important;
	}
	div.name_wrapper input {
		width: 86vw !important;
	}
}

div.name_wrapper {
	text-align: left;
	font-size: 18px;
	padding: 3vw 5vw 5vw 5vw;
}
div.name_wrapper {
	grid-column-start: 1;
	grid-column-end: 6;
}

div.name_wrapper fieldset {
	border: none;
	padding: 0;
	margin: 0;
}

div.name_wrapper input {
	border: 0.5vw solid #000000;
	background-color: #ffffff;
	width: 84vw;
	padding: 2vw;
	font-size: 18px !important;
}
@media screen and (min-width: 767px), screen {
	div.name_wrapper button,
	div.name_wrapper input,
	div.name_wrapper select,
	div.name_wrapper textarea {
		padding: 1vh 2vw;
	}
}

@media screen and (min-width: 989px), screen {
	div.name_wrapper button,
	div.name_wrapper input,
	div.name_wrapper select,
	div.name_wrapper textarea {
		width: 100%;
		padding: 1%;
		border: 2px solid #000000;
	}
}

@media screen and (min-width: 989px), screen {
	div.name_wrapper input {
		width: 97.2%;
	}
}



div.question_wrapper.active { background-color: #ffffff }
div.question_wrapper.active:nth-child(3n) { background-color: #BFD8EF; border-radius: 2vw; }

/*div.question_wrapper.active:nth-child(2) {
	padding-top: 30vw;
}*/

div.headline_wrapper,
div.question_wrapper,
{
	grid-column-start: 1;
	grid-column-end: 6;
}

div.headline_wrapper {
	background-color: #5b9bd5 !important;
    color: #ffffff;
    border-radius: 0 !important;
    padding: 4vw 5vw;
    position: fixed;
    width: 90vw;
    //height: 12vh;
    z-index: 1900;
    top: 0;
}

div.headline_wrapper img {
	width: 35vw;
    padding: 2vw 5vw;
    /* border: 1px solid #ffffff; */
    border-radius: 5px;
    //background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-10%);
    display: block;
}

div.headline_wrapper .questions_headline {
	font-size: 5vw;
	width: 65vw;
	margin: 1vh 0 2vh 0;
}

.progress-circle {
	position: fixed;
    top: 2vw;
    right: 3vw;
    margin: 0;
    background-color: #ffffff !important;
    font-size: 5vw;
    font-weight: bold;
    z-index: 2000; 
}

.progress-circle span {
	color: #ffffff;
}

.progress-circle .first50-bar {
	background-color: #43a935 !important;
}

.progress-circle .value-bar {
	border: 1em solid #43a935;
}

.progress-circle:after {
	top: 1em;
	left: 1em;
	height: 3em;
	width: 3em;
	background-color: #5b9bd5;
}

div.question_wrapper {
	text-align: left;
	font-size: 5vw;
	padding: 3vw 5vw 5vw 5vw;
	display: none;
}

div.question_wrapper.active {
	display: block;
}

div.question_wrapper p {
	padding: 0 0 5vw 0;
	margin: 0;
}

div.question_wrapper fieldset {
	border: none;
	padding: 0;
	margin: 0;
}

div.question_wrapper button, 
div.question_wrapper input, 
div.question_wrapper select, 
div.question_wrapper textarea {
	border: 0.5vw solid #000000;
	background-color: #ffffff;
	width: 88vw;
	padding: 2vw;
}

div.question_wrapper p.question_text {
	padding: 0 0 5vw 0;
}

div.question_wrapper fieldset.radio_set {
	margin-bottom: 0vw;
	width: 90vw;
}

div.question_wrapper input[type='radio'] {
	display: none;
}

div.question_wrapper .checkbox_wrapper input[type='checkbox'] {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

div.question_wrapper .checkbox_wrapper input[type='checkbox'],
div.question_wrapper input[type='radio'] ~ label {
    height: 8vw;
    width: 8vw;
    background-color: white;
    display: inline-block;
    border: 0.5vw solid #43a935;
    border-radius: 100%;
    position: relative;
}

div.question_wrapper .checkbox_wrapper input[type='checkbox'] {
    border-radius: initial;
}

div.question_wrapper input[type='radio'] ~ label:after,
div.question_wrapper .checkbox_wrapper input[type='checkbox']:after {
	content: ' ';
	border: 0.5vw solid #ffffff;
	position: absolute;
	top: 0.5vw;
	bottom: 0.5vw;
	left: 0.5vw;
	right: 0.4vw;
	border-radius: inherit;
}

div.question_wrapper .checkbox_wrapper input[type='checkbox']:checked,
div.question_wrapper input[type='radio']:checked ~ label {
	background-color: #43a935;
}

div.question_wrapper .checkbox_wrapper {
	margin: 0 0 3vw 0;
	position: relative;
	padding: 0;
}

div.question_wrapper .checkbox_wrapper label {
	display: inline-block;
	position: absolute;
	top: 48%;
	left: 10vw;
	transform: translateY(-50%);
}

/* AGB FIELD */

div.name_wrapper a{
	color: #5b9bd5;
}

div.name_wrapper .checkbox_wrapper input[type='checkbox'] {
	-webkit-appearance: none;
	appearance: none;
	outline: none;
}

div.name_wrapper .checkbox_wrapper input[type='checkbox'],
div.name_wrapper input[type='radio'] ~ label {
	height: 8vw;
	width: 8vw;
	background-color: white;
	display: inline-block;
	border: 0.5vw solid #5b9bd5;
	border-radius: 100%;
	position: relative;
}
@media(max-width: 768px) {
	div.name_wrapper .checkbox_wrapper input[type='checkbox'],
	div.name_wrapper input[type='radio'] ~ label {
		width: 8vw !important;
	}
}

div.name_wrapper .checkbox_wrapper input[type='checkbox'] {
	border-radius: initial;
}
div.name_wrapper .checkbox_wrapper input[type='checkbox']:checked {
	background: url("../img/icon-check.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

div.name_wrapper input[type='radio'] ~ label:after,
div.name_wrapper .checkbox_wrapper input[type='checkbox']:after {
	content: ' ';
	//border: 0.5vw solid #ffffff;
	position: absolute;
	top: 0.5vw;
	bottom: 0.5vw;
	left: 0.5vw;
	right: 0.4vw;
	border-radius: inherit;
}

div.name_wrapper .checkbox_wrapper input[type='checkbox']:checked,
div.name_wrapper input[type='radio']:checked ~ label {
	background-color: #5b9bd5;
}

div.name_wrapper .checkbox_wrapper {
	margin: 0 0 3vw 0;
	position: relative;
	padding: 0;
}

div.name_wrapper .checkbox_wrapper label {
	display: inline-block;
	position: absolute;
	top: 48%;
	left: 10vw;
	transform: translateY(-50%);
}

div.question_wrapper span {
	margin-right: 9.85vw;
	width: 9vw;
	display: inline-block;
	font-size: 10px;
	text-align: center;
}

div.question_wrapper span label {
	margin-bottom: 1vh;
}

div.question_wrapper p.questions_fieldset_label {
	padding: 0;
	width: 90vw;
}

div.question_wrapper p.questions_fieldset_label span {
	margin: unset;
    width: 20vw;
    display: inline-block;
    font-size: 50%;
    padding: 0;
}



div.question_wrapper p.questions_fieldset_label span {
	text-align: center;
}

div.question_wrapper p.questions_fieldset_label span:first-child {
	text-align: left;
}

div.question_wrapper p.questions_fieldset_label span:last-child {
	text-align: right;
	transform: translateX(-0.5vw);
}

div.question_wrapper span:last-child {
    margin-right: 0;
}

div.question_wrapper input {
	width: 84vw;	
}

section.button_wrapper {
	text-align: center;
    padding: 1vh 5vw;
    width: 90vw;
}	

button.inactive {
	background-color: #eeeeee;
	pointer-events: none;
}

button {
	font-size: 6vw;
	padding: 2vh 5vw;
	background-color: #5b9bd5;
	color: #ffffff;
	border: none;
	border-radius: 2vw;
	margin: 2vw 1vw;
	outline: none;
}

button:hover {
	cursor: pointer;
}

/* /////////////// */
/* Payment-Seite */
/* /////////////// */

section.payment_information {
	padding: 5vw;
	text-align: center;
}

section.payment_information h2 {
	font-size: 6vw;
	margin-top: 1vh;
}

section.payment_information p {
	font-size: 4vw;
}

section.payment_information p.information {}

section.payment_information p.error {
	border: 2px solid #ff0000;
    background-color: #ffeed9;
    padding: 5vw;
    color: #ff0000;	
}

section.payment_information p.success {
	font-size: 6vw;	
}

section.payment_information button {}

section.payment_information .error {
	display: none;
}

section.payment_information .success {
	display: none;
}

section.payment_information .showResult {
	display: none;
}

/* /////////////// */
/* Ergebnis-Seite */
/* /////////////// */

.sk-circle {
  width: 100px;
  height: 100px;
  top: 50vh;
  left: 50vw;
  position: fixed;
  transform: translateX(-50%) translateY(-50%);
  overflow: show;
}

.sk-circle p{ 
	display: none;
  margin-bottom: -60px;
  position:absolute;
  bottom: 0;
  width: 100px;
  text-align: center;
}

.sk-circle .sk-child {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-circle .sk-child:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
          animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}

.fadeOut {
	-webkit-animation: sk-fadeOut 0.4s linear both;
          animation: sk-fadeOut 0.4s linear both;
}
.sk-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg); }
.sk-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg); }
.sk-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg); }
.sk-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg); }
.sk-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg); }
.sk-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg); }
.sk-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg); }
.sk-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg); }
.sk-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg); }
.sk-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); }
.sk-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); }
.sk-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; }
.sk-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; }
.sk-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; }
.sk-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; }
.sk-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; }
.sk-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; }
.sk-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; }
.sk-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s; }
.sk-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s; }
.sk-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s; }
.sk-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s; }

@-webkit-keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes sk-fadeOut {
  0%{
    -webkit-opacity: 1;
            opacity: 1;
  } 100% {
    -webkit-opacity: 0;
            opacity: 0;
  }
}

@keyframes sk-fadeOut {
  0%{
    -webkit-opacity: 1;
            opacity: 1;
  } 100% {
    -webkit-opacity: 0;
            opacity: 0;
  }
}

section.result_tiles {
	background-color: #ffffff;
	//display: grid;
	grid-template-columns: 1fr;
	justify-items: center;
	padding: 1vw 2vw;
	text-align: center;
}

#result_tile_domain {
	padding-left: 0;
	padding-right: 0;
}
.top_results_container .result_tile_wrapper:nth-child(odd) {
	background-color: #ECF2F6;
}
.rest_results_container .result_tile_wrapper:nth-child(even) {
	background-color: #ECF2F6;
}

#result_tile_domain .result_tile_wrapper .result_tile .result_title_inlay {
	background: linear-gradient(to right, #579AD6,#90CAED);
}

.top_results_container {
	width: 100%;
}
.rest_results_container {
	width: 100%;
	max-height: 0px;
	overflow: hidden;
	transition: 0.5s;
}

.rest_results_container.open {
	max-height: 1200px;
}

#show_all_result_tiles {
	//float: left;
}



div.headline_wrapper .result_headline {
	font-size: 5vw;
	/*width: 70vw;*/
	margin: 1vh 0 2vh 0;
}

#swipe_domain ul,
#swipe_domain li {
	list-style-type: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

div.result_tile_wrapper {
	margin: 1vw 0;
	text-align: center;
	/*max-width: 24vw;*/
	padding: 10px 0 0 0;
}

.print div.result_tile_wrapper {
	//margin: 1vw 0;
	text-align: center;
	//max-width: 25%;
}

div.result_tile_wrapper h2 {
	font-size: 2.4vw;
	text-overflow: ellipsis;
	-ms-word-break: break-all;
    word-break: break-all;
	text-align: center;
	padding: 10px 0;

 /* Non standard for webkit */
     word-break: break-word;

    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}

div.result_tile_wrapper:hover {
	cursor: pointer;
}

div.result_tile {
	position: relative;
	display: inline-block;
	/*height: 18vw;*/
	width: 100%;
	/*border: 0.7vw solid;
	border-radius: 20%;*/
	overflow: hidden;

	/*Fallback colors*/
	border-color: transparent  !important;
	background-color: transparent !important;
}

div.result_tile .result_title_inlay {
	display: inline-block;
	height: 40px;
	width: 0%;
	background-color: #90CAED;
	position: relative;
}

.triangle_inner{
	transform: rotate(45deg) scale(0.5);
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	background-color:#90CAED;
	width:42px;
	height:42px;
	left: -30px;
	position:relative;
	-moz-border-radius: 2px;
	border-radius: 4px;
}

.triangle_outer {
	position: absolute;
	right: -28px;
	display: inline-block;
	height: 40px;
	width: 28px;
	overflow: hidden;
}

.triangle_outer.animation {
	position: relative !important;
	right: initial;
}

div.result_tile,
div.result_tile * {
	text-align: left;
	font-size: 5vw;
}

div.result_tile span.result_tile_value {
	color: #579AD6;
	font-weight: bold;
	position: absolute;
	top: 50%;
	margin-left: 0px !important;
	transform: translate(0%,-50%);
}

div.result_tile span.result_tile_value:after{
	content: '%';
}


section.jobsForYou,
section.description {
	margin: 1vw 5vw 5vh 5vw;
}

section.jobsForYou h2,
section.description h2 {
	font-size: 5vw;
	margin: 1vw 0;
}

section.jobsForYou h2 {
	margin: 3vw 0;
}

section.jobsForYou p,
section.description p {
	font-size: 3.5vw;
	margin: 1vw 0;
}

section.jobsForYou #jobList {
	font-size: 5vw;
	padding: 1vh 3vw !important;
	margin: 0;
	list-style: none;
}

section.jobsForYou #jobList li {
	padding: 1vh 0 !important;
}

/*section.jobsForYou #jobList li:before {
	content: '#';
	padding-right: 3vw;
}*/

section.jobsForYou #jobList span.after_li {
	color: #ffffff;
	background-color: #5b9bd5;
	padding: 1vw;
	margin-left: 1vw;
	border-radius: 100%;
	width: 5vw;
	height: 5vw;
	display: inline-block;
	text-align: center;
}

#swipe_domain {
	height: 83vh !important;
}

.dragend-page {
	height: 83vh !important;
}

#modal_tile_details {
	position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20vw 10vw;
    background-color: rgba(0,0,0,0.7);
    z-index: 2000;
    overflow: scroll;
    display: none;
}

#modal_tile_details div.modal_inner {
	background-color: #ffffff;
	padding: 17vw 2vw 2vw 2vw;
	position: relative;
}

#modal_tile_details div.modal_close_clickReceiver {
	position: absolute;
	top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: transparent;
}

#modal_tile_details div.modal_inner button#modal_back_to_prev_job,
#modal_tile_details div.modal_inner button#modal_close {
	position: absolute;
	right: 2vw;
	top: 2vw;
	padding: 1vw;
    height: 8vw;
    width: 8vw;
    margin: 0;
    color: transparent;
    background-color: transparent;
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    background-image: url(../img/modal-close.png);
}

#modal_tile_details div.modal_inner button#modal_back_to_prev_job {
	left: 2vw;
	right: initial;
	padding-top: 0;
	background-image: url(../img/modal-back.png);
	display: none;
}

#modal_tile_details div.modal_inner h2 {
	font-size: 7vw;
	margin: 0 0 2vw 0;
}

#modal_tile_details div.modal_inner p {
	font-size: 3.5vw;
}

#footer {
	text-align: center;
	color: #BFD8EF;
	font-size: 3vw;
	padding: 1vw 0;
}


/* Farben für Ergebnis-Kacheln */
div.result_tile.blue {
	border-color: #4C87FF;
	background-color: #4C87FF;
}

div.result_tile.orange {
	border-color: #E87C11;
	background-color: #E87C11;
}

div.result_tile.red {
	border-color: #FF373A;
	background-color: #FF373A;
}

div.result_tile.green {
	border-color: #72E847;
	background-color: #72E847;
}

div.result_tile.purple {
	border-color: #9A26E8;
	background-color: #9A26E8;
}

div.result_tile.yellow {
	border-color: #FFE42A;
	background-color: #FFE42A;
}

div.result_tile.pink {
	border-color: #E87CA4;
	background-color: #E87CA4;
}

div.result_tile.brown {
	border-color: #A14F35;
	background-color: #A14F35;
}

p.resultOutputTemp {
	padding: 20px 20px 50px 20px;
	max-width: 400px;
	margin: 0 auto;
}

.print section.result_tiles {
	background-color: #ffffff;
	display: block;
	justify-items: center;
	padding: 0;
	position: relative;
}

.print div.headline_wrapper {
    /*width: 100%;*/
}


.print #descriptionText {
	font-size: 12px !important;
}


.print h1 {
	padding-top: 25px;
    font-size: 32px !important;
}

.print h2 {
    font-size: 28px !important;
}

.print h3 {
    font-size: 20px !important;
}


.print section.result_tiles_domain {
	background-color: #ffffff;
	display: block;
	/* grid-template-columns: 1fr 1fr 1fr 1fr; */
	width: 100%;
	justify-items: center;
	padding: 1vw 2vw;
	clear: both;
}

.print .result_tile_wrapper {
	float: left;
	width: 25%;
}

.result.print {
	display: block;
}

.print .resultTileTitle {
	font-size: 16px !important;
	margin-bottom: 0px;
}

.print #jobsForYou_0 {
	clear: both;
	width: 100%;
	margin: 0 0 30px 0;
}
.print #jobsForYou_1 {
	width: 100%;
    margin: 0 0 30px 0;
}
.print #jobsForYou_2 {
	width: 100%;
    margin: 0 0 30px 0;
}

.print div.result_tile {
	width: calc(100% - 150px);
	padding-right: 150px;
	overflow-x: visible;
    height: 40px;
 }

.print .describeActivityHeadline {
	clear: both;
}



.pdf-download-error {
	margin: 0px;
	font-size: 13px !important;
	color: #5b9bd5;
	opacity: 0;
	transition: 0.5s;
}
.pdf-download-error.shown {
	opacity: 1;
}

#error-container {
	text-align: center;
	color: #D50000;
	padding: 50px 0;
	font-weight: bold;
	font-size: 24px;
}