/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

body {
    margin: 0
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block
}

audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline
}

    audio:not([controls]) {
        display: none;
        height: 0
    }

[hidden], template {
    display: none
}

a {
    background-color: transparent
}

    a:active, a:hover {
        outline: 0
    }

abbr[title] {
    border-bottom: 1px dotted
}

b, strong {
    font-weight: 700
}

dfn {
    font-style: italic
}

mark {
    color: #000;
    background: #ff0
}

small {
    font-size: 80%
}

sub, sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    height: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

pre {
    overflow: auto
}

code, kbd, pre, samp {
    font-family: monospace,monospace;
    font-size: 1em
}

button, input, optgroup, select, textarea {
    margin: 0;
    font: inherit;
    color: inherit
}

button {
    overflow: visible
}

button, select {
    text-transform: none
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer
}

    button[disabled], html input[disabled] {
        cursor: default
    }

    button::-moz-focus-inner, input::-moz-focus-inner {
        padding: 0;
        border: 0
    }

input {
    line-height: normal
}

    input[type="checkbox"], input[type="radio"] {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0
    }

    input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
        height: auto
    }

    input[type="search"] {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        -webkit-appearance: textfield
    }

        input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
            -webkit-appearance: none
        }

fieldset {
    padding: .35em .625em .75em;
    margin: 0 2px;
    border: 1px solid silver
}

legend {
    padding: 0;
    border: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: 700
}

table {
    border-spacing: 0;
    border-collapse: collapse
}

td, th {
    padding: 0
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

html, body, div, article, section, main, footer, header, form, fieldset, legend,
pre, code, p, a, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, textarea,
input[type="email"], input[type="number"], input[type="password"],
input[type="tel"], input[type="text"], input[type="url"], .border-box {
    box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, fieldset {
    margin: 0;
    padding: 0;
}

button, input, optgroup, select, textarea {
    font-size: 100%;
    margin: 0;
}

input, select, textarea {
    vertical-align: baseline;
    *vertical-align: middle
}

article, footer, header, nav, section {
    display: block
}

li {
    list-style: none
}

img {
    border-style: none;
    vertical-align: middle
}

button, input {
    line-height: normal;
    overflow: visible
}

button, [type="button"], [type="reset"], [type="submit"] {
    cursor: pointer;
    -webkit-appearance: button
}

[type="checkbox"], [type="radio"] {
    box-sizing: border-box
}

[type="search"] {
    -webkit-appearance: textfield;
    box-sizing: content-box
}

    [type="search"]::-webkit-search-decoration {
        -webkit-appearance: none
    }

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto;
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td {
    vertical-align: top
}

div, article, section, header, footer, nav, li {
    position: relative
}


/* TYPOGRAPHY */
@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');
    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.fa, .ui-icon {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Open Sans',Helvetica,Arial,sans-serif;
    font-size: 15px;
}

h1, h2, h3, h4 {
    font-family: 'Cairo','Open Sans',Helvetica,Arial,sans-serif;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: .67em;
}

h1, .h1 {
    font-size: 36px;
    font-weight: normal;
}

h2, .h2 {
    font-size: 26px;
}

h3, .h3 {
    font-size: 31px;
    font-weight: normal;
}

h4, .h4 {
    font-size: 18px;
}

h5, .h5 {
    font-size: 15px;
}

h6, .h6 {
    font-size: 12px;
}

p, li {
    line-height: 1.7;
    margin-bottom: 1.2em;
}

li {
    margin-bottom: .3em;
}

ul, ol {
    margin-bottom: 1em;
}

.large-text {
    font-size: 18px;
}

    .large-text strong {
        font-weight: 600;
    }

img {
    max-width: 100%;
}

.full-image {
    width: 100%;
}

a {
    color: #000;
}

.page-content ul, .page-content ol {
    margin-left: 40px;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-success {
    color: #3c763d;
}

.text-warning {
    color: #8a6d3b;
}

.text-error {
    color: #b60000;
}

.text-cairo {
    font-family: 'Cairo','Open Sans',Helvetica,Arial,sans-serif;
}

.no-wrap {
    white-space: nowrap;
}

@media (min-width: 768px) {
    body {
        font-size: 16px;
    }

    h2, .h2 {
        font-size: 34px;
    }

    .large-text {
        font-size: 19px;
    }
}

@media (min-width: 1280px) {
    body {
        font-size: 17px;
    }

    h1, .h1 {
        font-size: 45px;
    }

    .large-text {
        font-size: 21px;
    }
}

/* FA ICONS */
@font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/fa-brands-400.eot");
    src: url("../fonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../fonts/fa-brands-400.woff2") format("woff2"), url("../fonts/fa-brands-400.woff") format("woff"), url("../fonts/fa-brands-400.ttf") format("truetype"), url("../fonts/fa-brands-400.svg#fontawesome") format("svg");
}

.fa, .ui-icon {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fab {
    display: inline-block;
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
}

    .fa span, .fab span {
        display: inline-block;
        text-indent: -9999px;
    }

.fa-facebook-f:before {
    content: "\f39e";
}

.fa-twitter:before {
    content: "\f099";
}

.fa-envelope:before {
    content: "\f0e0";
}



/* LAYOUT */
#page-main {
    padding-top: 80px;
}

.page-wrapper {
    padding-left: 20px;
    padding-right: 20px;
}

.hidden {
    display: none;
}

section {
    padding-top: 45px;
    padding-bottom: 30px;
}

.margin-top-lg {
    margin-top: 20px;
}

.padding-top-none {
    padding-top: 0 !important;
}

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    min-height: 1px;
    padding: 0 15px;
    position: relative;
}

.col-section {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}

.col-no-margin {
    margin: 0 -15px;
}

.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    float: left;
}

.col-xs-12 {
    width: 100%;
}

.col-xs-11 {
    width: 91.66666667%;
}

.col-xs-10 {
    width: 83.33333333%;
}

.col-xs-9 {
    width: 75%;
}

.col-xs-8 {
    width: 66.66666667%;
}

.col-xs-7 {
    width: 58.33333333%;
}

.col-xs-6 {
    width: 50%;
}

.col-xs-5 {
    width: 41.66666667%;
}

.col-xs-4 {
    width: 33.33333333%;
}

.col-xs-3 {
    width: 25%;
}

.col-xs-2 {
    width: 16.66666667%;
}

.col-xs-1 {
    width: 8.33333333%;
}

.grey-section {
    background: #e9eaeb;
}

.black-section {
    background: #000;
    color: #fff;
}

.intro-width p {
    max-width: 900px;
}

@media (max-width: 767px) {
    .col-xs-12 {
        margin-bottom: 20px;
    }
}

@media (min-width: 768px) {
    #page-main {
        padding-top: 145px;
    }

    .page-wrapper {
        padding-left: 40px;
        padding-right: 40px;
        margin-left: auto;
        margin-right: auto;
        max-width: 1130px;
    }

    .margin-top-lg {
        margin-top: 40px;
    }

    .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
        float: left;
    }

    .col-sm-12 {
        width: 100%;
    }

    .col-sm-11 {
        width: 91.66666667%;
    }

    .col-sm-10 {
        width: 83.33333333%;
    }

    .col-sm-9 {
        width: 75%;
    }

    .col-sm-8 {
        width: 66.66666667%;
    }

    .col-sm-7 {
        width: 58.33333333%;
    }

    .col-sm-6 {
        width: 50%;
    }

    .col-sm-5 {
        width: 41.66666667%;
    }

    .col-sm-4 {
        width: 33.33333333%;
    }

    .col-sm-3 {
        width: 25%;
    }

    .col-sm-2 {
        width: 16.66666667%;
    }

    .col-sm-1 {
        width: 8.33333333%;
    }
}

