/* Version: 05.03.2018 */


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

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


@font-face {
	font-family: "Courgette";
	src: url('https://fonts.pwrk.dev/ofl/courgette/Courgette-Regular.woff2') format('woff2');
	font-weight: 300, 400, 500, 600, 700, 800;
	font-style: normal;
}

@font-face {
	font-family: "Courgette";
	src: url('https://fonts.pwrk.dev/ofl/courgette/Courgette-Regular.woff2') format('woff2');
	font-weight: 300, 400, 500, 600, 700, 800;
	font-style: italic;
}


 /* ------------------- NICHT VERÄNDERN ------------------------- */
/**
 * 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', Arial, Helvetica, sans-serif;
/* ------------------- NICHT VERÄNDERN ------------------------- */
  font-size: 100%;
 /* ------------------------------------------------------------ */
  color: #000;
  text-decoration: none;
  font-weight: 300;
  word-spacing: normal;
  line-height: 1.3;
  background-color: #f1f1f1;
  /*	Hintergrundbilder werden in Chrome mit ausgedruckt	*/
  -webkit-print-color-adjust:exact;
	background-image: url(//anzeigen.jobsintown.de/job/files/1280601/bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
	background-attachment: fixed;
}

p {
  margin: 0 0 0rem 0;
}

.abstand {
  margin: 0.5rem 0 0rem 0;
}

.abstand_2 {
  margin: 0.5rem 0 0.5rem 0;
}

.font_vibes {
	font-family: 'Courgette', cursive;
}

h1 {
  line-height: 1.5;
  font-size: 1.5rem;
  font-weight: normal;
  padding: 0;
  margin: 0;
}

h2 {
  margin: 0;
  line-height: 1.5;
  font-size: 1.5rem;
  font-weight: normal;
}

h3 {
  margin: 0;
  line-height: 1.3;
  font-size: 0.95rem;
  font-weight: bold;
}


#frame-outer {
  position: relative;
  padding: 0;
  width: 780px;
  margin: 1.3rem auto;
 
  border: 0.02rem solid #A7A9A4;
  box-shadow: -0.1rem 0.1rem 1rem #999;
  font-size: 0.85rem;
}

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

#logo_outer {
	background-color: #fff;

}
#logo {

	position: absolute;
	top: 1rem;
	left: 4%;
	z-index: 50;
	
}

#header {
  position: relative;
	background: #fff;
}

#slogan {
  position: absolute;
  bottom: 3%;
  left: 0;
  padding: 0.5rem 3%;
  /* --------------------- FALLBACK FÜR BROWSER DIE RGBA-WERTE NICHT UNTERSTÜTZEN -------------------- */
  background: rgb(100, 30, 30);
  /* ------------------------------------------------------------------------------------------------- */
  background: rgba(100, 30, 30, 0.8);
  color: #fff;

} 

.content {
  padding: 1.1rem 4%;
 background-color: #fff;
}

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

.content2 {
  padding: 1.1rem 4%;
	background: rgb(255, 255, 255);
  /* ------------------------------------------------------------------------------------------------- */
  background: rgba(255, 255, 255, 0.6);
}

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

#title {
	 background: rgb(63, 116, 36);
  /* ------------------------------------------------------------------------------------------------- */
  background: rgba(63, 116, 36, 0.25);
	color: #3f7424;
	padding: 0.5rem 4%;
}

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

.box-right {
  float: right;
  width: 48%;
	border-left: #3f7424 0.01rem solid;
	padding-left: 2%;
}

/* -------------- FLEXBOX -------------------- */

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

.left{
	width:48%;
}

.right{
	width:48%;
        border-left: #3f7424 0.01rem solid;
	padding-left: 2%;
}


.flex {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
	flex-wrap: wrap;
  flex-direction: row;
  margin-left:14%;
}

/* ---------------------------------- */

.box {
	border:  #3f7424 0.1rem dashed;
	padding: 0.25rem 2%;
}

#footer {
padding: 1.1rem 4%;
	background: rgb(63, 116, 36);
  /* ------------------------------------------------------------------------------------------------- */
  background: rgba(63, 116, 36, 0.75);
	color: #fff;
}


.box-left0 {
  float: left;
  width: 74%;
	border-right: #3f7424 0.01rem solid;
	padding-right: 2%;
}

.box-right0 {
  float: right;
  width: 26%;
	padding-left: 2%;
}

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

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

