/************************************************
 *
 * Layout
 *
 ***********************************************/

#layoutWrapper {
    min-height: 100%;
    min-width: 1252px;  /* druck.at fix */
    position: relative;
}

#layoutHeader {
    overflow: hidden;
    position: relative;
    background-color: #fff;
}

#layoutContent {
    overflow: hidden;
    padding-bottom: 25px;
    background-color: #f1f1f2;
}

#layoutFooter {
    background-color: #ccc;
    width: 100%;
    position: absolute;
    bottom: 0;
    padding-bottom: 25px;
}

.mwstText {
    height: 20px;
    text-align: center;
    background-color: #ddd;
    color: #777776;
    font-size: 12px;
    padding-top: 4px;
}

#layoutSitemap {
     color: #666; 
     width: 100%;
     position: absolute;
     bottom: 387px;
     padding: 20px 0 15px 0;
     background: url(/images/sitemapBG.png) #fff;
     background-repeat: repeat-x;
     background-position: top;
}
div#layoutSitemap li { padding-bottom: 3px; }
#sm-Column1 { width: 7%; }
#sm-Column6 { width: 1%; float: left;}
#sm-Column2, #sm-Column3, #sm-Column4, #sm-Column5 {
    width: 22%;
	position: relative;
	border-right: 8px solid #fff;
}
#sm-Column1, #sm-Column2, #sm-Column3, #sm-Column4, #sm-Column5, #sm-Column6 {
     float: left;
	 overflow:hidden;	 
}
div .sm-end {
	background-image: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(100%,rgba(255,255,255,1)));
    background-image: -webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1));
    background: linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,1));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#00ffffff',EndColorStr='#ffffff');
	bottom: 0;
    height: 100%;;
    max-height: 100%;
    position: absolute;
    right: 0;
    width: 80px;
}
#sm-Column2 ul, #sm-Column3 ul, #sm-Column4 ul, #sm-Column5  ul{
    padding-right: 40px;
}
#layoutSitemap a { 
    color: #48392b; 
    text-decoration: none;
	font-size: 13px;
}
#layoutSitemap a:hover {
    color: #333;
    font-weight: 600;
}
.newCategory {
    color: var(--branding-color2);
    font-weight: bold;
    font-size: 13px;
}

/************************************************
 *
 * Branding
 *
 ***********************************************/

#brandingDefines {
    background-color: #003b68; /* IE 11 Fallback */
    background-color: var(--branding-color1); /* branding-color for the search, tree, ... */
}

:root {
    --branding-color1: #003b68;
    --branding-color2: #aa1a2f;
    --light-gray: #eee;
    --text-color1: #333;
    --text-color2: #666;
}

.branding-bg-color1 {
    background-color: #003b68; /* IE 11 Fallback */
    background-color: var(--branding-color1) !important;
}
.branding-bg-color2 {
    background-color: #aa1a2f; /* IE 11 Fallback */
    background-color: var(--branding-color2) !important;
}

.brandingTextColor {
    color: #003b68; /* IE 11 Fallback */
    color: var(--branding-color1) !important;
}

.branding-text-color1 {
    color: #003b68; /* IE 11 Fallback */
    color: var(--branding-color1) !important;
}

.branding-text-color2 {
    color: #aa1a2f; /* IE 11 Fallback */
    color: var(--branding-color2) !important;
}

#brand {
    width: 281px;
    height: 57px;
    position: absolute;
    top: 16px;
    left: 34px;
}

.template span.product-label {
    position: absolute;
    left: 0;
    color: #fff;
    padding: 5px 0 4px 0 !important;
    text-align: center;
    width: 70px;
    z-index: 300;
}

.template span.overlay { display: none; }

.template:hover span.overlay {
    display: block;
    position: absolute;
    left: 71px;
    width: 149px;
    padding: 5px 0 4px 0 !important;
    color: #fff;
    z-index: 300;
}

.template .product-label {
    background-color: #003b68;
    background-color: var(--branding-color1);
}

.template:hover .overlay {
    background-color: #92b9df;
}

.template .product-label.mailing {
    background-color: #f89700;
}

.template:hover .overlay.mailing {
    background-color: #f9b750;
}

/************************************************
 *
 * Search
 *
 ***********************************************/
#search {
    width: 355px;
    position: absolute;
    left: 355px;
    top: 37px;
}

/************************************************
 *
 * Contact persons
 *
 ***********************************************/

#contactPersons {
    position: absolute;
    top: 10px;
    right: 20px;
}

#contactPersons .contactPersonDivider {
    margin: 3px 18px 0 18px;
    height: 80px;
    float: right;
    border-left: 1px solid #ccc;
}

#contactPersons img {
    max-height: 80px;
}

#contactPersons .column.image {
    padding-top: 3px;
}
 
#contactPersons .column.space {
    width: 12px;
    height: 1px;
}

#contactPersons .column.text {
    font-size: 12px;
    color: #555;
    white-space: nowrap;
}

#contactPersons .column.text a {
    text-decoration: none;
    color: #555;
}

#contactPersons .column.text a:hover {
    text-decoration: underline;
}

#contactPerson1, #contactPersonProductGroup {
    text-align: right;
    float: right;
}

