/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
body {
    font-family: 'Signika Negative', sans-serif;
    color: #333;
    background: #fff;
    line-height: 1.4;
}

.main-container {
    width: 960px;
    margin: 0px auto;
}

.content-main-container {
    position: relative;
    margin-top: 0px;
    width: 960px;
    margin: 0px auto;
}

    .content-main-container h1 {
        font-weight: 400;
        color: #0093ca;
        padding: 0px;
        margin: 0px;
        font-size: 2em;
    }

    .content-main-container h2 {
        padding: 0px;
        margin: 0px;
        font-weight: 400;
        font-size: 22px;
        color: #313131;
    }

    .content-main-container p {
        color: #808080;
        font-size: 16px;
    }

.main-blocks-container {
    position: relative;
    width: 100%;
}

.header-all {
    margin-bottom: 0px;
}

.headers-content {
    color: #838080 !important;
    /* float: left; */
    display: block;
    /* width: 70%; */
    font-size: 16px !important;
    /* margin-top: -5px; */
    margin-bottom: 10px;
}

.header-image img {
    width: 100%;
}

.headers-block {
    text-transform: uppercase;
    padding-right: 10px;
    /* float: left; */
    font-weight: 600;
    font-size: 24px !important;
}

.headers-impact {
    color: #f15d22 !important;
    width: 230px;
}

.headers-outcome {
    color: #449a31 !important;
}

.headers-output {
    color: #897966;
}

.view-all-link {
    text-align: right;
    margin: 0px;
    float: right;
    margin-right: -20px;
}

    .view-all-link a {
        text-decoration: none;
        color: #fff;
        padding: 5px 8px;
        background: #5ab6ff;
        font-size: 14px;
        border-radius: 4px;
    }

.inner-blocks-container {
    /*margin-left: 10px;*/
    margin-bottom: 10px;
}

.outcomes-container {
    margin-bottom: 30px;
}

.home-page-container .flipWrapper {
    -webkit-perspective: 1000;
    width: 300px;
    height: 350px;
    position: relative;
    display: inline-block;
    text-align: left !important;
}

.flipWrapper {
    -webkit-perspective: 1000;
    width: 210px;
    height: 275px;
    position: relative;
    display: inline-block;
    text-align: left !important;
}

.all-indicator-container .flipWrapper {
    -webkit-perspective: 1000;
    width: 180px;
    height: 275px;
    position: relative;
    display: inline-block;
    margin-right: 8px;
    text-align: left !important;
}

.outcomes-container-internal .flipWrapper {
    -webkit-perspective: 1000;
    width: 305px;
    height: 350px;
    position: relative;
    display: inline-block;
    text-align: left !important;
}

.output-container .flipWrapper {
    -webkit-perspective: 1000;
    width: 300px;
    height: 350px;
    position: relative;
    display: inline-block;
    text-align: left !important;
}

.flipWrapper .card.flipped {
    -webkit-transform: rotatey(180deg);
}

.flipWrapper .card {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.5s;
}

    .flipWrapper .card .face {
        width: 100%;
        height: 100%;
        position: absolute;
        -webkit-backface-visibility: hidden;
        z-index: 2;
    }

    .flipWrapper .card .front {
        position: absolute;
        z-index: 1;
        background: #fff;
        color: #212121 !important;
        /*cursor: pointer;*/
        border: 1px solid #e2e2e2;
    }

    .flipWrapper .card .back {
        -webkit-transform: rotatey(-180deg);
        background: #fff;
        border: 1px solid #e2e2e2;
        color: #212121 !important;
        /*cursor: pointer;*/
    }

.impact-container .flipWrapper .card .front h4 {
    background: #f15d22;
    margin: 0px;
    padding: 15px 10px;
    color: #fff;
    font-weight: 400;
    font-size: 18px;
}

.outcomes-container .flipWrapper .card .front h4 {
    background: #449a31;
    margin: 0px;
    padding: 15px 10px;
    color: #fff;
    font-weight: 400;
    font-size: 18px;
}

.output-container .flipWrapper .card .front h4 {
    background: #897966;
    margin: 0px;
    padding: 15px 10px;
    color: #fff;
    font-weight: 400;
    font-size: 18px;
}

.flipWrapper .card .front p {
    font-size: 15px;
    padding: 0px 8px;
    height: auto;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-height: 20px;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    margin-top: 5px;
    color: #808080;
}

.flip-btn {
    font-size: 14px;
    position: absolute;
    bottom: 5px;
    right: 5px;
    color: #2196F3;
    cursor: pointer;
}

    .flip-btn i {
        margin-right: 5px;
    }

.flip-back {
    position: absolute;
    bottom: 5px;
    left: 5px;
    color: #2196F3;
    font-size: 20px;
    width: 20px;
}

.head-result {
    text-align: center;
    font-size: 20px;
    margin: 1em 0em;
}

.value-result {
    margin-top: -10px;
    margin-bottom: 1em;
    text-align: center;
    color: #212121 !important;
    font-size: 28px !important;
}

.year-result {
    margin-top: -30px;
    color: #b3b1b1 !important;
    text-align: center;
    margin-bottom: 1em;
}

.sector-result {
    margin-top: 0px;
    color: #449a31 !important;
    text-align: center;
    font-size: 14px;
}

.desc-result {
    text-align: center;
    background: #eee;
    margin: 0px 10px;
    padding: 5px;
    font-size: 14px !important;
}

.not-available-desc {
    margin-top: 90px;
}

.indicator-type {
    position: absolute;
    top: 5px;
    right: 5px;
    /* margin-top: 5px; */
    /* border: 2px solid #06880c; */
    /* float: right; */
    width: 8px;
    height: 8px;
    border-radius: 50%;
    /* margin-right: 8px; */
}

.sdg-indicator {
    display: none;
    background: #0d9613;
    border: 2px solid rgba(255, 255, 255, 0.59);
}

.barometer-container {
    text-align: center;
    position: absolute;
    left: 24%;
    bottom: 10px;
}

.outcome-info-bg {
    background: #449a31 url(/sites/default/files/custom/css/SPStyles/bg-all.png) repeat 0px 0px !important;
}

    .outcome-info-bg p {
        color: #fff !important;
        margin-top: 10px !important;
        margin-bottom: 1em;
        height: auto !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 12 !important;
        line-height: 20px;
        -webkit-box-orient: vertical !important;
        text-overflow: ellipsis !important;
    }

.outcome-info-block {
    float: left;
}

