@-webkit-keyframes open-background {
	to {
		left: -260px;
		bottom: -146px;
		box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3)
	}
}

@keyframes open-background {
	to {
		left: -260px;
		bottom: -146px;
		box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3)
	}
}

@-webkit-keyframes close-background {
	0% {
		left: -260px;
		bottom: -96px;
		box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3)
	}

	to {
		left: 0;
		bottom: 0;
		box-shadow: none
	}
}

@keyframes close-background {
	0% {
		left: -260px;
		bottom: -96px;
		box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3)
	}

	to {
		left: 0;
		bottom: 0;
		box-shadow: none
	}
}

@-webkit-keyframes show-menu {
	to {
		opacity: 1
	}
}

@keyframes show-menu {
	to {
		opacity: 1
	}
}

@-webkit-keyframes hide-menu {
	0% {
		opacity: 1
	}

	to {
		opacity: 0
	}
}

@keyframes hide-menu {
	0% {
		opacity: 1
	}

	to {
		opacity: 0
	}
}

body, html {
	margin: 0;
	overflow-x: hidden
}

a, article, body, caption, h1, h2, h3, p, section.agenda .timetable-frame .timetable .tracks .track .breakout h3 {
	color: rgba(0, 0, 0, .85)
}

body {
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	position: relative;
	background: #f9be3d !important;
}

footer, section {
	padding: 50px;
	text-align: center
}

@media only screen and (max-width:576px) {

	footer, section {
		padding: calc(12px*2) 12px
	}
}

a.button, h2 {
	display: inline-block
}

h2 {
	color: #fff;
	background: #f9be3d;
	padding: 16px 40px;
	font-weight: 500;
	font-size: 24px
}

@media only screen and (max-width:576px) {
	h2 {
		font-size: 20px
	}
}

a.button {
	text-align: center;
	text-decoration: none;
	border: 0;
	margin: 4px 0 0;
	padding: 8px 0;
	font-weight: 400;
	font-size: 15px;
	border-radius: 3px;
	outline: 0
}

footer .inner, header .inner {
	max-width: 1024px;
	margin: 0 auto;
	display: flex
}

body, header {
	background: #fff
}

header .inner {
	margin: calc(50px/2) auto;
	padding: 0 50px;
	position: relative
}

@media only screen and (max-width:576px) {
	header .inner {
		padding: 0
	}
}

@media all and (-ms-high-contrast:none),
(-ms-high-contrast:active) {
	header .inner>img {
		width: 200px
	}
}

header img {
	height: 90px;
	margin: 0 auto
}

@media only screen and (max-width:576px) {
	header img {
		margin: 0 calc(12px*2)
	}
}

header .nav {
	position: absolute;
	right: 30px;
	top: 0;
	bottom: 0;
	z-index: 500;
	display: flex;
	flex-direction: column;
	justify-content: center;
	-webkit-box-pack: center;
}

@media only screen and (max-width:576px) {
	header .nav {
		right: 0
	}
}

header .nav .nav-background {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 100;
	background: #f9be3d;
	box-shadow: none
}

header .nav .nav-background.close, header .nav .nav-background.open {
	-webkit-animation-name: open-background;
	animation-name: open-background;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards
}

@media only screen and (max-width: 576px) {
    header .nav .nav-background.open {
        height: 240px;
    }
}

@media only screen and (max-width:576px) {
	@-webkit-keyframes open-background {
		to {
			left: calc((100vw - (12px*2))*-1);
			top: calc(12px*-2);
			bottom: -72px;
			box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3)
		}
	}

	@keyframes open-background {
		to {
			left: calc((100vw - (12px*2))*-1);
			top: calc(12px*-2);
			bottom: -72px;
			box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3)
		}
	}
}

header .nav .nav-background.close {
	-webkit-animation-name: close-background;
	animation-name: close-background
}

