/* Main */
body {
    font-family: "Century Gothic","Raleway",Futura-Medium,sans-serif;
    font-size:10px;
    letter-spacing:3px;
    line-height:1.1;
    color:#000;
    font-weight:300;
    text-transform:uppercase;
}

.fitText { display:block; }

a { cursor:pointer; color:#000; }
a:hover { text-decoration:none; color:#000; }
a:focus { color:#000; }

.text-underline { text-decoration: underline; }

/* Navigation */
ul#pri-nav { position: fixed; top:6%; left:3%; z-index:2; list-style:none; margin:0; padding:0; }
ul#sec-nav { position: fixed; bottom:3%; left:3%; z-index:2; list-style:none; margin:0; padding:0; }
ul.navi li { min-height:2em; display:block; }
ul.navi li a { color:#a4a3a2 !important; line-height: 2em; }
ul.navi li a:hover,
ul.navi li.active > a { color:#000 !important; }

ul.navi > li > ul,
ul.navi > li > ul ul { margin-left:2em; }

a#kontakt { position: fixed; bottom:3%; right:3%; z-index:2; color:#f00; }

a#logo {
    position: fixed;
    top:8%;
    left:50%;
    transform: translateX(-50%);
    z-index:2;
}

a#toggleMenu { display:none; }
@media (max-width: 767px) {
    a#toggleMenu { position: fixed; top:17px; left:0; z-index:11; display:inline-block; padding:10px; color:#a4a3a2; }
    #menu {
        display:none;
        background-color:rgba(0,0,0,.8);
        position:fixed;
        top:0;right:0;bottom:0;left:0;
        z-index:10;
    }
    ul#pri-nav { margin-top:4em; }
    
    a#logo {
        top:25px;
    }
}


/* Sections */
section { 
    position:relative;
    overflow:hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
section .head h1,
section .head h2 {
    display:block;
    width:80%;
    margin-bottom:50px;
    line-height:0.80;
    letter-spacing:1.1rem;
    font-weight:bold;
}
@media (max-width: 767px) {
    section .head h1,
    section .head h2 {
        width:100%;
        line-height:1;
        letter-spacing:0.4rem;
    }
}
section.start { 
    color:#000;
    background-color:#fff;
}
section.start .head {
    position:relative;
    z-index:2;
    display:block;
    margin-left:10%;
    margin-top:200px;
}

section.start .termin { display:block; margin:100px auto 0 auto; text-align:center; }

section.architektur { background-color:#666; }

section.moebel {
    color:#000;
    background-color:#fff;
}
.no-padding { padding:0 !important; }
.no-margin { margin:0 !important; }
.cell-h50,
.cell-h100 {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.cell-h50 {
    display:block;
    height:50% !important;
}
.cell-h100 {
    display:block;
    height:100% !important;
}

@media (max-width: 767px) {
    .xs-66 { height:66% !important; }
    .xs-34 { height:34% !important; }
}

section.awards {
    background-color:#fff;
}
section.awards .head {
    position:relative;
    z-index:2;
    display:block;
    margin-left:10%;
    margin-top:200px;
}

section.portfolio {
    color:#000;
    background-color:#fff;
}
section.portfolio .head {
    position:relative;
    z-index:2;
    display:block;
    margin-left:10%;
    margin-top:200px;
}
section.portfolio .head h1 {
    display:block;
    width:80%;
    margin-bottom:50px;
    line-height:0.80;
    letter-spacing:1.1rem;
    font-weight:bold;
}
section.portfolio .termin { display:block; margin:100px auto 0 auto; text-align:center; }

section .layers { 
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:2;
    transition:all 1s;
    opacity:0;
    margin-top:50px;
}
section.active .layers {
    opacity:1;
    margin-top:0;
}

video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    display: inline-block;
    vertical-align: baseline;
}

/* Own Carousel */
.owl-carousel {
    position: absolute;
    height: 100%;
    width:100%;
    z-index:1;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
.owl-slide {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.owl-carousel div:not(.owl-nav) { height:100%; }
.owl-carousel .owl-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index:5;
    width:100%;
    display:block;
}
.owl-prev,
.owl-next {
    position:absolute;
    top:50%;
}
.owl-prev { left:0; }
.owl-next { right:0; }

/* Timeline */
#timeline {
    display:block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
}
#dates {
    position:absolute;
    top:55%;
    left:0;
    min-width:400px;
    width: 100%;
    height: 100px;
    overflow: hidden;
    margin:0;
    padding:0;
    z-index: 3;
}
#dates li {
    list-style: none;
    float: left;
    width: 160px;
    height: 100px;
    text-align: center;
    position:relative;
    margin:0;
    padding:0;
}
#dates a {
    color:#000;
    line-height: 38px;
    padding-bottom: 10px;
    position:relative;
    display:block;
    font-weight:bold;
}
#dates a::after {
    content:' ';
    border-left:3px solid #000;
    position:absolute;
    top:100%;
    left:50%;
    height:100px;
}

#dates a.selected {
    color:#f00;
    font-weight:bold;
}
#dates a.selected::after {
    border-left:3px solid #f00;
}

#issues {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin:0;
    padding:0;
}
#issues li {
    display:block;
    width: 100%;
    height: 100%;
    list-style: none;
    margin:0;
    padding:0;
}
#issues li .bg-img {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:1;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity:.32;
}
#issues li h1 {
    color: #fff;
    font-size: 48px;
    position:absolute;
    top:30%;
    left:10%;
    z-index:2;
}
#issues li .details {
    position:absolute;
    top:70%;
    left:50%;
    z-index:2;
}

#next,
#prev {
    position: absolute;
    font-size: 70px;
    top: 50%;
    width: 22px;
    height: 38px;
    background-position: 0 0;
    background-repeat: no-repeat;
    text-indent: -9999px;
    overflow: hidden;
    z-index: 3;
}
#next:hover,
#prev:hover {
    background-position: 0 -76px;
}
#next {
    right: 0;
    background-image: url('/img/v5/timeline/next.png');
}
#prev {
    left: 0;
    background-image: url('/img/v5/timeline/prev.png');
}
#next.disabled,
#prev.disabled {
    opacity: 0.2;
}