/*
    (c)2018 - visuallizard.com

    General Layout Styles.
    Sets major blocking to elements that appear accross the site in different templates.
    All can be removed and started from scratch or elemnts can be adjusted individually.
*/

.container {
/*
    Set site maximum width only here and use this class to centre the content in browser window.
    Use "max-width" instead of "width" for auto-responsivness.
*/
    position: relative;
    float: left;
    left: 50%;
    width: 1200px;
    margin: 0 0 0 -600px;
    padding: 0;
}

.full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}



/* !announcement styles */
.announcement {
    display: block;
    position: relative;
    width: 100%;
    padding: 15px 0;
    text-align: center;
}
    .announcement .cke > .c1 {
        margin: 0;
    }
    .announcement h3 {
        margin: 0 0 10px 0;
        font-size: 24px;
        line-height: 1;
        text-align: center;
    }
    .announcement p {
        margin: 0;
    }


.site-header {
    padding: 0;
    background: rgba(246,246,236,1);
}
    .site-header .container {
        padding: 15px 30px;
    }


.site-title {
    display: block;
    position: relative;
    float: left;
    width: 25%;
    padding: 0;
    margin: 0;
}
    .site-title > a {
        display: block;
        position: relative;
        height: 100px;
        text-decoration: none;
        color: inherit;
        font-weight: 800;
        font-size: 30px;
        line-height: 1;
        text-indent: -9999em;
        transition: all .2s;
        background: url("../png/logo_nwc.png") no-repeat center center;
        background-size: contain;
    }
    .site-title:hover > a {
        opacity: .8;
    }


/* ! NAVIGATIONS  */
div.nav-block {
    display: block;
    position: relative;
    clear: right;
    float: right;
    width: 75%;
    margin: 23px 0 0 0;
}


