/* Reset ==========================================================================*/

    /* font-size: 102%; }  insgesamt ALLE Schriften größer !! */
* { margin: 0; padding: 0; }
html {height: 100%;  margin: 0; overflow-y: scroll; margin: 0; padding: 0; spacing: 0; scroll-behavior: smooth;  } 
body {height: 100%;  font-size: 12px; font-family: Arial, helvetica, sans-serif;}
div  { text-align: left; }

/* pre  { white-space: pre-wrap; } */
/* :root { font-size: calc(1vw + 1vh + .5vmin); } */
/* @import url(https://fonts.googleapis.com/css?family=Exo:200,500); */
/* @import "http://weloveiconfonts.com/api/?family=entypo"; */



ul {
    /* background: #light-yellow; */
    /* list-style-image: url(media/verlauf.jpg);*/
    margin: 0;
    padding-left: 0;
}


li {
    background: #ccffcc;
    color: #black;
    display: block;
    float: left;
    padding: 0.5rem;
    position: relative;
    text-decoration: none;
    transition-duration: 0.3s;
} 

  
li a {
  color: #grey;
}

li:hover {
    background: #eeee77;
    cursor: help;
}

ul li ul {
    background: orange;
    visibility: hidden;
  opacity: 1;
  min-width: 5rem;
    position: absolute;
  transition: all 0.7s ease;
  margin-top: 0.3rem;
    left: 0;
  display: none;
}

ul li:hover > ul,
ul li:focus-within > ul, /* this is the line we add */
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

ul li ul li {
    clear: both;
  width: 100%;
}








/* ######################## Teamcards ############################################# */



 /* Three columns side by side */
.column2 {
  float: left;
  width: 25%;
  margin-bottom: 10px;
  padding: 0 8px;
}

/* Add some shadows to create a card effect */
.card2 {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7);
}

/* Some left and right padding inside the container */
.container2 {
  padding: 0 16px;
  color: #fff;
}

/* Clear floats */
.container2::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.title2 {
  color: #fff;
}

.button2 {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

.button2:hover {
  background-color: #555;
} 




/* ######################## Parallax-Scrolling ############################################# */


body, html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Lato", sans-serif;
  color: #777;
}

.bgimg-1, .bgimg-2, .bgimg-3 {
  position: relative;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
.bgimg-1 {
  background-image: url("img_parallax.jpg");
  min-height: 100%;
}

.bgimg-2 {
  background-image: url("img_parallax2.jpg");
  min-height: 400px;
}

.bgimg-3 {
  background-image: url("img_parallax3.jpg");
  min-height: 400px;
}

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #111;
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  .bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scroll;
  }
}





/* ######################## Modal Window 1 ############################################# */

.modal-window {
  position: fixed;
  background-color: rgba(200, 200, 200, 0.75);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.modal-window:target {
  opacity: 1;
  pointer-events: auto;
}

.modal-window>div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 2rem;
  background: #fff;
  color: #444;
}

.modal-window header {
  font-weight: bold;
}

.modal-close {
  color: #aaa;
  line-height: 50px;
  font-size: 80%;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 70px;
  text-decoration: none;
}

.modal-close:hover {
  color: #000;
}

.modal-window h1 {
  font-size: 150%;
  margin: 0 0 15px;
}


/*
 <a href="#open-modal">Open Modal</a>
<div id="open-modal" class="modal-window">
  <div>
    <a href="#modal-close" title="Close" class="modal-close"><img src="media/animated-arrow.gif"></a>
    <h1>CSS Modal</h1>
<img src="media/design_desktop.png">
    <div>The quick brown fox jumped over the lazy dog.</div>
  </div>
</div>
*/





/* ######################## Modal Window 2 ############################################# */

