* {
  box-sizing: border-box;
}

/* Farbe des Primary Buttons übersteuern */
.btn-custom {
	color: #fff !important;
	background-color: var(--primaryColor) !important;
	border-color: var(--primaryColor) !important;
}

.borderNone {
	border: none !important;
}
	
.btn-xs {
	padding: 0.15rem 0.25rem;
	font-size: 0.5rem;
	border-radius: 0.2rem;
}

.column, .row {
	min-height: 50px;
}

.selected {
	border: 2px dotted red;
}

.row {
	margin-left: 0px !important;
	margin-right: 0px !important;
}

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

/* Responsive Background image */
.bg-image {
	position: relative; 
	height: 550px; 
}

.bg-image::before {    
	content: "";
	background-image: var(--bg-image); 
	background-position: center center; 
	background-repeat: no-repeat; 
	background-size: cover;
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	opacity: 0.25;
}
	
/* Vertical Timeline */
/* The actual timeline (the vertical ruler) */
.timeline {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
	content: '';
	position: absolute;
	width: 6px;
	background-color: var(--timelineColor);
	top: 0;
	bottom: 0;
	left: 50%;
	margin-left: -3px;
}

/* timeline-container around content */
.timeline-container {
	padding: 10px 40px;
	position: relative;
	background-color: inherit;
	width: 50%;
}

/* The circles on the timeline */
.timeline-container::after {
	content: '';
	position: absolute;
	width: 35px;
	height: 35px;
	right: -17px;
	background-color: var(--primaryColor);
	border: 6px solid var(--timelineColor);
	top: 15px;
	border-radius: 50%;
	z-index: 1;
}

/* Place the timeline-container to the left */
.tl-left {
	left: 0;
}

/* Place the timeline-container to the right */
.tl-right {
	left: 50%;
}

/* Add arrows to the left timeline-container (pointing right) */
.tl-left::before {
	content: " ";
	height: 0;
	position: absolute;
	top: 22px;
	width: 0;
	z-index: 1;
	right: 30px;
	border: medium solid var(--elementColor);
	border-width: 10px 0 10px 10px;
	border-color: transparent transparent transparent var(--elementColor);
}

/* Add arrows to the right timeline-container (pointing left) */
.tl-right::before {
	content: " ";
	height: 0;
	position: absolute;
	top: 22px;
	width: 0;
	z-index: 1;
	left: 30px;
	border: medium solid var(--elementColor);
	border-width: 10px 10px 10px 0;
	border-color: transparent var(--elementColor) transparent transparent;
}

/* Fix the circle for timeline-containers on the right side */
.tl-right::after {
	left: -16px;
}

/* The actual content */
.timeline-content {
	padding: 10px 30px;
	background-color: var(--elementColor);
	position: relative;
	border-radius: 6px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
	/* Place the timelime to the left */
	.timeline::after {
		left: 31px;
	}

	/* Full-width timeline-containers */
	.timeline-container {
		width: 100%;
		padding-left: 70px;
		padding-right: 25px;
	}

	/* Make sure that all arrows are pointing leftwards */
	.timeline-container::before {
		left: 60px;
		border: medium solid  var(--timelineColor);
		border-width: 10px 10px 10px 0;
		border-color: transparent  var(--timelineColor) transparent transparent;
	}

	/* Make sure all circles are at the same spot */
	.tl-left::after, .tl-right::after {
		left: 15px;
	}

	/* Make all right timeline-containers behave like the left ones */
	.tl-right {
		left: 0%;
	}
}

.fs-1 {
	font-size: 2.5rem!important;
}

.fs-2 {
	font-size: 2rem!important;
}

.fs-3 {
	font-size: 1.75rem!important;
}

.fs-4 {
	font-size: 1.5rem!important;
}

.fs-5 {
	font-size: 1.25rem!important;
}

.fs-6 {
	font-size: 1rem!important;
}
	
/* Range Slider */
.noUi-connect {
	background: var(--primaryColor);
	box-shadow: none;
	border-radius: 20px;
}

.noUi-target {
	box-shadow: none;
	border: none;
	border-radius: 30px;
	background: #f0f0f0;
	margin-top: 70px;
}

.noUi-handle.noUi-handle-lower {
	border: 9px solid #fff;
	height: 40px;
	width: 40px;
	border-radius: 50%;
	top: -12px;
	cursor: pointer;
	box-shadow: 0 0 2px #bbb;
}