/* General for all levels and navs: */
.nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav-item {
    display: block;
    position: relative;
    width: 100%;
    vertical-align: top;
}
.nav-link {
    display: block;
    padding: 5px;
    color: inherit;
    text-decoration: none;
    transition: all .3s;

    line-height: 1.3;
}
.nav-link:hover {

}
.nav-item.has-active > .nav-link {
    color: skyblue;
}
.nav-item.active > .nav-link {

}

    /*     Main nav specific (opinionated) */
    .main-nav {
        clear: both;
        padding: 15px 0;
    }

    /* Level 1 (horizontal) */
    .main-nav .nav-1 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .main-nav .nav-1 > li {

    }
    .main-nav .nav-1 > li > a {
        text-align: center;
        color: rgba(11,102,81,1);
    }
    .main-nav .nav-1 > li:hover > a { background: rgba(246,246,236,1); }
    .main-nav .nav-1 > li.active > a { font-weight: 600; background: rgba(246,246,236,1); }
    .main-nav .nav-1 > li#navigation-1-0:hover > a,
    .main-nav .nav-1 > li#navigation-1-0.active > a { color: rgba(59,176,60,1); }
    .main-nav .nav-1 > li#navigation-1-1:hover > a,
    .main-nav .nav-1 > li#navigation-1-1.active > a { color: rgba(208,155,44,1); }
    .main-nav .nav-1 > li#navigation-1-2:hover > a,
    .main-nav .nav-1 > li#navigation-1-2.active > a { color: rgba(11,102,81,1); }
    .main-nav .nav-1 > li#navigation-1-3:hover > a,
    .main-nav .nav-1 > li#navigation-1-3.active > a { color: rgba(125,104,152,1); }
    .main-nav .nav-1 > li#navigation-1-4:hover > a,
    .main-nav .nav-1 > li#navigation-1-4.active > a { color: rgba(0,181,173,1); }
    .main-nav .nav-1 > li#navigation-1-5:hover > a { color: rgba(0,71,187,1); }

    /* all sub-lists (drop-downs & drop-sides) */
    .main-nav .sub-list {
        display: block;
        position: absolute;
        top: 0;
        left: auto;
        width: 240px;
        margin: 0;
        padding: 0;

        background-color: #fff;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

        transition: all .2s;
        z-index: 1000;
    }
    .main-nav li              > .sub-list { visibility: hidden;  opacity: 0; }
    .main-nav li:hover        > .sub-list { visibility: visible; opacity: 1; }
    .main-nav li:focus-within > .sub-list { visibility: visible; opacity: 1; }

    .main-nav .sub-list .sub-list { display: none; }

    .main-nav :nth-last-child(1) > .nav-2,
    .main-nav :nth-last-child(2) > .nav-2 { right: 0; left: auto; }

    .main-nav :nth-last-child(1) > .nav-2 .nav-list,
    .main-nav :nth-last-child(2) > .nav-2 .nav-list { right: 100%; left: auto; }

    /* Level 2 (the only drop-down ) */
    .main-nav .nav-2 {
        top: 100%;
    }


    .main-nav .nav-2 > li {

    }
    .main-nav .nav-2 > li > a {
        padding: 5px 10px;
    }

    /* Level 3, etc. */
    .main-nav .nav-3 {

    }
    .main-nav .nav-3 > li {

    }
    .main-nav .nav-3 > li > a {

    }


    /* !sidebar navigation */
    .sidebar .nav-list .nav-item {
        display: none;
    }
    .sidebar .nav-list > .nav-item.active,
    .sidebar .nav-list > .nav-item.has-active {
        display: block;
    }
    .sidebar .nav-list > .nav-item.has-active ul.sub-list {
        margin-left: 20px;
    }
    .sidebar .nav-list > .nav-item.active ul.sub-list .nav-item,
    .sidebar .nav-list > .nav-item.has-active ul.sub-list .nav-item {
        display: block;
    }
    main.foundation .sidebar a { color: #fff; }
    .sidebar .nav-list.nav-1 > .nav-item.has-sub > a { font-size: 24px; color: #fff; }
    .sidebar .nav-list.nav-1 .nav-item.has-sub .sub-list a.nav-link:hover,
    .sidebar .nav-list.nav-1 .nav-item.has-sub .sub-list li.has-active a,
    main.foundation .sidebar .nav-list.nav-1 .nav-item.has-sub .sub-list a.nav-link:hover,
    main.foundation .sidebar .nav-list.nav-1 .nav-item.has-sub .sub-list li.has-active a {
        text-decoration: underline;
        color: #fff;
    }
    .sidebar .nav-list.nav-1 .nav-item.has-sub .sub-list li.active a:before,
    .sidebar .nav-list.nav-1 .nav-item.has-sub .sub-list li.has-active a:before {
        content: ">";
        display: block;
        position: absolute;
        left: -15px;
        font-weight: 700;
        color: #fff;
    }
    .sidebar ul.nav-3 { display: none; }


    /* Has-subs Chevron indicators */
/*
    .main-nav .has-sub > .nav-link {
        padding-right: 1.5em;
    }
    .main-nav .has-sub > .nav-link:after {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        right: .25em;
        content: " ";
        background: no-repeat right center url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path fill='%23setColorCodeHere' d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' /></svg>");
        display: block;
        width: 1em;
        height: 1em;
        background-size: 100%;
        transform-origin: center center;
    }
    .main-nav .nav-1 > .has-sub > .nav-link:after {
        transform: rotate(90deg);
    }
*/


#filmstrip {
    display: block;
    position: relative;
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}


/* ! Banners: defaults */
.banners {
    margin-bottom: 2em;
}
    .banner {
        position: relative;
    }
        .banner-link {
            display: block;
        }
        .banner-img {
            display: block;
            width: 100%;
            height: auto;
        }
        .banner-text {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            margin: 0 auto;
            text-align: center;
            text-transform: uppercase;
            text-shadow: 0 0 3px rgba(0,0,0,.5);
            color: #fff;
            transform: translateY(-50%);
            transition: all .2s;
        }
        .banner-link:hover .banner-text {
            opacity: .5;
        }
            .banner-title {
                color: inherit;
                font-size: 50px;
                font-size: calc(1em + 2vw);
                margin-top: 0;
                margin-bottom: 0;
            }
            .banner-desc {
                max-width: 600px;
                margin: 0 auto;
                letter-spacing: 0.05em;
            }

    /* ! Banners: Featured - slider */
    .featured.banners {

    }

    /* ! Banners: Grid Fixed item width */
    .grid-fixed.banners {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 102%;
        margin: 0 -1% 0;
        padding: 0;
    }
        .grid-fixed .banner {
            display: inline-block;
            width: 25%;
            padding: 1em 1%;
        }
        .grid-fixed .banner-link {
            display: flex;
            align-items: center;
            height: 100%;
        }
        .grid-fixed .banner-img {
            transition: transform .3s;
        }
        .grid-fixed .banner-link:hover .banner-img {
            transform: scale(1.1);
        }
        .grid-fixed .banner-title {
            font-size: 20px;
        }

    /* ! Banners: Grid Flex item width
    (usually for sponsor logos where width is unknown. Set module settigns to something like Width:0 and Height:100px ) */
    .grid-flex.banners {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 102%;
        margin: 0 -1% 1em;
        padding: 0;
    }
        .grid-flex .banner {
            width: auto;
            margin: 1em 1%;
            padding: 0;
        }
        .grid-flex .banner-link {

        }
        .grid-flex .banner-img {
            display: block;
            width: auto;
            height: 100%;
            max-height: 100px;
            margin: 0;
            transition: all .3s;
        }
        .grid-flex .banner:hover .banner-img {
            transform: scale(1.1);
        }
        .grid-flex .banner-title {
            font-size: 20px;
        }


/*     ! SECTIONS    */
main {

}
    main .container {
        display: block;
        position: relative;
        clear: both;
        padding: 0;
        background-color: rgba(246,246,236,1);
        background-image: url("../jpg/map_north_america.jpg");
        background-repeat: no-repeat;
        background-position: center top;
        background-attachment: fixed;
        background-size: 100% auto;
    }
    main.nomap .container {
        background: none;
    }


    main.landing .container {
        padding: 0 340px;
        background: none;
    }
    main.landing section#heading {
        position: relative;
        padding: 0;
        margin: 0;
        min-height: 400px;
        max-height: 400px;
        background: #0b6651 url("../jpg/openhouse-banner.jpg") no-repeat center center;
        background-size: cover;
    }
    body.handleSubmission section#heading { order: -2; }
    main.landing section#heading h1 {
        position: absolute;
        bottom: 80px;
        left: 0;
        right: 0;
        margin: 0;
        font-family: "Georgia", serif;
        text-align: center;
        text-shadow: 2px 2px 4px #444;
        color: #fff;
    }
    main.landing section#heading h2 {
        position: absolute;
        bottom: 40px;
        left: 0;
        right: 0;
        margin: 0;
        font-weight: 400;
        text-align: center;
        text-shadow: 2px 2px 4px #444;
        color: #fff;
    }
    main.landing section#introduction {
        padding: 40px 0;
    }
    main.landing section#introduction .container *:last-child { margin-bottom: 0; }
    main.landing section#expansion {
        padding: 40px 0;
        background: #0b6651;
        color: #fff;
    }
    main.landing section#expansion .container *:first-child { margin-top: 0; }
    main.landing section#expansion .container *:last-child { margin-bottom: 0; }
    main.landing section#expansion h3 {
        margin: 1rem 0 0.25rem 0;
        font-weight: 400;
        color: #fff;
    }
    main.landing section#expansion a {
        text-decoration: underline;
        color: inherit;
    }
    main.landing section#registration {
        padding: 40px 0;
    }
    body.handleSubmission section#registration { order: -1; }
    main.landing section#registration div.form-block {
        display: block;
        position: relative;
        padding: 2rem;
        margin: 0;
        border: 1px solid #0b6651;
        background: rgba(246,246,236,1);
    }
    main.landing section#registration div.form-block form {
        background: none;
        padding: 0;
    }
    main.landing section#registration div.form-block form .input-check-option {
        width: 100%;
    }
    main.landing section#registration div.success {
        display: block;
        position: relative;
        padding: 1.5rem;
        margin: 0 0 1.5rem 0;
        background: #d2fff2;
        color: #0b6651;
    }

    main.landing section#questions {
        padding: 0 0 40px 0;
    }
    body.handleSubmission section#questions { padding: 40px 0; }
    main.landing section#questions h2 { font-weight: 400; }
    main.landing section#questions div.question-set { margin: 0 0 1.5rem 0; }
    main.landing section#questions div.faq-item > h3 {
        padding: 0 0 0 30px;
        font-size: 1rem;
        font-weight: 400;
        color: #000;
    }
    main.landing section#questions div.faq-item > h3:before {
        content: "Q:";
        position: absolute;
        margin-left: -30px;
        color: #0b6651;
    }
    main.landing section#questions div.faq-item > div.faq-answer {
        padding: 0 0 0 30px;
        color: #000;
    }
    main.landing section#questions div.faq-item > div.faq-answer:before {
        content: "A:";
        position: absolute;
        margin: 3px 0 0 -30px;
        color: #0b6651;
    }
    main.landing section#questions .container .cke .c1 *:last-child {
        margin-bottom: 0;
    }



    main .container.wide {
        padding: 30px 100px;
    }
    main.sustainability.summary-governance .container,
    main.sustainability.summary-governance-new .container,
    main.promise .container,
    main.pillar .container,
    main.pillar-2025 .container {
        background: #fff;
    }
    main.pillar#pillar-1 {  }
    main.pillar#pillar-2 {  }
    main.pillar#pillar-3 {  }
    main.pillar#pillar-4 {  }
