:root {
    --primary-color: #E82F39;
}

@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 400;
	src: url("fonts/Ubuntu-R.ttf");
}
@font-face {
    font-family: 'Ubuntu-Light';
    font-style: normal;
    font-weight: 400;
    src: url("fonts/Ubuntu-L.ttf");
}

body, .main-content {
	font: 16px/20px Ubuntu;
	font-style: normal;
	font-weight: 400;
}

@font-face {
	font-family: 'icomoon';
	src: url('fonts/icomoon.eot?814wz2');
	src: url('fonts/icomoon.eot?814wz2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?814wz2') format('truetype'), url('fonts/icomoon.woff?814wz2') format('woff'), url('fonts/icomoon.svg?814wz2#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

body {
    border-top: 5px solid var(--primary-color);
}

.meta-menu-container {
	padding: 10px 0;
}

#Logo {
	width: 170px;
	height: 64px;
	background: url('/tradepro/shop/layout/assiteclog_logo.gif') top left no-repeat;
}

h3 {
	position: relative;
	font-size: 1.8em;
	margin: 0 0 20px 0;
}

.back-to-top {
	visibility: visible;
}

/* Starts styles to change menu */

#Navigationbar { 
    background: var(--primary-color);
    padding-bottom: 0px;
}

#Navigationbar div {
	color: white;
}

#Navi .main-navigation li.ico-home3 a {
	padding-top: 6px;
	background-color: unset !important;
}

#MainNavi > ul > li {
	padding-top: unset;
}

#Navi .level1 > li > a, #Navigationbar .level_1 > li > a {
	color: white;
	padding-top: 6px;
}

.main-navigation > ul > li:hover, .main-navigation > ul > li:hover > a, .main-navigation > ul > li:hover > a > i {
	background: rgb(127,128,131) !important;
	color: #fff !important;
}

.main-navigation > ul > li > ul {
	background: rgb(127,128,131) 0% 0% no-repeat padding-box;
}

#Navi i {
	font-size: 1.0em;
	color: #fff;
}

#Navi .mega-dropdown {
	background: rgb(127,128,131,1.0);
	box-shadow: 0px 3px 6px #00000029;
}

.fixed {
	height: auto;
}

.ScartItemDetails > ul > li {
	color: #000;
}

.ScartItemDetails > a:hover {
	text-decoration: none;
	color: #fff !important;
}

.ScartItemDetails {
	position: absolute;
	width: 130%;
	top: 40px;
	z-index: 2000;
	box-sizing: border-box;
	border-radius: 0 0 3px 3px;
	display: none;
	right: 0;
}

#ScartInfo:hover #ScartItemDetails {
	display: block;
	width: 350px;
	background: #fff;
	right: -30px;
}

#ScartItemDetails > h4, #ScartItemDetails > a {
	margin: 0;
	background: #E82F39;
	padding: 10px;
	color: #fff;
}

#ScartItemDetails > ul {
	padding: 0px;
	margin: 0px;
	border-left: 3px solid #f1f1f1;
	border-right: 3px solid #f1f1f1;
}

#ScartItemDetails > h4, #ScartItemDetails > a {
	margin: 0;
	background: #E82F39;
	padding: 10px;
	color: #fff;
}

.main-navigation > ul > li .trail, .main-navigation > ul > li a.active {
	background: rgb(127,128,131) !important;
	font-weight: normal;
}

/* Ends Menu Changes */

/* Starts Login box changes */
.UserBoxStartseite .LoginBoxStartseiteContent {
	height: 240px !important;
}

#LoginToggle.active {
	border-radius: 0px 0px 0 0;
}

.UserBoxStartseite .LoginBoxButtons {
	border: 1px solid #d3d3d3;
	background-color: unset !important;
	padding: 0;
	border-radius: 0 0 3px 3px !important;
}

.UserBoxStartseite .button_first {
	float: left;
	border-radius: 0 0 0 3px;
	border-right: 1px solid #d3d3d3 !important;
}

.UserBoxStartseite .button_two {
	width: 50%;
	float: left;
	border-radius: 0px;
	padding: 10px 0px;
	margin: 0px;
	border: 0;
	display: block;
	overflow: hidden;
	line-height: inherit;
}

