* {
margin:0;
padding:0;
box-sizing:border-box;
}
body{
margin:0;
padding:0;
background-color:#a3a3a3;
font-family: "arial narrow", arial, helvetica, sans-serif;
font-size:11px;
text-align:left;
}
img{
border: 0;
display: block;
max-width: 100%;
height: auto;
}
p {
margin:0 0 12px 0;
hyphens: auto;
}
#main{
margin:20px auto;
max-width:840px;
background-color:#fff;
padding:0;
}

#header{
max-width:840px;
height:90px;
background-color:#666;
}
.silver{
color:#c0c0c0;
letter-spacing:0.16em;
padding:40px 0 18px 30%;
}

#middle{
background-color:#fff;
max-width:840px;
}
#mainnav {
    text-align: left;
    line-height:180%;
    letter-spacing:2px;
    margin:20px 1px 0 0;
    padding:0 0 11% 0;
}
#mainnav ul{
    margin:0 0 0 1px;
    padding: 0 0 0 1px;
    list-style-type: none;
}

#left{
width:30%;
float:left;
text-align:left;
}

#left h1{
font-size:24px;
letter-spacing:2px;
color:#666;
text-align:left;
font-weight: normal;
padding:25px 0 0 30px;
margin-bottom:0;
}
#right{
width:70%;
float:right;
background-color:#fff;
}
h1{
font-size:24px;
letter-spacing:2px;
color:#666;
text-align:left;
font-weight: normal;
margin:60px 0 0 0;
}
h2 {
font-size:18px;
letter-spacing:1px;
color:#cc0033;
margin:20px 0 9px 0;
}
h3 {
font-size:13.5px;
text-align:left;
font-weight: normal;
letter-spacing:0.02em;
padding:0;
margin:4px 0 10px 0;
}
h4{
font-size:24px;
letter-spacing:0.08em;
color:#666666;
font-weight: normal;
margin:60px 0 0 0;
}
h5{
font-size:24px;
letter-spacing:0.08em;
color:#666666;
text-align:left;
font-weight: normal;
margin:22px 0 0 30px;
}

h6 {
font-size:13px;
text-align:left;
letter-spacing:0.01em;
font-weight: normal;
padding:0;
margin-top:10px;
}
h7 {
font-family: "arial narrow", arial, helvetica, sans-serif;
font-size: 17px;
display:block;
font-weight:bold;
letter-spacing:0.8px;
margin:25px 0 0 0;
}
h8 {
font-family: "arial narrow", arial, helvetica, sans-serif;
font-size: 14px;
display:block;
font-weight:normal;
letter-spacing:0.8px;
margin:4px 0 8px 0;
}

.custom {
text-align: left;
line-height:180%;
letter-spacing:2px;
margin:20px 20px 11% 0;
}
.custom_sub {
text-align: left;
line-height:180%;
letter-spacing:0.2em;
margin:20px 20px 20px 30px;
}

.kontakt {
font-family: "arial narrow", arial, helvetica, sans-serif;
font-size:11.3px;
color: #666; 
text-align: left;
line-height:180%;
letter-spacing:0.16em;
margin:20px 20px 70px 0;
}

.text{
font-family: Verdana, Geneva, Helvetica, Arial, sans-serif;
font-size: 11px; 
line-height: 140%; 
font-weight: normal; 
color: #333; 
padding:0 12px 20px 0;
}
.credits_radio{
font-family: Verdana, Geneva, Helvetica, Arial, sans-serif;
font-size: 11px; 
line-height: 140%; 
font-weight: normal; 
color: #333; 
padding:22px 12px 12px 0;
}
#footer{
max-width:840px;
clear:both;
height:90px;
background-color:#666;
}
.footer{
font-family: Tahoma, "arial narrow", arial, helvetica, sans-serif;
letter-spacing:1px;
color:#C0C0C0;
text-decoration: none;
text-align:right;
padding:14px 32px 0 0;
}
.poidi{
font-family: "arial narrow", arial, helvetica, sans-serif !important;
font-size:11px;
}

