/*! Copyright (c) Martin Nathansen, 02.05.2023 */

* { margin: 0; padding: 0; border: 0; }

html, body, div, span, h1, h2, h3, h4, h5, h6, p, ol, ul, li, form, label, legend, caption,
aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video { display: block; }

body { -webkit-tap-highlight-color: rgb(255,255,158); }
ol, ul { list-style: none; }
a img { border: none; }

::selection { background: rgb(255,255,158); }
::-moz-selection { background: rgb(255,255,158); }
img::selection { background: transparent; }
img::-moz-selection{ background: transparent; }

/* layout ****************************/
body {
width: 100%;
color: #555;
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
background: #BBB;
background: url(../images/bg2dark.png) top repeat-x, url(../images/bg1lite.png) repeat;
overflow-y: scroll;
}
* html body { background: #FFF; }

#wrapper {
width: 95%;
margin: 1.3em auto 1em auto;
background: #FFF; 
background: rgba(255,255,255,0.7); 
overflow: hidden;
border-radius: 4px;
}
* html #wrapper { width: 1200px; }
.mw3home { max-width: 1150px; }
.mw1sec { max-width: 1150px; }
.mw1imp { max-width: 1000px; }

header, article, footer {
clear: both;
float: left;
width: 100%;
background: transparent;
}

#logo, #wbdlogo {
float: left;
height: 3em;
margin: 0.5em 0 0 0.7em;
padding-top: 0.2em;
background: transparent;
cursor: pointer;
border: 1px solid transparent;
border-radius: 2px;
overflow: hidden;
}

#navi1, #menu-btn { float: right; background: transparent; }

.sec1, .sec3multi, .sec3a, .sec3ab, .sec4abc { clear: both; }
.sec1, .sec3multi, .sec3a, .sec3b, .sec3c, .sec3ab, .sec4a, .sec4abc, .sec4bcd, .sec4d { float: left; margin: 1em 2.5%; background-color: transparent; }
.sec1 { width: 90%; margin-left: 5%; }
.sec1mw52 { max-width: 52em; }
.mw1imp .sec1 { margin-left: 6.5%; width: 87%; }
.sec3multi { width: 95%; }
.sec3ab, .sec4a { margin-left: 5%; }
.sec3ab { width: 64.9%; }
.sec4abc { width: 65%; margin-left: 5%; margin-right: 0; margin-bottom: -1em; }
.sec4a { width: 16%; margin-top: 0.5em; margin-right: 3%; }
.sec4bcd { width: 68%;  }
.sec4d { float: right; width: 20%; margin-left: 0; margin-right: 5%; }
.sec1, .sec3multi, .sec3c, .sec4bcd { margin-right: 0; }
.sec3a, .sec3b, .sec3c {
font-size: 0.93em;
width: 27.5%;
margin: 1em 1.5%;
background: #EFEFEF;
#border: 1px solid #E3E3E3;
border: 1px solid #EFEFEF;
border-radius: 4px;
cursor: pointer;
}
.sec3a { margin-left: 5.5%; }
.sec3x {
float: left;
font-size: 0.85em;
width: 17.5%;
margin: 1em 1.16%;
#background: #EFEFEF;
background: #FFF;
#border: 1px solid #EFEFEF;
border: 1px solid #CCC;
border-radius: 4px;
cursor: pointer;
}
.sec3xe { margin-right: 0; }
.sec3a:hover, .sec3b:hover, .sec3c:hover { border: 1px solid #777; }
.sec3x:hover { border: 1px solid #777; background: #EEE; }

#footer {
clear: both;
float: left;
width: 100%;
margin-top: 5em;
font-size: 0.85em;
background: url(../images/bg1lite.png) repeat;
border-top: 1px solid #CCC;
}

#debug {
position: absolute;
top: 0;
left: 50%;
color: #333;
font-size: 0.7em;
background: transparent;
}
#login {
color: #333;
font-size: 0.8em;
background: transparent;
}

hr {
clear: both;
border: 0;
height: 0;
width: 100%;
margin: -0.5em 0;
border-top: 1px solid #E3E3E3;
}

