/* --------------- (c) 2013 alogis ag / beat schaub ------------------------------------------------------------------------ */
@charset "utf-8";
/* --------------- Colors -----------------------------------------------------------------------------------------------------
------------------ End Colors ---------------------------------------------------------------------------------------------- */

/* --------------- General Definitions ------------------------------------------------------------------------------------- */
*														{ margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; }
/* Set table cellspacing / cellpadding to 0 */
table													{ border-spacing: 0; border-collapse:collapse; border: none; }
/* 'Cuz not all browsers do it the same way??? */
table, td											{ -moz-box-sizing: border-box; vertical-align: top; }
/* Prevent IE from making border and outline around images that are links */
a > img												{ border: none; outline: none; }
/* For Firefox who doesn't know these tags anymore */
b, strong											{ font-weight: bold; }

.clear:after										{ display: block; content: ""; clear: both; }
/* --------------- End General Definitions --------------------------------------------------------------------------------- */
/* --------------- Skelleton ------------------------------------------------------------------------------------------------ */
html													{ height: 100%; }
body													{ height: 100%; padding: 0 20px; font: 12.5px "Merriweather Sans", sans-serif; color: #000000; font-weight: 300; line-height: 18px; }
/*body													{ background: url("/pages/img/bluestripe.jpg") repeat-x left top #c8c8c8; }*/
body													{ background: url("/pages/img/background_knuchel.svg") repeat-x center 195px #254e9b; }

#container											{ position: relative; max-width: 960px; margin: 0 auto; background: linear-gradient(to bottom, transparent 0%,transparent 400px,#ffffff 400px,#ffffff 400000px); }
.clear												{ clear: both; }

header												{ position: relative; z-index: 2; }
nav													{ position: relative; z-index: 3; }
main, footer										{ position: relative; z-index: 1; }
hr														{ clear: both; }

.grp 													{ width: 100%; }
.img_cms.R											{ margin: 0 0 15px 30px; }
.img_cms.RT											{ margin: 0 0 0 30px; line-height: 1px; }

.muss 												{ border: 1px solid rgba(37, 78, 155, 1) !important; }
.valNO 												{ background: url(/admin/img/warning.png) no-repeat right center #ffffff !important; border-color: #CF5054 !important; }
.flex_container									{ display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: 100%; }
.flex_box_33										{ width: 30%; margin-bottom: 30px; }
.flex_box_50										{ width: 48%; margin-bottom: 30px; }

.flex_container_jump								{ margin-bottom: -30px; }
.flex_box_jump										{ position: relative; /*padding-bottom: 40px;*/ /*margin-bottom: 5%;*/ }
/*.flex_box_jump .colorLink						{ position: absolute !important; left: 0; right: 0; bottom: 0; }*/

.flex_box_map1										{ width: 64%; }
.flex_box_map2										{ width: 30%; }
/* --------------- End Skelleton -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------------------------------------- */
/* --------------- HEADER --------------------------------------------------------------------------------------------------- */
header												{ height: 155px; background: rgba(37, 78, 155, 1); }

header #logo										{ max-width: 320px; width: 33.34%; }
header #colorama, header #knuchel, header #eclatin	{ cursor: pointer; }
header #logo #knuchel							{ width: 100%; height: 73px; margin-top: 5px;
														  background-image: url("/pages/img/knuchel_logo_2024.svg"); 
														  background-position: top;
														  background-repeat: no-repeat;
														  background-size: 100% auto; }
/*
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
	header #logo #knuchel							{ background-image: url(/pages/img/knuchel_logo@2x.png); }
}
*/

header #logo #colorama							{ width: 100%; height: 73px; margin-top: 5px;
														  background-image: url("/pages/img/colorama_logo_2024.svg"); 
														  background-position: top;
														  background-repeat: no-repeat;
														  background-size: 100% auto; }

header #logo #eclatin							{ width: 100%; height: 73px; margin-top: 7px;
														  background-image: url("/pages/img/eclatin_logo.svg"); 
														  background-position: top;
														  background-repeat: no-repeat;
														  background-size: 100% auto; }

