/**/
.stop-all-animations {
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
}

/* Preloader bis Seite voll geladen ist*/
#loading {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  display: block;
  opacity: 0.0;
  background-color: #fff;
  z-index: 99999;
  text-align: center;
}

#loading-image {
  margin-top:10%;
  z-index: 100;
}

#loading_pic{
	
	position:absolute;
	margin:0 40%;
	margin-top:100px;
	text-align:center;
	font-size:25px;
	font-weight:bold;
}

body, html{
	
	/*markieren von text verhindern*/
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
	
	margin: 0px;
	padding:0px;	

	font-family:Arial, Verdana;
	font-size:1.0em;
}

.hero-body {
  padding: 0px;
}


.spacer-is-very-small{
	
	margin:5px;
	
}
.spacer-is-small{
	
	margin:10px;
	
}

.spacer-is-medium{
	
	margin:20px;
	
}

.spacer-is-large{
	
	margin:40px;
	
}

/* Hintergrund der gesamten APP*/
#container{
	
	
	padding:0%; /* Einrücken aller Elemente der Seiten responsiv*/
	
	/*background-image: url("../pics/backgrounds/blue_lines.jpg");  */
	background-position: left top; 
	/* background-size: 100% 100%; */ /*Background wird gestreckt in Höhe und Breite zu 100% */ /* cover */
	background-repeat:repeat; ;/*background-repeat: no-repeat; */
	/*background-attachment: fixed;	*/ 
	
	/* Perspektivischen Angaben für Rotations-3D-Effekte */
	-moz-perspective: 3000px;
    -ms-perspective: 3000px;
    -webkit-perspective: 3000px;
    perspective: 3000px; 
  
    -moz-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    -webkit-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%; 
}

/* Hintergrund + Borderstyles aller Einzelseiten*/
#seite1, #seite2, #seite3, #seite4, #seite5, #seite6, #seite7, #seite8, #seite9, #seite10, #seite11, #seite12, #seite13, #seite14{
		
	padding:0px;
	/*background-color:rgba(200, 200, 200, 0.4);*/
	/*background: rgb(1,3,4);
    background: linear-gradient(159deg, rgba(1,3,4,1) 0%, rgba(50,53,52,1) 35%, rgba(177,179,168,1) 100%);
	box-shadow: 3px 3px 10px 0px black;
	-webkit-box-shadow: 3px 3px 10px 0px black;
	-moz-box-shadow: 3px 3px 10px 0px black;	*/
	border: 0px solid #233899;
	border-radius:3px;
	

	
}

.reference_col{
		position:relative; /*Animationen (apsolut positioniert) verhalten sich relativ zur Spalte*/
}


#seite1, #seite2, #seite3, #seite4, #seite5, #seite6, #seite7, #seite8, #seite9, #seite10, #seite11, #seite12, #seite13, #seite14, 
#buttons-cover,
#animations_demo_box{

	display:none; /* Alle Seiten zunächst ausgeblendet */
}

#seite1_popup, #seite2_popup, #seite3_popup, #seite4_popup, #seite5_popup, #seite6_popup, #seite7_popup, #seite8_popup, #seite9_popup, #seite10_popup, #seite11_popup, #seite12_popup, #seite13_popup, #seite14_popup, 
#popup_firma, #popup_ansprechpartner, #popup_email, #popup_einwilligung{
	
	display:none;
	
	z-index:10000000000000000;
	position: fixed;	
	top:200px;
	
	padding:20px;
	margin-left: 33% ; /* ungefähr mittig */
	
	width:33%;
	
	text-align:center;

}
@media (max-width: 768px) {
#seite1_popup, #seite2_popup, #seite3_popup, #seite4_popup, #seite5_popup, #seite6_popup, #seite7_popup, #seite8_popup, #seite9_popup, #seite10_popup, #seite11_popup, #seite12_popup, #seite13_popup, #seite14_popup, 
#popup_firma, #popup_ansprechpartner, #popup_email, #popup_einwilligung{
	
	top:50%; /* weiter von oben eingerückt */
	margin-left: 15% ; /* ungefähr mittig */
		
	width:70%;

}

}

/*Divs und Objekte zentrieren (keine Schrift! Für Text passiert das direkt via STYLE-Attribut im HTML-Code)*/
.zentrieren{
	
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  
}

.zentrieren_vertical{
	
	display: table-cell; 
	vertical-align: middle;
}
@media (max-width: 480px) {
	#seite1 .columns{
		display:block;
	}
}
.weiter, .zurueck{
	
	color:#fff;
	text-decoration:none; /*kein unterstrichener Link*/
	
	float:left;
	margin:10px;
	padding:10px;
	
	background-color:rgba(255, 255, 255, 0.4);
	box-shadow: 3px 3px 10px 0px black;
	-webkit-box-shadow: 3px 3px 10px 0px black;
	-moz-box-shadow: 3px 3px 10px 0px black;	
	
	border: 1px solid black;
	border-radius:0px;
	
}