@media (min-width: 1280px) {
    #page-main {
        padding-top: 145px;
    }

    section {
        padding-top: 55px;
        padding-bottom: 40px;
    }

    col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
        padding: 0 18px;
    }

    .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 {
        float: left;
    }

    .col-no-margin {
        margin: 0 -18px;
    }

    .col-md-12 {
        width: 100%;
    }

    .col-md-11 {
        width: 91.66666667%;
    }

    .col-md-10 {
        width: 83.33333333%;
    }

    .col-md-9 {
        width: 75%;
    }

    .col-md-8 {
        width: 66.66666667%;
    }

    .col-md-7 {
        width: 58.33333333%;
    }

    .col-md-6 {
        width: 50%;
    }

    .col-md-5 {
        width: 41.66666667%;
    }

    .col-md-4 {
        width: 33.33333333%;
    }

    .col-md-3 {
        width: 25%;
    }

    .col-md-2 {
        width: 16.66666667%;
    }

    .col-md-1 {
        width: 8.33333333%;
    }
}


/* HEADER */
header {
    background: #fff;
    box-shadow: 0 2px 10px #aaa;
    height: 80px;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#logo {
    display: flex;
    align-items: center;
    height: 100%;
}

    #logo img {
        width: 200px;
        margin-left: 20px;
    }

@media (min-width: 768px) {
    #logo img {
        width: 470px;
        margin-left: 40px;
    }
}

@media (min-width: 1280px) {
    #logo img {
        width: 470px;
        margin-left: 130px;
    }
}
#mobile-toggle-container {
    background: #fff;
    box-shadow: 3px 3px 10px #aaa;
    padding: 10px;
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 1100;
}

#mobile-toggle {
    height: 26px;
    width: 32px;
}

    #mobile-toggle input {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0;
        cursor: pointer;
    }

        #mobile-toggle input:checked + span {
            background: transparent;
        }

            #mobile-toggle input:checked + span:after {
                transform: rotate(45deg) translate(-5px, -7px);
            }

            #mobile-toggle input:checked + span:before {
                transform: rotate(-45deg) translate(-6px, 7px);
            }

    #mobile-toggle span {
        position: absolute;
        width: 100%;
        height: 5px;
        background: #000;
        margin-top: 10px;
    }

        #mobile-toggle span:before, #mobile-toggle span:after {
            content: "";
            left: 0;
            position: absolute;
            width: 100%;
            height: 5px;
            background: #000;
            top: -9px;
            transition: 0.2s;
        }

        #mobile-toggle span:after {
            top: 9px;
        }

nav {
    background: #fff;
    border: 8px solid #000;
    display: none;
    left: 0;
    padding: 20px;
    position: fixed;
    overflow: auto;
    top: 0;
    width: 100%;
    z-index: 1000;
}

    nav div a {
        color: #000;
        display: block;
        padding: 17px 20px;
        text-decoration: none;
    }

#primary-nav {
    margin-top: 60px;
    margin-bottom: 16px;
}

    #primary-nav div {
        border-bottom: 1px solid #000;
        font-family: 'Cairo','Open Sans',Helvetica,Arial,sans-serif;
        font-size: 20px;
        margin: 0;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

        #primary-nav > div:first-child {
            border-top: 1px solid #000;
        }

        #primary-nav div a{
            flex-grow: 1;
        }

        #primary-nav div button {
            width: 71px;
            border: 0;
            padding: 0;
        }

        #primary-nav div button i{
            pointer-events: none;
        }

        #primary-nav div a:hover,
        #primary-nav div button:hover {
            background: #000;
            color: var(--main-accent-color);
        }

        #primary-nav div.sub-menu {
            flex-basis: 100%;
            display: none;
            border: 0;
        }

        #primary-nav div.sub-menu a {
            padding-left: 36px;
            font-size: 16px;
            font-weight: 600;
            border-top: 1px solid #000;
        }
        #primary-nav .active div.sub-menu {
            display: block;
        }
#secondary-nav {
    font-size: 16px;
    font-weight: bold;
}

    #secondary-nav div a {
        padding: 12px 20px;
    }

        #secondary-nav div a:hover {
            text-decoration: underline;
        }

@media (min-width: 768px) {
    header {
        height: 145px;
    }


    #mobile-toggle-container {
        padding: 18px 13px 12px;
        top: 40px;
        right: 40px;
    }

    #mobile-toggle {
        height: 34px;
        width: 42px;
    }

        #mobile-toggle input:checked + span:after {
            transform: rotate(45deg) translate(-7px, -9px);
        }

        #mobile-toggle input:checked + span:before {
            transform: rotate(-45deg) translate(-9px, 11px);
        }

        #mobile-toggle span {
            height: 7px;
            background: #000;
        }

            #mobile-toggle span:before, #mobile-toggle span:after {
                height: 7px;
                top: -13px;
            }

            #mobile-toggle span:after {
                top: 13px;
            }

    nav {
        border: 18px solid #000;
        height: 100%;
        left: auto;
        right: 0;
        max-width: 445px;
    }

    #primary-nav {
        margin-top: 125px;
    }

        #primary-nav div {
            font-size: 34px;
        }

            #primary-nav div button {
                width: 97px;
                border: 0;
            }
            #primary-nav div.sub-menu a {
                padding-left: 40px;
                font-size: 22px;
            }

    #secondary-nav {
        font-size: 22px;
    }
}

@media (min-width: 1280px) {

    header #logo-bar {
        background: var(--main-accent-color);
        display: block;
        height: 23px;
        position: absolute;
        left: 432px;
        right: 125px;
        top: 72px;
        z-index: -1;
    }
}

/* SIDE BANNER */
/*#side-banner-container {margin: 0 auto; max-width: 1186px;}*/
#side-banner {
    display: none;
    font-family: 'space mono';
    font-size: 12px;
    position: absolute;
    transform: rotate(-90deg) translate(-100%, 50px);
    transform-origin: top left;
    left: 0;
    top: 0;
    white-space: nowrap;
    z-index: 500;
}

    #side-banner strong {
        font-size: 16px;
        font-weight: 700;
    }

    #side-banner #side-bar-1, #side-banner #side-bar-2 {
        background: var(--main-accent-color);
        display: inline-block;
        height: 12px;
    }

    #side-banner #side-bar-1 {
        width: 694px;
    }

    #side-banner #side-bar-2 {
        width: 141px;
    }

#side-text {
    display: inline-block;
    margin: 0 10px;
}

.side-text-white-bg {
    background: #fff;
}

.side-text-white {
    color: #fff;
}

@media (min-width: 1280px) {
    #side-banner {
        display: block;
        margin-top: 145px;
    }
}

/* HOME */
#home-intro {
    margin-bottom: 20px;
}

    #home-intro h1, #home-intro p {
        display: inline;
    }

    #home-intro h1 {
        font-size: 23px;
        font-weight: bold;
    }

    #home-intro p {
        font-size: 20px;
    }

#home-image-container {
    max-height: 650px;
    overflow: hidden;
}

#home-image {
    width: 100%;
}

#home-benefit-link-1, #home-benefit-link-2 {
    font-family: 'Cairo','Open Sans',Helvetica,Arial,sans-serif;
    font-weight: 600;
}

#home-benefit-link-1 {
    display: none;
}

#home-explore-boxes div {
    margin-bottom: 40px;
    padding-bottom: 60px;
}

#home-explore-boxes img {
    margin-top: 20px;
    margin-bottom: 30px;
    width: 100%;
}

#home-explore-boxes .btn {
    bottom: 0;
    position: absolute;
    width: calc(100% - 30px);
}

#home-explore-boxes a {
    text-decoration: none;
}

    #home-explore-boxes a img:hover, #home-explore-boxes a h3:hover {
        text-decoration: underline;
    }

