/*
	Fonts
	NotoSans-Bold
	NotoSans-Regular
*/
@font-face {
	font-family: 'NotoSans-Bold'; 
	src: url('../fonts/NotoSans-Bold.ttf');
}

@font-face {
	font-family: 'NotoSans-Regular'; 
	src: url('../fonts/NotoSans-Regular.ttf');
}

body{
	height:100%;
	margin:0;
	padding:0;
	background-color:#fff;
	font-family: 'NotoSans-Regular'; 
}

.topHeader h1, .topHeader h2{
	font-family: 'NotoSans-Bold'; 
	font-size:28px;
}

h3{
	font-family: 'NotoSans-Bold'; 
	font-size:18px;
	color:#737575;
}

.grayTitle{
	color:#737575;
}

/*
	Container
*/
.vorschriftNotice{
	color:#F33!important;
}

.contentWrapper
{
	border:1px solid #eee;
	margin-bottom:10px;
	margin-top:40px;
	display:block;
	background-color:#FFF;
	min-height:20px;
	padding:30px;
}

.wrapper{
	max-width:1280px;
	width:90%;
	margin:auto;
	margin-top:30px;
}

.subMenu{
	display:table;
	width:100%;
	margin:0;
	padding:0;
	list-style-type:none;
	height:36px;
	overflow:hidden;
	border-collapse: collapse;
	border:1px solid #eee;
}

.subMenu li{
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	font-size:18px;
	font-family: 'NotoSans-Bold'; 
	color:#737575;
	position:relative;
	border:1px solid #eee;
}

.subMenu li:after{
	position:absolute;
	font-family: 'FontAwesome';
	content: '\f105';
	font-size:18pt;
	right:10px;
	top:50%;
	transform:translateY(-50%);
}

.subMenu li > div{
	padding-right:40px;
	padding-left:15px;
	hyphens:auto;
}

.subMenu .active{
	color:#fff;
	background-color:#d10000;
}

.subMenu .subVisited{
	background-color:#eee;
}

/*
	Allgemeine Klassen:
*/
#targetGroup{
	background-color:#fff;
}

.selectBox{
	position:absolute;	
	border:1px solid #eee;
	padding:10px;
	border-radius:5px;
	top:0;
	background-color:#fff;
	right:-250px;
	box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.2);
	display:none;
}

.selectBox .entry{
	padding:5px;
	padding-top:10px;
	padding-bottom:10px;
	border-bottom:1px solid #eee;
	line-height:20px;
	cursor:pointer;
}

.selectBox .selector{
	border:1px solid #eee;
	width:20px;
	height:20px;
	display:inline-block;
	border-radius:360px;
}

.selectBox .active{
	background-color:#086199;
	position:relative;
}

.selectBox .active:after{
	position:absolute;
	font-family: 'FontAwesome';
	font-size: 10pt;
	content: '\f00c';
	color:#fff;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}

.selectBox .selectorText{
	display:inline;
	margin-left:15px;
	position:relative;
	top:-3px;
}

.selectBox .selectPrompter{
	text-align:center;
	padding-top:5px;
	color:#d10000;
	cursor:pointer;
}

.selectionField{
	background-color:#FFF!important;
	margin-top:0!important;
}

.selectionField .fieldselectors_cell_left,
.selectionField .fieldselectors_cell_right
{
	border-bottom:1px solid #EEE!important;
}

.selectionField .fieldselectors_cell_right{
	vertical-align:bottom!important;
}

#slide_1 .fieldselectors_cell_right,
#slide_2 .fieldselectors_cell_right{
	text-align:right!important;
}

.selectionField .fieldselectors_cell_left{
	text-align:left!important;
}

.fieldselectors_message{
	padding:10px;
	padding-left:0;
	font-size:11px;
	font-style:italic;
	position:relative;
	top:0px;
	width:calc(100% - 20px);
	display:none;
}

.fielselectors_message_inner{
	padding:10px;
	display:block;
	width:calc(100% - 20px);
	background-color:#FFF;
}

