/* https://codepen.io/brady_wright/pen/NNOvrW */

html, body {
margin: 0;
height: 100vh;
/*background: linear-gradient(252deg, rgba(69, 69, 69, 0.03) 0%, rgba(69, 69, 69, 0.03) 50%,rgba(47, 47, 47, 0.03) 50%, rgba(47, 47, 47, 0.03) 100%),linear-gradient(335deg, rgba(66, 66, 66, 0.09) 0%, rgba(66, 66, 66, 0.09) 50%,rgba(188, 188, 188, 0.09) 50%, rgba(188, 188, 188, 0.09) 100%),linear-gradient(223deg, rgba(194, 194, 194, 0.08) 0%, rgba(194, 194, 194, 0.08) 50%,rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.08) 100%),linear-gradient(82deg, rgba(27, 27, 27, 0.01) 0%, rgba(27, 27, 27, 0.01) 50%,rgba(197, 197, 197, 0.01) 50%, rgba(197, 197, 197, 0.01) 100%),linear-gradient(281deg, rgba(3, 3, 3, 0.09) 0%, rgba(3, 3, 3, 0.09) 50%,rgba(198, 198, 198, 0.09) 50%, rgba(198, 198, 198, 0.09) 100%),linear-gradient(319deg, rgba(47, 47, 47, 0.01) 0%, rgba(47, 47, 47, 0.01) 50%,rgba(89, 89, 89, 0.01) 50%, rgba(89, 89, 89, 0.01) 100%),linear-gradient(278deg, rgba(243, 243, 243, 0.06) 0%, rgba(243, 243, 243, 0.06) 50%,rgba(63, 63, 63, 0.06) 50%, rgba(63, 63, 63, 0.06) 100%),linear-gradient(38deg, rgba(81, 81, 81, 0.09) 0%, rgba(81, 81, 81, 0.09) 50%,rgba(201, 201, 201, 0.09) 50%, rgba(201, 201, 201, 0.09) 100%),linear-gradient(33deg, rgba(168, 168, 168, 0.08) 0%, rgba(168, 168, 168, 0.08) 50%,rgba(129, 129, 129, 0.08) 50%, rgba(129, 129, 129, 0.08) 100%),linear-gradient(0deg, #1b9efe,#46f3e7);*/

background: linear-gradient(252deg, rgba(69, 69, 69, 0.03) 0%, rgba(69, 69, 69, 0.03) 50%,rgba(47, 47, 47, 0.03) 50%, rgba(47, 47, 47, 0.03) 100%),linear-gradient(335deg, rgba(66, 66, 66, 0.09) 0%, rgba(66, 66, 66, 0.09) 50%,rgba(188, 188, 188, 0.09) 50%, rgba(188, 188, 188, 0.09) 100%),linear-gradient(223deg, rgba(194, 194, 194, 0.08) 0%, rgba(194, 194, 194, 0.08) 50%,rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.08) 100%),linear-gradient(82deg, rgba(27, 27, 27, 0.01) 0%, rgba(27, 27, 27, 0.01) 50%,rgba(197, 197, 197, 0.01) 50%, rgba(197, 197, 197, 0.01) 100%),linear-gradient(281deg, rgba(3, 3, 3, 0.09) 0%, rgba(3, 3, 3, 0.09) 50%,rgba(198, 198, 198, 0.09) 50%, rgba(198, 198, 198, 0.09) 100%),linear-gradient(319deg, rgba(47, 47, 47, 0.01) 0%, rgba(47, 47, 47, 0.01) 50%,rgba(89, 89, 89, 0.01) 50%, rgba(89, 89, 89, 0.01) 100%),linear-gradient(278deg, rgba(243, 243, 243, 0.06) 0%, rgba(243, 243, 243, 0.06) 50%,rgba(63, 63, 63, 0.06) 50%, rgba(63, 63, 63, 0.06) 100%),linear-gradient(38deg, rgba(81, 81, 81, 0.09) 0%, rgba(81, 81, 81, 0.09) 50%,rgba(201, 201, 201, 0.09) 50%, rgba(201, 201, 201, 0.09) 100%),linear-gradient(33deg, rgba(168, 168, 168, 0.08) 0%, rgba(168, 168, 168, 0.08) 50%,rgba(129, 129, 129, 0.08) 50%, rgba(129, 129, 129, 0.08) 100%),linear-gradient(0deg, #1b9efe,#46f3e7);


background-attachment: fixed;
-webkit-transition: 0.3s;
transition: 0.3s;
}