#item-list .col-xs-12 {
    margin-bottom: 30px;
}

#item-list h2 {
    font-size: 47px;
    font-weight: bold;
}

#item-list a {
    text-decoration: none;
}

    #item-list a:hover {
        text-decoration: underline;
    }

.item-list-container {
    border: 1px solid #7a7a7a;
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    padding: 15px 0 0 8px;
}

    .item-list-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 8px;
        height: 100%;
        background-color: var(--main-accent-color);
    }

    .item-list-container img {
        width: 100%;
    }

    .item-list-container div {
        align-self: flex-end;
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-between;
        height: 100%;
    }

    .item-list-container h3 {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 0;
        padding: 20px;
    }

    .item-list-container p {
        font-family: 'Cairo','Open Sans',Helvetica,Arial,sans-serif;
        margin: 0;
        padding: 0 20px;
    }

#case-study-footnote {
    border-top: 4px solid #eee;
    font-size: 13px;
    margin-top: 50px;
    padding-top: 10px;
}

@media (min-width: 768px) {
    #home-intro h1 {
        font-size: 29px;
    }

    #home-intro p {
        font-size: 26px;
    }

    #item-list h2 {
        font-size: 55px;
    }
}

@media (min-width: 1280px) {
    #home-benefit-link-1 {
        display: block;
    }

    #home-benefit-link-2 {
        display: none;
    }

    #item-list h2 {
        font-size: 60px;
    }

    #item-list .col-xs-12 {
        margin-bottom: 36px;
    }
}

/* MATRIX */
#matrix {
    font-family: 'Cairo','Open Sans',Helvetica,Arial,sans-serif;
    font-size: 16px;
    margin-top: 20px;
    width: 100%;
}

    #matrix th, #matrix td {
        padding: 14px 12px;
    }

    #matrix thead th {
        background: var(--main-accent-color);
    }

    #matrix .matrix-primary {
        background-color: #eaeaea;
        cursor: pointer;
    }

        #matrix .matrix-primary:hover {
            background-color: #fff;
        }

    #matrix .matrix-primary-active {
        background-color: #666;
        color: #fff;
    }

        #matrix .matrix-primary-active:hover {
            background-color: #666;
        }

        #matrix .matrix-primary-active img {
            display: none;
        }

    #matrix .matrix-category {
        padding-left: 50px;
    }

.matrix-marker {
    background: url(../images/icon-place.png) no-repeat left 10px center;
}

.matrix-drop {
    background: url(../images/icon-drop.png) no-repeat left 10px center;
}

.matrix-bolt {
    background: url(../images/icon-bolt.png) no-repeat left 10px center;
}

.matrix-plus {
    background: url(../images/icon-plus.png) no-repeat left 10px center;
}

.matrix-paper {
    background: url(../images/icon-paper.png) no-repeat left 10px center;
}

.matrix-equal {
    background: url(../images/icon-equal.png) no-repeat left 10px center;
}

.matrix-rainbow {
    background: url(../images/icon-rainbow.png) no-repeat left 10px center;
}

.matrix-marker, .matrix-drop, .matrix-bolt, .matrix-plus, .matrix-paper, .matrix-equal, .matrix-rainbow {
    background-size: 34px 34px;
}

#matrix .matrix-primary-active .matrix-category {
    background: url(../images/matrix-x.png) no-repeat left 10px center;
    background-size: 34px 34px;
}

#matrix tbody tr {
    display: none;
}

    #matrix tbody tr.matrix-primary {
        display: table-row;
    }

#matrix .barrier-money:after {
    background: url(../images/matrix-money.png) no-repeat;
    background-size: 23px 23px;
    content: ' ';
    position: absolute;
    bottom: 10px;
    right: -13px;
    width: 23px;
    height: 23px;
    z-index: 999
}

#matrix .barrier-probable:after {
    background: url(../images/matrix-p.png) no-repeat;
    background-size: 23px 23px;
    content: ' ';
    position: absolute;
    bottom: 40px;
    right: -13px;
    width: 23px;
    height: 23px;
    z-index: 999
}

#matrix-reference {
    font-family: 'Cairo','Open Sans',Helvetica,Arial,sans-serif;
    font-size: 15px;
    line-height: 23px;
    margin: 40px 0 50px;
}

    #matrix-reference p {
        margin-bottom: 10px;
    }

#matrix-footnotes {
    font-family: 'Cairo','Open Sans',Helvetica,Arial,sans-serif;
    font-size: 15px;
    line-height: 23px;
    margin: 40px 0 50px;
}

    #matrix-footnotes p {
        margin-bottom: 0px;
    }

#performance-factors #matrix-footnotes {
    margin-bottom: 0px;
}

#matrix-reference img {
    margin-right: 10px;
}

#matrix-pdf {
    font-family: 'Cairo','Open Sans',Helvetica,Arial,sans-serif;
    font-weight: 600;
}

    #matrix-pdf img {
        margin-right: 15px;
    }

.assesment-crit-popup {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: var(--main-accent-color);
}

    .assesment-crit-popup .barrier-images {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 12px 12px 0 12px;
    }

        .assesment-crit-popup .barrier-images img {
            height: 23px;
            width: 23px;
            margin-left: 2px;
        }

            .assesment-crit-popup .barrier-images img:first-child {
                margin-left: 0;
            }

    .assesment-crit-popup .barrier-content {
        padding: 12px;
    }

        .assesment-crit-popup .barrier-content p {
            margin-bottom: 12px;
        }

@media (min-width: 768px) {
    #matrix {
        font-size: 17px;
        line-height: 24px;
        margin-top: 40px;
    }
}

@media (max-width: 899px) {
    #matrix {
        border-bottom: 2px solid #d3d3d3;
    }

        #matrix th, #matrix td {
            display: block;
            text-align: left;
        }

        #matrix th {
            border-top: 2px solid #d3d3d3;
        }

        #matrix thead {
            display: none;
        }

        #matrix td {
            border-bottom: 1px dashed #7f7f7f;
            padding-left: 145px;
            position: relative;
        }

            #matrix td:first-of-type {
                border-top: 1px dashed #7f7f7f;
            }

            #matrix td:last-of-type {
                border-bottom: 0;
            }

            #matrix td::before {
                background: var(--main-accent-color);
                content: attr(data-label);
                float: left;
                font-weight: bold;
                padding: 14px 12px;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                width: 96px;
            }

        #matrix th {
            display: none;
        }

        #matrix .matrix-primary {
            background-image: url(../images/matrix-plus.png);
            background-repeat: no-repeat;
            background-position: right 25px center;
            background-size: 18px 18px;
        }

        #matrix .matrix-primary-active {
            background-image: url(../images/matrix-minus.png);
        }

        #matrix .matrix-category {
            display: block;
            font-size: 20px;
        }

        #matrix .matrix-sub-category {
            display: block;
        }

        #matrix .barrier {
            border-bottom: 4px solid #000;
            position: relative;
        }

        #matrix .barrier-money:after {
            bottom: -13px;
            left: 50%;
            margin-left: 50px;
        }

        #matrix .barrier-probable:after {
            bottom: -13px;
            left: 50%;
            margin-left: 50px;
        }
}

@media (min-width: 900px) {
    #matrix {
        font-size: 15px;
    }

        #matrix th, #matrix td {
            border-right: 1px dashed #7f7f7f;
            width: 16%;
            text-align: center;
        }

        #matrix tr {
            border-bottom: 2px solid #d3d3d3;
        }

        #matrix th:first-child, #matrix td:first-child {
            text-align: left;
            width: 20%;
        }

    .matrix-sub-category {
        vertical-align: top;
    }

    #matrix .matrix-category {
        font-weight: 600;
        padding-left: 45px;
    }

    .matrix-place, .matrix-drop, .matrix-bolt, .matrix-plus, .matrix-paper, .matrix-equal, .matrix-rainbow {
        background-size: 28px 28px;
    }

    #matrix .barrier {
        border-right: 4px solid #000;
        position: relative;
    }

    #matrix .barrier-money:after {
        bottom: 50%;
        margin-bottom: -12px;
        right: -13px;
    }

    #matrix .barrier-probable:after {
        bottom: 50%;
        margin-bottom: -12px;
        right: -13px;
    }
}

