.barTopic {}
.barTopic ul {
	padding: 0px; /* Abstand für alle Browser vereinheitlichen */
	margin: 0px; /* Abstand für alle Browser vereinheitlichen */
	list-style: none;
	
	display: table;
	width: 100%;
}
.barTopic li {
	display: table-cell;
	vertical-align: top;
	border: 3px solid #ffffff;
	position: relative;
}
.barTopic li.selected {
	width: 16%;
}
.barTopic.noselection li {
	/* width: 12.5%; */
}
.barTopic li div {
	display: inline-block;
	position: relative;
	width: 100%;
	background-color: #395C8B;
}
.barTopic li div:before {
    content: "";
    display: block;
    padding-top: 100%; /* 1:1 aspect ratio */
}
.barTopic div:after {
	position: absolute;
	left: 0px;
	top: 0px;
	content: "";
	width: 100%;
	height: 100%;
	background-image: url(../../images/site/bkg_corner.svg);
	background-repeat: no-repeat;
	background-position: right top;
	background-size: contain;
	opacity: 0.3;
	z-index: 0;
}
.barTopic li div:hover {
	opacity: 0.5;
}

/* style default a tags */ 
.barTopic a {
	padding: 0px;
	/* font-size: 12px; ->layout_1.css */
	font-weight: 400;
	text-decoration: none; 
	color: #ffffff;

	display: block;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 1
}
.barTopic span {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	position: absolute;
	bottom: 0px;
	width: 100%;
	text-align: right;
	text-transform: uppercase;
	font-weight: 700;
	padding: 0px 5px 5px 5px;
}
.barTopic .selected a, .barTopic .selected a:hover, .barTopic .selected a:active, .barTopic .breadcrumb a {
	color: #ffffff;
}
.barTopic a:hover {
	color: #ffffff;
	opacity: 0.5;
}


.barTopic .li1 div {
	background-color: #2496A9;
}
.barTopic .li2 div {
	background-color: #5D9545;
}
.barTopic .li3 div {
	background-color: #FF7F00;
}
.barTopic .li4 div {
	background-color: #8C53A4;
}
.barTopic .li5 div {
	background-color: #E46196;
}
.barTopic .li6 div {
	background-color: #2455A9;
}
.barTopic .li7 div {
	background-color: #2477A9;
}
.barTopic .li8 div {
	background-color: #E1B837;
}


/*
--- image styles ----
--- alle styles bei bildern deaktivieren ----
class: "image" = Bild
class: "moimage" = Bild mit Mouseover
*/
.barTopic img, .barTopic .image, .barTopic .moimage, .barTopic .image a, .barTopic .moimage a, .barTopic .image a:hover, .barTopic .moimage a:hover {
	border: 0px;
	margin: 0px;
	padding: 0px;
	background-color: transparent !important;
	background-image: none !important;
}