/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/30580f");


@font-face {font-family: 'Radikal-Thin';src: url('../webfonts/30580F_0_0.eot');src: url('../webfonts/30580F_0_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/30580F_0_0.woff2') format('woff2'),url('../webfonts/30580F_0_0.woff') format('woff'),url('../webfonts/30580F_0_0.ttf') format('truetype');}


html, body {
    width:100%;
    min-height:101%;
    top:0;
    left:0;
    right:0;
    padding:0;
    boarder:0;
    margin:0;
    display: table;
    font-size:16px;
}

a.open-close {
        text-transform:uppercase;
        display:block;
        text-decoration:none;
}
a.open-close:hover {
}

#hidecont {
}

a.open-close2 {
        text-transform:uppercase;
        display:block;
        text-decoration:none;
}
a.open-close2:hover {
}

#hidecont2 {
}

a.open-close3 {
        text-transform:uppercase;
        display:block;
        text-decoration:none;
}
a.open-close3:hover {
}

#hidecont3 {
}

.page-row {
    display: table-row;
}

.page-row-expanded {
    height: 100%;
}

img {
    border:0;
}

img.lang {
    border:0;
    float:left;
    margin:0 19px 0 0;
}

main {

}

p {
    line-height:normal;
}

.galth {
    border:0;
    padding:0;
    margin:0;
    width:30%;
    margin:0 4% 0 0;
}

.galthx {
    border:0;
    padding:0;
    margin:0;
    width:30%;
    margin:0 0 0 0;
}

#top {
    background-image:url(../farben/top.jpg);
    height:20px;
    width:100%;
}

header {
    background-color:#56565a;
    height:100px;
    width:100%;
}

.mid {
    width:980px;
    margin:0 auto;
}

#leftinside {
    width:250px;
    height:100%;
    background-image:url(../farben/trans.png);
    position:absolute;
    z-index:2;
    font-family: 'Roboto Slab';
    font-weight:100;
    font-size:250%;
    text-align:center;
    color:#fff;
    padding-top:13%;
}

#leftinsideb {
    width:250px;
    height:100%;
    background-image:url(../farben/trans-blau.png);
    position:absolute;
    z-index:2;
    font-family: 'Roboto Slab';
    font-weight:100;
    font-size:220%;
    text-align:center;
    color:#fff;
    padding-top:17%;
}

#leftinsidec {
    width:250px;
    height:100%;
    background-image:url(../farben/trans-gelb.png);
    position:absolute;
    z-index:2;
    font-family: 'Roboto Slab';
    font-weight:100;
    font-size:220%;
    text-align:center;
    color:#fff;
    padding-top:17%;
}

#leftinsidec2 {
    width:250px;
    height:100%;
    background-image:url(../farben/trans-gelb.png);
    position:absolute;
    z-index:2;
    font-family: 'Roboto Slab';
    font-weight:100;
    font-size:220%;
    text-align:center;
    color:#fff;
    padding-top:16%;
}

#leftinsided {
    width:250px;
    height:100%;
    background-image:url(../farben/trans-rose.png);
    position:absolute;
    z-index:2;
    font-family: 'Roboto Slab';
    font-weight:100;
    font-size:220%;
    text-align:center;
    color:#fff;
    padding-top:17%;
}

#logo {
    position:absolute;
    width:250px;
    text-align:center;
    margin-top:-20px;
    z-index:100;
}

#lang {
    float:right;
    font-family: 'Roboto Slab';
    color:#fff;
    font-size:100%;
    font-weight:100;
    margin:5px 0 0 0;
}

a.lang {
    font-family: 'Roboto Slab';
    color:#fff;
}

#wrap        {
        width: 720px;
        height: 50px;
        float:right;
        margin:20px 0 0 0;
        }

#mobilenav {
     display:none;
}

#desknav {
     display:block;
}

.navbar        {
        height: 50px;
        padding: 0;
        margin: 0;
        position: absolute; /* Ensures that the menu doesn’t affect other elements */
        font-family: 'Roboto Slab';
        z-index:1000;
        }

.navbar li         {
                        height: auto;
                        width: 150px;  /* Each menu item is 150px wide */
                        float: left;  /* This lines up the menu items horizontally */
                        text-align: center;  /* All text is placed in the center of the box */
                        list-style: none;  /* Removes the default styling (bullets) for the list */
                        padding: 0;
                        margin: 0 10px 0 0;
                        font-family: 'Roboto Slab';
                        font-weight:400;
                        }

.navbar li.man         {
                        height: auto;
                        width: 180px;  /* Each menu item is 150px wide */
                        float: left;  /* This lines up the menu items horizontally */
                        text-align: center;  /* All text is placed in the center of the box */
                        list-style: none;  /* Removes the default styling (bullets) for the list */
                        padding: 0;
                        margin: 0 10px 0 0;
                        font-family: 'Roboto Slab';
                        font-weight:400;
                        }