@media (min-width: 1024px) {
    #matrix {
        font-size: 17px;
    }
}

/* PERFORMANCE AREAS LANDING */
#performance-areas {
    font-family: 'Cairo','Open Sans',Helvetica,Arial,sans-serif;
}

#performance-intro {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
}

#performance-areas ul {
    margin: 0;
}

#performance-areas a {
    display: block;
    font-weight: bold;
    text-decoration: none;
}

.icon-performance {
    background: url(../images/performance-sprite.png) no-repeat;
}

#performance-center {
    display: none;
}

#center-performance-place, #center-performance-water, #center-performance-energy, #center-performance-health, #center-performance-materials, #center-performance-equity, #center-performance-beauty {
    display: none;
}

@media (max-width: 767px) {
    #performance-areas li {
        background: url(../images/arrow-next.png) no-repeat right 10px center;
        background-size: 14px 23px;
        border-bottom: 2px solid #999999;
        font-size: 20px;
        margin: 0;
    }

        #performance-areas li:first-child {
            border-top: 2px solid #999999;
        }

    #performance-areas a {
        padding: 12px 10px;
    }

    .icon-performance {
        background-size: 238px 102px;
        display: inline-block;
        margin-top: -5px;
        margin-right: 20px;
        width: 34px;
        height: 34px;
        vertical-align: middle;
    }

    .icon-place {
    }

    .icon-water {
        background-position: -34px 0;
    }

    .icon-energy {
        background-position: -68px 0;
    }

    .icon-health {
        background-position: -102px 0;
    }

    .icon-materials {
        background-position: -136px 0;
    }

    .icon-equity {
        background-position: -170px 0;
    }

    .icon-beauty {
        background-position: -204px 0;
    }

    #performance-center {
        height: 0;
        position: absolute;
        visibility: hidden;
    }

    #center-performance-tablet {
        display: none;
    }
}

@media (min-width: 768px) {
    #performance-intro {
        margin-bottom: 60px;
        max-width: 300px;
    }

    #performance-areas ul {
        background: url(../images/performance-grid.png) no-repeat center top;
        background-size: 642px 621px;
        margin: 0 auto;
        margin-bottom: 80px;
        position: relative;
        height: 621px;
        width: 642px;
    }

    #performance-areas a.performance-primary {
        background: rgba(255, 255, 255, 0.7);
        border: 2px solid #b2b0b0;
        border-radius: 60px;
        box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.3);
        box-sizing: border-box;
        line-height: 17px;
        padding: 16px;
        text-align: center;
        width: 120px;
        height: 120px;
    }

    #performance-areas #performance-health a {
        padding-top: 5px;
    }

    #performance-areas li {
        position: absolute;
        z-index: 600;
    }

    #performance-place {
        left: 50%;
        margin-top: -60px;
        margin-left: -60px;
    }

    #performance-water {
        right: 0;
        margin-top: 65px;
        margin-right: 5px;
    }

    #performance-energy {
        right: 0;
        margin-top: 340px;
        margin-right: -60px;
    }

    #performance-health {
        bottom: 0;
        margin-bottom: -60px;
        margin-left: 405px;
    }

    #performance-materials {
        bottom: 0;
        margin-bottom: -60px;
        margin-left: 120px;
    }

    #performance-equity {
        margin-top: 340px;
        margin-left: -60px;
    }

    #performance-beauty {
        margin-top: 65px;
        margin-left: 5px;
    }

    .icon-performance {
        background-size: 420px 180px;
        display: block;
        margin: 0 auto;
        width: 60px;
        height: 60px;
    }

    .icon-place {
    }

    .icon-water {
        background-position: -60px 0;
    }

    .icon-energy {
        background-position: -120px 0;
    }

    .icon-health {
        background-position: -180px 0;
    }

    .icon-materials {
        background-position: -240px 0;
    }

    .icon-equity {
        background-position: -300px 0;
    }

    .icon-beauty {
        background-position: -360px 0;
    }

    #performance-areas a.performance-primary:hover {
        background: rgba(77, 77, 77, 0.7);
        color: #fff;
    }

        #performance-areas a.performance-primary:hover span {
            background-position-y: -60px;
        }

    #performance-center {
        background: #fff;
        border: 1px solid var(--main-accent-color);
        box-shadow: 7px 7px 10px rgba(0,0,0,0.1);
        display: none;
        left: 50%;
        margin-left: -150px;
        margin-top: -120px;
        padding: 40px 30px 30px 30px;
        top: 50%;
        height: 314px;
        width: 300px;
    }

    #performance-center-x {
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 0;
        margin: 10px 10px 0 0;
    }

    #center-performance-place, #center-performance-water, #center-performance-energy, #center-performance-health, #center-performance-materials, #center-performance-equity, #center-performance-beauty {
        display: none;
    }

    #performance-center h2 {
        font-size: 26px;
        margin-bottom: 5px;
    }

    #performance-center p {
        font-size: 17px;
    }

    #performance-center a {
        text-decoration: underline;
    }

    #center-performance-tablet {
        font-family: 'space mono';
        font-size: 110px;
        font-weight: bold;
        left: 50%;
        margin-left: -135px;
        margin-top: -460px;
        position: absolute;
        text-align: center;
        z-index: 500;
    }
}

@media (max-width: 1279px) {
    #center-performance-place, #center-performance-water, #center-performance-energy, #center-performance-health, #center-performance-materials, #center-performance-equity, #center-performance-beauty { /*visibility: hidden;*/
    }
}

@media (min-width: 1280px) {
    #performance-areas a.performance-primary {
        border-radius: 70px;
        line-height: 17px;
        padding: 22px;
        text-align: center;
        width: 140px;
        height: 140px;
    }

    #performance-areas #performance-health a {
        padding-top: 10px;
    }

    .icon-performance {
        background-size: 476px 204px;
        display: block;
        margin: 0 auto;
        width: 68px;
        height: 68px;
    }

    .icon-place {
    }

    .icon-water {
        background-position: -68px 0;
    }

    .icon-energy {
        background-position: -136px 0;
    }

    .icon-health {
        background-position: -204px 0;
    }

    .icon-materials {
        background-position: -272px 0;
    }

    .icon-equity {
        background-position: -340px 0;
    }

    .icon-beauty {
        background-position: -408px 0;
    }

    #performance-areas a.performance-primary:hover span {
        background-position-y: -68px;
    }

    #performance-center {
        background: #fff;
        border: 1px solid var(--main-accent-color);
        box-shadow: 7px 7px 10px rgba(0,0,0,0.1);
        display: none;
        padding: 40px 30px 30px 30px;
    }

    #center-performance-place, #center-performance-water, #center-performance-energy, #center-performance-health, #center-performance-materials, #center-performance-equity, #center-performance-beauty {
        display: none;
    }
}

/* PERFORMANCE AREA PAGE */
#performance-area-header {
    background-size: cover;
    color: #fff;
}

    #performance-area-header a {
        color: #fff;
        text-decoration: none;
    }

#performance-area-header-content {
    background: rgba(0,0,0,0.5);
}

#performance-area-header h1 {
    font-size: 53px;
    font-weight: bold;
}

#performance-area-header p {
    font-size: 17px;
    margin-bottom: 0;
}

#performance-header-links {
    margin: 0;
}

