@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,700);

html {
height : 100%;
-webkit-text-size-adjust: none;
-webkit-overflow-scrolling: touch;
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
box-sizing : border-box;
}

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

body, div, span, object, hr, 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, input, textarea, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin : 0;
padding : 0;
font-family : 'Roboto',Arial,Helvetica Neue,Helvetica,sans-serif;
font-weight : 300;
font-style : normal;
vertical-align : baseline;
background : transparent;
border : 0;
outline : 0;
}

:focus {
outline: 0;
}

body {
height : 100%;
line-height : 150%;
}

.view-L {
display : initial !important;
}

.view-M {
display : initial !important;
}

.view-S {
display : none !important;
}

h1 {
padding: 7% 0 5% 20%;
font-size : 400%;
color : #FFFFFF;
font-weight : 100;
}

h2 {
padding: 0 0 30px 0;
font-size : 180%;
color : #404040;
font-weight : 400;
text-align : left;
clear : both;
}

h2 span {
padding: 0 0 0 2px;
font-size : 40%;
}

h3 {
padding: 0 0 20px 0;
color : #202020;
font-weight : 700;
text-align : left;
}

h4 {
padding: 0 0 0 0;
color : #202020;
font-weight : 700;
text-align : left;
}

h5 {
padding: 0 0 80px 0;
font-size : 180%;
color : #FFFFFF;
font-weight : 300;
text-align : left;
letter-spacing : 1px;
}

#page {
position : relative;
width : 100%;
min-height : 100%;
color : #202020;
background-color : #FFFFFF;
overflow : auto;
background-image : url(../images/head_02.jpg);
background-repeat : no-repeat;
background-position : center 0px;
background-size : contain;
}

#navi {
z-index : 80;
width : 100%;
padding : 25px 0 0 0;
background : #606060;
background: -moz-linear-gradient(top, rgba(17,18,21,0.8) 0%, rgba(0,0,0,0.2) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(17,18,21,0.8)), color-stop(100%,rgba(0,0,0,0.2))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(17,18,21,0.8) 0%,rgba(0,0,0,0.2) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(17,18,21,0.8) 0%,rgba(0,0,0,0.2) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(17,18,21,0.8) 0%,rgba(0,0,0,0.2) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(17,18,21,0.8) 0%,rgba(0,0,0,0.2) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc111215', endColorstr='#33000000',GradientType=0 ); /* IE6-9 */
}

#navi ul {
width : 80%;
max-width : 900px;
margin : 0 auto;
line-height : 100%;
text-align : justify;
}

#navi ul li {
display : inline-block;
list-style : none;
font-weight : 700;
font-size : 90%;
letter-spacing : 0.7px;
}

#navi_ {
padding-left : 100%
}

#navi ul li a:link, #navi ul li a:visited {
color : #FFFFFF;
text-decoration : none;
}

#navi ul li a:hover, #navi ul li a:active, #navi ul li a:focus {
color : #AB5C6C;
}

#navi ul li b {
font-weight : 700;
color : #A0A0A0;
}

#navi-icon {
display : none;
}

.clear {
height : 1px;
clear : both;
}

.cont {
width : 80%;
max-width : 900px;
height : auto;
margin : 0 auto 250px auto;
padding-top : 20px;
font-size : 95%;
color : #202020;
text-align : left;
}

.cont i {
font-style : italic;
}

.cont-l {
width : 63%;
float : left;
}

.cont-r {
width : 30%;
font-size : 85%;
float : right;
}

.bilder img {
width : 100%;
padding : 20px 0;
}

.tab {
display : table;
table-layout : fixed;
width : 100%;
}

.tab li {
display : table-cell;
vertical-align : top;
}

.tab-text li {
padding-right : 15px;
padding-left : 15px;
}

.tab-text li:first-of-type {
padding-right : 30px;
padding-left : 0;
}

.tab-text li:last-of-type {
padding-right : 0;
padding-left : 30px;
}

#foot {
position : absolute;
left : 0;
bottom : 0;
width : 100%;
height : 150px;
font-size : 80%;
color : #E6E6E6;
letter-spacing : 1px;
background-color : #645E5E;
overflow : auto;
}

.footdiv {
width : 80%;
max-width : 900px;
margin : 0 auto;
}

#foot span {
font-size : 70%;
}

#foot i {
padding : 0 15px;
}

