/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 0;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/*Box-Model-Fix*/


*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }


/*Responsive: Bilder skalieren*/

img {
	width: auto;
	height: auto;
}

/*Klassen + IDs*/

header { width: 100%; padding-left: 26px; padding-right: 26px; padding-top: 26px; left: 0; right: 0; top: 0; margin: auto; position: fixed; z-index: 3; }
article { width: 100%; padding-left: 26px; padding-right: 26px; padding-top: 26px; margin-left: auto; margin-right: auto; margin-top: 119px; }
footer { width: 100%; padding-left: 26px; padding-right: 26px; padding-top: 0; margin-left: auto; margin-right: auto; margin-bottom: 26px; }

.bildmarke { width: 33.333%; padding: 26px; vertical-align: top; float: left; }
.wortmarke { width: 33.333%; padding: 26px; vertical-align: top; float: left; }
.navi { width: 33.333%; padding: 26px; vertical-align: top; float: left; }
.text { width: 33.333%; padding: 26px; vertical-align: top; float: left; }
.bild { width: 66.666%; padding: 26px; vertical-align: top; float: right; }
.thumb { width: 33.333%; padding: 26px; vertical-align: top; float: left; }
.linie { width: 100%; padding: 26px; vertical-align: top; float: left; }
.nextprevious { width: 50%; padding: 26px; vertical-align: top; float: left; }
.contact { width: 16.666%; padding: 26px; vertical-align: top; float: left; }

.bild img { width: 100%; }
.text img { width: 100%; }

#bildmarke-container img { margin-top: 6px; height: 54px; }

figure { position: relative; width: 100%; }
figure img { width: 100%; height: auto; }
figure a { position: absolute; background: rgba(255,255,255,.75); padding: 26px 26px; opacity: 0; height: 100%; width: 100%; }
figure:hover a { opacity: 1; border: none; }

/*Typografie*/

h1 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333333; font-size: 21px; line-height: 33px; }
h2 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333333; font-size: 15px; line-height: 23px; }
h3 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333333; font-size: 45px; line-height: 51px; letter-spacing: 1px; }