#badge {
	position: absolute;
	top: 30.5rem;
	right: 2%;
	-moz-transform: rotate(12deg);
-webkit-transform: rotate(12deg);
-o-transform: rotate(12deg);
-ms-transform: rotate(12deg);
transform: rotate(12deg);
}


#kanne {
	position: absolute;
	bottom: 0.5rem;
	left: 2%;


}

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


.green {
	color: #3f7424!important;
}

.white {
	color: #fff!important;
}

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

li {
   position: relative; 
  margin: auto;
  padding-left: 0.5rem;
	padding-top: 0.25rem;
}


li::before {
  position: absolute;
  top: 0.25rem;
  left: -0.65rem;
  content: "✔";
  font-size: 0.8rem;
  color: #3f7424;
} 


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

.hide {
  display: none;
}

.refnr {}

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

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

p:empty {
  height: 1rem;
}

.bg-darkblue {
  background: rgb(78, 147, 250);
}

.bg-lightblue {
  background: rgb(127, 174, 245);
}

.button_box {
  text-align: center;
}

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


/*_______________________

BUTTON MIT ANIMATION
_______________________
*/

.button a {
  display: inline-block;
  background:  #3f7424;
  padding: 0.5rem 2.5rem 0.5rem 2.5rem;
  margin: 1.75rem auto;
  cursor: pointer;
  -webkit-border-radius: 1.5rem;
  border-radius: 1.5rem;
  border: 0.1rem solid  #3f7424;
  transition: all 140ms ease 0s;
  -moz-transition: all 140ms ease 0s;
  -webkit-transition: all 140ms ease 0s;
  color: #fff;
}
.button a:hover {
  background-position: 15px center;
  background-color: #fff;
  text-decoration: none;
  color:  #3f7424;
}

.slider-wrap {
    max-width: 800px;

    width: auto;
    height: 345px;
    position: relative;

    overflow: hidden;


}
  
.slideshow {
    position: absolute;
    width: 100%;
    top: 3.2rem;
    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;
}

/*-----Slider-----*/

#sliderBox{
	position: relative;
}

.slider-wrap {
  width: auto;
  height: auto;
  position: relative;
  overflow: hidden;
	z-index: 2;
}

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

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

.slideshow_3Bilder 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_3Bilder 9s linear infinite;
  animation: image_3Bilder 9s linear infinite;
}

@keyframes image_3Bilder {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  4% {
    opacity: 1;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  35% {
    opacity: 1;
  }
  39% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes image_3Bilder {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  4% {
    opacity: 1;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  35% {
    opacity: 1;
  }
  39% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

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

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

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

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

.slideshow_4Bilder 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_4Bilder 12s linear infinite;
  animation: image_4Bilder 12s linear infinite;
}

@keyframes image_4Bilder {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  4% {
    opacity: 1;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  30% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes image_4Bilder {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  4% {
    opacity: 1;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  30% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

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

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

.flip-card {
  background-color: transparent;
  width: 200px;
  height: 128px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  
}

/* Style the back side */
.flip-card-back {
 
  transform: rotateY(180deg);
}


.flip-card2 {
  background-color: transparent;
  width: 178px;
  height: 150px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner2 {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card2:hover .flip-card-inner2 {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front2, .flip-card-back2 {
  position: absolute;
  width: 100%;
	left:0;
  height: 100%;
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front2 {
  
}

/* Style the back side */
.flip-card-back2 {
 
  transform: rotateY(180deg);
}




.flip-card3 {
  background-color: transparent;
  width: 175px;
  height: 173px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner3 {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card3:hover .flip-card-inner3 {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front3, .flip-card-back3 {
  position: absolute;
  width: 100%;
	left:0;
  height: 100%;
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front3 {
  
}

/* Style the back side */
.flip-card-back2 {
 
  transform: rotateY(180deg);
}

/*
_______________________

KAPITÄLCHEN, BULLETPOINT
_______________________

<span class="capital" style="float: left; width: 43px; height: 20px; line-height: 47px; background: transparent; font-size: 38px; margin-top: -5px; margin-right: -32px; margin-bottom: 5px; background-color: transparent;">I</span>

ul li {
background: url(bp.jpg) no-repeat 2px 5px; padding-left:8px;
}


/*
_______________________

MARKIERTER TEXT
_______________________

::selection {
background: #ffb7b7;
}
::-moz-selection {
background: #ffb7b7;
}

*/
.apply {}