.filterBox{
	@extend %clearfix;
	margin-bottom: 16px;
	@include float-span(4);

	@include breakpoint($desktop-s){
		@include float-span(4);
	}

	.topleft{
		&:before{
			background-color: $viola;
		}
	}

	&.sliding{
		.topleft{
			cursor: pointer;
			&:before{
				@extend %pseudoIconElement;
				@extend .icon-arrow;
				color: #FFF;
				text-align: center;
				font-size: 150%;
				line-height: 32px;
			}
		}

		ul.ce-menu{
			display: none;
		}
	}

	.inner{
		position: relative;
		overflow: hidden;
		@include box-sizing('border-box');
		@include box-shadow($std-box-shadow);

		ul{
			list-style: none;
			margin: 64px 16px 16px 16px;

			li{
				margin: 0 0 16px;
				padding-left: 0;

				@include breakpoint($mobile-m){
					width: 50%;
					float: left;
				}

				@include breakpoint($desktop-s){
					width: 33%;
					float: left;
				}

				&:before{
					content: normal;
				}
			}
			/* menu filteoptik onecol */
			&.ce-menu-12 {
				li {
					width:100%;
					clear:both;
					display:block;
				}
			}
		}
	}

	a{
		display: inline-block;
		padding: 4px 0;
		color: $body-font-color;
		font-weight: bold;
		@include transition-property(all);
		@include transition-duration(0.5s);

		&.active, &:hover{
			color: $viola;
		}
	}
}

.professionalgroups{
	@extend %clearfix;
	clear: both;
	@extend .grid-4cols;
}

.group_inner{
	position: relative;
	overflow: hidden;
	@include box-shadow($std-box-shadow);

	.header{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 16px;
		background: rgba($aqua,0.8);
		color: #FFF;
		@include box-sizing('border-box');

		h2{
			margin-bottom: 8px;
		}

		p.subline{
			margin: 0;
		}
	}

	img{
		display: block;
		width: 100%;
	}
}