html, body { height: 100%; margin: 0; padding: 0; border:0; }

body {
    margin: 0;
  	display: table;
    width: 100%;
    text-align: center;
    font-size: 100%
    font-size: 0.9em;
    line-height: 0.813em;
}

div, td, p, h1, h2, h3, h4, a, ul, li {
    margin: 0;
    padding: 0;
    font-size: 1em;
    text-align: left;
    font-family: 'Open Sans', arial, helvetica, sans-serif;
    color: #444499;
}

h1 {
    font-family: Raleway;
    font-size: 1.8em;
    letter-spacing: 0.1em;
    line-height: 1.8em;
    padding: 0 0 12px 0;
    color: #cc6633;
}

h2 {
    font-family: Raleway;
    font-size: 1.5em;
    letter-spacing: 0.1em;
    line-height: 1.5em;
    padding: 0 0 12px 0;
    color: #cc6633;
}

h3 {
    font-family: Raleway;
    font-size: 1.25em;
    letter-spacing: 0.1em;
    line-height: 1.25em;
    padding: 0 0 12px 0;
    color: #cc6633;
}

h4 {
    font-family: Raleway;
    font-size: 1.0em;
    letter-spacing: 0.1em;
    line-height: 1.0em;
    padding: 0 0 12px 0;
    color: #cc6633;
}

#wrapper {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background-color: #000;
}

#header {
  	background-color: #474747;
  	height:105px;
}

#logo {
	width:40%;
    margin: 0 auto;
    text-align:center;
}

#logo img {
	margin: 10px 0 10px 0;
	max-height:85px;
}

#content {
    width: 100%;
    max-width:1350px;
    margin: 0 auto;
    background: url(/images/bg.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size:100%;
}

#titel {
    width: 100%;
    min-height:800px;
    margin: 0 auto;
}

#headline {
    width: 100%;
}

#titel #headline img {
	padding:30px 20% 0 20%;
    width: 60%;
}

#image {
    display:table-row;
}

#image img {
    width: 100%;
}

#image-left {
    width: 17%;
    display:table-cell;
    float:left;
}

#image-center {
    width: 66%;
    margin: 0 auto;
    display:table-cell;
    float:left;
}

#image-center-teaz-juiz {
    width:50%; padding: 0 25% 0 25%;
}

#image-center img {
    padding: 36px 0 0 0;
}

#image-right {
    width: 17%;
    display:table-cell;
    float:left;
}

#icons {
    width:40%;
    margin: 0 auto;
    text-align:center;
  	height:120px;
}
    
#icons li {
	list-style-type:none;
    float:left;
    width:20%;
  	margin:60px 2% 0 2%;
}

#icons a:link, #icons a:active, #icons a:visited, #icons a:hover {
    font-size: 1.85em;
    font-family: 'Lobster';
  	text-decoration:none;
  	padding:36px 1px 0 1px;
    -webkit-transition: color 0.3s ease-in-out;
    -moz-transition: color 0.3s ease-in-out;
    -ms-transition: color 0.3s ease-in-out;
    -o-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

#icons-teaz a:link, #icons-teaz a:active, #icons-teaz a:visited, #icons-teaz a:hover {
    color:#fff;
    background-image: url(/images/button_white_off.png);
    background-repeat: no-repeat;
    background-position: center top;
}

#icons-teaz a:hover {
    color:#999;
    background-image: url(/images/button_on.png);
    background-repeat: no-repeat;
    background-position: center top;
    -webkit-transition: background-image 0.3s ease-in-out;
    -moz-transition: background-image 0.3s ease-in-out;
    -ms-transition: background-image 0.3s ease-in-out;
    -o-transition: background-image 0.3s ease-in-out;
    transition: background-image 0.3s ease-in-out;
}

#icons-juiz a:link, #icons-juiz a:active, #icons-juiz a:visited, #icons-juiz a:hover {
    color:#bfd886;
    background-image: url(/images/button_green_off.png);
    background-repeat: no-repeat;
    background-position: center top;
}

#icons-juiz a:hover {
    color:#999;
    background-image: url(/images/button_on.png);
    background-repeat: no-repeat;
    background-position: center top;
    -webkit-transition: background-image 0.3s ease-in-out;
    -moz-transition: background-image 0.3s ease-in-out;
    -ms-transition: background-image 0.3s ease-in-out;
    -o-transition: background-image 0.3s ease-in-out;
    transition: background-image 0.3s ease-in-out;
}

.footer {
  	display: table-row;
  	height: 1px;
	color: #fff;
  	background-color: #000;
}

.footer-content {
    width: 96%;
    margin: 0 auto;
   	padding: 4px 2% 6px 2%;
    font-size:0.8em;
    line-height:1.8em;
   	text-align:center;
    color:#fff;
}

.footer-content a:link, .footer-content a:active, .footer-content a:visited, .footer-content a:hover {
    color:#fff;
  	text-decoration:none;
    -webkit-transition: color 0.3s ease-in-out;
    -moz-transition: color 0.3s ease-in-out;
    -ms-transition: color 0.3s ease-in-out;
    -o-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

.footer-content a:hover {
color:#a6a6a6;
}

/* Smartphones (portrait and landscape) ----------- */

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

#icons {
    width:60%;
}

}

/* Smartphones (portrait and landscape) ----------- */

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

#header {
  	height:85px;
}

#logo img {
	max-height:65px;
}

#image-left {
   display:none;
}

#image-center {
    width: 100%;
}

#image-center img {
    width: 94%;
    padding: 24px 2% 0 2%;
}

#image-center-teaz-juiz {
    background-image: url(/images/image-center-teaz-juiz.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size:100%;
}

#image-right {
   display:none;
}

#icons {
    width:80%;
}

#icons a:link, #icons a:active, #icons a:visited, #icons a:hover {
    font-size: 1.45em;
  	padding:24px 1px 0 1px;
}

#icons-teaz a:link, #icons-teaz a:active, #icons-teaz a:visited, #icons-teaz a:hover {
   background-size:30%;
}

#icons-juiz a:link, #icons-juiz a:active, #icons-juiz a:visited, #icons-juiz a:hover {
   background-size:30%;
}
    
}