/* slideshow **********************/
.slideshow {
position: relative;
clear: both;
float: left;
height: 20em;
width: 28em;
margin: 0 5% 1.5em 0;
display: block;
overflow: visible;
background: transparent url(../images/Fotolia_49286489.png) no-repeat;
background-size: contain;
}
* html .slideshow { 
background: transparent url(../images/Fotolia_49286489-ie6.jpg) no-repeat;
} 
.slideshow .slides {
position: absolute;
top: 7.5%;
left: 12.3%;
width: 76%;
height: auto;
}
.slideshow .slides img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
.slidebtns {
position: absolute;
bottom: -1.5em;
left: 5%;
width: 100%;
height: 1em;
}
.slidebtns div {
float: left;
margin: 0 2%;
width: 4%;
height: 100%;
border: 2px solid #f5f5f5;
border-radius: 50%;
background: #DDD;
-moz-box-shadow: 0 0 3px #333;
box-shadow: 0 0 3px #333;
background: -moz-linear-gradient(top, #999 0%, #DDD 50%);
background: -webkit-linear-gradient(top, #999 0%, #DDD 50%);
background: -o-linear-gradient(top, #999 0%, #DDD 50%);
background: -ms-linear-gradient(top, #999 0%, #DDD 50%);
background: linear-gradient(top, #999 0%, #DDD 50%);
}
.slidebtns img {
float: left;
margin: 0;
width: 100%;
height: 100%;
}
.slideshow .slides img:hover, .slidebtns img:hover { cursor: pointer; }

/* intro show ***********************************/
#introshow {
clear: both;
float: right;
width: 512px; 
height: 320px;
margin: 1em -0.5em 2em 5%;
display: block;
background: transparent;
overflow: visible;
text-align: center;
cursor: pointer;
}
#intro {
position: relative;
width: 100%;
height: 100%;
background: transparent;
}
#intro img {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: auto;
border-radius: 4px;
background: transparent;
}
#intro .screens { 
bottom: 0;
left: -5%;
width: 110%; 
}
#intro .woman { left: -2%; }
#introbtns {
width: 80%;
height: 0.7em;
margin: 0.5em auto 0 auto;
display: block;
}
#introbtns div {
float: left;
margin-left: 4.8%;
width: 3%;
height: 100%;
border: 2px solid #f5f5f5;
border-radius: 50%;
background: #DDD;
-moz-box-shadow: 0 0 3px #333;
box-shadow: 0 0 3px #333;
background: -moz-linear-gradient(top, #999 0%, #DDD 50%);
background: -webkit-linear-gradient(top, #999 0%, #DDD 50%);
background: -o-linear-gradient(top, #999 0%, #DDD 50%);
background: -ms-linear-gradient(top, #999 0%, #DDD 50%);
background: linear-gradient(top, #999 0%, #DDD 50%);
}
#introbtns img {
float: left;
margin: 0;
width: 100%;
height: 100%;
}
#introbtns img:hover { cursor: pointer; }

#sld2, #sld3, #sld4, #sld5, #sld6, #sld7, #sld8, #sld9, #sld10 { opacity: 0; }

/* Gallery ***********************************/
.flexslider { width: 48.2%; max-width: 360px; margin: 0 -0.5%; }
.flexslider li { margin: 0; }
#flexslider1, #flexslider3 { float: left; }
#flexslider2, #flexslider4 { float: right; }
.gallery-caption {
text-align: center;
font-size: 0.8em;
font-style: italic;
margin-top: 0.3em;
height: 0;
}

/* typografie ************************/
p, a, b, i, li, span, strong, code, em, h1, h2, h3, h4, h5, h6 {
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
font-size: 1em;
line-height: 150%;
text-align: left;
color: #555;
}
a, li { line-height: 100%; }
p, li, td {
max-width: 55em;
margin-bottom: 0.7em;
}
.sec3a p, .sec3b p, .sec3c p { margin: 0.4em 0.6em 0.7em 0.9em; }
.sec3x p { margin: 0.3em 0.4em 0.3em 0.5em; }
.margin0 { margin: 0 !important; }
.margin3x { margin: 0.3em 0.3em 0.15em 0.3em !important; }
.sec4d p { text-align: center; }
/* .li2 p:last-of-type { text-align: center; margin-top: 0; } */
.p0 { margin-bottom: 0; }
#locator p {
clear: both;
float: left;
margin-bottom: 0;
padding-top: 0.2em;
}
#impressum p { max-width: 70em; }

h1, h2, h3, h4, h5, h6 {
font-weight: normal;
line-height: 100%;
position: relative;
}
h1 {
font-size: 2.7em;
line-height: 130%;
margin-bottom: 0.5em;
color: #BBB;
}
h2 {
clear: both;
font-size: 1.5em;
color: #008080;
margin: 1em 0 0.5em 0;
}
h2:first-of-type { clear: none; }
h2 a { color: #008080; }
.h2top h2 { margin-top: 1.5em; }
.sec3a h2, .sec3b h2, .sec3c h2, .sec3x h2 {
margin: 0 0.1em 0 0.1em;
font-size: 1.3em;
font-weight: bold;
}
.li2 h2 { text-align: center; }

h3 {
clear: both;
font-size: 1.2em;
margin: 1em 0 0.6em 0;
}
h4 {
clear: both;
font-size: 1em;
margin: 0;
font-style: italic;
text-align: center;
}
#foto h4 {
margin: 0.5em 3% 0.5em 5%;
line-height: 130%;
font-style: normal;
text-align: left;
}

a { text-decoration: none; }
p a, b a, td a, li a, #navibtf a, #map_copyright a, .sitemap a {
color: #008080;
border-bottom: 1px dotted #008080;
}
.sitemap_right a {
border-bottom: 0px none !important;
}
p a:hover, b a:hover, td a:hover, li a:hover, #navibtf a:hover, #map_copyright a:hover, .sitemap a:hover {
color: blue;
background-color: #E3E3E3;
border-bottom: 1px dotted blue;
}
.sitemap_right a:hover {
background-color: #E5E5E5;
border-bottom: 0px none;
}
#navibtf a:hover, a#openGallery:hover { cursor: pointer; }
#footer p { margin: 0; }
.gallery a, .gallery a:hover { border: 0px none; background: transparent; }
.flex-direction-nav a, .flex-direction-nav a:hover { border-bottom: 0px none; background: transparent; }
#login a {
color: #555;
border: 0px none;
text-decoration: underline;
}
#nobo, #nobo:hover  {
border: 0 none;
background: transparent;
}