.navbar a        {
                padding: 18px 0;
                margin:0;
                text-decoration: none;
                color: white;
                display: block;
                font-size:120%;
                }

.navbar li:hover, a:hover {
      color:#007481;
}


.navbar li ul         {
                display: none;  /* Hides the drop-down menu */
                height: auto;
                margin: -7px 0 0 -5px;
                padding: 0;
                }

.navbar li:hover ul         {
                        display: block; /* Displays the drop-down box when the menu item is hovered over */
                        }

.navbar li ul li {
     background-image:url(../farben/trans.png);
     padding:0 5px;
     font-weight:400;
     font-size:90%;
}


.navbar li ul li.man {
     background-image:url(../farben/trans.png);
     padding:0 5px;
     font-weight:400;
     font-size:90%;
     width:180px;
}


.navbar li ul li.do {
     background-image:url(../farben/trans.png);
     padding:0 5px;
     font-weight:400;
     font-size:90%;
     width:180px;
     margin-left:-15px;
}


.navbar li ul li a         {
                border-bottom:1px solid #fff;
                }

.navbar li ul li a.end         {
                border:0;
                }

.navbar li ul li a:hover        {
      color:#007481;
}


#secfirst {
    min-width:100%;
    padding:0;
    margin:0;
    border-bottom:8px solid #56565a;
    position:absolute;
    overflow:hidden;
}


section.first {

}

.topimage {
    width:100%;
    height:auto;
    overflow: hidden;
    padding:0;
    margin:0 0 -5px 0;
    border:0;
}

section.second {
    width:980px;
    margin:46% auto 0 auto;
    padding-bottom:50px;
}

section.secondx {
    width:980px;
    margin:10% auto 0 auto;
    padding-bottom:50px;
}

.maincell {
    width:700px;
    text-align:justify;
    float:left;
    color:#555555;
    font-family: 'Radikal-Thin';
}

.maincellbig {
    width:980px;
    min-height:500px;
    text-align:left;
    float:left;
    color:#555555;
    font-family: 'Radikal-Thin';
}

ul.text {
    margin:0;
    padding:0;
    border:0;
}

ul.text > li:before {
    content: "- ";
}

li.text {
    color:#007481;
    list-style-type: none;
    font-weight:bold;
}


.cells {
    width:300px;
    text-align:center;
    margin-right:40px;
    float:left;
    color:#555555;
    font-family: 'Radikal-Thin';
}

.cellsend {
    width:300px;
    text-align:center;
    float:left;
    color:#555555;
    font-family: 'Radikal-Thin';
}

hr.start {
    border:0;
    border-bottom: 2px solid #007481;
    margin:10px 0 20px 0;
}

.db-box1 {
    float:left;
    color:#9d4777;
    border-right:1px solid #007481;
    padding:0 20px 0 0;
    font-family: 'Roboto Slab';
    height:215px;
}

a.dbbox1 {
    color:#9d4777;
}

.db-box2 {
    float:left;
    color:#92928a;
    border-right:1px solid #007481;
    padding:0 20px 0 20px;
    font-family: 'Roboto Slab';
    height:215px;
}

a.dbbox2 {
    color:#92928a;
}

.db-box3 {
    float:left;
    color:#1aacba;
    border-right:1px solid #007481;
    padding:0 20px 0 20px;
    font-family: 'Roboto Slab';
    height:215px;
}

a.dbbox3 {
    color:#1aacba;
}

.db-box4 {
    float:left;
    color:#ae8511;
    border-right:1px solid #007481;
    padding:0 20px 0 20px;
    font-family: 'Roboto Slab';
    height:215px;
}

a.dbbox4 {
    color:#ae8511;
}

.db-box5 {
    float:left;
    color:#989518;
    padding:0 0 0 20px;
    font-family: 'Roboto Slab';
    height:215px;
}

a.dbbox5 {
    color:#989518;
}


footer {
    background-image:url(../farben/footer.jpg);
    width:100%;
    height:84px;
    margin:50px 0 0 0;
    float:left;
}


footer.x {
    background-image:url(../farben/footer.jpg);
    width:100%;
    height:84px;
    margin:50px 0 0 0;
    position:absolute;
    bottom:0;
}


#footerin {
    width:980px;
    margin:0 auto;
}

a.nav2 {
    font-family: 'Roboto Slab';
    font-weight:400;
    color:#fff;
    text-decoration:none;
}

#nav2 {
    float:left;
    font-family: 'Roboto Slab';
    font-weight:400;
    color:#fff;
    margin:45px 0 0 0;
}

ul.nav2 {
    padding:0;
    border:0;
    margin:0;
}