#contactPerson1 .column, #contactPersonProductGroup .column {
    float: right;
}

#contactPerson2 {
    text-align: left;
    float: right;
}

#contactPerson2 .column {
    float: left;
}

#contactPersonProductGroup {
    display: none;
}

/*
#contact {
    text-align: right;
    position: absolute;
    top: 10px;
    right: 20px;
}

#contact .column {
    float: right;
}

#contact img {
    max-height: 80px;
    //border: 1px solid #efefef;
}

#contact .column.image {
    padding-top: 3px;
    float: right;
}

#contact .column.text {
    font-size: 12px;
    color: #555;
    bottom: 0;
    white-space: nowrap;
    float: left;
    padding-right: 12px;
    padding-top: 18px;
}

#contact .column.text a {
    text-decoration: none;
    color: #555;
}

#contact .column.text a:hover {
    text-decoration: underline;
}
*/

/************************************************
 *
 * Menu
 *
 ***********************************************/
 
#menu {
    background-color: #706f6f;
    overflow: hidden;
    margin-top: 108px;
}

#menu ul {
    list-style-type: none;
}

#menu ul.left {
    float: left;
    padding-left: 17px;
}

#menu ul.center {
    float: left;
}

#menu ul.right {
    float: right;
    padding-right: 20px;
}

#menu li {
    float: left;
    padding-bottom: 0;
}

#menu a {
    display: block;
    padding: 9px 16px;
    text-decoration: none;
    font-size: 16px;
    color: white;
}

#menu a:hover {
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-transition: opacity 200ms ease-out;
    -moz-transition: opacity 200ms ease-out;
    -o-transition: opacity 200ms ease-out;
    -ms-transition: opacity 200ms ease-out;
    transition: opacity 200ms ease-out;
}

#menu a.active {
    opacity: 0.65;
    filter: alpha(opacity=65);
}

#menu a.separator {
    padding-left: 0;
    padding-right: 0;
}

#menu a.separator:hover {
    opacity: 1.0;
    filter: alpha(opacity=100);
}

/************************************************
 *
 * company submenu
 *
 ***********************************************/

#companySubMenu {
    position: absolute;
    width: 680px;
    height: 344px;
    background-color: #fff;
    border: solid 1px #BDBDBD;
	box-shadow: 0 0 5px #999;
	-moz-box-shadow: 0 0 5px #999;
	-webkit-box-shadow: 0 0 5px #999;
    z-index: 500;
}

#areaBA {
    float: left;
    width: 330px;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
}

#areaContent {
    float: left;
    width: 350px;
    height: 285px;
}

.bas {
    height: 48px;
    border-bottom: 1px solid #fff;
}

#printBA, #eBusinessBA, #businessCommunicationBA, #dmsBA, #dsvBA, #seitsBA, #companyBA { display: table-cell; vertical-align: middle; }
a.linkBA { text-decoration: none !important; display: block; }
.printBA, .eBusinessBA, .businessCommunicationBA, .dmsBA, .dsvBA, .seitsBA, .companyBA { 
    height: 48px; 
    width: 340px;
    color: #fff;
    font-size: 16px;
    display: table-cell;
    vertical-align: middle;
}

.bas .fa.fa-print, .bas .fa.fa-eur, .bas .fa.fa-pie-chart, .bas .fa.fa-envelope-o, .bas .fa.fa-file-text-o, .bas .fa.fa-code, .bas .fa.fa-suitcase {
    margin-right: 15px;
    padding-top: 9px;
    height: 39px;
    width: 62px;
    text-align: center;
    font-size: 26px;
}

