@charset "UTF-8";
/* CSS Document */
body, html, p, ul, li {
    height: 100%;
	-ms-hyphens: auto; /* ab IE10 */
  -moz-hyphens: auto; /* seit Firefox 6 */
  -webkit-hyphens: auto; /* seit Safari 5.1 (OS X), Safari 4.1 (iOS) */
  hyphens: auto;
}

/* Container for flexboxes */
.row {
  display: -webkit-flex;
  display: flex;

}

/* Create three equal columns that sits next to each other */
.column1 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 6px;
  height: 0 auto;
  background-color: #a8b8b6;
}

.column2 {
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;
  padding: 6px;
  height: 0 auto; 
  background-color: orange;
}

.column3 {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  padding: 6px;
  margin: 0vw;
  height: 0 auto; 
  background-color: yellow;
}
.column4 {
  -webkit-flex: 4;
  -ms-flex: 4;
  flex: 4;
  padding: 6px;
  margin: 0vw;
  height: 0 auto; 
  background-color: slateblue;
}
.column5 {
  -webkit-flex: 5;
  -ms-flex: 5;
  flex: 5;
  padding: 6px;
  margin: 0vw;
  height: 0 auto; 
  background-color: green;
}
.column6 {
  -webkit-flex: 6;
  -ms-flex: 6;
  flex: 6;
  padding: 6px;
  margin: 0vw;
  height: 0 auto; 
  background-color: blue;
}
.column7 {
  -webkit-flex: 7;
  -ms-flex: 7;
  flex: 7;
  padding: 6px;
  height: 0 auto; 
  background-color: red;
}

.column8 {
  -webkit-flex: 8;
  -ms-flex: 8;
  flex: 8;
  padding: 6px;
  height: 0 auto; 
  background-color: sandybrown;
}

.column9 {
  -webkit-flex: 9;
  -ms-flex: 9;
  flex: 9;
  padding: 6px;
  margin: 0vw;
  height: 0 auto; 
  background-color: salmon;
}
.column10 {
  -webkit-flex: 10;
  -ms-flex: 10;
  flex: 10;
  padding: 6px;
  margin: 0vw;
  height: 0 auto; 
  background-color: sienna;
}
.column11 {
  -webkit-flex: 11;
  -ms-flex: 11;
  flex: 11;
  padding:0vw;
  margin: 6px;
  height: 0 auto; 
  background-color: skyblue;
}
.column12 {
  -webkit-flex: 12;
  -ms-flex: 12;
  flex: 12;
  padding: 6px;
  margin: 0vw;
  height: 0 auto; 
  background-color: springgreen;
}

.keineTrennung{
    -ms-hyphens: none; /* ab IE10 */
  -moz-hyphens: none; /* seit Firefox 6 */
  -webkit-hyphens: none; /* seit Safari 5.1 (OS X), Safari 4.1 (iOS) */
  hyphens: none;
}


section {
    background: #2F2D2D;
}

ul {
	text-align:center;
}
ul li {
	display:inline-block;
}
ul li a {
	display:inline-block;
	padding:1em 3em;
	text-decoration:none;
	border-bottom:0px solid #fff;
	transition-property:all .2s linear 0s;
	-moz-transition:all .2s linear 0s;
	-webkit-transition:all .2s linear 0s;
	-o-transition:all .2s linear 0s;
	font-size:16px;
}
ul li a:hover {
    text-decoration: none;    
}


p {
   color: #FFF;
   text-align: justify;
  font-family: din-2014, sans-serif;    
  font-style: normal;
    font-size: 1.1em;
  font-weight: 100;
    }

.Dintitel {
  color: #FFF;
  font-family: din-2014, sans-serif;    
  font-style: normal;
  font-weight: 400;
  letter-spacing:0.051em;
  text-transform: uppercase;
    font-size: 1.4em;
    line-height: 1.3em;
    }
.Dintext {
  color: #FFF;
  font-family: din-2014, sans-serif;    
  font-style: normal;
  font-weight: 400;
  letter-spacing:;
  text-transform: none;
    font-size: 1.3em;
    line-height: 1.6em;
    }