.noUi-handle.noUi-handle-lower:after {
	display: none;
}

.noUi-handle.noUi-handle-lower:before {
	height: 22px;
	width: 22px;
	border-radius: 50%;
	left: 0;
	top: 0;
	background: var(--primaryColor);
}

.noUi-horizontal .noUi-tooltip {
	bottom: 200%;
	border: 1px solid var(--primaryColor);
	color: var(--primaryColor);
}

.noUi-horizontal .noUi-tooltip:before {
	position: absolute;
	content: "";
	height: 10px;
	width: 10px;
	background: #fff;
	bottom: -10px;
	transform: rotate(45deg) translateX(-50%);
	left: 48%;
	border-bottom: 1px solid var(--primaryColor);
	border-right: 1px solid var(--primaryColor);
}

.noUi-horizontal .noUi-tooltip {
	width: 72px;
}

.range_op {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	margin-top: 10px;
}

.slider-container {
	width: 300px;
	padding: 50px;
}

/* Pro Boxes */
.probox-wrapper {
	width: 150px; /* Set the size of the progress bar */
	height: 150px;
	position: absolute; /* Enable clipping */
	clip: rect(0px, 150px, 150px, 75px); /* Hide half of the progress bar */
}
/* Set the sizes of the elements that make up the progress bar */
.probox-circle {
	width: 150px;
	height: 150px;
	border: 4px solid var(--primaryColor);
	border-radius: 50%;
	position: absolute;
	clip: rect(0px, 75px, 150px, 0px);
}

/* Using the data attributes for the animation selectors. */
/* Base settings for all animated elements */
div[data-anim~=base1] {
	-webkit-animation-iteration-count: 1;  /* Only run once */
	-webkit-animation-fill-mode: forwards; /* Hold the last keyframe */
	-webkit-animation-timing-function:linear; /* Linear animation */
}

.probox-wrapper[data-anim~=wrapper1] {
	-webkit-animation-duration: 0.01s; /* Complete keyframes asap */
	-webkit-animation-delay: 1s; /* Wait half of the animation */
	-webkit-animation-name: close-wrapper1; /* Keyframes name */
}

.probox-circle[data-anim~=left1] {
	-webkit-animation-duration: 2s; /* Full animation time */
	-webkit-animation-name: left1-spin;
}

.probox-circle[data-anim~=right1] {
	-webkit-animation-duration: 1s; /* Half animation time */
	-webkit-animation-name: right1-spin;
}

/* Rotate the right side of the progress bar from 0 to 180 degrees */
@-webkit-keyframes right1-spin {
	from {
		-webkit-transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(180deg);
	}
}

/* Rotate the left side of the progress bar from 0 to 360 degrees */
@-webkit-keyframes left1-spin {
	from {
		-webkit-transform: rotate(0deg);
	}
	
	to {
		-webkit-transform: rotate(360deg);
	}
}

/* Set the wrapper clip to auto, effectively removing the clip */
@-webkit-keyframes close-wrapper1 {
	to {
		clip: rect(auto, auto, auto, auto);
	}
}

div[data-anim~=base2] {
	-webkit-animation-delay: 2s;
	-webkit-animation-iteration-count: 1;  /* Only run once */
	-webkit-animation-fill-mode: forwards; /* Hold the last keyframe */
	-webkit-animation-timing-function:linear; /* Linear animation */
}

.probox-wrapper[data-anim~=wrapper2] {
	-webkit-animation-duration: 0.01s; /* Complete keyframes asap */
	-webkit-animation-delay: 3s; /* Wait half of the animation */
	-webkit-animation-name: close-wrapper2; /* Keyframes name */
}

.probox-circle[data-anim~=left2] {
	-webkit-animation-duration: 2s; /* Full animation time */
	-webkit-animation-name: left2-spin;
}

.probox-circle[data-anim~=right2] {
	-webkit-animation-duration: 1s; /* Half animation time */
	-webkit-animation-name: right2-spin;
}
/* Rotate the right side of the progress bar from 0 to 180 degrees */
@-webkit-keyframes right3-spin {
	from {
		-webkit-transform: rotate(0deg);
	}
	
	to {
		-webkit-transform: rotate(180deg);
	}
}

