/* -----------------------------------------
   CSS RESETS
----------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { height: 100%; }
body { font-size: 100%; line-height: 1.5; font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; } 

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

/* css-clearfix */
.clearfix:before, .clearfix:after { content: ""; display: table; }  
.clearfix:after { clear: both; }  
   
html[xmlns] .clearfix { display: block; }  
* html .clearfix { height: 1%; }  


/* -----------------------------------------
   Styles
----------------------------------------- */

html { 
  background: url(bg_farbenbund.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

a, a:hover {
  color: #303030;
  text-decoration: none;
}

h1 {
  color: #AB0953;
  font-style: italic;
  text-align: center;
  margin: 1em 0 0.5em;
}

h2 {
	color: #AB0953;
	font-style: italic;
	margin: 1em 0 0.1em;
	font-size: 27px;
}

h3 {
	color: #AB0953;
	font-style: italic;
	margin: 1em 0 0.1em;
	font-size: 22px;
}

p {
  color: #303030;
  font-weight: 400;
}

p.title {
  color: #AB0953;
  font-style: italic;
  margin: 1em 0 0.5em;
}

#main p:nth-child(odd) {
  margin: 0.5em 0 0;
}

#wrapper {
  position: relative;
  width: 80%;
  max-width: 1000px;
  margin: 4em auto;
}

#header {
  width: 49%;
  float: left;
  margin: 0 1% 0 0;
}

#header img {
  width: 100%;
}

.farbenbund .typo {
  fill:#AB0953;
}

#main {
  width: 49%;
  float: right;
  margin: 0 0 0 1%;
}

.box {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 1em 3em 3em;
}

#header .box:nth-of-type(2) {
  margin: 1.25em 0 0;
}

.box h2 {
  color: #AB0953;
}

.bg {
  position: absolute;  
  top: 0; 
  bottom: 0;
  left: 0;  
  width: 100%;  
  background: #FFF;  
  opacity: 0.85;
  -moz-opacity: 0.8;
  filter:alpha(opacity=80);
  z-index: -1;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}

#new {
  position: fixed;
  top: 0;
  left: 0;
  background: #C9D630;
  z-index: 100;
  font-size: 1  em;
  font-style: italic;
  color: #fff;
  padding: 1em 4em;
  -moz-box-shadow: 0px 15px 15px #303030;
  -webkit-box-shadow: 0px 15px 15px #303030;
  box-shadow: 0px 15px 15px #303030;
  transform: rotate(325deg) ;
  -webkit-transform: rotate(325deg) ;
  -moz-transform: rotate(325deg) ;
  -o-transform: rotate(325deg) ;
  -ms-transform: rotate(325deg) ;
  -moz-transform-origin: 50% 220%;
  -ms-transform-origin: 50% 220%;
  -o-transform-origin: 50% 220%;
  -webkit-transform-origin: 50% 220%;
  transform-origin: 50% 220%;
}

#new span {
  display: block;
  width: 55%;
  margin-left: 2em;
  text-align: center;
}


/**********************************/
/*        MEDIA QUERIES           */
/**********************************/

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width: 320px) and (max-width: 480px) {
#header, #main {
  float: left;
  width: 90%;
  margin: 4em auto;
}
#main {
  margin: 1.25em 0 0;
}
}

/* Smartphones (portrait) ----------- */
@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait) {

}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: landscape) {

}

/* iPhone 4 (portrait and landscape) ----------- */
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {

}

/* iPhone 5 (portrait and landscape) ----------- */
@media only screen and (min-width: 320px) and (max-width: 568px) {

}

/* Tablets (portrait and landscape) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {

}