#errorBox{
	border: 1px solid #af0917;
	background-color:rgba(175,9,23,.1);
	margin-top:20px;
	margin-bottom:20px;
	padding:10px;
	color:#af0917;
	font-size:11px;
	display:none;
}
.clearer{
	clear:both;
}

.logoWrapper{
	float:right;
}

.contentInner{
	margin:0;
	padding:0;
	list-style-type:none;
	margin-top:20px;

	position:relative;
	min-height:200px;
	transition:all 1s ease;
	-webkit-transition:all 1s ease;
	border:1px solid #eee;
}

.contentInner li{
	z-index:2;
}

#loading_slide{
	z-index:1;
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
}

a{
	color:#737575;
	text-decoration:none;
	font-weight:bold;
}
/*
	Form Elemente
*/
.buttonBlack,.buttonRed{
	padding-left:10px;
	padding-right:10px;
	padding-top:5px;
	padding-bottom:5px;
	color:#FFF;
	background-color:#d10000;
	border-radius:5px;
}

.inputText{
	padding-left:3px;
	padding-right:3px;
	padding-top:7px;
	padding-bottom:7px;
	border:1px solid #9c9e9f;
	width:calc(100% - 6px);
}

#slide_2 .inputText
{
	width:83.5%;
}
.inputText:focus, .inputSelect > select:focus{
	outline:none;
}

.inputSelect{
	position:relative;
	width:100%;
	text-align:right;
}

.inputSelect option{
	 background:#eceded;
	 padding:10px;
}

.inputSelect > div:after{
	content: "\f0d7";
	font-family: FontAwesome;
	position:absolute;
	right:10px;
	font-size:30px;
	width:25px;
	height:100%;
	color:#ad0501;
	pointer-events:none;
}

.inputSelect:focus  > div:after{
	content: "\f096";
}

.checkBoxError{
	background-image: url("/images/checkbox_error.png")!important;
}
  
input[type="checkbox"]:checked + label {
  background-position: 0 -32px;
}

.inputSelect > select{
	margin: 0;      
	padding-left:3px;
	padding-right:27px;
	padding-top:7px;
	padding-bottom:7px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	width:100%;
}
@-moz-document url-prefix() {
	.inputSelect > select
	{
		padding-top:0;
		padding-bottom:0;
	}
}

.inputError{
	border: 1px solid #af0917;
	background-color:rgba(175,9,23,.1);
}

.radioError:before{
	border-color:#af0917!important;
}

input[type="checkbox"],
input[type="radio"]
 {
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  margin: 0;
  width: 20px;
  height:20px;
  margin-right: .4em;
  border:1px solid #eee;
  position:relative;
  top:3px;	
  border-radius: 2px;
}

input[type="radio"]{
	top:4px;
}

input[type="checkbox"]::before,
input[type="radio"]::before
 {
  content: "";
  width: 18px;
  height: 18px;
  position:absolute;
  display:block;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  background-color:#086199;
  font-family: 'FontAwesome';
  font-size: 10pt;
  content: '\f00c';
  text-align:center;
  color:#fff;
}

input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before
 {
  transform: scale(1);
}

input[type='radio'] + label {
  cursor: pointer;
}

.radioGroup{
	margin-bottom:5px;
	position:relative;
	top:-5px;
	text-align:left;
}

/*
.inputSelect{
	margin: 0;      
	padding-left:3px;
	padding-right:3px;
	padding-top:7px;
	padding-bottom:7px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	width:62.5%;
	position:relative;
}

.inputSelect > div:after{
	content: "\f095";
	font-family: FontAwesome;
	position:absolute;
	right:0;
	font-size:40px;
}
/*
	Slide-Elemente auf mehreren Slides
*/
.slide{
	display:block;
	position:absolute;
	transition:all ease .8s;
	background-color:#FFF;
	width:100%;
	left:0;
	padding:30px;
	font-size:14px;
	color:#737575;
	font-family: 'NotoSans-Bold'; 
}