.output-container .outcome-indicator-block-container {
    margin-left: 10px;
}

.outcome-indicator-block-container {
    /*margin-left: 10px;*/
    text-align: center;
}

.home-page-container .base-float {
    margin: 10px auto;
    width: 290px;
}

.home-page-container .sector-result {
    font-size: 14px !important;
    text-align: center;
    width: 143px;
    float: right;
    margin-top: -5px;
}


.base-float {
    margin: 30px auto;
    width: 270px;
}

.target-float {
    margin: 10px auto;
    width: 160px;
    border-top: 1px solid #eee;
}

.block-value {
    margin: 0px;
}

    .block-value p {
        margin: 0px;
    }

.block-values .head-result {
    color: #808080;
    font-size: 16px;
}

.block-value .value-result {
    font-size: 16px !important;
    width: 70px;
    float: left;
    text-align: left;
}

.sector-result {
    font-size: 12px !important;
    width: 80px;
    /* float: right;*/
    margin-top: -5px;
}

.block-values {
    width: 250px;
    margin: 0 auto;
}

    .block-values tr th {
        font-weight: normal !important;
        text-align: center;
        width: 50%;
    }

    .block-values tr td {
        text-align: center;
        border-bottom: 1px solid #eee;
        padding: 5px 0px;
    }

    .block-values tr.last td {
        border-bottom: none;
    }

.block-values-float {
    margin-top: 20px;
}

.owl-dots {
    display: none;
}


.owl-carousel .owl-item img {
    display: inline-block !important;
    width: auto !important;
}

.owl-theme .owl-nav {
    position: absolute;
    text-align: center;
    bottom: -33px;
    right: 0px;
}

    .owl-theme .owl-nav [class*='owl-'] {
        background: #2e9cf3;
    }

.owl-carousel-back .owl-item {
    float: left;
}

.owl-carousel-back .owl-prev, .owl-carousel-back .owl-next {
    float: left;
    margin-right: 5px;
}

.owl-carousel-back .owl-stage-outer {
    overflow: hidden;
}

.owl-carousel-back .block-values {
    margin-left: 10px;
    margin-top: 25px;
}

.owl-carousel-back .owl-nav {
    position: absolute;
    right: 0px;
    top: 0px;
}

.owl-carousel-back .owl-dots {
    display: block;
    text-align: right;
}

.owl-carousel-back .owl-nav {
    display: none;
}

.owl-dot {
    display: inline-block;
    width: 8px;
    margin-right: 5px;
}

.owl-carousel-back .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin: 5px 2px;
    background: #D6D6D6;
    cursor: pointer;
}

.owl-carousel-back .owl-dots .owl-dot.active span, .owl-carousel-back .owl-dots .owl-dot:hover span {
    background: #48a8f5;
}

.owl-carousel-back .item {
    position: relative;
}

.owl-carousel-back .sector-with-bg {
    padding: 1px 4px;
    background: #b17235;
    color: #fff;
    position: absolute;
    top: 0px;
    left: 3px;
    font-size: 12px;
}

.owl-carousel-back .year-result {
    margin-top: 0px;
    color: #b3b1b1 !important;
    text-align: center;
    font-size: 12px;
    display: block;
}

.owl-stage {
    margin: 0 auto;
}



/*ACCORDIAN CSS

ul {
  list-style: none;
  padding: 0;
}
ul .inner {
 padding-left: 5px;
    padding-right: 5px;
    overflow: hidden;
    display: none;
       border: 1px solid #eaeaea;
    width: 100%;
}
ul .inner.show {
  /*display: block;*/
}

ul li {
    margin: .5em 0;
}

    ul li a.toggle {
        width: 100%;
        display: block;
        background: rgba(0, 0, 0, 0.78);
        color: #fefefe;
        padding: 10px 0px 10px 10px;
        transition: background .3s ease;
        font-size: 17px;
        text-transform: uppercase;
        text-decoration: none;
    }

        ul li a.toggle:hover {
            background: rgba(0, 0, 0, 0.9);
        }

.outcome-area-accord {
    background: #449a31 url(/sites/default/files/custom/css/SPStyles/bg-all.png) repeat 0px 0px !important;
}

.impact-area-accord {
    background: #e8822a url(/sites/default/files/custom/css/SPStyles/bg-all.png) repeat 0px 0px !important;
}

.output-area-accord {
    width: 95% !important;
    margin: 0 auto;
    background: #b17235 url(/sites/default/files/custom/css/SPStyles/bg-all.png) repeat 0px 0px !important;
}

.output-area-accord-container {
    width: 95.5% !important;
    margin: 0 auto;
    border: 0px solid #eee !important;
    background: #F4F5F7;
}

.accordion .inner-blocks-container {
    background: none !important;
    border: none !important;
}

.accordion .headers-content {
    margin-bottom: 0px;
    /* margin-top: 10px !important; */
    padding: 12px;
}


.toggle i {
    float: right;
    margin-right: 20px;
    font-size: 20px;
    color: #fff;
    font-weight: 500;
}

.map-container {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid #dadada;
}

    .map-container img {
        width: 100%;
    }

.map-content {
    /* display: flex;
    align-items: center;
    justify-content: left;*/
    float: left;
    width: 40%;
    height: inherit;
    min-height: 420px;
}

.map-content-internal {
    margin: 15px;
}

    .map-content-internal h2 {
        color: #ffffff;
        font-size: 22px !important;
        font-weight: 600 !important;
    }

    .map-content-internal p, .map-content-internal ul {
        font-size: 16px;
        color: #fff;
        margin-bottom: 10px;
    }

        .map-content-internal ul li {
            position: relative;
            z-index: 1;
            margin-bottom: 15px;
        }

            .map-content-internal ul li::before {
                content: " ";
                position: absolute;
                width: 32px;
                height: 32px;
                border-radius: 50%;
                background: #146701;
                z-index: -1;
                opacity: 0.6;
                top: -7px;
                left: -8px;
                border: 1px solid #59a947;
            }

.map-img {
    float: right;
    width: 60%;
}

    .map-img img {
        width: 100%;
    }

.logo-sp {
    width: 10%;
    float: left;
    margin-top: 25px;
}

.content-sp {
    float: right;
    width: 85%;
}

.map-content .headers-content {
    color: #fff !important;
}

.indicator-header {
    margin-top: 25px;
    margin-bottom: 15px;
    font-size: 22px;
    color: #449a31;
    text-align: center;
    font-weight: 700;
}

