/* roboto-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/roboto-v51-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/roboto-v51-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v51-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v51-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-v51-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/roboto-v51-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v51-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/roboto-v51-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/roboto-v51-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


body {
    font-family: 'roboto', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.3em;
    text-decoration: none;
}
strong {
    font-weight: bold;
}

h1, h2, h3, h4, h5 {
    color: #000000;
}
h1, .h1, h2, .h2, h3, .h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

h1 {
    font-size: 64px;
    font-weight: 700;
}
h3 {
    font-size: 30px;
    font-weight: 500;
}
h4, .h4, h5, .h5, {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.1;
    margin-top: 10px;
    margin-bottom: 10px;
}

h6 {
  color: #fff;
  font-size: 50px;
}

 a:hover, a:focus, a:active {
  color: #152849;
}

/*weiter lesen button*/
.btn-primary, .sppb-btn-primary {
   border-color: #0e1b31;
   background-color: #152849;
   padding: 8px 12px;
   font-size: 16px;
  }
.btn-primary:hover, .sppb-btn-primary:hover {
    border-color: #000;
    background-color: #000;
}


/*Menü*/

.sp-megamenu-parent>li>a, .sp-megamenu-parent>li>span {
    display: inline-block;
    padding: 0 20px;
    line-height: 90px;
    font-size: 18px;
    margin: 0;
}
.sp-megamenu-parent >li.active>a, .sp-megamenu-parent >li:hover>a, .sp-megamenu-parent >li.active:hover>a {
    background-color: #c7c405;
    color: #152849;
}
.sp-megamenu-parent>li:last-child>a {
    padding: 0px 15px 0px 15px;
}

/*Fusszeile+Soziallinks*/
#sp-footer {
    font-size: 16px;
    text-align: center;
}
.sp-scroll-up:hover, .sp-scroll-up:active, .sp-scroll-up:focus {
    background: #c7c405;
}
#sp-bottom {
    padding: 60px 0 30px;
    font-size: 18px;
    line-height: 1.6;
}
.fa-facebook, .fa-instagram, .fa-envelope {
    font-size: 25px;
    background-color: #c7c405;
    display: inline-block;
    color: #fff;
    width: 66px;
    height: 66px;
    line-height: 66px;
    border-radius: 50%;
    text-align: center;
}
.fa-facebook:hover, .fa-instagram:hover, .fa-envelope:hover {
    background-color: #000;
}
  
/*accordion*/
h3.akkordeon-title {
    padding: 10px 30px 10px 15px;
    margin: 0px;
    background: #c7c405;
    border: 1px solid;
}
.akko {
  padding: 10px 30px 10px 15px;
  margin: 0px;
  cursor: pointer;
  border-left: 1px solid;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

summary{ 
    padding: 10px 30px 10px 15px;
    background: #f9f9f9;
    border-bottom: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;
}


/*flip flop*/
.flip-container {perspective: 1000px; transform-style: preserve-3d;}
.flip-container:hover .back {transform: rotateY(0deg);}
.flip-container:hover .front {transform: rotateY(180deg);}
.flip-container, .front, .back {
  width: 100%;
  height: 280px;
  padding: 20px;
  float:left;
}

.flipper {transition: 0.6s; transform-style: preserve-3d;	position: relative;}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	transition: 0.6s;
	transform-style: preserve-3d;
	position: absolute;
	top: 0;
	left: 0;

}