p code, code {
clear: both;
float: left;
width: 97.5%;
line-height: 120%;
font-size: 0.95em;
font-family: "Lucida Console","Courier New",monospace;
/* border: 1px solid #DDD; */
margin: 0.5em 0 2em 0;
padding: 0.2em 0.3em;
background: #EEE;
} 

#prvt h1, #prvt h2, #prvt h3, #prvt p code {
max-width: 90%;
clear: none !important;
}

/*.li2,*/ .li8, #navi2txt p, #foto h4 {
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.sec3x {
-moz-hyphens: manual;
-o-hyphens: manual;
-webkit-hyphens: manual;
-ms-hyphens: manual;
hyphens: manual;
}

a, del {
-moz-hyphens: none !important;
-o-hyphens: none !important;
-webkit-hyphens: none !important;
-ms-hyphens: none !important;
hyphens: none !important;
}

/* menu/navigation *******************/
#menu-btn {  
height: 2.8em;
width: 3.2em;
margin-top: 0.8em;
margin-bottom: 0.9em;
border-radius: 5px;
background: #F7F7F7;
background: -moz-linear-gradient(top, #C5C5C5 0%, #FFF 50%);
background: -webkit-linear-gradient(top, #C5C5C5 0%, #FFF 50%);
background: -o-linear-gradient(top, #C5C5C5 0%, #FFF 50%);
background: -ms-linear-gradient(top, #C5C5C5 0%, #FFF 50%);
background: linear-gradient(top, #C5C5C5 0%, #FFF 50%);
box-shadow: 2px 2px 4px #CCC;
display: none;
}
#menu-btn img { height: 100%; width: 100%; }

#navi1 {
width: 30em;
height: 3em;
margin: 1.1em -2em 1.8em auto;
list-style-type: none;
overflow: hidden;
}
#navi1 li {
float: left;
margin: 0.2em 0;
display: block;
line-height: 100%;
text-align: left;
}
#navi1 li a {
font-size: 1em;
font-weight: bold;
line-height: 100%;
color: #A5A5A5;
display: block;
padding: 0.5em;
text-decoration: none;
cursor: pointer;
border: 1px solid transparent;
border-right: 1px solid #CCC;
background: transparent;
}
a.n1e { border-right: 0px none !important; }
#navi1 li a:hover {
color: blue;
background: rgba(180,180,180,0.1); 
}
#navi1 .active a, #navi1 .active a:hover {
color: #555;
background: transparent;
}

