@charset "utf-8";
/* CSS Document */

#konfigurator > form > .select > .mozarrow {
	display: none;
	z-index:-1;
}

#header_preis, #header_ersparnis, #header_verfuegbarkeit, #header_fertigungszeit {
	cursor:default;
}

#header_preis h2, #header_preis h3, #header_ersparnis h2, #header_ersparnis h3{
	cursor:pointer;
}
/* Nur IE */
select::-ms-value {
	background: none;
	color:black;
}

/* Nur Firefox */
@-moz-document url-prefix() {
		#konfigurator > form > .select > .mozarrow {
			display: block;
		}
}

#konfigurator select > optgroup {
	font-weight: normal;
}

#konfigurator select > optgroup > option {
	font-weight: normal;
}

#konfigurator select, .mozarrow  {
	cursor: pointer;
}

#konfigurator select:focus {
	outline: none;
}

#konfigurator select::-ms-expand {
	display: none;
}

#preisbar {
	display: none;
}

.no-select {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}



@media (min-width: 0px) {
	
	.singleChoice {
		padding-left: 4px;
		height: 32px;
		background-color: #F1F1F1;
		font-size: 10px;
		font-family: lato;
		display: inline-block;
		color: black;
		cursor: default;
		width: 275px;
	}

	.singleChoice > div {
		display: table-cell;
		height: 32px;
		margin: 0;
		padding: 0;
		vertical-align: middle;
		line-height: 10px;
	}

	#konfigurator {
		width: 318px;
		position: relative;
		margin: auto;
	}

	#konfigurator > form {
		width: 318px;
		margin: 0;
		display: inline-block;
		position: relative;
	}

	#konfigurator > form > .select {
		width: 316px;
		height: 32px;
		margin-bottom: 1px;
		display: inline-block;
		position: relative;
		border: 1px solid #c7cbcf;
	}

	#konfigurator > form > .select > .icon {
		width: 32px;
		height: 32px;
		border: 0;
		line-height: 32px;
		color: #333;
		font-family: 'ff-din-web-pro-condensed', tahoma, sans-serif;
		font-size: 16px;
		font-weight: 400;
		text-transform: uppercase;
		text-align: center;
		display: inline-block;
		vertical-align: top;
		background: #F1F1F1;
		cursor:default;
	}

	#konfigurator select {
		width: 284px;
		height: 32px;
		border: 0;
		border-left: 1px solid #c7cbcf;
		display: inline-block;
		font-family: 'lato', tahoma, sans-serif;
		font-size: 10px;
		background: url(../images/page/konfigurator/ARROW.svg) no-repeat #F1F1F1 262px 0px;
		background-size: 16px 32px;
		outline: none;
		overflow: hidden;
		text-indent: 4px;
		text-overflow: '';
		-webkit-appearance: none;
		-moz-appearance: none;
		-ms-appearance: none;
		-o-appearance: none;
		appearance: none;
		padding: 0 25px 0 0;
	}

	#konfigurator > form > .select > .mozarrow {
		width: 16px;
		height: 32px;
		position: absolute;
		top: 0;
		right: 1px;
	}
	
	div#roccat-extras.select {
		border-color: #0075bc;
	}

	#roccat-extras.select > div.icon {
		background: #70c8f2;
	}

	#roccat-extras > select {
		border-color: #70c8f2;
		background: url(../images/page/konfigurator/ARROW.svg) no-repeat 262px 0px, -webkit-linear-gradient(-45deg, #70c8f2 0%,#0075bc 100%);
		background: url(../images/page/konfigurator/ARROW.svg) no-repeat 262px 0px, -moz-linear-gradient(-45deg, #70c8f2 0%, #0075bc 100%);
		background: url(../images/page/konfigurator/ARROW.svg) no-repeat 262px 0px, linear-gradient(135deg, #70c8f2 0%,#0075bc 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#70c8f2', endColorstr='#0075bc',GradientType=1 );
	}

	#preisbox {
		display: none;
	}

	#preisbar {
		width: 318px;
		height: 64px;
		background: #FFF;
		margin: auto;
		position: relative;
		display: block;
		z-index: 9;
	}

	#preisbar h1 {
		font-family: 'ff-din-web-pro-condensed', tahoma, sans-serif;
		font-size: 14px;
		line-height: 14px;
		font-weight: 700;
		color: #333;
		margin: 5px 0 0 0;
		text-transform: uppercase;
	}

	#preisbar h3 {
		font-family: 'ff-din-web-pro-condensed', tahoma, sans-serif;
		font-size: 10px;
		line-height: 10px;
		font-weight: 700;
		color: #333;
		margin: 6px 0 0 0;
		text-transform: uppercase;
	}

	#preisbar #preis {
		font-family: 'ff-din-web-pro-condensed', tahoma, sans-serif;
		font-size: 18px;
		font-weight: 700;
		color: #333;
		margin: 0;
	}

	#preisbar p {
		font-family: 'lato', tahoma, sans-serif;
		font-weight: 500;
		font-size: 6px;
		line-height: 6px;
		color: #333;
		margin: 1px 0 0 0;
	}


	#preisbar #calltoaction {
		width: 318px;
		height: 16px;
		margin: auto;
		position: absolute;
		bottom: 5px;
		left: 0;
		display: block;
	}

	#preisbar #calltoaction a {
		text-decoration: none;
	}

	#preisbar .button {
		width: 96px;
		height: 16px;
		background: #333;
		display: inline-block;
		margin: 0 5px 0 5px;
		transition: background 0.4s ease-in-out;
		cursor: pointer;
		vertical-align: top;
	}

	#preisbar .button:hover {
		background: #666;
	}

	#preisbar .button p {
		color: #F1F1F1;
		line-height: 16px;
		text-transform: uppercase;
		font-family: 'lato', tahoma, sans-serif;
		font-size: 6px;
		font-weight: 500;
		margin: 0 0 0 5px;
	}
	
	#detail_service_separator {
		width: 316px;
		margin-left: 0px;
	}
}