/* Rotate the left side of the progress bar from 0 to 360 degrees */
@-webkit-keyframes left3-spin {
	from {
		-webkit-transform: rotate(0deg);
	}
	
	to {
		-webkit-transform: rotate(360deg);
	}
}

/* Set the wrapper clip to auto, effectively removing the clip */
@-webkit-keyframes close-wrapper3 {
	to {
		clip: rect(auto, auto, auto, auto);
	}
}

div[data-anim~=base3] {
	-webkit-animation-delay: 4s;
	-webkit-animation-iteration-count: 1;  /* Only run once */
	-webkit-animation-fill-mode: forwards; /* Hold the last keyframe */
	-webkit-animation-timing-function:linear; /* Linear animation */
}

.probox-wrapper[data-anim~=wrapper3] {
	-webkit-animation-duration: 0.01s; /* Complete keyframes asap */
	-webkit-animation-delay: 5s; /* Wait half of the animation */
	-webkit-animation-name: close-wrapper3; /* Keyframes name */
}

.probox-circle[data-anim~=left3] {
	-webkit-animation-duration: 2s; /* Full animation time */
	-webkit-animation-name: left3-spin;
}

.probox-circle[data-anim~=right3] {
	-webkit-animation-duration: 1s; /* Half animation time */
	-webkit-animation-name: right3-spin;
}

/* Rotate the right side of the progress bar from 0 to 180 degrees */
@-webkit-keyframes right2-spin {
	from {
		-webkit-transform: rotate(0deg);
	}
	
	to {
		-webkit-transform: rotate(180deg);
	}
}

/* Rotate the left side of the progress bar from 0 to 360 degrees */
@-webkit-keyframes left2-spin {
	from {
		-webkit-transform: rotate(0deg);
	}
	
	to {
		-webkit-transform: rotate(360deg);
	}
}

/* Set the wrapper clip to auto, effectively removing the clip */
@-webkit-keyframes close-wrapper2 {
	to {
		clip: rect(auto, auto, auto, auto);
	}
}

.pro_boxes .pro1, .pro_boxes .pro2, .pro_boxes .pro3 {
	height: 150px;
	width: 150px;
	position: relative;
	background: rgba(192,192,192,0.5);
	border-radius: 50%;
	flex-shrink: 0;
	margin-right:15px;
}

.pro_boxes {
	display: flex;
	flex-direction: row;
	/*justify-content: space-between;*/
	justify-content: center;
	width: 100%;
	margin: 0 auto;
}

.pro_boxes .pro1 img, .pro_boxes .pro2 img, .pro_boxes .pro3 img {
	width: 60px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.pro_boxes .pro1 p, .pro_boxes .pro2 p, .pro_boxes .pro3 p {
	font-size: 16px;
	position: absolute;
	bottom: -40px;
	margin: 0;
	left: 50%;
	transform: translateX(-50%);
}

.pro-icon {
	top: 50%;
	left: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	font-size: 3.5em;
}

@media only screen and (max-width: 767px) {
	.pro_boxes{width: 100% !important;}
	.pro_boxes .pro1 img, .pro_boxes .pro2 img, .pro_boxes .pro3 img {width: 30px !important;}
	.pro_boxes .pro1, .pro_boxes .pro2, .pro_boxes .pro3 { height: 80px !important; width: 80px !important;}
	.probox-wrapper {height: 80px !important; width: 80px !important; clip: rect(0px, 80px, 80px, 40px);}
	.probox-circle {width: 80px !important; height: 80px !important; clip: rect(0px, 40px, 80px, 0px) !important;}
	.pro-icon { font-size: 2.0em !important; }
}

/* Bootstrap Customizing */
.container-fluid {
	padding-left: 0px;
	padding-right: 0px;
}

.carousel-indicators [data-bs-target] {
	background-color: #999999 !important;
}

.advantage-icon {
	font-size: 1.5em;
}

.mandatory {
	background-color: #FFEEEE;
}

/* Cookie Consent Customizing */
/*.cc-revoke.cc-bottom {
	left: 1em;
}*/

/*.cc-revoke.cc-bottom.cc-active {
	background-color: #FFFFFF;
    background-image: url(../img/icons8-cookie-96.png);
    background-repeat: no-repeat;
    background-size: 24px 24px;
    width: 30px;
    height: 30px;
    padding: 2px;
    background-position: 50% 50%;
}*/