li.nav2 {
    padding:0 0 0 30px;
    border:0;
    margin:0;
    list-style-type:none;
    display:inline;
}

#copyright {
    float:right;
    font-family: 'Roboto Slab';
    text-align:right;
    font-weight:400;
    color:#fff;
    font-size:80%;
    margin:23px 0 0 0;
    line-height:1em;
}

a {
    color:#007481;
}

h1 {
    color:#007481;
    font-family: 'Roboto Slab';
    font-weight:400;
    font-size:200%;
    margin-bottom:0;
}

h2 {
    color:#007481;
    font-family: 'Roboto Slab';
    font-weight:400;
    font-size:150%;
    margin-bottom:0;
    text-decoration:underline;
}


h3 {
    color:#007481;
    list-style-type: none;
    font-weight:bold;
    font-family: 'Radikal-Thin';
    font-size:100%;
}

.downhead {
    width:372px;
    float:left;
    border-bottom:2px solid #007481;
    margin:-3px 0 0 10px;
    padding:0 0 3px 0;
    color:#007481;
    font-family: 'Roboto Slab';
}


/* Smartphones (portrait and landscape) ----------- */

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {

#mobilenav {
     display:block;
     left:8%;
     top:35%;
     position:absolute;
     z-index:999;
}

#desknav {
     display:none;
}

.box-shadow-menu {
  position: relative;
  padding-left: 1.25em;
  color:#fff;
  font-family: 'Roboto Slab';
  margin:0 0 0 0px;
  line-height:1em;
}

.box-shadow-menu:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1em;
  height: 0.15em;
  background: #fff;
  box-shadow:
    0 0.25em 0 0 #fff,
    0 0.5em 0 0 #fff;
}


#secfirst {
    min-width:100%;
    padding:0;
    margin:0;
    border-bottom:8px solid #56565a;
    position:absolute;
    overflow:hidden;
}


section.first {
}

.topimage {
    width:100%;
    height:auto;
    overflow: hidden;
    padding:0;
    margin:10% 0 -5px 0;
    border:0;
}

#wrap        {
        width: 50%;
        float:left;
        margin:-8% 0 0 0;
        }

section.second {
    width:100%;
    margin:55% auto 0 auto;
    padding-bottom:50px;
}

section.secondx {
    width:100%;
    margin:30% auto 0 auto;
    padding-bottom:50px;
}

.maincell {
    width:80%;
    text-align:justify;
    float:left;
    margin:0 5% 0 5%;
    color:#555555;
    font-family: 'Radikal-Thin';
}

.maincellbig {
    width:90%;
    text-align:left;
    float:left;
    margin:0 5% 0 5%;
    color:#555555;
    font-family: 'Radikal-Thin';
}

#top {
    background-image:url(../farben/top.jpg);
    height:20px;
    width:100%;
}

header {
    background-color:#56565a;
    height:20%;
    width:100%;
    position:absolute;
    top:20px;
    z-index:100;
}

#logo {
    position:absolute;
    width:50%;
    position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    z-index:100;
}

.imglogo {
    max-width:40%;
}

#lang {
    float:right;
    font-family: 'Roboto Slab';
    color:#fff;
    font-size:80%;
    font-weight:100;
    margin:4% 8% 0 0;
}

.mid {
    width:100%;
}

.galth {
    border:0;
    padding:0;
    margin:0;
    width:28%;
    margin:0 4% 0 0;
}

.galthx {
    border:0;
    padding:0;
    margin:0;
    width:28%;
    margin:0 0 0 0;
}

#leftinside {
display:none;
}

#leftinsideb {
display:none;
}

#leftinsidec {
display:none;
}

#leftinsidec2 {
display:none;
}

#leftinsided {
display:none;
}

section.second {
    width:100%;
    margin:60% auto 0 auto;
    padding-bottom:50px;
}

section.secondx {
    width:100%;
    margin:30% auto 0 auto;
    padding-bottom:50px;
}

.cells {
    width:100%;
    text-align:center;
    float:left;
    color:#555555;
    font-family: 'Radikal-Thin';
    font-size:70%;
}

.cellsend {
    width:100%;
    text-align:center;
    float:left;
    color:#555555;
    font-family: 'Radikal-Thin';
    font-size:70%;
}

#footerin {
    width:100%;
    margin:0 auto;
}


#nav2 {
    float:left;
    font-family: 'Roboto Slab';
    font-weight:400;
    color:#fff;
    margin:8% 0 0 0;
}

.downhead {
    width:50%;
    float:left;
    border-bottom:2px solid #007481;
    margin:-3px 0 0 10px;
    padding:0 0 3px 0;
    color:#007481;
    font-family: 'Roboto Slab';
}

hr.start {
    border:0;
    border-bottom: 2px solid #007481;
    margin:10px auto 20px auto;
    width:90%;
}