#navi2 {
float: left;
width: 102%;
text-align: left;
margin: 1.2em 0 2em 0;
overflow: visible;
list-style-type: none;
}
#navi2 li {
float: left;
display: block;
line-height: normal;
width: 100%;
margin-bottom: 0;
text-align: left;
overflow: hidden;
}
#navi2 li a {
display: block;
padding: 5px 0 5px 6px;
width: 100%;
/* font-weight: bold; */
color: #555;
text-decoration: none;
font-size: 0.9em;
line-height: 1.6em;
border-bottom: 1px dotted #CCC;
}
#navi2 li:first-child a {
border-top: 1px dotted #CCC;
}
#navi2 li.main {
letter-spacing: 1px;
text-transform: uppercase;
}
#navi2 li.sub a {
padding-left: 1.2em;
letter-spacing: 0.5px;
background: transparent url(../images/submenu-gray.png) 0.5em 0.9em no-repeat;
}
#navi2 li.main a:hover {
color: blue;
background: #F2F2F2;
}
#navi2 li.sub a:hover {
color: blue;
background: #F2F2F2 url(../images/submenu-blue.png) 0.5em 0.9em no-repeat;
}
#navi2 li.active a {
color: #555 !important;
font-weight: bold;
}

#navi2txt {
clear: both;
float: none;
width: 105%;
margin-left: -0.2em;
/* border-radius: 4px; */
border: 1px dotted #CCC;
background: transparent;
}
#navi2txt p, #navi2txt h4 {
width: 93%;
margin: 0.5em auto 0.5em 5%;
}
#navi2txt p {
font-size: 0.8em;
color: #555;
}
#navi2txt h4 {
font-size: 0.9em;
line-height: 130%;
font-weight: bold;
font-style: normal;
text-align: left;
margin-bottom: -0.1em;
}

#navibtf {
clear: both;
float: left;
width: 99%;
margin: 2em auto 0 auto;
padding: 1px 0.5em;
text-align: center;
}
#top {
margin: 0 0.5em;
padding: 0 0.6em 0 0;
background: transparent url(../images/arrow-top.png) no-repeat center right;
}

