/* Version: 05.03.2018 */

@font-face {
	font-family: "Open Sans";
	src: url(../../ofl/opensans/OpenSans[wdth,wght].woff2) format('woff2');
	font-weight: 300, 400, 500, 600, 700, 800;
	font-style: normal;
}

@font-face {
	font-family: "Open Sans";
	src: url(../../ofl/opensans/OpenSans-Italic[wdth,wght].woff2) format('woff2');
	font-weight: 300, 400, 500, 600, 700, 800;
	font-style: italic;
}


/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
 html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
    font-family: 'Open Sans', sans-serif;  font-size: 100%;
  color: #333;
  text-decoration: none;
  font-weight: normal;
  word-spacing: normal;
  line-height: 1.5;
  background-color: #f1f1f1;
  /*	Hintergrundbilder werden in Chrome mit ausgedruckt	*/
  -webkit-print-color-adjust:exact;
}

p {
  margin: 0;
}

h1 {
  line-height: 1.5;
  font-size: 1.4rem;
  font-weight: 700;
padding: 3.5% 3.5% 0 3.5%;
  margin: 0;
color: #dc002e;}



h2 {
 /* Eigenschaften für zweiten Untertitel nach Bedarf eintragen */
}

h3 {
  line-height: 1.3;
  font-size: 1.3em;
  font-weight: 700;
  padding: 0;
  margin: 0;
  color: #dc002e;
}

.frame-outer {
  position: relative;
  padding: 0;
  width: 720px;
  margin: 1.3rem auto;
  background-color: #FFF;
  border: 0.02rem solid #A7A9A4;
  box-shadow: -0.1rem 0.1rem 1rem #999;
  font-size: 0.75rem;
	background-color: #6B7680;
}

.frame-outer::after {
  content: "";
  display: block;
  clear: both;
}

.logo {
  padding: 1% 3%;
}



.content
 {
  margin: 3%;
  padding: 3.5%;
  background-color: #fff;
}

.content::after {
  content: "";
  display: block;
  clear: both;
}

.box-left {
float: left;
width: 14%;
padding: 1rem 0 0 0;
}

.box-right {
float: right;
width: 82%;
padding: 1rem 0 0 0;
}

.footer {
  padding: 3% 6.5%;
  background: -moz-linear-gradient(45deg, rgba(0,104,152,1) 0%, rgba(0,122,179,1) 100%); /* ff3.6+ */
  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(0,104,152,1)), color-stop(100%, rgba(0,122,179,1))); /* safari4+,chrome */
  background: -webkit-linear-gradient(45deg, rgba(0,104,152,1) 0%, rgba(0,122,179,1) 100%); /* safari5.1+,chrome10+ */
  background: -o-linear-gradient(45deg, rgba(0,104,152,1) 0%, rgba(0,122,179,1) 100%); /* opera 11.10+ */
  background: -ms-linear-gradient(45deg, rgba(0,104,152,1) 0%, rgba(0,122,179,1) 100%); /* ie10+ */
  background: linear-gradient(45deg, rgba(0,104,152,1) 0%, rgba(0,122,179,1) 100%); /* w3c */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007AB3', endColorstr='#006898',GradientType=1 ); /* ie6-9 */ 
  color: #fff;
}

.footer h3 {
  color: #fff;
}

.footer::after {
  content: "";
  display: block;
  clear: both;
}

img {
  max-width: 100%;
  height: auto;
  width: auto9;
  border: 0;
  vertical-align: middle;
}

a:link {
  color: #000;
  text-decoration: none;
}

a:visited {
  text-decoration: none;
  color: #000;
}

a:hover {
  text-decoration: underline;
  color: #000;
}

a:active {
  text-decoration: none;
  color: #000;
}

ul {
  margin: 0 auto 0rem 0.5rem;
  padding-left: 0.5rem;
  list-style-type: disc;
}

li {
  position: relative;
  margin: auto;
  padding: 0;
}


.clear {
  clear: both;
  font-size: 0;
  line-height: 0;
}

.hide {
  display: none;
}

.refnr {}

.apply {}

.justifier {
  text-align: justify;
}

.justifier:after {
  content: "";
  display: inline-block;
  width: 100%;
}

p:empty {
  height: 1rem;
}

.button_box {
  text-align: center;
}

.button_box::after {
  clear: both;
  content: "";
  display: block;
}

.button a {
  display: inline-block;
  background: transparent;
  padding: 0.6rem 2.8rem 0.6rem 2.8rem;
  margin: 2rem auto;
  cursor: pointer;
border: 2px solid #CE233C;
	transition: all 140ms ease 0s;
  -moz-transition: all 140ms ease 0s;
  -webkit-transition: all 140ms ease 0s;
  color: #fff;
	background-color: #CE233C;
	    text-transform: uppercase;
    font-weight: 700;
}
}

.button a:hover {
  background-position: 15px center;
  background-color: #fff;
  text-decoration: none;
  color: #006898;
  font-weight: 700;
}

.slider-wrap {
  max-width: 720px;
  max-height: 300px;
  width: auto;
  height: auto;
  position: relative;
  padding-top: 28.7%;
  margin: 0;
  overflow: hidden;
}

.slideshow {
  position: absolute;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: 0;
}
.slideshow li span {
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  opacity: 0;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: image 18s linear infinite;
  animation: image 18s linear infinite;
}

/*

Keyframe-Berechnung:

1. 100 / Anzahl der Bilder
2. Ergebnis ist das Intervall eines einzelnen Keyframes
(Im Beispiel unten ist es die 51% {opacity: 0;})
3. Also passiert eine einzelne Animation zwischen 0% und 51%.
(0% - 8% (Differenz 8%) wird das Bild eingeblendet. Von 43% - 51% (Differenz 8%) sollte dann das Bild ausgeblendet werden)
4. Falls die Geschwindigkeit erhöht werden soll, kann die Differenz verringert werden, wobei dies am Anfang sowie am Ende gleichbleibend sein muss, damit die Animation symmetrisch abläuft.

*/

@keyframes image {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  5% {
    opacity: 1;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  38.333% {
    opacity: 1;
  }
  43.333% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes image {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  5% {
    opacity: 1;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  38.333% {
    opacity: 1;
  }
  43.333% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.slideshow li {
  margin:0;
  padding:0;
  list-style: none;
  -webkit-animation-delay: 18s;
  animation-delay: 18s;
}
.slideshow li:nth-child(1) span {}
.slideshow li:nth-child(2) span {
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}
.slideshow li:nth-child(3) span {
  -webkit-animation-delay: 12s;
  animation-delay: 12s;
}
ul.slideshow {
  margin:0;
  padding-left: 0;
}