.performance-area-icon {
    background: url(../images/performance-sprite.png) no-repeat;
    display: inline-block;
}

#performance-area-header .performance-area-icon {
    background-size: 224px 96px;
    width: 32px;
    height: 32px;
    background-position-y: -32px;
    margin-top: -4px;
    margin-right: 12px;
    vertical-align: middle;
}

.performance-header-place {
}

.performance-header-water {
    background-position-x: -32px;
}

.performance-header-energy {
    background-position-x: -64px;
}

.performance-header-health {
    background-position-x: -96px;
}

.performance-header-materials {
    background-position-x: -128px;
}

.performance-header-equity {
    background-position-x: -160px;
}

.performance-header-beauty {
    background-position-x: -192px;
}

#performance-factors {
    padding-bottom: 80px;
}

    #performance-factors hr {
        background: #fff;
        border: 0;
        height: 12px;
        margin: 40px 0;
    }

#performance-factors-title, #performance-factors-logo {
    align-self: center; /*overflow: hidden;*/
    min-height: 1px;
    padding: 0 15px;
    position: relative;
}

    #performance-factors-title h2 {
        margin: 0;
    }

#performance-factor-logo {
    box-shadow: 4px 4px 8px rgba(0,0,0,0.2);
    float: left;
    background: #fff;
    border-radius: 65px;
    margin: 10px 0;
    width: 130px;
    height: 130px;
}

    #performance-factor-logo span {
        background-image: url(../images/performance-sprite.png);
        background-repeat: no-repeat;
        background-size: 525px 225px;
        display: block;
        margin: 28px;
        width: 75px;
        height: 75px;
    }

#performance-factors h2 {
    font-size: 24px;
    font-weight: bold;
}

#performance-factors h3 {
    font-size: 21px;
    font-weight: bold;
}

#performance-factors h4 {
    margin-bottom: 20px;
}

#performance-factors .col-section {
    margin-bottom: 40px;
}

.performance-table {
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    font-family: 'Cairo','Open Sans',Helvetica,Arial,sans-serif;
    width: 100%;
}

    .performance-table td, .performance-table th {
        padding: 10px;
    }

    .performance-table td {
        font-weight: 600;
    }

@media (max-width: 767px) {
    #performance-area-header {
        padding-top: 0;
        padding-bottom: 0;
    }

    #performance-area-header-content {
    }

    #performance-header-logo {
        display: none;
    }

    #performance-area-header p {
        padding-top: 60px;
    }

    #performance-area-header h1 {
        padding-bottom: 15px;
        line-height: 1em;
    }

    #performance-header-dropdown {
        background: url(../images/arrow-down-wt.png) no-repeat right 20px center rgba(0,0,0,0.5);
        background-size: 30px 18px;
        color: var(--main-accent-color);
        font-size: 20px;
        margin: 0 -20px;
        padding: 15px 20px;
    }

        #performance-header-dropdown.performance-header-dropdown-active {
            background-image: url(../images/arrow-up-wt.png);
        }

    #performance-area-header #performance-header-dropdown .performance-area-icon {
        background-position-y: -64px;
    }

    #performance-header-links {
        background: #000;
        display: none;
        font-size: 20px;
        left: 0;
        right: 0;
        padding: 20px;
        position: absolute;
        z-index: 500;
    }

        #performance-header-links li.performance-header-active {
        }

        #performance-header-links a {
            display: block;
        }

    #performance-factors-title {
        width: calc(100% - 100px);
    }

    #performance-factors-logo {
        width: 100px;
    }

    #performance-factor-logo {
        width: 69px;
        height: 69px;
    }

        #performance-factor-logo span {
            background-size: 238px 102px;
            display: block;
            margin: 18px;
            width: 34px;
            height: 34px;
        }

        #performance-factor-logo .performance-logo-water {
            background-position-x: -34px;
        }

        #performance-factor-logo .performance-logo-energy {
            background-position-x: -68px;
        }

        #performance-factor-logo .performance-logo-health {
            background-position-x: -102px;
        }

        #performance-factor-logo .performance-logo-materials {
            background-position-x: -136px;
        }

        #performance-factor-logo .performance-logo-equity {
            background-position-x: -170px;
        }

        #performance-factor-logo .performance-logo-beauty {
            background-position-x: -204 px;
        }
}

@media (min-width: 768px) {
    #performance-area-header {
        padding-top: 85px;
        padding-bottom: 85px;
    }

    #performance-area-header-content {
        padding: 80px 0;
    }

    #performance-header-logo {
        float: left;
        background: #fff;
        border-radius: 65px;
        margin-right: 40px;
        margin-bottom: 20px;
        width: 130px;
        height: 130px;
    }

        #performance-header-logo span {
            background-image: url(../images/performance-sprite.png);
            background-repeat: no-repeat;
            background-size: 525px 225px;
            display: block;
            margin: 28px;
            width: 75px;
            height: 75px;
        }

    .performance-logo-place {
    }

    .performance-logo-water {
        background-position-x: -75px;
    }

    .performance-logo-energy {
        background-position-x: -150px;
    }

    .performance-logo-health {
        background-position-x: -225px;
    }

    .performance-logo-materials {
        background-position-x: -300px;
    }

    .performance-logo-equity {
        background-position-x: -375px;
    }

    .performance-logo-beauty {
        background-position-x: -450px;
    }

    #performance-area-header p {
        font-size: 27px;
        margin-bottom: -6px;
    }

    #performance-area-header h1 {
        font-size: 96px;
        margin-bottom: 0;
        line-height: 1em;
    }

    #performance-header-dropdown {
        display: none;
    }

    #performance-header-links {
        display: block !important;
        position: absolute;
        top: -50px;
        right: 20px;
    }

        #performance-header-links li {
            display: inline-block;
            margin-left: 15px;
        }

        #performance-header-links a .performance-link-title {
            display: none;
        }

    #performance-area-header .performance-icon-active, #performance-area-header a:hover .performance-area-icon {
        background-position-y: -64px;
    }

    #performance-factors hr {
        margin: 60px 0;
    }

    #performance-factors-title {
        width: calc(100% - 122px);
    }

    #performance-factors h2 {
        font-size: 32px;
    }

    #performance-factors-logo {
        width: 122px;
    }

    #performance-factor-logo {
        width: 98px;
        height: 98px;
    }

        #performance-factor-logo span {
            background-size: 336px 144px;
            display: block;
            margin: 26px;
            width: 48px;
            height: 48px;
        }

        #performance-factor-logo .performance-logo-water {
            background-position-x: -48px;
        }

        #performance-factor-logo .performance-logo-energy {
            background-position-x: -96px;
        }

        #performance-factor-logo .performance-logo-health {
            background-position-x: -144px;
        }

        #performance-factor-logo .performance-logo-materials {
            background-position-x: -192px;
        }

        #performance-factor-logo .performance-logo-equity {
            background-position-x: -240px;
        }

        #performance-factor-logo .performance-logo-beauty {
            background-position-x: -288px;
        }

    #performance-factors h3 {
        font-size: 25px;
    }
}

@media (max-width: 1279px) {
    .performance-table td {
        border-bottom: 1px dashed #7f7f7f;
        display: block;
        padding-left: 145px;
        position: relative;
        text-align: left;
    }

        .performance-table td:last-of-type {
            border-bottom: 0;
        }

    .performance-table th {
        display: none;
    }

    .performance-table td::before {
        background: var(--main-accent-color);
        content: attr(data-label);
        float: left;
        font-weight: bold;
        padding: 10px 12px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 96px;
    }
}

