@font-face {
    font-family: 'evonik_prokyonbold';
    src: url('../fonts/evonikprokyon-bold-webfont.woff2') format('woff2'),
         url('../fonts/evonikprokyon-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'evonik_prokyonregular_italic';
    src: url('../fonts/evonikprokyon-italic-webfont.woff2') format('woff2'),
         url('../fonts/evonikprokyon-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'evonik_prokyonlight';
    src: url('../fonts/evonikprokyon-light-webfont.woff2') format('woff2'),
         url('../fonts/evonikprokyon-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'evonik_prokyonlight_italic';
    src: url('../fonts/evonikprokyon-lightitalic-webfont.woff2') format('woff2'),
         url('../fonts/evonikprokyon-lightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'evonik_prokyonmedium';
    src: url('../fonts/evonikprokyon-medium-webfont.woff2') format('woff2'),
         url('../fonts/evonikprokyon-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'evonik_prokyonregular';
    src: url('../fonts/evonikprokyon-regular-webfont.woff2') format('woff2'),
         url('../fonts/evonikprokyon-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
html {
    overflow-y: scroll;
}


body {
	font-family: 'evonik_prokyonlight';
	/*font-size: 1rem;
	line-height: 1.5px;*/
	/*color: #666666;*/
	/*margin: 0;
	padding: 0;
	background: #fff;
	position: relative;*/
}

b, strong {
	font-family: 'evonik_prokyonbold';
}

.count_elements {
	/*margin-bottom: 20px;*/
	font-size: 22px;
	text-transform: uppercase;
}

.standalone.wrapper {
	width: 685px;
	padding-left: 20px;
	overflow: hidden;
	margin: auto;
	background: #fff;
}

.wrapper.mobile {
	width: 100%;
}

.wrapper {
	overflow: hidden;
	margin: auto;
	background: #fff;
	padding-left: 0px!important;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;

	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;

	margin-left: -5px;
	margin-right: -5px;
}

.standalone.wrapper .header {
	height: 93px;
	line-height: 93px;
}

.standalone.wrapper .header img {
	margin-top: 15px;
}

.produkte {
	width: 76%;
	height: 200px;
	height: auto!important;
	min-height: 200px;
	padding-left: 5px;
	padding-right: 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.wrapper.mobile .produkte {
	width: 100%;
	padding-top: 20px;
}

.produkte a {
	text-decoration: none;
	color: inherit;
	display: block;
	cursor: pointer;
}

.produkte .inner {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;

	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;

	margin-left: -5px;
	margin-right: -5px;
}

.produkte .inner > a {
	width: 50%;
	padding-left: 5px;
	padding-right: 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-bottom: 20px;
}

.produkte .inner > a:hover {
	text-decoration: none;
}

.produkte .product {
	width: 100%;
	background: #e8e6e0;
	padding: 20px;
	padding-bottom: 30px;
	box-sizing: border-box;
	cursor: pointer;
	font-size: 16px;
	line-height: 1.2;
	-webkit-transition: 300ms all;
	-o-transition: 300ms all;
	transition: 300ms all;
	height: 100%;
}

@media screen and (min-width: 1024px) {
    .produkte .product:hover {
    	background: #8c2a7d;
    	color: #fff;
    }

    .produkte .product:hover h2,
    .produkte .product:hover .attributes,
    .produkte .product:hover .inci {
    	color: #fff;
    }
}

.mobile #loading {
	width: 100%;
}

.app-headline {
	background: #8c2a7d;
	color: #fff;
	padding: 15px 25px;
	text-transform: uppercase;
	font-size: 30px;
	margin-bottom: 30px;
}

#loading {
	width: 100%;
	position:absolute;
	top:0;
	right:0;
	background-color: white;
	opacity:0.5;filter:alpha(opacity=5);
	background: url(../images/icon-spinner-loading.gif) center no-repeat #fff;

}

.wrapper.mobile .produkte .product {
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-right: 0;

}

.produkte .product h2 {
	color: #991d85;
	margin: 0;
	padding: 0;
	font-size: 18px;
	line-height: 20px;
	margin-bottom: 10px;
	font-family: 'evonik_prokyonbold';
}

.mobile .produkte .product,
.mobile .produkte .product h2 {
	font-size: 16px;
	line-height: 20px;
}

.produkte .product .attributes {
	margin-bottom: 10px;
	/*font-weight: bold;*/
	font-family: 'evonik_prokyonbold';
	font-weight: normal;
	color: #000;
}

.produkte .product .inci {
	color: #000;
}

.produkte .product .more-link {
	color: #981c85;
	display: inline-block;
	padding-left: 12px;
	background: url(../images/bg-more-link.png?v2.0) no-repeat left center;
}

.backgroundsize .produkte .product .more-link {
	background: url(../images/bg-more-link@2x.png) no-repeat left center;
	background-size: 9.5px 7.5px;
}

.kategorien {
	border-top: 1px dotted #a8a19b;
}

.mobile .kategorien {
	font-size: 16px;
	line-height: 20px;
}

.wrapper.mobile .kategorien {
	width: 100%;
	margin-right: 0px;
	float: left;
	background: #fff;
	padding-top: 20px;
	display: none;

}

.kategorien .accordion h3.firstlevel {
	cursor: pointer;
	outline: none;
	background: url(../images/open-acc.png) right center no-repeat;
	padding: 10px 25px;
	padding-left: 55px;
	border-bottom: 1px dotted #a8a19b;
	margin: 0;
	color: #666666;
	font-size: 16px;
	font-weight: bold;
	position: relative;
	text-transform: none;
}

.backgroundsize .kategorien > .accordion > h3 {
	background: url(../images/open-acc@2x.png?v=3.0) no-repeat 96% center;
	background-size: 10px 6px;
}

.mobile .kategorien .accordion h3 {
	font-size: 16px;
	padding: 10px 25px;
}

.kategorien > .accordion > h3.active {
	background: url(../images/close-acc.png?v=3.0) right center no-repeat;
	background-size: 10px 6px;
}

.backgroundsize .kategorien > .accordion > h3.active {
	background: url(../images/close-acc@2x.png?v=3.0) #eeedec 96% center no-repeat;
	background-size: 10px 6px;
}

.kategorien .accordion div.firstlevel {
	padding-top: 10px;
	padding-bottom: 10px;
	display: none;
	overflow: hidden;
	padding: 5px 10px;
}

.kategorien .accordion div.firstlevel.accordion {
	padding: 0;
}

.kategorien .accordion .accordion {
	background: #eeedec;
}

.kategorien .accordion .accordion h3 {
	cursor: pointer;
	outline: none;
	margin: 0;
	padding: 5px 0px;
	margin: 0;
	border-bottom: 1px solid #ccc;
	font-size: 16px;
	font-weight: normal;
	color: #666666;
	background: url(../images/open-acc.png?v=2.0) right center no-repeat;
	padding-left: 12px;
}

.backgroundsize .kategorien .accordion .accordion h3 {
	background: url(../images/open-acc@2x.png) 96% center no-repeat;
	background-size: 10px 6px;
}

.mobile .kategorien .accordion .accordion h3 {
	font-size: 16px;
	padding: 10px 0px;
}

.kategorien .accordion .accordion h3.active {
	background: url(../images/close-acc.png?v=4.0) 96% center no-repeat;
}

.backgroundsize .kategorien .accordion .accordion h3.active {
	background: url(../images/close-acc@2x.png?v=2.0) 96% center no-repeat;
	background-size: 10px 6px;
}

.kategorien .accordion .accordion div.secondlevel {
	padding: 10px 10px;
	display: none;
	overflow: hidden;
	border-bottom: 1px dotted #a8a19b;
	background: #fff;
}
.kategorien .accordion .accordion div.secondlevel h3 {
    background-color: #eeedec;
}
.kategorien .accordion .accordion div.secondlevel h3.active {
    margin-bottom: 0px;
}

.kategorien .accordion .accordion div.thirdlevel {
	padding: 5px 10px;
	display: none;
	overflow: hidden;
	border-bottom: 1px dotted #a8a19b;
	background: #fff;
    margin-bottom: 20px;
}

.checkbox-wrapper {
	float: left;
}

.checkbox-wrapper input {
	display: none;
}

.checkbox {
	width: 25px;
	height: 25px;
	line-height: 27px;
	border: 1px solid #dddcda;
	cursor: pointer;
	margin-right: 10px;
	text-align: center;
	background: #fff;
}

.checkbox.disabled {
	background: #eeedec;
}

label.disabled {
	color: #eeedec;
	background: none;
}

.kategorien .accordion .accordion div label.disabled {
	color: #C5C5C5;
}

.right-bar {
	width: 24%;
	padding-left: 5px;
	padding-right: 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.right-bar > h3 {
	font-size: 22px;
	text-transform: uppercase;
	margin-bottom: 20px;
	font-family: 'evonik_prokyonbold';
}

.reset {
	display: inline-block;
	padding: 2px 5px;
	cursor: pointer;
	color: #666666;
	text-decoration: none;
	background: #eeedec;
	font-size: 18px;
	text-transform: uppercase;
	float: right;
	font-family: 'evonik_prokyonmedium';
}

.mobile .reset {
	font-size: 16px;
}

.wrapper.mobile .reset {
	width: 100%;
	clear: both;
	float: none;
}

.checkbox i {
	display: none;
	color: #981c85;
	font-size: 16px;
}

.checkbox.active i {
	display: none;
}

.checkbox.active {
	background: url(../images/bg-check.png) #fff center center no-repeat;
}

.backgroundsize .checkbox.active {
	background: url(../images/bg-check@2x.png) #fff center center no-repeat;
	background-size: 15px 11px;
}

.checkboxmenu  {
	height: 27px;
	line-height: 27px;
	/*float: left;*/
	width: 100%;
	margin-top: 15px;
    margin-bottom: 15px;
}

.checkboxmenu label {
	line-height: 14px;
	display: table-cell;
	vertical-align: middle;
	height: 27px;
	font-size: 16px;
}

/* Icons */


.kategorien .accordion h3 span.icon-wrapper {
	display: block;
	position: relative;
}

.kategorien .accordion h3 span.icon {
	width: 35px;
	height: 30px;
	display: block;
	position: absolute;
	left: -54px;
	top: -2px;
	-webkit-background-size: contain;
	background-size: contain;
}

.mobile .kategorien .accordion h3 span.icon {
	top: 8px;
}
/*
.backgroundsize .application {
	background: url(../images/icon-application@2x.png) no-repeat center center;
}

.backgroundsize .formulationattributes {
	background: url(../images/icon-formulationattributes@2x.png) no-repeat center center;
}

.backgroundsize .sustainability {
	background: url(../images/icon-sustainability@2x.png) no-repeat center center;
}

.backgroundsize .chemistry {
	background: url(../images/icon-chemistry@2x.png) no-repeat center center;
}

.backgroundsize .registrationstatus {
	background: url(../images/icon-registrationstatus@2x.png) no-repeat center center;
}

.backgroundsize .productform {
	background: url(../images/icon-productform@2x.png) no-repeat center center;
}

.backgroundsize .sensoryproperties {
	background: url(../images/icon-sensoryproperties@2x.png) no-repeat center center;
}

.backgroundsize .kategorien .accordion h3 span.processing {
	background-image: url(../images/icon-processing@2x.png);
  background-position: center;
  background-repeat: no-repeat;
  left: -48px;
}
*/
.open-filter {
	display: block;
	height: 45px;
	padding-left: 10px;
	line-height: 45px;
	/* background: #b75ea8;
	background: -moz-linear-gradient(top, #c794c3 0%, #991d85 50%, #991d85 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c794c3), color-stop(50%,#991d85), color-stop(100%,#991d85));
	background: -webkit-linear-gradient(top, #c794c3 0%,#991d85 50%,#991d85 100%);
	background: -o-linear-gradient(top, #c794c3 0%,#991d85 50%,#991d85 100%);
	background: -ms-linear-gradient(top, #c794c3 0%,#991d85 50%,#991d85 100%);
	background: linear-gradient(to bottom, #c794c3 0%,#991d85 50%,#991d85 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c794c3', endColorstr='#991d85',GradientType=0 ); */
	background: #8c2a7d;
	color: #fff;
	text-decoration: none;
	z-index: 200;
	position: relative;
}

.open-filter i {
	position: absolute;
	top: 13px;
	right: 10px;
	font-size: 16px;
}

.close-filter {
	display: none;
	height: 45px;
	padding-left: 10px;
	line-height: 45px;
	background: #8c2a7d;
	/* background: #b75ea8;
	background: -moz-linear-gradient(top, #c794c3 0%, #991d85 50%, #991d85 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c794c3), color-stop(50%,#991d85), color-stop(100%,#991d85));
	background: -webkit-linear-gradient(top, #c794c3 0%,#991d85 50%,#991d85 100%);
	background: -o-linear-gradient(top, #c794c3 0%,#991d85 50%,#991d85 100%);
	background: -ms-linear-gradient(top, #c794c3 0%,#991d85 50%,#991d85 100%);
	background: linear-gradient(to bottom, #c794c3 0%,#991d85 50%,#991d85 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c794c3', endColorstr='#991d85',GradientType=0 ); */
	color: #fff;
	text-decoration: none;
	z-index: 200;
	position: relative;
}

.close-filter,
.open-filter {
	font-size: 16px;
}

.close-filter:hover,
.open-filter:hover {
	text-decoration: none;
	color: #fff;
}

.close-filter i {
	position: absolute;
	top: 13px;
	right: 10px;
	font-size: 16px;
}

.open-filter-wrapper.open .open-filter {
	display: none;
}

.open-filter-wrapper.open .close-filter {
	display: block;
}

.wrapper.login.standalone {
	width: 424px;
	padding-left: 0;
	margin-top: 50px;
}

.wrapper.login.standalone .header {
	text-align: center;
	margin-bottom: 30px;
}

.wrapper.login.standalone form {
	width: 424px;
	border: 1px solid #dddcda;
	background: #eeedec;
	padding: 37px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.wrapper.login.standalone form input {
	height: 36px;
	line-height: 36px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0px 12px;
	width: 248px;
	float: left;
	margin-right: 16px;
	font-size: 16px;
}

.wrapper.login.standalone form button {
	background: #991d85;
	color: #fff;
	height: 36px;
	border: 0;
	border-radius: 3px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0px 12px;
	font-size: 16px;
}

.wrapper.login.standalone form button i {
	padding-right: 8px;
}

.back-button {
	display: inline-block;
	padding: 2px 15px;
	padding-left: 35px;
	cursor: pointer;
	color: #666666;
	text-decoration: none;
	background: url(../images/back-button.png) no-repeat 10px center #eeedec;
	-webkit-background-size: 14px 12px;
	background-size: 14px 12px;
	font-size: 16px;
	text-transform: uppercase;
	height: 40px;
	line-height: 38px;
	font-family: 'evonik_prokyonmedium';
}

.open-filter-wrapper {
	display: none;
}

@media screen and (max-width: 992px) {
	.produkte,
	.right-bar {
		width: 100%;
	}

	.right-bar {
		display: none;
	}

	.right-bar--open {
		display: block;
	}

	.right-bar {
		order: 1;
		margin-bottom: 50px;
	}

	.produkte {
		order: 2;
	}

	.open-filter-wrapper {
		display: block;
		margin-bottom: 20px;
	}
}

@media screen and (max-width: 768px) {
	.produkte .inner > a {
		width: 100%;
	}

	.app-headline,
	.right-bar > h3,
	.count_elements {
		font-size: 18px;
	}

	.count_elements strong {
		display: block;
	}

	.inner .no_search_results {
		width: 100%!important;
	}
}

#active_filters div {
	background: #971c80;
	padding: 5px 10px;
	color: #fff;
	margin-bottom: 10px;
	cursor: pointer;
	position: relative;
}


#active_filters div:after {
	content: '';
	background: url('../images/lnr-cross.svg') no-repeat;
	color:#fff;
	position: absolute;
	right: 10px;
	top: 50%;
	width: 20px;
	height: 20px;
	transform: translateY(-50%);
}

/* Search as you type */
.search_hide {
	display: none!important;
}

.search_input {
	font-weight: 200;
    line-height: 1.125rem;
    background-color: #e9e6df!important;
    color: #000!important;
    outline: none!important;
    width: 200px;
    border: 0!important;
	padding: 8px!important;
	position: relative;
}

.right-bar .search_input {
    width: 100%;
}

.right-bar .search_input_wrapper{
    margin-bottom: 20px;
}

/* .produkte .search_input:focus {
	width: 240px;
}*/



.selection_search_wrapper {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.search_input_wrapper .search_icon {
	height: 100%;
	width: 40px;
	background: url('../images/icon-search-solid.svg') no-repeat;
	background-size: 50%;
	background-position: center;
	background-color: #e8e6e0;
}

.search_input_wrapper {
	display: flex;
	height: 40px;
}

.inner .no_search_results {
	display: none;
	cursor: unset;
	width: 100%;
	margin-left: 5px;
	margin-right: 5px;
}

.inner .no_search_results:hover {
	background-color: #e8e6e0;
}

.inner .no_search_results:hover h2 {
	color:#991d85;
}

.no_search_results .refresh_search_btn {
	border-radius: 0;
    border: none;
    -webkit-appearance: none;
    background: #8c2a7d;
    color: #fff;
    font-size: 18px;
    font-family: 'evonik_prokyonbold';
    text-transform: uppercase;
    height: 40px;
    line-height: 40px;
	padding: 0 15px;
	margin-top: 10px;
}

.no_search_results .refresh_search_btn:hover {
	background-color: #000;
	cursor: pointer;
}

@media screen and (max-width: 600px) {
	.selection_search_wrapper {
		display: block;
	}

	.search_input {
		width: 100%;
	}

	.count_elements {
		margin-bottom: 15px;
	}
}

.kategorien .accordion h3.firstlevel.nav-highlight {
	color: #8c2a7d;
}