/******************************************************************
Copyright 2014 by Agentur Durchdacht / www.agentur-durchdacht.de
******************************************************************/

html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-rendering: optimizeLegibility; overflow-y:scroll;}

/* Reset Styles
***********************/
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;
outline:0;
font-size: 100.01%;
font: inherit, 1em/1.5em 'EB Garamond', Times New Roman, serif;
vertical-align: baseline;
}

body {
width:100%;
height:100%;
background:#FFF;
background-image:url(../images/bg/body-dash.jpg);
overflow:hidden;
}

h1, h2, h3, h4, h5, h6, a, p {
position:relative;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-weight:400;
text-decoration:none;
border:none;
padding:0;
margin:0;
cursor:default;
}

a {
cursor:pointer;
}

article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q demo
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
strong {font-weight: normal;}
em {font-style: italic;}

h1 {
font-family:'EB Garamond', Times New Roman, serif;
font-size:36px;
color:#111;
font-weight:400;
margin:15px 0 0;
}

h2 {
position:relative;
display:inline-block;
font-family:'EB Garamond', Times New Roman, serif;
font-size:32px;
color:#996633;
font-weight:400;
margin:40px 0 20px 0;
}

h3 {
font-family:'EB Garamond', Times New Roman, serif;
font-size:30px;
line-height:1.1em;
color:#111;
font-weight:400;
margin:60px 0 0;
}

p {
position:relative;
font-family:'EB Garamond', Times New Roman, serif;
font-size:18px;
color:#111;
font-weight:400;
line-height: 1.5em;
margin:1em 0;
}

p.brown {
color:#996633;
}

a {
display:inline-block;
font-family:'EB Garamond', Times New Roman, serif;
font-size:18px;
line-height: 1em;
clear: both;
color:#996633;
font-weight:normal;
margin:0;
transition:all .3s linear;
-webkit-transition:all .3s linear;
-moz-transition:all .3s linear;
text-rendering: auto;
cursor:pointer;
z-index:1000;
}

a:hover {
color:#111;
}

#content a.product-link {
clear:none;
}

.product-layout {
display:flex;
align-items:flex-start;
}

.product-layout img.cover {
flex:none;
}

.product-copy {
flex:1;
min-width:0;
}

.small {
font-size:0.75em;
}

img.left {
float:left;
display:inline;
margin:45px 60px 60px 0; 
}

img.right {
float:right;
}

.left {
float:left;
}

.right {
float:right;
}

.center {
text-align:center;
}

.cf {
position:relative;
display:block;
width:100%;
float:none;
overflow:hidden;
}

img.cover {
display:inline;
width:300px;
height:auto;
float:left;
}

img.cover2 {
width:100%;
height:auto;
float:right;
}

img.big-picture {
display:inline;
width:40%;
height:auto;
float:left;
}

td {
padding:3px;
}

td.first {
width:50px;
padding:0 3px 0 0;
}

tr {
border-bottom:1px solid #EEE;
}

tr.grey {
background:#F3F3F3;
}

table {
font-family:'EB Garamond', Times New Roman, serif;
font-size:18px;
color:#111;
}

.block {
display:block;
float:none;
overflow:hidden;
}

#page-wrap {
display:block;
position:relative;
width:100%;
height:auto;
overflow:hidden;
}

#page-inner {
display:block;
position:relative;
width:100%;
max-width:1200px;
height:auto;
margin:0 auto;
background:#FFF;
overflow:hidden;
}

.header {
position:relative;
display:block;
width:100%;
max-width:1200px;
height:140px;
margin:0 auto;
left:0;
right:0;
z-index:9999;
}

#header {
width:100%;
max-width:1200px;
height:130px;
margin:0 auto;
background:#FFF;
background-image:url(../images/bg/header-bg.png);
background-repeat:no-repeat;
background-position:right top;
border-top:15px solid #996633;
box-shadow:0 0 10px rgba(0,0,0,.3);
-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);
-moz-box-shadow:0 0 10px rgba(0,0,0,.3);
-ms-box-shadow:0 0 10px rgba(0,0,0,.3);
-o-box-shadow:0 0 10px rgba(0,0,0,.3);
z-index:9999;
}

#header h1#logo{
width:300px;
height:auto;
margin:15px 0 12px 60px;
}

#header h1#logo img{
width:300px;
height:auto;
margin:0;
}

#verlag {
position:absolute;
display:inline-block;
right:60px;
top:33px;
overflow:hidden;
}

#verlag img{
width:auto;
height:62px;
}

#toggle {
display:none;
}

#mobile-nav {
display:none;
}

#main-nav {
display:block;
width:100%;
max-width:1200px;
height:35px;
line-height:35px;
background:#FFF;
z-index:9999;
}

#main-nav.sticky {
position:fixed;
display:block;
height:35px;
line-height:35px;
top:0;
border-top:15px solid #996633;
border-bottom:1px solid #CCC;
box-shadow:0 0 10px rgba(0,0,0,.3);
-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);
-moz-box-shadow:0 0 10px rgba(0,0,0,.3);
-ms-box-shadow:0 0 10px rgba(0,0,0,.3);
-o-box-shadow:0 0 10px rgba(0,0,0,.3);
z-index:10000;
}