@media only screen and (max-width:576px) {
	@-webkit-keyframes close-background {
		0% {
			left: calc((100vw - (12px*2))*-1);
			top: calc(-14px);
			bottom: -72px;
			box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3)
		}

		to {
			left: 0;
			bottom: 0;
			top: 0;
			box-shadow: none
		}
	}

	@keyframes close-background {
		0% {
			left: calc((100vw - (12px*2))*-1);
			top: calc(-14px);
			bottom: -72px;
			box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3)
		}

		to {
			left: 0;
			bottom: 0;
			top: 0;
			box-shadow: none
		}
	}
}

header .nav .menu-button {
	padding: 20px;
	background: 0 0;
	z-index: 200;
	cursor: pointer
}

header .nav .menu-button .icon {
	width: 24px;
	height: 24px;
	position: relative
}

header .nav .menu-button .icon span {
	transform: rotate(0);
	display: block;
	position: absolute;
	height: 2px;
	width: 18px;
	left: 3px;
	background: rgba(0, 0, 0, .85);
	transition: .5s ease-in-out
}

header .nav .menu-button .icon span:nth-child(1) {
	top: 6px
}

header .nav .menu-button .icon span:nth-child(2),
header .nav .menu-button .icon span:nth-child(3) {
	top: 11px
}

header .nav .menu-button .icon span:nth-child(4) {
	top: 16px
}

header .nav .menu-button .icon.open span:nth-child(1) {
	top: 18px;
	width: 0%;
	left: 50
}

header .nav .menu-button .icon.open span:nth-child(2) {
	transform: rotate(45deg)
}

header .nav .menu-button .icon.open span:nth-child(3) {
	transform: rotate(-45deg)
}

header .nav .menu-button .icon.open span:nth-child(4) {
	top: 18px;
	width: 0;
	left: 50%
}

header .nav nav {
	position: absolute;
	z-index: 200;
	top: 0;
	left: -260px;
	bottom: -200px;
	right: 50px;
	padding: 20px 0 18px 20px;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
}

@media only screen and (max-width:576px) {
	header .nav nav {
		left: calc((100vw - 64px)*-1);
		right: 64px;
		padding: 0 12px
	}
}

header .nav nav.close, header .nav nav.open {
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards
}

header .nav nav.open {
	-webkit-animation-name: show-menu;
	animation-name: show-menu;
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	-webkit-animation-delay: .65s;
	animation-delay: .65s;
	pointer-events: all
}

header .nav nav.close {
	-webkit-animation-name: hide-menu;
	animation-name: hide-menu;
	-webkit-animation-duration: .25s;
	animation-duration: .25s
}

header .nav nav a {
	background: #fff;
	color: #f9be3d;
	font-size: 15px;
	display: inline-block;
	text-decoration: none;
	padding: 2px 2px;
	margin-bottom: 7px
}

p.intro {
	max-width: 800px;
	font-size: 18px;
	font-weight: 400;
    line-height: 1.5em !important;
	margin: 0 auto
}

p.einleitung {
	font-size: 22px;
}

@media only screen and (max-width:576px) {
	p.intro {
		font-size: 14px
	}
}

@media only screen and (max-width:576px) {
    p.einleitung {
		font-size: 16px
	}
}

.grid {
	display: flex;
	flex-wrap: wrap;
	max-width: 825px;
	padding: calc((calc(50px/2)/2) - 10px) 0;
	margin: 0 auto
}

.grid .item {
	width: 250px;
	margin: calc(calc(50px/2)/2);
    margin-bottom: 40px;
	text-align: left;
	box-sizing: border-box
}

.grid .item img {
	display: block;
	margin: 0 auto 10px
}

.grid .item h3 {
	font-weight: 500;
	font-size: 1em;
	margin: 3px 0
}

.grid.person {
	margin-top: 25px;
	align-items: baseline;
	justify-content: center
}

.grid.person .item {
	text-align: center;
	padding: 0 0 10px
}

.grid.person .item img {
	width: 90px;
	border-radius: 45px
}

.grid.person .item p {
	margin: 0 0 3px;
	font-weight: 300
}

.grid.person .item a {
	color: #014463
}

section.hero {
	background: url(/assets/hero.jpg) center center;
	background-size: cover
}