.printBA { background-color: #cc5960; }
.eBusinessBA { background-color: #ef8e50; } 
.businessCommunicationBA { background-color: #6096cc; }
.dmsBA { background-color: #51a666; }
.dsvBA { background-color: #b0b049; }
.seitsBA { background-color: #23c9e5; }
.companyBA { background-color: #8d8b8c; }

a:hover #printBA .printBA .fa { background: var(--branding-color2); border-right: 1px solid #fff; width: 60px; padding-left: 1px; }
a:hover #eBusinessBA .eBusinessBA .fa { background: #eb6909; border-right: 1px solid #fff; width: 60px; padding-left: 1px; }
a:hover #businessCommunicationBA .businessCommunicationBA .fa { background: var(--branding-color1); border-right: 1px solid #fff; width: 60px; padding-left: 1px; }
a:hover #dmsBA .dmsBA .fa { background: #0a882b; border-right: 1px solid #fff; width: 60px; padding-left: 1px; }
a:hover #dsvBA .dsvBA .fa { background: #999912; border-right: 1px solid #fff; width: 60px; padding-left: 1px; }
a:hover #seitsBA .seitsBA .fa { background: #00afdc; border-right: 1px solid #fff; width: 60px; padding-left: 1px; }
a:hover #companyBA .companyBA .fa { background: #706f6f; border-right: 1px solid #fff; width: 60px; padding-left: 1px; }

.printFa.fa { background-color: #bc1622; }
.eBusinessFa.fa { background: #eb6909; }
.businessCommunicationFa.fa { background: var(--branding-color1); }
.dmsFa.fa { background: #0a882b; }
.dsvFa.fa { background: #999912; }
.seitsFa.fa { background: #00afdc; }
.companyFa.fa { background: #706f6f; }

#promotion {
    background-color: #bc1622;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}

.contentBAs{
    display: none;
    position: absolute;
    left: 340px;
    top: 1px;
    width: 329px;
    height: 243px;
    padding-right: 8px;
}

a:hover #printContent, a:hover #eBusinessContent,
a:hover #businessCommunicationContent, a:hover #dmsContent, 
a:hover #dsvContent, a:hover #seitsContent, a:hover #companyContent { display: block; }

.contentBAs h1, #chooseBA h1 { 
    color: #4e4e4e;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 0;
}

.contentBAs, #chooseBA {
    font-size: 14px; 
    color: #4e4e4e;
    background-color: #fff;
}

.contentBAs ul {
    padding-left: 30px;
    list-style-image:url(/images/square-grey.png);
}

.printFa.fa, .eBusinessFa.fa, .businessCommunicationFa.fa, .dmsFa.fa, .dsvFa.fa, .seitsFa.fa, .companyFa.fa {    
    position: absolute;
    left: 245px;
    top: 248px;
    width: 85px;
    height: 70px;
    font-size: 50px;
    display: table-cell; 
    vertical-align: middle;
    padding-top: 15px;
    color: #fff;
    text-align: center;
}

#chooseBA {
    position: absolute;
    left: 340px;
    width: 330px;
    height: 274px;
}

#chooseView {
    padding: 6px 16px;
    margin-left: 100px;
}

.viewButton {
    width: 100px;
    float: left;
    cursor: pointer;
}

.text {
    padding-top: 5px;
    color: #333;
}

.viewButton.active .text {
    opacity: 0.65;
    filter: alpha(opacity=65);
}

.chooseViewText {
    padding-top: 5px;
    color: #fff;
}

.viewButton.active .chooseViewText {
    opacity: 0.65;
    filter: alpha(opacity=65);
}

.images {
    float: left;
    padding: 3px;
    margin-right: 5px;
    height: 17px;
    width: 17px;
}

.viewButton.active .images {
    background-color: #ddd;
}

#loginMenu {
    background-color: var(--branding-color1);
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}

/************************************************
 *
 * SubMenu
 *
 ***********************************************/
 
#subMenu {
    overflow: hidden;
}

#subMenu ul {
    list-style-type: none;
}

#subMenu ul.left {
    float: left;
}

#subMenu ul.right {
    float: right;
}

#subMenu li {
    float: left;
}

#subMenu a {
    display: block;
    padding: 9px 16px;
    text-decoration: none;
    font-size: 13px;
    color: #898989;
}

#subMenu a:hover {
    text-decoration: underline;
}

#subMenu a.active {
    font-weight: 600;
    color: #333;
}

/************************************************
 *
 * Content
 *
 ***********************************************/
 
#column1 {
    float: left;
	width: 260px;
    padding-left: 17px;
}

#column2, #column3 {
    margin-left: 294px;
    margin-right: 5px;
}

#column3 {
	/*font-family: arial;*/
	font-size: 14px;
	position: relative;
    overflow: hidden;
	width: 705px;
}

/*cms content*/
#column3 h1, #column3 h3 { color: var(--branding-color1) !important;}
#column3 h2, #column3 h4, #column3 h6 { color: var(--branding-color1) !important;}
#column3 h1, #column3 h2 { font-size:18px;}
#column3 h3, #column3 h4 { font-size: 15px;}
#column3 h5, #column3 h6 { font-size: 13px;}

#column3 h1 { 
    padding-top: 19px;
    padding-bottom: 7px;
    border-top: 1px solid var(--branding-color1);
}
#column3 h2 { 
    padding-top: 9px;
    padding-bottom: 7px;
}
#column3 p { 
    padding-bottom: 7px;
}

#column3 ul { 		
	margin-top: 4px;
    margin-bottom: 4px;
}

#column3 ol { 		
	margin-top: 4px;
    margin-bottom: 4px;
	list-style-type: decimal;
}

#column3 ol li {
	margin-left: 35px;	
	margin-top: 1px;
}

#column3 ul li {
	list-style-image: url(/images/square-grey.png);
	margin-left: 35px;	
	margin-top: 3px;
}

.collapsableContent h3 { cursor: pointer; display: inline-block; }
.collapsableContent h3.opened:before { content: "▼\a0\a0"; }
.collapsableContent h3.closed:before { content: "►\a0\a0"; }

#column3 table.infobox-green h1 {
    color: var(--branding-color2);
    font-weight: normal;
}

#column3 table.infobox-orange {
	margin-bottom: 15px;
	margin-left: 0;
	margin-right: 0;
}

#column3 table.infobox-green {
	background-color: #ff0;
	/*font-family: arial;*/
	font-size: 12px;
	line-height: 19px;
    margin-top: 30px;
    width: 100%;
}

#column3 p.bodytext{
    margin: 5px 0;
}

#column3 .mail {
    color: var(--branding-color1);
}

#column3 .origin-of-photo {
    color: #888888;
    font-size: 11px;
    padding-top: 5px;
}

#column3 .cms-link {
    color: var(--branding-color1);
    text-decoration: underline;
}