ul{
display:block;
position:relative;
margin-left:60px;
padding:0 0 0 1px;
z-index:10000;
overflow:hidden;
}

ul li{
display:inline-block;
position:relative;
margin:0 0 0 -1px;
padding:0;
float:left;
transition:all .3s linear;
-webkit-transition:all .3s linear;
-moz-transition:all .3s linear;
z-index:10000;
}

ul li:hover{
background:#996633;
}

ul li a{
font-size:18px;
line-height:1em;
font-variant: small-caps;
padding:0 15px;
border-right:1px solid #EEE;
}

ul li:hover a{
color:#FFF;
border-right:1px solid #996633;
}

ul li a:hover{
color:#FFF;
}

ul li a.first{
border-left:1px solid #EEE;
}

ul li:hover a.first{
border-left:1px solid #996633;
}

ul li a.last{
border:0;
border-right:1px solid #EEE;
}

ul li:hover a.last{
border-right:1px solid #996633;
}

ul li ul {
position:absolute;
width:200px;
height:0px;
margin:0;
padding:0;
background:#FFF;
box-shadow:0 5px 5px rgba(0,0,0,.1);
-webkit-box-shadow:0 5px 5px rgba(0,0,0,.1);
-moz-box-shadow:0 5px 5px rgba(0,0,0,.1);
-ms-box-shadow:0 5px 5px rgba(0,0,0,.1);
-o-box-shadow:0 5px 5px rgba(0,0,0,.1);
transition:all .3s linear;
-webkit-transition:all .3s linear;
-moz-transition:all .3s linear;
overflow:hidden;
z-index:10000;
}

ul li:hover ul {
position:absolute;
width:200px;
height:105px;
}

ul li:hover ul li{
border:0;
margin:0;
}

ul li ul li{
display:block;
float:none;
border:0;
margin:0;
}

ul li:hover ul li a{
color:#996633;
border:0;
}

ul li:hover ul li:hover a{
color:#FFF;
border:0;
}

ul li ul li a{
border:none;
}

#content {
position:relative;
width:100%;
max-width:1080px;
height:auto;
padding:0px 60px 60px;
overflow:hidden;
}

#headline {
position:relative;
width:100%;
padding:60px 0 40px;
text-align:right;
border-top:1px solid #EEE;
}

#headline h2{
position:relative;
font-size:11px;
margin-top:0;
margin-bottom:40px;
}

#headline h2 img{
position:absolute;
right:0;
width:auto;
height:60px;
}

.spacer {
display:block;
width:100%;
height:90px;
}

.col {
position:relative;
width:30%;
height:350px;
margin:0 3% 3% 0;
float:left;
overflow:hidden;
}

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

.col .img-wrapper {
position:relative;
width:100%;
height:220px;
overflow:hidden;
}

.book-small {
	position:relative;
	display:inline-block;
	width:50%;
	max-width:50%;
	float:left;
}
.book-small img{
	position:relative;
	display:inline-block;
	width:50%;
}

.book-small p{
	position:absolute;
	bottom:40px;
	left:55%;
	float:left;
}

#back-top {
	position: fixed;
	bottom: 15px;
	right: 15px;
	z-index:10000;
}

#back-top a {
width: 60px;
display: block;
margin:0;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color:#FFF;
background:#996633;
background-image:url(../images/bg/to-top.png);
background-repeat:no-repeat;
background-position:center center;
background-size:100% 100%;
-webkit-transition: .5s;
-moz-transition: .5s;
transition: .5s;
opacity:.8;
border-radius:2px 2px 0 0;
	-webkit-border-radius:2px 2px 0 0;
	-moz-border-radius:2px 2px 0 0;
}

#back-top a:hover {
color: #FFF;
opacity:1;
}

#back-top span {
font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
width: 60px;
height: 50px;
line-height:50px;
display: block;
padding:10px 0 0 0;
margin-bottom: 0;
background: transparent;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}

@media screen and (max-width: 1200px) {
img.cover {
width:250px;
height:auto;
}

#page-inner {
width:100%;
max-width:1080px;
}

ul {
margin-left:20px;
}

#content {
width:100%;
max-width:1000px;
padding:0 20px 20px;
background:#FFF;
}

}

@media screen and (max-width: 1024px) {
img.cover {
width:200px;
height:auto;
}

#page-inner {
width:100%;
max-width:960px;
}

#header h1#logo {
margin-left:20px;
}

#verlag {
right:20px;
}

ul {
margin-left:20px;
}

#breadcrumb p{
font-size:14px;
}

#breadcrumb a{
font-size:14px;
}

#content {
width:100%;
max-width:900px;
padding:0 20px 20px;
background:#FFF;
}
}

@media screen and (max-width: 768px) {
#page-inner {
width:100%;
max-width:768px;
}

