@import url(https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700,800,900);
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css');

@keyframes shake {
  10%, 90% 		{ transform: translate3d(-1px, 0, 0) }
  20%, 80% 		{ transform: translate3d( 2px, 0, 0) }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0) }
  40%, 60% 		{ transform: translate3d( 3px, 0, 0) }
}
:root {
	--lightyellow: 	#fff8cd;
	--yellow: 		#ffdc00;
	--darkyellow: 	#ddbf00;


	--lightred: 	#ffd6d4;
	--red: 			#da2032;
	--darkred: 		#b31b29;

	--lightgreen: 	#dbffcd;
	--green: 		#45a617;
	--darkgreen:	#398a13;

	--lightorange: 	#ffc022;
	--orange: 		#ef825b;
	--darkgorange:	#ef825b;

	--lightblue: 	#008eeb;
	--blue: 		#0071bb;
	--darkblue:		#0a6dc4;

	--lightpurple: 	#ca52a0;
	--purple: 		#a44fbf;
	--darkgpurple:	#5d4e89;

	--lightgrey: 	#ececec;
	--grey: 		#ccc;
	--darkgrey: 	#aaa;
	--darkergrey: 	#444;
	--greyalpha: 	rgba(128,128,128,.2);
	//--greypixel:	url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1"><rect width="1" height="1" fill="%23ddd" /></svg>');
	--greypixel:	url('data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///93d3QAAACH5BAAAAAAALAAAAAABAAEAAAICVAEAOw==');

	--radius:		.2rem;
	--spacing: 		1.2rem;
	--height:		2.75rem;

	--scrollbar-size: .5rem;
	--scrollbar-minlength: 1.5rem;
	--scrollbar-ff-width: thin;
	--scrollbar-track-color: transparent;
	--scrollbar-color: rgba(0,0,0,.2);
	--scrollbar-color-hover: rgba(0,0,0,.3);
	--scrollbar-color-active: #ffdc00;
	
}
::-webkit-inner-spin-button { display: none }
::-webkit-clear-button { display: none }
::-webkit-calendar-picker-indicator { color: transparent; background-color: transparent }

body::-webkit-scrollbar {
  height: var(--scrollbar-size);
  width: var(--scrollbar-size);
}
body::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track-color);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color);
  border-radius: var(--radius);
}
body::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-color-hover);
}
body::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-color-active);
}
body::-webkit-scrollbar-thumb:vertical {
  min-height: var(--scrollbar-minlength);
}
body::-webkit-scrollbar-thumb:horizontal {
  min-width: var(--scrollbar-minlength);
}
html {
	scroll-behavior: smooth;
}

/*** BASIC RESET ***/

html, body {
	height: 100%;
}
html * {
    /* Most basic CSS reset */
    margin: 0;
    padding: 0;
    font: inherit;
    box-sizing: border-box; /* All elements need to be rendered in the new box-model */
	outline:none;
    box-shadow: none;
	color: inherit;
}
body {
	font:  400 16px/1.5 -apple-system, BlinkMacSystemFont, Roboto, 'Lato', sans-serif;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
	overflow-y: overlay;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	scrollbar-width: var(--scrollbar-ff-width);
	scrollbar-color: var(--scrollbar-color) var(--scrollbar-track-color);
	-webkit-text-size-adjust:none;
	-ms-text-size-adjust:none;
	-moz-text-size-adjust:none;
	text-size-adjust:none;
	background-color: var(--lightgrey);
}
h1, h2, h3 {
    font: 700 1em 'Merriweather Sans', Myriad, Arial, sans-serif;
}
strong {
	font-weight: 700;
}
a {
	text-decoration: none;
}
input, button, textarea, select {
	-webkit-appearance: none;
    appearance: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;
    outline: 0;
    border: none;
    border-radius: 0;
	background-color: transparent;
	box-shadow: none;
}
input[type="number"] {
	-moz-appearance:textfield;
}
select option[disabled] {
	display: none;
}
img, svg {
    vertical-align: bottom;
}
label[for] {
	user-select: none;
}
.link {
    color: var(--blue);
	-webkit-text-decoration-skip: ink;
	text-decoration-skip: ink;
	text-decoration-color: transparent;
	transition: text-decoration-color 0.1s ease-in;
}
.link:hover {
	text-decoration: underline;
	text-decoration-color: inherit;
}
.paragraph {
	margin-bottom: 1rem;
}
.float--left {
	float: left;
}
.float--right {
	float: right;
}
.image img {
	width: 100%;
	height: auto;
}