body {
padding-top: 370px;
}

html {
scroll-behavior: smooth;
}

*:focus {
outline: 0;
}

h1, h2, h3, h4, h5, h6 {
color: #3D4351;
margin-top: 0;
}

/*
h3 {
font-size: 1.6em !important;
line-height: 100% !important;
}
*/

/*
a:link {
color: #fff;
transition: 0.3s;
}

a:hover {
color: #ff9a9a;
text-decoration: none;
transition: 0.3s;
}
*/

.content-wrap {
width: 100%;
}

#wrap {
width: 100%;
position: fixed;
top: 0;
z-index: 60;
transition: 0.4s;
}

.header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #3D4351;
color: #fff;
font-weight: 300;
padding: 20px 0;
text-align: center;
font-size: 2.2em;
width: 100%;
transition: all 0.3s ease;
letter-spacing: 1px;
}

.header-shrink {
padding: 10px;
font-size: 1.4em;
transition: 0.4s;
}

.nav-wrap {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
background-color: #333;
transition: 0.3s;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.6);
overflow: hidden;
/*opacity: 0.8;*/
}

.nav {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 70%;
/*max-width: 80%;*/
color: #333;
font-size: 1.4em;
padding: 30px 0px !important;
/*border: 1px solid #fff;*/
}



.nav .icon {
display: none;
}

.nav-shrink {
transition: 0.3s;
width: 100%;
font-size: 1.1em;
padding: 10px 0em;
}


.flex-item {
border: 2px solid #ddd;
border-radius: .5em 0 .5em 0;
padding: .4em .0em;
margin: .4em;
background: hsl(22, 95%, 53%);
transition: 0.3s;
outline: none;
position: relative;
top: 0px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.6);
}


.flex-item:hover {
/*border: 2px solid #ff0;*/
background: hsl(22, 95%, 73%);
border-radius: 0 .5em 0 .5em;
transition: 0.2s;
cursor: pointer;
/*top: -3px;*/
}

.active {
background: hsl(22, 95%, 73%);
border-radius: 0 .5em 0 .5em;
}


.nav a:link {
color: #fff;
padding: .5em .6em;
margin: 0;
text-decoration: none;
/*border: 1px solid #fff;*/
}

.nav a:link:hover {
color: #fff;
}

.sticky-wrap {
position: fixed;
top: 0px;
}


/*
.sticky + .container-fluid {
padding-top: 160px;
}
*/


.container-fluid .row {
padding: 0 0 4em 0;
}


.title {
text-align: center;
padding: 3em 0;
border-bottom: 1px solid #E4EAEC;
/*position: sticky !important;*/
top: 0 !important;
background-color: #e6e6e6;
z-index: 10;
}

.title p {
margin: 0 auto;

}

.einleitung {
padding: 25px;
background: #eee;
border-radius: 0.3em;
font-size: 1.2em;
line-height: 130%;
}



/*==================================
TIMELINE
==================================*/
/*-- GENERAL STYLES
------------------------------*/

.timeline {
line-height: 1.4em;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}

.timeline h1, .timeline h2, .timeline h3, .timeline h4, .timeline h5, .timeline h6 {
line-height: inherit;
}

.timeline h3 {
line-height: 110% !important;
}


/*----- TIMELINE ITEM -----*/
.timeline-item {
padding-left: 40px;
position: relative;
/*
opacity: 0.3;
transition: opacity .3s ease-in-out;
transition: 0.3s;
*/
}

.timeline-item:not(.period) {
padding-top: 10px !important;
}

.visible {
opacity: 1;
}


.timeline-item:last-child {
padding-bottom: 0;
}

/*----- TIMELINE INFO -----*/
.timeline-info {
font-size: 16px;
font-weight: 700;
letter-spacing: 3px;
margin: 0 0 .5em 0;
text-transform: uppercase;
white-space: nowrap;
}