section.hero .backdrop {
	position: absolute;
	background: linear-gradient(0deg, rgba(0, 0, 0, .8) 20%, transparent 100%);
	left: 0;
	right: 0;
	top: 0;
	bottom: 0
}

section.hero, section.hero h1, section.hero h2, section.testimonial .bubble-container {
	position: relative
}

section.hero h1 {
	font-size: 52px;
	font-weight: 600;
	color: #fff;
	max-width: 80%;
	margin: 150px auto 50px;
}

section.hero h2 {
	margin: 0 auto 150px;
    color: #fff;
}

@media only screen and (max-width:576px) {
	section.hero h1 {
		font-size: 24px;
		margin: 100px auto 0
	}

	section.hero h2 {
		font-size: 15px
	}
}

section.hero p {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	opacity: .5;
	color: #fff
}

section.hero p a {
    opacity: .5;
    color: #fff;
}

section.description p.intro {
	color: rgba(0, 0, 0, .85);
}

@media only screen and (max-width:576px) {
	section.hero p {
		font-size: 10px
	}
}

footer, section.description {
	background: #fff;
}

section.vortrag {
	background: #cdcdcd;
	padding: 0;
	margin-top: -2px
}

section.testimonial {
	background: #fff;
	padding: 0;
	margin-top: -2px
}

section.testimonial .bubble-container .bubble-backdrop {
	position: absolute;
	background: #fff;
	left: 0;
	right: 0;
	top: 0;
	bottom: calc(50% + 16px)
}

section.testimonial .bubble-container .bubble {
	position: relative;
	max-width: 640px;
	margin: 0 auto;
	background: #f9be3d;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3);
}

@media only screen and (max-width:576px) {
	section.testimonial .bubble-container .bubble {
		margin: 0 12px
	}
}

section.testimonial .bubble-container .bubble blockquote {
	padding: 0;
	margin: 0;
	font-size: 20px;
	font-weight: 300;
	color: #000;
}

@media only screen and (max-width:576px) {
	section.testimonial .bubble-container .bubble blockquote {
		font-size: 13px
	}
}

section.testimonial .bubble-container img {
	border-radius: 0;
	width: 20px;
	margin-bottom: 0;
	position: relative
}

section.testimonial img {
	width: 120px;
	border-radius: 60px;
	margin-bottom: 10px
}

section.testimonial p {
	margin: 0 auto;
	font-size: 15px;
	max-width: 250px
}

@media only screen and (max-width:576px) {
	section.testimonial p {
		font-size: 13px
	}
}

section.testimonial p.name {
	font-weight: 500
}

section.testimonial p.title {
	font-weight: 300
}

section.agenda, section.austausch {
	background: #fef1ce
}

section.agenda p.intro {
	max-width: 800px
}

section.agenda h3 {
	font-size: 1.5em;
	margin-top: 50px
}

section.agenda .timetable-frame {
	margin: 0 auto;
	overflow-x: auto;
	overflow-y: hidden;
	max-width: 930px
}

section.agenda .timetable-frame .timetable {
	position: relative;
	width: 924px
}

section.agenda .timetable-frame .timetable .timegrid .timeslot {
	display: flex;
	margin-bottom: 89px;
	height: 1px
}

section.agenda .timetable-frame .timetable .timegrid .timeslot span {
	padding: 0 10px;
	margin-top: -2px
}

section.agenda .timetable-frame .timetable .timegrid .timeslot hr {
	height: 1px;
	border: 0;
	background: rgba(0, 0, 0, .2);
	flex: 1
}

section.agenda .timetable-frame .timetable .timegrid .timeslot:last-of-type,
section.support .slider .slider-content .slide ol li:last-of-type {
	margin-bottom: 0
}

section.agenda .timetable-frame .timetable .tracks {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 52px;
	padding: 5px;
	box-sizing: border-box;
	display: flex
}

section.agenda .timetable-frame .timetable .tracks .track {
	margin: 1px 5px 0;
	flex: 1;
	position: relative
}