.weiter:hover, .zurueck:hover{
	
	background-color:rgba(255, 0, 0, 0.9);
	
}

/* Button-Cover (solange Animationen laufen) */
#buttons-cover{
	
	background-color:transparent; 
	position:absolute;
	width:80%;
	height:90px;
	
}

/*Minus und Plus-Buttons für Nummernfelder*/
#minus, #plus { 

    font-size:20px;
	color:#ffffff;
	
	padding: 5px 5px 9px 5px; 
	background: #004173; 
	box-shadow: 0 1px 5px #0062aa, inset 0 10px 20px #b7f9ff;
	-webkit-box-shadow: 0 1px 5px #0062aa, inset 0 10px 20px #b7f9ff;
	-moz-box-shadow: 0 1px 5px #0062aa, inset 0 10px 20px #b7f9ff;		
	
	display: inline-block;
}

.select select {
  font-size: 16px;
}

.control.has-icons-left .input, .control.has-icons-left .select select {
  padding-left: 20px;
}
@media (max-width: 480px) {
	.control.has-icons-left .input, .control.has-icons-left .select select {
	  padding-left: 8px;
	}
}

.select select[multiple] option:hover {
    background-color: #CAE9FF;
	font-weight:bold;
}

.select select[multiple] option:checked {
	font-weight:bold;
	background-color:#077BD7;
}

#select11{
	
	height:300px;
	width:500px;
}

@media (min-width: 768px) {
	#select11{
		
		width:500px;
	}
}

.title.is-3{
    display: none;
}

#branchenname{
	z-index:100;
	padding:5px 10px;
	
	color: #ffffff;
	font-size:20px;
	font-weight:bold;
	background-color:#047AD7;
}

#branchenbeschreibung{
	
	z-index:0;
	padding:10px 14%;
	background-color:#FFF;
	opacity: 0;
	
	font-size:16px;
	color:#444;
	/*text-shadow: #000 2px 1px 4px; */
	text-align:center;
	
}
@media (max-width: 480px) {
	#branchenbeschreibung{
		
		width:250px;
		font-size:13px;
		z-index:0;	
		padding:10px;

		text-align:left;

	}
}

.titel_branchenanfragebutton{
	padding: 5px;
    color: #047AD7;
    font-size: 23px;
    line-height: 25px;
    font-weight: bold;
    /* background-color: #047AD7; */
    text-align: center;
    margin: -10px 0px 15px 0px;
}

@media (max-width: 480px) {
	.titel_branchenanfragebutton{

		text-align: left;
	}
}

.button {

  border-radius: 3px;
  background-color: #60B523; 
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 22px;
  font-weight:bold;
  padding: 20px;
  width: 260px;
  transition: all 0.5s;
  cursor: pointer;

}



.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
@media (max-width: 480px) {
	#hier_anfragen{
		width:250px;
		margin:0px;
		padding:10px 5px;
	}
}
#branchenanfrage{
	display:none;
}

/*STANDARD ELEMENTE CSS*/
/* ######################################################################################################### */


/* Textshatten für texte*/
p.is-shadowed, span.is-shadowed, h1.is-shadowed, h2.is-shadowed, h3.is-shadowed{

	text-shadow: 2px 2px 0px #fff; /* h-shadow v-shadow blur-radius color|none|initial|inherit; */
	
}

/* Textglowing für  texte*/
p.is-glowing, span.is-glowing, h1.is-glowing, h2.is-glowing, h3.is-glowing{

	text-shadow: 0px 0px 7px #fff; /* h-shadow v-shadow blur-radius color|none|initial|inherit; */
	
}

/* Schatten für Sectionen, Divs, Buttons, Bilder*/

section.is-shadowed, div.is-shadowed, a.is-shadowed{

	box-shadow: 3px 3px 5px 0px #000; /* none|h-offset v-offset blur spread color |inset|initial|inherit; */
	-webkit-box-shadow: 3px 3px 5px 0px #000;
	-moz-box-shadow: 3px 3px 5px 0px #000;	
	
}



label{
	
	vertical-align:top; 
}


/*FOMULAR CSS*/
/* ######################################################################################################### */

/* Standard Checkboxes und Radiobuttons ausblenden*/
input[type="checkbox"], input[type="radio"] {
    display:none;
}

/* Über Slidern nicht aktuellen Wert als Tooltip anzeigen*/
input[type=range]::-ms-tooltip {
    display: none;
}

/* Breite und vertikale Abstände aller Formularelemente*/

	input[type="text"], input[type="email"], .textarea{
		/*min-width:75%;
		width:75%;*/

	}

	.numbertype {	
		text-align:center;
	}
	.select{
	
	}
	.slider_horizontal_container input{
		min-width:50%;
		width:50%;	
	}	

