/* CSS Stylesheet by dialog im netz http://dialog-im-netz.de
                                    */

@font-face {
	font-family: 'dg';
	src: url('/webfont/hinted-DroidSans.eot');
	src: local('Droid Sans'), local('DroidSans'),
		url('/webfont/hinted-DroidSans.eot?#iefix') format('embedded-opentype'),
		url('/webfont/hinted-DroidSans.woff2') format('woff2'),
		url('/webfont/hinted-DroidSans.woff') format('woff'),
		url('/webfont/hinted-DroidSans.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'dg';
	src: url('/webfont/hinted-DroidSans-Bold.eot');
	src: local('Droid Sans Bold'), local('DroidSans-Bold'),
		url('/webfont/hinted-DroidSans-Bold.eot?#iefix') format('embedded-opentype'),
		url('/webfont/hinted-DroidSans-Bold.woff2') format('woff2'),
		url('/webfont/hinted-DroidSans-Bold.woff') format('woff'),
		url('/webfont/hinted-DroidSans-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}


html,blockquote,body,div,dl,dt,dd,fieldset,form,
h1,h2,h3,h4,h5,h6,ol,p,ul,li,center,hr,pre,img,
table,tr,td,th,thead,tbody,tfoot,caption  {
margin:0;
padding:0;
border:0 none;
font-size: 1em;
}
body {
color: #4c617b;
background: #8394A6 url(/img/bg.jpg) left bottom no-repeat fixed;
font-family:dg,Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 160%
}
a {
color: #4c617b;
border:none;
outline: none;
}
a:hover,
a:focus {
outline: none;
}
td {
vertical-align:top
}
h1{
clear: left;
margin: 0 0 25px;
font-size:40px;
}
h2{
margin: 1em 0 .5em;
font-size: 30px;
}
h1,h2{
font-family: Georgia, sans-serif;
font-weight: normal;
line-height: 140%
}
p,ul,h3 {
margin: 0 0 1em 0
}
/*  :first-of-type */
table {
border-collapse: collapse
}
.tc {
text-align: center
}
.tr {
text-align: right
}
ul {
padding-left: 16px
}
li {
vertical-align:middle
}
.hide, .h0 {
display:none
}
.bold {
font-weight: bold
}
img{
display: block;
border: none;
height: auto;
 -ms-interpolation-mode: bicubic; 
}

sub {
position: relative; 
font-size: 9px; 
bottom: -4px;
font-weight: normal;
}
sup {
position: relative; 
font-size: 9px; 
top: -2px;
font-weight: normal;
}
.clear {
clear: both
}
.noline {
text-decoration: none
}
.bildlinks,
.floatleft {
float: left;
margin: 0 10px 5px 0
}
.bildrechts,
.floatright {
float: right;
margin: 0 0 5px 10px
}
.klein{
font-size:11px;
}
.rot,
.red {
color: red
}
div,
nav,
main,
section,
header,
article,
footer {
display: block;
position: relative;
box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

/* DIVS */ 
/* STARTSEITE */
#start,
#start1,
#start2,
#start3,
#start4{
position: fixed;
left: 130px;
top: 90px;
font-size: 50px;
color: white;
opacity: 0;
transition: 4s;
font-family: Georgia, sans-serif;
}
#start4 a {
text-decoration: none
}
#start {
transition: 2s;
}
#start4{
color: #4c617b;
top: calc(50% - 25px);
left:0;
right:0;
text-align: center;
}
#skip {
display: block;
position: fixed;
width: 80px;
bottom: 40px;
right: 40px;
height: auto;
padding: 10px;
text-align: center;
color: #F2C989;
text-decoration: none
}
#contentbg {
left:0;
top:0;
bottom:0;
width:500px;
position: fixed;
background-color: rgba(255,238,190,0.8);
}
#content {
width:100%;
max-width:500px;
padding: 30px;
}
#logo {
display:block;
width: calc(100% - 62px)
}
#beispiel{
padding: 20px 20px 10px;
background-color: #4c617b;
min-height: 580px
}
#beispiel img {
display: block;
width:100%;
margin-bottom:1em
}
#beispiel h2,
#beispiel p {
display: block;
color: white;
}
#beispiel a {
color:  white
}
#beispiel h2 {
font-weight normal;
font-size: 24px;
margin-top: 0
}
article img {
width:100%
}

/* Navigation */


#hamburger-button {
position: relative;
display: inline-block;
float:left;
width:62px;
height:80px;
background: transparent url(/img/hamburger.png) 0 0 no-repeat;
cursor: pointer;
z-index: 2
}
#hidenav{
position: absolute;
display: none;
width:62px;
height:80px;
z-index: 3;
}
#nav {
position: fixed;
top: 30px;
left: 90px;
width:0;
height:0;
padding: 10px 0px;
overflow: hidden;
transition: .4s;
background-color: rgba(255,255,255,0.9);
box-shadow: 3px 6px 14px #303030
}
#nav a {
display: block;
width:120px;
text-decoration: none;
padding: 2px 11px;
margin: 0 2px;
white-space: nobreak;
font-weight: bold
}
#nav a:hover,
#nav a.active {
background-color: #C4C6C8
}
#bnav {
padding: 10px 0;
margin: 0 auto;
max-width: 460px;
overflow: visible;
}
#bnavinnen {
margin: 0 auto;
}
@media screen and (max-width: 500px) {

#start,
#start1,
#start2,
#start3,
#start4{
left: 20px;
top: 20px;
font-size: 30px;
line-height: 150%
}

#start4{
top: calc(50% - 25px);
left:0;
right:0;
text-align: center;
}
#content {
padding: 20px 10px
}


}
@media print {

}