#column3 .screenshot {
    border: 1px solid #999;
}

#column3 .gallery {
    height: 140px;
    border-bottom: 1px solid #ccc;
    margin: 25px 35px;
}

#column3 .cms-button, .cms-button {
    color: #fff;
    text-decoration: none;
    background-color: var(--branding-color1);
    padding: 5px 20px 6px 20px;
    line-height: 50px;
    font-size: 17px;
}

.subtitle a {
    color: #ffffff;
}

.collapsableContent h3 {
    margin-top: 10px;
}

.infobox-green td{
    padding: 0 0 8px 0;
}

#certificates {
	position: relative;
	float: left;
	border-top: 1px solid #CCC;
	margin-top: 20px;
	width: 260px;
}

#right-column table {
	margin-left: 20px;
	margin-right: 20px;
	width: 558px;
}

.contenttable {
	width: 700px;
}

.contenttable tr td, .contenttable tr th {
	border-bottom-color: #dddede;
	border-bottom-style: solid;
	border-bottom-width: 1px;
    padding: 15px 0;
}

/************************************************
 *
 * Developer warning
 *
 ***********************************************/
 
#developerWarning {
    border: 1px solid black;
    background-color: #ddd;
    padding: 1px 20px;
    position: absolute;
    right: 300px;
    top: 2px;
}

#developerWarningMessage {
    font-weight: 600;
    font-size: 22px;
    color: #dd0000;
    position: relative;
}

/************************************************
 *
 * Developer info.
 *
 ***********************************************/

#developerInfo {
    position: absolute;
    z-index: 1;
    left: 715px;
    top: 37px;
    border: 1px solid #bbb2b2;
    background-color: #f7f7f7;
    color: grey;
    padding: 5px;
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: opacity 200ms ease-out;
    -moz-transition: opacity 200ms ease-out;
    -o-transition: opacity 200ms ease-out;
    -ms-transition: opacity 200ms ease-out;
    transition: opacity 200ms ease-out;
	cursor: none;
}

#developerInfo:hover {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: opacity 200ms ease-out;
    -moz-transition: opacity 200ms ease-out;
    -o-transition: opacity 200ms ease-out;
    -ms-transition: opacity 200ms ease-out;
    transition: opacity 200ms ease-out;
}
 
/************************************************
 *
 * Change customer
 *
 ***********************************************/
 
#changeCustomer {
    position: absolute;
    width: 290px;
    height: 30px;
    top: 9px;
    left: 355px;
}

#changeCustomerInput {
    position: absolute;
    top: 1px;
    height: 22px;
    width: 169px;
}

#btnChangeCustomer {
    position: absolute; 
    left: 176px;
}

/************************************************
 * Load CMS styles
 ***********************************************/
#layoutFooter a {
  text-decoration: none;
  color: #777776;
  outline: none;
}

#layoutFooter a:hover{
  text-decoration: none;
  color: #000;
  outline: none;
  /*font-size: 12px;*/
  font-weight: 600;
}

.newsletter-list { padding: 20px 0 0 30px; }

.newsletter li { list-style-image: url(/images/list-item-blue.png?ver=1); font-weight: 600; }

.noNewsletter li:before {
    content: "\f00d"; /* FontAwesome Unicode */
    font-family: FontAwesome;
    display: inline-block;
    margin-left: -1.3em;
    width: 1.3em;
    color: var(--branding-color1);
    font-size: 22px;
}