.label_box_checkbox_radio{
	 -ms-user-select: None;  /* Klick auf DIV führt nicht zu versehentlichem Markieren*/
	-moz-user-select: None;
	-webkit-user-select: None;
	user-select: None; 
	
	margin-left: 40px; /*Label nach rechts einrücken */
}

.label_box_checkbox_radio_horizontal{
	
	float:left;
		
	 -ms-user-select: None;  /* Klick auf DIV führt nicht zu versehentlichem Markieren*/
	-moz-user-select: None;
	-webkit-user-select: None;
	user-select: None; 
	
	margin-left: 0px; /*Label nach rechts einrücken */
	margin-right: 5px; 
}

.slider_horizontal_container label {
    margin-right: 10px; /*Abstand Label und horiz. Slider*/
}



.slider_vertikal_container label {
    vertical-align: top;
    text-align: center;
    margin: 0px 0px 0px 35px;
}

.input, .textarea, .select{ /* Rahmengetaltung aller Formular-Elemente*/
	
	background: #fff;
	box-shadow: inset 2px 2px 2px #aaa;
	-webkit-box-shadow: inset 2px 2px 2px #aaa;
	-moz-box-shadow: inset 2px 2px 2px #aaa;
	border: 1px solid #bbb;
}

/* Popup-Optionen Optionen*/
/*########################################*/

.pop_modern{
	
	color:#fff;
	
	border-radius:5px;	
	border: 2px solid #fff;
	
	background-color: #d63131; /*dark red*/
	
	box-shadow: rgba(0, 0, 0, 0.20) 0px 14px 25px, rgba(0, 0, 0, 0.20) 0px 10px 10px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.20) 0px 14px 25px, rgba(0, 0, 0, 0.20) 0px 10px 10px;
	-moz-box-shadow: rgba(0, 0, 0, 0.20) 0px 14px 25px, rgba(0, 0, 0, 0.20) 0px 10px 10px;
	
}