.front {z-index: 2;	transform: rotateY(0deg);}
.back {transform: rotateY(-180deg); background: #c7c405; color: #000; text-align:center; line-height:1.4em;}
.vertical.flip-container {position: relative;}
.vertical .back {	transform: rotateX(180deg);}
.vertical.flip-container:hover .back  {transform: rotateX(0deg);}
.vertical.flip-container:hover .front {transform: rotateX(180deg);}
.front {background: #c7c7c7; color:#fff; text-align: center; display: flex; align-items: center; justify-content: center;}

.fa-child, .fa-home, .fa-line-chart, .fa-building, .fa-users, .fa-laptop {
    font-size: 25px;
    background-color: #fff;
    display: inline-block;
    color: #c7c405;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    text-align: center;
}

/*text mit Hintergrunf Grün*/
h5.backgreen {
  background: #c7c405; 
  padding: 30px 40px 40px; 
  box-shadow: -10px 15px 20px 0 rgba(0, 0, 0, .3); 
  margin-left: -100px; 
  margin-top: 100px;
}

/* Tabs mit radio-Buttons */
.tabbed menu { 
  list-style-type: none;
}

.tabbed > input,
.tabbed menu li {
	display: none;

}

.tabbed menu>li {
  padding: 20px;
  width: 100%;
  border: 1px solid silver;
  background: hsl(200,40%,96%);
  line-height: 1.5em;
  letter-spacing: 0.3px;

}

#tab1:checked ~ menu .tab1,
#tab2:checked ~ menu .tab2,
#tab3:checked ~ menu .tab3,
#tab4:checked ~ menu .tab4,
#tab5:checked ~ menu .tab5, 
#tab6:checked ~ menu .tab6, 
#tab7:checked ~ menu .tab7, 
#tab8:checked ~ menu .tab8, 
#tab9:checked ~ menu .tab9, 
#tab10:checked ~ menu .tab10 {
  display: flex; 
  justify-content: space-between; 
  padding-bottom: 2em; 
  margin-block-start: auto;
}
label {
   float: left;
   padding: 15px 15px;
   border-top: 1px solid silver;
   border-right: 1px solid silver;
   background: #152849;
   color: #eee;
   cursor: pointer;
}

label:nth-child(1) { border-left: 1px solid silver; }
label:hover { background: #c7c405; color: #000; cursor: pointer;}
label:active { background: #c7c405; color: #000; cursor: pointer; }

#tab1:checked ~ label[for="tab1"],
#tab2:checked ~ label[for="tab2"],
#tab3:checked ~ label[for="tab3"] {
  background: white;
  color: #111;
  position: relative;
  border-bottom: none;
  padding: 15px;
}

#tab1:checked ~ label[for="tab1"]:after,
#tab2:checked ~ label[for="tab2"]:after,
#tab3:checked ~ label[for="tab3"]:after,
#tab4:checked ~ label[for="tab4"]:after, 
#tab5:checked ~ label[for="tab5"]:after, 
#tab6:checked ~ nav label[for="tab6"]:after,
#tab7:checked ~ nav label[for="tab7"]:after, 
#tab8:checked ~ nav label[for="tab8"]:after, 
#tab9:checked ~ nav label[for="tab9"]:after, 
#tab10:checked ~ nav label[for="tab10"]:after {
  content: "";
  display: block;
  position: absolute;
  height: 12px;
  width: 100%;
  background: white;
  left: 0;
  bottom: -1px;
}


#sliderck112 .swiper-caption {
  padding: 50px;
  margin-top: 500px; 
  margin-left: 20%;
  width: 520px;
}

.youtubvideoshin {
    font-size: 11px;
    line-height: 12px;
}

label.required {
  padding: 0px;
  background: white;
  color: #152849;
  border: 0px;
}

#jform_spacer-lbl {
  padding: 0px;
  background: white;
  color: #152849;
  border: 0px;
  float: none;
}

label.altcha-label{
  padding: 0px;
  background: white;
  color: #152849;
  border: 0px;
}


/*Media*/

@media (max-width: 575px){
  h1 {font-size: 45px;}
 .h4, h4 {font-size: 1.2rem;}
  h3 {font-size: 24px;}
  body {font-size: 16px;}
}
@media (max-width: 767px){
  h1 {font-size: 50px;}
 .h4, h4 {font-size: 1.2rem;}
  h3 {font-size: 24px;}
  body {font-size: 17px;}
  h5.backgreen { margin-left: 0px; 
  margin-top: 10px;
}
}
@media (max-width: 991px){
    h1 {font-size: 50px;}
  .h4, h4 {font-size: 1.5rem;}
  }
@media (min-width: 991px){
    .sp-megamenu-parent>li>a, .sp-megamenu-parent>li>span {padding: 0 10px;}
}
@media (min-width: 1199px) {
    .sp-megamenu-parent>li>a, .sp-megamenu-parent>li>span {padding: 0 15px;}
}