@media (min-width: 1280px) {
    #performance-area-header {
        padding-top: 110px;
        padding-bottom: 110px;
    }

    #performance-area-header-content {
        padding: 90px 0;
    }

    #performance-header-logo {
        border-radius: 80px;
        margin-right: 40px;
        margin-bottom: 20px;
        width: 160px;
        height: 160px;
    }

        #performance-header-logo span {
            background-size: 595px 255px;
            margin: 38px;
            width: 85px;
            height: 85px;
        }

    .performance-logo-place {
    }

    .performance-logo-water {
        background-position-x: -85px;
    }

    .performance-logo-energy {
        background-position-x: -170px;
    }

    .performance-logo-health {
        background-position-x: -255px;
    }

    .performance-logo-materials {
        background-position-x: -340px;
    }

    .performance-logo-equity {
        background-position-x: -425px;
    }

    .performance-logo-beauty {
        background-position-x: -510px;
    }

    #performance-area-header p {
        font-size: 34px;
        margin-bottom: -14px;
    }

    #performance-area-header h1 {
        font-size: 124px;
    }

    #performance-area-header .performance-area-icon {
        background-size: 280px 120px;
        width: 40px;
        height: 40px;
        background-position-y: -40px;
        margin-top: -4px;
        margin-right: 12px;
        vertical-align: middle;
    }

    .performance-header-place {
    }

    .performance-header-water {
        background-position-x: -40px;
    }

    .performance-header-energy {
        background-position-x: -80px;
    }

    .performance-header-health {
        background-position-x: -120px;
    }

    .performance-header-materials {
        background-position-x: -160px;
    }

    .performance-header-equity {
        background-position-x: -200px;
    }

    .performance-header-beauty {
        background-position-x: -240px;
    }

    #performance-area-header .performance-icon-active, #performance-area-header a:hover .performance-area-icon {
        background-position-y: -80px;
    }

    #performance-factors hr {
        margin: 60px -60px;
    }

    #performance-factors h2 {
        font-size: 34px;
    }

    .performance-table {
        border: 1px solid #999;
        text-align: center;
    }

        .performance-table th, .performance-table td {
            border-left: 1px dashed #7f7f7f;
            width: 20%;
        }

            .performance-table th:first-child, .performance-table td:first-child {
                border-left: 0;
            }

        .performance-table th {
            background: var(--main-accent-color);
            line-height: 1.4em;
        }

        .performance-table td {
            line-height: 24px;
            padding: 30px 10px 40px;
        }
}

/* CASE STUDIES */

/* custom select style */
.cusSelBlock {
    height: 50px;
    font-family: 'Cairo','Open Sans',Helvetica,Arial,sans-serif;
    max-width: 320px;
    width: 100%;
}

.customSelectBox {
    height: 100%;
    width: 100%;
}

.s-hidden {
    visibility: hidden;
}

.cusSelBlock {
    display: inline-block;
    position: relative;
}

.selectLabel {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    background-color: #fff;
    border: 1px solid #333;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    color: #333;
    cursor: pointer;
    display: block;
    height: 100%;
    width: 100%;
    letter-spacing: 0;
    line-height: 50px;
    padding: 0 50px 0 20px;
    text-align: left;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .selectLabel:after {
        content: '\f0d7';
        border-left: 1px solid #333;
        color: #333;
        font-family: 'FontAwesome';
        font-size: 32px;
        line-height: 11px;
        padding: 10px;
        text-align: center;
        position: absolute;
        right: 0px;
        top: 20%;
        height: 20%;
        width: 32px;
    }

    .selectLabel:active:after {
        content: '\f0d8';
    }

    .selectLabel.active:after {
        content: '\f0d8';
    }
/*::-webkit-scrollbar {display: none;}*/
.options, .page-content .options {
    margin: 0;
    position: absolute;
    top: 50px;
    height: 1px;
    width: 100%;
}

    .options li {
        background-color: #ffffff;
        border-left: 1px solid #333;
        border-right: 1px solid #333;
        cursor: pointer;
        display: block;
        line-height: 50px;
        list-style: none;
        opacity: 1;
        padding: 0 50px 0 20px;
        text-align: left;
        position: absolute;
        top: -50px;
        left: 0;
        z-index: 1;
        height: 50px;
        width: 100%;
    }

        .options li:last-of-type {
            border-bottom: 1px solid #333;
        }

        .options li:hover, .options li.active {
            background-color: #333;
            color: var(--main-accent-color);
        }

.feaBlock {
    margin: 20px 0;
    text-align: left;
}

.selected-item {
    margin: 10px 0;
}

#filter-performance h2 {
    border-top: 1px solid #999;
    margin-top: 20px;
    padding-top: 20px;
}

#filter-status {
    border-bottom: 1px solid #999;
    font-family: 'Cairo','Open Sans',Helvetica,Arial,sans-serif;
    font-size: 15px;
    margin: 20px 0 40px;
}

    #filter-status ul {
        margin-left: 0;
    }

    #filter-status li {
        background: url(../images/filter-status.png) no-repeat left center;
        background-size: 17px 15px;
        cursor: pointer;
        display: inline-block;
        padding-left: 24px;
        text-transform: uppercase;
    }

        #filter-status li:first-child {
            background: none;
            padding-left: 0;
        }

#filter-empty {
    display: none;
}


@media (max-width: 767px) {
    #filter-selections {
        font-size: 23px;
        margin-left: -15px;
        margin-right: -15px;
    }

    #filter-icons {
        display: none;
    }

    #filter-status {
        border-top: 1px solid #999;
        padding-top: 20px;
    }

        #filter-status li {
            display: block;
        }
}

@media (min-width: 768px) {
    #filters {
        margin-top: 40px;
    }

    #filter-selections {
        border: 1px solid #999;
        font-size: 23px;
        padding: 30px 20px;
    }

    #filter-performance h2 {
        margin-top: 30px;
    }

    #filter-performance .cusSelBlock {
        display: none;
    }

    #filter-icons ul {
        margin: 0;
        width: 100%;
    }

    #filter-icons li {
        cursor: pointer;
        display: block;
        float: left;
        font-family: 'Cairo','Open Sans',Helvetica,Arial,sans-serif;
        font-size: 13px;
        line-height: 12px;
        font-weight: bold;
        padding: 15px 10px;
        text-align: center;
        width: 14.28%;
        vertical-align: top;
    }

        #filter-icons li.filter-on {
            background: var(--main-accent-color);
        }

    #filter-icons a {
        text-decoration: none;
    }

    #filter-icons .icon-performance {
        background-size: 238px 102px;
        display: block;
        margin-bottom: 5px;
        width: 34px;
        height: 34px;
        vertical-align: middle;
    }

    #filter-icons .icon-place {
    }

    #filter-icons .icon-water {
        background-position: -34px 0;
    }

    #filter-icons .icon-energy {
        background-position: -68px 0;
    }

    #filter-icons .icon-health {
        background-position: -102px 0;
    }

    #filter-icons .icon-materials {
        background-position: -136px 0;
    }

    #filter-icons .icon-equity {
        background-position: -170px 0;
    }

    #filter-icons .icon-beauty {
        background-position: -204px 0;
    }

    #filter-status li {
        display: inline-block;
        margin-left: 20px;
    }

        #filter-status li:first-child {
            margin-left: 0;
        }
}

@media (min-width: 1280px) {
    #filter-performance {
        border-left: 1px solid #999;
    }

        #filter-performance h2 {
            border-top: 0;
            margin-top: 0;
            padding-top: 0;
        }
}

/* CASE STUDY PAGE */
#case-study-header {
    background-size: cover;
    color: #fff;
    padding-top: 200px;
    padding-bottom: 0;
}

#case-study-header-content {
    background: rgba(0,0,0,0.5);
    padding: 30px 0;
}

#case-study-header h1 {
    font-size: 53px;
    font-weight: bold;
    margin-bottom: 0;
}

#case-study-header p {
    font-size: 17px;
    margin-bottom: 0;
}