/* Checkboxes Radio Optionen*/
/*########################################*/
	
	/* .quadrat */
	/*********************************************/
	.quadrat input[type="checkbox"] + label::before,
	.quadrat input[type="radio"] + label::before{
	  width: 24px;
	  height: 24px;

	  display: block;
	  content: "";
	  float: left;
	  margin: 2px 10px 5px 3px;
	  
	  background: #ddd;
	  box-shadow: inset 2px 2px 5px #222;
	  
	  border: 3px solid #bbb;
	  
	}
	
	.quadrat input[type="checkbox"]:checked+label::before,
	.quadrat input[type="radio"]:checked+label::before{

	  background-color: lightgreen; 
	}
	
	/* .kreis */
	/*********************************************/
	.kreis input[type="checkbox"] + label::before,
	.kreis input[type="radio"] + label::before{
	  width: 25px;
	  height: 25px;

	  display: block;
	  content: "";
	  float: left;
	  margin: 0px 10px 5px 5px;
	  
	  background: #ddd;
	  box-shadow: inset 2px 2px 5px #222;
	  border: 3px solid #bbb;
	  
	  border-radius:13px; 
	}
	
	.kreis input[type="checkbox"]:checked+label::before,
	.kreis input[type="radio"]:checked+label::before{
		
	  background-color: lightgreen;
	  
	}	
	
	/* .kreis_schwarz*/
	/*********************************************/	
	.kreis_schwarz input[type="checkbox"] + label::before,
	.kreis_schwarz input[type="radio"] + label::before{
	  width: 20px;
	  height: 20px;
	  border: 1px solid black;
	  background-color: white;
	  display: block;
	  content: "";
	  float: left;
	  margin: 3px 10px 5px 8px;
	  
	  box-shadow: none;
	  
	  border-radius:10px; 
	}

	.kreis_schwarz input[type="checkbox"]:checked+label::before,
	.kreis_schwarz input[type="radio"]:checked+label::before{
	  background: white url("../pics/icons/media-record-2x.png") no-repeat center;
	  box-shadow: none;
	  border: 1px solid black;
	}	


	
	/* .haken_schwarz */
	/*********************************************/
	.haken_schwarz input[type="checkbox"] + label::before,
	.haken_schwarz input[type="radio"] + label::before	{
	  width: 20px;
	  height: 20px;
	  border: 1px solid black;
	  background-color: white;
	  display: block;
	  content: "";
	  float: left;
	  margin: 3px 10px 5px 5px;
	}
	
	.haken_schwarz input[type="checkbox"]:checked+label::before,
	.haken_schwarz input[type="radio"]:checked+label::before{

	  background: white url("../pics/icons/check-2x.png") no-repeat center;
	}	

	/* .haken_weiss */
	/*********************************************/
	.haken_weiss input[type="checkbox"] + label::before,
	.haken_weiss input[type="radio"] + label::before{
	  width: 20px;
	  height: 20px;
	  border: 1px solid black;
	  background-color: white;
	  display: block;
	  content: "";
	  float: left;
	  margin: 3px 10px 5px 5px;
	}
	
	/* .angekreuzt_schwarz */
	/*********************************************/
	.angekreuzt_schwarz input[type="checkbox"] + label::before,
	.angekreuzt_schwarz input[type="radio"] + label::before	{
	  width: 20px;
	  height: 20px;
	  border: 1px solid black;
	  background-color: white;
	  display: block;
	  content: "";
	  float: left;
	  margin: 3px 10px 5px 5px;
	}
	
	.angekreuzt_schwarz input[type="checkbox"]:checked+label::before,
	.angekreuzt_schwarz input[type="radio"]:checked+label::before{

	  background: white url("../pics/icons/x-2x.png") no-repeat center;
	}	

	/* .haken_weiss */
	/*********************************************/
	.haken_weiss input[type="checkbox"] + label::before,
	.haken_weiss input[type="radio"] + label::before{
	  width: 20px;
	  height: 20px;
	  border: 1px solid black;
	  background-color: white;
	  display: block;
	  content: "";
	  float: left;
	  margin: 3px 10px 5px 5px;
	}	
	
	.haken_weiss input[type="checkbox"]:checked+label::before,
	.haken_weiss input[type="radio"]:checked+label::before{

	  background: white url("../pics/icons/check-2x.png") no-repeat center;
	  filter: invert(100%);
	}
	
	/* .slider_checkbox */
	/*********************************************/
	.slider_checkbox input[type="checkbox"] + label { /* Slider_Checkbox_BG OFF*/
	  width: 60px;
	  height: 30px;
	  border-radius: 30px;
	  
	  background: #ddd;
	  box-shadow: inset 2px 2px 5px #222;
	  border: 3px solid #bbb;
	  
	  display: inline-block;
	  content: "";	  
	  float:left;
	  margin-right: 15px;
	  transition: background-color 0.4s linear;
	}
	.slider_checkbox input[type="checkbox"] + label:hover {
	  cursor: pointer;
	}
	.slider_checkbox input[type="checkbox"] + label::before { /* Slider_Checkbox_Knopf OFF*/
	  width: 30px;
	  height: 30px;
	  border-radius: 30px;
	  display: block;
	  content: "";
	  float: left;
	  margin: -2px 0px 0px 0px ;
	  transition: margin 0.1s linear;
	  background-color: #fff;
	  box-shadow: 2px 2px 5px #333333; 
	}
	.slider_checkbox input[type="checkbox"]:checked+label{ /* Slider_Checkbox_BG ON*/
	  background-color: lightgreen;
	  
	}
	.slider_checkbox input[type="checkbox"]:checked+label::before { /* Slider_Checkbox_Knopf ON*/
	  margin: -2px 0px 0px 30px ;
	  box-shadow: 2px 2px 5px #333333;
		background-color: white;	  

	}	

			
	/* Checkboxes Zusatz-Optionen*/
	/* .schatten_schwarz */
    .schatten_schwarz input[type="checkbox"] + label::before,
	.schatten_schwarz input[type="radio"] + label::before{
	  box-shadow: 2px 2px 5px #333333;
	}
	
	/* .schatten_schwarz */
    .schatten_weiss input[type="checkbox"] + label::before,
	.schatten_weiss input[type="radio"] + label::before{
	  box-shadow: 2px 2px 5px #ffffff;
	}	
	
	
	