.button a, .formbtn {
font-size: 0.8em;
font-weight: bold;
line-height: 100%;
text-align: center;
color: #555;
display: block;
padding: 0.5em;
text-decoration: none;
cursor: pointer;
border: 1px solid #AAA;
border-radius: 5px;
background: #F7F7F7;
background: -moz-linear-gradient(top, #C5C5C5 0%, #FFF 50%);
background: -webkit-linear-gradient(top, #C5C5C5 0%, #FFF 50%);
background: -o-linear-gradient(top, #C5C5C5 0%, #FFF 50%);
background: -ms-linear-gradient(top, #C5C5C5 0%, #FFF 50%);
background: linear-gradient(top, #C5C5C5 0%, #FFF 50%);
box-shadow: 2px 2px 4px #CCC;
}
#menu-btn:hover, .button a:hover, .formbtn:hover  {
color: #555;
border: 1px solid #AAA;
background: #DDD;
background: -moz-linear-gradient(top, #999 0%, #F0F0F0 50%);
background: -webkit-linear-gradient(top, #999 0%, #F0F0F0 50%);
background: -o-linear-gradient(top, #999 0%, #F0F0F0 50%);
background: -ms-linear-gradient(top, #999 0%, #F0F0F0 50%);
background: linear-gradient(top, #999 0%, #F0F0F0 50%);
}
#menu-btn:hover { cursor: pointer; border: 0; }

#logo:hover, #wbdlogo:hover { cursor: pointer;  background: rgba(125,125,125,0.1); }

.button { float: left; width: 100%; }
.button a { float: right; width: 5em; }

/* tags *****************************/
.tags p { margin-top: 2em; }
.tags a {
list-style: none;
line-height: 130%;
display: inline;
padding: 0 0.2em;
color: #008080;
border-bottom: 0px none !important;
}
.tags a:hover { background-color: #E3E3E3; color: blue !important; }
.tags a.t1 { font-size: 1.44em; color: #AAA; }
.tags a.t2 { font-size: 1.17em; color: #999; }
.tags a.t3 { font-size: 1.0em; color: #777; }
.tags a.t4 { font-size: 0.85em; color: #555; }
.tags a.t5 { font-size: 0.63em; color: #333; }

/* lists *****************************/
.sitemap { margin-left: 1em; }
.sitemap .sitemap { margin-left: 2em; }
.sitemap .sitemap .sitemap { margin-left: 3em; }
.li1 li, .sitemap li {
margin-bottom: 0.5em;
padding-left: 0.9em;
line-height: 150%;
background: transparent url(../images/bullet.png) 0 0.6em no-repeat;
}
.sitemap_right .sitemap { margin-left: 0.5em; }
.sitemap_right li {
margin-bottom: 0.3em;
padding-left: 0;
line-height: 100%;
background: transparent;
}
.li2 li {
margin: 0 0.6em 0.6em 0.8em;
padding-left: 0.8em;
line-height: 120%;
background: transparent url(../images/bullet.png) 0 0.4em no-repeat;
}
.li7 { max-width: 55em; }
.li7 h5 {
clear: both;
float: left;
margin: 0.3em 0 0.4em 0;
width: 7em;
line-height: 130%;
font-weight: bold;
color: #555;
}
.li7 p, .li7 li {
float: right;
width: 86%;
margin: 0.4em 0;
line-height: 130%;
}
.li7 .pclr {
clear: both;
float: none;
width: auto;
}
.li7 b { font-weight: bold; color: #555; }
.li7 li {
width: 83%;
padding-left: 1em;
line-height: 150%;
margin: 0 0 0.3em 0;
background: transparent url(../images/arrow.png) 0 0.5em no-repeat;
}
.li8 { max-width: 100%; }
.li8 p, .li8 h5 {
float: left;
width: 44%;
margin: 0.5em 5% 2em 0;
}
.li8 h5 img {
max-width: 100%;
border: 1px solid #E3E3E3;
}
.li8 p a { font-size: 1.5em; margin-right: 0.3em; border: 0; }
.li9 p { max-width: 100%; }
.li9 h6 { margin-bottom: 1em; }

.sitemap .current > a { color: #333; border-bottom: 1px dotted #333; background: #E9E9E9; }

/* colorbox *************************************/
.modal { display: none; }

/* images **************************************/
#foto img {
/* height: 15.5em; */
max-height: 17em;
width: auto;
/* margin: 0.2em auto -2.2em auto; */
margin: 0.2em auto 0 auto;
display: block;
overflow: visible;
background: transparent;
border-radius: 4px;
box-shadow: 2px 2px 7px #888;
}
#cube {
clear: both;
float: right;
max-width: 32%;
height: auto;
margin: 0 0 0 6%;
display: block;
background: transparent;
}
#h1img { margin-right: 0.2em; }

.iconemail {
clear: left;
float: left;
padding: 0 20px 0 0;
margin-bottom: 0;
background: transparent url(../images/icon_mailto.gif) no-repeat center right;
}
.iconcall {
clear: left;
float: left;
padding: 0 20px 0 0;
margin-bottom: 0;
background: transparent url(../images/icon_call.gif) no-repeat center right;
}
.left { float: left; }
.right { float: right; }
.right p { text-align: right; }
.left, .right { max-width: 48%; margin: 0 0.5%; }

/* for images placed in rich text editor *********/
img { max-width: 100%; }
.align_left {
float: left;
max-width: 50%;
height: auto;
margin: 0.3em 1.8em 1em 0;
border-radius: 4px;
}
.align_right {
float: right;
max-width: 50%;
height: auto;
margin: 0.3em 0.5em 0.5em 1.8em;
border-radius: 4px;
}
.sitemap_right {
font-size: 0.9em;
line-height: 100%;
float: right;
max-width: 50%;
height: auto;
margin: 0 -2.3em 0.5em 0;
padding: 0.5em 0.7em 0.5em 0;
border-radius: 2px;
border: 1px dotted #999;
/* background: #F3F3F3; */
}
.align_center {
display: block;
max-width: 100%;
height: auto;
margin: 0.3em auto 1em auto; 
position: relative;
border-radius: 4px;
}
#navi2txt img, #navi2txt .align_center  { margin: 0 auto 0 -1.5%; max-width: 100%; }

#locator .align_left { margin-right: 0.8em; }
#locator img { margin-top: 0; }

.sec3a img, .sec3b img, .sec3c img, .sec3x p img { width: 100%; border-radius: 3px; }

.refs p {
clear: both;
float: left;
width: 55%;
max-width: 600px;
margin: 0 4.9% 3em 0;
}
.refs p img { width: 100%; }
.refs p a, .refs p a:hover, .li8 h5 a { border: 0px none; background: transparent; }

.beispiele p {
clear: both;
float: left;
width: 62%;
max-width: 600px;
margin-bottom: 1.5em;
}
.beispiele p img { width: 100%; }
.beispiele p a, .beispiele p a:hover { border: 0px none; background: transparent; }

#footer .left a { border: 0px none; }
#footer .left a img { margin: 0.2em 0 -0.4em 0.2em; width: 1.5em; height: auto; }

/* table portfolio (alt) ********************************/
.refs table {
float: left;
width: 40%; 
margin-bottom: 1em;
}
.refs td {
font-size: 0.95em;
margin: 0;
padding-bottom: 0.4em;
line-height: 1.2em;
vertical-align: top;
min-width: 4.5em;
}
.refs td strong {
color: #A5A5A5;
margin: 0;
padding: 0;
line-height: 100%;
font-weight: bold;
vertical-align: top;
}
.refs td a {
font-size: 1.2em;
line-height: 130%;
font-weight: normal;
border-bottom: 1px dotted #008080;
}
.refs td:first-child { width: 5em; }

/* table portfolio ********************************/
.beispiele table {
float: right;
width: 38%; 
margin: 0.3em -3% 1.5em 0;
}
.beispiele td {
font-size: 0.9em;
margin: 0;
padding-bottom: 0.4em;
line-height: 1.2em;
vertical-align: top;
}
.beispiele td a {
font-weight: bold;
border-bottom: 1px dotted #008080;
}
.beispiele td:first-child {
width: 5em;
font-weight: bold;
color: #A5A5A5;
}
.beispiele hr {
margin: 1em 0 1.5em 0;
border-top: 1px dotted #CCC;
}

.clear { clear: both; }

/* table preise ********************************/
.preise {
clear: both;
float: none;
width: 40%; 
margin: 1em 0;
text-align: center;
border: 2px solid #DDD;
border-collapse: collapse;
border-radius: 4px;
background: #FFF;
}
.preise th, .preise td {
border: 1px solid #DDD;
padding: 0.4em 0.4em;
}
.preise thead {
color: white; 
background: #008080;
}
.preise td {
font-size: 0.95em;
margin: 0;
line-height: 1.2em;
vertical-align: top;
min-width: 5em;
}
.preise tbody th, .preise tfoot th {
font-size: 0.95em;
min-width: 9em; 
background: rgba(128,128,128,0.1);
font-weight: normal;
text-align: left;
}
.preise tfoot td  {
font-weight: bold;
text-decoration: underline;
}
.preise tfoot { background: rgba(128,128,128,0.1); }
.preise tr:nth-of-type(2n) { background: #EEE; }

/* formular *************************************
textarea, input {
margin-bottom: 0.4em;
padding: 2px 3px;
border: 1px solid #BABB97;
background: #F7F7F7;
font-family: Arial,Helvetica,sans-serif;
font-size: 0.9em;
line-height: 160%;
border-radius: 4px;
box-shadow: 2px 2px 4px #BABB97;
}
.formbtn { float: left; margin: 0 1em 1em 0; }
textarea.form { width: 99%; max-width: 60em; line-height: 150%; }
input.form { width: 99%; max-width: 30em; line-height: 150%; }
*/
#ktext {
float: left;
width: 45%;
margin-top: 0.5em;
}
#kform {
float: right;
width: 50%;
margin-top: 1.5em;
}
textarea, input {
margin-bottom: 0.7em;
padding: 5px 8px;
border: 1px solid #BABB97;
background: #F7F7F7;
font-family: Arial,Helvetica,sans-serif;
font-size: 0.9em;
line-height: 100%;
border-radius: 4px;
box-shadow: 2px 2px 4px #BABB97;
}
.formbtn { float: left; margin: 0 1em 1em 0; }
textarea { line-height: 120%; }
textarea.form, input.form { width: 95%; max-width: 35em; }

/* maps ***************************************/
#map_canvas {
clear: both;
float: left;
width: 99%;
height: 32em;
background-color: #CCC;
margin: 0.4em 0 3em 0;
}
#map_copyright {
font-size: 0.85em;
float: left;
width: 100%;
margin-top: -3.6em;
text-align: center;
display: none;
}

/* modal popup window ***************************/
#overlay {
position:fixed; 
top:0;
left:0;
width:100%;
height:100%;
background:#999;
background:rgba(0,0,0,0.5);
opacity:0.5;
filter:alpha(opacity=50);
}
#modal {
position:absolute;
background:#FFF;
border-radius:4px;
padding:8px;
}
#content {
border-radius:4px;
background:#fff;
/*padding:20px;*/
}
#close {
position:absolute;
background:url(../images/close.png) 0 0 no-repeat;
width:24px;
height:27px;
display:block;
text-indent:-9999px;
top:-7px;
right:-7px;
}
.imgmodal {
width: auto;
height: auto;
border-radius: 4px;
}
.popup, .align_right, .align_center { cursor: pointer; }

/* mobiles ***************************************************************************/
@media screen and (max-width: 1100px) {
.slideshow { margin-left: 1em; }
#introshow { width: 45%; margin-left: 5%; }
#introbtns { margin-left: 0; width: 100%; }
#cube { margin-bottom: 0.5em; }
}
@media screen and (max-width: 1000px) {
.slideshow { width: 48%; margin-top: 0; }
.slidebtns { bottom: -1em; }
#footer .left a, #h1img { display: none; }
#foto img { width: 100%; height: auto; margin-bottom: 0; }
.sec3a, .sec3b, .sec3c { font-size: 0.9em; }
.sec3xd { margin-right: 0; }
.sec3xe { display: none; }
.sec3x { width: 22.2%; }
#ktext, #kform { width: 100%; }
#kform { margin-top: 1em; }
}
@media screen and (max-width: 860px) {
#logo, #wbdlogo  { height: 2.5em; }
.refs p { width: 99%; margin-right: 0; margin-bottom: 0;}
.refs table { width: 99% };
}
@media screen and (max-width: 767px) {
body { background: url(../images/bg1.png) repeat; }
#wrapper { margin-top: -0.1em; }
#logo, #wbdlogo { margin-left: 0; }
#menu-btn { display: block; }
#navi1, #navi2 {
clear: both;
float: left;
width: 100%;
margin: 0.2em 0;
display: none;
}
#navi1 { margin-left: 1.3%; width: 98.6%; height: auto; }
#navi2 { margin-bottom: 1em; }
#navi1 li, #navi2 li {
width: auto;
margin: 0.1em;
padding: 0;
}
#navi1 li a, #navi2 li a, #navi2 li:first-child a, #navi2 li.main a, #navi2 li.sub a {
display: block;
font-size: 0.9em;
letter-spacing: 0;
font-weight: bold;
text-align: center;
width: 9em;
line-height: 100%;
margin: 0.1em;
padding: 0.5em 0;
border: 0px none;
background: #EEE !important;
}
#navi1 .active a, #navi2 li.active a {
color: #555;
background: #DDD !important;
}
#login, #navi2txt, #foto h4, #introshow { display: none; }
.sec3x { width: 44.2%; }
.sec3xb { margin-right: 0; }
.sec4a, .sec4bcd {
clear: both;
float: none;
width: 97%;
margin: 0.5em auto;
}
.li8 p, .li8 h5 { clear: both; float: none; width: 100%; }
.button a { padding: 0.6em; }
.slidebtns { left: 1%; }
.slidebtns div { margin: 0 1.9%; }
#footer { background: white; }
h1 { font-size: 2.2em; line-height: 100%; }
}
@media screen and (max-width: 600px) {
.sec1, .sec3multi, .sec3a, .sec3b, .sec3c, .sec3ab, .sec4abc {
clear: both;
float: none;
width: 97%;
margin: 0.5em auto;
}
.sec3a, .sec3b, .sec3c { 
border: 0px none;
padding: 0;
background: #FFF;
}
.beispiele table, .beispiele p, .beispiele hr {
clear: both;
float: none;
width: 100%;
}
.beispiele p, .beispiele table { margin-bottom: 0; }
.sec4d, #cube, #h1img { display: none; }
#map-canvas { height: 24em; }
.left, .right {
float: none;
width: 100%;
max-width: 100%;
margin: 0.2em 0;
text-align: left;
}
.right p { text-align: left; }
h2 { font-size: 1.5em; margin: 0.6em 0 0.5em 0; }
.h2bot h2 { margin-bottom: 0.3em; }
.li7 h5 { margin: 0.5em 0 0 0; }
.button { margin-bottom: 1.5em; }
.flexslider { width: 47%; margin: 0; }
}
@media screen and (max-width: 480px) {
.sec3x  {
clear: both;
float: none;
width: 97%;
margin: 0.5em auto 1em auto; 
padding: 0;
}
.imglft40 img {
float: none;
margin-left: 5%;
margin-right: 5%;
width: 89%;
height: auto;
}
.imglft40 p { float: none; width: 100%; }
.flexslider { width: 90%; margin: 0 auto; }
#flexslider2, #flexslider4 { float: left; }
}
@media screen and (max-width: 320px) {
#map-canvas { height: 18em; }
}

/* large screens ***************************************************************************/
@media screen and (min-width: 1100px) {
.mw3home, .mw1sec, .mw1imp, p, li, td { max-width: 1500px; }
#wrapper { width: 90%; }
.li8 h5 { margin-right: 3%; }
}
@media screen and (min-width: 1500px) {
#introshow { margin: 0 0 2em 10%; }
.sec3a, .sec3b, .sec3c { width: 25.5%; margin: 1em 2.7%; }
.sec3a { margin-left: 5.8%; }
.sec3c { margin-right: 0; }
.sec3a img, .sec3b img, .sec3c img { width: 90.5%; margin: 1em 0 0.5em 4.97%; }
#navi2txt img { width: 90%; margin-left: 5%; }
.li8 h5 { width: 33%; margin-right: 3%; }
.li8 p { width: 55%; }
}
@media screen and (min-width: 1700px) {
.tags a.t1 { font-size: 1.6em; }
.tags a.t2 { font-size: 1.3em; }
.tags a.t3 { font-size: 1.1em; }
.tags a.t4 { font-size: 0.95em; }
.tags a.t5 { font-size: 0.7em; }
}