@charset "utf-8";

/* Body */
body {
    margin: 0px;
    background-color: #FFFFFF;
    font-family: Georgia, serif;
    font-size: 100%;
    text-align: justify;
    color: #000000;
    line-height: 130%;
}

a {
   color: #F20813;
   text-decoration: none;
   cursor: pointer;
}
a:hover {
    color: #EA5E6F;
}

div#wrapper {
    width: 1024px;
    margin: 1px auto;
    border: solid 1px;
    border-color: #EA5E6F;
    /*overflow-y : auto;    */
}

header {
    line-height: 140%;
    font-size: 220%;
    font-weight: bold;
    font-family: Verdana, Geneva, sans-serif;
    text-align: center;
    text-shadow: 4px 4px 4px #F20813;
    margin: 0px 0px 0px 0px;
    color: #FFFFFF;
    background-image: url(../images/bg.jpg);
    background-size: cover;
    opacity: 0.7;
    background-position: center;
    background-repeat: no-repeat;
}

header span {
    color: #EBE8E8;
    font-size: 60%;
    font-style: italic;
}

nav {
    background-color: #CC0000;
    max-width: 100%;
    padding: 10px 0;
    margin: 10px 0;
    color: #FFFFFF;
    text-align: center;
    line-height: 10%;
}
nav a {
    color: #FFFFFF;
    margin: 0 5px;
    text-decoration: none;
}
nav a:first-child { margin-left: 0px;}
nav a:hover { color: #000000; font-style: italic;}
nav a:active { color: #000000;}

div article {
     margin: 0 20px 20px 20px;

}

table {
    margin: 0 10px 0 10px;
    border-collapse: collapse;
    width: 98%;
}

table, th, tr, td {border-bottom: 1px solid #F20813; text-align: left;}
tr:nth-child(even) {background-color: #f2f2f2;}

img{
    max-width: 60%;
    border: solid 1px;
    border-top-color: #333333;
    border-left-color: #333333;
    -webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
}

footer {
    width: 1024px;
    margin: 20px auto;
    font-size: 80%;
    text-align: center;
    line-height: 110%;
    padding: 0px;
    color: #000000;
}
.centerP {
    text-align: center;
}


/* Responsive*/
@media only screen
and (min-width: 800px)
and (max-width: 1024px){
    div#wrapper {width: 800px}
    header {font-size: 150%}
    p#headerp {font-size: 90%}
    div#referenzen {font-size: 90%}
    div#referenzen figure img {max-width: 23%}
    nav {font-size: 50%; text-align: : center}
    div#closeref-wiev {width: 800px;}
    section {width:800px; font-size: 100%; text-align: : center}
    footer {width: 800px; font-size: 90%}
    div#impressum-content {width: 800px; font-size: 60%}
    div#agb-content {width: 800px; font-size: 60%}
    h2 {font-size: 100%}
    label {width:150px;}
    textarea {width:400px;}
    #order {
    max-width: 100%;
    font-size: 100%;
    margin: 10px auto;}
}
}
@media only screen
and (min-width: 600px)
and (max-width: 800px){
    div#wrapper {width: 700px}
    header {font-size: 130%}
    p#headerp {font-size: 70%}
    div#referenzen {font-size: 75%}
    div#referenzen figure img {max-width: 18%}
    nav {font-size:50%; text-align: : center}
    div#closeref-wiev {width: 700px;}
    section {width:700px; font-size: 80%; text-align: : center}
    footer {width: 700px; font-size: 80%}
    div#impressum-content {width: 700px; font-size: 80%}
    div#agb-content {width: 700px; font-size: 80%}
    h2 {font-size: 100%}
    label {width:150px;}
    textarea {width:290px;}
    #order {
    max-width: 100%;
    font-size: 80%;
    margin: 10px auto;}
}
}
@media only screen
and (min-width: 480px)
and (max-width: 600px){
    div#wrapper {width: 500px}
    header {font-size: 110%}
    p#headerp {font-size: 70%}
    div#referenzen {font-size: 40%}
    div#referenzen figure img {max-width: 24%}
    nav {font-size: 50%; text-align: : center}
    div#closeref-wiev {width: 500px;}
    section {width:500px; font-size: 70%; text-align: : center}
    footer {width: 500px; font-size: 70%}
    div#impressum-content {width: 480px; font-size: 70%}
    div#agb-content {width: 480px; font-size: 70%}
    h2 {font-size: 90%}
    label {width:150px;}
    textarea {width:290px;}
    #order {
    max-width: 100%;
    font-size: 80%;
    margin: 10px auto;}
}
@media only screen
and (min-width: 320px)
and (max-width: 480px){
    div#wrapper {width: 320px}
    header {font-size: 100%}
    p#headerp {font-size: 70%}
    #referenzen {width: 100px;}
    div#referenzen {font-size: 40%}
    div#referenzen figure img {max-width: 23%}
    nav {font-size: 50%; text-align: : center}
    div#closeref-wiev {width: 300px;}
    section {width:320px; font-size: 65%; text-align: : center}
    footer {width: 320px; font-size: 60%}
    div#impressum-content {width: 320px; font-size: 60%}
    div#agb-content {width: 320px; font-size: 60%}
    h2 {font-size: 90%}
    label {width:150px;}
    textarea {width:290px;}
    #order {
    max-width: 100%;
    font-size: 80%;
    margin: 10px auto;}
}
@media only screen
and (min-width: 240px)
and (max-width: 320px){
    div#wrapper {width: 240px}
    header {font-size: 90%}
    p#headerp {font-size: 60%}
    #container {width: 200px}
    div#referenzen {font-size: 60%}
    div#referenzen figure img {max-width: 19%}
    nav {font-size: 50%; text-align: : center}
    div#refmenu-content:{ width: 10%;}
    section {width:240px; font-size: 60%; text-align: : center}
    footer {width: 240px; font-size: 60%}
    div#impressum-content {width: 240px; font-size: 60%}
    div#agb-content {width: 240px; font-size: 60%}
    h2 {font-size: 90%}
    label {width:150px;}
    textarea {width:190px;}
    #order {
    max-width: 100%;
    font-size: 80%;
    margin: 10px auto;}
}

}