.UserBoxStartseite .LoginBoxStartseiteContent {
	background-color: #fff;
}

#UserNavi > ul > li {
	padding-top: 0px;
}

#navLogin .level_2,  #UserNavi .sf-menu .level2 {
	background-color: #7F8083;
	left: -152px;
}

.CMS #navLogin .level_2, #UserNavi .sf-menu .level2 {
	background-color: #7F8083;
	left: -44px;
}

.CMS #ScartScroll:hover .ScartItemDetails {
	display: block;
	width: 350px;
	background: #fff;
	right: -30px;
}

#NaviLogin input {
	font-size: 0.875em;
}

#Navi .lostpw a {
	background-color:unset;
	color: #fff;
}

.lostpw a:hover {
	color: var(--primary-color) !important;
}

.requestAccess {
	padding: 10px 30px !important;
	text-align: center;
	text-decoration: none;
	background: #fff !important;
	border: 1px solid #000;
	white-space: nowrap;
	color: #000 !important;
	font-size: 1em !important;
	cursor: pointer;
	border-radius: 0px !important;
	box-shadow: none;
	text-shadow: none;
	text-transform: initial !important;
	box-shadow: none !important;
	margin: 5px 0 5px 0 !important;
}

.requestAccess:hover {
	background: var(--primary-color) !important;
	border: 1px solid var(--primary-color);
	color: #fff !important;
}

.InfoTitleLogin {
	font-size: 2em;
}

.InfoHead, h1.InfoHead {
	font-weight: normal;
	font-size: 2em;
}

/* Ends Login box changes */

/* Starts news list changes */
.mod_newslist > div {
	border-bottom: 1px solid #e3e3e3;
	position: relative;
	width: 24%;
	float: left;
	height: 550px;
}

.newsArchiveItem {
	padding: 0 0 1em 0;
	margin: 0 0 1em 0;
}

.naiImageContainer {
	display: block;
	float: left;
	width: 25%;
	margin-right: 2%;
	border: 10px solid #fff;
}

.naiTextContainer {
	float: left;
	width: 73%;
}

/* Ends news list changes */

/* Starts home page teaser changes */

.teaser_center {
	display: unset;
}

.teaser_links .teaser_block, .teaser_rechts .teaser_block {
	display: block;
}

.teaserTextBlack {
	opacity: 1;
	font-size: 1vw !important;
	color: #000;
	padding: 5px;
	display: inline-block;
	margin-top: 7px;
	line-height: 2.1 vw;
	font-weight: light;
}

a.button.button_dark.button_teaser {
	background: none !important;
	color: #E82F39 !important;
	padding: 6px;
	font-size: 13px;
	text-transform: uppercase;
	border: none;
}

.teaserTopicBlack {
	background: none;
	opacity: 1;
	font-size: 1.4em !important;
	color: black;
	padding: 15px 15px 6px;
	display: inline-block;
	margin-top: 20px;
	border-bottom: 1px solid #ccc;
	width: 100%;
	text-transform: uppercase;
}

.teaserButton .button {
	margin-top: 15px;
	border-radius: 0px;
	text-transform: uppercase;
	color: #FFFFFF;
	font-size: 1em;
	background: #E82F39;
	padding-left: 35px !important;
	padding-right: 35px !important;
}

.teaserButton .button:hover {
	margin-top: 15px;
	border-radius: 0px;
	text-transform: uppercase;
	color: #E82F39;
	font-size: 1em;
	background: none;
}

/* Ends home page teaser changes */

/* Starts we-about-us page changes  */
.teaserTopicBlack {
	/* background: #000; */
	opacity: 1;
	font-size: 1.2 vw;
	color: black;
	padding: 15px 15px 6px;
	display: inline-block;
	margin-top: 20px;
	border-bottom: 1px solid #ccc;
	width: 100%;
	text-transform: uppercase;
}

.teaser_container > .teaser_center {
	text-align: left;
}

.teaser_container > .teaser_center > .teaser_block > .teaserTextBlack  {
	text-transform: none;
	font-size: 1.2em;
	line-height: 1em;
	font-weight: normal;
}