/* Slider Horizontal Optionen*/
/*########################################*/


	/* Grundgerüst für alle Browser */
	/*********************************************/
	
	.label_box_slider_horizontal{
		float:left;
		margin:12px 20px 0px 0px;
	}
	 
	.slider_horizontal_container {
	  background-color: transparent;
	  margin: 0px 0px 10px 0px;
	  height: 50px;
	}

	.slider_horizontal_container input[type=text] {
	  height: 50px;
	}
	.slider_horizontal_container input[type=text],
	.slider_horizontal_container input[type=range] {
	  -webkit-appearance: none;
	  background-color:transparent;
	  
	  margin-top: 15px;
	}
	.slider_horizontal_container input[type=range]:focus {
	  outline: none;
	}
	.slider_horizontal_container input[type=range]::-webkit-slider-runnable-track { /*Chrome*/
	  height: 15px;
	  cursor: pointer;
	  animate: 0.2s;
	  background: lightgrey;
	  border-radius: 1.3px;
	  
	  box-shadow: inset 2px 2px 5px #222;
	  border: 3px solid #bbb;
	}
	.slider_horizontal_container input[type=range]::-webkit-slider-thumb {  /*Chrome*/
	  box-shadow: 1px 1px 1px #000000;
	  border: 1px solid #000000;
	  height: 36px;
	  width: 16px;
	  border-radius: 3px;
	  background: #ffffff;
	  cursor: pointer;
	  -webkit-appearance: none;
	  margin-top: -14px;
	}
	.slider_horizontal_container input[type=range]:focus::-webkit-slider-runnable-track { /*Chrome*/
	  background: lightgreen;
	}
	.slider_horizontal_container input[type=range]::-moz-range-track { /* Firefox*/
	  height: 10px;
	  cursor: pointer;
	  animate: 0.2s;
	  background: lightgrey;
	  border-radius: 3px;
	  box-shadow: inset 2px 2px 5px #222;
	  border: 3px solid #bbb;
	}
	.slider_horizontal_container input[type=range]:focus::-moz-range-track { /* Firefox*/
	  background: lightgreen;
	}	
	.slider_horizontal_container input[type=range]::-moz-range-thumb { /* Firefox*/
	  box-shadow: 1px 1px 1px #000000, 0px 0px 1px transparent;
	  border: 1px solid #000000;
	  height: 36px;
	  width: 16px;
	  border-radius: 3px;
	  background: #ffffff;
	  cursor: pointer;
	}

	.slider_horizontal_container input[type=range]::-ms-track { /* IE Edge*/
	  height: 15px;
	  cursor: pointer;
	  animate: 0.2s;
	  background: transparent;
	  border-color: transparent;
	  border-width: 16px 0;
	  color: transparent;

	}
	.slider_horizontal_container input[type=range]::-ms-fill-lower { /* IE Edge*/
	  background: lightgrey;
	  border: 3px solid #bbb;
	  border-radius: 2.6px;
	  box-shadow: inset 2px 2px 5px #222;
	}
	.slider_horizontal_container input[type=range]::-ms-fill-upper { /* IE Edge*/
	  background: lightgrey;
	  border: 3px solid #bbb;
	  border-radius: 2.6px;
	  box-shadow: inset 2px 2px 5px #222;
	}
	.slider_horizontal_container input[type=range]::-ms-thumb { /* IE Edge*/
	  box-shadow: 1px 1px 1px #000000, 0px 0px 1px transparent;
	  border: 1px solid #000000;
	  height: 36px;
	  width: 16px;
	  border-radius: 3px;
	  background: #ffffff;
	  margin-top:1px;
	  cursor: pointer;
	}
	.slider_horizontal_container input[type=range]:focus::-ms-fill-lower { /* IE Edge*/
	  background: lightgreen;
	}
	.slider_horizontal_container input[type=range]:focus::-ms-fill-upper { /* IE Edge*/
	  background:  lightgreen;
	}
	
	/* Slider Horizontal Zusatz-Optionen*/
	
	/* .modern_version */
	/*********************************************/
	
	.modern_version input[type=range]::-webkit-slider-thumb {
		
	  background: transparent url("../pics/buttons/regler-hightec-knopf-max-50px.png") 0px 0px no-repeat; 
	  box-shadow: none;
	  border: 0px solid #000000;
	  height: 58px;
	  width: 30px;
	  border-radius: 0px;
	  cursor: pointer;
	  -webkit-appearance: none;
	  
	  margin-top: -22px; /* Chrome*/
	}	

	.modern_version input[type=range]::-moz-range-thumb {
		
	  background: transparent url("../pics/buttons/regler-hightec-knopf-max-50px.png") 0px 4px no-repeat;  /* Firefox*/
	  box-shadow: none;
	  border: 0px solid #000000;
	  height: 58px;
	  width: 30px;
	  border-radius: 0px;
	  cursor: pointer;

	}	

	.modern_version input[type=range]::-ms-thumb {
		
	  background: transparent url("../pics/buttons/regler-hightec-knopf-max-50px.png") 0px 0px no-repeat; 
	  box-shadow: none;
	  border: 0px solid #000000;
	  height: 58px;
	  width: 30px;
	  border-radius: 0px;
	  cursor: pointer;
	  
	  margin-top:7px; /* IE Edge*/
	}	
	
	