section.agenda .timetable-frame .timetable .tracks .track div {
	background: #014463;
	color: #fff;
	text-align: left;
	padding: 7px 10px;
	box-sizing: border-box;
	font-weight: 300
}

section.agenda .timetable-frame .timetable .tracks .track div h3 {
	font-weight: 500;
	font-size: 1.5em;
	color: #fff;
	margin: 5px 0
}

section.agenda .timetable-frame .timetable .tracks .track div a.button {
	width: 100%;
	background: #a86baa;
	color: #fff;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, .4)
}

section.agenda .timetable-frame .timetable .tracks .track div a.button.bottom {
	position: absolute;
	left: 10px;
	bottom: 10px;
	width: calc(100% - 20px)
}

section.agenda .timetable-frame .timetable .tracks .track .breakout {
	background: #abd087;
	color: rgba(0, 0, 0, .85)
}

section.agenda .timetable-frame:last-of-type {
	margin: 0 auto;
	padding-bottom: 0
}

section.check {
	background: #fff
}

section.check a.button {
	padding: 9px 36px;
	background: #014463;
	color: #fff;
	margin-top: 25px
}

section.speaker {
	background: #fff9d5
}

section.feedback {
	background: #abd087
}

section.partner .grid {
	align-items: stretch
}

section.partner .grid .item {
	display: flex;
	flex-direction: column
}

@media all and (-ms-high-contrast:none),
(-ms-high-contrast:active) {
	section.partner .grid .item {
		display: block;
		margin-bottom: 50px
	}
}

section.partner .grid .item p {
	flex: 1
}

section.partner .grid .item .image {
	height: 70px;
	margin: 20px 0 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box
}

section.partner .grid .item .image img {
	border-radius: 0;
	width: unset;
	max-width: calc(100% - 40px);
	max-height: 100%;
	margin: 0
}

@media all and (-ms-high-contrast:none),
(-ms-high-contrast:active) {
	section.partner .grid .item .image img {
		width: calc(100% - 40px)
	}

	section.partner .grid .item .image img.special {
		width: 50%
	}
}

section.partner .aktion {
	text-align: center
}

section.partner .aktion hr {
	max-width: 800px;
	height: 1px;
	border: 0;
	background: rgba(0, 0, 0, .1);
	margin: calc(50px/2) auto
}

section.partner .aktion p {
	opacity: .6
}

section.partner .aktion img {
	margin-top: calc(50px/2);
	width: 230px
}

section.support {
	background: #fff9d5
}

section.support h3 {
	color: #fff;
	background: #014463;
	display: inline-block;
	padding: 6px 10px;
	margin: 50px 0 0;
	font-weight: 500;
	font-size: 15px
}

section.support h3:last-of-type {
	margin-bottom: 25px
}

section.support h4 {
	color: #fff;
	background: #014463;
	display: inline-block;
	padding: 6px 10px;
	margin: 5px 0 0;
	font-weight: 500;
	font-size: 15px
}

@media only screen and (max-width:576px) {
	section.support .grid {
		display: block
	}
}

section.support .grid .item {
	background: rgba(1, 68, 99, .07);
	padding: 10px;
	font-weight: 300
}

@media only screen and (max-width:576px) {
	section.support .grid .item {
		margin: 12px 0;
		width: calc(100vw - (12px*2))
	}
}

section.support .grid .item h4 {
	margin: 0
}

section.support .grid .item ul {
	margin: 10px 0;
	padding: 0;
	list-style: none
}

section.support .grid .item ul li {
	position: relative;
	padding-left: 20px;
	padding-right: 10px;
	padding-bottom: 5px
}

section.support .grid .item ul li:before {
	content: '✓';
	position: absolute;
	left: 0
}

section.support .slider {
	display: flex;
	max-width: 828px;
	margin: 0 auto;
	align-items: center
}

section.support .slider button {
	border: 0;
	background: 0 0;
	height: 48px;
	width: 48px;
	margin: 25px;
	outline: 0;
	cursor: pointer
}

@media only screen and (max-width:576px) {
	section.support .slider button {
		margin: 0;
		padding: 0;
		width: 24px;
		height: 24px
	}
}