#foot p {
display : inline;
}

#foot ul li div a img {
width : 40px;
height : 42px;
margin : 10px 5px 0 3px;
border : 0;
}

#foot ul li:last-of-type {
text-align : center;
}

.kontakt {
padding : 0 0 0 15px !important;
}

.kontakt a {
margin-top : 9px;
line-height : 30px;
padding : 0 15px;
border : 1px solid #FFFFFF;
}

.kontakt a:hover {
border-color : #A0A0A0;
}

.just {
text-align : center;
}

#noshow {
position : relative;
width : 86%;
margin : 0 auto;
}

#show {
position : relative;
width : 100%;
margin : 0 0 50px 0;
}

#show:before {
content : "";
display : block;
padding-top : 48%;
}

.show_01 {
position : absolute;
top : 0;
left : 0;
bottom : 0;
right : 0;
}

.show_02 {
position : absolute;
right : 0;
width : 19%;
height : 23.5%;
background-size : cover;
background-color : #F0F0F0;
}

#bild {
position : absolute;
top : 0;
left : 0;
width : 80%;
height : 100%;
background-size : cover;
background-color : #F0F0F0;
}

#back {
position : absolute;
top : 35%;
left : -30px;
}

#next {
position : absolute;
top : 35%;
right : -30px;
}

.pic {
position : absolute;
top : 0;
left : 0;
visibility : hidden;
}

.pic a img:hover {
border : none !important;
}

.ab {
z-index : 70;
position : absolute;
top : 300px;
right : 10%;
width : 220px;
height : 220px;
}

.zitat {
font-family : 'Domine',serif;
font-size:125%;
text-align:center;
}

.start {
line-height : 130%;
color : #202020;
}

.start b {
font-weight : 700;
}

.start img {
width : 100%;
padding : 1px;
background : #FFFFFF;
border : 2px #A0A0A0 solid;
}

.smap {
line-height : 200%;
}

.books_01 img {
width : 20%;
margin : 0 20px 50px 0;
padding : 1px;
border : 2px #A0A0A0 solid;
float : left;
}

.books_01 span {
font-size : 80%;
}

.books_02 img {
width : 100%;
}

.books_03 img {
width : 100%;
margin : 0;
padding : 0 0 25px 0;
background-color : #FFFFFF;
border : none;
float : none;
}

.row {
line-height : 175%;
}

.row div {
padding : 20px 0;
border-top : 2px solid #A0A0A0;
border-bottom : 2px solid #A0A0A0;
}

.row span {
font-style : italic;
}

.aktion {
position : relative;
background-size : cover;
background-repeat : no-repeat;
background-position : center center;
border-right : 1px solid #FFFFFF;
}

.aktion div {
position : absolute;
right : 0;
bottom : 0;
width : 70%;
padding : 20px;
color : #FFFFFF;
background : #000000;
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
filter : alpha(opacity=75);
-moz-opacity : 0.75;
-khtml-opacity : 0.75;
opacity : 0.75;
}

.aktion b {
font-weight : bold;
color : #E76F4A;
}

.verkauft {
width : 200px;
height : 200px;
}

.sortiment img {
height : 120px;
background-color : #FFFFFF;
border : 0;
}

.sortiment img:hover {
background-color : #E0E0E0;
}

.multi {
margin-top : 20px;
padding : 2px 0px 10px 30px;
font-size : 90%;
background-position : 0 8px;
background-repeat : no-repeat;
}

.multi b {
font-weight : bold;
}

.spalte {
width : 150px;
float : left;
}

.projekt {
display : none;
}

.logobar {
position : absolute;
left : 0;
bottom : 170px;
width : 94%;
text-align : right;
}

.logobar img {
width : 375px;
height : 90px;
}

.sitemap div {
margin : 10px 0 40px 0;
padding : 0 0 0 20px;
border-left : 5px solid #C0C0C0;
}

.link01 a:link, .link01 a:visited {
font-size : 90%;
font-weight : 700;
color : #000000;
text-decoration : none;
letter-spacing : 0.3px;
}

.link01 a:hover, .link01 a:active, .link01 a:focus {
color : #AC5544;
}

.link01 a img:hover {
border : 2px #AC5544 solid;
}

.lnk_crc {
position : relative;
width : 26px;
margin-right : 10px;
background-color : #000000;
border-radius : 50%;
float : left;
}