.teaser_block {
	max-width: unset;
}
/* Ends we-about-us page changes  */

/* Starts Newlist Module Changes */

.mod_newslist > div {
	border-bottom: 1px solid #e3e3e3;
	position: relative;
	width: 24%;
	float: left;
	height: 550px;
}

.mod_newslist h2 a, .mod_newslist h2 {
	font-size: 1em;
	font-weight: bold;
	color: #333;
}

/* Starts Newlist Module Changes */

.teaser_container {
	width: 87%;
	height: 100%;
	display: block;
	overflow: hidden;
	margin-bottom: 20px;
}

/* Starts changes in the search result listing pages */
#ArticlesPerPage > ul {
	text-align: right;
}

#ShopMenu h1 {
	color: #242424;
	font-weight: bold;
}
/* Ends changes in the search result listing pages */

/* Start Article detail page changes */
.FFS-Flex #RubView .itemContent div {
	height: 35px;
	margin: 0 0 13px 0;
}

#DetailInfo h3, #DetailInfo h1 {
	margin: 0 0 20px 0;
	line-height: 1.5;
	font-weight: normal;
	position: relative;
	font-size: 1.8em;
}

#DetailHersteller {
	float: right;
	max-width: 100px;
}

#RubView .itemContent .content {
	font-size: 14px !important;
	height: 40px !important;
	width: 100%;
	display: block;
	overflow: hidden;
	line-height: 20px !important;
	padding: 0px 10px 0px 10px !important;
	margin: 0;
}

#readmorecontainer {
	margin: 0 0 2em 0;
	overflow: hidden;
}

#DetailAttributes dd {
	float: left !important;;
	margin: 0 0 10px 0 !important;;
	width: 60% !important;;
}

h2.resp-accordion {
	font-weight: bold;
	font-size: 1em;
}

.ArticleTitle a {
	line-height: 1.5;
    font-weight: normal;
}

.lieferzeit > i {
	height: 20px;
	width: 20px;
	border: 2px solid #707070;
	border-radius: 50%;
	display: inline-block;
	padding: 3px;
	background-clip: content-box;
}

i.lieferzeit_red {
	background-color: var(--primary-color);
}

i.lieferzeit_yellow {
	background-color: yellow;
}

i.lieferzeit_green {
	background-color: green;
}

dl.InfosArtikelLager {
	position: absolute;
	background: #fff;
	/* color: black; */
	/* padding: 30px; */
	z-index: 90000;
	/* width: 21%; */
	box-shadow: 10px 10px 15px silver;
	text-align: left;
	border: 1px solid #ccc;
	/* height: 55%; */
	padding: 7px 8px 0px 8px;
	/* top: 30%; */
	/* right: 222px; */
}

#DetailTableClone {
	overflow: visible;
}

.innerScrollDetailTable {
	overflow: visible;
}

dl.InfosArtikelLager b {
	font-size: 0.9em;
}

dl.InfosArtikelLager dt {
	line-height: 1.4;
	font-size: 0.9em;
}

#RubView h3 a {
	color: #333;
	font-weight: normal;
	font-size: 0.5em;
	display: block;
}
.artCMS .addProductsFrame {
	height: 340px;
}
.artCMS #RubView .productNameContainer {
	height: 42px;
}
#RubView .productNameContainer h3 {
	margin-bottom: 0px;
	font-size: 1.8em !important;
}
.StartContent #RubView li, .artCMS #RubView li, .DetailCrossList .offerItem {
	min-width: 318px;
}
/* Ends Article detail page changes */

/* Starts shopping cart changes */

.ShopTable th.Center, .Center {
	text-align: center !important;
}

.ShopTable th.Left, .Left {
	text-align: left !important;
}

.ShopTable th.Right, .Right {
	text-align: right !important;
}
.ScartItemDetails > a {
	color: #fff !important;
}

.CMS #ScartInfo:hover .ScartItemDetails {
	display: block;
	width: 350px;
	background: #fff;
	right: -30px;
}

.main-navigation > ul > li > ul a:hover {
	text-decoration: underline !important;
}

