/* -------------------------------------------- */
/* Codemart: Website */
/* Version: 3.10 */
/* -------------------------------------------- */
/* Created by @twotribes, Germany */
/* -------------------------------------------- */
/* StyleSheet Scope: STAGE SETUP */
/* -------------------------------------------- */

/* !-------------------------------------------- */
/* !Color dictionary */
/* !-------------------------------------------- */

/* 
C grey #233c51 rgb(35, 60, 81)
O blue (Company) #4a769a
D violet (Code) #4f4d88 rgb(79, 77, 136)
E blue (Crew) #008fb1
M yellow (Chronicle) #e2982a rgb(226, 152, 42)
Default color + A red (Contact) #822529 rgb(130, 37, 41)
R red #e03838
T orange #e75328
*/

/* !-------------------------------------------- */
/* !LAYOUT: General */
/* !-------------------------------------------- */

/* --- Global navigation */
#nav_bar {
    border-bottom: 1px solid #fff;
    height: 144px;
    width: 100%;
    transition: height 0.5s ease;
}

#nav_bar.expression-minimal {
    height: 54px;
    transition: height 0.5s ease;
}

/* --- Main stage */
#content_stage {
    bottom: 0;
    position: absolute;
    top: 144px;
    width: 100%;
    transition: top 0.5s ease;
}

#nav_bar.expression-minimal + #content_stage {
    top: 54px;
    transition: top 0.5s ease;
}

#content_stage .curtain {
    background: #233c51; /* masks rounding errors not matching viewport width */
    font-size: 0.1px; /* needed to remove whitespace between inline-block children */
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

/* --- Fading gradient over main stage */
#content_stage .curtain:after {
    content: "";
    display: block;
    position: absolute;
    background: -webkit-linear-gradient(bottom, transparent 0%, rgba(255, 255, 255, 0.9) 100%);
    background: -moz-linear-gradient(bottom, transparent 0%, rgba(255, 255, 255, 0.9) 100%);
    background: -ms-linear-gradient(bottom, transparent 0%, rgba(255, 255, 255, 0.9) 100%);
    background: linear-gradient(bottom, transparent 0%, rgba(255, 255, 255, 0.9) 100%);
    bottom: 0;
    top: 0;
    width: 100%;
    z-index: 40;
}

.section-home #content_stage .curtain:after {
    top: 110px;
}

/* !-------------------------------------------- */
/* !LAYOUT: Curtain setup */
/* !-------------------------------------------- */

/* --- Vertical curtain bars */
.curtain > li {
    display: inline-block;
    font-size: small; /* re-initialize */
    height: 100%;
    position: relative;
    vertical-align: top;
    width: 12.5%;
}

/* This is insanely stupid but fucking Firefox and IE10 can't do 8 x 12.5% = 100%. Do the math. */
.section-home .curtain #stripe_8 {
width: 12.4%;
}

/* --- Section content container */
.curtain .stripe-content {
    background: #fff;
    display: inline-block;
    padding-bottom: 30px; /* offsets margin-top: 30px for embedded .content-container */
    position: relative;
    width: 0;
    z-index: 50;
}

/* Second-level nav besides content container */
.curtain .stripe-content .content-nav {
    position: absolute;
    left: 100%;
    text-align: left;
    top: 30px;
    z-index: 200;
}

#stripe_crew .content-nav, 
#stripe_chronicle .content-nav, 
#stripe_contact .content-nav {
    left: auto;
    right: 100%;
    text-align: right;
}

/* Scrolling content area */
.curtain .stripe-content .content-container {
font-size: 16px;
height: 100%;
line-height: 1.25em;
margin-top: 30px;
overflow: auto;
padding: 0 50px 30px 50px;
width: 100%;
-webkit-overflow-scrolling: touch;
}

/* --- Overlapping in-between bars */
#stripe_1:after,
#stripe_3:before, 
#stripe_4:before, 
#stripe_4:after, 
#stripe_6:before, 
#stripe_7:before, 
#stripe_7:after {
content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
width: 15%;
z-index: 10;
}

/* Horizontal positioning */
#stripe_3:before, 
#stripe_4:before, 
#stripe_6:before, 
#stripe_7:before {
/* background: #000 !important; */
left: -15%;
}

#stripe_1:after, 
#stripe_4:after, 
#stripe_7:after {
/* background: #fff !important; */
right: -15%;
}

/* Homepage: hide  overlaps */
.section-home #content_stage .curtain > li:before,
.section-home #content_stage .curtain > li:after {
width: 0;
}

/* --- Homepage: Position buttons + info */
.curtain .stripe-header {
text-align: center;
}

.curtain .stripe-info {
text-align: left;
}

/* --- Colors for bars + overlaps */
#stripe_1 {
background: #233c51;
}
#stripe_1:after {
background: rgba(35,60,81,0.6);
}

#stripe_2 {
background: #4a769a; /* triggers/precedes Company */
}

#stripe_3 {
background: #4f4d88; /* triggers/precedes Code */
}
#stripe_3:before {
background: rgba(79,77,136,0.6);
}

#stripe_4 {
background: #008fb1; /* triggers/precedes Crew */
}
#stripe_4:before {
background: rgba(0,143,177,0.5);
}
#stripe_4:after {
background: rgba(0,143,177,0.7);
}