.lnk_crc:before {
content : "";
display : block;
padding-top : 100%;
}

.lnk_crc div {
position : absolute;
top : 0;
left : 0;
width : 26px;
line-height : 26px;
text-align : center;
color : #FFFFFF;
font-weight : 700;
font-size : 80%;
}

.link02 a:link, .link02 a:visited {
color : #000000;
font-weight : 700;
text-decoration : none;
letter-spacing : 1.5px;
}

.link02 a:hover, .link02 a:active, .link02 a:focus {
color : #B5113E;
}

.link02 b {
font-weight : 400;
color : #A0A0A0;
}

.link03 a:link, .link01 a:visited {
font-weight : 700;
color : #FFFFFF;
text-decoration : none;
}

.link03 a:hover, .link01 a:active, .link01 a:focus {
color : #E76F4A;
}

.link04 a:link, .link04 a:visited {
color : #FFFFFF;
font-size : 90%;
text-decoration : none;
letter-spacing : 1.5px;
}

.link04 a:hover, .link04 a:active, .link04 a:focus {
color : #000000;
}

.link04 b {
color : #A0A0A0;
}

.qm {
font-family : Arial,Helvetica Neue,Helvetica,sans-serif;
}

.f90 {
font-size : 90%;
}

.fw400 {
font-weight : 400;
}

.p10t {
padding-top : 10px;
}

.p20t {
padding-top : 20px;
}

.p30t {
padding-top : 30px;
}

.p50t {
padding-top : 50px;
}

.p80t {
padding-top : 80px;
}

.p100t {
padding-top : 100px;
}

.b50- {
padding : 50px 0;
}

.p20b {
padding-bottom : 20px;
}

.p50b {
padding-bottom : 50px;
}

.p80b {
padding-bottom : 80px;
}

.p100b {
padding-bottom : 100px;
}






@media only screen and (max-width : 1100px) {

h1 {
padding: 7% 0 4% 15%;
font-size : 350%;
}

.view-L {
display : none !important;
}

.cont {
font-size : 90%;
letter-spacing : 0.3px;
}

#foot ul li div a img {
width : 36px;
height : 38px;
margin : 10px 5px 0 2px;
}

.verkauft {
width : 150px;
height : 150px;
}

.zitat {
font-size:110%;
}

.ab {
top : 250px;
width : 200px;
height : 200px;
}

}





@media only screen and (max-width : 900px) {

h1 {
padding: 7% 0 3% 15%;
font-size : 300%;
}

#navi ul li {
font-weight : 700;
font-size : 80%;
letter-spacing : 0.5px;
}

#show a {
top : 30%;
}

#foot ul li div a img {
width : 30px;
height : 31px;
margin : 10px 5px 0 3px;
}

.aktion div {
width : 100%;
}

.verkauft {
width : 120px;
height : 120px;
}

.logobar img {
width : 250px;
height : 58px;
}

.link01 a:link, .link01 a:visited {
letter-spacing : 0;
}

.ab {
top : 200px;
width : 180px;
height : 180px;
}

}





@media only screen and (max-width : 767px) {

#page {
background-position : center 50px;
}

.view-M {
display : none !important;
}

.view-S {
display : initial !important;
}

h1 {
padding: 18% 0 3% 10%;
font-size : 300%;
}

h2 {
font-size : 300%;
padding-bottom : 20px;
}

#navi {
display: inline-block;
position : absolute;
height : 50px;
padding : 0;
background-image : none;
background-color : #181416;
}

#navi div {
width : 100%;
height : 50px;
}

#navi span {
display : none;
}

#navi ul {
width : 100%;
}

#navi ul li {
width : 100%;
height : 50px;
line-height : 50px;
margin-top : 0;
padding : 0;
font-size : 12px;
font-weight : bold;
letter-spacing : 2px;
float : none;
}

#navi ul li a:link, #navi ul li a:visited, #navi ul li a:active, #navi ul li a:focus {
display : block;
line-height : 50px;
padding : 0 30px;
color : #202020;
text-shadow : none;
text-align : left;
background : rgb(255, 255, 255);
background : rgba(255, 255, 255, 0.90);
border-top : 1px solid #C0C0C0;
border-bottom : 1px solid #000000;
box-shadow: 0 20px 15px -15px #202020;
}

#navi ul li a:link, #navi ul li a:visited {
display : block;
color : #202020;
text-decoration : none;
}