.indicator-header-impact {
    margin-bottom: 10px;
    font-size: 22px;
    color: #e8822a;
    text-align: center;
    font-weight: 700;
    margin-top: 25px;
}

.numbers-cl {
    padding: 10px;
    border-radius: 50%;
}

.outcome-cl {
    background: #000;
}
/*COMMON CLASSES*/
.Fbold {
    font-weight: 600;
}

.Fnormal {
    font-weight: 400;
}

.blue-color {
    color: #0093ca;
}

.black-color {
    color: #0093ca;
}

.font-size-16 {
    font-size: 16px;
}

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

.font-size-20 {
    font-size: 20px;
}

.font-size-22 {
    font-size: 22px;
}

.font-size-24 {
    font-size: 24px;
}

.owl-carousel {
    border: 1px solid #eee;
    margin-top: 8px;
    background: #F4F5F7;
    padding: 10px 10px 0px 10px;
    margin-bottom: 10px;
}

    .owl-carousel .owl-item {
        float: none !important;
        display: inline-block;
    }

.output-container .owl-carousel {
    border: 0px solid #eee !important;
    margin-top: 8px;
    background: transparent !important;
    padding: 0px 0px 0px 0px !important;
    margin-bottom: 10px;
}

.outcomes-container-internal .owl-carousel {
    border: 0px solid #eee;
    margin-top: 8px;
    background: transparent;
    padding: 0px 0px 0px 0px;
    margin-bottom: 10px;
}

.output-container {
    background: #fdf3e9;
    /*padding:2px 10px 2px 10px;*/
    margin-bottom: 30px;
    border: 1px solid #ffe9d3;
}

    .output-container .headers-block {
        border: 0px;
        padding-right: 5px;
        font-weight: 700;
        font-size: 22px !important;
        text-transform: capitalize;
    }


    .output-container .headers-content {
        color: #505050 !important;
        /* float: left; */
        display: inline-block;
        /* width: 70%; */
        font-size: 20px !important;
        margin-left: 0px;
        margin-top: 0px;
    }

    .output-container .header-all {
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: left;
        margin-left: 10px;
        margin-right: 10px;
    }

.outcomes-container-internal {
    margin-bottom: 50px;
}

.select-impact {
    float: right;
    margin-bottom: 20px;
}

.owl-theme .owl-nav [class*=owl-] {
    color: #FFF;
    font-size: 14px;
    margin: 5px;
    padding: 4px 7px;
    background: #2196F3 !important;
    display: inline-block;
    cursor: pointer;
    border-radius: 3px;
}

.select-impact select {
    padding: 5px;
    border-color: #bfbfbf;
    border-radius: 3px;
    border-width: 2px;
    color: #8a8a8a;
    width: 300px;
    background: #f4f4f4;
}

.all-outcome-container {
    background: #efffed;
    padding: 2px 0px 15px 18px;
    margin-bottom: 30px;
    border: 1px solid #beffb0;
}

    .all-outcome-container .flipWrapper .card .front h4 {
        background: #449a31;
        margin: 0px;
        padding: 15px 10px;
        color: #fff;
        font-weight: 400;
        font-size: 18px;
    }

.view-details-btn {
    text-decoration: none;
    color: #fff;
    padding: 5px 8px;
    background: #5ab6ff;
    font-size: 14px;
    border-radius: 4px;
    position: absolute;
    bottom: 5px;
    right: 5px;
}

.all-outcome-container .flipWrapper .card .front p {
    font-size: 15px;
    padding: 0px 8px;
    height: 218px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 11;
    line-height: 20px;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    margin-top: 5px;
}

.outcome-1 .headers-outcome {
    color: #0081c6 !important;
}

.outcomes-container.outcome-1 .flipWrapper .card .front h4 {
    background: #0081c6;
}

.outcome-1 .outcome-info-bg {
    background: #0081c6 url(/sites/default/files/custom/css/SPStyles/bg-all.png) repeat 0px 0px !important;
}

.outcome-1-map {
    background: #0081c6 url(/sites/default/files/custom/css/SPStyles/bg-all.png) repeat 0px 0px !important;
}

.outcome-1-content ul li::before {
    content: " ";
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #67c9ff;
    z-index: -1;
    opacity: 0.6;
    top: -7px;
    left: -8px;
    border: 1px solid #1289ca;
}

.outcome-1-map .map-content-internal ul li::before {
    content: " ";
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #67c9ff;
    z-index: -1;
    opacity: 0.6;
    top: -7px;
    left: -8px;
    border: 1px solid #1289ca;
}

.outcome-2-map {
    background: #67c7c5 url(/sites/default/files/custom/css/SPStyles/bg-all.png) repeat 0px 0px !important;
}

.outcome-2-content ul li::before {
    content: " ";
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #98f7f5 !important;
    z-index: -1;
    opacity: 0.6;
    top: -7px;
    left: -8px;
    border: 1px solid #5fb9b7 !important;
}

.outcome-2-map .map-content-internal ul li::before {
    content: " ";
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #98f7f5;
    z-index: -1;
    opacity: 0.6;
    top: -7px;
    left: -8px;
    border: 1px solid #5fb9b7;
}

.outcome-3-map {
    background: #6cb33e url(/sites/default/files/custom/css/SPStyles/bg-all.png) repeat 0px 0px !important;
}

.outcome-3-content ul li::before {
    content: " ";
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #b4f38b !important;
    z-index: -1;
    opacity: 0.6;
    top: -7px;
    left: -8px;
    border: 1px solid #64a639 !important;
}

.outcome-3-map .map-content-internal ul li::before {
    content: " ";
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #b4f38b;
    z-index: -1;
    opacity: 0.6;
    top: -7px;
    left: -8px;
    border: 1px solid #64a639;
}

.outcome-4-map {
    background: #f15c22 url(/sites/default/files/custom/css/SPStyles/bg-all.png) repeat 0px 0px !important;
}

.outcome-4-content ul li::before {
    content: " ";
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fbb79d !important;
    z-index: -1;
    opacity: 0.6;
    top: -7px;
    left: -8px;
    border: 1px solid #e55a24 !important;
}

.outcome-4-map .map-content-internal ul li::before {
    content: " ";
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fbb79d;
    z-index: -1;
    opacity: 0.6;
    top: -7px;
    left: -8px;
    border: 1px solid #e55a24;
}