/* Ends shopping cart changes */

/* Starts footer changes */

#Sitemap {
	background: #888;
}

#Sitemap nav, #Sitemap div.ce_text {
	float: left;
	min-width: 33%;
	padding: 0 1%;
}

#Sitemap nav h6, #Sitemap div h6 {
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	margin: 0 0 10px 0;
	color: #fff;
	font-weight: normal;
	padding-bottom: 0.3em;
	font-size: 1.3em;
}

.shop section.teaser-boxes-item.rs-column {
	width: auto !important;
	margin-right: 0% !important;
	margin-top: 0% !important;
	padding: 2% 1.8% 0% 2.9% !important;
}

.teaser-boxes-item a.image-wrapper.-has-hover:hover::after {
	content:none;
}

.teaser-boxes-item .image-wrapper.-has-hover:hover img {
	-webkit-filter: none;
	filter: blur(0px) !important;
	transform: scale(1.2) !important;
}

.teaser-boxes-item .image-wrapper.-has-hover:hover::before, .team-boxes-item .image-wrapper.-has-hover:hover::before, .teaser-boxes-item .image-wrapper.-has-hover:focus::before, .team-boxes-item .image-wrapper.-has-hover:focus::before {
	background: none !important;
}

.teaser-boxes-item .image-wrapper, .team-boxes-item .image-wrapper {
	/* position: relative; */
	display: unset;
	/* overflow: hidden; */
	/* outline: none; */
}

/* Start Fast Order Changes */
.fastOrderheading {
	font-weight: bold;
	font-size: 3em;
}
.InfoTitleScart {
	position: relative;
	font-size: 2em;
	clear: left;
	margin: 0 0 5px 0;
	padding: 10px 0 5px 0;
	color: 000;
	border-bottom: 1px solid #ccc;
}
/* Ends Fast Order Changes */

/* Starts CMS changes */

.CMS .main-content h1 {
	font-weight: bold !important;
}

.CMS a {
	color: var(--primary-color);
}

.main-content h2 {
	color: #48484a;
	font-size: 1.7em;
	border-bottom: 1px solid #ccc;
	margin-top: 37px;
	margin-bottom: 30px;
}

.FirstColBoldFont td.col_0.col_first {
	font-weight: bold;
}

.sibling > a {
	text-decoration: none !important;
}

.sidebar > .mod_navigation > .level_1 li a {
	text-decoration: none;
}

.level_2 li a {
	text-decoration: none;
}

#Navigationbar .level_2 li > a:hover {
	text-decoration: underline !important;
}

.RowBorder tr > td {
	border-bottom: 1px solid #ccc;
}

/* Ends CMS changes */

/* Start responsive changes */

@media only screen and (max-width: 1920px) {
	.teaserTopicBlack {
		font-size: 1.4em !important;
	}
	.teaserTextBlack {
		font-weight: normal !important;
	}
}

@media only screen and (max-width: 1500px) { 
	#SearchFilter #ArticlesPerPage {
		width: 100%;
		float: none;
	}
}

@media only screen and (max-width: 1216px) {
	.mod_newslist > div {
    	height: auto;
    	width: 100%;
	}

	.UserBoxStartseite {
		float: right;
		width: 100%;
	}
	
	.teaserTextBlack {
		font-size: .8em !important;
	}
}

@media only screen and (max-width: 1024px) {

	#DetailTable td:first-child::after {
		content: "\f067" !important;
	}
	#DetailTable tr.active td:first-child::after {
		content: "\f068" !important;
	}
	#DetailCross .addProductsFrame {
		height: 340px !important;
	}

	#DetailTable td[id^="InfosArtikel"] {
		display: none !important;
	}
}