/*** COLORS ***/

.green	{ color: var(--green) }
.red	{ color: var(--red) }

/*** ICONS ***/

.icon::before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-family: 'Font Awesome 5 Free';
	font-weight: 700;
    content: var(--icon);
}
.icon--green::before	{ color: var(--green) }

.icon--edit		{ --icon: '\f044'; }
.icon--check	{ --icon: '\f058'; }
.icon--login	{ --icon: '\f14d'; }
.icon--phone	{ --icon: '\f005'; }
.icon--mail		{ --icon: '\f2b6'; }
.icon--chat		{ --icon: '\f075'; }
.icon--close	{ --icon: '\f057'; }
.icon--next		{ --icon: '\f054'; }
.icon--point	{ --icon: '\f3c5'; }
.icon--star		{ --icon: '\f005'; }

.icon--light::before {
	font-weight: normal;
}

/*** FORMS ***/

.btn {
	color: #000;
	flex: 0 0 auto;
	vertical-align: bottom;
    background-color: var(--yellow);
	transition: background-color, color;
	transition-duration: .2s;
    cursor: pointer;
	padding: 0 1rem;
	line-height: var(--height);
	min-width: var(--height);
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
	text-overflow: ellipsis;
	border-radius: 5px;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;
}
.btn:hover,
.btn:active,
.btn:focus {
    background-color: var(--darkyellow);
}
.btn[disabled],
.btn[disabled]:hover,
:invalid [type="submit"] {
	cursor: not-allowed;
	background-color: var(--lightgrey);
	color: var(--darkgrey);
}
.btn--green {
    background-color: var(--green);
    color: #fff;
}
.btn--green:hover,
.btn--green:active,
.btn--green:focus {
    background-color: var(--darkgreen);
}
.btn--red {
    background-color: var(--red);
    color: #fff;
}
.btn--red:hover,
.btn--red:active,
.btn--red:focus {
    background-color: var(--darkred);
}
.btn--white {
    background-color: #fff;
}
.btn--white:hover,
.btn--white:active,
.btn--white:focus {
    background-color: var(--lightgrey);
}
.form__label {
	display: inline-block;
	margin-bottom: .4rem;
}
.form__value {
	position: relative;
}
.form__unit {
	color: var(--darkgrey);
	position: absolute;
	line-height: var(--height);
	top: 0;
	right: 8px;
}
.form__input {
	width: 100%;
	height: var(--height);
	padding: 0 .5rem;
	background-color: #fff;
	color: #000;
    border: 1px solid var(--grey);
	border-radius: var(--radius);
	transition: background-color, border-color;
	transition-duration: .2s;
}
.form__input:hover {
    border-color: var(--darkgrey);
}
.form__input:invalid {
    border-color: var(--red);
}
.form__input:invalid:not(:focus) {
	animation: shake 1s ease-in-out both;
}
.form__input:focus {
	border-color: #5cb3fd;
}
.form__input--select {
	line-height: 28px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="11" height="6"><polyline points="0 0 5 5 10 0" stroke="%23aaa" fill="transparent" stroke-linecap="round" stroke-width="1.5" /></svg>');
    background-repeat: no-repeat;
    background-position: calc(100% - 8px) 50%;
}
.form__input--date {
	position: relative;
}
.form__input--date::after {
	pointer-events: none;
	position: absolute;
	right: 8px;
    font-family: 'Font Awesome 5 Free';
    content: '\f073';
	color: var(--darkgrey);
}
.form__input--textarea {
	line-height: 1.2;
	height: auto;
}
.form__choice {
	display: none;
}
.form__choice + label[for] {
	display: flex;
}
.form__choice + label[for]::before {
	content: '';
	width: 18px;
	height: 18px;
	line-height: 18px;
	padding: 4px;
	margin-right: 5px;
    border: 1px solid var(--grey);
	text-align: center;
	border-radius: var(--radius);
	content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
	color: transparent;
	transition: background-color, color;
	transition-duration: .2s;
}
.form__choice + label[for]:hover::before {
    border-color: var(--darkgrey);
}
.form__choice--radio + label[for]::before,
.form__choice--switch + label[for]::before {
	content: '\f111';
	border-radius: 26px;
}
.form__choice--switch + label[for]::before {
	width: 40px;
	color: var(--blue);
	text-align: left;
}
.form__choice:checked + label[for]::before {
	background-color: var(--blue);
	border-color: var(--blue);
	color: #fff;
}
.form__choice--switch:checked + label[for]::before {
	text-align: right;
}