.outcome-5-map {
    background: #ddb307 url(/sites/default/files/custom/css/SPStyles/bg-all.png) repeat 0px 0px !important;
}

.outcome-5-content ul li::before {
    content: " ";
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f9e594 !important;
    z-index: -1;
    opacity: 0.6;
    top: -7px;
    left: -8px;
    border: 1px solid #ddb307 !important;
}

.outcome-5-map .map-content-internal ul li::before {
    content: " ";
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f9e594;
    z-index: -1;
    opacity: 0.6;
    top: -7px;
    left: -8px;
    border: 1px solid #ddb307;
}

.outcome-1 h3 {
    color: #0081c6 !important;
}

.outcome-2 h3 {
    color: #67c7c5 !important;
}

.outcome-2 .headers-outcome {
    color: #67c7c5 !important;
}

.outcomes-container.outcome-2 .flipWrapper .card .front h4 {
    background: #67c7c5;
}

.outcome-2 .outcome-info-bg {
    background: #67c7c5 url(/sites/default/files/custom/css/SPStyles/bg-all.png) repeat 0px 0px !important;
}

.outcome-3 h3 {
    color: #6cb33e !important;
}

.outcome-3 .headers-outcome {
    color: #6cb33e !important;
}

.outcomes-container.outcome-3 .flipWrapper .card .front h4 {
    background: #6cb33e;
}

.outcome-3 .outcome-info-bg {
    background: #6cb33e url(/sites/default/files/custom/css/SPStyles/bg-all.png) repeat 0px 0px !important;
}

.outcome-4 h3 {
    color: #f15c22 !important;
}

.outcome-4 .headers-outcome {
    color: #f15c22 !important;
}

.outcomes-container.outcome-4 .flipWrapper .card .front h4 {
    background: #f15c22;
}

.outcome-4 .outcome-info-bg {
    background: #f15c22 url(/sites/default/files/custom/css/SPStyles/bg-all.png) repeat 0px 0px !important;
}

.outcome-5 h3 {
    color: #ddb307 !important;
}

.outcome-5 .headers-outcome {
    color: #ddb307 !important;
}

.outcomes-container.outcome-5 .flipWrapper .card .front h4 {
    background: #ddb307;
}

.outcome-5 .outcome-info-bg {
    background: #ddb307 url(/sites/default/files/custom/css/SPStyles/bg-all.png) repeat 0px 0px !important;
}

.outcome-6 .headers-outcome {
    color: #0081c6 !important;
}

.outcome-6 h3 {
    color: #0081c6 !important;
}

.outcomes-container.outcome-6 .flipWrapper .card .front h4 {
    background: #0081c6;
}

.outcome-6 .outcome-info-bg {
    background: #0081c6 url(/sites/default/files/custom/css/SPStyles/bg-all.png) repeat 0px 0px !important;
}

.headers-content a {
    text-decoration: underline;
    font-weight: 600;
}

.impact-view-link {
    color: #f15d22;
    ;
}

.outcome-1-view-all {
    color: #0081c6 !important;
}

.outcome-2-view-all {
    color: #67c7c5 !important;
}

.outcome-3-view-all {
    color: #6cb33e !important;
}

.outcome-4-view-all {
    color: #f15c22 !important;
}

.outcome-5-view-all {
    color: #ddb307 !important;
}

.outcome-6-view-all {
    color: #0081c6 !important;
}

.outcome-info-bg ul {
    font-size: 15px;
    color: #fff;
    padding: 0px 8px;
}

    .outcome-info-bg ul li {
        position: relative;
        z-index: 1;
        margin-bottom: 12px;
    }

        .outcome-info-bg ul li::before {
            content: " ";
            position: absolute;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #0c5b86;
            z-index: -1;
            opacity: 0.6;
            top: -7px;
            left: -8px;
            border: 1px solid #005888;
        }

.outcome-1-internal .flipWrapper .card .front h4 {
    background: #0081c6;
}

.outcome-2-internal .flipWrapper .card .front h4 {
    background: #67c7c5;
}

.outcome-3-internal .flipWrapper .card .front h4 {
    background: #6cb33e;
}

.outcome-4-internal .flipWrapper .card .front h4 {
    background: #f15c22;
}

.outcome-5-internal .flipWrapper .card .front h4 {
    background: #ddb307;
}

.outcome-6-internal .flipWrapper .card .front h4 {
    background: #0081c6;
}

/*
.map-main-container{
    width:100%;
}
.map-content-left{
    float:left;
    width:50%;
}
.map-content-left{
    float:right;
    width:50%;
}*/
.home-page-block-container {
    border: 1px solid #eee;
    margin-top: 8px;
    background: #F4F5F7;
    padding: 10px 0px 0px 10px;
    margin-bottom: 10px;
}

.outcomes-container .item {
    float: left;
    margin-left: 22px;
    margin-bottom: 10px;
}

.outcomes-container .back .owl-stage-outer .item {
    margin-left: 0px;
}

.output-container .item {
    float: left;
    margin-right: 15px;
    margin-bottom: 10px;
}

.impact-container .item {
    float: left;
    margin-left: 22px;
    margin-bottom: 10px;
}

.outcomes-container .item:last-child {
    margin-right: 0px !important;
}

.home-page-block-container .item:last-child {
    margin-right: 0px !important;
}

.home-page-block-container .item {
    float: left;
    margin-right: 16px !important;
    margin-bottom: 10px;
    margin-left: 0px !important;
}


.GaugeMeter {
    position: relative;
    text-align: center;
    overflow: hidden;
    cursor: default;
    display: inline-block;
}

    .GaugeMeter span, .GaugeMeter b {
        width: 54%;
        position: absolute;
        text-align: center;
        display: inline-block;
        color: rgba(0,0,0,.8);
        font-weight: 100;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin: 0 23%;
    }

    .GaugeMeter[data-style="Semi"] b {
        width: 80%;
        margin: 0 10%;
    }

    .GaugeMeter s, .GaugeMeter u {
        text-decoration: none;
        font-size: .60em;
        font-weight: 200;
        opacity: .6;
    }

    .GaugeMeter b {
        color: #000;
        font-weight: 200;
        opacity: .8;
    }

    .GaugeMeter span {
        line-height: 100px !important;
        font-size: 25px !important;
        color: #62625e;
        padding-top: 20px;
        font-weight: 700;
    }
/*.GaugeMeter[data-back]{
    background:rgba(202,202,202,1) !important;
}*/

.first-row-item1 {
    margin-left: 0px !important;
}