.other-bold { color: #777776; font-weight: 600;}

.todo { color:#FF0000;}

/************************************************
 *
 * Metro style tiles.
 *
 ***********************************************/

.tile {
    width: 170px;
    height: 170px;
    float: left;
    margin: 0 8px 8px 0;
    position: relative;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.tile.t-2x1 { width: 348px; }
.tile.t-3x1 { width: 526px; }
.tile.t-4x1 { width: 704px; }
.tile.t-4x0-5 { width: 704px; height: 85px; }
.tile.t-2x2, .tileContainer.t-2x2 { width: 348px; height: 348px; }

.tile.t-2x2 .icon .fa { line-height: 270px; }

.tileContainer {
    width: 170px;
    height: 170px;
    float: left;
    margin: 0 8px 8px 0;
    position: relative;
}

.tile.right, .tileContainer.right { margin-right: 0; }
.tile.newrow, .tileContainer.newrow { clear: left; }

.tile .icon {
    height: 100%;
    text-align: center;
}

.tile .icon .fa {
    color: #fff;
    line-height: 135px;
    font-size: 6em;
    padding: 0 30px;
}

.tile .icon.left { text-align: left; }
.tile .icon.left .fa { line-height: 115px; padding: 0 10px; }
.tile .icon.right { text-align: right; }
.tile .icon.right .fa { line-height: 115px; padding: 0 10px; }

/* fix for safari */
.hrefTile {
    text-decoration: none;
}

.tile .title {
    font-size: 17px;
    color: #fff;
    position: absolute;
    bottom: 0;
    padding: 10px;
    letter-spacing: 0.2px;
}

.tile .title.top {
    position: absolute;
    top: 0;
}

.tile .title.right {
    right: 0;
    text-align: right;
}

.tile .title .subtitle {
    font-size: 13px;
    display: block;
}

.tile .image {
    text-align: center;
    height: 135px;
    margin-top: 20px;
}

/* animates the color and the background-color */
.tile.animateColor {
    -webkit-transition: background-color 200ms ease-out;
    -moz-transition: background-color 200ms ease-out;
    -o-transition: background-color 200ms ease-out;
    -ms-transition: background-color 200ms ease-out;
    transition: background-color 200ms ease-out;
}

.tile.animateColor .icon .fa {
    -webkit-transition: color 200ms ease-out;
    -moz-transition: color 200ms ease-out;
    -o-transition: color 200ms ease-out;
    -ms-transition: color 200ms ease-out;
    transition: color 200ms ease-out;
}

.tile.animateColor .title {
    -webkit-transition: color 200ms ease-out;
    -moz-transition: color 200ms ease-out;
    -o-transition: color 200ms ease-out;
    -ms-transition: color 200ms ease-out;
    transition: color 200ms ease-out;
}

.tile:hover.animateColor {
    -webkit-transition: color 200ms ease-out;
    -moz-transition: color 200ms ease-out;
    -o-transition: color 200ms ease-out;
    -ms-transition: color 200ms ease-out;
    transition: color 200ms ease-out;
    -webkit-transition: background-color 200ms ease-out;
    -moz-transition: background-color 200ms ease-out;
    -o-transition: background-color 200ms ease-out;
    -ms-transition: background-color 200ms ease-out;
    transition: background-color 200ms ease-out;
}

/* animates the font-size of the icon */
.tile.animateIcon .icon .fa {
    -webkit-transition: font-size 200ms ease-out;
    -moz-transition: font-size 200ms ease-out;
    -o-transition: font-size 200ms ease-out;
    -ms-transition: font-size 200ms ease-out;
    transition: font-size 200ms ease-out;
}

.tile:hover.animateIcon .icon .fa {
    font-size: 6.3em;
    -webkit-transition: font-size 200ms ease-out;
    -moz-transition: font-size 200ms ease-out;
    -o-transition: font-size 200ms ease-out;
    -ms-transition: font-size 200ms ease-out;
    transition: font-size 200ms ease-out;
}

/* hovers the font-size of the icon */
.tile:hover.hoverIcon .icon .fa {
    font-size: 6.3em;
}

/* hover animation of the description */
.tile.animateDescriptionOnHover .icon,
.tile.animateDescriptionOnHover .title {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -webkit-transition: opacity 200ms ease-out;
    -moz-transition: opacity 200ms ease-out;
    -o-transition: opacity 200ms ease-out;
    -ms-transition: opacity 200ms ease-out;
    transition: opacity 200ms ease-out;
}

.tile:hover.animateDescriptionOnHover .icon,
.tile:hover.animateDescriptionOnHover .title {
    opacity: 0.2;
    filter: alpha(opacity=20);
    -webkit-transition: opacity 200ms ease-out 500ms;
    -moz-transition: opacity 200ms ease-out 500ms;
    -o-transition: opacity 200ms ease-out 500ms;
    -ms-transition: opacity 200ms ease-out 500ms;
    transition: opacity 200ms ease-out 500ms;
}

.tile.animateDescriptionOnClick .icon,
.tile.animateDescriptionOnClick .title {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -webkit-transition: opacity 200ms ease-out;
    -moz-transition: opacity 200ms ease-out;
    -o-transition: opacity 200ms ease-out;
    -ms-transition: opacity 200ms ease-out;
    transition: opacity 200ms ease-out;
}

.tile.animateDescriptionOnClick.clicked .icon,
.tile.animateDescriptionOnClick.clicked .title {
    opacity: 0.2;
    filter: alpha(opacity=20);
    -webkit-transition: opacity 200ms ease-out;
    -moz-transition: opacity 200ms ease-out;
    -o-transition: opacity 200ms ease-out;
    -ms-transition: opacity 200ms ease-out;
    transition: opacity 200ms ease-out;
}

.tile .description {
    font-size: 14px;
    vertical-align: middle;
    line-height: 14px;
    color: #eee;
    position: absolute;
    padding: 10px;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: opacity 200ms ease-out;
    -moz-transition: opacity 200ms ease-out;
    -o-transition: opacity 200ms ease-out;
    -ms-transition: opacity 200ms ease-out;
    transition: opacity 200ms ease-out;
}

.tile:hover.animateDescriptionOnHover .description {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -webkit-transition: opacity 200ms ease-out 500ms;
    -moz-transition: opacity 200ms ease-out 500ms;
    -o-transition: opacity 200ms ease-out 500ms;
    -ms-transition: opacity 200ms ease-out 500ms;
    transition: opacity 200ms ease-out 500ms;
}

.tile.animateDescriptionOnClick.clicked .description {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -webkit-transition: opacity 200ms ease-out;
    -moz-transition: opacity 200ms ease-out;
    -o-transition: opacity 200ms ease-out;
    -ms-transition: opacity 200ms ease-out;
    transition: opacity 200ms ease-out;
}

/* animates the opacity */
.tile.animateOpacity {
    opacity: 0.9;
    filter: alpha(opacity=90);
    -webkit-transition: opacity 200ms ease-out;
    -moz-transition: opacity 200ms ease-out;
    -o-transition: opacity 200ms ease-out;
    -ms-transition: opacity 200ms ease-out;
    transition: opacity 200ms ease-out;
}

.tile.animateBaOpacity {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -webkit-transition: opacity 200ms ease-out;
    -moz-transition: opacity 200ms ease-out;
    -o-transition: opacity 200ms ease-out;
    -ms-transition: opacity 200ms ease-out;
    transition: opacity 200ms ease-out;
}

.tile:hover.animateOpacity,
.tile:hover.animateBaOpacity {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -webkit-transition: opacity 200ms ease-out;
    -moz-transition: opacity 200ms ease-out;
    -o-transition: opacity 200ms ease-out;
    -ms-transition: opacity 200ms ease-out;
    transition: opacity 200ms ease-out;
}

.tile.yellow        { background-color: #bbbb19; }
.tile.darkyellow    { background-color: #999912; }
.tile.orange        { background-color: #bb853d; }
.tile.darkorange    { background-color: #93611f; }
.tile.brown         { background-color: #bb553d; }
.tile.darkbrown     { background-color: #93341f; }
.tile.green         { background-color: #70a920; }
.tile.darkgreen     { background-color: #4a7a07; }
.tile.blue          { background-color: #207fa9; }
.tile.darkblue      { background-color: #07577a; }
.tile.gray          { background-color: #919190; }
.tile.darkgray      { background-color: #707071; }
.tile.violett       { background-color: #7b37c4; }
.tile.darkviolett   { background-color: #531299; }
.tile.red           { background-color: #d52c22; }
.tile.darkred       { background-color: #ab0e06; }

.tile a {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}

.tile a.email {
    width: initial !important;
    height: initial !important;
    position: relative;
}

/************************************************
 *
 * Business areas.
 *
 ***********************************************/

#businessAreas {
    overflow: hidden;
    margin-bottom: 50px;
	min-width: 706px;
}

.tile.ba1 {
    background-color: var(--branding-color2);
}

.tile.ba2 {
    background-color: #eb6909;
}

.tile.ba2 .icon .fa,
.tile.ba2 .title {
    color: #fff;
}

.tile.ba3 {
    background-color: var(--branding-color1);
}

.tile.ba4 {
    background-color: #0a882b;
}

/************************************************
 *
 * Toolbox, kaToolbox.
 *
 ***********************************************/

#toolbox, #kaToolbox {
    overflow: hidden;
    background-color: #f8f8f8;
    /*border-top: 1px solid #aba2a2;*/
    border-bottom: 1px solid #aba2a2;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#toolbox .tbContainer, #kaToolbox .tbContainer { margin: 5px 16px; }
#toolbox table, #kaToolbox table { width: 100%; }

/************************************************
 *
 * Search result.
 *
 ***********************************************/

.noItems {
    font-size: 14px;
    color: #666;
    margin-bottom: 50px;
}

.linkSearchResult {
    margin-bottom: 50px;
    overflow: hidden;
}

    .linkSearchResult a.siteLink {
        color: var(--branding-color1);
        font-size: 14px;
        height: 18px;
        float: left;
        clear: both;
        text-decoration: none;
    }

.linkSearchResult a.siteLink:hover {
    text-decoration: underline;
}

/************************************************
 *
 * Manuals, Pricelists, ...
 *
 ***********************************************/

#additionalDocuments {
    float: left;
    width: 260px;
    margin-top: 20px;
}

#additionalDocuments a {
    text-decoration: none;
}

#additionalDocuments .header {
    background-color: #706f6f;
    color: #fff;
    font-size: 16px;
    padding: 5px 16px;
    margin-bottom: 5px;
    letter-spacing: 0.2px;
}

#additionalDocuments .node {
    cursor: pointer;
    padding-left: 10px;
    clear: both;
}

#additionalDocuments .node:hover {
    background-color: #e6e6e6;
}

#additionalDocuments .node .icon {
    width: 20px;
    height: 20px;
    background-image: url(../images/pdf_small.png);
    background-repeat: no-repeat;
    float: left;
    margin-top: 2px;
}

#additionalDocuments .node .title {
    font-size: 13px;
    padding: 5px;
    color: #666;
    letter-spacing: 0.2px;
    margin-left: 20px;
}

#greeting {
    color: #666;
    position: absolute;
    top: 87px;
    left: 34px;
    font-size: 13px;
}

    #greeting a {
        color: var(--branding-color1);
        text-decoration: none;
    }

#greeting a:hover { text-decoration: underline; }

.genericInput {
	color: #6E7072;
    border: 1px solid #6E7072; 
	clear: both;
    font-size: 15px;
	margin-top: 2px;
	margin-bottom: 5px;
	padding-left: 4px;
	padding-bottom: 2px;
	height: 20px;
    width: 270px;	
}

.genericInputHalfSize {
	background-color: #fff;
	color: #6E7072;
	border: 1px solid #6E7072;    
    clear: both;
    font-size: 15px;
	margin-top: 2px;
	margin-bottom: 5px;
    margin-right: 4px;
	padding-left: 4px;
	padding-bottom: 2px;
	height: 20px;
    width: 128px;	
}

.genericButton {
    border: none;
    height: 28px;
    line-height: 28px;
    background-color: var(--branding-color1);
    font-size: 14px;
    color: #fff;
    padding-left: 6px;
    padding-right: 6px;
    cursor: pointer;
}

.genericButton:hover {
	background-color: #006BAE;
}

/************************************************
 *
 * Date selector
 *
 ***********************************************/

.dateSelector { overflow: hidden; }
.dateSelector .text { 
    float: left; 
    line-height: 21px;
}
.dateSelector input {
    float: left;
    width: 67px;
    height: 21px;
    padding: 2px;
    margin-left: 5px;
    border: 1px solid #858587;
    border-right-width: 0px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /*font-family: Arial, Helvetica, sans-serif;*/
    font-size: 12px;
}
.dateSelector input:focus {
    border-color: #858587;
    outline: none;
}
.dateSelector .icon { 
    float: left; 
    margin-right: 5px;
    cursor: pointer;
    background-color: #858587;
    width: 22px;
    height: 21px;
}
.dateSelector .icon i {
    font-size: 13px;
    color: #fff;
    padding-left: 5px;
    padding-top: 4px;
}

/************************************************
 *
 * Cart.
 *
 ***********************************************/

#cart-overview {
    width: 100%;
}
#cart-overview {
    border: 1px solid #ccc;
    margin: 15px 0;
    background-color: #fff;
}
#cart-overview thead th, #cart-overview tfoot tr.total td {
    background-color: #d7d7d7; 
    padding: 5px 10px;
    font-weight: 600;
}
#cart-overview tfoot tr.total td { border-top: 1px solid #ccc; }
#cart-overview td.right { text-align: right; }
#cart-overview tr.position { border-top: 1px solid #ccc; }
#cart-overview tr.subPosition td { padding-top: 0; }
#cart-overview tr.summaryRow td { padding: 4px 10px; }
#cart-overview tr.summaryBlockBefore { border-top: 1px solid #ccc; }
#cart-overview tr.summaryBlockBefore td { height: 10px; padding: 0; }
#cart-overview tr.summaryBlockAfter td { height: 10px; padding: 0; }

#cart-overview td {
    padding: 10px; 
    vertical-align: top;
}
#cart-overview table.article td {
    padding: 0 10px 0 0; 
}
#cart-overview .productImage {
    border: 1px solid #ccc;
    padding: 5px;
    display: block;
    width: 72px;
    text-align: center;
}

.cartInformation {
    border: 2px solid #F7D112;
    margin: 10px 0;
    padding: 10px; 
}

.cartInformation .cartInformationHeader {
    font-size: 17px;
}

.cartInformation .actionHeader {
    font-weight: 600;
    margin-top: 10px;
}

.cartInformation .actionItem {
    margin-top: 5px;
    margin-left: 25px;
}

#cart-overview .reducedArticle {
    background-color: #bc1622;
    width: 65px;
    color: #fff;
    text-align: center;
    font-size: 11px;
    margin-top: 5px;
    padding: 1px;
}

#cartPage div .pageContent {
    overflow: hidden;
}

#voucherContainer {
    /*padding-left: 11px;*/
}