@media only screen and (max-width: 900px) { 
	/* #Navigationbar {
		position: fixed;
		z-index: 1001;
		margin: 60px 0 0 0;
		width: 100%;
		display: none;
		bottom: auto;
		top: 0px;
		width: 100%;
		height: calc(100% - 60px);
		overflow-x: hidden;
		overflow-y: hidden;
		background: #818286 !important;
	} */

	.main-navigation#MainNavi li.activemen {
		display: block;
		width: 100%;
		top: 0;
		background: #f1f1f1;
	}

	.main-navigation > ul > li:hover {
		background: #f1f1f1 !important;
	}

	#ListView div.ArticleTitle {
		font-size: 1.4em;
		line-height: 1.5;
		font-weight: normal;
	}

	#SearchFilter select {
		width: 40% !important;
		font-size: 1em !important;
	}

	#SearchFilter #ArticlesPerPage {
		/* padding: 4px 5px 3px 0 !important; */
	}

	#SearchFilter #ArticlesPerPage {
		/* width: auto !important; */
	}

	#ListView div.ArticleTitle {
		margin: 0 99px 10px 100px;
	}

	#ListView > ul > li:not(.cms-between) p {
		margin: 0 0px 10px 100px;
	}

	#DetailTable tr.active td, .ShopTable td {
		display: block;
		text-align: right !important;
	}

	#DetailTable tr.active td:first-child {
		text-align: left !important;
	}

}

@media only screen and (max-width: 940px) { 
	.main-navigation>ul>li>a {
		font-size: 14px;
	}
}

@media only screen and (max-width: 800px) { 
	.main-navigation>ul>li>a {
		font-size: 13px;
	}
}

@media only screen and (max-width: 768px) { 
	#Logo {
		width: 164px !important;
		height: 45px !important;
	}

	#LogoDivHeader {
		left: calc(50% - 120px) !important;
	}

	#languageSelection, #languageSelection2 {
		display: none;
	}

	.UserBoxStartseite {
		display: block !important;
	}

	#Navigationbar {
		position: fixed;
		z-index: 1001;
		margin: 60px 0 0 0;
		width: 100%;
		display: none;
		bottom: auto;
		top: 0px;
		width: 100%;
		height: calc(100% - 60px);
		overflow-x: hidden;
		overflow-y: hidden;
		background: #818286 !important;
	}

	#Navigationbar nav ul li.activemen > a {
		background-color: #818286 !important;
	}

	.FFSContent #RubView li:hover, #RubView .offerItem:hover {
		z-index: 1000 !important;
	}

	#SearchFilter select {
		width: 40% !important;
	}

	#DetailAttributes dt {
		margin: 0 0 10px 0 !important;
		width: 40% !important;
	}

	#DetailTable td:first-child::after {
		content: "\f067" !important;
	}

	#DetailTable tr.active td:first-child::after {
		content: "\f068" !important;
	}
	#suggestLayer > div > ul:first-child:nth-last-child(2), #suggestLayer > div > ul:first-child:nth-last-child(2) ~ ul {
		width: 100%;
	}
	.teaserTextBlack {
		margin-top: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
	}
	.teaserTopicBlack {
		font-size: 14px !important;
		font-weight: bold;
	}
	#RubView .productNameContainer h3 {
		font-size: 1.8em !important;
	}
}

@media only screen and (max-width: 425px) { 
	#LogoDivHeader {
		top: 10px !important;
	}

	.CMS #LogoDivHeader {
		left: calc(52% - 90px) !important;
		top: 6px !important;
	}

	#LogoDivHeader {
		left: calc(52% - 120px) !important;
	}

	#Logo {
		background-size: contain !important;
	}
	.teaserTopicBlack {
		margin: 8px 11% !important;
		font-size: 14px;
	}
	.teaserTextBlack {
		font-size: .8em !important;
		margin-top: 0px !important;
	}
	#SearchFilter {
		height: 70px !important;
	}

	#SearchFilter #ArticlesPerPage {
		float: right !important;
	}
}

@media only screen and (max-width: 360px) { 
	
	#LogoDivHeader {
		left: calc(59% - 120px) !important;
	}

	#Logo {
		width: 122px !important;
	}
}


@media only screen and (max-width: 660px) {
	#DetailAttributes dt, #DetailAttributes dd {
		/* margin: 0 0 10px 0 !important;
		width: 40% !important; */
	}
	.artCMS #RubView .productNameContainer {
		/* height: auto !important; */
		height: 44px !important;
	}
	#DetailCross .addProductsFrame {
		height: 320px !important;
	}
}
/* Ends responsive changes */