/* CDU Kievit Font */
@font-face { font-family: 'CDU Kievit Bold'; src: url('../fonts/CDUKievitWeb-BoldItalic.woff') format('woff'); font-weight: normal; font-style: normal; font-display: auto; }@font-face { font-family: 'CDU Kievit'; src: url('../fonts/CDUKievitWeb-Medium.woff') format('woff'); font-weight: normal; font-style: normal; font-display: auto; }@font-face { font-family: 'CDU Kievit'; src: url('../fonts/CDUKievitWeb-Bold.woff') format('woff'); font-weight: bold; font-style: normal; font-display: auto; }

* {
  box-sizing: border-box;
}

::placeholder {
	color:  #2d3c4b;
	opacity: 1;
	transition: opacity 1s;
}

:focus::placeholder {
	opacity: 0; 
}

html {
  font-size: 62.5%; 
}

body {
	margin: 0;
	padding: 0;
	height: 100%;
	background-color:  #2d3c4b;
	font-size: 1.5em;
	line-height: 1.6;
	font-weight: 400;
	font-family: "CDU Kievit";
	color: #ffffff;
}

#page {
	position: absolute;
	display: grid;
	min-height: 100%;
	width: 100%;
	grid-template-rows: 50px 1fr 300px;
}

#page > header {
	grid-row-start: 1;
	grid-row-end: 2;
	position: fixed;
	width: 100%;
	background-color: #ffa600;
	border-bottom: 1px solid #ffffff;
	z-index: 10;
}

header > div {
	padding: 10px 30px !important;
}

header a {
	text-align: center;
	color: #ffffff;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: .1rem;
	text-decoration: none;
	text-transform: uppercase;
}

#page > main {
	grid-row-start: 2;
	grid-row-end: 3;
}

main > section:not(.start) {
	display: none;
}

main .container {
	padding: 30px;
}

main .container a {
	color: #ffffff;
}

#page > footer {
	grid-row-start: 3;
	grid-row-end: 4;
	background-color: #737986;
	width: 100%;
}

footer > div {
	padding: 30px;
}

footer a {
	color: inherit;
	text-decoration: none;
}

footer a:not([href^="mailto:"]) {
	text-decoration: underline;
}

footer ul a, footer p {
	opacity: 0.7;
}

@media (min-width: 1024px) {
	header > div,
	main .container,
	footer > div {
		padding: 30px;
		margin: 0 auto;
		width: 50%;
	}
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300;
}

h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0;
  text-align: justify;
}