.other-row-item1 {
    margin-left: 0px !important;
}

.home-nav a {
    color: #009ddc;
    border: 1px solid #009ddc;
}

.impact-area-nav a {
    color: #f15d22;
    border: 1px solid #f15d22;
}

.outcome1-area-nav a {
    color: #0081c6;
    border: 1px solid #0081c6;
}

.selected-tab {
    position: relative;
    background-color: #ececec !important;
}

    .selected-tab::after {
        content: "";
        position: absolute;
        width: 0px;
        height: 0px;
        bottom: -12px;
        left: 42%;
    }

.selected-outcome1-tab::after {
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #0081c6;
}

.selected-outcome2-tab::after {
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #67c7c5;
}

.selected-outcome3-tab::after {
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #6cb33e;
}

.selected-outcome4-tab::after {
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #f15c22;
}

.selected-outcome5-tab::after {
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #ddb307;
}

.selected-outcome6-tab::after {
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #0081c6;
}

.selected-impact-tab::after {
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #f15d22;
}

.selected-home-tab::after {
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #009ddc;
}

.outcome2-area-nav a {
    color: #67c7c5;
    border: 1px solid #67c7c5;
}

.outcome3-area-nav a {
    color: #6cb33e;
    border: 1px solid #6cb33e;
}

.outcome4-area-nav a {
    color: #f15c22;
    border: 1px solid #f15c22;
}

.outcome5-area-nav a {
    color: #ddb307;
    border: 1px solid #ddb307;
}

.oeef-area-nav a {
    color: #0081c6;
    border: 1px solid #0081c6;
}

.header {
    z-index: 5;
    position: relative;
    left: 0;
    padding-top: 0;
    width: 100%;
    height: auto;
    visibility: visible;
    opacity: 1;
    margin: 15px 0px;
}

    .header li {
        display: inline-block;
        margin-right: -6px; /* fix the inline-block gap */
        border: none;
        text-align: left;
        margin-right: 6px;
        float: left;
    }

        .header li a br {
            display: block;
        }

        .header li:last-child {
            margin-right: 0px;
        }

    .header a {
        padding: 5px 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 112px;
        background: #ffffff;
        height: 30px;
    }

        .header a:hover {
            background-color: #ececec;
        }

.icon-number {
    font-size: 16px;
    /* margin-right: 4px; */
    font-weight: 700;
}

.nav-text {
    line-height: 14px;
    text-transform: uppercase;
    font-size: 14px;
    margin-right: 5px;
    font-weight: 600;
}

.breadcrumbs li {
    margin-bottom: 0px;
}

/*MEDIA QUERY FOR TABLET*/
@media (min-width: 481px) and (max-width: 768px) {
    .main-container {
        width: 480px;
        margin: 0px auto;
    }

    .content-main-container {
        margin-top: 0px;
        width: 480px;
        margin: 0px auto;
    }

    .home-page-container .flipWrapper {
        -webkit-perspective: 1000;
        width: 222px;
        height: 275px;
        position: relative;
        display: inline-block;
        margin-right: 8px;
        text-align: left !important;
    }

    .map-content {
        float: none;
        width: 100%;
        height: inherit;
        position: relative;
        padding-top: 10px;
    }

    .barometer-container {
        text-align: center;
        position: absolute;
        left: 15%;
        bottom: -19px;
    }

    .map-img {
        float: none;
        width: 100%;
    }

    .outcomes-container-internal .flipWrapper {
        -webkit-perspective: 1000;
        width: 225px;
        height: 317px;
        position: relative;
        display: inline-block;
        text-align: left !important;
    }

    .output-container .flipWrapper {
        -webkit-perspective: 1000;
        width: 212px;
        height: 350px;
        position: relative;
        display: inline-block;
        text-align: left !important;
    }

    .base-float {
        margin: 30px auto;
        width: 225px;
    }

    .block-values {
        width: 170px;
        margin-left: 10px;
    }

    .home-page-block-container .item {
        float: left;
        margin-right: 4px !important;
        margin-bottom: 10px;
    }

    .home-page-block-container .outcome-info-block {
        width: 456px;
    }

    .logo-sp {
        width: 100%;
        float: none;
        margin-top: 25px;
        text-align: center;
    }

    .content-sp {
        float: none;
        width: 100%;
    }

    .first-row-item1 {
        margin-left: 0px !important;
    }

    .first-row-item1-tablet {
        margin-left: 0px !important;
    }

    .other-row-item1 {
        margin-left: 15px !important;
    }

    .other-row-item1-tablet {
        margin-left: 0px !important;
    }

    .other-row-item2-tablet {
        margin-left: 15px !important;
    }

    .impact-container .item {
        float: left;
        margin-left: 15px;
        margin-bottom: 10px;
    }

    .outcomes-container .item {
        float: left;
        margin-left: 15px;
        margin-bottom: 10px;
    }

    .header a {
        padding: 5px 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 150px;
        background: #ffffff;
        height: 30px;
        margin-bottom: 10px;
    }

    .selected-tab::after {
        content: "";
        position: absolute;
        width: 0px;
        height: 0px;
        bottom: -12px;
        left: 42%;
        display: none;
    }
}

/*MEDIA QUERY FOR MOBILE*/
@media (min-width: 320px) and (max-width: 480px) {
    .main-container {
        width: 300px;
        margin: 0px auto;
    }

    .content-main-container {
        margin-top: 0px;
        width: 320px;
        margin: 0px auto;
    }

    .map-content {
        float: none;
        width: 100%;
        height: inherit;
        position: relative;
        padding-top: 10px;
    }

    .map-img {
        float: none;
        width: 100%;
    }

    .home-page-block-container {
        border: 1px solid #eee;
        margin-top: 8px;
        background: #F4F5F7;
        padding: 10px 0px 0px 10px;
        margin-bottom: 10px;
        width: 100%;
    }

    .home-page-container .flipWrapper {
        -webkit-perspective: 1000;
        width: 288px;
        height: 350px;
        position: relative;
        display: inline-block;
        text-align: left !important;
    }

    .logo-sp {
        width: 100%;
        float: none;
        margin-top: 25px;
        text-align: center;
    }

    .content-sp {
        float: none;
        width: 100%;
    }

    .impact-container .item {
        float: left;
        margin-left: 0px;
        margin-bottom: 10px;
    }

    .outcomes-container .item {
        float: left;
        margin-left: 0px;
        margin-bottom: 10px;
    }

    .header a {
        padding: 5px 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 147px;
        background: #ffffff;
        height: 30px;
        margin-bottom: 10px;
    }

    .selected-tab::after {
        content: "";
        position: absolute;
        width: 0px;
        height: 0px;
        bottom: -12px;
        left: 42%;
        display: none;
    }

    .header {
        z-index: 5;
        position: relative;
        left: 0;
        padding-top: 12px;
        width: 100%;
        height: auto;
        visibility: visible;
        opacity: 1;
        margin: 15px 0px;
    }
}