/* Slider vertikal*/
/*########################################*/

	.drehen_90grad_links{
		
	transform: rotate(90deg);
	/*transform-origin: left;*/
	margin-top: 80px;  /* EInrücken Regler Links*/
	}

	.slider_vertikal_container input[type="range"]{
		
		
		cursor: pointer;
		-webkit-appearance: none;
		width:160px; /*meint Höhe des Reglers, weil gedreht*/
		z-index: 200;
		
		border: 0px;
		border-radius:0px;
		background-color: transparent;
	}
	
	.slider_vertikal_container input:focus{
		outline: none;
	}
	
	.slider_vertikal_container input[type=range]::-webkit-slider-runnable-track { /*Chrome track*/
	  height: 15px;
	  cursor: pointer;
	  animate: 0.2s;
	  background: lightgrey;
	  border-radius: 1.3px;
	  
	  box-shadow: inset 2px 2px 5px #222;
	  border: 3px solid #bbb;
	}	
	.slider_vertikal_container input[type=range]:focus::-webkit-slider-runnable-track { /*Chrome track focus*/
	  background: lightgreen;
	}	
	
	.slider_vertikal_container input[type=range]::-moz-range-track { /* Firefox track*/
	  height: 10px;
	  cursor: pointer;
	  animate: 0.2s;
	  background: lightgrey;
	  border-radius: 3px;
	  box-shadow: inset 2px 2px 5px #222;
	  border: 3px solid #bbb;
	}
	.slider_vertikal_container input[type=range]:focus::-moz-range-track { /* Firefox track focus*/
	  background: lightgreen;
	}	
	
	.slider_vertikal_container input[type=range]::-ms-track { /* IE Edge track*/
	  height: 15px;
	  cursor: pointer;
	  animate: 0.2s;
	  background: transparent;
	  border-color: transparent;
	  border-width: 16px 0;
	  color: transparent;
	}	
	
	.slider_vertikal_container input[type=range]::-ms-fill-lower { /* IE Edge track*/
	  background: lightgrey;
	  border: 3px solid #bbb;
	  border-radius: 2.6px;
	  box-shadow: inset 2px 2px 5px #222;
	}
	
	.slider_vertikal_container input[type=range]::-ms-fill-upper { /* IE Edge track*/
	  background: lightgrey;
	  border: 3px solid #bbb;
	  border-radius: 2.6px;
	  box-shadow: inset 2px 2px 5px #222;
	}		
	
	.slider_vertikal_container input[type=range]:focus::-ms-fill-lower { /* IE Edge track focus*/
	  background: lightgreen;
	}
	.slider_vertikal_container input[type=range]:focus::-ms-fill-upper { /* IE Edge track focus*/
	  background:  lightgreen;
	}	
	
	.slider_vertikal_container input[type=range]::-webkit-slider-thumb {  /*Chrome sliderbutton*/
	  box-shadow: 1px 1px 1px #000000;
	  border: 1px solid #000000;
	  height: 36px;
	  width: 16px;
	  border-radius: 3px;
	  background: #ffffff;
	  cursor: pointer;
	  -webkit-appearance: none;
	  margin-top: -14px;
	}	
	
	.slider_vertikal_container input[type=range]::-moz-range-thumb { /* Firefox sliderbutton*/
	  box-shadow: 1px 1px 1px #000000, 0px 0px 1px transparent;
	  border: 1px solid #000000;
	  height: 36px;
	  width: 16px;
	  border-radius: 3px;
	  background: #ffffff;
	  cursor: pointer;
	}
	
	.slider_vertikal_container input[type=range]::-ms-thumb { /* IE Edge sliderbutton */
	  box-shadow: 1px 1px 1px #000000, 0px 0px 1px transparent;
	  border: 1px solid #000000;
	  height: 36px;
	  width: 16px;
	  border-radius: 3px;
	  background: #ffffff;
	  margin-top:1px;
	  cursor: pointer;
	}

	.horizontal-lowest-first
	{
		 -webkit-transform:rotate(0deg);
		 -moz-transform:rotate(0deg);
		 -o-transform:rotate(0deg);
		 -ms-transform:rotate(0deg);
		 transform:rotate(0deg);
	}

	.horizontal-highest-first
	{
		 -webkit-transform:rotate(180deg);
		 -moz-transform:rotate(180deg);
		 -o-transform:rotate(180deg);
		 -ms-transform:rotate(180deg);
		 transform:rotate(180deg);
	}

	.vertical-lowest-first
	{
		 -webkit-transform:rotate(90deg);
		 -moz-transform:rotate(90deg);
		 -o-transform:rotate(90deg);
		 -ms-transform:rotate(90deg);
		 transform:rotate(90deg);
	}

	.vertical-heighest-first
	{
		 -webkit-transform:rotate(270deg);
		 -moz-transform:rotate(270deg);
		 -o-transform:rotate(270deg);
		 -ms-transform:rotate(270deg);
		 transform:rotate(270deg);
	}
	

		/* Slider Optionen speziell vertikal*/
		/*-----------------------------------------------*/

			.slider_vertikal_container{
				float:left; /* horizontal ausrichten*/	
				height:200px; /* sliderhöhe*/	
				margin:0px 5px 20px 0px; /* Abstände Slider*/
			}
			
			.label_vert_slider{
				text-align:center;
			}	
	
	
	/* .modern_version sliderbutton */
	/*********************************************/
	
	.modern_version_vertikal input[type=range]::-webkit-slider-thumb {
		
	  background: transparent url("../pics/buttons/regler-knopf-grau-3d-vertikal.png") 0px 0px no-repeat; 
	  box-shadow: none;
	  border: 0px solid #000000;
	  height: 90px; /*meint Breite, weil gedreht*/
	  width: 50px; /*meint Höhe, weil gedreht*/
	  border-radius: 0px;
	  cursor: pointer;
	  -webkit-appearance: none;
	  
	  margin-left: 0px; /* Chrome meint OBEN wegen Drehung*/
	  margin-top: -40px; /* Chrome meint LINKS wegen Drehung*/
	}	

	.modern_version_vertikal input[type=range]::-moz-range-thumb {
		
	  background: transparent url("../pics/buttons/regler-knopf-grau-3d-vertikal.png") 0px 0px no-repeat;  /* Firefox*/
	  box-shadow: none;
	  border: 0px solid #000000;
	  height: 90px; /*meint Breite, weil gedreht*/
	  width: 50px; /*meint Höhe, weil gedreht*/
	  border-radius: 0px;
	  cursor: pointer;

	}	

	.modern_version_vertikal input[type=range]::-ms-thumb {
		
	  background: transparent url("../pics/buttons/regler-knopf-grau-3d-vertikal.png") 0px -20px no-repeat; 
	  box-shadow: none;
	  border: 0px solid #000000;
	  height: 90px; /*meint Breite, weil gedreht*/
	  width: 50px; /*meint Höhe, weil gedreht*/
	  border-radius: 0px;
	  cursor: pointer;
	  
	  margin-left: px; /* Chrome meint OBEN wegen Drehung*/
	  margin-top: -40px0; /* Chrome meint LINKS wegen Drehung*/
	}	

	
