html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

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

body {
    font-family: Arial, sans-serif;
    font-size: 100%;
    line-height: 1.5;
    color: #666;
    text-decoration: none;
    font-weight: normal;
    word-spacing: normal;
    background-color: #f1f1f1;
    -webkit-print-color-adjust: exact;
}

p {
    padding-bottom: 1rem;
}

h1 {
    font-size: 2em;
    line-height: 1.5;
    font-weight: 600;
    margin: 0 0 2rem;
    color: #036937;
    text-align: center;
    text-transform: uppercase;
}

h1 span {
    text-transform: lowercase;
}

h3 {
    font-size: 1em;
    line-height: 1.5;
    font-weight: 600;
    margin: 0;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    background-color: rgba(3, 105, 55, 0.7);
    width: 100%;
    position: absolute;
    bottom: 0;
    padding: 0.3rem 1rem;
}

h2 {
    font-size: 1em;
    line-height: 1.5;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    color: #fff;
    background-color: #036937;
    display: inline-block;
    margin-bottom: 1rem;
}

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

.align_left {
text-align: left;}

a {
    color: #036937;
}

a:hover {
    text-decoration: underline;
}

ul {
    padding: 0rem 0rem 1.5rem 1rem;
    list-style-image: none;
    list-style: none;
}

ol {
    padding: 0rem 0rem 0 2rem;
}

ol li {
    padding-left: 0;
}

li {
    padding-left: 1rem;
}

li::before {
    content: "•";
    display: inline-block;
    font-size: 1.5em;
    line-height: 1;
    position: relative;
    float: left;
    top: 0px;
    margin-left: -1rem;
    color: #036937;
}

ol li::before {
    content: "";
}

.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0;
}

.frame-outer {
    position: relative;
    padding: 0;
    max-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.813rem;
    text-align: justify;
}

.header {
    padding: 0rem 0rem 0rem;
    position: relative;
    margin-bottom: 1.5rem;
}

.logo {
    padding: 1rem 2rem;
}

.logo img {
    max-width: 10.5rem;
}

.content {
    padding: 0rem 2rem 1rem;
}

.box-content2 {
    background-color: #036937;
    color: #fff;
    padding: 1.5rem 2rem 0;
    margin: 0 -2rem 1.5rem;
}

.box-content2 li::before {
    color: #fff;
}

.footer {
    padding: 0rem 2rem 0rem;
}

.apply-btn {
    text-align: center;
    margin: 1.5rem 0 1.5rem;
}

.apply-btn a {
    color: #fff;
    background-color: #036937;
    padding: 0.75rem 3rem;
    border-radius: 5px;
    text-decoration: unset;
}

.apply-btn a:hover {
    opacity: 0.8;
}

.contact {
    margin: 0 -2rem;
    padding: 1rem 2rem 0.5rem;
    background-color: #036937;
    color: #fff;
    display: flex;
    justify-content: space-between;
}

.contact a {
    color: #fff;
}

.contact>div {
    width: 50%;
}

.info span {
    display: inline-block;
    width: 1.25rem;
}

.contact p {
    padding-bottom: 0.5rem;
}

h4 {
    padding-bottom: 1rem;
}

.address img {
    padding-right: 0.4rem;
}


/* slideshow-3-bilder */

.slider-wrap3 {
    width: auto;
    height: auto;
    position: relative;
}

.slider-wrap3 .slideshow-3-bilder {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}

.slider-wrap3 .slideshow-3-bilder 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-3-bilders 18s linear infinite;
    animation: image-3-bilders 18s linear infinite;
}

@keyframes image-3-bilders {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    8% {
        opacity: 1;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    37% {
        opacity: 1;
    }
    45% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes image-3-bilders {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    8% {
        opacity: 1;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    37% {
        opacity: 1;
    }
    45% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.slider-wrap3 .slideshow-3-bilder li {
    margin: 0;
    padding: 0;
    list-style: none;
    -webkit-animation-delay: 18s;
    animation-delay: 18s;
}

.slider-wrap3 .slideshow-3-bilder li:before {
    display: none;
}

.slider-wrap3 .slideshow-3-bilder li:nth-child(1) span {}

.slider-wrap3 .slideshow-3-bilder li:nth-child(2) span {
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
}

.slider-wrap3 .slideshow-3-bilder li:nth-child(3) span {
    -webkit-animation-delay: 12s;
    animation-delay: 12s;
}

.slider-wrap3 ul.slideshow-3-bilder {
    margin: 0;
    padding: 0;
    list-style: none;
}


/* end slideshow-3-bilder */
.slider-wrap {
    max-width: 800px;

    width: auto;
    height: auto;
    position: relative;
    
    margin: 0;
    overflow: hidden;
	border-bottom: #59c1da solid 0.25rem;

}
.slideshow-4-bilder {
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}

.slideshow-4-bilder 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-4-bilder li {
    margin:0;
    padding:0;
    list-style: none;
    -webkit-animation-delay: 24s;
    animation-delay: 24s;
}
.slideshow-4-bilder li:nth-child(1) span {}
.slideshow-4-bilder li:nth-child(2) span {
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
}
.slideshow-4-bilder li:nth-child(3) span {
    -webkit-animation-delay: 12s;
    animation-delay: 12s;
}
.slideshow-4-bilder li:nth-child(4) span {
    -webkit-animation-delay: 18s;
    animation-delay: 18s;
}

ul.slideshow-4-bilder {
    margin: 0;
    padding-left: 0;

}

.refnr {}

.apply {}

.flex {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin: 0;
}

.left {
  width: 48%;
}

.right {
  width: 48%;
}