#voucherContainer label {
    font-weight: 600;
}

#voucherContainer input {
    height: 25px;
    width: 120px;
    margin: 0 7px;
    padding: 0 4px;
}


/************************************************
 *
 * Compare Products/Items.
 *
 ***********************************************/

#compareItems tbody { vertical-align: top; }

#compareItems img {
    max-width: 200px;
    border: 1px solid #d3d3d3;
}

#compareItems tr:nth-child(odd) { background-color:#eee; }
#compareItems tr:nth-child(even) { background-color:#fff; }

#compareItems td { 
    padding: 10px; 
    border: 1px solid #d3d3d3;
}

#compareItems .title {
    font-size: 12px;
    white-space: nowrap;
}

#compareItems .description {
    font-size: 15px;
    margin-top: 5px;
}

#compareItems .shortdescription {
    font-size: 12px;
    margin-top: 5px;
}

#compareItems .remove {
    overflow: hidden;
}

    #compareItems .remove a {
        color: var(--branding-color1);
        cursor: pointer;
        float: right;
        margin-bottom: 5px;
    }

/************************************************
 *
 * Benefits.
 *
 ***********************************************/

#topInfos {
    height: 315px; 
    width: 100%;
    margin-bottom: 50px; 
    overflow: hidden;
    display: none;
}