main.name-store {
    flex-direction: row;
}
    main.name-store .container {
        display: block;
        position: relative;
        left: 0;
        clear: both;
        width: 100%;
        padding: 30px 0;
        margin: 0;
        background-color: rgba(246,246,236,1);
        background-image: url("../jpg/tundra.jpg");
        background-repeat: no-repeat;
        background-position: center top;
        background-attachment: fixed;
        background-size: cover;
    }
    main .container .introduction {
        display: block;
        position: relative;
        clear: both;
        float: left;
        width: 100%;
        padding: 60px 200px;
        margin: 0;
        text-align: center;
    }
    main .container .promise-intro {
        display: block;
        position: relative;
        width: 100%;
        padding: 60px 100px;
        margin: 0;
    }
    main .container .pillar {
        display: block;
        position: relative;
        width: 100%;
        padding: 30px 60px;
        margin: 0;
    }
    main .container .commitment {
        display: block;
        position: relative;
        width: 100%;
        padding: 60px 100px;
        margin: 0;
        background: rgba(11,102,81,0.8);
        color: #fff;
    }
    main.name-store .container .introduction,
    main.name-store .container .terms {
        display: block;
        position: relative;
        left: 50%;
        clear: both;
        float: left;
        width: 1000px;
        padding: 30px;
        margin: 0 0 30px -500px;
        background: rgba(255,255,255,0.5);
    }
    main.name-store .container .terms { background: rgba(255,255,255,0.85); }
    main .container .promise {
        display: block;
        position: relative;
        clear: both;
        float: left;
        width: 100%;
        padding: 40px 100px 40px 500px;
        margin: 0;
        box-shadow: -350px 0px 0px rgba(11,102,81,0.8), 350px 0px 0px rgba(11,102,81,0.8);
        background: rgba(11,102,81,0.8);
    }
    main .container .promise:before {
        content: "";
        display: block;
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 440px;
        height: 330px;
        padding: 0;
        margin: 0;
        box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
        background: url("../jpg/pride-month.jpg") no-repeat center center;
        background: url("../jpg/our_promise.jpg") no-repeat center center;
        background-size: contain;
        transform: rotate(-5deg);
    }
    main .container .media-investors {
        display: block;
        position: relative;
        clear: both;
        float: left;
        width: 100%;
        padding: 60px 200px;
        margin: 0;
    }
    main .container .history {
        display: block;
        position: relative;
        clear: both;
        float: left;
        width: 100%;
        padding: 40px 100px 40px 500px;
        margin: 0;
        overflow: hidden;
        box-shadow: -350px 0px 0px rgba(208,155,44,0.8), 350px 0px 0px rgba(208,155,44,0.8);
        background: rgba(208,155,44,0.8);
    }
    main .container .history:before {
        content: "";
        display: block;
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 440px;
        height: 330px;
        padding: 0;
        margin: 0;
        background: url("../jpg/historic_timeline.jpg") no-repeat center center;
        background-size: contain;
    }

    main .container.property-block {
        padding: 15px 30px 30px 30px;
        background: rgba(246,246,236,1);
    }
    .primary {
        display: block;
        position: relative;
        float: right;
        width: 68%;
        padding: 0 60px 30px 0;
        margin: 0 0 0 2%;
    }
        .primary div.community-profile div.colourblock {
            display: block;
            position: relative;
            clear: both;
            float: left;
            width: 100%;
            padding: 0;
            margin: 0 0 15px 0;
        }
        .primary div.community-profile div.colour {
            display: block;
            position: relative;
            float: left;
            width: 32%;
            min-height: 420px;
            padding: 15px 0 0 0;
            margin: 0 0 0 2%;
            text-align: center;
            color: #fff;
        }
        .primary div.community-profile div.colour.mission {
            margin: 0;
            background: rgba(0,181,173,1);
        }
        .primary div.community-profile div.colour.vision {
            background: rgba(125,104,152,1);
        }
        .primary div.community-profile div.colour.principles {
            background: rgba(59,176,60,1);
        }
            .primary div.community-profile div.colour h3 {
                padding: 15px;
                margin: 0;
                font-weight: 600;
                color: #fff;
            }
            .primary div.community-profile div.colour p {
                padding: 0 15px;
            }
            .primary div.community-profile div.colour img {
                display: block;
                position: absolute;
                bottom: 0;
                width: 100%;
                height: auto;
            }
    .sidebar {
        display: block;
        position: relative;
        float: left;
        width: 30%;
        padding: 30px 0 30px 60px;
        background: #ccc;
        box-shadow: -350px 0px 0px #ccc;
    }
    main.about .sidebar {
        background: rgba(59,176,60,1);
        color: #fff;
        box-shadow: -350px 0px 0px rgba(59,176,60,1);
    }
    main.community .sidebar {
        background: rgba(208,155,44,1);
        color: #fff;
        box-shadow: -350px 0px 0px rgba(208,155,44,1);
    }
    main.investor .sidebar {
        background: rgba(11,102,81,1);
        color: #fff;
        box-shadow: -350px 0px 0px rgba(11,102,81,1);
    }
    .default-careers main .sidebar,
    main.career .sidebar {
        background: rgba(125,104,152,1);
        color: #fff;
        box-shadow: -350px 0px 0px rgba(125,104,152,1);
    }
    main.media .sidebar {
        background: rgba(0,181,173,1);
        color: #fff;
        box-shadow: -350px 0px 0px rgba(0,181,173,1);
    }
    main.foundation .sidebar {
        background: rgba(0,71,187,1);
        color: #fff;
        box-shadow: -350px 0px 0px rgba(0,71,187,1);
    }


/* ! Site Footer  */
.site-footer {
    position: relative;
    clear: both;
    padding: 1em 0;
    margin: 0;
    background: rgba(88,79,70,1);
    color: #fff;
}

/* ! Error Pages */
.code-404.error-header {
    font-size: 50px;
}
.code-404.error-code {
    font-size: 12px;
}