/*** LAYOUT ***/
.content {
	margin: auto;
	max-width: 700px;
}
.panel {
	background-color: #fff;
	border-radius: 5px;
	margin-bottom: 2rem;
	box-shadow:
		0 1px 3px rgba(0,0,0,.2),
		0 0 1rem rgba(0,0,0,.1);
}
.panel__indent {
	padding: var(--spacing);
}
.panel__indent + .panel__indent {
	border-top: 1px solid var(--greyalpha);
}
.panel__headline {
	margin: 2rem 0 0.8rem 0;
}

/*** FLEX ***/

.flex {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}
.flex--end {
	align-items: flex-end;
}
.flex > * {
	flex-grow: 1;
}
.flex >*+* {
	margin-left: 1rem;
}

/*** ITEMLIST ***/

.list__item {
    list-style: none;
	display: flex;
}
.list__item + .list__item {
	margin-top: .5rem;
}
.list__item:before {
	margin-right: .5rem;
}

/*** ENTRY ***/

.entry {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	position: relative;
	padding: .8rem var(--spacing);
}
.entry + .entry {
	border-top: 1px solid var(--greyalpha);
}
.entry__btn::after {
	display: block;
	content: '\a';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.entry__icon {
	display: inline-block;
	margin-right: 1rem;
	flex: 0 0 auto;
	width: var(--height);
	height: var(--height);
	line-height: var(--height);
	text-align: center;
	background-color: var(--yellow);
	color: #000;
	border-radius: 100%;
}
.entry__text {
	flex: 0 1 100%;
}

/*** TOGGLE ***/

.segmented {
	border: 1px solid var(--blue);
	border-radius: 5px;
	overflow: hidden;
	display: flex;
}
.segmented__item {
	display: inline-block;
	width: 50%;
	line-height: 2rem;
	padding: 0 1rem;
	text-align: center;
	color: var(--blue);
	transition: background-color .2s;
}
.segmented__item:hover {
	background-color: rgba(128,128,128,.1);
}

.segmented__item--active {
	pointer-events: none;
	background-color: var(--blue);
	color: #fff;
}

/*** PROGRESS ***/

.progress {
	display: flex;
	width: 80%;
	margin: auto;
	font-size: .8rem;
	justify-content: space-between;
	align-items: flex-start;
	list-style: none;
	counter-reset: section;
}
.progress__separator {
	display: block;
	width: 100%;
	height: 2px;
	margin: 22px 5px;
	background-color: rgba(128,128,128,.3);
}
.progress__item {
	display: block;
	text-align: center;
}
.progress__item::before {
	cursor: pointer;
	counter-increment: section;
	content: counter(section);
	font-size: 1.2rem;
	display: block;
	margin: auto;
	width: var(--height);
	height: var(--height);
	line-height: var(--height);
	text-align: center;
	border-radius: 100%;
	background-color: rgba(128,128,128,.5);
	transition: background-color, color;
	transition-duration: .2s;
}
.progress__item:hover::before,
.progress__item:active::before {
	background-color: var(--blue);
	color: #fff;
}
.progress__item--active::before {
	background-color: var(--yellow);
	color: #000;
	font-weight: 700;
}
.progress__item--active,
.progress__item--active ~ .progress__item {
	pointer-events: none;
}
.progress__item--active ~ .progress__item {
	opacity: .5;
}

/*** STECIFIC STYLES ***/

.panel--contact {
	position: relative;
}
.panel--contact::after {
	content: '\A';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 10rem;
	height: 10rem;
	background: url('./callcenter.png') right bottom/contain no-repeat;
}

/*** MEDIA QUERIES ***/

@media screen and (max-width: 700px) {
	.panel__headline { 
		margin-left: var(--spacing);
		margin-right: var(--spacing);
	}
	.panel {
		box-shadow: 0 0 2px rgba(0,0,0,0.2);
		border-radius: 0
	}
}
@media screen and (max-width: 500px) {
	.flex--break {
		display: block;
	}
	.flex--break > * {
		width: 100%;
	}
	.flex--break >*+* {
		margin: 1rem 0 0 0;
	}
	.reduce {
		display: none;
	}
	.btn .icon::before {
		float: left;
		width: 1rem;
		margin-right: -1rem;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--blue: 	#008eeb;
	}
	body {
		color: #fff;
		background-color: #000;
	}
	.panel {
		background-color: #222;
	}
}