#benefitsTile, #newsletterTile {
    float: left;
    margin-left: 15px; 
    width: 230px; 
    height: 315px;
}

#newsletterTile a {
    position: relative;
    bottom: -27px;
    right: -17px;
}

#benefitsTile   { background-image: url(/images/facilities/bg-ihre-vorteile.jpg); }
#newsletterTile { background-image: url(/images/newsletter/bg-newsletter.jpg); }

#benefitsContent, #newsletterContent {
     position: relative; 
     top: 121px; 
     padding: 0 5px 0 47px; 
     color: #444; 
     font-size: 15px;
}

.benefitListItem { list-style-image: url(/images/list-item-blue.png?ver=1); }
.newsletterListItem { list-style-image: url(/images/list-item-blue.png?ver=1); }
.newsletterListItem li, .benefitListItem li { padding-bottom: 6px; }

.newsletterList li {
    list-style-image: url(/images/list-item-check.png) !important;
    padding-top: 0 !important;
    margin-top: 3px !important;
}

.benefitsMore {
    color: var(--branding-color1);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding-left: 62px;
    position: absolute;
    top: 152px;
}

/************************************************
 *
 * Overrides.
 *
 ***********************************************/
.mz-zoom-window  { z-index: 160 !important; }

/************************************************
 *
 * Shipping.
 *
 ***********************************************/
 
