body, html {
    font-family: 'Source Sans Pro', helvetica, sans-serif;;
    font-weight: 200;
    width: 100%;
    height: 100%;
    background-color: rgba(210, 210, 210, 1);
}

.section {
    text-align: center;
    background-size: cover;
}

#section0 {
    background-image: url(../img/page1.jpg);
}

#section2 {

}

#section3 {
    color: #ffffff;
    background-image: url(../img/page2.jpg);
}

#section4 {
    background-color: rgba(85, 85, 85,0.2);
}

#section5 {
    color: #ffffff;
    background-image: url(../img/page2.jpg);
}

/*
    ################# Content #################
*/

.content {
    height: 100%;
    padding: 12% 300pt 0;
}

.content h2 {
    font-weight: 400;
    color: #565562;
    font-size: 30pt;
    text-align: center;
    margin: 0;
    padding: 0;
}

.content .valueFull {
    max-height: 40%;
    min-height: 320pt;
    min-width: 400pt;
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 0 8pt 8pt 0;
    padding: 25pt 10pt 10pt 10pt;
    position: relative;
}

.content .fem {
    max-height: 40%;
    min-height: 320pt;
    min-width: 400pt;
    background-color: #ffffff;
    border-radius: 0 8pt 8pt 0;
    padding: 10pt;
    position: relative;
    background-image: url('../img/fem.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
}

.content .value {
    max-height: 40%;
    min-height: 320pt;
    min-width: 400pt;
    background-color: rgba(134, 134, 134,0.2);
    border-radius: 0 8pt 8pt 0;
    overflow: auto;
    text-align: left;
    font-size: 14pt;
    line-height: 150%;
    padding: 10pt 0% 10pt 220pt;
    position: relative;
}

.content .value-all {
    max-height: 40%;
    min-height: 320pt;
    min-width: 400pt;
    background-color: rgba(134, 134, 134,0.2);
    border-radius: 0 8pt 8pt 0;
    overflow: auto;
    text-align: left;
    font-size: 14pt;
    line-height: 150%;
    padding: 0pt;
    position: relative;
}

.content .lists ul {
    width: 40%;
    display: inline-block;

}

.content .value .address {
    margin: 20pt 0 30pt 0 ;
}
.content .value .tel {
    margin: 5pt 0 0 0 ;
}

.content .value .tel .col {
    display: inline-block;
    width: 100px;
}

.content .value .img {
    background-size: cover;
    width: 210pt;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
}

@media (max-width:1200px) {
    .content .value .img {
        display: none;
    }

    .content .value {
        min-height: 300pt;
        min-width: 400pt;
        padding-left: 10pt;
    }
}

.contentTitle {

    right: 20pt;
    bottom: 20pt;
    position: absolute;
    font-size: 60pt;
    text-align: right;
    margin: 0 0 0 0;
    color: #7f7f7f;
}

.welcome {
    margin: 0 auto 0;
    width: 60%;
    padding-top: 200pt;
    font-size: 18pt;
    text-align: right;
}

#startmenu {
    padding: 0;
    margin: 0 auto;
    list-style: none;
    text-align: center;
}

#startmenu li {
    display: inline-block;
    margin: 50pt 5pt 0;
}

#startmenu li a {
    text-decoration: none;
    font-size: 20pt;
    background-color: rgba(134, 134, 134,0.2);
    padding: 5pt 10pt;
    border-radius: 4pt;
    color: #000000;
}

#startmenu li:hover a {
    background-color: #565562;
    color: #ffffff;
}

/*
    ################# Logo #################
*/

#logo {
    margin:  0 ;
    position: absolute;
    z-index: 30;

}

#logo h1 {
    -webkit-transition: all 1s;
    transition: all 1s;
    text-align: right;
    margin: 30pt 0 0 50pt;
}

#logoDr, #logoDrLight {
    width: 200pt;
    -webkit-transition: all 1s;
    transition: all 1s;
    margin: 30pt 0 0 50pt;
}