.DinUntertitel {
    color: #FFF;
    text-align: left;
  font-family: din-2014, sans-serif;    
  font-style: normal;
    font-style: oblique;
    font-size: 1.3em;
    line-height: 1.3em;
  font-weight: 300;
    }
.DinFarbeGelb {
    color: rgba(0, 0, 0, 0.63);
    background-color: rgba(238, 228, 160, 0.93);
    text-align: left;
  font-family: din-2014, sans-serif;    
  font-style: normal;
    font-style: italic;
    font-size: 1.3em;
    line-height: 2.5em;
  font-weight: 500;
    padding: 1px 8px 1px 6px;
    border-radius: 2px;
    }
.DinFarbeGruen {
    color: rgba(0, 0, 0, 0.63);
    background-color: rgba(138, 235, 111, 0.73);
    text-align: left;
  font-family: din-2014, sans-serif;    
  font-style: normal;
    font-style: italic;
    font-size: 1.3em;
    line-height: 2.5em;
  font-weight: 500;
    padding: 1px 8px 1px 6px;
    border-radius: 2px;
    }

.Din {
    color: #FFF;
    text-align: justify;
  font-family: din-2014, sans-serif;    
  font-style: normal;
    font-size: 1.1em;
    line-height: 1.3em;
  font-weight: 100;
    }

.Einzug {
    padding-left: 15px;
}

nav {
	width:100%;
	position:fixed;
	top: 0;
	height: auto;
    padding: 10px 10px 0px 10px;
	background-color: #2F2D2D;
	overflow:hidden;
	z-index:90;
    color: #FFF;
}

nav ul {
	text-align:center;
}
nav ul li {
	display:inline-block;
}
nav ul li a {
	display:inline-block;
	padding:1em 3em;
	text-decoration:none;
	border-bottom:0px solid #fff;
	transition-property:all .2s linear 0s;
	-moz-transition:all .2s linear 0s;
	-webkit-transition:all .2s linear 0s;
	-o-transition:all .2s linear 0s;
	font-size:16px;
}
nav ul li a:hover {
    text-decoration: none;    
}
/*styling open close button*/
.button {
	display:inline;
	position:absolute;
    background-color: transparent;
	right:3em;
	top:18px;
    border: px yellow;
    border-radius: 5px;
    padding: 2px 6px 3px 6px;
    
}
.button a {
    color: yellow;
	text-decoration:none;
}
.btn-open:after {
	text-decoration: none;
	content:"";
}
.btn-open:hover {
	color:#FFF;
	text-decoration: none;
    cursor: pointer;
}
.btn-open:hover:after {
	text-decoration: none;
}

.btn-close:after {
    color: #FFF;
	text-decoration: none;
	content:"";
}
.btn-close:hover:after {
	text-decoration: none;
}
/*overlay*/
.overlay {
	display:none;
	position:fixed;
	top:0;
	height:100%;
	width:100%;
	background: #2F2D2D;
	opacity: 1;
	overflow:auto;
	z-index:99;
}
.wrap {
	text-align: right;
	max-width: 90%;
	margin:0 auto;
}
.wrap ul.wrap-nav {
	text-transform:none;
    text-align: right;
	background-color: #2F2D2D;
	padding:50px 0px 100px;
}
.wrap ul.wrap-nav li {
	display:inline-block;
	vertical-align:top;
    text-align: right;
	width:100%;
	position:relative;
}
.wrap ul.wrap-nav li a {
	color: #FFF;
	display:block;
	padding:8px 0;
	border:0px solid #575757;
	margin: 10px;
	text-decoration:none;
    text-align: right;
	transition-property:all .2s linear 0s;
	-moz-transition:all .2s linear 0s;
	-webkit-transition:all .2s linear 0s;
	-o-transition:all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
	color: #FFF;
}
.wrap ul.wrap-nav ul {
	padding:20px 0;
}
.wrap ul.wrap-nav ul li {
	display:block;
	font-size:10px;
	width:100%;
	color: #FFF;
}
.wrap ul.wrap-nav ul li a {
	color:#DDD6D6;
}
.wrap ul.wrap-nav ul li a:hover {
	color: #FFF;
}
.social {
	font-size:25px;
	padding:20px;
}

