/* Version: 07.03.2016 */

* {
    box-sizing: border-box;
}

body {

 font-family: Arial;
font-size: 0.75rem;
	color: #555555;
    text-decoration: none;
    font-weight: normal;
    word-spacing: normal;
    letter-spacing: 1px;
    line-height: 1.5;
    background-color: #f1f1f1;
}

.header{width: 75%;
margin: 0 auto;}
p {
    margin: 0;
}

h1 {
    line-height: 1.5;
    font-size: 1.6rem;
    font-weight: bold;
    color: #728FA5;
    padding: 1rem 0;
    margin: 0;
	text-align: center;
}

h2 {
    margin: 0px;
    line-height: 1.5;
    font-size: 1.2rem;
    font-weight: normal;
    color: #DB0000;
}

h3 {
    margin: 0px;
    line-height: 1.5;
    font-size: 1rem;
    font-weight: bold;
    color: #728FA5;
background-color: #EFF3F5;
padding: 0.1rem 1rem;}

.rahmen {
    padding: 0px;
    width: 720px;
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: 20px;
    margin-left: auto;
    background-color: #FFF;
    border: 1px solid #A7A9A4;
    box-shadow: -0.5px 3px 15px #999;
    position: relative;
}

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

.logo {
margin: 20px 5%;
width: 35%;}

.content {
    padding: 20px 5%;
}

.text {
    padding: 20px 5%;
	background-color: #EFF3F5;
}

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

.content-grey {
    padding: 20px 5%;
    background: #edecec;
}

.box-left {
    float: left;
    width: 48%;
}

.box-right {
    float: right;
    width: 48%;
}

.footer {
    background: #728FA5 ;
    padding: 20px 5%;
    color: #fff;
}

.footer a:link,
.footer a:visited {
    color: #fff;
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

.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: underline;
}

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

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

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

ul {
  margin: 0.5rem auto 1rem 0.5rem;
  padding-left: 0.5rem;
  list-style-type: none;
  /* ------------- FALLS ETWAS ANDERES ALS DIE STANDARD AUFZÄHLUNGSZEICHEN GEWÜNSCHT ----------------  */
  /* list-style-type: none; */
  /* DANN MUSS "list-style-type: disc;" GELÖSCHT WERDEN.
  /* ------------------------------------------------------------------------------------------------- */
}

ul li {
  /* ------------- FALLS ETWAS ANDERES ALS DIE STANDARD AUFZÄHLUNGSZEICHEN GEWÜNSCHT ----------------  */
   position: relative; 
  /* ------------------------------------------------------------------------------------------------- */
  margin: auto;
  padding: 0;
}

/* --------------- FALLS ETWAS ANDERES ALS DIE STANDARD AUFZÄHLUNGSZEICHEN GEWÜNSCHT ----------------  */

 
ul li::before {
  position: absolute;
  top: -0.5rem;
  left: -1rem;
  content: "•";
  font-size: 1.4rem;
  color: #91AABE;
} 

ol {
  margin: 0.5rem auto 1rem 0.5rem;
  padding-left: 0.5rem;
  list-style-type: none;
  /* ------------- FALLS ETWAS ANDERES ALS DIE STANDARD AUFZÄHLUNGSZEICHEN GEWÜNSCHT ----------------  */
  /* list-style-type: none; */
  /* DANN MUSS "list-style-type: disc;" GELÖSCHT WERDEN.
  /* ------------------------------------------------------------------------------------------------- */
}

ol li {
  /* ------------- FALLS ETWAS ANDERES ALS DIE STANDARD AUFZÄHLUNGSZEICHEN GEWÜNSCHT ----------------  */
   position: relative; 
  /* ------------------------------------------------------------------------------------------------- */
  margin: auto;
  padding: 0;
}

/* --------------- FALLS ETWAS ANDERES ALS DIE STANDARD AUFZÄHLUNGSZEICHEN GEWÜNSCHT ----------------  */

 
ol li::before {
position: absolute;
left: -1rem;
content: "○";
font-size: 0.9rem;
color: #91AABE;
top: -1px;
} 

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

.hide {
    display: none;
}

.refnr {}

.blocksatz {
    text-align: justify;
    text-align-last: justify;
}

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

p:empty {
    height: 1rem;;
}

.table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    /* table-layout: fixed; */
}

.cell {
    display: table-cell;
}

.row {
    display: table-row;
}

.flex {
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: stretch;
    align-items: stretch;
	  flex-wrap: wrap;
}

.left,
.right {
  width: 47%;
}.button_box {
  text-align: center;
}

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


/*_______________________

BUTTON MIT ANIMATION
_______________________
*/

.button a {
  display: inline-block;
  padding: 0.6rem 1rem 0.6rem 1rem;
  margin: 0 auto  1rem auto;
  cursor: pointer;
  -webkit-border-radius: 1.5rem;
  border-radius: 0.5rem;
  border: 0.1rem solid #EFF3F5;
  transition: all 140ms ease 0s;
  -moz-transition: all 140ms ease 0s;
  -webkit-transition: all 140ms ease 0s;
  color: #EFF3F5 !important;
	font-weight: bold;}
.button a:hover {
  background-position: 15px center;
  background-color: #fff;
  text-decoration: none;
  color: #728FA5 !important;
	  border: 0.1rem solid #728FA5;

}
.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 30s linear infinite;
    animation: image 30s 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;
    }
    3% {
      opacity: 1;
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    27% {
      opacity: 1;
    }
    30% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
}

@-webkit-keyframes image {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    3% {
        opacity: 1;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    27% {
        opacity: 1;
    }
    30% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
  
.slideshow li {
    margin:0;
    padding:0;
    list-style: none;
    -webkit-animation-delay: 30s;
    animation-delay: 30s;
}
.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;
}
.slideshow li:nth-child(4) span {
    -webkit-animation-delay: 18s;
    animation-delay: 18s;
}
.slideshow li:nth-child(5) span {
    -webkit-animation-delay: 24s;
    animation-delay: 24s;
}
ul.slideshow {
    margin: 0;
    padding-left: 0;
}

.apply {}