//## Header / Banner
.banner-footer, .banner-header 
{
	display: block; position: relative;
	margin: 0; padding: 0;
}


.banner-box.press {
	margin: 0; padding: 10px 0;
}

.banner-box.responsive-hero {
	padding: 10px;
	& > .corset, & > .container {
		padding-top: 20px; padding-bottom: 20px;
		&.compact { padding-top: 0; padding-bottom: 0; }
	}
	h1.loud {
		text-align: center;
		color: #fff;
		padding: 0;
		font-size: 50px;
		line-height: 60px;
		text-shadow: 0 1px 1px #000;
	}
	p.loud {
		font-size: 28px;
		font-weight: 400;
		text-shadow: 0 0 1px #fff, 0 0 7px #fff;
	}
	&.berlin {
		background-color: rgba(255,255,255,.50);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		background-image: image-url('magic/bgs/hdr_landsberger.jpg');
	}
	&.fixed-bg { background-attachment:fixed; }
	
	.banner-footer { 
		padding: 10px 0;
		background-color: rgba(255,255,255,.30);
		z-index: 15; 
	}
	.banner-header { 
		padding: 10px 0;
		background-color: rgba(255,255,255,.30);
		z-index: 15;
	}
	
	img { max-width: 100%; }
}


// more than 768px
@include responsiveStep-sm {
	.banner-box.responsive-hero {
		.layout-table > .cell {
			&.postits { width: 40%; }
			&.ipad { width: 40%; }
			&.coffee { width: 20%; }
		}
		.banner-footer { 
			position: absolute; 
			bottom: 0; left: 0; right: 0;
		}
		.banner-header { 
			position: absolute; 
			top: 0; left: 0; right: 0;
		}
		&.with-footer { padding-bottom: 100px !important; }
		&.with-header { padding-top: 100px !important; }
	}
}