body
{
max-width: 900px;
width: auto;
margin: 0 auto;
border-top: 8px solid #004B87;
border-bottom: 8px solid #004B87;
background: #FFFFFF;
font-family: arial, sans-serif;
color: #000000;
font-size:14px; 
}

a
{
text-decoration: none;
color: #D00000;
transition: color .5s ease;
}

a:hover
{
text-decoration: underline;
color: #FF0000;
}

article h1
{
font-size: 48px;
line-height: 20px;
font-weight: bold;
margin: 20px 0;
}

article h2
{
font-size: 42px;
line-height: 48px;
font-weight: bold;
margin: 20px 0;
}

article h3
{
font-size: 36px;
line-height: 20px;
font-weight: bold;
margin: 20px 0;
}

article h4
{
font-size: 16px;
line-height: 20px;
font-weight: bold;
margin: 20px 0;
}

article p
{
font-size: 14px;
line-height: 20px;
margin: 10px 0;
}

hr
{
height:6px;
width:6%;
text-align:left;
border:0;
margin-left:0;
color:#004B87;
background-color:#004B87;
}


/* ----------------- BOXCONTENT ------------------ */


#boxcontent
{
position: relative;
padding: 10px 0;
}

#boxcontent article
{
padding-top: 10px;
}

.logo3
{
width:auto;
text-align: center;
margin: 20px 0;
}



/* ------------------------ Logos -------------- */


#logos article
{
float:left;
}

.logo1
{
width:50%;
text-align: left;
margin: 20px 0;

}
.logo2
{
width:50%;
text-align: right;
margin: 20px 0;
}


/* ------------------------ Beispiele -------------- */


#beispiele article
{
float:left;
}

.ref
{
width:130px;
margin-right: 20px;
margin-bottom: 20px;
}

.ref p
{
font-size: 16px;
line-height: 20px;
font-weight: bold;
margin: 10px 0;
}


/* ----------------- DSE ------------------ */

#dse h1
{
font-size: 16px;
line-height: 20px;
font-weight: bold;
margin: 20px 0;
}

#dse h2

{
font-size: 14px;
line-height: 20px;
font-weight: bold;
}

#dse h3

{
font-size: 13px;
line-height: 20px;
font-weight: bold;
}
#dse h4

{
font-size: 12px;
line-height: 20px;
font-weight: bold;
}
#dse p
{
font-size: 12px;
line-height: 20px;
margin: 10px 0;
}

#dse ul li
{
font-size: 12px;
line-height: 20px;
list-style-type: disc;
margin-left: 20px;
}


/* ------------------------ Footer -------------- */

footer
{
position:relative;
clear:both;
width:auto;
margin-top: 10px;
margin-bottom: 20px;
}

#copyright
{
position:absolute;
bottom:0;
left:0;
width:100%;
}

#copyright .wrapper
{
padding:5px;
font-size:13px;
position:relative;
text-align: center;
}

#copyright a
{
color:#000000;
}



/* MISC */

.clear
{
clear:both;
}

.hidden
{
position:absolute;
clip: rect(1px 1px 1px 1px); /* IE6 & 7 */
clip: rect(1px, 1px, 1px, 1px);
}

sup
{
font-size: 11px;
vertical-align:super;
}

sub
{
font-size: 11px;
vertical-align:sub;
}

.klein
{
font-size: 11px;
line-height: 13px;
}

.rechts
{
text-align: right;
}

.center
{
text-align: center;
}

.block
{
text-align: justify;
}

strong
{
font-weight: bold;
}

/* MEDIA QUERIES FOR A RESPONSIVE LAYOUT */

@media (max-width: 500px)
{
body
{
margin: 0 20px;
}

hr
{
width: 10%;
}

/* ------------------------ Logos -------------- */


.logo1
{
max-width:50%;
text-align: left;
margin: 1em 0;

}
.logo2
{
max-width:50%;
text-align: right;
margin: 1em 0;
}
.logo3
{
max-width:100%;
text-align: center;
margin: 20px 0 0 0;
}

#logo1a, #logo2a
{
width: auto;
height: 60px;
}
#logo3a
{
width: auto;
height: 40px;
}

}

@media (max-width: 900px)
{


}