/*
	HTML5 Reset :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:
	
	Eric Meyer					:: http://ericmeyer.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com
	
-------------------------------------------------------------------------------*/

/* Let's default this puppy out
-------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}									

article, aside, figure, footer, header, hgroup, nav, section {display: block;}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {max-width: 100%; height: auto;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted. 
	don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, 
blockquote:after, 
q:before, 
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
	white-space: pre; /* CSS2 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */

table {font-size: inherit; font: 100%;}
 
/* Accessible focus treatment
	people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {outline: none;}

small {font-size: 85%;}

strong, th {font-weight: bold;}

td, td img {vertical-align: top;} 

/* Make sure sup and sub don't screw with your line-heights
	gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label, 
input[type=button], 
input[type=submit], 
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/*
 * 1. Remove default vertical scrollbar in IE6/7/8/9
 * 2. Allow only vertical resizing
 */
textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Apply box sizing to some input elements so percentage width and other measures work together */
input[type=text],
input[type=password],
input[type=email],
input[type=number],
input[type=date],
input[type=time],
input[type=url],
textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}
 
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/* =============================================================================
   Code
   ========================================================================== */
/**
 * Redeclare monospace font family: h5bp.com/j
 */
pre,
code,
kbd,
samp {
  font: 1em Menlo, Monaco, Consolas, "Courier New", monospace;
}
code {
  color: #009933;
}
pre {
  /* Blue stribes to make it look like paper */

  background-color: #fefefe;
  background-image: -moz-linear-gradient(top, #e2f1f7 1px, transparent 1px);
  background-image: -ms-linear-gradient(top, #e2f1f7 1px, transparent 1px);
  background-image: -webkit-linear-gradient(top, #e2f1f7 1px, transparent 1px);
  background-image: -o-linear-gradient(top, #e2f1f7 1px, transparent 1px);
  background-image: linear-gradient(top, #e2f1f7 1px, transparent 1px);
  background-size: 100% 26px;
  box-shadow: inset 0 1px 1px #ffffff, 0 0 15px rgba(204, 204, 204, 0.35);
  border: 1px solid #e0e0e0;
  border-radius: 3px;
  color: #222222;
  font-size: 14px;
  line-height: 26px;
  padding: 26px 25px;
  margin: 0 0 25px;
  position: relative;
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}
pre code {
  background: none;
  color: inherit;
  font: inherit;
}
pre ol.linenums {
  line-height: 26px;
}
/**
 * Line numbering for the Google Prettify script
 */
/* Add to red stribes to make it look like a notebook */
pre[class*="linenums"]:before {
  border: 1px solid #f1e9ea;
  border-width: 0 1px;
  content: "";
  width: 4px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50px;
  z-index: 1;
}
ol.linenums {
  color: #aeaeae;
  margin: 0 0 0 0;
  padding: 0 0 0 24px;
}
ol.linenums li {
  padding-left: 24px;
}
/*  Google Code Prettify */
.pln {
  color: #000;
}
.str {
  color: #008800;
}
.kwd {
  color: #000088;
}
.com {
  color: #880000;
}
.typ {
  color: #660066;
}
.lit {
  color: #006666;
}
.pun,
.opn,
.clo {
  color: #666600;
}
pre .tag {
  color: #000088;
}
.atn {
  color: #660066;
}
.atv {
  color: #008800;
}
.dec,
.var {
  color: #660066;
}
.fun {
  color: #ff0000;
}

/**
 * Simple grid system
 * @credits Twitter Bootstrap
 */
.row {
  width: 100%;
  *zoom: 1;
}
.row:before,
.row:after {
  display: table;
  content: "";
}
.row:after {
  clear: both;
}
.row [class*="span"] {
  float: left;
  margin-left: 2.127659574%;
  *margin-left: 2.0744680846382977%;
}
.row [class*="span"]:first-child {
  margin-left: 0;
}
.row .span12 {
  width: 99.99999998999999%;
  *width: 99.94680850063828%;
}
.row .span11 {
  width: 91.489361693%;
  *width: 91.4361702036383%;
}
.row .span10 {
  width: 82.97872339599999%;
  *width: 82.92553190663828%;
}
.row .span9 {
  width: 74.468085099%;
  *width: 74.4148936096383%;
}
.row .span8 {
  width: 65.95744680199999%;
  *width: 65.90425531263828%;
}
.row .span7 {
  width: 57.446808505%;
  *width: 57.3936170156383%;
}
.row .span6 {
  width: 48.93617020799999%;
  *width: 48.88297871863829%;
}
.row .span5 {
  width: 40.425531911%;
  *width: 40.3723404216383%;
}
.row .span4 {
  width: 31.914893614%;
  *width: 31.8617021246383%;
}
.row .span3 {
  width: 23.404255317%;
  *width: 23.3510638276383%;
}
.row .span2 {
  width: 14.89361702%;
  *width: 14.8404255306383%;
}
.row .span1 {
  width: 6.382978723%;
  *width: 6.329787233638298%;
}

/* =============================================================================
   Alert messages, taken from http://jayj.dk/a-free-html5-and-css3-theme
   ========================================================================== */
.alert {
  background-color: #ededed;
  border-left: 5px solid #d9d9d9;
  border-radius: 0 5px 5px 0;
  color: #222222;
  padding: 10px 14px;
  margin-bottom: 25px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.alert h4 {
  border-bottom: 0;
  color: inherit;
  padding-bottom: 0;
  margin: 10px 0;
}
.alert p + p {
  margin-bottom: 5px;
}
.alert-warning {
  background-color: #fef9c7;
  border-color: #fcdd4a;
  color: #3b3601;
}
.alert-success {
  background-color: #dff0d8;
  border-color: #54b646;
  color: #0d370d;
}
.alert-danger,
.alert-error {
  background-color: #f2dede;
  border-color: #ce838f;
  color: #7a0b0a;
}
.alert-info {
  background-color: #d9edf7;
  border-color: #049cdb;
  color: #0c3346;
}

/* =============================================================================
   Lists: http://jayj.dk/a-free-html5-and-css3-theme/
   ========================================================================== */
ul,
ol {
  line-height: 1.5;
  margin: 1em 0;
  padding: 0 0 0 1.25em;
}
ul {
  list-style: square;
}
ol {
  list-style-type: decimal;
}
ol ol {
  list-style: upper-roman;
}
ol ol ol {
  list-style: lower-roman;
}
ol ol ol ol {
  list-style: upper-alpha;
}
ol ol ol ol ol {
  list-style: lower-alpha;
}
ul ul,
ol ol,
ul ol,
ol ul {
  margin: 10px 0;
}











/* ==|== primary styles =====================================================
   Author: sh@fettundrosig.com
   ========================================================================== */

/* Set your font stuff for the document here */
html, body {
	width: 100vw;
}

body {
	min-height: 100vh;
}

body {
	font-family: 'Roboto Condensed', sans-serif;
	background-image: none;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: white;
}

header h1 a {
	background-image: url(/upload/broermann-logo.png);
	width: 370px;
	height: 170px;
}

header a.nav-icon {
	display: none;
}

header nav ul#menu {
	display: block;
}

ul.main-navigation,
ul.main-navigation ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

ul.main-navigation a {
	text-transform: uppercase;
	text-decoration: none;
	display: block;
	color: rgb(102, 51, 102);
	font-weight: 700;
	-o-transition: all .2s ease-in;
	-moz-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}

ul.main-navigation a:hover,
body.idea li.domain-34 > a,
body.foundation li.domain-35 > a,
body.koenigstein li.domain-36 > a,
body.damme li.domain-37 > a,
body.events li.domain-38 > a,
body.event li.domain-38 > a,
body.news li.domain-39 > a,
	body.news-archive li.domain-44 > a,
body.downloads li.domain-40 > a,
body.contact li.domain-41 > a,
body.partners li.domain-42 > a,
body.imprint li.domain-43 > a {
	color: rgb(236, 102, 59);
}

.container {
	float: left;
}

article h1 {
	font-size: 2em;
	color: rgb(236, 102, 59);
	font-weight: 400;
	margin-bottom: 0.5em;
}

article p {
	margin-bottom: 1em;
	font-weight: 300;
}

article ul {
	list-style: none;
	padding: 0;
	font-weight: 300;
}

article ul li {
	text-transform: uppercase;
	color: rgb(0, 153, 102);
}

article a {
	text-decoration: none;
	border-bottom: 1px solid black;
}

article a.project-link {
	border-bottom: none;
}

.news-item {
	border-bottom: 1px solid black;
}

article .news-item:last-child {
	border-bottom: none;
}

.news-item .pubdate {
	display: none;
}

/**
 * Animated images on the splash screen.
 */
.superhero {
	position: relative;
	width: 100%;
}

.superhero ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.superhero ul.sprites img {
	display: block;
}

.superhero img.sprite-01 {
	animation: 1s splashsprite-01 ease-in;
	position: absolute;
	top: -112px;
	left: 0;
	width: 600px;
	z-index: 1;
}
@keyframes splashsprite-01 {
	0% {
		opacity: 0;
		width: 0px;
	}
	70% {
		width: 620px;
		opacity: .6;
	}
	100% {
		width: 600px;
		opacity: 1;
	}
}

.superhero img.sprite-02 {
	animation: 1s splashsprite-02 ease-in;
	animation-fill-mode: forwards;
	animation-delay: 1s;
	position: absolute;
	top: -42px;
	left: 316px;
	z-index: 2;
	width: 400px;
	opacity: 0;

}
@keyframes splashsprite-02 {
	0% {
		opacity: 0;
		width: 0px;
	}
	70% {
		width: 420px;
		opacity: .6;
	}
	100% {
		width: 400px;
		opacity: 1;
	}
}

.superhero img.sprite-03 {
	animation: 1s splashsprite-03 ease-in;
	animation-fill-mode: forwards;
	animation-delay: 2s;
	position: absolute;
	top: 142px;
	left: 301px;
	width: 300px;
	z-index: 3;
	opacity: 0;
}
@keyframes splashsprite-03 {
	0% {
		opacity: 0;
		width: 0px;
	}
	70% {
		width: 420px;
		opacity: .6;
	}
	100% {
		width: 400px;
		opacity: 1;
	}
}

.superhero img.sprite-04 {
	animation: 1s splashsprite-04 ease-in;
	animation-fill-mode: forwards;
	animation-delay: 3s;
	position: absolute;
	top: 277px;
	left: 270px;
	width: 200px;
	z-index: 4;
	opacity: 0;
}
@keyframes splashsprite-04 {
	0% {
		opacity: 0;
		width: 0px;
	}
	70% {
		width: 320px;
		opacity: .6;
	}
	100% {
		width: 240px;
		opacity: 1;
	}
}
/**
 * Navigation on splash screen.
 */
.superhero ul.topics a {
	-o-transition: opacity .85s ease-in,
				left 1.25s ease-in;
	-moz-transition: opacity .85s ease-in,
				left 1.25s ease-in;
	-webkit-transition: opacity .85s ease-in,
				left 1.25s ease-in;
	transition: opacity .85s ease-in,
				left 1.25s ease-in;
	-o-transition-delay: 4s; /* Safari */
	-moz-transition-delay: 4s; /* Safari */
	-webkit-transition-delay: 4s; /* Safari */
    transition-delay: 4s;
	display: block;
	opacity: 0;
}

.superhero ul.topics a.go {
	opacity: 1;
}

.superhero ul.topics a.go:hover {
	-o-transition-delay: 0s;
	-moz-transition-delay: 0s;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	opacity: 0.66;
}

.superhero a.nav-01 {
	background-image: url(/upload/broermann-intro-idee.png);
	width: 96px;
	height: 44px;
	position: absolute;
	top: 6px;
	left: 118px;

	z-index: 5;
}
.superhero a.nav-01.go {
	left: 138px;
}

.superhero a.nav-02 {
	background-image: url(/upload/broermann-intro-broermann.png);
	width: 213px;
	height: 79px;
	position: absolute;
	top: 426px;
	left: 520px;

	z-index: 5;
}
.superhero a.nav-02.go {
	left: 490px;
}

.superhero a.nav-03 {
	background-image: url(/upload/broermann-intro-koenigstein.png);
	width: 234px;
	height: 79px;
	position: absolute;
	top: 213px;
	left: -50px;

	z-index: 5;
}
.superhero a.nav-03.go {
	left: -24px;
}

.superhero a.nav-04 {
	background-image: url(/upload/broermann-intro-damme.png);
	width: 162px;
	height: 62px;
	position: absolute;
	top: 63px;
	left: 580px;

	z-index: 5;
}
.superhero a.nav-04.go {
	left: 421px;
}

.superhero a.nav-05 {
	background-image: url(/upload/broermann-intro-events.png);
	width: 149px;
	height: 43px;
	position: absolute;
	top: 269px;
	left: 529px;

	z-index: 5;
}
.superhero a.nav-05.go {
	left: 491px;
}

.superhero a.nav-06 {
	background-image: url(/upload/broermann-intro-news.png);
	width: 118px;
	height: 43px;
	position: absolute;
	top: 346px;
	left: -66px;

	z-index: 5;
}
.superhero a.nav-06.go {
	left: -23px;
}

.teaser,
article .news-item h2,
article h2.project-teaser,
article .partner h2,
article .download h2 {
	text-transform: uppercase;
	color: rgb(0, 153, 102);
	margin: 1em 0;
}

article .news-item h2,
article h2.project-teaser,
article .partner h2,
article .download h2 {
	margin-bottom: 0;
}

article h2.project-teaser,
article .partner h2,
article .download h2 {
	margin-top: 0;
	font-weight: 300;
}

article .news-item h2 a {
	color: rgb(0, 153, 102);
	border-bottom: none;
}

.box {
	padding: 1em 0;
}

.box.green {
	background-color: rgb(229, 244, 239);
	padding: 10px;
}

.unbox {
}

.unbox.green {
	color: green;
}

#galwrapper {
	width: 100%;
}

#project-gal {
	/*display: none;*/
}

/**
 * Restyle some galleryView stuff
 */
.gv_galleryWrap {
	background: transparent;
}

/**
 * Isotope and filter buttons
 */
.item,
.partner {
	width: 33.333%;
	margin-bottom: 1em;
	height: 160px;
}

.item img {
	width: 120px;
	height: 80px;
}

.download {
	width: 50%;
	float: left;
}

.partner {
	float: left;
	padding-bottom: 4em;
	/*height: auto;*/
}

article .partner h2 {
	font-size: 90%;
}

.divider {
	float: left;
	width: 100%;
	margin-top: 2em;
}

article .partner a {
	border-bottom: none;
}

.partner p {
	margin-bottom: 0;
}

.item h2,
.partner h2,
.download h2 {
	padding-right: 0.5em;
}

span.prefilter {
	font-size: 0.8em;
}

#filters {
	padding: 0.5em 0;
	display: inline-block;
}
#filters button {
	border: none;
	background: none;
	color: rgb(102, 51, 102);
	font-size: 0.8em;
}

#filters button:hover,
#filters button.active {
	color: rgb(236, 102, 59);
}