.buttonBar{
	display:table;
	margin-top:20px;
	table-layout:fixed;
	width:100%;
	border-spacing:0;
}

.spacerHeight{
	height:40px;
}

.spacerMedium{
	height:20px;
}

.disabled{
	opacity:0.4;
}

.buttonRight a{text-decoration:none;}

.buttonBar .buttonRight{
	text-align:right;
}

.buttonBar .buttonRight,.buttonBar .buttonLeft{
	display:table-cell;
}

.resultTableNew{
	width:100%;
	display:table;
	table-layout:fixed;
	border-spacing:15px;
}

.resultTableNew .resultTableCell{
	display:table-cell;
}
.resultTableNew .resultTableCell img{
	width:100%;
	height:auto;
	max-width:165px;
	margin-top:5px;
}

.noBackground{
	background-color:#FFF!important;
}
.grayResultBar{
	background-color:#eceded;
}

.zubehoerHeight img{
	width:auto!important;
	max-height:50px!important;
	min-height:50px!important;
	height:50px!important;
}

.alternateList{
	margin-top:10px;
	padding-left:17px;
	list-style-type: circle;
}

.zuebehoerTable{
	display:table;
}

.zubehoerRow{
	display:table-row;
	height:60px;
}

.zubehoerCell{
	display:table-cell;
}

.zubehoerHeight1{
	height:40px;
}

.empehlungPrint{
	display:none;
}


.splashLeft{
	width:58%;
}

.splash5050 .splashLeft{
	width:50%;
}

.smallSelect{
	width:200px;
	position:relative;
}

.smallSelect > select,select{
	font-size:14px!important;
	color:#737575!important;
	font-family: 'NotoSans-Bold'; 
}

.thinTop{
	margin-top:5px;
}

.errors ul{
	margin-bottom:0;
	font-family: 'NotoSans-Bold'; 
	font-size:13px;
	list-style-type:none;
	margin:0;
	padding:0;
}

.bigTop{
	margin-top:30px;
}

.onlyMobil{
	display:none;
}
/*
	Responsive Part:
	Mobil
*/
@media screen and (max-width: 479px) {
	.onlyMobil{
		display:block;
	}
	
	.onlyDesktop{
		display:none;
	}
	
	.onlyMobil img{
		max-width:100%;
	}
	
	.topHeader h1, .topHeader h2{
		font-size:26px;
	}
	
	.splashRight{
		display:none!important;
	}
	
	.contentWrapper{
		margin-top:10px;
		padding:15px;
	}
	
	.subMenu li{
		display:none;
	}
	
	.subMenu .active{
		display:block;
	}
	
	.subMenu li > div{
		padding:0;
		padding-top:5px;
		padding-bottom:5px;
		text-align:left;
		padding-left:15px;
	}
	
	.splash{
		border-spacing:15px!important;
	}
	
	.smallSelect{
		max-width:100%;
	}
	
	.selectBox{
		z-index:200;
		right:initial;
		left:0;
	}
	
	#imageStep2,.spacingImage{
		margin-top:15px;
		margin-bottom:15px;
	}
	
	#slide_5{
		padding:15px;
	}
	
	pre{
		display:none;
	}
	
	.empfehlung_prod{
		margin-top:20px;
	}
	
	.empfehlung_cont .row .col-md-6:last-child{
		text-align:left!important;
	}
	
	.resultTableNew{
		left:0!important;
		width:100%!important;
		border-spacing:0!important;
	}
	
	.resultTableCell {
		padding-top: 10px;
		padding-bottom: 10px;
		border-bottom: 1px solid #eee;
		display:block!important;
	}
	
	.resultTableCell:last-child {
		border-bottom:none;
	}
	
	.lastSlide{
		padding-top:0!important;
	}
	
	.lastCellLeft,.lastCellRight{
		display:block!important;
	}
	
	.empfehlung_prod, .zubehoer_box{
		padding:15px!important;
	}
}