/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

    /*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

    .visuallyhidden.focusable:active,
    .visuallyhidden.focusable:focus {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        width: auto;
    }

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

        a[href]:after {
            content: " (" attr(href) ")";
        }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* carousel */
.outcome-indicator-block-container {
    position: relative;
}

    .outcome-indicator-block-container .owl-theme .owl-nav {
        position: absolute;
        bottom: 58%;
        left: 0;
        right: 5px;
    }

        .outcome-indicator-block-container .owl-theme .owl-nav .owl-prev, .outcome-indicator-block-container .owl-theme .owl-nav .owl-next {
            position: absolute;
            height: 45px;
            color: inherit;
            background: none;
            border: none;
            z-index: 100;
        }

            .outcome-indicator-block-container .owl-theme .owl-nav .owl-prev i, .outcome-indicator-block-container .owl-theme .owl-nav .owl-next i {
                font-size: 2.5rem;
                color: #fff;
            }

        .outcome-indicator-block-container .owl-theme .owl-nav [class*=owl-] {
            background: rgba(28, 48, 64, 0.3) !important;
        }

        .outcome-indicator-block-container .owl-theme .owl-nav .owl-prev {
            left: -4px;
        }

        .outcome-indicator-block-container .owl-theme .owl-nav .owl-next {
            right: 0px;
        }

/* barometer */
.barometer-container-base {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 70px;
}

    .barometer-container-base h5 {
        text-align: center;
        margin: 0px;
        color: #3c362e;
        padding: 15px 10px;
        font-weight: 400;
        font-size: 17px;
    }

    .barometer-container-base .barometer-container-box-1 {
        float: left;
        text-align: center;
        width: 50%;
        height: 100px;
    }

    .barometer-container-base .barometer-container-box-2 {
        float: left;
        text-align: center;
        width: 50%;
        height: 100px;
    }

        .barometer-container-base .barometer-container-box-1 .GaugeMeter, .barometer-container-base .barometer-container-box-2 .GaugeMeter {
            height: 80px;
        }

            .barometer-container-base .barometer-container-box-1 .GaugeMeter span, .barometer-container-base .barometer-container-box-2 .GaugeMeter span {
                line-height: 70px !important;
                font-size: 25px !important;
                color: #62625e;
                padding-top: 20px;
                font-weight: 700;
            }

.achievements-count {
    color: #009ddc;
}

    .achievements-count .year-result {
        color: #009ddc !important;
    }

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

.result {
    width: 84%;
    margin: auto;
    padding: 2%;
    text-align: center;
    font-size: 20px;
}

.pro-exp {
	position: absolute;
    bottom: 0px;
    width: auto;
    height: 42px;
}

.pro-exp a{
	position: absolute;
	right: 10px;
	line-height: 40px;
}

.pro-exp-left {
    background: #002060;
    color: #fff;
    width: auto;
    float: left;
    font-size: 22px;
    padding: 6px 5px;
}

.pro-exp-right {
    width: 353px;
    float: left;
    padding: 0px 30px 0px 5px;
}

.pro-exp-right p {
	height: 42px;
	font-size: 14px;
	color: #11192d;
	display: table-cell;
    vertical-align: middle;
}

.pro-exp-dis {
	position: absolute;
    bottom: 0px;
    width: auto;
    height: 42px;
}

.pro-exp-dis a{
	position: absolute;
	right: 10px;
	line-height: 40px;
}

.pro-exp-dis-left {
    background: #002060;
    color: #fff;
    width: auto;
    float: left;
    font-size: 22px;
    padding: 6px 5px;
}

.pro-exp-dis-right {
    width: auto;
    float: left;
    padding: 0px 30px 0px 5px;
}

.pro-exp-dis-right p {
	height: 42px;
	font-size: 14px;
	color: #11192d;
	display: table-cell;
    vertical-align: middle;
}

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

.home-page-left-block {
    width: auto;
    min-width: 33.3333%;
    float: left;
    display: block;
}

.home-page-right-block {
    width: 66.6666%;
    float: left;
    display: block;
}

.home-page-left-block .home-page-block-container {
    border: none;
    margin-top: 0px;
    background: #F4F5F7;
    padding: 0px 0px 0px 0px;
    margin-bottom: 0px;
}

.home-page-right-block .outcome-indicator-block-container .owl-carousel {
    border: none;
    margin-top: 0px;
    padding: 0px;
    margin-bottom: 0px;
}

.about {
    padding: 10px 0px 0px 8px;
    margin: 5px 0px 0px 0px;
    color: #808080;
    font-size: 15px;
}

.outcomes-container.outcome-1 .flipWrapper .card .about-portal h4 {
    position: relative;
    background: #195174;
}

    .outcomes-container.outcome-1 .flipWrapper .card .about-portal h4:after, .outcomes-container.outcome-1 .flipWrapper .card .about-portal h4:before {
        top: 100%;
        left: 15%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .outcomes-container.outcome-1 .flipWrapper .card .about-portal h4:after {
        border-color: rgba(136, 183, 213, 0);
        border-top-color: #195174;
        border-width: 10px;
        margin-left: -35px;
    }

    .outcomes-container.outcome-1 .flipWrapper .card .about-portal h4:before {
        border-color: rgba(194, 225, 245, 0);
        border-width: 36px;
        margin-left: -36px;
    }

.footnote .header-all headers-content {
    font-size: 14px !important;
}

.output-container .flipWrapper .card .front h4 i {
    color: #ffff00;
    cursor: pointer;
    float: right;
    margin-top: 5px;
}

.flipWrapper .card .front .no-data {
    text-align: center;
    margin-top: 85px;
}

.barometer-container-base .barometer-container-box .percentage {
    font-size: 45px;
}

.percentage {
    position: absolute;
    bottom: 80px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 45px;
    color: #62625e;
}

.barometer-container-base .barometer-container-box h6 {
    font-size: 45px;
    color: #62625e;
}

/*  added  */
#cssmenu > ul > li > a {
    width: auto !important;
    padding: 12px 8px !important;
}