/*----- TIMELINE MARKER -----*/
.timeline-marker {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 15px;
}

.timeline-marker:before {
background: transparent;
/*border: 3px solid #FF6B6B;*/
border: 3px solid #ff0;
border-radius: 100%;
content: "";
display: block;
height: 15px;
position: absolute;
top: 15px;
left: 0;
width: 15px;
transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
}

.timeline-marker:after {
content: "";
width: 2px;
background: #CCD5DB;
display: block;
position: absolute;
top: 38px;
bottom: 0;
left: 7px;
}

.timeline-item:last-child .timeline-marker:after {

}

.timeline-item:first-of-type .timeline-marker:before {
border: none !important;
}

.timeline-item:not(.period):hover .timeline-marker:before {
background: #ff0;
/*background: #FF6B6B;*/
/*background: #ffff66;*/
border: 3px solid transparent;
}

/*
.timeline-item:not(.period):before,
.timeline-item:not(.period):after {
  content: '';
  height: 14px;
  width: 14px;
  position: absolute;
  transition: all .35s ease;
  opacity: 0;
}

.timeline-item:not(.period):before {
  content: '';
  right: 0;
  top: 0;
  border-top: 3px solid #3E8914;
  border-right: 3px solid #2E640F;
  transform: translate(-100%, 50%);
}

.timeline-item:not(.period):after {
  content: '';
  left: 0;
  bottom: 0;
  border-bottom: 3px solid #2E640F;
  border-left: 3px solid #3E8914;
  transform: translate(100%, -50%)
}

.timeline-item:not(.period):hover:before,
.timeline-item:not(.period):hover:after{
  transform: translate(0,0);
  opacity: 1;
}

.timeline-item:not(.period):hover {
  color: #3DA35D;
}
*/


.timeline-item:not(.period):hover  {
/*
border-left: 5px solid #3E8914;
border-right: 5px solid #3E8914;
background: #f9f9f9;
*/

/*
background: #FF6B6B;
color: #fff;
*/
}


/*----- TIMELINE CONTENT -----*/
.timeline-content {
padding-bottom: 40px;
}

.timeline-content p:last-child {
margin-bottom: 0;
}

/*----- TIMELINE PERIOD -----*/
.period {
padding: 0;
}

.period .timeline-info {
display: none;
}

.period .timeline-marker:before {
background: transparent;
content: "";
width: 15px;
height: auto;
border: none;
border-radius: 0;
top: 0;
bottom: 30px;
position: absolute;
border-top: 2px solid #CCD5DB;
border-bottom: 2px solid #CCD5DB;
}

.period .timeline-marker:after {
content: "";
height: 32px;
top: auto;
}

.period .timeline-content {
padding: 40px 0 70px;
}

.period .timeline-title {
margin: 0 auto;
border-bottom: none;
padding: 20px 0;
border-radius: 4px;
text-align: center;
font-size: 2.0em;
background-color: hsl(0, 0%, 30%);
color: #ff0;
width: 100%;
}

.timeline-title a {
font-size: 90%;
color: #fff;
transition: 0.3s;
}

.timeline-title a:hover {
color: #ff0;
transition: 0.3s;
text-decoration: none;
}



@media (max-width: 768px) {
	body {
	padding-top: 400px;
	}
	
	.header {
	font-size: 1.4em;
	}
}





/*----------------------------------------------
MOD: TIMELINE SPLIT
----------------------------------------------*/
@media (min-width: 768px) {


.timeline-split .timeline, .timeline-centered .timeline {
display: table;
}

h3 {
font-size: 1.6em !important;
line-height: 100% !important;
margin-top: 6px !important;
}

.timeline-split .timeline-item, .timeline-centered .timeline-item {
display: table-row;
padding: 0;
margin: 0;
}

.timeline-split .timeline-info, .timeline-centered .timeline-info,
.timeline-split .timeline-marker,
.timeline-centered .timeline-marker,
.timeline-split .timeline-content,
.timeline-centered .timeline-content,
.timeline-split .period .timeline-info,
.timeline-centered .period .timeline-info {
display: table-cell;
/*vertical-align: top;*/
}

.timeline-split .timeline-marker, .timeline-centered .timeline-marker {
position: relative;
}

.timeline-split .timeline-content, .timeline-centered .timeline-content {
padding-left: 30px;
}

.timeline-split .timeline-info, .timeline-centered .timeline-info {
padding-right: 30px;

}

.timeline-split .period .timeline-title, .timeline-centered .period .timeline-title {
position: relative;
left: -45px;
}
}