@media (min-width: 657px) {
	.singleChoice {
		padding-left: 4px;
		height: 32px;
		background-color: #F1F1F1;
		font-size: 10px;
		font-family: lato;
		display: inline-block;
		color: black;
		cursor: default;
		width: 435px;
	}

	.singleChoice > div {
		display: table-cell;
		height: 32px;
		margin: 0;
		padding: 0;
		vertical-align: middle;
		line-height: 12px;
	}

	#konfigurator {
		width: 638px;
		position: relative;
		margin: auto;
	}

	#konfigurator > form {
		width: 479px;
		margin-right: 1px;
		display: inline-block;
		position: relative;
	}

	#konfigurator > form > .select {
		width: 477px;
		height: 32px;
		margin-bottom: 1px;
		display: inline-block;
		position: relative;
		border: 1px solid #c7cbcf;
	}

	#konfigurator > form > .select > .icon {
		width: 32px;
		height: 32px;
		border: 0;
		line-height: 32px;
		color: #333;
		font-family: 'ff-din-web-pro-condensed', tahoma, sans-serif;
		font-size: 16px;
		font-weight: 400;
		text-transform: uppercase;
		text-align: center;
		display: inline-block;
		vertical-align: top;
		background: #F1F1F1;
		cursor:default;
	}

	#konfigurator select {
		width: 445px;
		height: 32px;
		border: 0;
		border-left: 1px solid #c7cbcf;
		display: inline-block;
		font-family: 'lato', tahoma, sans-serif;
		font-size: 10px;
		background: url(../images/page/konfigurator/ARROW.svg) no-repeat #F1F1F1 429px 0px;
		background-size: 16px 32px;
		outline: none;
		overflow: hidden;
		text-indent: 4px;
		text-overflow: '';
		-webkit-appearance: none;
		-moz-appearance: none;
		-ms-appearance: none;
		-o-appearance: none;
		appearance: none;
	}

	#konfigurator > form > .select > .mozarrow {
		width: 16px;
		height: 32px;
		position: absolute;
		top: 0;
		right: 1px;
	}
	
	div#roccat-extras.select {
		border-color: #0075bc;
	}

	#roccat-extras.select > div.icon {
		background: #70c8f2;
	}

	#roccat-extras > select {
		border-color: #70c8f2;
		background: url(../images/page/konfigurator/ARROW.svg) no-repeat 429px 0px, -webkit-linear-gradient(-45deg, #70c8f2 0%,#0075bc 100%);
		background: url(../images/page/konfigurator/ARROW.svg) no-repeat 429px 0px, -moz-linear-gradient(-45deg, #70c8f2 0%, #0075bc 100%);
		background: url(../images/page/konfigurator/ARROW.svg) no-repeat 429px 0px, linear-gradient(135deg, #70c8f2 0%,#0075bc 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#70c8f2', endColorstr='#0075bc',GradientType=1 );
	}
	
	#preisbox {
		width: 156px;
		height: 242px;
		border: 1px solid #c7cbcf;
		position: relative;
		display: inline-block;
		vertical-align: top;
		margin-bottom: 1px;
		background: #F1F1F1;
	}

	#preisbox > h1 {
		font-family: 'ff-din-web-pro-condensed', tahoma, sans-serif;
		font-size: 14px;
		line-height: 14px;
		font-weight: 700;
		color: #333;
		margin: 4px 0 10px 10px;
		text-transform: uppercase;
	}

	#preisbox > h3 {
		font-family: 'ff-din-web-pro-condensed', tahoma, sans-serif;
		font-size: 12px;
		line-height: 12px;
		font-weight: 700;
		color: #333;
		margin: 10px 0 0 10px;
		text-transform: uppercase;
	}

	#preisbox > #preis {
		font-family: 'ff-din-web-pro-condensed', tahoma, sans-serif;
		font-size: 26px;
		line-height: 36px;
		font-weight: 700;
		color: #333;
		margin: 2px 0 0 10px;
	}

	#preisbox > p {
		font-family: 'lato', tahoma, sans-serif;
		font-weight: 500;
		font-size: 9px;
		line-height: 9px;
		color: #333;
		margin: 0 0 0 10px;
	}


	#preisbox > #calltoaction {
		width: 156px;
		height: 57px;
		margin: auto;
		position: absolute;
		bottom: 10px;
		left: 0;
	}

	#preisbox > #calltoaction a {
		text-decoration: none;
	}

	#preisbox .button {
		width: 136px;
		height: 16px;
		background: #333;
		display: block;
		margin: auto;
		margin-top: 3px;
		transition: background 0.4s ease-in-out;
		cursor: pointer;
	}

	#preisbox .button:hover {
		background: #666;
	}

	#preisbox .button p {
		color: #F1F1F1;
		line-height: 16px;
		text-transform: uppercase;
		font-family: 'lato', tahoma, sans-serif;
		font-size: 8px;
		font-weight: 500;
		margin: 0 0 0 10px;
	}

	#preisbar {
		display: none;
	}
	
	#detail_service_separator {
		width: 477px;
		margin-left: 0px;
	}
}