#cssmenu > ul > li.has-sub > a {
    padding-right: 8px;
}

#cssmenu ul ul {
    width: 100%;
}

    #cssmenu ul ul li a {
        padding: 12px 8px !important;
        width: auto !important;
    }

.headers-content a {
    cursor: pointer;
}

.pro-exp i, .pro-exp-dis i {
    position: relative;
    margin-top: 13px;
    margin-left: 5px;
    cursor: pointer;
    color: #0081c6;
}

.nav-list a {
    color: #009ddc;
    border: 1px solid #009ddc;
}

.global-overview {
    min-height: 330px;
}

.showmore-button {
    cursor: pointer;
    background-color: transparent;
    color: #009ddc;
    display: inline;
    float: right;
    text-align: center;
    padding: 5px 5px 5px 5px;
    margin-top: 0px;
}

.description {
    padding: 0px 0px 0px 8px;
    margin: 5px 0px 0px 0px;
    color: #808080;
    font-size: 15px;
}

    .description::-webkit-scrollbar {
        width: 5px;
    }

    .description::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
    }

    .description::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0.1);
        outline: 1px solid rgba(0,0,0,0.1);
    }

.glossary .headers-block {
    color: #313131 !important;
}

.glossary p {
    margin-bottom: 15px;
}

.glossary-block-container {
    border: 1px solid #eee;
    background: #fff;
    padding: 15px 15px 0px;
    margin: 10px 0px 30px;
}

    .glossary-block-container .glossary-desc {
        width: 100%;
        display: table;
        margin-bottom: 25px;
    }

        .glossary-block-container .glossary-desc h5 {
            width: 15%;
            display: table-cell;
            vertical-align: top;
            float: left;
            color: #5f5f5f;
            font-weight: 600;
            font-size: 17px;
        }

        .glossary-block-container .glossary-desc span {
            float: left;
            width: 85%;
            color: #808080;
            font-size: 16px;
            display: table-cell;
            vertical-align: top;
        }

.glossary-desc-1 span {
    color: #146aa5;
    font-weight: 600;
}

.content-main-container .content p {
    margin: 0 0 12px 0;
}

    .content-main-container .content p a {
        color: #0397d6;
    }

.content-sp a {
   color: #009DDC;
}

.oee-view-all {
    color: #0081c6 !important;
}

/* added */
.showmore-button {
    width: 100%;
    text-align: right;
}

.year-result {
    margin-bottom: 0em;
}

.result {
    margin: auto;
    text-align: center;
    font-size: 16px;
    position: absolute;
    bottom: 25px;
    left: 0;
    right: 0;
    width: 96%;
    padding: 2%;
}

    .result span {
        font-size: 16px;
        font-weight: 300;
    }

.flip-detail-result {
    margin: 0px;
    padding: 15px 25px;
    color: #212121;
    font-weight: 400;
    font-size: 15px;
    text-align: center;
    background: none;
    bottom: 50px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.headers-content a.fright {
    margin-left: 5px;
}

.outcomes-container .flipWrapper .card .front h4 i {
    color: #fff;
    cursor: pointer;
    float: right;
    margin-top: 5px;
}

.impact-container .flipWrapper .card .front h4 i {
    color: #fff;
    cursor: pointer;
    float: right;
    margin-top: 5px;
}

.outcome-indicator {
    background: #fefefe;
    border-color: #e2e2e2;
    margin-bottom: 10px;
}

    .outcome-indicator .header-all {
        background: #fefefe;
    }

        .outcome-indicator .header-all .headers-output {
            color: #67c7c5;
        }

.outcome-indicator-3 {
    background: #fefefe;
    border-color: #e2e2e2;
    margin-bottom: 10px;
}

    .outcome-indicator-3 .header-all {
        background: #fefefe;
    }

        .outcome-indicator-3 .header-all .headers-output {
            color: #6cb33e;
        }

.outcome-indicator-4 {
    background: #fefefe;
    border-color: #e2e2e2;
    margin-bottom: 10px;
}

    .outcome-indicator-4 .header-all {
        background: #fefefe;
    }

        .outcome-indicator-4 .header-all .headers-output {
            color: #f15c22
        }

.outcome-indicator-5 {
    background: #fefefe;
    border-color: #e2e2e2;
    margin-bottom: 10px;
}

    .outcome-indicator-5 .header-all {
        background: #fefefe;
    }

        .outcome-indicator-5 .header-all .headers-output {
            color: #ddb307
        }

.impact-indicator {
    background: #fefefe;
    border-color: #e2e2e2;
    margin-bottom: 10px;
}

    .impact-indicator .header-all {
        background: #fefefe;
    }

        .impact-indicator .header-all .headers-output {
            color: #f15d22;
        }

.output-container .headers-content {
    display: block;
}

.flipWrapper .card .back .block-values-float .sector-with-bg {
    padding: 1px 4px;
    background: #b17235;
    color: #fff;
    position: relative;
    display: inline;
    top: 0px;
    left: 3px;
    font-size: 12px;
}

.flipWrapper .card .back .block-values-float .block-values {
    margin-top: 10px;
}

.m-b-10 {
    margin-bottom: 10px;
}

.item-result {
    border-bottom: none !important;
    padding: 10px 0px !important;
    font-size: 16px;
}

/* SPSTyles */

@media (min-width: 320px) and (max-width: 480px) {
    .home-page-right-block {
        width: 95%;
        float: left;
        display: block;
    }

    .glossary-block-container .glossary-desc h5 {
        margin-bottom: 5px;
    }

    .glossary-block-container .glossary-desc h5, .glossary-block-container .glossary-desc span {
        width: 100%;
    }
}


.map-content {
    /* display: flex;
    align-items: center;
    justify-content: left;*/
    float: left;
    width: 40%;
    height: inherit;
    min-height: 420px;
}

.pro-exp {
    position: absolute;
    bottom: 0px;
    width: auto;
    height: 42px;
}

    .pro-exp a {
        position: absolute;
        right: 10px;
        line-height: 40px;
    }

.pro-exp-left {
    background: #002060;
    color: #fff;
    width: auto;
    float: left;
    font-size: 22px;
    padding: 6px 5px;
}

.pro-exp-right {
    width: 353px;
    float: left;
    padding: 0px 30px 0px 5px;
}

    .pro-exp-right p {
        height: 42px;
        font-size: 14px;
        color: #11192d;
        display: table-cell;
        vertical-align: middle;
    }

.pro-exp-dis {
    position: absolute;
    bottom: 0px;
    width: auto;
    height: 42px;
}

    .pro-exp-dis a {
        position: absolute;
        right: 10px;
        line-height: 40px;
    }

.pro-exp-dis-left {
    background: #002060;
    color: #fff;
    width: auto;
    float: left;
    font-size: 22px;
    padding: 6px 5px;
}

.pro-exp-dis-right {
    width: auto;
    float: left;
    padding: 0px 30px 0px 5px;
}

    .pro-exp-dis-right p {
        height: 42px;
        font-size: 14px;
        color: #11192d;
        display: table-cell;
        vertical-align: middle;
    }

.pro-exp i, .pro-exp-dis i {
    position: relative;
    margin-top: 13px;
    margin-left: 5px;
    cursor: pointer;
    color: #0081c6;
}

.content-sp a {
    color: #009DDC;
}

.oee-view-all {
    color: #0081c6 !important;
}

.outcome-1-view-all {
    color: #0081c6 !important;
}

.outcome-2-view-all {
    color: #67c7c5 !important;
}

.outcome-3-view-all {
    color: #6cb33e !important;
}

.outcome-4-view-all {
    color: #f15c22 !important;
}

.outcome-5-view-all {
    color: #ddb307 !important;
}

.outcome-6-view-all {
    color: #0081c6 !important;
}



sup {
    vertical-align: super;
    font-size: 10px;
}

.Font-10 {
    font-size: 10px !important;
}

.MT0px {
    margin-top: 0px;
}

.legendtext {
    font-size: 12px;
    display: block;
    margin: 8px 0px 2px 10px;
}

    .legendtext b {
        font-size: 12px;
    }

.GaugeMeter span, .GaugeMeter b {
    width: 100%;
    margin: 3px 1px;
    left: 0;
}

.block-values tr td {
    width: 50%;
}

.block-values-2 tr td:nth-child(1), .block-values-2 tr td:nth-child(1) span.year-result {
    text-align: left;
}

.block-values-2 tr td:nth-child(2) {
    padding-right: 0px;
}

.block-values-2 tr td, .block-values-2 tr td span, .block-values-2 tr td span.year-result {
    text-align: right;
}

.block-values-2 tr td {
    min-width: 50px;
    width: auto
}

.ML0px {
    margin-left: 0px !important
}

.MT0px {
    margin-top: 0px !important
}

.List_DRO {
    padding-left: 25px;
}

    .List_DRO li {
        list-style: disc;
        margin: 2px 0px;
    }

        .List_DRO li a {
            font-size: 15px;
            transition: all .6s ease;
        }

            .List_DRO li a:hover {
                text-decoration: underline;
                padding-left: 4px;
            }


.pro-exp {
    width: 60%;
    height: auto;
    right: 0;
    background: #002060;
}

.pro-exp-left {
    background: none;
    width: calc(100% - 25px);
    box-sizing: border-box;
    font-size: 20px;
}

.pro-exp a {
    color: #ffeb00;
    bottom: 0px;
}

.pro-exp-left p {
    color: #e8e8e8;
    font-size: 14px;
}

.map-img img {
    width: 95%;
}

#back-impact-indicator-disclaimer .map-img img {
    width: 100%;
}