#header h1#logo {
margin-left:20px;
}

ul {
margin-left:20px;
}

#verlag {
right:20px;
}

#breadcrumb p{
font-size:14px;
}

#breadcrumb a{
font-size:14px;
}

#content {
width:100%;
max-width:720px;
padding:0 20px 20px;
background:#FFF;
}

.book-small {
	position:relative;
	display:inline-block;
	width:100%;
	max-width:100%;
	float:left;
}
.book-small img{
	position:relative;
	display:inline-block;
	width:100%;
	max-width:100%;
	float:none;
}
.book-small p{
	position:relative;
	display:block;
	width:100%;
	max-width:100%;
	left:0;
	float:none;
}


}


@media screen and (max-width: 640px) {
.product-layout {
display:block;
}

img.cover {
width:100%;
height:auto;
float:none;
}

img.cover2 {
width:100%;
height:auto;
float:none;
}

#page-inner {
width:100%;
max-width:100%;
}

.header {
height:50px;
border:0;
}

#header {
position:fixed;
height:100px;
background:#FFF;
background-image:url(../images/bg/header-bg.png);
height:50px;
overflow:hidden;
border:0;
z-index:10000;
}

#header h1#logo{
width:150px;
height:auto;
margin:10px auto 12px 5%;
}

#header h1#logo img{
width:150px;
height:auto;
margin:0;
}

#toggle {
position:absolute;
display:inline-block;
width:100px;
height:30px;
top:15px;
right:5%;
text-align:right;
z-index:10000;
}

#toggle a {
font-size:12px;
}

#mobile-nav {
position:fixed;
display:block;
width:100%;
height:210px;
top:-290px;
padding:50px 0 10px;
background:#FFF;
z-index:9000;
overflow:hidden;
}

#mobile-nav li{
display:block;
float:none;
text-align:center;
}

#mobile-nav li a{
display:block;
font-size:16px;
border:0;
padding:5px 0;
}

#verlag {
display:none;
}

#main-nav {
display:none;
}

#main-nav.sticky{
border:0;
display:none;
}

ul {
display:none;
}

ul.mobile {
display:block;
margin:0;
}

#breadcrumb {
display:none;
}

#headline {
padding:60px 0 30px;
border-top:0;
border-bottom:1px solid #EEE;
}

#headline h2{
display:block;
width:100%;
text-align:center;
}

#headline h2 img{
position:relative;
display:block;
margin:0 auto;
width:auto;
height:25px;
text-align:center;
}

#content {
width:90%;
max-width:90%;
padding:0;
margin:0 auto;
background:#FFF;
}

#content img{
width:100%;
height:auto;
}

.col {
width:100%;
height:350px;
float:none;
}

.col img{
width:100%;
height:auto;
float:none;
}

#back-top {
display:none;
}

}

@media screen and (max-height: 340px) {
#mobile-nav li a{
display:block;
font-size:12px;
border:0;
padding:3px 0;
}
#back-top {
display:none;
}
}

@media screen and (max-width: 720px) and (max-height: 720px) (-webkit-min-device-pixel-ratio: 1.5) {
img.cover {
width:100%;
height:auto;
float:none;
}

#page-inner {
width:100%;
max-width:100%;
}

.header {
height:50px;
border:0;
}

#header {
position:fixed;
height:100px;
background:#FFF;
background-image:url(../images/bg/header-bg.png);
height:50px;
overflow:hidden;
border:0;
z-index:10000;
}

#header h1#logo{
width:150px;
height:auto;
margin:10px auto 12px 5%;
}

#header h1#logo img{
width:150px;
height:auto;
margin:0;
}

#toggle {
position:absolute;
display:inline-block;
width:100px;
height:30px;
top:15px;
right:5%;
text-align:right;
z-index:10000;
}

#toggle a {
font-size:12px;
}

#mobile-nav {
position:fixed;
display:block;
width:100%;
height:210px;
top:-290px;
padding:50px 0 10px;
background:#FFF;
z-index:9000;
overflow:hidden;
}

#mobile-nav li{
display:block;
float:none;
text-align:center;
}

#mobile-nav li a{
display:block;
font-size:16px;
border:0;
padding:5px 0;
}

#verlag {
display:none;
}

#main-nav {
display:none;
}

#main-nav.sticky{
border:0;
display:none;
}

ul {
display:none;
}

ul.mobile {
display:block;
margin:0;
}

#breadcrumb {
display:none;
}

#headline {
padding:60px 0 30px;
border-top:0;
border-bottom:1px solid #EEE;
}

#headline h2{
display:block;
width:100%;
text-align:center;
}

#headline h2 img{
position:relative;
display:block;
margin:0 auto;
width:auto;
height:25px;
text-align:center;
}

#content {
width:90%;
max-width:90%;
padding:0;
margin:0 auto;
background:#FFF;
}

#content img{
width:100%;
height:auto;
}

.col {
width:100%;
height:350px;
float:none;
}

.col img{
width:100%;
height:auto;
float:none;
}

#back-top {
display:none;
}

}