/*----------------------------------------------
MOD: TIMELINE CENTERED
----------------------------------------------*/
@media (min-width: 992px) {

.timeline-centered,
.timeline-centered .timeline-item,
.timeline-centered .timeline-info,
.timeline-centered .timeline-marker,
.timeline-centered .timeline-content {
display: block;
margin: 0;
padding: 0;
}

h3 {
font-size: 1.6em !important;
line-height: 100% !important;
margin-top: -5px !important;
}

.timeline-centered .timeline-item {
padding-bottom: 40px;
overflow: hidden;
}

.timeline-centered .timeline-marker {
position: absolute;
left: 50%;
margin-left: -7.5px;
}
.timeline-centered .timeline-info,
.timeline-centered .timeline-content {
width: 50%;
}

.timeline-centered > .timeline-item:nth-child(odd) .timeline-info {
float: left;
text-align: right;
padding-right: 30px;
}

.timeline-centered > .timeline-item:nth-child(odd) .timeline-content {
float: right;
text-align: left;
padding-left: 30px;
}

.timeline-centered > .timeline-item:nth-child(even) .timeline-info {
float: right;
text-align: left;
padding-left: 30px;
}

.timeline-centered > .timeline-item:nth-child(even) .timeline-content {
float: left;
text-align: right;
padding-right: 30px;
}

.timeline-centered > .timeline-item.period .timeline-content {
float: none;
padding: 0;
width: 100%;
text-align: center;
}

.timeline-centered .timeline-item.period {
padding: 50px 0 90px;
}

.timeline-centered .period .timeline-marker:after {
height: 30px;
bottom: 0;
top: auto;
}

.timeline-centered .period .timeline-title {
left: auto;
}
}

/*----------------------------------------------
MOD: MARKER OUTLINE
----------------------------------------------*/
.marker-outline .timeline-marker:before {
background: transparent;
border-color: #FF6B6B;
}

.marker-outline .timeline-item:hover .timeline-marker:before {
background: #FF6B6B;
}


@media screen and (max-width: 750px) {	
	body {
	padding-top: 270px;
	}	
	
	.nav {
	padding: 20px 0px !important;
	font-size: 1.0em;
	}	
	
	.nav .flex-item {
	display: none;
	}
	
	.nav. a:link {
	padding: .2em .3em;
	}
	
	.nav .icon {
	display: flex;
	color: #fff;
	width: 100%;
	justify-content: center;
	align-items: flex-end;
	}
	
	.nav .icon:hover {
	color: #ff0;
	cursor: pointer;
	}	
}

@media screen and (max-width: 750px) {
	.responsive {
	position: relative;
	transition: 0.2s;
	}
	
	.responsive .icon {
	display: flex;
	margin-top: 20px;
	}
	
	.responsive .flex-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: 0.2s;
	padding: .3em .0em;
	margin: .5em;		
	}
}

/*************************************************
	Footer
**************************************************/

/*
https://chrisbracco.com/css-sticky-footer-effect/
*/

.footer {
font: normal 1em/150% "Roboto Slab", arial, sans-serif;		
background: #3D4351;
color: #fff;
border-top: 3px solid #454140;
display: flex;
flex-flow: row;
justify-content: space-between;
margin: 50px 0 0 0;
padding: 2rem;
}

.footer * {
/*border: 1px solid #fff;*/
text-align: center;
padding: 8px;
}

.footer a {
color: #ff0;
padding: 0;
transition: 0.3s;
}

.footer a:hover {
color: #fff;
padding: 0;
}

.footer span {
padding-bottom: 10px;
width: 50%;
}