html {
    height:100%;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
body {
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
    line-height:1.4;
    background-color:#ccc;
    height:100%;
}
#wrapper {
    position:relative;
    width: 1002px;
    margin: 0 auto;
    background-color:#fff;
    z-index:0;
    /*height:100%;*/
    height:auto;
    min-height:100%;    
}
#wrapper:after {
    content:"";
    display:block;
    clear:both;
}
#backstretch {
    z-index:1 !important;
}
#wrapperintro {
    background-color:#475f79;
    position:absolute;
    right:0;
    left:0;
    top:0;
    bottom:0;
    height:100%;
    opacity:0.85;
    text-align:center;
    z-index:2;
}
#wrapperintro:before {
    content:"";
    display:inline-block;
    height:100%;
    vertical-align:middle;
    margin-right:-0.25em;
}
.intro {
    width:460px;
    height:279px;
    display:inline-block;
    vertical-align:middle;
    text-align:left;
    transition:background-color 0.3s;
    background-color:rgba(0,0,0,0.3);
}
.intro:hover {
    background-color:rgba(0,0,0,0.1);
}
.intro img {
    float:left;
    padding:10px;
}
.intro .introcontent {
    float:left;
    padding:2em;
    width:366px;
    position:relative;
}
.intro p {
    color:#fff;
    font-size:14px;
    line-height:1.5;
    margin-bottom:1.5em;
}
.intro .triangle {
    height: 0px;
    width: 0px;
    border-top:8px solid transparent;
    border-bottom:8px solid transparent;
    border-left:16px solid white;
    position:absolute;
    right:2em;
    bottom:3em;
}

a {
    text-decoration:none;
    color: #e25e61;
    transition: color 0.3s;
}
ul li {
    list-style-type: none;
}
p {
    margin:0 0 1em;
}
h1 {
    font-size:24px;
    font-weight:normal;
    text-transform:uppercase;
    margin:0 0 0.5em;
}
h2 {
    font-size:18px;
    font-weight:normal;
    margin:2em 0 0.5em;
}
#navigation {
    position:fixed;
    bottom:0;
    top:0;
    width: 324px;
    background-color: #475f79;
    overflow:hidden;
}
.home #navigation {
    width:0;
}
#menu {
    background-color: #364b5e;
    width: 177px;
    height:100%;
    float: left;
    line-height:2;
    position:relative;
    z-index:200;
    box-shadow: 2px 0 10px rgba(0,0,0,0.5);
}
#menu .schwarzbau {
    margin-top:2em;
    font-size:16px;
    color:#b1b6b9;
    text-transform:uppercase;
}
#menu .schwarzbau span {
    color:#3367b2;
    text-transform:lowercase;
}
#menu ul {
    text-align:right;
    padding: 0 20px 0 0;
}
#menu ul#mainmenu {
    position:absolute;
    top:300px;
    right:0;
    width:167px;
}
#menu ul a {
    color:#b1b6b9;
    text-transform:uppercase;
    font-size:16px;
}
#menu ul a.section {
    color:#e25e61;
}

#menu ul a:hover {
    color:#e25e61;
}

#menu ul li {
    position:relative;
    height:24px;
}

#menu ul li ul {
    position:absolute;
    top:6px;
    left:167px;
    width:147px;
    margin-top:0;
    padding-right:20px;
}
#menu ul li ul li a {
    text-transform:none;
    font-size:12px;
}
.impressum {
    margin-top:40px;
}
#logo {
    width: 65px;
    height: 240px;
    position:relative;
    float:right;
}
.content {
    float: right;
    margin-top:200px;
    margin-right:10px;
    width: 648px;
    color:#475f79;
}
.content:after {
    content:"";
    display:block;
    clear:both;
}
.home .content {
    display:none;
}
.content section {
    clear:both;
    margin-top:30px;    
}
.content section:after {
    content:"";
    display:block;
    clear:both;
}
.content section h2 {
    margin-top:0;
}
.content .section img{
    float:right;
    margin-left:20px;
}
.teaser {
    min-height:200px;
}
.haustext {
    background-color: rgba(255, 255, 255, 0.8);
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    z-index:100;
    padding:2px 20px;
    margin-bottom:0;
}
.projects {
    margin-left:-10px;
    margin-right:-10px;
    width:668px;
}
.hausdiv {
    width: 147px;
    height: 109px;
    margin:10px;
    float: left;
    position:relative;
    cursor:pointer;
}
.hausdiv img {
    transition: filter 0.3s, -webkit-filter 0.3s;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%); 
    filter: grayscale(100%);
    width: 147px;
    height: 109px;
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
}
.hausdiv:hover img{
    -webkit-filter: none;
    -moz-filter: none;
    -ms-filter: none;
    filter: none;
    z-index:200;
}
.hausdiv.selected img {
    -webkit-filter: none;
    filter: none;
    z-index:200;
}
.hausdiv.selected:after {
    content:"";
    width:0;
    height:0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #475f79;
    margin:0;
    padding:0;
    position:absolute;
    top:124px;
}

#projektecontent h1 {
    margin-left:18px;
    color:#475f79;
}
#projecttext {
    margin-right:47px;
}
#box {
    position:relative;
    margin: 0 auto;
    width:612px;
    height:420;
}
#box img {
    float:left;
}

.showcase {
    background-color:#475f79;
    width:648px;
    margin-left:10px;
    margin-top:15px;
    float:left;
    position:relative;
    color:#b1b6b9;
    max-height:0;
    overflow:hidden;
}
.showcase .project-content {
    padding:20px;
}
.showcase h2, .showcase p {
    margin-top:0;
    color:#fff;
}
.showcase img {
    margin-top:20px;
}
.showcase ul.paging {
    margin:0;
    padding:0;
}
.showcase ul.paging li {
    display:inline;
}
.showcase ul.paging li a {
    display:block;
    float:left;
    padding:10px;
    color:#b1b6b9;
}
.showcase ul.paging li a:hover, .showcase ul.paging li a.active {
    color:red;
}

.bx-wrapper {
    clear:left;
}
.bx-wrapper .bxslider {
    padding:0;
}
.bx-wrapper .bx-pager {
    padding-top: 20px;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}

.bx-wrapper .bx-pager.bx-default-pager a {
    padding:10px;
    color:#b1b6b9;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover {
    background-color:#b1b6b9;
    color:#475f79;
}
.bx-wrapper .bx-pager.bx-default-pager a.active {
    color:#e25e61;
}