/* Page-Css-Transition Animationsoptionen*/
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

		/* Fader In/out*/	
		.fade-in {
			-webkit-animation: fade-in 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
					animation: fade-in 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
		}
		.fade-out {
			-webkit-animation: fade-out 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
					animation: fade-out 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
		}	

		/* Slide-In/out top*/	
		.slide-in-top {
			-webkit-animation: slide-in-top 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
					animation: slide-in-top 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
		}
		.slide-out-top {
			-webkit-animation: slide-out-top 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;
					animation: slide-out-top 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;
		}		

		/* Slide-In/out left */	
		.slide-in-left {
			-webkit-animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
					animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
		}
		.slide-out-left {
			-webkit-animation: slide-out-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;
					animation: slide-out-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;
		}		
		
		/* Slide-In/out right */	
		.slide-in-right {
			-webkit-animation: slide-in-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
					animation: slide-in-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
		}
		.slide-out-right {
			-webkit-animation: slide-out-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;
					animation: slide-out-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;
		}			

		/* Slide-In/out right 3D-Fade */			
		.slide-in-right-3d-flip {
			-webkit-animation: slide-in-right-3d-flip 1.0s cubic-bezier(0.550, 0.085, 0.680, 0.530) 1.5s reverse both;
					animation: slide-in-right-3d-flip 1.0s cubic-bezier(0.550, 0.085, 0.680, 0.530) 1.5s reverse both;			
		}
		.slide-out-right-3d-flip {
			-webkit-animation: slide-out-right-3d-flip 1.0s cubic-bezier(0.550, 0.085, 0.680, 0.530) reverse both;
					animation: slide-out-right-3d-flip 1.0s cubic-bezier(0.550, 0.085, 0.680, 0.530) reverse both;					
		}		
		
		/* Slide-In/out left 3D-Fade */			
		.slide-in-left-3d-flip {
			-webkit-animation: slide-in-left-3d-flip 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;
					animation: slide-in-left-3d-flip 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;						
		}
		.slide-out-left-3d-flip {
			-webkit-animation: slide-out-left-3d-flip 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;
					animation: slide-out-left-3d-flip 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;						
		}
		
		
		
		/* Scale-In/out topleft corner*/
		.scale-in-topleft {
			-webkit-animation: scale-in-topleft 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
					animation: scale-in-topleft 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
		}
		.scale-out-topleft {
			-webkit-animation: scale-in-topleft 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;
					animation: scale-in-topleft 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;
		}
		
		/* Scale-In/out center */
		.scale-in-center {
		-webkit-animation: scale-in-center 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-center 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
		}
		.scale-out-center {
			-webkit-animation: scale-in-center 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;
					animation: scale-in-center 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;
		}	
		/* Scale-In/out top*/
		.scale-in-up-top {
			-webkit-animation: scale-in-up-top 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
					animation: scale-in-up-top 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
		}		
		.scale-out-up-top {
			-webkit-animation: scale-out-up-top 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) reverse both;
					animation: scale-out-up-top 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) reverse both;
		}
		/* Scale-In/out center with fixed width */		
		.scale-in-center-fixed-width {
			-webkit-animation: scale-in-center-fixed-width 0.75s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
					animation: scale-in-center-fixed-width 0.75s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
		}		
		.scale-out-center-fixed-width {
			-webkit-animation: scale-out-center-fixed-width 0.75s cubic-bezier(0.390, 0.575, 0.565, 1.000) reverse both;
					animation: scale-out-center-fixed-width 0.75s cubic-bezier(0.390, 0.575, 0.565, 1.000) reverse both;
		}	
	
		
		/* Flip-In/out vertical towards left */			
		.flip-in-ver-left {
			-webkit-animation: flip-in-ver-left 0.75s linear;
					animation: flip-in-ver-left 0.75s linear ;
		}
		.flip-out-ver-left {
			-webkit-animation: flip-out-ver-left 0.75s linear reverse both;
					animation: flip-out-ver-left 0.75s linear reverse both;
		}

		/* Flip-In/out vertical towards left + Scale */					
		.flip-in-ver-left-scale {
			-webkit-animation: flip-in-ver-left-scale 0.75s linear;
					animation: flip-in-ver-left-scale 0.75s linear ;
		}
		.flip-out-ver-left-scale {
			-webkit-animation: flip-out-ver-left-scale 0.75s linear reverse both;
					animation: flip-out-ver-left-scale 0.75s linear reverse both;
		}		
	
		/* Flip-In/out horizontal towards down */			
		.flip-in-hor-left {
			-webkit-animation: flip-in-hor-left 0.75s linear;
					animation: flip-in-hor-left 0.75s linear ;
		}
		.flip-out-hor-left {
			-webkit-animation: flip-out-hor-left 0.75s linear reverse both;
					animation: flip-out-hor-left 0.75s linear reverse both;
		}

		/* Zoom-In/out center */	
		.zoom-in-center {
		-webkit-animation: zoom-in-center 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
				animation: zoom-in-center 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
		}
		.zoom-out-center{
			-webkit-animation: zoom-out-center 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;
					animation: zoom-out-center 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;
		}	
	
		.zoom-in-center-megazoom {
		-webkit-animation: zoom-in-center-megazoom 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) reverse both;
				animation: zoom-in-center-megazoom 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) reverse both;
		}
		.zoom-out-center-megazoom {
			-webkit-animation: zoom-out-center-megazoom 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
					animation: zoom-out-center-megazoom 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
		}
	
		/* fall-In/out center elliptic */	
		.fall-in-center-elliptic {
			-webkit-animation: fall-in-center-elliptic 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
					animation: fall-in-center-elliptic 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
		}
		.fall-out-center-elliptic {
		-webkit-animation: fall-out-center-elliptic 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;
				animation: fall-out-center-elliptic 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;
		}
		
		/* fall-In/out topleft */			
		.fall-in-topleft{
			-webkit-animation: fall-in-topleft 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
					animation: fall-in-topleft 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
		}		
		.fall-out-topleft {
			-webkit-animation: fall-out-topleft 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;
					animation: fall-out-topleft 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;
		}		
		
		/* rotate-In/out right */			
		.rotate-in-right {
			-webkit-animation: rotate-in-right 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
					animation: rotate-in-right 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
		}	
		.rotate-out-right {
			-webkit-animation: rotate-out-right 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
					animation: rotate-out-right 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
		}	
		
		/* rotate-In/out left */			
		.rotate-in-left {
			-webkit-animation: rotate-in-left 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
					animation: rotate-in-left 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
		}	
		.rotate-out-left {
			-webkit-animation: rotate-out-left 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
					animation: rotate-out-left 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
		}	
		
		/* bounce-in-top */			
		.bounce-in-top {
		-webkit-animation: bounce-in-top 1.1s both;
				animation: bounce-in-top 1.1s both;
		}
		
		/* In and OUT Animations mixed */	
		/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  */	
		
		/* 360 Scale-Flip to the front */		
		.flip-scale-2-hor-top {
		-webkit-animation: flip-scale-2-hor-top 0.5s linear both;
	        animation: flip-scale-2-hor-top 0.5s linear both;
		}

		/* 360 Scale-Rotatie to the front */	
		.rotate-scale-up {
		-webkit-animation: rotate-scale-up 1.5s linear both;
	        animation: rotate-scale-up 1.5s linear both;
		}
		
		
		/* INFINITE LOOP Animations mixed */	
		/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  */			
		
		.rotate-scale-up-down {
		-webkit-animation: rotate-scale-up 2s linear infinite both;
	        animation: rotate-scale-up 2s linear infinite both;
}