/* using local fonts? make sure to read up on Paul Irish's 
	Bulletproof @font-face syntax: http://mky.be/font-face/bulletproof/ */

/* we like off-black for text */
body, select, input, textarea {color: #222;}

a {color: #333;} /*#03f*/
a:hover {color: #666;} /*#69f*/

/* Custom text-selection colors (remove any text shadows: twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;} 

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #fcd700;} 

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}


/* Rounded gravatar: A background-image tag in html */
.circular {
	width: 72px;
	height: 72px;
	border-radius: 36px;
	-webkit-border-radius: 36px;
	-moz-border-radius: 36px;
	background: url(/img/glyphicons/glyphicons_003_user.png) center center;
	background-repeat: no-repeat;
	background-color: white; /* stanze */
    -webkit-box-shadow: 0px 1em 1em rgba(0, 0, 0, .66);
}

.circular .circular-48 {
	width: 48px;
	height: 48px;
	border-radius: 24px;
	-webkit-border-radius: 24px;
	-moz-border-radius: 24px;    
}

.circular .circular-32 {
	width: 32px;
	height: 32px;
	border-radius: 16px;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;    
}

.circular .circular-16 {
	width: 16px;
	height: 16px;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;    
}

.no-shadow {
    -webkit-box-shadow: none;
}

/* Mix, rip and burn some of the above together */

/* within a dialog a errornous input field will be erdbeer colored */
.panel div.row.error label,
.panel label.error {
    color: #7a0b0a;
}

.validation-errors {
    font-size: small;
}













/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }


/* Print styles!
-------------------------------------------------------------------------------*/
@media print {



}


/* Media queries!
-------------------------------------------------------------------------------*/

/* Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-width: 640px) {

	html,
	body {
		width: 100vw;
	}

	header,
	.wrapper,
	.container,
	article {
		width: 100%;
		height: 100%;
	}

	article {
		width: 96%;
		padding: 0 2% 0 2%;
	}

	article img {
		max-width: 100%;
	}

	.container {
		float: none;
	}

	.superhero {
		margin-top: 170px;
	}

	body.index header h1 a.ir {
		display: none;
	}

	header a.nav-icon {
		position: absolute;
		top: 0;
		right: 0;
		display: block;
		background-image: url(/upload/broermann-icon-brick.png);
		background-size: 20px 16px;
		background-position: center center;
		width: 48px;
		height: 48px;
		z-index: 10000;
	}

	header a.nav-icon.active {
		background-image: url(/upload/broermann-icon-brick-active.png);
	}
	
	header nav ul#menu {
		display: none;
	}

	ul.main-navigation {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 10000px;
		padding-top: 42px;
		background-color: rgba(102, 51, 102, .8);
		display: block;
		list-style: none;
		z-index: 1000;
	}

	ul.main-navigation a {
		color: white;
		font-size: 1.5em;
		font-weight: 700;
		padding: 0 1em 0 1em;
	}

	.item,
	.partner {
		width: 100%;
		margin-bottom: 1em;
		height: auto;
	}

	.item img {
		width: 100%;
		height: auto;
	}

	.download {
		width: 49%;
		float: left;
	}

	.prefilter {
		display: none;
	}


	/**
	 * Animation on small screens
	 */
	.superhero img.sprite-01 {
		top: -112px;
		left: -40px;
		width: 300px;
	}
	@keyframes splashsprite-01 {
		0% {
			opacity: 0;
			width: 0px;
		}
		70% {
			width: 320px;
			opacity: .6;
		}
		100% {
			width: 300px;
			opacity: 1;
		}
	}

	.superhero img.sprite-02 {
		top: -82px;
		left: 116px;
		width: 240px;

	}
	@keyframes splashsprite-02 {
		0% {
			opacity: 0;
			width: 0px;
		}
		70% {
			width: 260px;
			opacity: .6;
		}
		100% {
			width: 240px;
			opacity: 1;
		}
	}

	.superhero img.sprite-03 {
		top: 42px;
		left: 100px;
		width: 200px;
	}
	@keyframes splashsprite-03 {
		0% {
			opacity: 0;
			width: 0px;
		}
		70% {
			width: 220px;
			opacity: .6;
		}
		100% {
			width: 200px;
			opacity: 1;
		}
	}

	.superhero img.sprite-04 {
		top: 80px;
		left: 90px;
		width: 200px;
	}
	@keyframes splashsprite-04 {
		0% {
			opacity: 0;
			width: 0px;
		}
		70% {
			width: 220px;
			opacity: .6;
		}
		100% {
			width: 200px;
			opacity: 1;
		}
	}
	/**
	 * Navigation on splash screen.
	 */
	.superhero ul.topics a {
		-o-transition: opacity .85s ease-in,
					left 1.25s ease-in;
		-moz-transition: opacity .85s ease-in,
					left 1.25s ease-in;
		-webkit-transition: opacity .85s ease-in,
					left 1.25s ease-in;
		transition: opacity .85s ease-in,
					left 1.25s ease-in;
		-o-transition-delay: 4s; /* Safari */
		-moz-transition-delay: 4s; /* Safari */
		-webkit-transition-delay: 4s; /* Safari */
	    transition-delay: 4s;
		display: block;
		opacity: 0;
	}

	.superhero ul.topics a.go {
		opacity: 1;
		display: none;
	}

	.superhero ul.topics a.go:hover {
		-o-transition-delay: 0s;
		-moz-transition-delay: 0s;
		-webkit-transition-delay: 0s;
		transition-delay: 0s;
		opacity: 0.66;
	}

	.superhero a.nav-01 {
		background-image: url(/upload/broermann-intro-idee.png);
		width: 96px;
		height: 44px;
		position: absolute;
		top: -80px;
		left: 10px;

		z-index: 5;
	}
	.superhero a.nav-01.go {
		left: 10px;
	}

	.superhero a.nav-02 {
		background-image: url(/upload/broermann-intro-broermann.png);
		width: 213px;
		height: 79px;
		position: absolute;
		top: 426px;
		left: 520px;

		z-index: 5;
	}
	.superhero a.nav-02.go {
		left: 490px;
	}

	.superhero a.nav-03 {
		background-image: url(/upload/broermann-intro-koenigstein.png);
		width: 234px;
		height: 79px;
		position: absolute;
		top: 213px;
		left: -50px;

		z-index: 5;
	}
	.superhero a.nav-03.go {
		left: -24px;
	}

	.superhero a.nav-04 {
		background-image: url(/upload/broermann-intro-damme.png);
		width: 162px;
		height: 62px;
		position: absolute;
		top: 63px;
		left: 580px;

		z-index: 5;
	}
	.superhero a.nav-04.go {
		left: 421px;
	}

	.superhero a.nav-05 {
		background-image: url(/upload/broermann-intro-events.png);
		width: 149px;
		height: 43px;
		position: absolute;
		top: 269px;
		left: 529px;

		z-index: 5;
	}
	.superhero a.nav-05.go {
		left: 491px;
	}

	.superhero a.nav-06 {
		background-image: url(/upload/broermann-intro-news.png);
		width: 118px;
		height: 43px;
		position: absolute;
		top: 346px;
		left: -66px;

		z-index: 5;
	}
	.superhero a.nav-06.go {
		left: -23px;
	}
		
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {
	header h1 a {
		width: 320px;
		height: 170px;
		background-size: 310px 147px;
	}
}

@media screen and (min-width: 641px) {
	.wrapper {
		width: 920px;
		margin: 0 auto;
	}

	.container {
		width: 100%;
	}

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

	ul.main-navigation {
		background-color: white;
	}

	ul.main-navigation li.domain-39 ul {
		display: none;
	}

	body.news ul.main-navigation li.domain-39 ul,
	body.news-archive ul.main-navigation li.domain-39 ul {
		display: block;
		padding-left: 1em;
	}

	header ul#menu {
		float: left;
		width: 190px;
		margin-right: 10px;
		margin-top: 14px;
		padding: 0 10px 10px 10px;
	}

	header ul#menu:before {
		content: ' ';
		display: block;
		width: 210px;
		height: 14px;
		/*
		background-image: url(/upload/broermann-box-navi-links.png), url(/upload/broermann-box-navi-rechts.png);
	    background-position: left top, right top;
		*/
		background-image: url(/upload/broermann-box-navi.png);
		background-position: left top;
    	background-repeat: no-repeat;
		background-color: transparent;
		margin-left: -10px;
		margin-top: -14px;
	}

	article {
		background-color: white;
		float: left;
		width: 660px;
		margin-top: 33px;
		/*
		border-color: white;
		border-style: solid;
		border-left-width: 10px;
		border-right-width: 10px;
		border-bottom-width: 20px;
		*/
		padding: 0 20px 20px 20px;
	}

	article:before {
		content: ' ';
		display: block;
		width: 700px;
		height: 33px;
		/*
		background-image: url(/upload/broermann-box-content-links.png), url(/upload/broermann-box-content-rechts.png);
	    background-position: left top, right top;
		*/
		background-image: url(/upload/broermann-box-content.png);
		background-position: left top;
    	background-repeat: no-repeat;
		background-color: transparent;
		margin-left: -20px;
		margin-top: -33px;
	}

	article .hero {
		width: 100%;
		height: auto;
	}

	body.idea {
		background-image: url(/upload/broermann-back-idee.jpg);
	}
	
	body.foundation,
	body.criterias {
		background-image: url(/upload/broermann-back-broermann.jpg);
	}
	
	body.koenigstein {
		background-image: url(/upload/broermann-back-koenigstein.jpg);
	}
	
	body.damme {
		background-image: url(/upload/broermann-back-damme.jpg);
	}
	
	body.events,
	body.event {
		background-image: url(/upload/broermann-back-events.jpg);
	}
	
	body.news,
	body.news-archive {
		background-image: url(/upload/broermann-back-news.jpg);
	}
	
	body.downloads {
		background-image: url(/upload/broermann-back-downloads.jpg);
	}
	
	body.contact {
		background-image: url(/upload/broermann-back-kontakt.jpg);
	}
	
	body.partners {
		background-image: url(/upload/broermann-back-partner.jpg);
	}
	
	body.imprint {
		background-image: url(/upload/broermann-back-impressum.jpg);
	}
	
	body.nutzungsbedingungen {
		background-image: url(/upload/broermann-back-impressum.jpg);
	}
}

@media all and (orientation: portrait) {
	
}

@media all and (orientation: landscape) {
	
}