.shippingCostsPopover {
    position: absolute;
    z-index: 1;
    border: 1px solid #ccc;
    background-color: #eee;
    display: none;
    padding: 5px;
} 

.shippingCostsPopover table { clear: both; }
.shippingCostsPopover tr.shippingCostsPopoverRow td { padding: 2px 10px;}
.shippingCostsPopover td.right { text-align: right; }

.shippingCostsPopoverClose {
    width: 18px;
    height: 18px;
    background-image: url(../images/shippingCostPopupClose.png);
    background-repeat: no-repeat;
    cursor: pointer;
    float: right;
    
}

/************************************************
 *
 * orderCostInformation.
 *
 ***********************************************/
 
#orderCostInformation {
    width: 100%;
    border: 1px solid #ccc;
    background-color: #fff;
    overflow: hidden;
}
#orderCostInformation thead th, #orderCostInformation tfoot tr.total td {
    background-color: #d7d7d7; 
    padding: 5px 10px;
    font-weight: 600;
}
#orderCostInformation tfoot tr.total td { border-top: 1px solid #ccc; }
#orderCostInformation td.right { text-align: right; }
#orderCostInformation tr.summaryRow td { padding: 4px 10px; }
#orderCostInformation tr.summaryBlockBefore { border-top: 1px solid #ccc; }
#orderCostInformation tr.summaryBlockBefore td { height: 10px; padding: 0; }
#orderCostInformation tr.summaryBlockAfter td { height: 10px; padding: 0; }
#orderCostInformation td { padding: 10px; vertical-align: top; }

/************************************************
 *
 * Errors.
 *
 ***********************************************/
.error_content {
    float: left;
    margin: 33px;
}

.error_content .column { float: left; }
.error_content .error_icon { margin-right: 20px; }

.error_content h1 {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.callout {
    padding: 20px;
    margin-right: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-left-width: 5px;
}

.callout .title {
    margin-top: 0;
    margin-bottom: 0.8rem;
    font-size: 1.25rem;
    font-weight: 500;
}

.callout p {
    margin-bottom: 0.5rem;
}
.callout p:last-child {
    margin-bottom: 0;
}

.callout.callout-primary {
    border-left-color: var(--branding-color1);
}

.callout.callout-primary .title {
    color: var(--branding-color1);
}

.callout.callout-secondary {
    border-left-color: var(--branding-color2);
}

.callout.callout-secondary .title {
    color: var(--branding-color2);
}

/************************************************
 *
 * Select photo.
 *
 ***********************************************/
.select_photos .photo {
    float: left;
    width: 315px;
    height: 100px;
    margin: 0 10px 10px 0;
    padding: 10px;
}

/************************************************
 *
 * Autocompleter.
 *
 ***********************************************/
div.autocompleter-loading {
    float: left;
    clear: right;
    background: #fff url(images/spinner.gif) no-repeat center;
    width: 20px;
    height: 16px;
}

ul.autocompleter-choices {
    position: absolute;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #eee;
    background-color: white;
    border-right-color: #ddd;
    border-bottom-color: #ddd;
    text-align: left;
    /*font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;*/
    z-index: 10000;
}

ul.autocompleter-choices li {
    position: relative;
    padding: 0.1em 1.5em 0.1em 1em;
    cursor: pointer;
    font-weight: normal;
    font-size: 1em;
}

    ul.autocompleter-choices li.autocompleter-selected {
        background-color: #444;
        color: #fff;
    }

ul.autocompleter-choices span.autocompleter-queried {
    font-weight: bold;
}

ul.autocompleter-choices li.autocompleter-selected span.autocompleter-queried {
    color: #9FCFFF;
}

ul.autocompleter-choices span.address-info {
    font-size: 10px;
}

/************************************************
 *
 * StockLevelLights.
 *
 ***********************************************/
.stockLevelLights {
    display: inline-block;
}

.product .stockLevelLights {
    position: absolute;
    left: 7px;
    bottom: 46px;
}

.stockLevelLights .stockLevelLight {
    width: 17px;
    height: 17px;
    border: 1px solid black;
}

.stockLevelLights .stockLevelLight.red {
    background-color: red;
}
 
.stockLevelLights .stockLevelLight.yellow {
    background-color: yellow;
}

.stockLevelLights .stockLevelLight.green {
    background-color: limegreen;
}

/************************************************
 *
 * Bootstrap
 *
 ***********************************************/
.gap-0 {
    gap: 0 !important;
}

.gap-1 {
    gap: 0.25rem !important;
}

.gap-2 {
    gap: 0.5rem !important;
}

.gap-3 {
    gap: 1rem !important;
}

.gap-4 {
    gap: 1.5rem !important;
}

.gap-5 {
    gap: 3rem !important;
}