/*-----| PARAMS                           |----------------------------------------------------------------------------------------------------------------
WHITE													rgba( 255,255,255,1 )	ffffff
BLACK													rgba( 0,0,0,1 )			000000
BLUE													rgba( 0,146,207,1 )		0092cf
Dark BLUE											rgba( 0,82,118,1 )		005276
Extra Dark BLUE									rgba( 0,40,58,1 )			00283A
Orange												rgba( 255,144,0,1 )		ff9000
Red													rgba( 228,5,22,1)			e40516

Z-Stack												Header:						1000
														Side-Navigation:			1000

																						Max	Mid	Mobile
Heights												Header:						96
-------| END PARAMS                       |--------------------------------------------------------------------------------------------------------------*/
/*-----| Skelleton                        |------------------------------------------------------------------------------------------------------------- */
body													{ font: 14px 'Hind', sans-serif; background: linear-gradient(to bottom, #e9e9e9 0%,#ffffff 100%); padding: 0 !important; }
body:after											{ display: block; content: ""; position: fixed; left: 20px; top: 20vH; z-index: 0; width: 50vW; height: 60vH; background: url("../img/joggi_hammer.svg") no-repeat left bottom; background-size: contain; opacity: 0.05; }
.container_wide									{ padding: 0 60px; }
.container											{ width: 100%; max-width: 1220px; margin: 0 auto; }

#skeletable											{ position: relative; z-index: 1; width: 100%; min-height: 100vH; }
#skeletable #skeletable_fakeheader div		{ height: 115px; }
#skeletable #skeletable_main					{ height: 100%; }
body.shop #skeletable #skeletable_main td	{ background: #ffffff; }
body.shop #skeletable #skeletable_main td.prod_table_od	{ background: #E4E4E4; }
body.shop #skeletable #skeletable_main td.prod_table_od td	{ background: none !important; }

main h1												{ font-weight: 300; font-size: 40px; line-height: 50px; color: #005276; padding-bottom: 20px; }
main h2												{ font-weight: 400; font-size: 20px; line-height: 25px; color: #005276; }
main h3												{ font-weight: bold; font-size: 14px; line-height: 20px; color: #000000; }
/*-----| End Skelleton                    |------------------------------------------------------------------------------------------------------------- */
/*-----| Header                           |------------------------------------------------------------------------------------------------------------- */
header												{ position: absolute; left: 0; top: 0; right: 0; z-index: 1000; padding: 0 0 10px 0; background: #d1d1d1; border-bottom: 5px solid #0092cf;  }
body.scrolled header								{ position: fixed; top: -50px; }
header .flex_container,
header .flex_box									{ padding: 0; }

header .container									{ background: rgba( 255,255,255,0.75 ); }
header #header_logo								{ position: relative; height: 100px; }
header #header_logo a							{ display: block; position: absolute; left: 20px; top: 20px; right: 20px; bottom: 20px; background: url("../img/joggi.svg") no-repeat left center; background-size: contain; }
body.scrolled header #header_logo a			{ top: 60px; bottom: 10px; }

header #header_right								{ position: relative; height: 100px; }
header #header_search							{ width: 100%; height: 50px; padding: 10px 10px 0 10px; }
header #header_search > div					{ position: relative; width: 100%; height: 40px; }
header #header_search > div:after			{ display: block; content: "\f002"; position: absolute; left: 4px; top: 4px; z-index: 1; width: 32px; height: 32px; font-family:'FontAwesome'; line-height: 30px; font-size: 20px; text-align: center; color: rgba( 0,40,58,0.5 ); }
header #header_search.busy > div:after		{ content: ""; background: url("/pages2015/img/spinner.svg") no-repeat center; background-size: 80%; }
header #header_search > div #searchResultBox	{ position: absolute; left: 0; top: 30px; right: 0; width: 100%; max-height: 80vH; }
header #header_search > div input[type="text"]	{ width: 100%; height: 40px; border: 1px solid rgba( 0,40,58,0.25 ); padding: 2px 0 0 40px; line-height: 36px; font-size: 16px; }

header #searchResultBox ul						{ left: 0 !important; top: 0 !important; padding: 20px 0px; max-height: 60vH; overflow-x: hidden; overflow-y: auto; background: #ffffff; box-shadow: 0 5px 15px rgba( 0,0,0,0.2 ); }
header #searchResultBox ul li					{ list-style: none; border-bottom: 2px solid #d1d1d1; }
header #searchResultBox ul li a				{ display: block; padding: 5px 10px; text-decoration: none; }
header #searchResultBox ul li a td			{ padding: 5px 10px; vertical-align: middle; }
header #searchResultBox ul li a td div div{ width: 44px; height: 44px; background-repeat: no-repeat; background-position: center; background-size: contain; }
header #searchResultBox ul li a td span	{ display: block; font-weight: bold; }
/*-----| Header: Service	               |------------------------------------------------------------------------------------------------------------- */
header #navi_service	ul li a					{ display: block; width: 40px; height: 40px; padding: 4px 0 0 0; line-height: 36px; text-align: center; font-size: 18px; text-decoration: none; font-weight: bold; color: #000000; }
header #navi_service	ul li a:hover			{ background: #0092cf !important; color: #ffffff; }
header #navi_service	ul li#navi_service_basket a	{ position: relative; background: #005276; color: #ffffff; }
header #navi_service	ul li#navi_service_basket a span	{ display: none; position: absolute; left: -10px; bottom: -5px; z-index: 1; padding: 4px 0 0 0; width: 24px; height: 24px; border-radius: 50%; background: #e40516; color: #ffffff; text-align: center; line-height: 20px; font-size: 14px; }
header #navi_service	ul li#navi_service_basket a.full	{ background: #ff9000; }
header #navi_service	ul li#navi_service_basket a.full span	{ display: block; }
header #navi_service	ul li#navi_service_lang span { position: relative; display: block; width: 40px; height: 40px; }
header #navi_service	ul li#navi_service_lang span:hover { background: #0092cf !important; }
header #navi_service	ul li#navi_service_lang span:after { display: block; content: ""; position: absolute; left: 10px; top: 10px; right: 10px; bottom: 10px; background-repeat: no-repeat; background-position: center; background-size: contain; }
header #navi_service	ul li#navi_service_lang.lang_1 span:after { background-image: url("../img/germany.svg"); }
header #navi_service	ul li#navi_service_lang.lang_2 span:after { background-image: url("../img/france.svg"); }
header #navi_service	ul li#navi_service_lang:hover ul { display: block; }
header #navi_service	ul li#navi_service_lang ul li { float: left; }
header #navi_service	ul li#navi_service_lang ul li a { position: relative; display: block; width: 40px; height: 40px; }
header #navi_service	ul li#navi_service_lang ul li a:after { display: block; content: ""; position: absolute; left: 10px; top: 10px; right: 10px; bottom: 10px; background-repeat: no-repeat; background-position: center; background-size: contain; }
header #navi_service	ul li#navi_service_lang ul li.lang_1 a:after { background-image: url("../img/germany.svg"); }
header #navi_service	ul li#navi_service_lang ul li.lang_2 a:after { background-image: url("../img/france.svg"); }
/*-----| End Header			               |------------------------------------------------------------------------------------------------------------- */
/*-----| Crump					               |------------------------------------------------------------------------------------------------------------- */
#skeletable_crump									{ background: #ffffff; }
#crump												{ padding: 0 50px 0 0; }
#crump ul:after									{ display: block; content: ""; clear: both; }
#crump ul li										{ position: relative; list-style: none; }
#crump ul li a										{ display: block; height: 36px; }
#crump ul li.cPrevNext							{ position: relative; float: right; width: 36px; height: 36px; padding-left: 10px; cursor: pointer; }
#crump ul li.cPrevNext:after					{ display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding-top: 8px; text-align: center; line-height: 22px; font: 20px "FontAwesome"; color: #676767; }
#crump ul li.cPrevNext:hover:after			{ color: #0092cf }
#crump ul li.cPrevNext#cPrev:after			{ content: "\f137"; }
#crump ul li.cPrevNext#cNext:after			{ content: "\f138"; }

#crump ul li#cHamburger,
#crump ul li.crump								{ float: left; padding-right: 20px; }
#crump ul li.crump.first						{ position: relative; width: 48px; padding-right: 0; text-indent: -1000px; background: #d1d1d1; }

#crump ul li.crump.first:before				{ display: block; content: "\f015"; position: absolute; left: 0; top: 0; right: 12px; bottom: 0; width: auto; height: 0; padding-top: 8px; text-align: center; line-height: 22px; font: 20px "FontAwesome"; text-indent: 0; border: none; transform: skew(0deg, 0deg); }
#crump ul li.crump.first:after				{ display: block; content: ""; position: absolute; right: 0; top: 0; width: 0; height: 0; border-style: solid; border-width: 18px 6px; border-color: #ffffff #ffffff #ffffff #d1d1d1; transform: skew(0deg, 0deg); }
#crump ul li.crump.first:hover				{ background: #0092cf; color: #ffffff; }
#crump ul li.crump.first:hover:after		{ border-color: #ffffff #ffffff #ffffff #0092cf; }

#crump ul li.crump:before						{ display: block; content: ""; position: absolute; right: 9px; top: 8px; width: 2px; height: 10px; background: #d1d1d1; transform: skew(25deg, 0deg); }
#crump ul li.crump:after						{ display: block; content: ""; position: absolute; right: 9px; top: 18px; width: 2px; height: 10px; background: #d1d1d1; transform: skew(-25deg, 0deg); }

/*#crump ul li.crump:before						{ display: block; content: ""; position: absolute; right: 0; top: 8px; border-style: solid; border-width: 10px 6px; border-color: #ffffff #ffffff #ffffff #d1d1d1; }
#crump ul li.crump:after						{ display: block; content: ""; position: absolute; right: 3px; top: 8px; border-style: solid; border-width: 10px 6px; border-color: transparent transparent transparent #ffffff; }*/

#crump ul li.crump a								{ display: block; position: relative; height: 36px; padding: 8px 0 0 0; line-height: 22px; text-decoration: none; color: #676767; }
#crump ul li.crump a:hover						{ color: #0092cf; }
#crump ul li.crump.last							{ height: 36px; padding: 8px 0 0 0; line-height: 22px; color: #d1d1d1; }
#crump ul li.crump.last:before				{ display: none; }
#crump ul li.crump.last:after					{ display: none; }
/*-----| End Crump			               |------------------------------------------------------------------------------------------------------------- */
/*-----| Main                             |------------------------------------------------------------------------------------------------------------- */
main													{ display: block; }
main .container									{ padding: 20px 0; background: rgba( 255,255,255,0.5 ); }
main section										{ margin: 10px 0; }
main p												{ padding-bottom: 0; line-height: 20px; }
/*-----| Home                             |------------------------------------------------------------------------------------------------------------- */
main #home_hot .home_2							{ display: block; position: relative; padding: 2px; background: #d1d1d1; }
main #home_hot .home_2 div:nth-of-type(1)	{ padding: 50%; }
main #home_hot .home_2 div:nth-of-type(2)	{ position: absolute; left: 20px; top: 40px; right: 40px; bottom: 84px; background: url("../img/basket_black.svg") no-repeat center; background-size: contain; }
main #home_hot .home_2 div:nth-of-type(3)	{ position: absolute; left: 2px; bottom: 2px; right: 2px; padding: 0 10px; line-height: 44px; font-size: 24px; color: #ffffff; text-align: center; background: #0092cf; }
main #home_hot .home_2:hover div:nth-of-type(3)	{ background: #005276; }

main #home_hot .home_3 a						{ display: block; border: 2px solid #d1d1d1; }
main #home_hot .home_3 a > div				{ position: relative; padding: 50%; background: #ffffff; }
main #home_hot .home_3 a div div:nth-of-type(1)	{ position: absolute; left: 10px; top: 10px; right: 10px; bottom: 54px; background-repeat: no-repeat; background-position: center; background-size: contain; }
main #home_hot .home_3 a div div:nth-of-type(2)	{ position: absolute; left: 0; bottom: 0; right: 0; padding: 0 10px; line-height: 44px; height: 44px; font-size: 24px; color: #ffffff; text-align: center; background: #0092cf; overflow: hidden; }
main #home_hot .home_3:hover a div div:nth-of-type(2)	{ background: #005276; }

main #home_shop a									{ display: block; width: 100%; height: 100%; padding: 2px; background: #d1d1d1; color: #000000; text-decoration: none; }
main #home_shop a:hover							{ background: #0092cf; color: #ffffff; }
main #home_shop a table							{ width: 100%; height: 100%; }
main #home_shop .home_shop_image				{ background: #ffffff; }
main #home_shop .home_shop_image div		{ background-repeat: no-repeat; background-position: center; background-size: contain; }
main #home_shop table .flex_container		{ padding: 5px; background: #ffffff; }
main #home_shop .home_shop_image.flex_box_25	{ width: 25% !important; padding: 5px; }
main #home_shop .home_shop_image.flex_box_25 div	{ padding: 50%; }
main #home_shop .home_shop_image.flex_box_100 div	{ padding: 25%; }
main #home_shop .home_shop_text				{ height: 100%; }
main #home_shop .home_shop_text td			{ padding: 5px 10px; vertical-align: middle; text-align: center; font-size: 18px; line-height: 20px; background: #eeeeee; }
main #home_shop a:hover .home_shop_text td{ background: transparent; }
@media screen and (min-width: 641px) and (max-width: 960px) {
	main #home_shop > div > div > div > .flex_box_25	{ width:  33.333% }
}

main .grp table									{ float: left !important; width: 25% !important; }
main .grp table tbody tr td					{ padding: 0 10px 0 0; }
main .grp table tbody tr td:last-of-type	{ display: none; }
main .grp table tbody tr td img				{ width: 100% !important; }
main .grp p											{ float: left !important; display: block; width: 75%; padding: 0 0 10px 0; }
main .flex_box > .img_cms,
main .flex_box > .img_cms img					{ width: 100% !important; }
/*-----| NEWS		  			               |------------------------------------------------------------------------------------------------------------- */
#newsSlider											{ margin: 0 !important; padding: 20px 40px 20px 20px; }
#nsm_container										{ padding: 20px 0; }
/*-----| SHOP		  			               |------------------------------------------------------------------------------------------------------------- */
.shop main											{ padding: 20px 50px 20px 10px; }
/*-----| Content Links		               |------------------------------------------------------------------------------------------------------------- */
.link_box											{ border: 2px solid #d1d1d1; padding: 10px; cursor: pointer; background: #ffffff; filter: grayscale(100%); }
.link_box:hover									{ border: 2px solid #0092cf; filter: grayscale(0); }
.link_box div										{ padding: 30%; background-position: center; background-repeat: no-repeat; background-size: contain; }
/*-----| End Main  			               |------------------------------------------------------------------------------------------------------------- */
/*-----| Footer                           |------------------------------------------------------------------------------------------------------------- */
/*-----| Footer: Marken                   |------------------------------------------------------------------------------------------------------------- */
footer												{ background: #005276; color: #ffffff; }
footer a												{ color: #ffffff; text-decoration: none; }
footer a:hover										{ color: #ff9000; }

footer #footer_brand								{ min-height: 5px; background: #0092cf; }
footer #footer_brand .container_brand		{ margin: 0 -20px; }
footer #footer_brand .flex_container		{ padding: 10px; }
footer #footer_brand .flex_box				{ display: block; }
footer #footer_brand .flex_box > div		{ position: relative; padding: 25%; background: #ffffff; filter: grayscale(100%); }
footer #footer_brand .flex_box > div:hover{ filter: grayscale(0%); }
footer #footer_brand .flex_box > div > div{ position: absolute; left: 10px; top: 10px; right: 10px; bottom: 10px; background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0.5; }
footer #footer_brand .flex_box > div:hover > div{ opacity: 1; }

footer #footer_contact							{ line-height: 20px; }
footer #footer_contact .container_contact	{ margin: 0 -20px; }
footer #footer_contact .flex_container		{ padding: 0px; }
footer #footer_contact .flex_box				{ padding: 20px; }
footer #footer_contact td:nth-of-type(2)	{ text-align: right; }
footer #footer_contact #footer_contact_map{ position: relative; height: 100%; filter: grayscale(100%); }
footer #footer_contact #footer_contact_map div { padding: 25%; }
footer #footer_contact #footer_contact_map iframe { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; border: none; }
footer #footer_contact .flex_box_social 	{ display: flex; flex-wrap: wrap; }
footer #footer_contact .flex_box_social > div 	{ width: 100%; flex-grow: 1; }
footer #footer_contact .flex_box_social div:last-of-type 	{ text-align: right; align-self: flex-end; }

footer #footer_sitemap							{ padding: 20px 0; line-height: 20px; border-top: 2px solid #0092cf; }
footer #footer_sitemap .container_sitemap	{ margin: 0 -20px; }
footer #footer_sitemap .flex_container		{ padding: 0; }
footer #footer_sitemap .flex_box				{ padding: 20px; }
footer #footer_sitemap ul						{ padding: 0 0 10px 0; }
footer #footer_sitemap ul li					{ list-style: none; padding: 5px 0 0 0; line-height: 16px; }
footer #footer_sitemap h3						{ font-size: 18px; }

footer #footer_copy								{ text-align: center; line-height: 30px; border-top: 2px solid #0092cf; background: #00283A; }
/*-----| End Footer                       |------------------------------------------------------------------------------------------------------------- */
.bwiseGallery.act									{ top: 115px !important; }
.bwiseGallery>span>strong						{ line-height: 48px !important; }
.bwiseGallery>em									{ line-height: 55px; font-style: normal; }


table.dataTable tbody tr:nth-of-type(2N-1) td	{ background: #d1d1d1 !important; border-color: #ffffff; }
table.dataTable tbody tr:nth-of-type(N) td table tr td	{ background: none !important; }
table.dataTable tbody tr.marked td	{ background: #fac3b9 !important; border-color: #ffffff; }
table.dataTable tbody tr.current td	{ background: #99b1d9 !important; border-color: #ffffff; }

.blockUI.blockMsg									{ background: none !important; border: none !important; }