#stripe_5 {
background: #e2982a; /* triggers/precedes Chronicle */
}

#stripe_6 {
background: #822529;
}
#stripe_6:before {
background: rgba(130,37,41,0.7);
}

#stripe_7 {
background: #e03838; /* triggers/precedes Contact */
}
#stripe_7:before {
background: rgba(224,56,56,0.5);
}
#stripe_7:after {
background: rgba(224,56,56,0.8);
}

#stripe_8 {
background: #e75328;
}

/* --- Bar widths for section COMPANY */
.section-company #stripe_1, 
.section-company #stripe_2 {
width: 6.25%;
}

.section-company #stripe_company { width: 50%; }

.section-company #stripe_3, 
.section-company #stripe_4, 
.section-company #stripe_5, 
.section-company #stripe_6, 
.section-company #stripe_7, 
.section-company #stripe_8 {
width: 6.25%;
}

.section-company #stripe_8 {
width: 6%; /* all browsers except Safari are too dumb to round correctly */
}

/* --- Bar widths for section CODE */
.section-code #stripe_1, 
.section-code #stripe_2, 
.section-code #stripe_3 {
width: 4.167%;
}

.section-code #stripe_code { width: 62.5%; }

.section-code #stripe_4, 
.section-code #stripe_5, 
.section-code #stripe_6, 
.section-code #stripe_7, 
.section-code #stripe_8 {
width: 5%;
}

.section-code #stripe_8 {
width: 4.9%; /* all browsers except Safari are too dumb to round correctly */
}

/* --- Bar widths for section CREW */
.section-crew #stripe_1, 
.section-crew #stripe_2, 
.section-crew #stripe_3, 
.section-crew #stripe_4 {
width: 9.375%;
}

.section-crew #stripe_crew { width: 50%; }

.section-crew #stripe_5, 
.section-crew #stripe_6, 
.section-crew #stripe_7, 
.section-crew #stripe_8 {
width: 3.125%;
}

.section-crew #stripe_8 {
width: 3%; /* all browsers except Safari are too dumb to round correctly */
}

/* --- Bar widths for section CHRONICLE */
.section-chronicle #stripe_1, 
.section-chronicle #stripe_2, 
.section-chronicle #stripe_3, 
.section-chronicle #stripe_4, 
.section-chronicle #stripe_5 {
width: 5%;
}

.section-chronicle #stripe_chronicle { width: 62.5%; }

.section-chronicle #stripe_6, 
.section-chronicle #stripe_7, 
.section-chronicle #stripe_8 {
width: 4.167%;
}

.section-chronicle #stripe_8 {
width: 4%; /* all browsers except Safari are too dumb to round correctly */
}

/* --- Bar widths for section CONTACT */
.section-contact #stripe_1, 
.section-contact #stripe_2, 
.section-contact #stripe_3, 
.section-contact #stripe_4, 
.section-contact #stripe_5 {
width: 7.5%;
}

.section-contact #stripe_contact { width: 50%; }

.section-contact #stripe_6, 
.section-contact #stripe_7, 
.section-contact #stripe_8 {
width: 4.167%;
}

.section-contact #stripe_8 {
width: 4%; /* all browsers except Safari are too dumb to round correctly */
}

/* !-------------------------------------------- */
/* !STAGE MODE: Active overlays */
/* !-------------------------------------------- */

/* --- Initialize blocking layer */
#ensemble_overlay {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: rgba(79, 77, 136,0.4);
}

.stage .ensemble:not(#ensemble_overlay) {
    filter: none; /* use "none" to avoid creating new stacking contexts */
}

/* --- Active overlay layer */
.stage.overlay-active {
    overflow: hidden;
    height: 100%;
}

.stage.overlay-active .ensemble:not(#ensemble_overlay) {
    filter: blur(10px);
}

.stage.overlay-active #ensemble_overlay {
    display: block;
}

/* IE11 doesn't support the filter property, so we're dimming the background instead */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
    #ensemble_overlay {
        background-color: rgba(79, 77, 136, 0.7);
    }

    .stage .ensemble:not(#ensemble_overlay) {
        opacity: 1;
    }

    .stage.overlay-active .ensemble:not(#ensemble_overlay), 
    .stage.overlay-active .ensemble#nav_bar .navigation *, 
    .stage.overlay-active .ensemble#nav_bar h1 {
        opacity: 0.5;
    }
}

/* Edge requires additional selector specifity to blur the navigation */
@supports (-ms-ime-align:auto) and (color:unset) {
    .stage.overlay-active .ensemble#nav_bar .navigation *, 
    .stage.overlay-active .ensemble#nav_bar h1 {
        filter: blur(10px);
    }
}

/* --- Contained actor with overlay content */
#ensemble_overlay .actor {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%);
    max-height: calc(100vh - 50px);
    overflow: hidden;
    border: 1px solid #233c51;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.stage.is-touchscreen #ensemble_overlay .actor {
    max-height: calc(100vh - 130px);
}

/* Image viewer */
#ensemble_overlay #actor_viewer {
    height: auto;
    width: 80%;
    left: 10%;
}