#case-study-header.case-study-header-no-image {
    padding-top: 0px;
}

    #case-study-header.case-study-header-no-image #case-study-header-content {
        background-color: #000;
    }

#case-study-stats {
    background: var(--main-accent-color);
    font-size: 15px;
    margin-top: 40px;
    padding: 20px;
}

    #case-study-stats strong {
        font-family: 'Cairo','Open Sans',Helvetica,Arial,sans-serif;
    }

    #case-study-stats p {
        display: inline;
    }

#case-study-chart {
    border: 1px solid #999;
    font-family: 'Cairo','Open Sans',Helvetica,Arial,sans-serif;
    padding: 30px;
    width: 100%;
}

#case-study-chart-container {
    overflow: hidden;
}

#case-study-chart-columns {
    height: 100%;
    margin: 0;
    padding-left: 140px;
    position: absolute;
    text-align: center;
    width: 100%;
}

    #case-study-chart-columns li {
        border-right: 1px dashed #7f7f7f;
        display: block;
        float: left;
        height: 100%;
        width: 20%;
    }

        #case-study-chart-columns li:first-child {
            border-left: 1px dashed #7f7f7f;
        }

    #case-study-chart-columns span {
        background: var(--main-accent-color);
        display: inline-block;
        padding: 8px 0;
        width: 100%;
    }

    #case-study-chart-columns p {
        font-weight: bold;
        margin: 0;
    }

#case-study-chart-rows {
    font-size: 16px;
    line-height: 16px;
    margin-top: 50px;
    margin-bottom: 20px;
    width: 100%;
}

    #case-study-chart-rows th, #case-study-chart-rows td {
        vertical-align: middle;
    }

    #case-study-chart-rows td {
        position: relative;
    }

    #case-study-chart-rows th {
        font-weight: normal;
        text-align: right;
        padding: 5px 10px;
        width: 200px;
    }

        #case-study-chart-rows th.case-study-chart-header {
            font-weight: bold;
        }

    #case-study-chart-rows td span {
        background-image: repeating-linear-gradient(140deg, #aaa, #aaa 4px, #dfdfdf 4px, #dfdfdf 7px);
        display: block;
        height: 20px;
        margin-top: -10px;
        opacity: 0.7;
        position: absolute;
    }

.case-study-chart-blank {
    height: 24px;
}

.case-study-0 {
    width: 0%;
}

.case-study-1 {
    width: 20%;
}

.case-study-2 {
    width: 40%;
}

.case-study-3 {
    width: 60%;
}

.case-study-4 {
    width: 80%;
}

.case-study-5 {
    width: 100%;
}

.case-study-na {
    background-image: none !important;
}

    .case-study-na:after {
        background: #fff;
        border: 2px solid #b3b3b3;
        content: 'NO DATA';
        font-size: 12px;
        line-height: 13px;
        margin-left: 5px;
        padding: 0 8px;
    }

#case-study-goals dt, #case-study-goals dd {
    border: 1px solid #ccc;
}

#case-study-goals dt {
    background: url(../images/matrix-plus.png) no-repeat right 20px center #fff;
    background-size: 23px 23px;
    cursor: pointer;
    margin-top: 20px;
    padding: 20px;
}

    #case-study-goals dt.dt-active {
        background: url(../images/matrix-minus-bl.png) no-repeat right 20px center #e9eaeb;
        background-size: 23px 23px;
        margin-top: 20px;
        padding: 20px;
    }

    #case-study-goals dt h3 {
        margin-bottom: 0;
    }

#case-study-goals dd {
    border-top: 0;
    display: none;
    padding: 10px 75px 30px;
}

    #case-study-goals dd h4 {
        font-size: 24px;
        margin-top: 30px;
    }

    #case-study-goals dd p {
        margin-bottom: 10px;
    }

#case-study-goals .icon-performance {
    background-size: 238px 102px;
    display: block;
    float: left;
    margin-right: 15px;
    width: 34px;
    height: 34px;
    vertical-align: middle;
}

#case-study-goals .icon-place {
}

#case-study-goals .icon-water {
    background-position: -34px 0;
}

#case-study-goals .icon-energy {
    background-position: -68px 0;
}

#case-study-goals .icon-health {
    background-position: -102px 0;
}

#case-study-goals .icon-materials {
    background-position: -136px 0;
}

#case-study-goals .icon-equity {
    background-position: -170px 0;
}

#case-study-goals .icon-beauty {
    background-position: -204px 0;
}

#case-study-image-row {
    margin-bottom: 40px;
}

    #case-study-image-row img {
        width: 100%;
    }

    #case-study-image-row p, .caption-text {
        color: #4D4D4D;
        font-size: 10px;
        margin-top: 4px;
        text-align: right;
    }

        .caption-text p {
            margin-bottom: 0;
        }

/* description blocks on the dev matrix and performance area assessment criteria */
.description-blocks .block-heading {
    display: block;
    background-color: #eaeaea;
    margin: 0 -12px 4px;
    padding: 14px 0;
    text-transform: uppercase;
}

.description-blocks .block-text {
    display: inline-block;
    margin-bottom: 22px;
}

    .description-blocks .block-text:last-child {
        margin-bottom: 0;
    }

    .description-blocks .block-text sup {
        font-size: 14px;
    }

.description-blocks.is-top .block-heading:first-child {
    margin-top: -14px;
}

.performance-table .description-blocks.is-top .block-heading:first-child {
    margin-top: -30px;
    padding-top: 30px;
}

@media (max-width: 899px) {
    .description-blocks .block-heading {
        margin-left: -25px;
        padding-left: 25px;
    }
}

@media (max-width: 1279px) {
    .performance-table .description-blocks.is-top .block-heading {
        margin-right: -10px;
        margin-left: -25px;
        padding-left: 25px;
    }

        .performance-table .description-blocks.is-top .block-heading:first-child {
            padding-top: 14px;
            margin-top: -10px;
        }
}



@media (max-width: 767px) {
    #case-study-chart {
        padding: 20px;
    }

    #case-study-chart-columns span {
        height: 100px;
        padding: 18px 0;
    }

    #case-study-chart-columns p {
        font-size: 13px;
        position: absolute;
        text-align: left;
        top: 90px;
        margin-left: -13px;
        left: 50%;
        transform: rotate(-90deg);
        transform-origin: 0% 0%;
    }

    #case-study-chart-rows {
        font-size: 13px;
        line-height: 13px;
        margin-top: 110px;
    }

        #case-study-chart-rows th {
            width: 140px;
        }

    .case-study-na:after {
        font-size: 9px;
    }

    #case-study-goals dt h3 {
        font-size: 24px;
        margin-top: 4px;
    }

    #case-study-goals dd {
        padding: 10px 20px 30px;
    }

    #case-study-goals .icon-performance {
        margin-top: 0;
    }
}

@media (min-width: 768px) {
    #case-study-header {
        padding-top: 360px;
    }

    #case-study-chart-columns p {
        font-size: 13px;
    }

    #case-study-chart-rows {
        font-size: 13px;
        line-height: 13px;
    }

        #case-study-chart-rows th {
            width: 140px;
        }
}

@media (min-width: 1280px) {
    #case-study-chart {
        max-width: 912px;
        padding: 30px 40px;
    }

    #case-study-header {
        padding-top: 680px;
    }

        #case-study-header h1 {
            font-size: 74px;
        }

    #case-study-stats {
        margin-top: 0;
    }

        #case-study-stats .col-xs-12 {
            margin-bottom: 20px;
        }

            #case-study-stats .col-xs-12:last-of-type {
                margin-bottom: 2px;
            }

    #case-study-chart-columns {
        padding-left: 220px;
    }

        #case-study-chart-columns p {
            font-size: 15px;
        }

    #case-study-chart-rows {
        font-size: 17px;
        line-height: 17px;
    }

        #case-study-chart-rows th {
            width: 220px;
        }
}