.box {
  width: 40%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid #06D85F;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: #06D85F;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}


/*
<h1>Popup/Modal Windows without JavaScript</h1>
<div class="box">
	<a class="button" href="#popup1">Let me Pop up</a>
</div>

<div id="popup1" class="overlay">
	<div class="popup">
		<h2>Here i am</h2>
		<a class="close" href="#">&times;</a>
		<div class="content">
			Thank to pop me out of that button, but now i'm done so you can close this window.
		</div>
	</div>
</div>
*/





/* ######################## Cool Tooltipp ############################################# */



.tooltipp {
	/* color: #c32e04;            */
	/* text-decoration: underline;*/
	cursor: help;
	position: relative;
}

.tooltipp span[role=tooltipp] {
	display: none;
}

.tooltipp:hover span[role=tooltipp] {
	display: block;
	position: absolute;
	bottom: 1em;
	left: -6em;
	padding: 0.5em;
	z-index: 100;
	/* width: 15em; */
	/* color: #000; */
	/* background-color: #ffebe6; */
	border: solid 2px #c32e04;
	border-radius: 0.5em;
}



/* ######################## Cool Tooltipp2  ####### */



.tooltipp2 {
	/* color: #c32e04;            */
	/* text-decoration: underline;*/
	cursor: help;
	position: relative;
}

.tooltipp2 span[role=tooltipp2] {
	display: none;
}

.tooltipp2:hover span[role=tooltipp2] {
	display: block;
	position: absolute;
	bottom: 1em;
	left: -6em;
	padding: 0.5em;
	z-index: 100;
	/* width: 15em; */
	/* color: #000; */
	/* background-color: #ffebe6; */
	border: solid 2px #c32e04;
	border-radius: 0.5em;
}



/* ######################## click-accordion ############################################# */





// Layout
.row {
  display:flex;
  .col {
    flex:1;
    &:last-child {
      margin-left: 1em;
    }
  }
}
/* Accordion styles */
.tabs {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 4px -2px rgba(0,0,0,0.5);
}
.tab {
  width: 100%;
  color: white;
  overflow: hidden;
  &-label {
    display: flex;
    justify-content: space-between;
    padding: 1em;
    background: $midnight;
    font-weight: bold;
    cursor: pointer;
    /* Icon */
    &:hover {
      background: darken($midnight, 10%);
    }
    &::after {
      content: "\276F";
      width: 1em;
      height: 1em;
      text-align: center;
      transition: all .35s;
    }
  }
  &-content {
    max-height: 0;
    padding: 0 1em;
    color: $midnight;
    background: white;
    transition: all .35s;
  }
  &-close {
    display: flex;
    justify-content: flex-end;
    padding: 1em;
    font-size: 0.75em;
    background: $midnight;
    cursor: pointer;
    &:hover {
      background: darken($midnight, 10%);
    }
  }
}

// :checked
input:checked {
  + .tab-label {
    background: darken($midnight, 10%);
    &::after {
      transform: rotate(90deg);
    }
  }
  ~ .tab-content {
    max-height: 100vh;
    padding: 1em;
  }
}





/* ######################## IMAGE-FADER ############################################# */


//how many images we have
$slides: 4;

// how much we want each slide to show
$time_per_slide: 4;

// total time needed for full animation
$total_animation_time: $time_per_slide * $slides;

body{
  background:#000;
}
.container{
  margin:50px auto;
  width:500px;
  height:300px;
  overflow:hidden;
  border:10px solid;
  border-top-color:#856036;
  border-left-color:#5d4426;
  border-bottom-color:#856036;
  border-right-color:#5d4426;
  position:relative;

}
.photo{
  position:absolute;
  animation:round #{$total_animation_time}s infinite;
  opacity:0;
  
}
@keyframes round{   
  25%{
    opacity:1;
  }
  40%{
    opacity:0;
  }
} 

@for $index from 1 to $slides + 1{
  img:nth-child(#{$index}){
    animation-delay:#{$total_animation_time - $time_per_slide * $index}s
  }
}
   

/* 
  <div class="container">
    <img class='photo'  src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" />
    <img class='photo'  src="http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg" alt="" />
    <img class='photo'  src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" />
    <img class='photo'  src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" />
  </div>
*/






/* ######################## Modal-POPUP-BOX ############################################# */

.modal-container {
  position: fixed;
  background-color: #fff;
  width: 70%;
  max-width: 400px;
  left: 50%;
  padding: 20px;
  border-radius: 5px;

  -webkit-transform: translate(-50%, -200%);
  -ms-transform: translate(-50%, -200%);
  transform: translate(-50%, -200%);

  -webkit-transition: -webkit-transform 200ms ease-out;
  transition: transform 200ms ease-out;
}

.modal:before {
  content: "";
  position: fixed;
  display: none;
  background-color: rgba(0,0,0,.8);
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.modal:target:before {
  display: block;
}

.modal:target .modal-container {
  top: 20%;

  -webkit-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

#modal-close {}


/* ######################## simple slided Lightbox ######################## */

.lightbox {
	/** Default lightbox to hidden */
 margin-left: -2000px;
	/** Position and style */
	position: fixed;
	z-index: 777;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.68);
	transition: all .6s;
}

.lightbox img {
	/** Pad the lightbox image */
	max-width: 95%;
	max-height: 95%;
	margin-top: 2%;
	transition: all .7s;
}

.lightbox:target {
	/** Remove default browser outline */
	outline: none;
	/** Unhide lightbox **/
	margin-left: 0;
	transition: all .8s;
}







/* ######################## TOOLTIP ############################################# */

  /* <a href="#" class="tooltip"        data-tooltip="I’m the tooltip text.">Tooltip global   </a>
     <a href="#" class="tooltip-top"    data-tooltip="I’m the tooltip text.">Tooltip on top   </a>
     <a href="#" class="tooltip-right"  data-tooltip="I’m the tooltip text.">Tooltip to right </a>
     <a href="#" class="tooltip-bottom" data-tooltip="I’m the tooltip text.">Tooltip on bottom</a>
     <a href="#" class="tooltip-left"   data-tooltip="I’m the tooltip text.">Tooltip to left  </a>
  */

/* Base styles for the element that has a tooltip */
[data-tooltip],
.tooltip {
  position: relative;
  cursor: pointer;
}

/* Base styles for the entire tooltip */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
  position: absolute;
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: 
      opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    -moz-transition:    
        opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    transition:         
        opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform:    translate3d(0, 0, 0);
  transform:         translate3d(0, 0, 0);
  pointer-events: none;
}

/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

/* Base styles for the tooltip's directional arrow */
.tooltip:before,
[data-tooltip]:before {
  z-index: 1001;
  border: 6px solid transparent;
  background: transparent;
  content: "";
}

/* Base styles for the tooltip's content area */
.tooltip:after,
[data-tooltip]:after {
  z-index: 1000;
  padding: 8px;
  width: 240px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #ff7;
  content: attr(data-tooltip);
  font-size: 17px;
  line-height: 1.1;
}

/* Directions */

/* Top (default) */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after,
.tooltip-top:before,
.tooltip-top:after {
  bottom: 100%;
  left: 50%;
}

[data-tooltip]:before,
.tooltip:before,
.tooltip-top:before {
  margin-left: -6px;
  margin-bottom: -12px;
  border-top-color: #000;
  border-top-color: hsla(0, 0%, 20%, 0.9);
}

/* Horizontally align top/bottom tooltips */
[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after {
  margin-left: -80px;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
.tooltip-top:hover:before,
.tooltip-top:hover:after,
.tooltip-top:focus:before,
.tooltip-top:focus:after {
  -webkit-transform: translateY(-12px);
  -moz-transform:    translateY(-12px);
  transform:         translateY(-12px); 
}

/* Left */
.tooltip-left:before,
.tooltip-left:after {
  right: 100%;
  bottom: 50%;
  left: auto;
}

.tooltip-left:before {
  margin-left: 0;
  margin-right: -12px;
  margin-bottom: 0;
  border-top-color: transparent;
  border-left-color: #000;
  border-left-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-left:hover:before,
.tooltip-left:hover:after,
.tooltip-left:focus:before,
.tooltip-left:focus:after {
  -webkit-transform: translateX(-12px);
  -moz-transform:    translateX(-12px);
  transform:         translateX(-12px); 
}

/* Bottom */
.tooltip-bottom:before,
.tooltip-bottom:after {
  top: 100%;
  bottom: auto;
  left: 50%;
}

.tooltip-bottom:before {
  margin-top: -12px;
  margin-bottom: 0;
  border-top-color: transparent;
  border-bottom-color: #000;
  border-bottom-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-bottom:hover:before,
.tooltip-bottom:hover:after,
.tooltip-bottom:focus:before,
.tooltip-bottom:focus:after {
  -webkit-transform: translateY(12px);
  -moz-transform:    translateY(12px);
  transform:         translateY(12px); 
}

/* Right */
.tooltip-right:before,
.tooltip-right:after {
  bottom: 50%;
  left: 100%;
}

.tooltip-right:before {
  margin-bottom: 0;
  margin-left: -12px;
  border-top-color: transparent;
  border-right-color: #000;
  border-right-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-right:hover:before,
.tooltip-right:hover:after,
.tooltip-right:focus:before,
.tooltip-right:focus:after {
  -webkit-transform: translateX(12px);
  -moz-transform:    translateX(12px);
  transform:         translateX(12px); 
}

/* Move directional arrows down a bit for left/right tooltips */
.tooltip-left:before,
.tooltip-right:before {
  top: 3px;
}

/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after,
.tooltip-right:after {
  margin-left: 0;
  margin-bottom: -16px;
}


/* ######################## DIV-TABLES ############################################# */

div.table {display:table; border-collapse:separate; } 
div.tr {display:table-row ; } 
div.td {display:table-cell; } 

/* ######################## MAIL-FORMS ############################################## */

/* Bordered form */
form {
  min-width:300px;
  max-width:800px; 
  width: 777px;
  font-size	: 1.2em;
  /* border: 3px solid #f1f1f1; */
  background-color: #337777;
} 

/* Full-width inputs */ 
input[type=text] {
  font-size	: 1.2em;
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 7px solid #ccc;
  box-sizing: border-box;
} 
/* Set a style for all buttons */
button {
  background-color: #77bb22;
  font-size	: 1.2em;
  font-weight	: bold;
  color: white;
  padding: 7px 7px;
  margin: 7px 0;
  border: none;
  cursor: pointer;
  width: 77%;
} 
/* Center the avatar image inside this container */ 
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
} 

/* Avatar image */ 
img.avatar {
  width: 40%;
  border-radius: 50%;
} 
/* Ordericon */
img.ordericon {
  width: 30%;
  border-radius: 50%;
} 

/* Add padding to containers  */
.mailcontainer {
  padding: 16px;
}





.form-control-wdh{type:hidden;}

/* ######################## CAPTCHA-Styles  ######################################## */

.captcha-base       { /* styling of captcha box */   }
.aptcha-base__input { /* styling of captcha input */ }
.captcha-reset      { /* styling of reset button */  }
.captcha_valid      { /* when is valid */            }
.captcha_invalid    { /* when is invalid */          }
.captcha-base__input_valid   { /* styling of captcha input when is valid */   }
.captcha-base__input_invalid { /* styling of captcha input when is invalid */ }


/* ######################## Inverse Titel  ######################################## */

.invColor {padding:20px; background-color: #005070; color: white;}

/* ######################## Background-Effect  ######################################## */

.bgchange:hover { background-color:#fa7; }

/* ######################## Button-hstretch-Effect  ######################################## */

.hstretch:hover { width: 5.2%; }

/* ######################## Button-highlight-Effect  ######################################## */

.highlight:hover { filter: brightness(1.5); }

/* ######################## Versalien EFFECT  ######################################## */

.versal { font-size: 1.5em; font-weight: bold; }

/* ######################## GROW EFFECT  ######################################## */

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.2); }

.grow1 { transition: all .02s ease-in-out; }
.grow1:hover { transform: scale(1.02);}


/* ######################## Shrink EFFECT  ######################################## */

.shrink{
  cursor: pointer;
/*  transition: all .1s ease-in-out; */
  transition: all .2s ease-in; 
}
.shrink:active {
/*  transform: translateY(12px); 
  transform: rotate(30deg); */
  transform: scale(0.77);
}

/* ######################## PERMANENT IMAGES  ######################################## */

#fiximage 
{ 
   position: fixed;  
   float: right;  
   bottom: 0px;  
   right: 0px; 
   width: 77px; 
   height: 47px; 
   /* background-image: url("../media/cmd-logo-fix.gif");*/ 
   background-size: 77px 47px;
   z-index: 99;
 }
#fixsocial 
{ 
   position: fixed;  
   float: left;  
   bottom: 0px;  
   left: 0px; 
   width: 220px; 
   height: 77px; 
  /* background-image: url("../media/social-icons.gif"); */
   background-size: 220px 77px;
   z-index: 99;
 }

#sidemenue 
{ 
   position: fixed;  
   float: left;  
   bottom: 10px;  
   left: 5px; 
   width: 14px; 
   height: 50px; 
   background-image: url("../media/home.png"); 
   background-size: 14px 50px;
   z-index: 98;
 }

#sidebg 
{ 
   position: fixed;  
   float: left;  
   bottom: 0px;  
   left: 0px; 
   width: 20px; 
   height: 100%; 
   background-image: url("../media/home_bg.png"); 
   background-size: 20px 100%;
   z-index: 97;
 }


/* ######################## LOADER ############################################## */

/* Center the loader */
#loader {
  background-color:black;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 50px;
  height: 50px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 40%;
  border-top:    1px solid black; /*blue;*/
  border-right:  1px solid black; /*red;*/
  border-bottom: 1px solid black; /*yellow;*/
  border-left:   1px solid black; /*green;*/
  width: 1px; /*  width: 30px; */
  height: 1px; /*  height: 30px; */
  -webkit-animation: spin 0.1s linear infinite;
  animation: spin 0.1s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1.2s;
  animation-name: animatebottom;
  animation-duration: 1.2s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: none;
/*  text-align: center; */
}




/* ######################## RESPO-SLIDER  (horizontal) ############################################# */

/* right2left */    
  div#hslider { overflow: hidden;   margin: auto;  height: 100%;  width: 100%;  } 
  div#hslider div {  position: relative;  margin: 0;   left: 0;   font-size: 0;  animation: 30s hslider infinite;}
  div#hslider div img { float:left; }  
  @keyframes hslider { 0%{left: 0%; } 20%{ left: 0%; } 25%{ left: -100%; } 45%{ left: -100%; } 50%{ left: -200%; } 70%{ left: -200%; } 75%{ left: -300%; } 95%{ left: -300%; } }

/* ######################## RESPO-SLIDER  (vertikal) ############################################# */
/* bottom2top  */
  div#vslider { overflow: hidden;   margin: auto;   height: 100%;  width: 100%; }
  div#vslider div { position: relative; margin: 0;   top: 0;   font-size: 0;  animation: 12s vslider infinite;}
  div#vslider div img { float: top; }
  @keyframes vslider { 0%{top: 0%; } 20%{ top: 0%; } 25%{ top: -100%; } 45%{ top: -100%; } 50%{ top: -200%; } 70%{top: -200%; } 75%{ top: -300%; } 95%{ top: -300%; } }








/* ######################## ACCORDION ############################################## */


#container{
  width: 90%;
  height: auto;
  margin: 0 auto;
  margin-top: 3%;
  border-top: 1px solid #bdbdbd;
  border-left: 1px solid #bdbdbd;
  border-right: 1px solid #bdbdbd;
}

.accordion label{
  display:block;
  background-color: #eeeeee;
  padding: 10px;
  color: #424242;
  text-shadow: 0 0 12px rgba(255,255,255,0.7);
  cursor: pointer;
  border-bottom: 1px solid #bdbdbd;
  border-top: 1px solid #ffffff;
}

.accordion p{
  color: #424242;
  padding: 10px;
  font-size: 0.8em;
  line-height: 1.7em;
  border-bottom: 1px solid #bdbdbd;
  visibility: hidden;
  opacity: 0;
  display: none;
  text-align: left;
  background-color: #ffa;
  margin-top: 0px;
}

/* for Desktop */

#a1a:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#a1a {  display: none;  position: relative;}
#a1b:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#a1b {  display: none;  position: relative;}

#a2a:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#a2a {  display: none;  position: relative;}

#tm:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tm {  display: none;  position: relative;}
#tn:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tn {  display: none;  position: relative;}
#to:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#to {  display: none;  position: relative;}
#tp:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tp {  display: none;  position: relative;}
#rs:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#rs {  display: none;  position: relative;}
#aa:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#aa {  display: none;  position: relative;}
#ab:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#ab {  display: none;  position: relative;}
#ac:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#ac {  display: none;  position: relative;}
#ad:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#ad {  display: none;  position: relative;}
#ae:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#ae {  display: none;  position: relative;}
#af:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#af {  display: none;  position: relative;}
#ag:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#ag {  display: none;  position: relative;}
#ah:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#ah {  display: none;  position: relative;}
#ai:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#ai {  display: none;  position: relative;}
#aj:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#aj {  display: none;  position: relative;}
#ak:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#ak {  display: none;  position: relative;}
#al:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#al {  display: none;  position: relative;}
#am:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#am {  display: none;  position: relative;}


/* for Tablet */

#ttm:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#ttm {  display: none;  position: relative;}
#ttn:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#ttn {  display: none;  position: relative;}
#tto:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tto {  display: none;  position: relative;}
#ttp:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#ttp {  display: none;  position: relative;}
#trs:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#trs {  display: none;  position: relative;}
#taa:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#taa {  display: none;  position: relative;}
#tab:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tab {  display: none;  position: relative;}
#tac:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tac {  display: none;  position: relative;}
#tad:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tad {  display: none;  position: relative;}
#tae:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tae {  display: none;  position: relative;}
#taf:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#taf {  display: none;  position: relative;}
#tag:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tag {  display: none;  position: relative;}
#tah:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tah {  display: none;  position: relative;}
#tai:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tai {  display: none;  position: relative;}
#taj:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#taj {  display: none;  position: relative;}
#tak:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tak {  display: none;  position: relative;}
#tal:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tal {  display: none;  position: relative;}
#tam:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tam {  display: none;  position: relative;}


/* for Mobile */

#mtm:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mtm {  display: none;  position: relative;}
#mtn:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mtn {  display: none;  position: relative;}
#mto:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mto {  display: none;  position: relative;}
#mtp:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mtp {  display: none;  position: relative;}
#mrs:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mrs {  display: none;  position: relative;}
#maa:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#maa {  display: none;  position: relative;}
#mab:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mab {  display: none;  position: relative;}
#mac:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mac {  display: none;  position: relative;}
#mad:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mad {  display: none;  position: relative;}
#mae:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mae {  display: none;  position: relative;}
#maf:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#maf {  display: none;  position: relative;}
#mag:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mag {  display: none;  position: relative;}
#mah:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mah {  display: none;  position: relative;}
#mai:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mai {  display: none;  position: relative;}
#maj:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#maj {  display: none;  position: relative;}
#mak:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mak {  display: none;  position: relative;}
#mal:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mal {  display: none;  position: relative;}
#mam:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mam {  display: none;  position: relative;}





/* Medienberufe  - Desktop */


#b01:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b01 {  display: none;  position: relative;}
#b02:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b02 {  display: none;  position: relative;}
#b03:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b03 {  display: none;  position: relative;}
#b04:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b04 {  display: none;  position: relative;}
#b05:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b05 {  display: none;  position: relative;}
#b06:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b06 {  display: none;  position: relative;}
#b07:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b07 {  display: none;  position: relative;}
#b08:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b08 {  display: none;  position: relative;}
#b09:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b09 {  display: none;  position: relative;}
#b10:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b10 {  display: none;  position: relative;}
#b11:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b11 {  display: none;  position: relative;}
#b12:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b12 {  display: none;  position: relative;}
#b13:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b13 {  display: none;  position: relative;}
#b14:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b14 {  display: none;  position: relative;}
#b15:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b15 {  display: none;  position: relative;}
#b16:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b16 {  display: none;  position: relative;}
#b17:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b17 {  display: none;  position: relative;}
#b18:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b18 {  display: none;  position: relative;}
#b19:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b19 {  display: none;  position: relative;}
#b20:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b20 {  display: none;  position: relative;}
#b21:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b21 {  display: none;  position: relative;}
#b22:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b22 {  display: none;  position: relative;}
#b23:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b23 {  display: none;  position: relative;}
#b24:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b24 {  display: none;  position: relative;}
#b25:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b25 {  display: none;  position: relative;}
#b26:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b26 {  display: none;  position: relative;}
#b27:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b27 {  display: none;  position: relative;}
#b28:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b28 {  display: none;  position: relative;}
#b29:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b29 {  display: none;  position: relative;}
#b30:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b30 {  display: none;  position: relative;}
#b31:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b31 {  display: none;  position: relative;}
#b32:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b32 {  display: none;  position: relative;}
#b33:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b33 {  display: none;  position: relative;}
#b34:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b34 {  display: none;  position: relative;}
#b35:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b35 {  display: none;  position: relative;}
#b36:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b36 {  display: none;  position: relative;}
#b37:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b37 {  display: none;  position: relative;}
#b38:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b38 {  display: none;  position: relative;}
#b39:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b39 {  display: none;  position: relative;}
#b40:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b40 {  display: none;  position: relative;}
#b41:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b41 {  display: none;  position: relative;}
#b42:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b42 {  display: none;  position: relative;}
#b43:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b43 {  display: none;  position: relative;}
#b44:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b44 {  display: none;  position: relative;}
#b45:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b45 {  display: none;  position: relative;}
#b46:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b46 {  display: none;  position: relative;}
#b47:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b47 {  display: none;  position: relative;}
#b48:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b48 {  display: none;  position: relative;}
#b49:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b49 {  display: none;  position: relative;}
#b50:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b50 {  display: none;  position: relative;}
#b51:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b51 {  display: none;  position: relative;}
#b52:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b52 {  display: none;  position: relative;}
#b53:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b53 {  display: none;  position: relative;}
#b54:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b54 {  display: none;  position: relative;}
#b55:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b55 {  display: none;  position: relative;}
#b56:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b56 {  display: none;  position: relative;}
#b57:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b57 {  display: none;  position: relative;}
#b58:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b58 {  display: none;  position: relative;}
#b59:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b59 {  display: none;  position: relative;}
#b60:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b60 {  display: none;  position: relative;}
#b61:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b61 {  display: none;  position: relative;}
#b62:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#b62 {  display: none;  position: relative;}







/* Medienberufe  - Tablet */


#tb01:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb01 {  display: none;  position: relative;}
#tb02:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb02 {  display: none;  position: relative;}
#tb03:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb03 {  display: none;  position: relative;}
#tb04:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb04 {  display: none;  position: relative;}
#tb05:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb05 {  display: none;  position: relative;}
#tb06:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb06 {  display: none;  position: relative;}
#tb07:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb07 {  display: none;  position: relative;}
#tb08:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb08 {  display: none;  position: relative;}
#tb09:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb09 {  display: none;  position: relative;}
#tb10:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb10 {  display: none;  position: relative;}
#tb11:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb11 {  display: none;  position: relative;}
#tb12:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb12 {  display: none;  position: relative;}
#tb13:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb13 {  display: none;  position: relative;}
#tb14:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb14 {  display: none;  position: relative;}
#tb15:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb15 {  display: none;  position: relative;}
#tb16:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb16 {  display: none;  position: relative;}
#tb17:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb17 {  display: none;  position: relative;}
#tb18:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb18 {  display: none;  position: relative;}
#tb19:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb19 {  display: none;  position: relative;}
#tb20:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb20 {  display: none;  position: relative;}
#tb21:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb21 {  display: none;  position: relative;}
#tb22:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb22 {  display: none;  position: relative;}
#tb23:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb23 {  display: none;  position: relative;}
#tb24:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb24 {  display: none;  position: relative;}
#tb25:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb25 {  display: none;  position: relative;}
#tb26:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb26 {  display: none;  position: relative;}
#tb27:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb27 {  display: none;  position: relative;}
#tb28:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb28 {  display: none;  position: relative;}
#tb29:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb29 {  display: none;  position: relative;}
#tb30:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb30 {  display: none;  position: relative;}
#tb31:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb31 {  display: none;  position: relative;}
#tb32:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb32 {  display: none;  position: relative;}
#tb33:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb33 {  display: none;  position: relative;}
#tb34:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb34 {  display: none;  position: relative;}
#tb35:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb35 {  display: none;  position: relative;}
#tb36:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb36 {  display: none;  position: relative;}
#tb37:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb37 {  display: none;  position: relative;}
#tb38:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb38 {  display: none;  position: relative;}
#tb39:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb39 {  display: none;  position: relative;}
#tb40:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb40 {  display: none;  position: relative;}
#tb41:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb41 {  display: none;  position: relative;}
#tb42:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb42 {  display: none;  position: relative;}
#tb43:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb43 {  display: none;  position: relative;}
#tb44:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb44 {  display: none;  position: relative;}
#tb45:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb45 {  display: none;  position: relative;}
#tb46:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb46 {  display: none;  position: relative;}
#tb47:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb47 {  display: none;  position: relative;}
#tb48:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb48 {  display: none;  position: relative;}
#tb49:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb49 {  display: none;  position: relative;}
#tb50:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb50 {  display: none;  position: relative;}
#tb51:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb51 {  display: none;  position: relative;}
#tb52:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb52 {  display: none;  position: relative;}
#tb53:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb53 {  display: none;  position: relative;}
#tb54:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb54 {  display: none;  position: relative;}
#tb55:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb55 {  display: none;  position: relative;}
#tb56:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb56 {  display: none;  position: relative;}
#tb57:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb57 {  display: none;  position: relative;}
#tb58:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb58 {  display: none;  position: relative;}
#tb59:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb59 {  display: none;  position: relative;}
#tb60:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb60 {  display: none;  position: relative;}
#tb61:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb61 {  display: none;  position: relative;}
#tb62:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#tb62 {  display: none;  position: relative;}







/* Medienberufe  - Mobile */


#mb01:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb01 {  display: none;  position: relative;}
#mb02:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb02 {  display: none;  position: relative;}
#mb03:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb03 {  display: none;  position: relative;}
#mb04:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb04 {  display: none;  position: relative;}
#mb05:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb05 {  display: none;  position: relative;}
#mb06:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb06 {  display: none;  position: relative;}
#mb07:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb07 {  display: none;  position: relative;}
#mb08:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb08 {  display: none;  position: relative;}
#mb09:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb09 {  display: none;  position: relative;}
#mb10:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb10 {  display: none;  position: relative;}
#mb11:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb11 {  display: none;  position: relative;}
#mb12:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb12 {  display: none;  position: relative;}
#mb13:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb13 {  display: none;  position: relative;}
#mb14:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb14 {  display: none;  position: relative;}
#mb15:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb15 {  display: none;  position: relative;}
#mb16:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb16 {  display: none;  position: relative;}
#mb17:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb17 {  display: none;  position: relative;}
#mb18:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb18 {  display: none;  position: relative;}
#mb19:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb19 {  display: none;  position: relative;}
#mb20:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb20 {  display: none;  position: relative;}
#mb21:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb21 {  display: none;  position: relative;}
#mb22:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb22 {  display: none;  position: relative;}
#mb23:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb23 {  display: none;  position: relative;}
#mb24:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb24 {  display: none;  position: relative;}
#mb25:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb25 {  display: none;  position: relative;}
#mb26:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb26 {  display: none;  position: relative;}
#mb27:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb27 {  display: none;  position: relative;}
#mb28:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb28 {  display: none;  position: relative;}
#mb29:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb29 {  display: none;  position: relative;}
#mb30:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb30 {  display: none;  position: relative;}
#mb31:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb31 {  display: none;  position: relative;}
#mb32:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb32 {  display: none;  position: relative;}
#mb33:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb33 {  display: none;  position: relative;}
#mb34:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb34 {  display: none;  position: relative;}
#mb35:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb35 {  display: none;  position: relative;}
#mb36:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb36 {  display: none;  position: relative;}
#mb37:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb37 {  display: none;  position: relative;}
#mb38:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb38 {  display: none;  position: relative;}
#mb39:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb39 {  display: none;  position: relative;}
#mb40:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb40 {  display: none;  position: relative;}
#mb41:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb41 {  display: none;  position: relative;}
#mb42:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb42 {  display: none;  position: relative;}
#mb43:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb43 {  display: none;  position: relative;}
#mb44:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb44 {  display: none;  position: relative;}
#mb45:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb45 {  display: none;  position: relative;}
#mb46:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb46 {  display: none;  position: relative;}
#mb47:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb47 {  display: none;  position: relative;}
#mb48:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb48 {  display: none;  position: relative;}
#mb49:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb49 {  display: none;  position: relative;}
#mb50:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb50 {  display: none;  position: relative;}
#mb51:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb51 {  display: none;  position: relative;}
#mb52:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb52 {  display: none;  position: relative;}
#mb53:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb53 {  display: none;  position: relative;}
#mb54:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb54 {  display: none;  position: relative;}
#mb55:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb55 {  display: none;  position: relative;}
#mb56:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb56 {  display: none;  position: relative;}
#mb57:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb57 {  display: none;  position: relative;}
#mb58:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb58 {  display: none;  position: relative;}
#mb59:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb59 {  display: none;  position: relative;}
#mb60:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb60 {  display: none;  position: relative;}
#mb61:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb61 {  display: none;  position: relative;}
#mb62:checked ~ .hiddentext{  display: block;  visibility: visible;  opacity: 1;}
input#mb62 {  display: none;  position: relative;}