section.support .slider button img {
	transform: scale(3)
}

@media only screen and (max-width:576px) {
	section.support .slider button img {
		transform: scale(1)
	}
}

section.support .slider button:disabled img {
	opacity: .3
}

section.support .slider .slider-content {
	flex: 1;
	width: 632px;
	display: flex;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	-ms-scroll-snap-type: x mandatory;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth
}

@media only screen and (max-width:576px) {
	section.support .slider .slider-content {
		width: calc(100vw - 48px - (2*12px))
	}
}

section.support .slider .slider-content .slide {
	width: 632px;
	flex-shrink: 0;
	scroll-snap-align: start
}

@media only screen and (max-width:576px) {
	section.support .slider .slider-content .slide {
		width: calc(100vw - 48px - (2*12px))
	}
}

section.support .slider .slider-content .slide h4 {
	margin-bottom: 25px
}

@media only screen and (max-width:576px) {
	section.support .slider .slider-content .slide img {
		width: 100%
	}
}

section.support .slider .slider-content .slide .image {
	position: relative
}

section.support .slider .slider-content .slide .image img {
	z-index: 10
}

section.support .slider .slider-content .slide .image .overlay {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 20
}

@media only screen and (max-width:576px) {
	section.support .slider .slider-content .slide .image .overlay {
		display: none
	}
}

section.support .slider .slider-content .slide .image .overlay>div,
section.support .slider .slider-content .slide ol li::before {
	position: absolute;
	background: red;
	color: #fff;
	width: 18px;
	height: 18px;
	line-height: 18px;
	border-radius: 50%
}

section.support .slider .slider-content .slide p {
	margin: 10px 0
}

section.support .slider .slider-content .slide ol {
	display: flex;
	flex-wrap: wrap;
	margin: 10px 0;
	overflow: visible;
	padding: 0;
	counter-reset: steps;
	list-style: none;
	text-align: left
}

@media only screen and (max-width:576px) {
	section.support .slider .slider-content .slide ol {
		display: block
	}
}

section.support .slider .slider-content .slide ol li {
	flex: 1;
	counter-increment: steps;
	position: relative;
	padding-left: 25px;
	margin-right: 25px;
	margin-bottom: 25px
}

@media only screen and (max-width:576px) {
	section.support .slider .slider-content .slide ol li {
		padding-left: 0;
		margin-bottom: 10px
	}
}

section.support .slider .slider-content .slide ol li::before {
	content: counter(steps);
	text-align: center;
	border-radius: 10px;
	left: 0;
	top: 0;
	right: 0
}

@media only screen and (max-width:576px) {
	section.support .slider .slider-content .slide ol li::before {
		display: none
	}
}

section.support .subline {
	max-width: 640px;
	margin: 50px auto 0
}

footer .inner nav a,
footer .inner p {
	color: #fff;
	text-transform: uppercase
}

footer .inner p {
	margin: 0
}

footer .inner nav {
	flex: 1;
	text-align: right
}

footer .inner nav a {
	margin-left: 20px;
	text-decoration: none
}

footer .inner nav a:hover {
	text-decoration: underline
}

#overlay {
	background: #fff;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3);
	padding: 20px;
	width: 240px;
	position: absolute;
	display: none
}

#overlay p {
	margin: 0 40px 0 0
}

#overlay button {
	position: absolute;
	right: 15px;
	top: 15px;
	border: 0;
	background: 0 0;
	padding: 0;
	outline: 0;
	cursor: pointer
}

.button_email {
	box-shadow: 0px 0px 4px 0px #9fb4f2;
	background:linear-gradient(to bottom, #757170 5%, #757170 100%);
	background-color:#757170;
	border-radius:7px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:11px 27px;
	text-decoration:none;
	text-shadow:0px 1px 0px #283966;
	margin-top: 15px;
	margin-bottom: 15px;
}
.button_email:hover {
	background:linear-gradient(to bottom, #757170 5%, #757170 100%);
	background-color:#757170;
}
.button_email:active {
	position:relative;
	top:1px;
}