html, body {
    width: 100%;
    height: 100%;
    margin: 0 0 0 0;
    font-family: Arial;
    background-color: #333333;
    background-image: url(../images/background.jpg);
    background-size: 50%
}

/* override bootstrap styles */
h1, h2, h3 {
    margin-top: 0px;
    margin-bottom: 2%
}

h1 {
    font-size: 5vw;
    text-align: center;
    font-weight: normal
}

p {
    font-size: 1.2vw
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%
}

.centered {
    text-align: center;
    margin-left: 9.5%;
    margin-right: 9.5%
}

#header {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 5%;
    background-color: #333333;
    display: table;
    z-index: 100
}

#header span {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    padding-right: 1%;
    color: #ffffff;
    font-size: 0.9vw
}

#header span a {
    text-decoration: none;
    color: #ffffff;
    font-size: 0.9vw
}

#main {
    position: absolute;
    top: 5%;
    left: 0px;
    width: 100%;
    height: 95%
}

#menu {
    position: fixed;
    left: 0px;
    top: 5%;
    width: 20%;
    min-height: 100%;
    background-color: rgba(255, 255, 255, 0.25)
}

#content {
    position: absolute;
    left: 25%;
    top: 3%;
    height: 90%;
    width: 58%;
    z-index: 1
}
@media screen and (orientation:portrait) {
    #content {
        width: 75%;
    }
}

#menu ul li {
    background-color: #333333;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 10%;
    font-size: 2vw;
    text-align: center;
    box-shadow: 0px 0px 30px #000000;
}

#menu ul li:hover {
    background-color: #111111;
    transition: .5s
}

#menu ul li a {
    margin: 0px;
    display: block;
    width: 100%;
    height: 100%;
    color: #ffffff;
    text-decoration: none
}

#tree {
    position: fixed;
    right: 0px;
    bottom: 0px;
    background-image: url(../images/baum.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right bottom;
    width: 20%;
    height: 75%
}

#logo {
    width: 80%;
    margin: 10%;
    display: block
}

#whiteBox {
    background-color: rgba(255, 255, 255, 0.66);
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
    margin-bottom: 2%;
    min-height: 100%;
    overflow: auto
}

/* start page */

#start {
    margin-top: 2%
}

.button {
    float: left;
    width: 33%;
    background-color: #333333;
    font-size: 3vw;
    text-align: center;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
    color: #ffffff;
    box-shadow: 0px 0px 30px #000000
}

.button a {
    margin: 0px;
    display: block;
    width: 100%;
    height: 100%;
    color: #ffffff;
    text-decoration: none
}

.button:hover {
    background-color: #111111;
    transition: .5s
}

/* article page */
.article {
    margin-top: 5%
}
.articleText {
    float: left;
    width: 50%;
    text-align: center;
    margin-bottom: 2%
}
.articleImage {
    float: left;
    width: 50%;
    margin-bottom: 2%
}
.articleImage img {
    margin-left: 10%;
    width: 90%
}

/* galerie page */
#galerieHeadline {
    background-color: rgba(255, 255, 255, 0.66);
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
    margin-bottom: 2%;
    overflow: auto
}

#galerieHeadline h1 {
    margin-bottom: 0%
}

.standaloneGallery {
    padding-bottom: 5%
}

/* kontakt page */
.kontaktForm input {
    width: 100%;
    margin-bottom: 2%
}
.kontaktForm textarea {
    width: 100%
}
.kontaktForm #Thema {
    height: 2vw;
    width: 25%
}

.field-validation-error {
    color: red;
    float: right
}
.submitButton {
    float: left;
    background-color: #333333;
    text-align: center;
    padding-top: 0.08em;
    padding-bottom: 0.08em;
    color: #ffffff;
    box-shadow: 0px 0px 30px #000000;
    border: none;
    font-size: 1.9vw
}
.submitButton:hover {
    transition: .5s;
    background-color: #111111
}
#messageBox {
    background-color: rgba(255, 255, 255, 0.66);
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5%;
    padding-bottom: 5%;
    position: relative;
    top: 35%
}
#messageBox p {
    text-align: center;
    font-size: 2vw
}
#messageBox p.error {
    color: red
}

/* references page */
.references IMG {
    display: block;
    margin-left: auto;
    margin-right: auto
}

/* videos page */
.video {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 100%
}

#impressum p {
    font-size: 1vw
}