/* ABOUT */
#about-photos {
    overflow: hidden;
}

    #about-photos .col-section {
        margin-left: -8px;
        margin-right: -8px;
    }

    #about-photos img {
        width: 100%;
    }

    #about-photos div {
        padding: 0 4px;
    }

#about-implementation {
    font-size: 23px;
    text-align: center;
}

    #about-implementation p {
        margin-bottom: 40px;
    }

#about-partners {
    font-size: 15px;
    margin-top: 40px;
}

    #about-partners div {
    }

.about-partners-logo {
    border-top: 8px solid #e9eaeb;
    padding: 60px 0 40px;
}

#about-matrix {
    font-size: 24px;
    text-align: center;
}

    #about-matrix a {
        color: var(--main-accent-color);
        font-size: 17px;
    }

.page-content ul.circle-list {
    margin-left: 0;
    margin-bottom: 40px;
}

.circle-list li {
    background: url(../images/list-circle.png) no-repeat left top 6px;
    background-size: 15px 15px;
    margin-bottom: 15px;
    padding-left: 28px;
}

/* CONTACT */
#contact-info {
    background: #e9eaeb;
    margin-top: 50px;
    max-width: 362px;
    padding: 30px 30px 10px 30px;
}

    #contact-info p {
        font-size: 15px;
    }

#contact-form-success, #contact-form-error {
    display: none;
}

#contact-form-error {
    color: red;
    font-style: italic;
    margin-bottom: 20px;
}

/* SITEMAP */
#sitemap {
    margin: 0;
}

    #sitemap li {
        font-size: 21px;
        font-weight: 600;
        margin-bottom: 20px;
    }

    #sitemap ul {
        margin: 10px 0 30px 0;
    }

        #sitemap ul > li {
            font-size: 17px;
            font-weight: normal;
            margin-bottom: 14px;
        }

    #sitemap a {
        text-decoration: none;
    }

        #sitemap a:hover {
            text-decoration: underline;
        }

/* FORMS */
.form-help {
    color: #888;
    font-size: 80%;
    margin: 5px 0 10px;
}

label {
    display: inline-block;
    font-family: 'Cairo','Open Sans',Helvetica,Arial,sans-serif;
    font-weight: 700;
    margin-bottom: 4px;
}

.radio,
.checkbox {
    display: block;
    margin-bottom: 8px;
    position: relative;
}

    .radio label,
    .checkbox label {
        min-height: 20px;
        padding: 0 20px;
        margin-bottom: 0;
        font-weight: normal;
        cursor: pointer;
    }

input[type=text],
input[type=email],
input[type=password],
input[type=date],
textarea,
select {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    font-size: 15px;
    padding: 8px 10px;
}

    input[type=text]:focus,
    input[type=email]:focus,
    input[type=password]:focus,
    textarea:focus,
    select:focus {
        border-color: #66afe9;
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
        outline: 0;
    }

    input[type=text][disabled],
    input[type=email][disabled],
    input[type=password][disabled],
    textarea[disabled],
    select[disabled] {
        cursor: not-allowed;
        background-color: #eee;
    }

.checkbox input[type=checkbox], .radio input[type=radio] {
    position: absolute;
    margin: 1px 0 0;
    margin-left: -20px;
}

.form-error label {
    color: #ff0003;
}

.form-error input[type=text],
.form-error input[type=email],
.form-error input[type=password],
.form-error textarea,
.form-error select {
    border-color: #ff0003;
}

.form-success label {
    color: #3c763d;
}

.form-success input[type=text],
.form-success input[type=email],
.form-success input[type=password],
.form-success textarea,
.form-success select {
    border-color: #3c763d;
}

.form-warning label {
    color: #cc6600;
}

.form-warning input[type=text],
.form-warning input[type=email],
.form-warning input[type=password],
.form-warning textarea,
.form-warning select {
    border-color: #cc6600;
}

.error-text {
    color: #ff0003;
    padding-left: 20px;
}

button, .btn {
    background: #fff;
    border: 1px solid #999;
    border-radius: 0;
    font-family: 'Cairo','Open Sans',Helvetica,Arial,sans-serif;
    font-size: 21px;
    font-weight: 700;
    padding: 8px 30px;
}

.btn-yellow {
    background: var(--main-accent-color);
}

.form-group {
    margin-bottom: 30px;
    overflow: hidden;
}

.form-page .form-help {
    margin-top: 0;
}

.form-page input[type=text],
.form-page input[type=email],
.form-page input[type=password],
.form-page textarea,
.form-page select {
    display: block;
    height: 38px;
    margin-bottom: 8px;
    width: 100%;
}

.form-page input[type=text],
.form-page input[type=email],
.form-page input[type=password] {
    max-width: 360px;
}

.form-page input[type=file] {
    display: block;
    margin-bottom: 8px;
}

.form-page textarea {
    margin-bottom: 8px;
    min-height: 180px;
}

.form-page input[type=submit] {
    background: #000;
    border-radius: 10px;
    color: #fff;
    font-family: 'Cairo','Open Sans',Helvetica,Arial,sans-serif;
    font-size: 15px;
    padding: 6px 20px;
}

.form-horizontal .form-group {
    margin-left: -15px;
    margin-right: -15px;
}

.umbraco-forms-container {
    padding-left: 0;
}

.umbraco-forms-navigation .col-md-12 {
    padding-left: 0;
}

.umbraco-forms-submitmessage-html {
    scroll-margin-top: 180px;
}

/* FOOTER */
#topLink-wrapper {
    margin-top: 40px;
    margin-bottom: 40px;
}

#topLink {
    font-family: 'Cairo','Open Sans',Helvetica,Arial,sans-serif;
    font-weight: 700;
}

    #topLink img {
        font-family: 'Cairo','Open Sans',Helvetica,Arial,sans-serif;
        margin: 0 10px 3px 0;
    }

footer {
    background: #000;
    color: #fff;
    padding: 60px 0;
}

    footer a {
        color: #fff;
    }

.footer-gold {
    color: var(--main-accent-color);
    font-family: 'Cairo','Open Sans',Helvetica,Arial,sans-serif;
    font-size: 19px;
}

#footer-text a:hover {
    text-decoration: none;
}

#footer-text strong a {
    text-decoration: none;
}

    #footer-text strong a:hover {
        color: var(--main-accent-color);
        text-decoration: underline;
    }

#footer-links {
    font-family: 'Cairo','Open Sans',Helvetica,Arial,sans-serif;
}

    #footer-links li {
        margin-bottom: 15px;
    }

#footer-nav a {
    font-weight: bold;
    text-decoration: none;
}

    #footer-nav a:hover {
        color: var(--main-accent-color);
        text-decoration: underline;
    }

#footer-social {
    display: none; /* for future use */
    margin-top: 30px;
}

    #footer-social li {
        display: inline-block;
        margin-right: 10px;
    }

    #footer-social a {
        background: #fff;
        border-radius: 50px;
        color: #000;
        display: inline-block;
        line-height: 30px;
        text-align: center;
        height: 30px;
        width: 30px;
    }

#footer-copyright {
    margin-top: 40px;
    font-size: 13px;
}

/* COMPONENTS*/
.link-content {
    font-size: 24px;
    text-align: center;
}

    .link-content a {
        color: var(--main-accent-color);
        font-size: 17px;
    }

@media (min-width: 768px) {
    #footer-links {
        padding-left: 60px;
    }
}

/* MEDIA QUERIES */
@media (min-width: 768px) {

    /* LAYOUT */
    .col-section {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    }


    /* FORMS */
    .form-horizontal label {
        margin-bottom: 8px;
        padding-top: 8px;
        text-align: right;
    }
}