/* Version: 05.05.2014 */


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

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

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #000;
	text-decoration: none;
	font-weight: normal;
	word-spacing: normal;
	line-height: 19px;
	background-color:#f1f1f1;
}

.opensans{font-family: 'Open Sans', Helvetica, sans-serif;}

p {margin:0;}

h1{
	margin: 0px;
	line-height:27px;
	font-size: 21px;
	font-weight: normal;
}

h2{
	margin: 0px;
	line-height: 23px;
	font-size: 18px;
	font-weight: normal;
}

#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;
}

#rahmen_top {
	padding: 0px;
}

#rahmen_bottom {
	padding: 0px;
}

#content{ 
	padding: 90px;
	padding-top: 20px;
	padding-bottom: 50px;
}

#firmenbox{
	z-index: 10;
	background: rgba(0,0,0,0.5);
	color: rgba(255,255,255,1.00);
	position:absolute;
	left:0;
	bottom:0.25rem;
	padding: 1rem 7%;
	font-size: 0.75rem;
	line-height: 1.4;
}

#box_top{
	background-image: url(bg.jpg);
	background-repeat: no-repeat;
	padding: 90px;
	padding-bottom: 20px;
	padding-top: 50px;
}


#box_right{
	float:right;
}

#box_left{
	float:left;
}

#footer{
	
}

img {
	max-width: 100%;
	height: auto;
	width: auto9; 
}

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

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

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

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

.color_1{
	color: #000;
}

.color_2{
	color: #fff;
}

ul {
	margin-left:20px;
	padding-left:9px;
	margin-top:5px;
	list-style-type: disc;
}

li {
	margin: auto;
	padding: 0;
}

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

.bild1{
	display:block;	
}

.bild2{
	display:none;
}

.refnr {
	
}

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

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

.firma{
	position: absolute;
	width: 85%;
	padding: 40px;
	top: 105px;
	left:1rem;
	line-height: 17px;
	font-size: 12px;
	color: #FFF;
	
}

p:empty {
	height: 18px;
}

#sliderbox{
	position:relative;
}

/*----- SLIDER 2 Bilder -----*/