h1 {
    color:#007481;
    font-family: 'Roboto Slab';
    font-weight:400;
    font-size:150%;
    margin-bottom:0;
}

h2 {
    color:#007481;
    font-family: 'Roboto Slab';
    font-weight:400;
    font-size:120%;
    margin-bottom:0;
    text-decoration:underline;
}


h3 {
    color:#007481;
    list-style-type: none;
    font-weight:bold;
    font-family: 'Radikal-Thin';
    font-size:100%;
}
}

/*  ------- Smartphone Portrait  -------   */

@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {


header {
    background-color:#56565a;
    height:10%;
    width:100%;
    position:absolute;
    top:20px;
    z-index:100;
}

#mobilenav {
     display:block;
     left:8%;
     top:28%;
     position:absolute;
     z-index:999;
}


.topimage {
    width:100%;
    height:auto;
    overflow: hidden;
    padding:0;
    margin:14% 0 -5px 0;
    border:0;
}

#logo {
    position:absolute;
    width:70%;
    position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    z-index:100;
}

.imglogo {
    max-width:40%;
}

section.second {
    width:100%;
    margin:65% auto 0 auto;
    padding-bottom:50px;
}

section.secondx {
    width:100%;
    margin:30% auto 0 auto;
    padding-bottom:50px;
}


.navbarmob li ul         {
                display: none;  /* Hides the drop-down menu */
                height: auto;
                margin: -10px 0 0 -5px;
                padding: 0;
                }

#leftinside {
display:none;
}

#leftinsideb {
display:none;
}

#leftinsidec {
display:none;
}

#leftinsidec2 {
display:none;
}

#leftinsided {
display:none;
}
}



/*  -------  ipad Portrait  -------   */

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {

.maincell {
    width:80%;
    text-align:justify;
    float:left;
    margin:0 5% 0 5%;
    color:#555555;
    font-family: 'Radikal-Thin';
}

.maincellbig {
    width:90%;
    text-align:left;
    float:left;
    margin:0 5% 0 5%;
    color:#555555;
    font-family: 'Radikal-Thin';
}

.galth {
    border:0;
    padding:0;
    margin:0;
    width:30%;
    margin:0 4% 0 0;
}

.galthx {
    border:0;
    padding:0;
    margin:0;
    width:30%;
    margin:0 0 0 0;
}


#mobilenav {
        display:none;
}

#desknav {
     display:block;
}


.navbar        {
        height: 50px;
        padding: 0;
        margin: 0;
        width:80%;
        position: absolute; /* Ensures that the menu doesn’t affect other elements */
        font-family: 'Roboto Slab';
        z-index:1000;
        }

.navbar li         {
                        height: auto;
                        width: 22%;  /* Each menu item is 150px wide */
                        float: left;  /* This lines up the menu items horizontally */
                        text-align: center;  /* All text is placed in the center of the box */
                        list-style: none;  /* Removes the default styling (bullets) for the list */
                        padding: 0;
                        margin: 0 1% 0 0;
                        font-family: 'Roboto Slab';
                        font-weight:400;
                        }

.navbar li.man         {
                        height: auto;
                        width: 30%;  /* Each menu item is 150px wide */
                        float: left;  /* This lines up the menu items horizontally */
                        text-align: center;  /* All text is placed in the center of the box */
                        list-style: none;  /* Removes the default styling (bullets) for the list */
                        padding: 0;
                        margin: 0 1% 0 0;
                        font-family: 'Roboto Slab';
                        font-weight:400;
                        }

.navbar a        {
                padding: 18px 0;
                margin:0;
                text-decoration: none;
                color: white;
                display: block;
                font-size:120%;
                }

.navbar li:hover, a:hover {
      color:#007481;
}


.navbar li ul         {
                display: none;  /* Hides the drop-down menu */
                height: auto;
                margin: -10px 0 0 -5px;
                padding: 0;
                }

.navbar li:hover ul         {
                        display: block; /* Displays the drop-down box when the menu item is hovered over */
                        }

.navbar li ul li {
     background-image:url(../farben/trans.png);
     padding:0 5px;
     font-weight:400;
     font-size:90%;
     width:140px;
}


.navbar li ul li.man {
     background-image:url(../farben/trans.png);
     padding:0 5px;
     font-weight:400;
     font-size:90%;
     width:180px;
}


.navbar li ul li.do {
     background-image:url(../farben/trans.png);
     padding:0 5px;
     font-weight:400;
     font-size:90%;
     width:180px;
     margin-left:-15px;
}


.navbar li ul li a         {
                border-bottom:1px solid #fff;
                }

.navbar li ul li a.end         {
                border:0;
                }

.navbar li ul li a:hover        {
      color:#007481;
}


 }