@media (min-width: 1017px) {

	.singleChoice {
		padding-left: 4px;	
		height: 64px;
		background-color: #F1F1F1;
		font-size: 14px;
		font-family: 'lato', tahoma, sans-serif;
		display: inline-block;
		color: black;
		cursor: default;
		width: 675px;
	}

	.singleChoice > div {
		display: table-cell;
		height: 64px;
		margin: 0;
		padding: 0;
		vertical-align: middle;
		line-height: 18px;
	}

	#konfigurator {
		width: 998px;
		margin: auto;
		position: relative;
	}

	#konfigurator > form {
		width: 749px;
		margin-right: 1px;
		display: inline-block;
		position: relative;
	}

	#konfigurator > form > .select {
		width: 747px;
		height: 64px;
		margin-bottom: 1px;
		display: inline-block;
		position: relative;
		border: 1px solid #c7cbcf;
	}

	#konfigurator > form > .select > .icon {
		width: 64px;
		height: 64px;
		border: 0;
		line-height: 64px;
		color: #333;
		font-family: 'ff-din-web-pro-condensed', tahoma, sans-serif;
		font-size: 32px;
		font-weight: 400;
		text-transform: uppercase;
		text-align: center;
		display: inline-block;
		vertical-align: top;
		background: #F1F1F1;
		cursor:default;
	}

	#konfigurator select {
		width: 683px;
		height: 64px;
		border: 0;
		border-left: 1px solid #c7cbcf;
		display: inline-block;
		font-family: 'lato', tahoma, sans-serif;
		font-size: 14px;
		background: url(../images/page/konfigurator/ARROW.svg) no-repeat #F1F1F1 652px 0px;
		background-size: 32px 64px;
		outline: none;
		overflow: hidden;
		text-indent: 4px;
		text-overflow: '';
		-webkit-appearance: none;
		-moz-appearance: none;
		-ms-appearance: none;
		-o-appearance: none;
		appearance: none;
		padding: 0 35px 0 0;
	}

	#konfigurator > form > .select > .mozarrow {
		width: 32px;
		height: 64px;
		position: absolute;
		top: 0;
		right: 1px;
	}

	div#roccat-extras.select  {
		border-color: #0075bc;
	}

	#roccat-extras.select > div.icon {
		background: #70c8f2;
	}

	#roccat-extras > select {
		border-color: #70c8f2;
		background: url(../images/page/konfigurator/ARROW.svg) no-repeat 652px 0px, -webkit-linear-gradient(-45deg, #70c8f2 0%,#0075bc 100%);
		background: url(../images/page/konfigurator/ARROW.svg) no-repeat 652px 0px, -moz-linear-gradient(-45deg, #70c8f2 0%, #0075bc 100%);
		background: url(../images/page/konfigurator/ARROW.svg) no-repeat 652px 0px, linear-gradient(135deg, #70c8f2 0%,#0075bc 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#70c8f2', endColorstr='#0075bc',GradientType=1 );
	}

	#preisbox {
		width: 246px;
		height: 399px;
		border: 1px solid #c7cbcf;
		position: relative;
		display: inline-block;
		vertical-align: top;
		margin-bottom: 1px;
		background: #F1F1F1;
	}

	#preisbox > h1 {
		font-family: 'ff-din-web-pro-condensed', tahoma, sans-serif;
		font-size: 24px;
		line-height: 24px;
		font-weight: 700;
		color: #333;
		margin: 14px 0 10px 10px;
		text-transform: uppercase;
	}

	#preisbox > h3 {
		font-family: 'ff-din-web-pro-condensed', tahoma, sans-serif;
		font-size: 18px;
		line-height: 18px;
		font-weight: 700;
		color: #333;
		margin: 20px 0 5px 10px;
		text-transform: uppercase;
	}

	#preisbox > #preis {
		font-family: 'ff-din-web-pro-condensed', tahoma, sans-serif;
		font-size: 36px;
		line-height: 50px;
		font-weight: 700;
		color: #333;
		margin: 0px 0 0px 10px;
	}

	#preisbox > p {
		font-family: 'lato', tahoma, sans-serif;
		font-weight: 500;
		font-size: 12px;
		line-height: 14px;
		color: #333;
		margin: 0 0 0 10px;
	}


	#preisbox > #calltoaction {
		width: 246px;
		height: 111px;
		margin: auto;
		position: absolute;
		bottom: 10px;
		left: 0;
	}

	#preisbox > #calltoaction a {
		text-decoration: none;
	}

	#preisbox .button {
		width: 226px;
		height: 32px;
		background: #333;
		display: block;
		margin: auto;
		margin-top: 5px;
		transition: background 0.4s ease-in-out;
		cursor: pointer;
	}

	#preisbox .button:hover {
		background: #666;
	}

	#preisbox .button p {
		color: #F1F1F1;
		line-height: 32px;
		text-transform: uppercase;
		font-family: 'lato', tahoma, sans-serif;
		font-size: 12px;
		font-weight: 500;
		margin: 0 0 0 10px;
	}

	#preisbar {
		display: none;
	}
	
	#detail_service_separator {
		width: 747px;
		margin-left: 0px;
	}
}