@media screen and (max-width:48em) {
	.wrap ul.wrap-nav>li {
		width:100%;
        line-height: 10%;
	}
	.wrap ul.wrap-nav {
		padding:30px 0px 0px;
	}
	nav ul {
		opacity:0;
		visibility:hidden;
	}

}

.vticker{
    background-color: #FFF;
	border: 1px solid white;
    border-radius: 5px;
	width: 420px;
	max-height: 590px;
}
.vticker ul{
	padding: 0;
}
.vticker li{
	list-style: none;
	border-bottom: 0px;
	padding: 0px;
}
.et-run{
	background: red;
}

.vtickermanual{
	position:absolute;
	margin:0 auto;
	border: 0px solid;
	width: 900px;
	height:auto;
	text-align:center;
}

.vtickereinzel{
    background-color: #FFF;
	border: 1px solid white;
    border-radius: 5px;
	width: 680px;
	max-height: 500px;
}
.vtickereinzel ul{
	padding: 0;
}
.vtickereinzel li{
	list-style: none;
	border-bottom: 0px;
	padding: 10px;
}
.et-run{
	background: red;
}

.vtickermanual{
	position:absolute;
	margin:0 auto;
	border: 0px solid;
	width: 900px;
	height:auto;
	text-align:center;
}
/*start stop*/

.btnstartstop {
	width: 28%;
	height:65px;
	background-color: #CC6;
	border-radius:5px;
	border:2px solid;
	display: inherit;
	cursor: auto;
	color:black;
	font-family: josefin-sans;
	font-size:2.1em;
    font-weight: 600;
    letter-spacing: .2em;
	padding: 9px 0px 0px 0px;
	text-decoration: none;
	text-align:center;
;}
.btnstartstop:hover {
    cursor: pointer;
}

	/*vor*/
.btnvor {
    margin-left: 17px;
	width: 28%;
	height:65px;
	background-color: #18AD51;
	border-radius:5px;
	border:2px solid;
	display: inherit;
	cursor: auto;
	color:black;
	font-family: josefin-sans;
	font-size: 2.3em;
    font-weight: 600;
    letter-spacing: .3em;
	padding: 0px 0px 0px 0px;
	text-decoration: none;
    text-transform: uppercase;
	text-align:center;
}
.btnvor:hover {
    cursor: pointer;
}

/*zurück*/

.btnzurueck {
    margin-right: 17px;
	width: 28%;
	height:65px;
	background-color: #C51717;
	border-radius:5px;
	border:2px solid;
	display: inherit;
	cursor: auto;
	color:black;
	font-family: josefin-sans;
	font-size: 2.3em;
    font-weight: 600;
    letter-spacing: .3em;
	padding: 0px 0px 0px 0px;
	text-decoration: none;
    text-transform: uppercase;
	text-align:center;
}

.btnzurueck:hover {
    cursor: pointer;
}


	/*vor halb*/
.btnvorhalb {
    margin-left: 14px;
	width: 40%;
	height:65px;
	background-color: #18AD51;
	border-radius:5px;
	border:2px solid;
	display: inherit;
	cursor: auto;
	color:black;
	font-family: josefin-sans;
	font-size: 2.3em;
    font-weight: 600;
    letter-spacing: .3em;
	padding: 0px 0px 0px 0px;
	text-decoration: none;
    text-transform: uppercase;
	text-align:center;
}
.btnvorhalb:hover {
    cursor: pointer;
}

/*zurück halb*/

.btnzurueckhalb {
    margin-right: 14px;
	width: 40%;
	height:65px;
	background-color: #C51717;
	border-radius:5px;
	border:2px solid;
	display: inherit;
	cursor: auto;
	color:black;
	font-family: josefin-sans;
	font-size: 2.3em;
    font-weight: 600;
    letter-spacing: .3em;
	padding: 0px 0px 0px 0px;
	text-decoration: none;
    text-transform: uppercase;
	text-align:center;
}

.btnzurueckhalb:hover {
    cursor: pointer;
}






	



.footer {
    position: relative;
    height: 30px;
    background: transparent;
    bottom: 0;
    padding: 20px 30px 30px 0px;
	width:90%;
	color:#FFF;
    opacity: 0.6;
	font-size: 1em;
	text-align:center;
	margin:0 auto;
    text-decoration: none;
}