/*

.teasers
	.teasers-group
		.teaser.teaser-full/half/half-centered.teaser-?col
			.teaser-headline, .teaser-content
				.teaser-row
					.teaser-col.teaser-col-hover

*/

.teasers {
	display: block;
}

.teaser-group {
	display: block;
	margin-left: -10px;
	margin-right: -10px;
}
/* clearfix */
.teaser-group:before,
.teaser-group:after {
	content: " "; /* 1 */
	display: table; /* 2 */
}

.teaser-group:after {
	clear: both;
}

.teaser {
	display: block;
	float: left;
	padding: 0 10px;
	margin-bottom: 40px;
}
.teaser.teaser-full { width: 100%; }
.teaser.teaser-half { width: 50%; }
.teaser.teaser-half-centered { 
	width: 50%; 
	margin-left: 25%; 
}

.teaser > h3 {
	display: block;
	overflow: hidden;
	margin: 0 0 10px 0;
	
	background-color: transparent;
	
	color: #333333;
	font-size: 23px;
	font-weight: bold;
	line-height: normal;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.teaser-content {
	display: block;
	padding: 0;
	margin: 0;
}
	
	.teaser-row {
		display: block;
	}
	.teaser-row:after {
		display: table;
		content: " ";
		clear: both;
	}

		.teaser-col {
			position: relative;
			float: left;
			padding: 20px 0;
			height: 160px;
			background-color: #FFFFFF;
			
			text-decoration: none;
			text-align: center;
			font-weight: bold;
			padding: 20px 0;
			display: block;
			border-bottom: 0 solid #ffffff;
			
			-webkit-transition: border-bottom-width 0.3s, border-color 0.3s;
			transition: border-bottom-width 0.3s, border-color 0.3s;
		}
		.teaser-col:hover {
			text-decoration: none;
			cursor: pointer;
		}
		.teaser-col.teaser-col-hover:hover {
			padding-bottom: 10px;
			border-bottom-width: 10px;
			border-color: #ff8d00;
		}
		
		.teaser-col:first-child { 
			border-top-left-radius: 5px;
			border-bottom-left-radius: 5px; 
		}
		.teaser-col:last-child {
			border-top-right-radius: 5px;
			border-bottom-right-radius: 5px; 
		}
			
			.teaser-col span {
				display: block;
				height: 120px;
				border-right: 1px solid #e3e3e3;
			}
			.teaser-col:last-child span {
				border: 0 none;
			}

.teaser.teaser-5cols .teaser-col { width: 20%; }
.teaser.teaser-4cols .teaser-col { width: 25%; }
.teaser.teaser-3cols .teaser-col { width: 33.3333333%; }
.teaser.teaser-2cols .teaser-col { width: 50%; }
.teaser.teaser-1cols .teaser-col { width: 100%; }

.teaser-col.teaser-col-1-5 { width: 20% !important; }
.teaser-col.teaser-col-1-4 { width: 25% !important; }
.teaser-col.teaser-col-1-3 { width: 33% !important; }
.teaser-col.teaser-col-1-2 { width: 50% !important; }
.teaser-col.teaser-col-1-1 { width: 100% !important; }


.teaser.teaser-full.teaser-1cols .teaser-col.teaser-col-hover:last-of-type:after { right: -21px; }
.teaser.teaser-full.teaser-2cols .teaser-col.teaser-col-hover:last-of-type:after { right: -21px; }
.teaser.teaser-full.teaser-3cols .teaser-col.teaser-col-hover:last-of-type:after { right: -30px; }
.teaser.teaser-full.teaser-4cols .teaser-col.teaser-col-hover:last-of-type:after { right: -21px; }
.teaser.teaser-full.teaser-5cols .teaser-col.teaser-col-hover:last-of-type:after { right: -22px; }

.teaser.teaser-half.teaser-1cols .teaser-col.teaser-col-hover:last-of-type:after { right: -21px; }
.teaser.teaser-half.teaser-2cols .teaser-col.teaser-col-hover:last-of-type:after { right: -21px; }
.teaser.teaser-half.teaser-3cols .teaser-col.teaser-col-hover:last-of-type:after { right: -26px; }
.teaser.teaser-half.teaser-4cols .teaser-col.teaser-col-hover:last-of-type:after { right: -21px; }
.teaser.teaser-half.teaser-5cols .teaser-col.teaser-col-hover:last-of-type:after { right: -21px; }



/* ... */
.teaser-item { }

.centered .teaser-col div {
	width: 60px;
	height: 60px;
	
	background-image: url("/i/public/icons_sprite.png");
	background-repeat: no-repeat;
	margin: 15px auto 10px;
}

.centered .teaser-col a {
	text-align: center;
	display: block;
	margin: 0 auto;
	font-weight: bold;
}

/* Slideshow / JQuery Scrollable */
.slideshow.teaser-half .scrollable { width: 460px; } 
.slideshow.teaser-full .scrollable { width: 910px; }

.slideshow.teaser-half:first-of-type { padding-right: 10px; }
.slideshow.teaser-half:last-of-type { padding-left: 0px; }

.slideshow .teaser-content {
	border: 0;
	position: relative;
	padding: 0;
	background-color: inherit;
	height: 160px;
}

.slideshow .scrollable .items {
	/*
	position: absolute;
	width: 2000em;
	*/
}

.slideshow .scrollable {
	overflow: hidden;
}

.centered .teaser-col div {
	background-image: url("/i/public/icons_sprite.png");
	background-repeat: no-repeat;
}

.teaser-image-next:hover .teaser-image-hover:after {
	background-color: #000;
}