.pro-exp-dis {
    right: 0px;
    height: 28px;
}

#back-outcome-area-5-disclaimer .map-img img {
    width: 89%;
}



.map-container {
    display: inline-table
}

.pro-exp {
    position: relative;
    width: 100%;
    float: left;
}

.map-content {
    display: table-cell;
    vertical-align: top;
    float: none;
}

.map-img {
    display: table-cell;
    float: none;
}

.Highlight-text {
    color: #ffeb00
}

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

    .tns-nav > [aria-controls] {
        width: 10px;
        height: 10px;
        padding: 0;
        margin: 0 3px;
        border-radius: 50%;
        background: #ddd;
        border: 0;
    }

    .tns-nav > .tns-nav-active {
        background: #48a8f5;
    }

.slide .year-result {
    margin-top: 0px;
    color: #b3b1b1 !important;
    text-align: center;
    font-size: 12px;
    display: block;
}

@media (max-width: 768px) and (min-width:320px) {
    .content-main-container,
    body {
        min-width: 320px;
        width: 100%;
        box-sizing: border-box;
        padding: 0px 5px;
    }

    .output-container .flipWrapper,
    .outcomes-container-internal .flipWrapper {
        width: 280px;
    }

    .map-content {
        width: 100%;
        min-height: auto;
    }

    .pro-exp-right {
        width: 100%;
        padding: 0;
    }

    .pro-exp {
        width: 100%
    }
}

@media (max-width: 600px) and (min-width:320px) {
    .impact-container .item,
    .outcomes-container .item,
    .output-container .item {
        width: 100%;
        margin-left: 0px !important;
    }

    .outcomes-container-internal .flipWrapper {
        margin: auto;
        display: block;
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) and (min-width:601px) {
    .impact-container .item,
    .outcomes-container .item,
    .output-container .item {
        width: 48%;
        margin-left: 0px !important;
    }
}

@media (max-width: 1000px) and (min-width:769px) {
    .impact-container .item,
    .outcomes-container .item,
    .output-container .item {
        width: 48%;
        margin-left: 0px !important;
    }
}

@media (max-width: 500px) {
    .pro-exp-left span {
        width: 96%;
        margin: 3px 0px 0px;
        font-size: 15px
    }
}

@media (max-width:768px) and (min-width:320px) {
    .map-container {
        display: block
    }

    .map-content {
        display: block;
        float: left;
    }

    .map-img {
        display: block;
        float: right;
    }
}

div.footnote a, div.pro-exp-dis a i{
        color: #595a5c;
}

div.footnote a:hover, div.pro-exp-dis a i:hover{
        color: #009ddc;
}

.node--type-page .field--name-field-title:first-child{
    display: none;
}

.footnote .header-all .headers-content {
    font-size: 14px !important;
}

div.content-main-container p.header-all span.headers-content{
    line-height: 22px !important;
}

#block-twitterblock {
  text-align: center;
}

region-breadcrumb{
    margin:0 auto;
    max-width:500px;
    width:100%
}
@media (min-width:992px){
    .region-breadcrumb{
        max-width:960px;
        width:100%
    }
}