a { text-decoration: none; color: #bbbbbb; }
a:hover { color: #333333; text-decoration: none; }
a:active { color: #ff0000; text-decoration: none; }

hr { margin-top: 45px; margin-bottom: 45px; background-color: #333333;/* Farbe für Opera und Firefox */ color: #333333;/* Farbe für Internet Explorer (IE) */ border: 0; height: 2px; }

/*Media Queries*/

@media (max-width: 1750px) {
header { width: 100%; padding-left: 13px; padding-right: 13px; padding-top: 13px; top: 0; position: fixed; z-index: 3; }
article { width: 100%; padding-left: 13px; padding-right: 13px; padding-top: 13px; margin-top: 74px; float: left; }
footer { width: 100%; padding-left: 13px; padding-right: 13px; padding-top: 0; margin-bottom: 13px; float: left; }

.bildmarke { width: 33.333%; padding: 13px; vertical-align: top; float: left; }
.wortmarke { width: 33.333%; padding: 13px; vertical-align: top; float: left; }
.navi { width: 33.333%; padding: 13px; vertical-align: top; float: left; }
.text { width: 33.333%; padding: 13px; vertical-align: top; float: left; }
.bild { width: 66.666%; padding: 13px; vertical-align: top; float: right; }
.thumb { width: 33.333%; padding: 13px; vertical-align: top; float: left; }
.linie { width: 100%; padding: 13px; vertical-align: top; float: left; }
.nextprevious { width: 50%; padding: 13px; vertical-align: top; float: left; }
.contact { width: 16.666%; padding: 13px; vertical-align: top; float: left; }

.bild img { width: 100%; }
.text img { width: 100%; }
    
#bildmarke-container img { margin-top: 5px; height: 38px; }
    
figure a { position: absolute; background: rgba(255,255,255,.75); padding: 13px 13px; opacity: 0; height: 100%; width: 100%; }
    
h1 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333333; font-size: 16px; line-height: 24px; }
h2 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333333; font-size: 13px; line-height: 19px; }
h3 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333333; font-size: 36px; line-height: 40px; letter-spacing: 1px; }
hr { margin-top: 26px; margin-bottom: 26px; background-color: #333333;/* Farbe für Opera und Firefox */ color: #333333;/* Farbe für Internet Explorer (IE) */ border: 0; height: 2px; }
}

@media (max-width: 950px) and (orientation: landscape) {
header { width: 100%; padding: 13px; top: 0; position: fixed; z-index: 3; }
article { width: 100%; padding-left: 13px; padding-right: 13px; padding-top: 13px; margin-top: 74px; float: left; }
footer { width: 100%; padding-left: 13px; padding-right: 13px; padding-top: 0; margin-bottom: 13px; float: left; }

.bildmarke { width: 33.333%; padding: 13px; vertical-align: top; float: left; }
.wortmarke { width: 33.333%; padding: 13px; vertical-align: top; float: left; }
.navi { width: 33.333%; padding: 13px; vertical-align: top; float: left; }
.text { width: 33.333%; padding: 13px; vertical-align: top; float: left; }
.bild { width: 66.666%; padding: 13px; vertical-align: top; float: right; }
.thumb { width: 33.333%; padding: 13px; vertical-align: top; float: left; }
.linie { width: 100%; padding: 13px; vertical-align: top; float: left; }
.nextprevious { width: 50%; padding: 13px; vertical-align: top; float: left; }
.contact { width: 16.666%; padding: 13px; vertical-align: top; float: left; }

.bild img { width: 100%; }
.text img { width: 100%; }

#bildmarke-container img { margin-top: 5px; height: 38px; }
}

@media (max-width: 950px) {
header { width: 100%; padding: 13px; top: 0; position: fixed; z-index: 3; }
article { width: 100%; padding-left: 13px; padding-right: 13px; padding-top: 13px; margin-top: 74px; float: left; }
footer { width: 100%; padding-left: 13px; padding-right: 13px; padding-top: 0; margin-bottom: 13px; float: left; }

.bildmarke { width: 33.333%; padding: 13px; vertical-align: top; float: left; }
.wortmarke { width: 33.333%; padding: 13px; vertical-align: top; float: left; }
.navi { width: 33.333%; padding: 13px; vertical-align: top; float: left; }
.text { width: 100%; padding: 13px; vertical-align: top; float: left; }
.bild { width: 100%; padding: 13px; vertical-align: top; float: right; }
.thumb { width: 50%; padding: 13px; vertical-align: top; float: left; }
.linie { width: 100%; padding: 13px; vertical-align: top; float: left; }
.nextprevious { width: 50%; padding: 13px; vertical-align: top; float: left; }
.contact { width: 16.666%; padding: 13px; vertical-align: top; float: left; }

.bild img { width: 100%; }
.text img { width: 100%; }

#bildmarke-container img { margin-top: 5px; height: 38px; }
}

@media (max-width: 750px) {
header { width: 100%; padding: 2px 9px 9px 9px; top: 0; position: fixed; z-index: 3; }
article { width: 100%; padding-left: 9px; padding-right: 9px; padding-top: 9px; margin-top: 55px; float: left; }
footer { width: 100%; padding-left: 9px; padding-right: 9px; padding-top: 0; margin-bottom: 9px; float: left; }

.bildmarke { width: 50%; padding: 9px; vertical-align: top; float: left; }
.wortmarke { display: none; }
.navi { width: 50%; padding: 9px; vertical-align: top; float: left; }
.text { width: 100%; padding: 9px; vertical-align: top; float: left; }
.bild { width: 100%; padding: 9px; vertical-align: top; float: right; }
.thumb { width: 100%; padding: 9px; vertical-align: top; float: right; }
.linie { width: 100%; padding: 9px; vertical-align: top; float: left; }
.nextprevious { width: 50%; padding: 9px; vertical-align: top; float: left; }
.contact { width: 16.666%; padding: 9px; vertical-align: top; float: left; }

.bild img { width: 100%; }
.text img { width: 100%; }

#bildmarke-container img { margin-top: 6px; height: 38px; }

figure a { position: absolute; background: rgba(255,255,255,.75); padding: 9px 9px; opacity: 0; height: 100%; width: 100%; }
    
hr { margin-top: 10px; margin-bottom: 10px; background-color: #333333;/* Farbe für Opera und Firefox */ color: #333333;/* Farbe für Internet Explorer (IE) */ border: 0; height: 2px; }
}