#navi ul li a:hover, #navi ul li a:active, #navi ul li a:focus {
color : #A0A0A0;
}


#navi ul li b {
font-family : 'Roboto',Arial,Helvetica Neue,Helvetica,sans-serif;
font-weight : 700;
color : #A0A0A0;
}

#navi-icon {
display: block;
width : 100%;
text-align : right;
background-image : url(../images/logo.png);
background-size : 250px;
background-position : 30px center;
background-repeat : no-repeat;
}

#navi-icon a {
display: block;
height : 50px;
}

#navi img {
margin : 5px 15px 0 0;
}

#navi-item {
display : none;
}

#navi-icon a.navi-close {
display : none;
}

#navi:target #navi-item {
display : block;
}

#navi:target #navi-icon a.navi-open {
display : none;
}

#navi:target #navi-icon a.navi-close {
display : block;
}

#navi_ {
display : none;
}

.cont {
font-size : 90%;
margin : 0 auto 50px auto;
}

.cont-l {
width : 100%;
float : none;
}

.cont-r {
width : 100%;
margin-top : 40px;
padding : 50px 0 10px 0;
border-top : 1px solid #D0D0D0;
float : none;
}

.tab {
display : block;
}

.tab li {
display : block;
}

.tab-text li {
padding-right : 0;
padding-left : 0;
}

.tab-text li:first-of-type {
padding-right : 0;
}

.tab-text li:last-of-type {
padding-left : 0;
}

#foot {
position : static;
height : auto;
}

#foot ul li:last-of-type div {
margin-top : 30px;
padding : 30px 0;
border-top : 1px solid #D0D0D0;
}

#foot ul li div a img {
width : 40px;
height : 42px;
margin : 10px 5px 0 5px;
}

.kontakt {
padding : 0 !important;
}

.kontakt a {
margin-top : 0;
line-height : 50px;
padding : 0;
border : 0;
}

#noshow {
margin : 50px auto 0 auto;
}

.aktion {
position : relative;
width : 100%;
height : 380px;
margin-bottom : 1px;
background-size : cover;
background-position : center center;
border-right : 0;
}

.verkauft {
width : 200px;
height : 200px;
}

.start {
padding : 0 0 80px 0;
text-align : center;
background-size : auto;
}

.start img {
width : 100%;
}

.zitat {
font-size:125%;
}

.sortiment img {
height : 90px;
}

.ab {
top : 120px;
width : 180px;
height : 180px;
}

.spalte {
width : auto;
padding-top : 10px;
font-weight : bold;
float : none;
}

.projekt {
display : block;
margin : 40px 0 0 0;
height : 220px;
background-size : cover;
}

.logobar {
position : static;
margin-top : 40px;
padding : 60px 0 50px 0;
text-align : center;
border-top : 1px solid #D0D0D0;
}

.logobar img {
width : 300px;
height : 70px;
}

}





@media only screen and (max-width : 500px) and (orientation : landscape) {

h2 {
font-size : 250%;
padding-bottom : 10px;
}

#navi ul li {
height : 40px;
line-height : 40px;
}

#navi ul li a:link, #navi ul li a:visited, #navi ul li a:active, #navi ul li a:focus {
line-height : 40px;
}

#foot ul li div a img {
width : 36px;
height : 38px;
margin : 10px 5px 0 3px;
}

.aktion {
height : 300px;
}

.verkauft {
width : 150px;
height : 150px;
}

.zitat {
font-size:90%;
}

.sortiment img {
height : 60px;
}

.projekt {
height : 180px;
}

.ab {
top : 100px;
width : 150px;
height : 150px;
}

}





@media only screen and (max-width : 500px) and (orientation : portrait) {

h2 {
font-size : 200%;
}

#navi ul li {
height : 40px;
line-height : 40px;
}

#navi ul li a:link, #navi ul li a:visited, #navi ul li a:active, #navi ul li a:focus {
line-height : 40px;
}

#navi-icon {
background-size : 200px;
}

.zitat {
font-size:90%;
}

.aktion {
height : 300px;
}

.verkauft {
width : 150px;
height : 150px;
}

.sortiment img {
height : 50px;
}

.projekt {
height : 180px;
}

.logobar img {
width : 225px;
height : 53px;
}

.ab {
top : 80px;
width : 120px;
height : 120px;
}

}