@media screen and (min-width: 444444444444444444479px) {
	h1{
		font-weight:700;
		font-size:26px;
		margin:0;
	}
	h2{
		font-weight:300;
		font-size:22px;
		margin:0;
	}

	.logoWrapper img{
		max-width:160px;
		height:auto;
	}
	
	.logoWrapper{
		margin:auto;
		display:block;
		text-align:center;
		float:initial;
	}
	
	.subMenu li{
		display:none;
	}
	
	.subMenu .active{
		display:block;
	}
	
	.subMenu li > div{
		padding:0;
		padding-top:5px;
		padding-bottom:5px;
	}
	
	.splashRight{
		padding-top:20px; 
	}
	
	/*
		In Slide
	*/
	
	.resultTableCell{
		text-align:center;
		margin:10px;
	}
	
	.splashLeft, .splashRight,.lastSlide,.lastSlide, .lastRow, .lastCellLeft, .lastCellRight,.resultTableCell{
		display:block!important;
	}
	
	.lastSlide{
		padding-top:0!important;
	}
	
	.zubehoerCell > span{
		font-weight:bold;
	}
	
	.zuText{
		font-weight:300!important;
	}
	
	.resultTableNew .resultTableCell {
		border-top:1px solid #ad0501; 
	}
	
	.grayResultBar .resultTableCell{
		border-top:none;
	}
	
	input[type="checkbox"] + label{
		line-height:1.1;
	}
	
	#regeldachneigung{
		font-size:11px;
	}
	/*
		Slide 2:
	*/
	#slide_2 .fieldselectors, #slide_2 .fieldselectors_row, #slide_2 .fieldselectors_cell_left , #slide_2 .fieldselectors_cell_right{
		display:block;
	}
	
	#slide_2 .fieldselectors_cell_left , #slide_2 .fieldselectors_cell_right{
		width:100%;
	}
	
	#slide_2 .fieldselectors_row{
		padding-bottom:15px;
	}
	
	#slide_2 .fieldselectors_cell_left{
		padding-bottom:3px;
	}
	
	#slide_2 .fieldselectors_cell_right{
		text-align:left!important;
	}
	
	#slide_2 .fieldselectors{
		padding:10px;
		width:calc(100% - 20px);
	}
	/*
		Slide 3:
	*/
	#slide_3 .fieldselectors, #slide_3 .fieldselectors_row, #slide_3 .fieldselectors_cell_left , #slide_3 .fieldselectors_cell_right{
		display:block;
	}
	
	#slide_3 .fieldselectors_cell_left , #slide_3 .fieldselectors_cell_right{
		width:100%;
	}
	
	#slide_3 .fieldselectors_row{
		padding-bottom:15px;
	}
	
	#slide_3 .fieldselectors_cell_left{
		padding-bottom:3px;
	}
	
	#slide_3 .fieldselectors_cell_right{
		text-align:left!important;
	}
	
	#slide_3 .fieldselectors{
		padding:10px;
		width:calc(100% - 20px);
	}
	/*
		Slide 4:
	*/
	#slide_4 .fieldselectors, #slide_4 .fieldselectors_row, #slide_4 .fieldselectors_cell_left , #slide_4 .fieldselectors_cell_right{
		display:block;
	}
	
	#slide_4 .fieldselectors_cell_left , #slide_4 .fieldselectors_cell_right{
		width:100%;
	}
	
	#slide_4 .fieldselectors_row{
		padding-bottom:15px;
	}
	
	#slide_4 .fieldselectors_cell_left{
		padding-bottom:3px;
	}
	
	#slide_4 .fieldselectors_cell_right{
		text-align:left!important;
	}
	
	#slide_4 .fieldselectors{
		padding:10px;
		width:calc(100% - 20px);
	}
	
	#slide_6 .buttonRed, #slide_6 .buttonBlack{
		font-size:12px;
	}
	
	
	
}