a:link{ color:#666; text-decoration: none;}
a:visited{color:#666;text-decoration:none;}
a:active{color:#666;text-decoration:none;}
a:hover{ color:#999; text-decoration: none;}

a.silber:link{ color:#c0c0c0; text-decoration: none;}
a.silber:visited{color:#c0c0c0;text-decoration:none;}
a.silber:active{color:#c0c0c0;text-decoration:none;}
a.silber:hover{color:#ffffff; text-decoration: none;}
    
a.contact:link{color:#666; text-decoration:none;
font-size:12px !important;}
a.contact:visited{color:#666;text-decoration:none;}
a.contact:active{color:#666;text-decoration:none;}
a.contact:hover{ color:#999999; text-decoration: none;}

.loeffel{ 
    margin:88px 0 0 0; 
}
.cat{
    margin:20px 0 0 36px;
}
.kasette{
    margin:55px 0 0 28%;
}
.schal{
    margin:30px 0 0 0;
}
.frau{
    margin:24px 0 0 35%;
}
.elefant{
    margin:70px 0 0 39%;
}
.zuender{
    margin:68px 0 0 25%;
}
.ohr{
    width:60px;
    height:60px;
    margin:24px 16px 0 0;
    float:left;
    padding:0;
}

.bild{
    margin:3px 14px 7px 0;
    float:left;
}
.bild2{
    margin:3px 8px 9px 0;
    float:left;
}

#middle:after,  #right:after{
    content: '';
    clear: both;
    display: block;
}
.clear{
    clear: both;
    height: 0;
}

figcaption {
  display: block; 
  text-align: left;
font-size:12px;
letter-spacing:0.6px;
}
figure {
margin: 0 0 16px 0;
}


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

.respon sive{
     padding:10px 10px 6px 10px;
}
.credits_radio{
padding:22px 0 20px 0;
}
#main {
    hyphens: auto;
    box-shadow: none;
margin:0 auto;
}
#main .mobile-hidden {
        display: none;
}
.custom_sub {

margin:20px 0 10px 12px;
letter-spacing:0.15em;
}
h2 {
margin:0 0 9px 0;
}
h5{
    margin:22px 0 0 12px;
}

.silver{
        margin:0 2px 0 12px;
        letter-spacing:0.1em;
        padding:6% 0 0 0;
        line-height:2.2;
        font-size:12px;
    }
    } 

@media only screen and (max-width: 510px) {
#left, #right{
    	width:auto;
    	float:none;
}
#left{
    	margin:0;
padding:0;
}
#right{
     	padding:0px 12px 0 12px;
	margin:0;
}
.custom_sub {
    	padding:8px 0 12px 12px;
    	border-bottom:1px solid #ccc;
margin:0 0 14px 0;
}

.respon sive{
     	padding:0 10px 0 16px;
}
.weiss{
	background-color:#ffffff;
}
h1{
margin:30px 0 0 0;
}
h4{
margin:10px 0 6px 0;
}
h7 {
font-size: 15px;
margin:0;
}
h8 {
font-size: 12px;
margin:2px 0 8px 0;
letter-spacing:0.5px;
}
.schal {
    margin:10px 0 0 5%;
}
.cat {
    margin:6px 0 0 10%;
}
.kasette, .zuender{
    margin:18px 0 0 6%;
}
.elefant {
    margin:22px 0 10px 15%;
}
.kontakt {
margin:20px 20px 8% 0;
}

.loeffel {
    margin:30px 0 0 0;
}
.frau {
    margin:10px 0 0 10%;
}

.custom {
margin:10px 20px 8% 0;
}

figcaption {
font-size:11px;
letter-spacing:0.5px;
}
h2 {
font-size:15px;
}
h3 {
font-size:13px;
}
h6 {
font-size:12px;
}

}