.slider-wrap_2Bilder{
	margin: 0;
	width: auto;
	height: auto;
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.slideshow_2Bilder {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 0;
}
.slideshow_2Bilder li span {
  width: 100%;
  height:100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  opacity: 0;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: image_2Bilder 18s linear infinite;
  animation: image_2Bilder 18s linear infinite;
}
@keyframes image_2Bilder {
0% {
 opacity: 0;
      transform: translateX(100%);
    }
	0.01%{
		opacity: 1;
	}  

    2% {
      transform: translateX(0);
    }

    33.333% {
      transform: translateX(0);
    }

    35.333% {    
      transform: translateX(-100%);
		opacity: 1;
    }
	36%{
		opacity: 0;
	}
}
@-webkit-keyframes image_3Bilder {
0% {
 opacity: 0;
      transform: translateX(100%);
    }
	0.01%{
		opacity: 1;
	}  

    2% {
      transform: translateX(0);
    }

    33.333% {
      transform: translateX(0);
    }

    35.333% {    
      transform: translateX(-100%);
		opacity: 1;
    }
	36%{
		opacity: 0;
	}
}

.slideshow_2Bilder li {
    margin:0;
    padding:0;
  list-style: none;
}
.slideshow_3Bilder li:nth-child(1) span {
}
.slideshow_3Bilder li:nth-child(2) span {
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}

ul.slideshow_2Bilder {
	margin:0 !important;
	padding: 0 !important;
}

.slideshow_2Bilder li::before{
	display:none !important;
}

.slideshow_2Bilder ul {
	margin:0 !important;
	padding-left:0 !important;
	list-style-type: none !important;
	list-style:none !important;
}

/*----- SLIDER 2 Bilder -----*/

/*----- SLIDER 3 Bilder -----*/

.slider-wrap_3Bilder{
	margin: 0;
	width: auto;
	height: auto;
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.slideshow_3Bilder {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 0;
}
.slideshow_3Bilder li span {
  width: 100%;
  height:100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  opacity: 0;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: image_3Bilder 18s linear infinite;
  animation: image_3Bilder 18s linear infinite;
}
@keyframes image_3Bilder {
0% {
 opacity: 0;
      transform: translateX(100%);
    }
	0.01%{
		opacity: 1;
	}  

    2% {
      transform: translateX(0);
    }

    33.333% {
      transform: translateX(0);
    }

    35.333% {    
      transform: translateX(-100%);
		opacity: 1;
    }
	36%{
		opacity: 0;
	}
}
@-webkit-keyframes image_3Bilder {
0% {
 opacity: 0;
      transform: translateX(100%);
    }
	0.01%{
		opacity: 1;
	}  

    2% {
      transform: translateX(0);
    }

    33.333% {
      transform: translateX(0);
    }

    35.333% {    
      transform: translateX(-100%);
		opacity: 1;
    }
	36%{
		opacity: 0;
	}
}

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

ul.slideshow_3Bilder {
	margin:0 !important;
	padding: 0 !important;
}

.slideshow_3Bilder li::before{
	display:none !important;
}

.slideshow_3Bilder ul {
	margin:0 !important;
	padding-left:0 !important;
	list-style-type: none !important;
	list-style:none !important;
}

/*-----*/

/*----- SLIDER 4 Bilder -----*/

.slider-wrap_4Bilder{
	margin: 0;
	width: auto;
	height: auto;
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.slideshow_4Bilder {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 0;
}
.slideshow_4Bilder li span {
  width: 100%;
  height:100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  opacity: 0;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: image_4Bilder 24s linear infinite;
  animation: image_4Bilder 24s linear infinite;
}
@keyframes image_4Bilder {
 0% {
 opacity: 0;
      transform: translateX(100%);
    }
	0.01%{
		opacity: 1;
	}  

    2% {
      transform: translateX(0);
    }

    25% {
      transform: translateX(0);
    }

    27% {    
      transform: translateX(-100%);
		opacity: 1;
    }
	28%{
		opacity: 0;
	}
}
@-webkit-keyframes image_4Bilder {
0% {
 opacity: 0;
      transform: translateX(100%);
    }
	0.01%{
		opacity: 1;
	}  

    2% {
      transform: translateX(0);
    }

    25% {
      transform: translateX(0);
    }

    27% {    
      transform: translateX(-100%);
		opacity: 1;
    }
	28%{
		opacity: 0;
	}
}

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

ul.slideshow_4Bilder {
	margin:0 !important;
	padding: 0 !important;
}

.slideshow_4Bilder li::before{
	display:none !important;
}

.slideshow_4Bilder ul {
	margin:0 !important;
	padding-left:0 !important;
	list-style-type: none !important;
	list-style:none !important;
}





.slider-wrap {

    width: auto;
    height: auto;
    position: relative;
    
    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 24s linear infinite;
    animation: image 24s 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;
    }
    20% {
      opacity: 1;
    }
    25% {
      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;
    }
    20% {
        opacity: 1;
    }
    25% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
  
.slideshow li {
    margin:0;
    padding:0;
    list-style: none;
    -webkit-animation-delay: 24s;
    animation-delay: 24s;
}
.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;
}

ul.slideshow {
    margin: 0;
    padding-left: 0;
}

.button_box {
  text-align: center;
}

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

.button a {
  display: inline-block;
  background: #b2a09a;
  padding: 0.4rem 0.6rem;
  margin: 0;
  cursor: pointer;
  border: .1rem solid #b2a09a;
  transition: all 140ms ease 0s;
  -moz-transition: all 140ms ease 0s;
  -webkit-transition: all 140ms ease 0s;
  color: #fff;
  min-width: 13rem;
  text-align: center;
}

.button a:hover {
  text-decoration: none;
}

.apply {}