/* 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button {
	display: inline-block;
	height: 38px;
	margin-bottom: 10px;
	padding: 0 30px;
	color: #ffffff;
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	line-height: 38px;
	letter-spacing: .1rem;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	background-color: inherit;
	border-radius: 4px;
	border: 1px solid #fff;
	cursor: pointer;
	box-sizing: border-box;
}

.nextbutton {
	background-color: #a7d5dc;
	color: #000000;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select option,
select {
	width: 100%;
	padding: 10px;
	border: 1px solid #ffffff;
	border-radius: 3px;
	transition: 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
	color:  #2d3c4b;
}

@media (min-width: 1024px) {
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	select option,
	select {
		width: 50%;
	}
}

/* Formular 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container blockquote {
	position: relative;
	border-left: 5px solid #ffa600;
	padding-left: 30px;
	font-size: 200%;
}

.container blockquote cite {
	padding-top: 10px;
	display: block;
	font-size: 50%;
}

.formular-icon, 
.formular-select,
.formular-textarea {
	position: relative;
	margin-bottom: 20px;
}

.formular-icon i {
	position: absolute;
	left: 15px;
	top: 33px;
	color:  #2d3c4b;
}

.formular-icon input {
	padding-left: 40px !important;
	box-sizing: border-box;
}

.menue-household {
	display: none;
}

.menue-household input,
.menue-household select {
	margin-right: 10px;
	width: 30%;
}

.menu-household-user {
	margin-bottom: 10px;
}

.formular-deletebutton {
	position: absolute;
	margin-top: 4px;
	display: inline;
}

.formular-deletebutton a {
	color: #ffffff;
	text-decoration: none;
}

.formular-deletebutton i {
	padding-top: 2px;
}

.step2 > div {
	margin-bottom: 30px;
}

.step1-error,
.step2-error,
.step3-error {
	display: none;
	color: #ffa600;
	font-weight: 600;
}

#formular-household-adduser {
	color: #ffffff;
	letter-spacing: .1rem;
	text-decoration: none;
}

.description {
	position: relative;
	font-size: 90%;
}

.description::after {
	content: "\A";
	white-space: pre;
}

.price {
	letter-spacing: .1rem;
	color: #ffa600;
}

.progress {
	margin-bottom: 30px;
	font-size: 90%;
}

.progress p {
	text-align: center;
}

.progress .bar {
	margin: 0 auto;
	background-color: #737986;
	border-radius: 13px;
	padding: 3px;
	width: 75%;
}

.progress .bar > div {
	border-radius: 10px;
	background-color: #ffa600;
	height: 25px;
}

#progress25 {
	width: 25%;
	animation: animation25progress 1s linear;  
}

@keyframes animation25progress {
	0% {
		width: 0%;
	}
	25% {
		width: 10%;
	}
	50% {
		width: 15%;
	}
	100% {
		width: 25%;
	}
}

#progress50 {
	width: 50%;
	animation: animation50progress 1s linear;  
}

@keyframes animation50progress {
	0% {
		width: 0%;
	}
	25% {
		width: 25%;
	}
	50% {
		width: 30%;
	}
	100% {
		width: 50%;
	}
}

#progress75 {
	width: 75%;
	animation: animation75progress 1s linear;  
}

@keyframes animation75progress {
	0% {
		width: 0%;
	}
	25% {
		width: 50%;
	}
	50% {
		width: 60%;
	}
	100% {
		width: 75%;
	}
}

#progress100 {
	width: 100%;
	animation: animation100progress 1s linear;  
}

@keyframes animation100progress {
	0% {
		width: 0%;
	}
	25% {
		width: 75%;
	}
	100% {
		width: 100%;
	}
}

/* Analysis */
.analysis {
	display: block !important;
}

.analysis .row {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #ffffff;
}

.analysis .stats li {
	list-style-type: none;
}

.analysis .stats li strong,
.analysis u {
	color: #ffa600;
}

/* Poll */
.question1-stars, .question2-stars, .question3-stars {
	display: block;
	position: relative;
	width: 90px;
	min-height: 60px;
	padding: 0;
	border: none;
}

.question1-stars > input, .question2-stars > input, .question3-stars > input {
	position: absolute;
	margin-right: -100%;
	opacity: 0;
}

.question1-stars > input:checked ~ label,
.question1-stars > input:focus ~ label,
.question1-stars > input:hover ~ label,
.question2-stars > input:checked ~ label,
.question2-stars > input:focus ~ label,
.question2-stars > input:hover ~ label,
.question3-stars > input:checked ~ label,
.question3-stars > input:focus ~ label,
.question3-stars > input:hover ~ label   {
	color: #ffa600;
}

.question1-stars > input:focus + label, .question2-stars > input:focus + label, .question3-stars > input:focus + label {
  outline: 1px dotted #999;
}

.question1-stars > label, .question2-stars > label, .question3-stars > label {
	position: relative;
	display: inline-block;
	float: right;
	width: 18px;
	height: 30px;
	color: #ffffff;
	cursor: pointer;
	background-repeat: no-repeat;
}

.poll-success, .poll-error, .poll-errorpage {
	display: none;
	color: #ffa600;
	font-weight: 600;
	font-size: 1.6em;
}

#feedback {
	height: 300px;
	width: 100%;
	color:  #2d3c4b;
}

#poll-image {
	height: auto;
	max-width: 100%;
}

#talkquestion {
	color: #000000;
	height: 300px;
	width: 100%;
}