#logo h1 a {
    text-decoration: none;
    color: #000000;
    font-size: 40pt;
    font-weight: 200;
    -webkit-transition: all 1s;
    transition: all 1s;
    white-space: nowrap;
}

#logo h1 span {
    display: block;
    font-size: 30pt;
    font-weight: 200;
    color: #7f7f7f;
    padding: 0 0 0 2pt;
    -webkit-transition: all 1s;
    transition: all 1s;
    white-space: nowrap;
}

#logo.section3 #logoDrLight {
    display: block;
}

#logo #logoDrLight {
    display: none;
}

#logo.section3 #logoDr {
    display: none;
}


#logo.section2 h1 {
    margin: 30pt 0 0 50pt;
    padding: 5pt 0 0 5pt;
}
#logo.section2 h1 a {
    font-size: 30pt;
}

#logo.section2 h1 span {
    font-size: 20pt;
    color: #565562;
    transform: rotate(0deg);
    margin: 0;
}

#logo.section3 a {
    color: #ffffff;
}

#logo.section3 h1 span {
    color: #ffffff;
}

#backgroundImage1 {
    position: absolute;
    -webkit-transition: all 1s;
    -webkit-transition-timing-function: linear; /* Safari and Chrome */
    transition-timing-function: linear;
    transition: all 1s;
    width: 10%;
    top: -10%;
    left: 75%;
    right: auto;

}

#backgroundImage2 {
    position: absolute;
    -webkit-transition: all 1s;
    -webkit-transition-timing-function: linear; /* Safari and Chrome */
    transition-timing-function: linear;
    transition: all 1s;
    width: 25%;
    top: -10%;
    left: 120%;
    right: auto;

}

#backgroundImage1.section2 {
    width: 30%;
    top: -10%;
    left: 70%;
    z-index: 0;
}

#backgroundImage2.section2 {
    width: 40%;
    top: -10%;
    left: 70%;
    z-index: 0;
}

#backgroundImage1.section3, #backgroundImage2.section3 {
    top: -500pt;
}

/*
    ################# MENU #################
*/
#menu {
    margin-left: -500pt;
    list-style: none;
    padding: 0;
    margin-top: 80pt;
    width: 180pt;
    -webkit-transition: all 1s;
    transition: all 1s;
    -webkit-transition-timing-function: ease-out; /* Safari and Chrome */
    transition-timing-function: ease-out;
}

#menu li {
    margin: 5pt 0;
    passing: 0;
    border-radius: 0 4pt 4pt 0;
}

#menu li:hover a {
    background-color: #565562;
    color: #ffffff;
}

#menu li a {
    text-decoration: none;
    color: #000000;
    font-size: 18pt;
    display: block;
    text-align: right;
    padding: 10pt;
    display: block;
    border-radius: 0 4pt 4pt 0;
    background-color: rgba(134, 134, 134,0.2);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

#menu li.active a {
    background-color: rgba(134, 134, 134,0.6);
    font-weight: 400;
}

#menu li.active a:hover {
    color: #000000;
}

#menu.section2 {
    margin-left: 0pt;
}

.head {
    font-weight: 500;
    margin-top: 5pt;
}

.list {
    margin: 0;
    font-size: 12pt;
}

.referenzen  {
    list-style: none;
    padding: 0;
    margin: 0;
    height: 100%;
}


.referenzen li .branche {
    width: 180pt;
    cursor: pointer;
    padding: 2pt 2pt 2pt 4pt;
    border-bottom: 1px solid #D9D9D9;
}

.referenzen li:last-child .branche {
    border-bottom: 0;
}

.referenzen li:hover .branche, .referenzen li.active .branche {
    background-color: rgba(86, 85, 98, 0.7);
    color: #ffffff;
}

.referenzen li ul {
    display: none;
    list-style: square;
    width: calc(100% - 216pt);
    position: absolute;
    top: 0;
    left: 186pt;
    background-color: rgba(86, 85, 98, 0.7);
    color: #ffffff;
    height: calc(100% - 2pt);
    border-radius: 0 4pt 4pt 0;
    padding-top: 2pt;
}

.referenzen li:hover ul, .referenzen li.active ul {
    display: block;
}