header #logo table								{ width: 100%; }
header #logo table td							{ color: #ffffff; }
header #logo table td a							{ color: #ffffff; text-decoration: none; }
header #logo table td:first-child			{ width: 100%; }
header #logo table td:last-child				{ white-space: nowrap; }
header .logo_text_colorama						{ font-weight: bold; color: #fdca00; }
header .logo_text_colorama div:nth-child(1),
header .logo_text_colorama div:nth-child(2),
header .logo_text_colorama div:nth-child(3),
header .logo_text_colorama div:nth-child(4),
header .logo_text_colorama div:nth-child(5)	{ font-size: 19px; line-height: 32px; padding-bottom: 4px; }
header .logo_text_colorama a					{ color: #fdca00; }

header #middle										{ max-width: 460px; width: 52%; }
header #partner									{ padding: 20px 0 0 0; }
header #partner div								{ max-width: 120px; width: 26.09%; }
header #partner img								{ width: 100%; }
header ul#service									{ padding: 44px 0 0 0; }
header ul#service:after							{ display: block; content: ""; clear: both; }
header ul#service li								{ float: left; list-style: none; padding-right: 12px; }
header ul#service li a							{ display: block; position: relative; height: 24px; padding-left: 32px;
														  color: #ffffff; line-height: 24px; }
header ul#service li a:after					{ display: block; content: ""; position: absolute; left: 0; bottom: 0; height: 24px; width: 24px;
														  background-position: center bottom; background-repeat: no-repeat; background-size: contain; }
/*header ul#service li#basket a:after			{ background-image: url("/pages/img/svg/basket_white.svg"); }*/
header ul#service li#basket a:after			{ background-image: url("/pages/img/svg/bucket_white.svg"); height: 48px; }
header ul#service li#login a:after			{ background-image: url("/pages/img/svg/login_white.svg"); }
header ul#service li#myshop a:after			{ background-image: url("/pages/img/svg/user_white.svg"); }
header ul#service li#logout a:after			{ background-image: url("/pages/img/svg/logout_white.svg"); }

header .lang										{ }
header .lang ul									{ padding-top: 26px; }
header .lang ul li								{ padding: 3px 0; list-style: none; }
header .lang ul li a								{ color: #ffffff; line-height: 10px; text-decoration: none; font-size: 11px; }
header .lang ul li a span						{ display: inline-block; width: 10px; height: 10px; margin: 0; background: #254e9b; }
header .lang ul li a.current span,
header .lang ul li a:hover span				{ background: #ffffff; }

.tooltip_templates								{ display: none; }

#basketCounter.full:before						{ display: inline; content: "("; }
#basketCounter.full:after						{ display: inline; content: ")"; }
/* --------------- END HEADER ----------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------------------------------------------------- */
/* --------------- NAVIGATION ----------------------------------------------------------------------------------------------- */
nav													{ position: relative; height:  40px; background: rgba(37, 78, 155, 1); }
nav table											{ width: 100%; }

nav table td#search								{ width: 100%; }
nav table td#search div#search_container	{ position: relative; background: #969696; }
nav table td#search div input					{ width: 100%; height: 40px; line-height: 26px; padding: 2px 5px 2px 32px; outline: none;
														  border: 5px solid #969696; border-radius: 10px; background: url("/pages/img/search.png") no-repeat 6px center #ffffff; }


#searchResult										{ }
#searchResult ul									{ display: block; max-height: 633px; max-width: 350px; padding: 3px; background: #969696; border: none; box-shadow: 0 3px 10px rgba( 0,0,0,0.3 ); }
#searchResult ul li								{ list-style: none; padding: 3px; }
#searchResult ul li a							{ display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap;
														  margin: 0 !important; padding: 3px; background: #ffffff; border: none !important; }

#searchResult ul li a .sThumb					{ width: 17%; line-height: 1px; background: #ffffff; padding: 3px; }
#searchResult ul li a .sThumb div			{ height: 39px; background-repeat: no-repeat; background-position: center; background-size: contain; }

#searchResult ul li a .sText					{ width: 83% !important; line-height: 22px; font-weight: bold; font-size: 11px; }
#searchResult ul li a .sText div.sText_top{ padding: 0 5px; border-bottom: 1px solid #969696; }
#searchResult ul li a .sText div span		{ float: right; }
#searchResult ul li a .sText div.sText_bottom{ padding: 0 5px; max-width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
#searchResult ul li a .sText div.sText_bottom span { background-color: #004D9F; color: #FFFFFF; line-height: 19px; padding-left: 3px; padding-right: 3px; margin-top: 3px; }

#searchResult ul li.sRien						{ padding: 3px; }
#searchResult ul li.sRien > div				{ width: 100%; margin: 0; padding: 0; background: #ffffff; border: none !important; }
#searchResult ul li.sRien > div > div		{ padding: 4px 5px 3px 5px; line-height: 20px; background: rgba( 221,40,33,0.2 ); border-left: 3px solid rgba( 221,40,33,1 ); color: #333333 !important; }

#searchResult ul li a.ui-state-active		{ background: #254997 !important; color: #ffffff !important; }
#searchResult ul li a.ui-state-active  div.sText_top{ border-bottom: 1px solid #ffffff; }

nav table td.nav div								{ padding-left: 2px; }
nav table td.nav div a.nav						{ display: block; padding: 11px 25px 9px 25px; height: 40px; line-height: 20px;
														  background: #969696;
														  color: #ffffff; /*text-transform: uppercase;*/ text-decoration: none; font-weight: 700; white-space: nowrap; }
nav table td.nav.current div a.nav,
nav table td.nav div:hover a.nav				{ background: #e6e6e6; color: #808080; }

nav table td.nav div.navSub					{ position: relative; }

nav table td.nav div ul							{ display: none; position: absolute; right: 0; top: 35px; padding-top: 5px; }
nav table td.nav div:hover ul					{ display: block; }
nav table td.nav div ul li						{ list-style: none; }
nav table td.nav div ul li a					{ display: block; padding: 7px 20px;
														  background: rgba(255,255,255,0.9);
														  color: #000000; text-decoration: none; white-space: nowrap; font-weight: 700; }
nav table td.nav div ul li a td				{ white-space: nowrap; vertical-align: middle; line-height: 16px; }
nav table td.nav div ul li a td:nth-child(1)					{ }
nav table td.nav div ul li a td:nth-child(2)					{ width: 100%; padding: 0 3px; }
nav table td.nav div ul li a td:nth-child(2) div			{ height: 8px; min-width: 20px; border-bottom: 1px dotted #000000; }
nav table td.nav div ul li a td:nth-child(3) div			{ width: 10px; height: 16px; background: url("/pages/img/nav_arrow.png") no-repeat left 1px; }

nav table td.nav div ul li:first-child a	{ padding: 20px 20px 7px 20px; }
nav table td.nav div ul li:last-child a	{ padding: 7px 20px 20px 20px; }
nav table td.nav div ul li a:hover			{ color: #254e9b; }
nav table td.nav div ul li a:hover td:nth-child(2) div	{ border-bottom: 1px dotted #254e9b;  }
nav table td.nav div ul li a:hover td:nth-child(3) div	{ background: url("/pages/img/nav_arrow_blue.png") no-repeat left 1px;  }

#navProduct_box									{ display: none; position: absolute; left: 0; top: 30px; width: 100%; padding: 10px 0 0 0; }
.navProduct_container:hover #navProduct_box	{ display: block; }
#navProduct_box2									{ background: rgba(255, 255, 255, 0.9); padding: 20px 20px 10px 20px; }
.navProduct											{ display: block; width: 450px; height: 16px; margin-bottom: 10px;
														  color: #000000; text-decoration: none; line-height: 16px; font-size: 11px; font-weight: 700; }
.navProduct .navProductNr div					{ width: 30px; text-align: right; padding: 0 3px 0 0; color: #ffffff; margin-right: 10px; }

.navProduct .navProductName					{ white-space: nowrap; vertical-align: middle; padding-left: 3px; }
.navProduct .navProductLine					{ width: 100%; padding: 0 3px; }
.navProduct .navProductLine div				{ height: 12px; border-bottom: 1px dotted #000000; }
.navProduct .navProductArrow div				{ width: 10px; height: 15px; background: url("/pages/img/nav_arrow.png") no-repeat left 1px;  }

.navProduct:hover									{ color: #254e9b; }
.navProduct:hover .navProductLine div		{ border-bottom: 1px dotted #254e9b;  }
.navProduct:hover .navProductArrow div		{ background: url("/pages/img/nav_arrow_blue.png") no-repeat left 1px;  }

article #navProduct_box							{ display: block; position: relative; top: 0; padding: 0; }
/* --------------- END NAVIGATION ------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */





/* -------------------------------------------------------------------------------------------------------------------------- */
/* --------------- SLIDER --------------------------------------------------------------------------------------------------- */
section#slider										{ border-bottom: 2px solid #969696; }
/* --------------- END SLIDER ----------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------------------------------------------------- */
/* --------------- HOT ------------------------------------------------------------------------------------------------------ */
/* --------------- END HOT -------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------------------------------------------------- */
/* --------------- MAIN ----------------------------------------------------------------------------------------------------- */
main													{ display: block; background: #ffffff; padding-bottom: 25px; }
main article#cms									{ padding: 30px 30px 0 30px; }
main article#cms .img_cms.R					{ margin: 0 0 10px 30px; }
.cms_list_box										{ /*padding-bottom: 30px;*/ }

#map													{ float: right; }

main article#cms ul								{ padding-left: 18px; }
/* --------------- Knowhow -------------------------------------------------------------------------------------------------- */
.kh_chapter											{ margin-bottom: 40px; }
.kh_subchapter										{ margin-bottom: 20px; }
.kh_subtitle										{ padding-bottom: 10px; }

.th_float_container:after						{ display: block; content: ""; clear: both; }
.th_float_box										{ float: left; width: 435px; }
.th_float_box:nth-child(2N-1)					{ margin-right: 30px; }


.kh_box												{ margin-bottom: 5px; border: solid #dddddd; border-width: 1px 0; }
.kh_title											{ position: relative; cursor: pointer; padding: 5px 10px; background: #f5f5f5; font-weight: bold; line-height: 18px; }
.kh_title:after									{ display: block; content: ""; position: absolute; right: 5px; top: 0; width: 28px; height: 28px; opacity: 0.7;
														  background: url("/pages/img/down_black.svg") no-repeat center; background-size: 16px auto; }
.open .kh_title:after							{ background-image: url("/pages/img/up_black.svg") !important; }
														  
.kh_title											{ cursor: pointer; padding: 5px 10px; background: #f8f8f8; }
.kh_text												{ display: none; padding: 20px; background: #fafafa; border-top: 1px solid #dddddd; }
.open .kh_text										{ display: block; }


/* --------------- Film-Image Höche ----------------------------------------------------------------------------------------- */

#film 												{ width: 900px;
														  height: 600px;}
																				



 
/* --------------- Home ----------------------------------------------------------------------------------------------------- */
.home_det											{ padding: 30px; }
.home_container									{ padding: 15px 15px 0 15px; }
.home_box											{ width: 32.26%; max-width: 300px; margin: 0 0 15px 0; padding: 186px 0 0 0; cursor: pointer;
														  background-repeat: no-repeat; background-position: center top; background-size: 300px auto; }
.home_box.home_box_empty						{ margin: 0; padding: 0; }
.home_arrow											{ height: 110px; padding: 10px 50px 0 10px;
														  background: url("/pages/img/home_arrow_white.png") no-repeat right center #254E9B;
														  border-bottom: 10px solid #254E9B; overflow: hidden;
														  color: #ffffff; }
.home_title											{ text-transform: uppercase; font-weight: 700 }



.content_table td:first-child					{ padding-right: 20px; }

#home_showmore										{ position: relative; display: block; margin: 0 15px 15px 15px; padding: 7px 15px; background: #969696;
														  text-transform: uppercase; font-weight: 700; color: #ffffff; line-height: 18px; }
#home_showmore:hover								{ background: #254997; }
#home_showmore:after								{ display: block; position: absolute; right: 0; top: 0; content: ""; width: 32px; height: 32px;
														  background: url("/pages/img/down_white.svg") no-repeat center; background-size: 16px auto; }

.home_news_more									{ display: none !important; }
.open .home_news_more							{ display: flex !important; }
.home_news_toggler								{ height: 30px; background-repeat: no-repeat; background-position: center; background-size: 36px auto; background-image: url("/pages/img/arrow_down_686868.svg"); cursor: pointer; }
.home_news_toggler:hover						{ background-image: url("/pages/img/arrow_down_black.svg"); }
.open .home_news_toggler						{ background-image: url("/pages/img/arrow_up_686868.svg"); }
.open .home_news_toggler:hover				{ background-image: url("/pages/img/arrow_up_black.svg"); }
/* --------------- Home ----------------------------------------------------------------------------------------------------- */
/* --------------- Templates ------------------------------------------------------------------------------------------------ */
/* --------------- Template: Titel Text & bis 5 Bilder ---------------------------------------------------------------------- */
.tpl_90:after										{ display: block; clear: both; content: ""; }
.tpl_90_title										{ float: left; width: 64%; }
.tpl_90_images										{ float: right; width: 32%; }
.tpl_90_images > div								{ max-width: 100%; }
.tpl_90_images > div > img						{ max-width: 100%; padding-bottom: 15px; }
.tpl_90_text										{ float: left; width: 64%; }
.tpl_90_text p										{ padding-bottom: 16px; }

/* --------------- Template: Titel Text & bis 5 slightly wider Bilder ------------------------------------------------------- */
.tpl_91:after										{ display: block; clear: both; content: ""; }
.tpl_91_title										{ float: left; width: 56%; }
.tpl_91_images										{ float: right; width: 40%; }
.tpl_91_images > div								{ max-width: 100%; }
.tpl_91_images > div > img						{ max-width: 100%; padding-bottom: 15px; }
.tpl_91_text										{ float: left; width: 56%; }
.tpl_91_text p										{ padding-bottom: 16px; }


/* -------------------------------------------------------------------------------------------------------------------------- */
/* --------------- Download ------------------------------------------------------------------------------------------------- */
.down_box_2											{ margin: 15px 0 0 0; padding: 15px 0 0 0; border-top: 3px solid #cccccc; }
.down_box_3											{ margin: 15px 0 0 0; padding: 15px 0 0 0; border-top: 1px solid #cccccc; }
#download a											{ display: block; line-height: 16px; padding: 2px 0 2px 20px; background-repeat: no-repeat; background-position: left 2px; }
/* -------------------------------------------------------------------------------------------------------------------------- */
/* --------------- PRODUCT -------------------------------------------------------------------------------------------------- */
/* --------------- dyn/product_lst.cfm -------------------------------------------------------------------------------------- */
#product_lst										{ padding: 20px 0 20px 15px; }

#product_lst_header								{ font-weight: 700; margin: 0 15px 0 0; padding-bottom: 7px; border-bottom: 3px solid rgba(37, 78, 155, 1); }
.product_lst_header_nr div						{ width: 75px; padding: 0 5px; color: #ffffff; text-align: right; line-height: 24px; }
.product_lst_header_title div					{ padding: 2px 15px 0 5px; color: rgba(37, 78, 155, 1); text-align: right; line-height: 22px; white-space: nowrap; }
.product_lst_header_select 					{ width: 100%; }
.product_lst_header_select select			{ padding: 3px; border: 1px solid #c8c8c8; line-height: 16px; height: 24px; }
.product_lst_header_filter input				{ width: 234px; height: 24px; line-height: 22px; padding: 4px 0 0 28px !important;
														  border: 1px solid #c8c8c8; text-transform: uppercase;
														  background: url("/pages/img/search.png") no-repeat 6px center #ffffff; background-size: 18px; }

#product_lst_lst									{ padding: 20px 0 5px 0; }
/* --------------- rpc/product_lst.cfm -------------------------------------------------------------------------------------- */
.product_lst_box									{ display: block; position: relative; float: left; max-width: 300px; width: 31.746%; height: 380px; margin: 0 1.587% 15px 0; padding: 0;
														  color: #ffffff !important; overflow: hidden }

/* .product_lst_box {
	max-width: 100%; width: calc((100% - 45px) / 3); margin: 0 15px 15px 0;
	@media screen and (max-width:640px) {
		width: 100%;
	}
	& .product_lst_box_info { width: auto !important; right: 0; }
} */


#product_lst_lst {
	& h3 { width: 100%; margin-right: 0 !important; }

	& .product_lst_box {
		max-width: 100%; width: calc((100% - 30px) / 3); margin: 0 0 15px 0; background-color: #d1d2d4;
		@media screen and (max-width:640px) {
			width: 100%;
		}
		@media screen and (min-width:1015px) {
			width: 300px;
		}
		& .product_lst_box_info { width: auto !important; right: 0; }
	}

	display: flex; flex-wrap: wrap; justify-content: flex-start; column-gap: 15px; padding-right: 15px;
	& > div.clear { display: none; }
}


/*.product_lst_box									{ display: block; position: relative; float: left; width: 300px; height: 380px; margin: 0 15px 15px 0; padding: 0;
														  color: #ffffff !important; overflow: hidden }*/
/*.product_lst_box.hide							{ display: none !important; }*/
.hide											{ display: none !important; }
														  
.product_lst_box_image							{ width: 100%; height: 380px; padding: 20px;
														  background-repeat: no-repeat; background-position: center top; background-size: contain; background-color: #d1d2d4; }
.product_lst_box_info							{ position: absolute; left: 0; top: 0; width: 100%; height: 380px; margin-top: 265px; transition: margin 0.75s; padding: 16px 20px 20px 20px;
														  background: rgba(37, 78, 155, 0.8); overflow: hidden; }
.product_lst_box_info:hover					{ margin-top: 0px; }

.product_lst_box_info_title					{ height: 100px; line-height: 23px; overflow: hidden;
														  font-size: 18px; font-weight: 700; }
.product_lst_box_info_title div				{ padding-bottom: 6px; margin-bottom: 6px; height:30px; line-height: 24px; border-bottom: 1px solid rgba( 255,255,255,0.6 ); }
.product_lst_box_info_title div sup			{ vertical-align: top; position: relative; vertical-align: baseline; top: -0.45em; font-size: 0.65em; }

.product_lst_box_info_title div span		{ float: right; }

.product_lst_box_info_text						{ height: 180px; line-height: 20px; margin-bottom: 20px; overflow: hidden;
														  font-size: 13px; }
.product_lst_box_info_more						{ height: 40px; padding: 10px 30px 10px 10px; overflow: hidden;
														  background: url("/pages/img/product_arrow_blue.png") no-repeat 240px center #ffffff;
														  font-size: 18px; line-height: 20px; font-weight: 700; color: rgba(37, 78, 155, 1); }

/* --------------- dyn/product_det.cfm -------------------------------------------------------------------------------------- */
.flex_container									{ display: flex; justify-content: space-between; flex-wrap: wrap; align-self: flex-start; width: 100%; }


#product_det										{ padding: 20px 15px; }

#product_det_header								{ font-weight: 700; margin: 0; padding-bottom: 7px; border-bottom: 3px solid rgba(37, 78, 155, 1); }
.product_det_header_article					{ width: 100%; padding: 2px 0 0 0;
														  color: rgba(37, 78, 155, 1); line-height: 22px; white-space: nowrap; font-size: 18px; }
.product_det_header_nr div						{ width: 75px; padding: 0 5px; color: #ffffff; text-align: right; line-height: 24px; cursor: pointer; }
.product_det_header_title div					{ padding: 2px 0 0 5px; color: rgba(37, 78, 155, 1); text-align: right; line-height: 22px; white-space: nowrap; cursor: pointer; }

#product_det_table								{ width: 100%; margin-top: 20px; }
.product_det_img_box								{ width: 24%; height: 285px;
														  background-repeat: no-repeat; background-position: center; background-size: contain; }
.product_det_txt_box								{ width: 74%; }
/*.product_det_img_box								{ width: 225px; height: 285px;
														  background-repeat: no-repeat; background-position: center; background-size: contain; }
.product_det_txt_box								{ width: 695px; }*/
.product_det_txt_description					{ margin-bottom: 20px; text-align:justify; }
.product_det_txt_files							{ margin-bottom: 20px; }
.product_det_txt_files:after					{ display: block; content: ""; clear: both; }
.product_det_txt_files a						{ display: block; float: left; height: 50px; width: 50%; line-height: 16px; margin-bottom: 10px; padding: 0 20px 0 40px;
														  background: url("/pages/img/file/pdf.svg") no-repeat left 12px; background-size: auto 26px;
														  font-weight: 700; color: #4d4d4d; text-decoration: none; vertical-align: middle; }
.product_det_txt_files a span					{ display: table-cell; height: 50px; width: 347px; line-height: 16px; vertical-align: middle; }
.product_det_txt_files a:hover				{ background: url("/pages/img/file/pdf_hover.svg") no-repeat left center; background-size: auto 26px; color: #254E9B; }

.product_det_txt_files a.technical			{ background: url("/pages/img/file/technical.svg") no-repeat left 12px; background-size: auto 36px; }
.product_det_txt_files a.technical:hover	{ background: url("/pages/img/file/technical_hover.svg") no-repeat left 12px; background-size: auto 36px; }

.product_det_txt_files a.safety				{ background: url("/pages/img/file/safety.svg") no-repeat left 12px; background-size: auto 29px; }
.product_det_txt_files a.safety:hover		{ background: url("/pages/img/file/safety_hover.svg") no-repeat left 12px; background-size: auto 29px; }

.product_det_txt_files a.jpg					{ background: url("/pages/img/file/jpg.svg") no-repeat left center; background-size: auto 30px; }
.product_det_txt_files a.jpg:hover			{ background: url("/pages/img/file/jpg_hover.svg") no-repeat left center; background-size: auto 30px; }



.product_det_txt_article						{ padding-top: 20px; }
.product_det_txt_article table				{ width: 100%; }
.product_det_txt_article th					{ padding: 5px 10px 5px 5px; line-height: 14px; background: #254E9B; color: #ffffff; font-weight: 700; text-align: left; }
.product_det_txt_article tbody tr:nth-child(2N)	{ background: #c7d6ee; }
.product_det_txt_article td					{ padding: 5px 10px 5px 5px; line-height: 14px; vertical-align:  middle; }
/*.product_det_txt_article td.add_to_basket { cursor:pointer; background-image:url(/pages/img/basket.png); background-size:18px 16px; background-repeat:no-repeat; background-position:center; }*/
.product_det_txt_article td.add_to_basket { cursor:pointer; background-image:url(/pages/img/svg/bucket_blue.svg); background-size:auto 20px; background-repeat:no-repeat; background-position:center; }

.product_det_txt_files_other_toggler		{ clear: both; line-height: 40px; padding-left: 40px; margin: 20px 0 10px 0;
														  background: url("/pages/img/down_black.svg") no-repeat left center; background-size: 26px auto; cursor: pointer; }
.product_det_txt_files_other					{ display: none; }
.open .product_det_txt_files_other			{ display: block; padding-bottom: 30px; }

.product_det_txt_files_more_toggler			{ clear: both; line-height: 40px; padding-left: 40px; margin: 20px 0 10px 0;
														  background: url("/pages/img/down_black.svg") no-repeat left center; background-size: 26px auto; cursor: pointer; }
.product_det_txt_files_more					{ display: none; }
.product_det_txt_files_more iframe			{ margin-bottom: 10px; }
.more .product_det_txt_files_more			{ display: block; }

.product_det_comment								{ padding: 20px 0 0 0; }

/* -------------------------------------------------------------------------------------------------------------------------- */
/* --------------- BASKET --------------------------------------------------------------------------------------------------- */
.basket_crump										{ padding: 20px 5px; background: #eeeeee; }
.basket_crump ul									{ height: 30px; overflow: hidden; }
.basket_crump ul li								{ float: left; list-style: none; }

.basket_crump ul li > span,
.basket_crump ul li a							{ position: relative; display: block; line-height: 15px; padding: 0 10px 0 40px; font-weight: bold; }
.basket_crump ul li span span:first-child,
.basket_crump ul li a span:first-child		{ font-weight: 100; }
.basket_crump ul li a.bcBasket				{ padding: 7.5px 10px 0 10px; }
.basket_crump ul li a.bcBasket span:first-child	{ font-weight: bold; }
.basket_crump ul li a.bcBasket span:first-child	{ font-weight: bold; }
.basket_crump ul li span span,
.basket_crump ul li a span						{ display: block; }

.basket_crump ul li > span:after,
.basket_crump ul li a:after					{ position: absolute; left: 0; top: 0; display: block; content: ""; width: 30px; height: 30px; background-size: auto 24px !important; }
.basket_crump ul li a:after					{ background: url("/pages/img/svg/arrow_right_254997.svg") no-repeat center; }
.basket_crump ul li span:after				{ background: url("/pages/img/svg/arrow_right_969696.svg") no-repeat center; }
.basket_crump ul li.current span:after		{ background: url("/pages/img/svg/arrow_right_black.svg") no-repeat center; }

.basket_crump ul li:first-child a:after	{ display: none; }

.basket_crump ul li > span						{ color: #969696; }
.basket_crump ul li.current > span			{ color: #000000; }

.basket_crump ul li a							{ color: #254997; }
.basket_crump ul li a:hover					{ color: #000000; }


.basket_container									{ padding: 20px 15px; }
.basket_header_container						{ margin: 0 -15px; padding: 0 15px 10px 15px; border-bottom: 1px solid #eeeeee; }
.basket_main_container							{ padding: 20px 0; }
.basket_comment_box								{ padding: 0 0 20px 0; }

.basket_button_container						{ margin: 0 -15px; padding: 20px 15px 20px 15px; border-top: 3px solid #eeeeee; }
.basket_button_container_1						{ padding: 20px 59px 20px 15px; }
.basket_button_container_2						{ padding: 20px 113px 20px 15px; }

.basket_button_container .button				{ float: right; margin-left: 30px; min-width: 120px; }
.order_button_container							{ display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap;
														  width: 100%; }
.order_button_container input[type="button"],
.order_button_container input[type="submit"],
.order_button_container button				{ min-width: 120px; padding: 2px 20px; }
.order_button_container .agb					{ margin-right: 30px; }

/* --------------- END BASKET ----------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */


.bskTable											{ width: 100%; }
.bskTable th										{ padding: 3px 6px; text-align: left; border-bottom: 1px solid #000000; line-height: 25px; }
.bskTable td										{ padding: 3px 6px; line-height: 25px; vertical-align: middle; }
.bskTable tfoot td								{ font-weight: bold; }
.bskTable tfoot tr:first-child td			{ padding-top: 10px; }
.bskTable tfoot tr:last-child td				{ padding-bottom: 10px; }
.bskTable tbody tr:nth-child(2N-1) td		{ background: #eeeeee; }

.bskTable td.bsk_nr								{ font-weight: bold; }
.bskTable td.bsk_name							{ width: 100%; }
.bskTable td.bsk_price							{ text-align: right; }
.bskTable td.bsk_price_total					{ font-weight: bold; }
.bskTable td.bsk_quantity input				{ width: 50px; background: #ffffff; text-align:center; }
.bskIcon												{ width: 24px; height: 24px; padding: 6px; cursor: pointer; }
.bskIcon div										{ width: 12px; height: 12px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.bskIcon_del div									{ background-image: url("/pages/img/svg/del_black.svg"); }
.bskIcon_del:hover div							{ background-image: url("/pages/img/svg/del_f00000.svg"); }

.bsk_dbb												{ border-bottom: 3px double #000000; }
.bsk_sbt												{ border-top: 1px solid #000000; }


.product_det_hazard_pictos						{ padding: 50px 0 0 0; }
.product_det_hazard_pictos img				{ float: left; height: 50px; margin: 0 20px 20px 0; }
.product_det_txt_article .product_det_hazard_statements tbody tr:nth-child(2N) { background: #e6e6e6; }
.tooltip_hazard img								{ height: 180px; background-color: #ffffff; border: 10px solid #ffffff; margin: 0 20px 0 0; }
/* --------------- END MAIN ------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------------------------------------- */
/* --------------- ACCOUNT -------------------------------------------------------------------------------------------------- */
#account_container								{ display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap;
														  width: 100%; padding: 0 0 20px 0; }

.an_container										{ width: 100%; background: #f6f6f6; padding: 20px 0 0 0; border-bottom: 2px solid #254997; }
.an_container ul:after							{ display: block; content: ""; clear: both; }
.an_container ul li								{ list-style: none; float: left; padding-left: 20px; }
.an_container ul li a							{ display: block; padding: 9px 15px 7px 15px; line-height: 20px; text-transform: uppercase; text-decoration: none; font-weight: 700; color: #333333 }
.an_container ul li:hover a					{ background: #969696; color: #ffffff; }
.an_container ul li.current a					{ background: #254997; color: #ffffff; }

.ac_container										{ width: 100%; padding: 20px 15px; }
.ac_container h1									{ padding-bottom: 30px; }
.ac_container label								{ display: block; float: left; width: 25%; font-weight: bold; line-height: 24px; }
.ac_container input[type="text"],
.ac_container input[type="password"]		{ float: left; width: 45%; margin-bottom: 10px; }
.ac_container input[type="submit"]			{ float: left; width: 30%; }

.afTable td											{ /*white-space: nowrap;*/ line-height: 24px; }
/* --------------- END ACCOUNT ---------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */



/* -------------------------------------------------------------------------------------------------------------------------- */
/* --------------- FOOTER --------------------------------------------------------------------------------------------------- */
#morepartner										{ width: 100%; z-index: 1; }
.mp_container										{ width: 100%; padding: 30px 30px 15px 30px; background: #ffffff; 
														  display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.mp_container a									{ height: 7vW; max-height: 69px; }
.mp_container a img								{ height: 100%; }
footer												{ width: 100%; z-index: 1;
														  background: #969696; padding: 5px; text-align: center;
														  line-height: 15px; font-size: 10px; font-weight: 700; color: #ffffff; }
/* --------------- END FOOTER ----------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------------------------------------- */
/* --------------- SHADOW --------------------------------------------------------------------------------------------------- */
#shadow												{ display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vH; background: rgba(0,0,0,0.7); z-index: 1000; }
#shadow_container									{ position: relative; width: 500px; margin: 100px auto; padding: 0; border-radius: 3px; background: rgba(255,255,255,1); }
#shadow_close										{ display: none; position: absolute; right: -15px; top: -15px; width: 30px; height: 30px; 
														  background: url(/pages/img/svg/close_black.svg) no-repeat center #ffffff; background-size: auto 60%; border-radius: 100%; border: 1px solid #dddddd;
														  cursor: pointer; }
#shadow_close:hover								{ background-color: #dddddd !important; }



.shadow_title										{ position: relative; padding: 10px; border-bottom: 1px solid #eeeeee; line-height: 24px; font-size: 18px; font-weight: 300; }
.shadow_title_close								{ position: absolute; right: 0; top: 0; width: 44px; height: 44px; background: url(/pages/img/svg/close_dddddd.svg) no-repeat center; background-size: 20px auto !important; }
.shadow_title_close:hover						{ background: url(/pages/img/svg/close_black.svg) no-repeat center; cursor: pointer; }

.shadow_message									{ display: none; margin: 20px; padding: 20px; }
.shadow_message.shadow_message_noshadow	{ display: block; margin: 0 0 20px 0; }

.shadow_error										{ display: none; margin: 20px; border-left: 3px solid rgba(221, 40, 33, 1); background: rgba(221, 40, 33, 0.2); padding: 20px; }
.shadow_info										{ margin: 20px; border-left: 3px solid rgba(0, 104, 180, 1); background: rgba(0, 104, 180, 0.2); padding: 20px; }
.shadow_hint										{ margin: 20px; border-left: 3px solid rgba(253, 202, 0, 1); background: rgba(253, 202, 0, 0.2); padding: 20px; }
.shadow_success									{ border-left: 3px solid rgba(0, 121, 0, 1); background: rgba(0, 121, 0, 0.2); }



.shadow_body										{ margin: 20px; }
.shadow_footer										{ display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap;
														  width: 100%; padding: 10px; border-top: 3px solid #eeeeee; }
.shadow_footer > *								{ width: 30% !important; }
/* --------------- END SHADOW ----------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */

/*-----| Radio- and Check-boxes           |-------------------------------------------------------------------------------------------------------------*/
input[type="radio"],
input[type="checkbox"]							{ display: none; }
								

/* Define Label */
input[type="radio"] + label,
input[type="checkbox"] + label				{ display: inline-block; position: relative; padding: 1px 5px 1px 25px; line-height: 26px;
														  color: #333333; font-size: 12px; border-color: #AAAAAA; cursor: pointer; }
input[type="radio"]:disabled + label,
input[type="checkbox"]:disabled + label	{ color: #969696; text-decoration: line-through; cursor: default; }


/* BEFORE - creates Checkbox */
input[type="checkbox"] + label:before,
input[type="radio"] + label:before			{ content: ''; position: absolute; display: block; left: 0px; top: 3px; width: 18px; height: 18px; text-align: center;
														  border-width: 1px; border-style: solid; border-color: #AAAAAA; background: #f8f8f8; }
input[type="checkbox"] + label:before		{ border-radius: 2px; }
input[type="checkbox"] + label:before		{ border-radius: 2px; }
input[type="radio"] + label:before			{ border-radius: 100%; }
input[type="checkbox"]:disabled + label:before,
input[type="radio"]:disabled + label:before	{ border-color: #cccccc !important; background: transparent; box-shadow: none !important; }

input[type="checkbox"] + label:hover:before,
input[type="radio"] + label:hover:before	{ border-color: #666666; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3) inset; }

/* AFTER - creates tick/bullet when checked */
input[type="checkbox"] + label:after 		{ content: ''; position: absolute; display: none; left: 2px; top: 5px; width: 16px; height: 16px;
														  background: url('/admin/img/check.png') no-repeat 50% 50%; }
input[type="checkbox"]:checked + label:after	{ display: block;
														  -webkit-animation: scale 0.1s linear; -moz-animation: scale 0.1s linear; -ms-animation: scale 0.1s linear;
														  -o-animation: scale 0.1s linear; animation: scale 0.1s linear; }
														  
input[type="radio"] + label:after			{ content: ''; position: absolute; display: none; left: 5px; top: 8px; width: 10px; height: 10px;
														  border-radius: 100%; background-color: #666666; }
input[type="radio"]:checked + label:after	{ display: block;
														  -webkit-animation: scale 0.1s linear; -moz-animation: scale 0.1s linear; -ms-animation: scale 0.1s linear;
														  -o-animation: scale 0.1s linear; animation: scale 0.1s linear; }
/* --------------- Homogenize Form Field behaviour -------------------------------------------------------------------------- */
input[type="text"], input[type="select"], input[type="password"], select, textarea {
														  padding: 1px 2px;
														  border: 1px solid #cccccc; background-color: transparent;
														  font-family: inherit; font-size: inherit; line-height: 20px; }
input[type="text"], input[type="select"], input[type="password"], select { height: 24px; }
textarea												{ height: 104px; }

.button, button, input[type="button"], input[type="submit"] {
														  padding: 2px;
														  border: none; background-color: rgba(37, 78, 155, 1);
														  font-family: inherit; font-size: inherit; line-height: 20px; font-weight: bold; color: #ffffff !important; text-align: center; cursor: pointer;
														  -webkit-appearance: none; -webkit-border-radius: 0; }
.button:hover button:hover, input[type="button"]:hover, input[type="submit"]:hover { background-color: #1DBB1D; }

.w250													{ width: 250px; }
.w800													{ width: 800px; }
.w50p													{ width: 50%; }
.w100p												{ width: 100%; }

.fTable td.fTable_label							{ padding: 4px 15px 4px 0; line-height: 20px; font-weight: bold; white-space: nowrap; }
.fTable td.fTable_input							{ padding: 2px 0; line-height: 1px; }
.fTable .fTable_comment							{ padding: 2px 0 2px 10px; line-height: 20px; font-style: italic; }
/* --------------- End Homogenize Form Field behaviour ---------------------------------------------------------------------- */

/* --------------- jQuery autocomplete ---------------------------------------------------------------------------------------*/


/* --------------- Added by Jonas --------------------------------------------------------------------------------------------*/

.ui-autocomplete						{ max-height: 250px; overflow-y: auto;
											  /* prevent horizontal scrollbar */
											  overflow-x: hidden; }


.cTable td												{ padding: 3px 10px; }
.cTable thead td,
.cTable td.cTable_label								{ font-weight: bold; }
.cTable td.cTable_number							{ text-align: right; }
/*.cTable tbody tr:nth-child(2N-1)					{ background: #dddddd; }*/
.cTable tbody tr:nth-child(2N-1)					{ background: #bbe4f9;}
.cTable tbody tr:nth-child(2N)					{ background: #81d0f4; }
.cTable tbody tr:first-child	td:last-child	{ border-top: 2px solid black; }
.cTable tbody td:last-child						{ border-left: 2px solid black; border-right: 2px solid black; }
.cTable tbody tr:last-child	td:last-child	{ border-bottom: 2px solid black; }

 
.colorLink											{ display: block; position: relative; border: solid #dddddd; border-width: 1px 0; padding: 5px 10px; margin: 0 0 0 0; background: #f5f5f5; font-weight: bold; line-height: 18px; font-size: 18px; text-transform: uppercase; }
/*.colorLink:after									{ display: block; content: ""; position: absolute; right: 5px; top: 0; width: 28px; height: 28px; opacity: 0.7; background: url("/pages/img/down_black.svg") no-repeat center; background-size: 16px auto; }*/
.colorLink:after									{ display: block; content: ""; position: absolute; right: 5px; top: 0; width: 28px; height: 28px; opacity: 0.7; background: url("/pages/img/nav_arrow_grey.png") no-repeat center; }
.colorLink:hover:after							{ background: url("/pages/img/nav_arrow.png") no-repeat center; }

/* --------------- Knowhow -------------------------------------------------------------------------------------------------- */
.kh_chapter											{ margin-bottom: 40px; }
.kh_subchapter										{ margin-bottom: 20px; }
.kh_subtitle										{ padding-bottom: 10px; }

.th_float_container:after						{ display: block; content: ""; clear: both; }
.th_float_box										{ float: left; width: 435px; }
.th_float_box:nth-child(2N-1)					{ margin-right: 30px; }


.kh_box												{ margin-bottom: 5px; border: solid #dddddd; border-width: 1px 0; }
.kh_title											{ cursor: pointer; }
.kh_title:after									{ display: block; content: ""; position: absolute; right: 5px; top: 0; width: 28px; height: 28px; opacity: 0.7;
														   }
.open .kh_title:after							{ background-image: url("/pages/img/up_black.svg") !important; }
														  
.kh_title											{ cursor: pointer; padding: 5px 10px; background: #f8f8f8; }
.kh_text												{ display: none; padding: 20px; background: #fafafa; border-top: 1px solid #dddddd; }
.open .kh_text										{ display: block; }

#goTop																{ display: none; position: fixed; right: 0; bottom: 100px; width: 20px; height: 100px; z-index: 12321;
																		  background: url("/pages/img/svg/up_arrow_fat_black.svg") no-repeat center 10px #dddddd; background-size: 12px auto; box-shadow: 0 0 10px rgba( 0,0,0,0.5 ); border-radius: 15px 0 0 15px; cursor: pointer; }
.scrolled #goTop													{ display: block; }
#goTop:after														{ display: block; position: absolute; right: 0px; bottom: 95px; width: 80px; content: "Nach oben"; transform: rotate(-90deg); transform-origin: right bottom;
																		  font-size: 10px; color: #000000; }
#goTop:hover														{ background-color: #aaaaaa; }











.numberimput { display: inline-block; position: relative; width: 84px; height: 25px; padding: 0 24px; }
.numberimput input { width: 36px !important; height: 25px; line-height: 21px; }
.numberimput > div { position: absolute; top: 3px; width: 19px; height: 19px; padding: 1px; border: 1px solid #cccccc; border-radius: 50%; cursor: pointer; }
#product_det_art_table tr:nth-of-type(2N) .numberimput > div { border: 1px solid #ffffff; }
#bskTable tr:nth-of-type(2N-1) .numberimput > div { border: 1px solid #ffffff; }

.numberimput > div > div { position: relative; width: 15px; height: 15px; border-radius: 50%; }
.numberimput > div > div:before { display: block; content: ""; position: absolute; left: 3px; top: 7px; right: 3px; height: 1px; background: #000000; box-shadow: 0 0 1px #000000; }
.numberimput > div:nth-of-type(2) > div:after { display: block; content: ""; position: absolute; left: 7px; top: 3px; bottom: 3px; width: 1px; background: #000000; box-shadow: 0 0 1px #000000; }
.numberimput > div:nth-of-type(1) { left:  0; }
.numberimput > div:nth-of-type(2) { right: 0; }
.numberimput > div:hover > div { background: rgba(37, 78, 155, 1); }
.numberimput > div:hover > div:before,
.numberimput > div:hover > div:after { background: #ffffff; box-shadow: 0 0 1px #ffffff, 0 0 1px #ffffff; }