@font-face {
    font-family: 'circular-bold';
    src: url("../fonts/CircularStd-Bold.otf") format("opentype");
    font-style: normal;
    font-weight: normal
}

@font-face {
    font-family: 'circular-book';
    src: url("../fonts/CircularStd-Book.otf") format("opentype");
    font-style: normal;
    font-weight: normal
}

@font-face {
    font-family: "icons";
    src: url("../fonts/icons.eot");
    src: url("../fonts/icons.eot?#iefix") format("eot"), url("../fonts/icons.woff2") format("woff2"), url("../fonts/icons.woff") format("woff"), url("../fonts/icons.ttf") format("truetype"), url("../fonts/icons.svg#icons") format("svg");
    font-weight: normal;
    font-style: normal
}

[class^="icon-"],
[class*=" icon-"] {
    font-family: 'icons' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-pin:before {
    content: ""
}

.icon-zoom:before {
    content: ""
}

.ct-label {
    fill: rgba(0, 0, 0, 0.4);
    color: rgba(0, 0, 0, 0.4);
    font-size: .75rem;
    line-height: 1
}

.ct-chart-line .ct-label,
.ct-chart-bar .ct-label {
    display: block;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex
}

.ct-chart-pie .ct-label,
.ct-chart-donut .ct-label {
    dominant-baseline: central
}

.ct-label.ct-horizontal.ct-start {
    -webkit-box-align: flex-end;
    -webkit-align-items: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
    -webkit-box-pack: flex-start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    text-align: left;
    text-anchor: start
}

.ct-label.ct-horizontal.ct-end {
    -webkit-box-align: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    -webkit-box-pack: flex-start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    text-align: left;
    text-anchor: start
}

.ct-label.ct-vertical.ct-start {
    -webkit-box-align: flex-end;
    -webkit-align-items: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
    -webkit-box-pack: flex-end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: flex-end;
    justify-content: flex-end;
    text-align: right;
    text-anchor: end
}

.ct-label.ct-vertical.ct-end {
    -webkit-box-align: flex-end;
    -webkit-align-items: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
    -webkit-box-pack: flex-start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    text-align: left;
    text-anchor: start
}

.ct-chart-bar .ct-label.ct-horizontal.ct-start {
    -webkit-box-align: flex-end;
    -webkit-align-items: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    text-anchor: start
}

.ct-chart-bar .ct-label.ct-horizontal.ct-end {
    -webkit-box-align: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    text-anchor: start
}

.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-start {
    -webkit-box-align: flex-end;
    -webkit-align-items: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
    -webkit-box-pack: flex-start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    text-align: left;
    text-anchor: start
}

.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end {
    -webkit-box-align: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    -webkit-box-pack: flex-start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    text-align: left;
    text-anchor: start
}

.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-start {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: flex-end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: flex-end;
    justify-content: flex-end;
    text-align: right;
    text-anchor: end
}

.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-end {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: flex-start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    text-align: left;
    text-anchor: end
}

.ct-grid {
    stroke: rgba(0, 0, 0, 0.2);
    stroke-width: 1px;
    stroke-dasharray: 2px
}

.ct-grid-background {
    fill: none
}

.ct-point {
    stroke-width: 10px;
    stroke-linecap: round
}

.ct-line {
    fill: none;
    stroke-width: 4px
}

.ct-area {
    stroke: none;
    fill-opacity: .1
}

.ct-bar {
    fill: none;
    stroke-width: 10px
}

.ct-slice-donut {
    fill: none;
    stroke-width: 60px
}

.ct-series-a .ct-point,
.ct-series-a .ct-line,
.ct-series-a .ct-bar,
.ct-series-a .ct-slice-donut {
    stroke: #007535
}

.ct-series-a .ct-slice-pie,
.ct-series-a .ct-area {
    fill: #007535
}

.ct-series-b .ct-point,
.ct-series-b .ct-line,
.ct-series-b .ct-bar,
.ct-series-b .ct-slice-donut {
    stroke: #0085c3
}

.ct-series-b .ct-slice-pie,
.ct-series-b .ct-area {
    fill: #0085c3
}

.ct-series-c .ct-point,
.ct-series-c .ct-line,
.ct-series-c .ct-bar,
.ct-series-c .ct-slice-donut {
    stroke: #fbba07
}

.ct-series-c .ct-slice-pie,
.ct-series-c .ct-area {
    fill: #fbba07
}

.ct-series-d .ct-point,
.ct-series-d .ct-line,
.ct-series-d .ct-bar,
.ct-series-d .ct-slice-donut {
    stroke: #007535
}

.ct-series-d .ct-slice-pie,
.ct-series-d .ct-area {
    fill: #007535
}

.ct-series-e .ct-point,
.ct-series-e .ct-line,
.ct-series-e .ct-bar,
.ct-series-e .ct-slice-donut {
    stroke: #e94e1d
}

.ct-series-e .ct-slice-pie,
.ct-series-e .ct-area {
    fill: #e94e1d
}

.ct-series-f .ct-point,
.ct-series-f .ct-line,
.ct-series-f .ct-bar,
.ct-series-f .ct-slice-donut {
    stroke: #f1892d
}

.ct-series-f .ct-slice-pie,
.ct-series-f .ct-area {
    fill: #f1892d
}

.ct-series-g .ct-point,
.ct-series-g .ct-line,
.ct-series-g .ct-bar,
.ct-series-g .ct-slice-donut {
    stroke: #0085c3
}

.ct-series-g .ct-slice-pie,
.ct-series-g .ct-area {
    fill: #0085c3
}

.ct-series-h .ct-point,
.ct-series-h .ct-line,
.ct-series-h .ct-bar,
.ct-series-h .ct-slice-donut {
    stroke: #e94e1d
}

.ct-series-h .ct-slice-pie,
.ct-series-h .ct-area {
    fill: #e94e1d
}

.ct-series-i .ct-point,
.ct-series-i .ct-line,
.ct-series-i .ct-bar,
.ct-series-i .ct-slice-donut {
    stroke: #fbba07
}

.ct-series-i .ct-slice-pie,
.ct-series-i .ct-area {
    fill: #fbba07
}

.ct-series-j .ct-point,
.ct-series-j .ct-line,
.ct-series-j .ct-bar,
.ct-series-j .ct-slice-donut {
    stroke: #f1892d
}

.ct-series-j .ct-slice-pie,
.ct-series-j .ct-area {
    fill: #f1892d
}

.ct-series-k .ct-point,
.ct-series-k .ct-line,
.ct-series-k .ct-bar,
.ct-series-k .ct-slice-donut {
    stroke: #0085c3
}

.ct-series-k .ct-slice-pie,
.ct-series-k .ct-area {
    fill: #0085c3
}

.ct-series-l .ct-point,
.ct-series-l .ct-line,
.ct-series-l .ct-bar,
.ct-series-l .ct-slice-donut {
    stroke: #e94e1d
}

.ct-series-l .ct-slice-pie,
.ct-series-l .ct-area {
    fill: #e94e1d
}

.ct-series-m .ct-point,
.ct-series-m .ct-line,
.ct-series-m .ct-bar,
.ct-series-m .ct-slice-donut {
    stroke: #007535
}

.ct-series-m .ct-slice-pie,
.ct-series-m .ct-area {
    fill: #007535
}

.ct-series-n .ct-point,
.ct-series-n .ct-line,
.ct-series-n .ct-bar,
.ct-series-n .ct-slice-donut {
    stroke: #0085c3
}

.ct-series-n .ct-slice-pie,
.ct-series-n .ct-area {
    fill: #0085c3
}

.ct-series-o .ct-point,
.ct-series-o .ct-line,
.ct-series-o .ct-bar,
.ct-series-o .ct-slice-donut {
    stroke: #fbba07
}

.ct-series-o .ct-slice-pie,
.ct-series-o .ct-area {
    fill: #fbba07
}

.ct-square {
    display: block;
    position: relative;
    width: 100%
}

.ct-square:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 100%
}

.ct-square:after {
    content: "";
    display: table;
    clear: both
}

.ct-square>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-minor-second {
    display: block;
    position: relative;
    width: 100%
}

.ct-minor-second:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 93.75%
}

.ct-minor-second:after {
    content: "";
    display: table;
    clear: both
}

.ct-minor-second>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-major-second {
    display: block;
    position: relative;
    width: 100%
}

.ct-major-second:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 88.88889%
}

.ct-major-second:after {
    content: "";
    display: table;
    clear: both
}

.ct-major-second>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-minor-third {
    display: block;
    position: relative;
    width: 100%
}

.ct-minor-third:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 83.33333%
}

.ct-minor-third:after {
    content: "";
    display: table;
    clear: both
}

.ct-minor-third>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-major-third {
    display: block;
    position: relative;
    width: 100%
}

.ct-major-third:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 80%
}

.ct-major-third:after {
    content: "";
    display: table;
    clear: both
}

.ct-major-third>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-perfect-fourth {
    display: block;
    position: relative;
    width: 100%
}

.ct-perfect-fourth:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 75%
}

.ct-perfect-fourth:after {
    content: "";
    display: table;
    clear: both
}

.ct-perfect-fourth>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-perfect-fifth {
    display: block;
    position: relative;
    width: 100%
}

.ct-perfect-fifth:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 66.66667%
}

.ct-perfect-fifth:after {
    content: "";
    display: table;
    clear: both
}

.ct-perfect-fifth>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-minor-sixth {
    display: block;
    position: relative;
    width: 100%
}

.ct-minor-sixth:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 62.5%
}

.ct-minor-sixth:after {
    content: "";
    display: table;
    clear: both
}

.ct-minor-sixth>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-golden-section {
    display: block;
    position: relative;
    width: 100%
}

.ct-golden-section:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 61.8047%
}

.ct-golden-section:after {
    content: "";
    display: table;
    clear: both
}

.ct-golden-section>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-major-sixth {
    display: block;
    position: relative;
    width: 100%
}

.ct-major-sixth:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 60%
}

.ct-major-sixth:after {
    content: "";
    display: table;
    clear: both
}

.ct-major-sixth>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-minor-seventh {
    display: block;
    position: relative;
    width: 100%
}

.ct-minor-seventh:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 56.25%
}

.ct-minor-seventh:after {
    content: "";
    display: table;
    clear: both
}

.ct-minor-seventh>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-major-seventh {
    display: block;
    position: relative;
    width: 100%
}

.ct-major-seventh:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 53.33333%
}

.ct-major-seventh:after {
    content: "";
    display: table;
    clear: both
}

.ct-major-seventh>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-octave {
    display: block;
    position: relative;
    width: 100%
}

.ct-octave:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 50%
}

.ct-octave:after {
    content: "";
    display: table;
    clear: both
}

.ct-octave>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-major-tenth {
    display: block;
    position: relative;
    width: 100%
}

.ct-major-tenth:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 40%
}

.ct-major-tenth:after {
    content: "";
    display: table;
    clear: both
}

.ct-major-tenth>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-major-eleventh {
    display: block;
    position: relative;
    width: 100%
}

.ct-major-eleventh:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 37.5%
}

.ct-major-eleventh:after {
    content: "";
    display: table;
    clear: both
}

.ct-major-eleventh>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-major-twelfth {
    display: block;
    position: relative;
    width: 100%
}

.ct-major-twelfth:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 33.33333%
}

.ct-major-twelfth:after {
    content: "";
    display: table;
    clear: both
}

.ct-major-twelfth>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-double-octave {
    display: block;
    position: relative;
    width: 100%
}

.ct-double-octave:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 25%
}

.ct-double-octave:after {
    content: "";
    display: table;
    clear: both
}

.ct-double-octave>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

html {
    box-sizing: border-box
}

*,
*:before,
*:after {
    box-sizing: inherit
}

::selection {
    background: #3b5677;
    color: #fff
}

::-moz-selection {
    background: #3b5677;
    color: #fff
}

html,
body {
    margin: 0;
    overflow: visible;
    padding: 0
}

html {
    font: 400 10px/normal "myriad-pro", sans-serif
}

body {
    font-size: 1.6rem;
    line-height: 2.2rem;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden
}

p {
    margin-bottom: 4rem;
    margin-top: 0
}

a {
    color: inherit
}

.center-vertical {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    height: 1%;
    min-height: 100%
}

.center-horizontal {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    width: 100%
}

.center {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    height: 1%;
    min-height: 100%;
    width: 100%
}

#section3-circular-economy {
    background: #fbf3e8
}

.city-intro-text {
    padding: 20px 0 0 0
}

.button {
    background: #3b5677;
    color: #fff;
    display: inline-block;
    font-size: 1.3rem;
    line-height: 1.9rem;
    text-decoration: none;
    padding: 1rem 1.4rem
}

figure {
    display: block;
    margin: 0;
    padding: 0
}

figure img {
    display: block;
    max-width: 100%;
    width: 100%
}

figure .svg-wrapper {
    height: 0;
    position: relative;
    padding-top: 100%;
    width: 100%
}

figure .svg-wrapper svg {
    left: 0;
    position: absolute;
    top: 0
}

figure.beam__figure .svg-wrapper {
    padding-top: 170%
}

figure.can__figure .svg-wrapper {
    padding-top: 200%
}

figure.world-map-svg .svg-wrapper {
    padding-top: 49.5%
}

figure.waste__generation__figure .svg-wrapper {
    padding-top: 72%
}

figure.map-svg .svg-wrapper {
    padding-top: 78%
}

figure.map-treatment-svg .svg-wrapper {
    padding-top: 78%
}

.footnote {
    bottom: 2rem;
    position: absolute;
    left: -4rem;
    z-index: 200
}

@media only screen and (max-width: 1200px) {
    .footnote {
        left: 1rem
    }
}

.footnote .footnote__icon {
    display: block;
    height: 6.1rem;
    user-select: none;
    width: 4.4rem
}

.footnote .footnote__text {
    background: #3b5677;
    color: #fff;
    display: block;
    min-width: 60rem;
    opacity: 0;
    transition: opacity 300ms, visibility 0ms 300ms;
    padding: 1rem;
    position: absolute;
    left: 3rem;
    top: 0;
    visibility: hidden
}

.footnote .footnote__text a {
    color: inherit
}

@media only screen and (max-width: 600px) {
    .footnote {
        bottom: 0;
        position: relative;
        left: 0;
        z-index: 1000
    }
    .footnote .footnote__text {
        min-width: 30rem
    }
}

.footnote.open .footnote__text {
    opacity: 1;
    visibility: visible;
    transition: opacity 300ms, visibility 0ms 0ms
}

.logo {
    color: #fff;
    left: 1rem;
    margin: 0;
    pointer-events: none;
    position: fixed;
    text-align: right;
    text-transform: uppercase;
    top: 1rem;
    user-select: none;
    width: 17rem;
    z-index: 100
}

@media only screen and (max-width: 600px) {
    .logo {
        position: absolute
    }
}

.logo .logo__name__wrapper {
    text-align: left
}

.logo .logo__name,
.logo .logo__sub {
    display: inline-block;
    font-size: 1.8rem;
    margin: 0;
    padding: .3rem 1rem
}

.logo .logo__name {
    background: #cb4f25
}

.logo .logo__sub {
    background: #3b5677;
    transition: transform 300ms
}

.logo .logo__sub:nth-child(9) {
    transition-delay: 270ms
}

.logo .logo__sub:nth-child(8) {
    transition-delay: 240ms
}

.logo .logo__sub:nth-child(7) {
    transition-delay: 210ms
}

.logo .logo__sub:nth-child(6) {
    transition-delay: 180ms
}

.logo .logo__sub:nth-child(5) {
    transition-delay: 150ms
}

.logo .logo__sub:nth-child(4) {
    transition-delay: 120ms
}

.logo .logo__sub:nth-child(3) {
    transition-delay: 90ms
}

.logo .logo__sub:nth-child(2) {
    transition-delay: 60ms
}

.logo .logo__sub:nth-child(1) {
    transition-delay: 30ms
}

@media only screen and (min-width: 600px) {
    .small-logo .logo .logo__sub {
        transform: translate3d(-18rem, 0, 0)
    }
}

.mapgraph__wrapper,
.material__mapgraph__wrapper {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: flex-end;
    align-items: flex-end
}

.mapgraph,
.material__mapgraph {
    background: white;
    box-shadow: inset 0 0 10rem rgba(0, 0, 0, 0.1);
    height: 4rem;
    margin-right: .6rem;
    margin-top: 1.5rem;
    position: relative;
    transform: translate3d(0, 0, 0) skewY(-30deg) scale(2);
    transform-origin: left bottom;
    transition: transform 300ms, height 300ms;
    width: .3rem;
    -moz-perspective: 1000;
    -webkit-perspective: 1000;
    perspective: 1000
}

.mapgraph:before,
.material__mapgraph:before,
.mapgraph:after,
.material__mapgraph:after {
    background: inherit;
    content: '';
    display: block;
    position: relative
}

.mapgraph:before,
.material__mapgraph:before {
    box-shadow: inset 0 0 10rem rgba(0, 0, 0, 0.3);
    height: 100%;
    left: -100%;
    transform: translate3d(0, 0, 0) skewY(60deg) scaleX(0.6);
    transform-origin: right bottom;
    width: 100%
}

.mapgraph:after,
.material__mapgraph:after {
    height: 0;
    left: 0;
    padding-top: 100%;
    position: absolute;
    top: 0;
    transform: translate3d(-30%, -100%, 0) skewX(30deg);
    width: 100%
}

svg {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0
}

svg g,
svg group {
    fill: inherit
}

.theSprite {
    position: absolute;
    left: -999999rem
}

[class*="graphic--beam"][class*="-dim"] {
    display: block;
    width: 100%;
    height: 0;
    padding-top: 176.47059%
}

[class*="graphic--beam"][class*="-bg"] {
    background: transparent url("../icons/sprite.svg#graphic--beam") no-repeat center/contain
}

[class*="graphic--book"][class*="-dim"] {
    display: block;
    width: 100%;
    height: 0;
    padding-top: 136.36364%
}

[class*="graphic--book"][class*="-bg"] {
    background: transparent url("../icons/sprite.svg#graphic--book") no-repeat center/contain
}

[class*="graphic--can"][class*="-dim"] {
    display: block;
    width: 100%;
    height: 0;
    padding-top: 187.5%
}

[class*="graphic--can"][class*="-bg"] {
    background: transparent url("../icons/sprite.svg#graphic--can") no-repeat center/contain
}

[class*="graphic--flowchart"][class*="-dim"] {
    display: block;
    width: 100%;
    height: 0;
    padding-top: 130.43478%
}

[class*="graphic--flowchart"][class*="-bg"] {
    background: transparent url("../icons/sprite.svg#graphic--flowchart") no-repeat center/contain
}

[class*="graphic--icon-info"][class*="-dim"] {
    display: block;
    width: 100%;
    height: 0;
    padding-top: 100%
}

[class*="graphic--icon-info"][class*="-bg"] {
    background: transparent url("../icons/sprite.svg#graphic--icon-info") no-repeat center/contain
}

[class*="graphic--info"][class*="-dim"] {
    display: block;
    width: 100%;
    height: 0;
    padding-top: 100%
}

[class*="graphic--info"][class*="-bg"] {
    background: transparent url("../icons/sprite.svg#graphic--info") no-repeat center/contain
}

[class*="graphic--intro-graph"][class*="-dim"] {
    display: block;
    width: 100%;
    height: 0;
    padding-top: 93.33333%
}

[class*="graphic--intro-graph"][class*="-bg"] {
    background: transparent url("../icons/sprite.svg#graphic--intro-graph") no-repeat center/contain
}

[class*="graphic--intro-graphtest"][class*="-dim"] {
    display: block;
    width: 100%;
    height: 0;
    padding-top: 93.33333%
}

[class*="graphic--intro-graphtest"][class*="-bg"] {
    background: transparent url("../icons/sprite.svg#graphic--intro-graphtest") no-repeat center/contain
}

[class*="graphic--map-europe-optim"][class*="-dim"] {
    display: block;
    width: 100%;
    height: 0;
    padding-top: 100%
}

[class*="graphic--map-europe-optim"][class*="-bg"] {
    background: transparent url("../icons/sprite.svg#graphic--map-europe-optim") no-repeat center/contain
}

[class*="graphic--material-flow"][class*="-dim"] {
    display: block;
    width: 100%;
    height: 0;
    padding-top: 125%
}

[class*="graphic--material-flow"][class*="-bg"] {
    background: transparent url("../icons/sprite.svg#graphic--material-flow") no-repeat center/contain
}

.title {
    margin: 0;
    line-height: normal
}

.intro__title {
    font: bold 6rem/5rem "myriad-pro", sans-serif;
    margin-bottom: 5.5rem
}

.section__title {
    font: bold 4rem/3.8rem "myriad-pro", sans-serif;
    margin-bottom: 2rem
}

.section__title.no-top-margin {
    margin-top: 0
}

.section__caption {
    font: 1.2rem/2.8rem "myriad-pro", sans-serif;
    display: block;
    text-transform: uppercase
}

.section__subtitle {
    font: bold 3rem/3.4rem "myriad-pro", sans-serif;
    margin-bottom: 1.5rem
}

.columns {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    -moz-column-gap: 3rem;
    -webkit-column-gap: 3rem;
    column-gap: 3rem
}

.definitions {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    -moz-column-gap: 5rem;
    -webkit-column-gap: 5rem;
    column-gap: 5rem
}

@media only screen and (max-width: 1024px) {
    .definitions {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
        -moz-column-gap: 5rem;
        -webkit-column-gap: 5rem;
        column-gap: 5rem
    }
}

@media only screen and (max-width: 768px) {
    .definitions {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
        -moz-column-gap: 0rem;
        -webkit-column-gap: 0rem;
        column-gap: 0rem
    }
}

.definitions .definition {
    box-sizing: border-box;
    page-break-inside: avoid;
    -moz-page-break-inside: avoid-column;
    -webkit-column-break-inside: avoid-column;
    break-inside: avoid-column
}

.expandable-element .expandable-trigger a {
    text-decoration: none;
    font-weight: 700;
    color: #3b5677
}

.expandable-element .expandable-trigger a:after {
    content: "";
    display: inline-block;
    width: 1.8rem;
    height: 1.8rem;
    margin: 0 0 0 5px;
    position: relative;
    top: 3px;
    background: url(../images/info.svg) no-repeat center center
}

.expandable-element .expandable-trigger a.state-closed {
    display: block
}

.expandable-element .expandable-trigger a.state-open {
    display: none
}

.expandable-element .expandable-content {
    padding: 15px 0 0 0;
    display: none
}

.expandable-element.is-open .expandable-trigger a.state-closed {
    display: none
}

.expandable-element.is-open .expandable-trigger a.state-open {
    display: block
}

.expandable-element.is-open .expandable-content {
    display: block
}

.flow__chart {
    padding-right: 0;
    position: relative;
    z-index: 100
}

.flow__chart p {
    margin: 0
}

.flow__chart #ship,
.flow__chart #truck,
.flow__chart #box {
    cursor: pointer
}

.flow__chart #ship-wrapper g[id],
.flow__chart #ship-wrapper polyline[id],
.flow__chart #truck-wrapper g[id],
.flow__chart #truck-wrapper polyline[id],
.flow__chart #box-wrapper g[id],
.flow__chart #box-wrapper polyline[id],
.flow__chart #bottle-wrapper g[id],
.flow__chart #bottle-wrapper polyline[id],
.flow__chart #city-wrapper g[id],
.flow__chart #city-wrapper polyline[id] {
    transition: opacity, 300ms, transform 300ms;
    transform-origin: center center
}

.flow__chart #ship-wrapper g[id],
.flow__chart #truck-wrapper g[id],
.flow__chart #box-wrapper g[id],
.flow__chart #bottle-wrapper g[id],
.flow__chart #city-wrapper g[id] {
    cursor: pointer
}

.flow__chart #bin-wrapper g[id] {
    cursor: pointer
}

.flow__chart #bulb-wrapper line[id],
.flow__chart #bulb-wrapper #bulb {
    transition: opacity, 300ms, transform 300ms;
    transform-origin: center center
}

.flow__chart #bulb-wrapper #bulb {
    cursor: pointer
}

.flow__item__icon {
    background: url(../images/info.svg) no-repeat center center/cover;
    content: '';
    font-size: 0;
    height: 1.8rem;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate3d(100%, -50%, 0);
    width: 1.8rem
}

.flow__item__title {
    display: block;
    color: #3b5677;
    font: bold 1.8rem/normal "myriad-pro", sans-serif;
    line-height: 1.1;
    padding: 3px 0 0 0;
    max-width: 15rem;
    position: absolute;
    text-align: center;
    text-decoration: none;
    transform: translate3d(-100%, 0, 0)
}

.flow__item__desc {
    background: #3b5677;
    box-sizing: border-box;
    color: #fff;
    font-size: 1.4rem;
    left: 100%;
    line-height: normal;
    opacity: 0;
    padding: 1.5rem;
    position: absolute;
    text-align: center;
    top: 0;
    transform: translate3d(-50%, -130%, 0);
    transition: opacity 300ms, visibility 0ms 300ms;
    visibility: hidden;
    width: 19rem
}

.flow__item__desc:before {
    background: #3b5677;
    content: '';
    height: 0;
    left: 54%;
    position: absolute;
    transition: height 300ms 300ms;
    top: 0;
    width: .2rem;
    z-index: -1
}

.flow__item {
    position: absolute
}

.flow__item[rel*="division-"] .flow__item__title {
    font-size: 1.4rem;
    line-height: 0.8
}

.flow__item[rel*="division-"][rel="division-1"] {
    left: 42%;
    top: 32%
}

.flow__item[rel*="division-"][rel="division-1"] .flow__item__title {
    width: 10rem;
    text-align: right
}

.flow__item[rel*="division-"][rel="division-2"] {
    left: 42%;
    top: 36%;
    text-align: right
}

.flow__item[rel*="division-"][rel="division-2"] .flow__item__title {
    width: 10rem;
    text-align: right
}

.flow__item[rel*="division-"][rel="division-3"] {
    left: 42%;
    top: 39%
}

.flow__item[rel*="division-"][rel="division-3"] .flow__item__title {
    width: 10rem;
    text-align: right
}

.flow__item[rel*="division-"][rel="division-4"] {
    right: auto;
    left: 55.5%;
    top: 33.7%;
    height: 10px
}

.flow__item[rel*="division-"][rel="division-4"] .flow__item__title {
    width: 10rem;
    text-align: left;
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.flow__item[rel*="division-"][rel="division-5"] {
    right: auto;
    left: 55.5%;
    top: 37.8%
}

.flow__item[rel*="division-"][rel="division-5"] .flow__item__title {
    width: 10rem;
    text-align: left;
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.flow__item[rel*="division-"][rel="division-6"] {
    right: auto;
    left: 55.5%;
    top: 42.5%
}

.flow__item[rel*="division-"][rel="division-6"] .flow__item__title {
    width: 10rem;
    text-align: left;
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.flow__item[rel="ship"] {
    left: 12%;
    top: 0
}

.flow__item[rel="ship"] .flow__item__title {
    text-align: left
}

.flow__item[rel="truck"] {
    left: 47%;
    top: 0
}

.flow__item[rel="truck"] .flow__item__title {
    min-width: 11rem;
    text-align: left
}

.flow__item[rel="box"] {
    right: 26%;
    top: 0
}

.flow__item[rel="box"] .flow__item__title {
    text-align: left
}

.flow__item[rel="divisions"] {
    left: 53.5%;
    top: 25%
}

.flow__item[rel="material-used"] {
    left: 54%;
    top: 53.5%
}

.flow__item[rel="bulb"] {
    left: 10%;
    top: 62%
}

.flow__item[rel="bottle"] {
    left: 38%;
    top: 60%
}

.flow__item[rel="bottle"] .flow__item__title {
    min-width: 10rem
}

.flow__item[rel="city"] {
    right: 37%;
    top: 62%
}

.flow__item[rel="bin"] {
    left: 41%;
    top: 82%
}

.flow__item[rel="material-output"] {
    left: 53%;
    top: 93.5%
}

.flow__item.open .flow__item__desc {
    opacity: 1;
    visibility: visible;
    transition: opacity 300ms, visibility 0ms 0ms
}

.flow__item.open .flow__item__desc:before {
    height: 126%;
    transition: height 300ms 0ms
}

@media only screen and (min-width: 1200px) and (max-width: 1350px) {
    .flow__item[rel="bottle"] {
        left: 40%;
        top: 60%
    }
    .flow__item[rel="bottle"] .flow__item__title {
        min-width: 10rem
    }
}

@media only screen and (max-width: 600px) {
    .flow__chart {
        display: none
    }
}

.form input[type="radio"] {
    display: none
}

.form input[type="radio"]+label {
    cursor: pointer;
    display: inline-block;
    font-weight: bold
}

.form input[type="radio"]+label:before {
    background: #fff;
    border: 0.3rem solid #fff;
    box-sizing: border-box;
    border-radius: 100%;
    content: '';
    display: inline-block;
    height: 1.7rem;
    margin-right: 1.3rem;
    transition: border-color 300ms, background 300ms;
    vertical-align: middle;
    width: 1.7rem
}

.form input[type="radio"]:checked+label:before {
    background: #3b5677
}

.graph__meta-info {
    font-size: 1.1rem;
    font-weight: bold;
    line-height: normal;
    margin-top: 4rem;
    text-align: center;
    text-transform: uppercase
}

.intro__graph {
    width: 100%
}

#graphic--intro-graph g[data-name*="section-"] {
    opacity: 0;
    transition: opacity 300ms
}

#graphic--intro-graph g[data-name="linear"],
#graphic--intro-graph g[data-name="circular"],
#graphic--intro-graph g[data-name="materials"],
#graphic--intro-graph g[data-name="bottle"],
#graphic--intro-graph g[data-name="bottles"],
#graphic--intro-graph g[data-name="truck"],
#graphic--intro-graph g[data-name="person"],
#graphic--intro-graph g[data-name="bottle empty"] {
    pointer-events: none
}

#graphic--intro-graph g[data-name="linear"],
#graphic--intro-graph g[data-name="circular"],
#graphic--intro-graph g[data-name="labels"] {
    opacity: 0;
    transition: opacity 300ms
}

#graphic--intro-graph g[data-name="linear"] path,
#graphic--intro-graph g[data-name="linear"] polygon,
#graphic--intro-graph g[data-name="circular"] path,
#graphic--intro-graph g[data-name="circular"] polygon,
#graphic--intro-graph g[data-name="labels"] path,
#graphic--intro-graph g[data-name="labels"] polygon {
    transition: fill 300ms
}

.linear #graphic--intro-graph g[data-name="linear"] {
    opacity: 1
}

.linear #graphic--intro-graph g[data-name="labels"] {
    opacity: 0
}

.linear #graphic--intro-graph g[data-name*="section-"],
.linear #graphic--intro-graph g[data-name="bin"] {
    cursor: pointer
}

.linear #graphic--intro-graph g[data-name*="section-"]:hover,
.linear #graphic--intro-graph g[data-name*="section-"].active,
.linear #graphic--intro-graph g[data-name="bin"]:hover,
.linear #graphic--intro-graph g[data-name="bin"].active {
    opacity: 1
}

.linear #graphic--intro-graph g[data-name="section-3"],
.linear #graphic--intro-graph g[data-name="section-4"] {
    pointer-events: none
}

.circular #graphic--intro-graph g[data-name="circular"] {
    opacity: 1
}

.circular #graphic--intro-graph g[data-name="labels"] {
    opacity: 1
}

.circular #graphic--intro-graph g[data-name="linear"] {
    opacity: 1
}

.circular #graphic--intro-graph g[data-name="linear"] path,
.circular #graphic--intro-graph g[data-name="linear"] polygon {
    fill: #0c4391 !important
}

.circular #graphic--intro-graph g[data-name*="label-"] {
    cursor: pointer
}

.circular #graphic--intro-graph g[data-name*="label-"] path[data-name*="Rectangle-"] {
    fill: #063560;
    transition: fill 300ms
}

.circular #graphic--intro-graph g[data-name*="label-"]:hover path[data-name*="Rectangle-"],
.circular #graphic--intro-graph g[data-name*="label-"].active path[data-name*="Rectangle-"] {
    fill: #0085c3
}

.map {
    height: 0;
    padding-top: 40%;
    position: absolute;
    right: 0;
    top: 0;
    width: 40%
}

.map .map__inner {
    max-height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.map-svg,
.map-treatment-svg,
.world-map-svg {
    height: 100%;
    padding-right: 0 !important;
    text-align: right;
    margin: 0
}

.map-svg svg,
.map-treatment-svg svg,
.world-map-svg svg {
    max-height: 100%;
    max-width: 100%
}

.map-svg path,
.map-treatment-svg path,
.world-map-svg path {
    stroke-width: .02rem;
    opacity: .5;
    transition: fill 300ms, opacity 300ms
}

.map-svg path[id],
.map-treatment-svg path[id],
.world-map-svg path[id] {
    cursor: pointer
}

.map-svg g[id],
.map-treatment-svg g[id],
.world-map-svg g[id] {
    cursor: pointer
}

.map-svg path {
    fill: #ffddbe;
    stroke: #ffffff;
    opacity: 1
}

.map-svg g[id] path {
    fill: inherit !important;
    opacity: 1
}

.map-svg path[id],
.map-svg g[id] {
    fill: #f1892d !important;
    opacity: 1
}

.map-svg path[id]:hover,
.map-svg path[id].active,
.map-svg g[id]:hover,
.map-svg g[id].active {
    fill: #3b5677 !important;
    opacity: 1
}

.map-treatment-svg path {
    fill: #e4e4e3 !important;
    stroke: #ffffff;
    opacity: 1
}

.map-treatment-svg g[id] path {
    fill: inherit !important;
    opacity: 1
}

.map-treatment-svg path[id],
.map-treatment-svg g[id] {
    fill: #a4a4a2;
    opacity: 1
}

.map-treatment-svg #belgium {
    fill: #6588b3
}
.map-treatment-svg #bulgaria {
    fill: #6588b3
}
.map-treatment-svg #czech_republic {
    fill: #87a2c4
}
.map-treatment-svg #denmark {
    fill: #2a3d55
}
.map-treatment-svg #germany {
    fill: #3b5677
}
.map-treatment-svg #estonia {
    fill: #87a2c4
}
.map-treatment-svg #ireland {
    fill: #4c6f99
}
.map-treatment-svg #greece {
    fill: #6588b3
}
.map-treatment-svg #spain {
    fill: #6588b3
}
.map-treatment-svg #france {
    fill: #4c6f99
}
.map-treatment-svg #croatia {
    fill: #6588b3
}
.map-treatment-svg #italy {
    fill: #6588b3
}
.map-treatment-svg #cyprus {
    fill: #3b5677
}
.map-treatment-svg #latvia {
    fill: #6588b3
}
.map-treatment-svg #lithuania {
    fill: #6588b3
}
.map-treatment-svg #luxembourg {
    fill: #3b5677
}
.map-treatment-svg #hungary {
    fill: #87a2c4
}
.map-treatment-svg #malta {
    fill: #3b5677
}
.map-treatment-svg #netherlands {
    fill: #4c6f99
}
.map-treatment-svg #austria {
    fill: #4c6f99
}
.map-treatment-svg #poland {
    fill: #87a2c4
}
.map-treatment-svg #portugal {
    fill: #6588b3
}
.map-treatment-svg #romania {
    fill: #bacadd
}
.map-treatment-svg #slovenia {
    fill: #6588b3
}
.map-treatment-svg #slovakia {
    fill: #87a2c4
}
.map-treatment-svg #finland {
    fill: #4c6f99
}
.map-treatment-svg #sweden {
    fill: #6588b3
}
.map-treatment-svg #united_kingdom {
    fill: #6588b3
}
.map-treatment-svg #switzerland {
    opacity: .3;
    pointer-events: none
}
.map-treatment-svg g[id]:hover,
.map-treatment-svg g[id].active {
    fill: #f8ceac !important;
    opacity: 1
}

.world-map-svg .cls-1,
.world-map-svg .cls-2 {
    fill: #e5e5e5;
    stroke: #b5b5b5
}

.world-map-svg path[id] {
    fill: #4c6f99
}

.world-map-svg path[id]:hover,
.world-map-svg path[id].active {
    fill: #3b5677;
    opacity: 1
}

.world-map-svg g[id] path {
    fill: #4c6f99
}

.world-map-svg g[id]:hover path,
.world-map-svg g[id].active path {
    fill: #3b5677
}

.materials {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.material {
    box-sizing: border-box;
    padding-right: 5%;
    width: 33%
}

.material .material__title {
    display: block;
    font-weight: bold;
    margin-bottom: 0
}

.material .material__graph {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 2rem
}

.material .material__pct {
    display: inline-block;
    font-weight: bold;
    margin-right: 1rem;
    width: 3.5rem
}

.material .material__graph__wrapper {
    background: rgba(59, 86, 119, 0.5);
    display: block;
    font-size: 1.4rem;
    height: .7rem;
    line-height: 0;
    width: 100%
}

.material .material__graph__wrapper .material__graph__bar {
    background: #3b5677;
    display: inline-block;
    height: 100%
}

.material.theme-1 .material__graph__wrapper {
    background: rgba(59, 86, 119, 0.5)
}

.material.theme-1 .material__graph__wrapper .material__graph__bar {
    background: #3b5677
}

.material.theme-2 .material__graph__wrapper {
    background: rgba(0, 133, 195, 0.5)
}

.material.theme-2 .material__graph__wrapper .material__graph__bar {
    background: #0085c3
}

.material.theme-3 .material__graph__wrapper {
    background: rgba(230, 38, 69, 0.5)
}

.material.theme-3 .material__graph__wrapper .material__graph__bar {
    background: #e62645
}

.material.theme-4 .material__graph__wrapper {
    background: rgba(0, 117, 53, 0.5)
}

.material.theme-4 .material__graph__wrapper .material__graph__bar {
    background: #007535
}

.material.theme-5 .material__graph__wrapper {
    background: rgba(251, 186, 7, 0.5)
}

.material.theme-5 .material__graph__wrapper .material__graph__bar {
    background: #fbba07
}

.material.theme-6 .material__graph__wrapper {
    background: rgba(87, 87, 86, 0.5)
}

.material.theme-6 .material__graph__wrapper .material__graph__bar {
    background: #575756
}

.material.theme-7 .material__graph__wrapper {
    background: rgba(233, 78, 29, 0.5)
}

.material.theme-7 .material__graph__wrapper .material__graph__bar {
    background: #e94e1d
}

.material.theme-8 .material__graph__wrapper {
    background: rgba(241, 137, 45, 0.5)
}

.material.theme-8 .material__graph__wrapper .material__graph__bar {
    background: #f1892d
}

.material.theme-9 .material__graph__wrapper {
    background: rgba(0, 140, 154, 0.5)
}

.material.theme-9 .material__graph__wrapper .material__graph__bar {
    background: #008c9a
}

.material.theme-10 .material__graph__wrapper {
    background: rgba(112, 37, 53, 0.5)
}

.material.theme-10 .material__graph__wrapper .material__graph__bar {
    background: #702535
}

.material.theme-11 .material__graph__wrapper {
    background: rgba(155, 82, 149, 0.5)
}

.material.theme-11 .material__graph__wrapper .material__graph__bar {
    background: #9b5295
}

.material.theme-12 .material__graph__wrapper {
    background: rgba(254, 243, 232, 0.5)
}

.material.theme-12 .material__graph__wrapper .material__graph__bar {
    background: #fef3e8
}

#navigation {
    background: #3b5677;
    font-size: 1.3rem;
    height: 100%;
    line-height: 1.7rem;
    position: fixed;
    right: 0;
    top: 0;
    transition: background 300ms;
    width: 1rem;
    z-index: 1000
}

#navigation ul,
#navigation li {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0
}

#navigation .navigation__link {
    display: inline-block;
    margin: 3rem 0;
    position: relative
}

@media only screen and (max-height: 650px) {
    #navigation .navigation__link {
        margin: .5rem 0
    }
}

#navigation .navigation__link:before {
    background: #3b5677;
    content: '';
    height: .5rem;
    position: absolute;
    right: 0;
    transform: translate3d(400%, -50%, 0);
    transition: all 300ms;
    top: 50%;
    width: 2rem
}

#navigation .navigation__link:hover,
#navigation .navigation__link.active {
    font-weight: bold
}

#navigation .navigation__link:hover:before,
#navigation .navigation__link.active:before {
    transform: translate3d(120%, -50%, 0)
}

#navigation .navigation__count {
    display: block
}

@media only screen and (max-height: 400px) {
    #navigation .navigation__count {
        display: inline-block;
        margin-right: 1rem
    }
}

#navigation-links {
    display: inline-block;
    position: relative;
    top: 50%;
    text-align: right;
    transform: translate3d(-10rem, -50%, 0);
    width: 7.5rem
}

#navigation-links a {
    color: #1c1c1b;
    text-decoration: none;
    transition: color 300ms
}

#navigation-actions {
    bottom: 1rem;
    position: absolute;
    transform: translate3d(-10rem, 0, 0);
    width: 7.5rem
}

#navigation-logo {
    background: url(../images/logo-small.png) no-repeat center center/90%;
    height: 6rem;
    position: absolute;
    right: 2rem;
    top: 1rem;
    transition: background-color 300ms;
    width: 7.5rem
}

.active-section-intro #navigation-logo {
    background-image: url(../images/logo-small-invert.png)
}

.active-section-intro .navigation__link[href="#intro"] {
    font-weight: bold
}

.active-section-intro .navigation__link[href="#intro"]:before {
    transform: translate3d(120%, -50%, 0) !important
}

.active-section-production-today .navigation__link[href="#production-today"] {
    font-weight: bold
}

.active-section-production-today .navigation__link[href="#production-today"]:before {
    transform: translate3d(120%, -50%, 0) !important
}

.active-section-production-tomorrow .navigation__link[href="#production-tomorrow"] {
    font-weight: bold
}

.active-section-production-tomorrow .navigation__link[href="#production-tomorrow"]:before {
    transform: translate3d(120%, -50%, 0) !important
}

.active-section-consumption-today .navigation__link[href="#consumption-today"] {
    font-weight: bold
}

.active-section-consumption-today .navigation__link[href="#consumption-today"]:before {
    transform: translate3d(120%, -50%, 0) !important
}

.active-section-consumption-tomorrow .navigation__link[href="#consumption-tomorrow"] {
    font-weight: bold
}

.active-section-consumption-tomorrow .navigation__link[href="#consumption-tomorrow"]:before {
    transform: translate3d(120%, -50%, 0) !important
}

.active-section-eu-actions .navigation__link[href="#eu-actions"] {
    font-weight: bold
}

.active-section-eu-actions .navigation__link[href="#eu-actions"]:before {
    transform: translate3d(120%, -50%, 0) !important
}

.active-section-outlook .navigation__link[href="#outlook"] {
    font-weight: bold
}

.active-section-outlook .navigation__link[href="#outlook"]:before {
    transform: translate3d(120%, -50%, 0) !important
}

.pyramids {
    transform: translate3d(0, 15%, 0);
    transition: transform .5s
}

@media only screen and (max-width: 1023px) {
    .pyramids {
        transform: translate3d(0, 0, 0)
    }
}

.pyramid__meta {
    left: 0;
    padding-right: 75%;
    position: absolute;
    top: 44%;
    opacity: 0;
    transform: translate3d(-50%, 0, 0);
    transition: opacity 300ms
}

.pyramid__meta p {
    margin-bottom: 0
}

.pyramid__meta .pyramid__title {
    color: #0085c3;
    font-weight: bold;
    font-size: 2.6rem;
    line-height: 3rem;
    margin-bottom: 2rem
}

.pyramid__meta .pyramid__desc {
    font-size: 1.4rem;
    line-height: normal
}

.pyramid__meta:before {
    background: #575756;
    content: '';
    height: .1rem;
    left: 25%;
    position: absolute;
    top: 1.75rem;
    width: 70%;
    z-index: -1
}

.pyramid.active .pyramid__meta {
    opacity: 1
}

.pyramid {
    margin: 0;
    position: relative;
    transition: top 300ms
}

.pyramid img {
    position: relative;
    transition: transform 300ms;
    z-index: 100
}

.pyramid.pyramid-1 {
    z-index: 5
}

.pyramid.pyramid-2 {
    top: -2%;
    transform: translate3d(0, -84%, 0);
    z-index: 4
}

.pyramid.pyramid-2 img {
    transform: scale(0.87)
}

.pyramid.pyramid-3 {
    top: -14%;
    transform: translate3d(0, -162.6%, 0);
    z-index: 3
}

.pyramid.pyramid-3 img {
    transform: scale(0.73)
}

.pyramid.pyramid-4 {
    top: -26%;
    transform: translate3d(0, -229.6%, 0);
    z-index: 2
}

.pyramid.pyramid-4 img {
    transform: scale(0.56)
}

.pyramid.pyramid-5 {
    top: -50%;
    transform: translate3d(0, -248.7%, 0);
    z-index: 1
}

.pyramid.pyramid-5 img {
    transform: scale(0.39)
}

@media only screen and (max-width: 1023px) {
    .pyramid {
        transform: translate3d(0, 0, 0) !important
    }
    .pyramid .pyramid__meta {
        max-width: 75%;
        margin: 2rem auto;
        opacity: 1;
        padding-right: 0;
        position: relative;
        text-align: center;
        top: 0;
        transform: translate3d(0, 0, 0)
    }
    .pyramid .pyramid__meta:before {
        content: initial
    }
}

.statistics {
    margin: 0 -20px;
    *zoom: 1
}

.statistics:after {
    content: "";
    display: table;
    clear: both
}

.statistics.grid-2 .statistic {
    width: 50%;
    float: left;
    padding: 25px 20px
}

.statistics.grid-2 .statistic:nth-child(2n+1) {
    clear: both
}

@media only screen and (max-width: 1200px) {
    .statistics.grid-2 .statistic {
        width: 100%
    }
    .statistics.grid-2 .statistic:nth-child(2n+1) {
        clear: none
    }
}

.statistics.grid-3 .statistic {
    width: 33.33333%;
    float: left;
    padding: 25px 20px
}

.statistics.grid-3 .statistic:nth-child(3n+1) {
    clear: both
}

@media only screen and (max-width: 1200px) {
    .statistics.grid-3 .statistic {
        width: 50%
    }
    .statistics.grid-3 .statistic:nth-child(3n+1) {
        clear: none
    }
    .statistics.grid-3 .statistic:nth-child(2n+1) {
        clear: both
    }
}

.statistics.grid-4 .statistic {
    width: 25%;
    float: left;
    padding: 25px 20px
}

.statistics.grid-4 .statistic:nth-child(4n+1) {
    clear: both
}

@media only screen and (max-width: 1200px) {
    .statistics.grid-4 .statistic {
        width: 50%
    }
    .statistics.grid-4 .statistic:nth-child(4n+1) {
        clear: none
    }
    .statistics.grid-4 .statistic:nth-child(2n+1) {
        clear: both
    }
}

.statistics.longer-lifetime-spacing {
    margin-top: -35px
}

@media only screen and (max-width: 1200px) {
    .statistics.longer-lifetime-spacing {
        margin-top: 30px
    }
}

.statistic {
    box-sizing: border-box;
    padding-bottom: 2rem;
    page-break-inside: avoid;
    -moz-page-break-inside: avoid-column;
    -webkit-column-break-inside: avoid-column;
    break-inside: avoid-column
}

.statistic p {
    margin-bottom: 0
}

@media only screen and (max-width: 768px) {
    .statistic {
        padding-bottom: 5rem
    }
}

.statistic__title {
    font: 900 7.5rem/0.9 "myriad-pro", sans-serif;
    margin: 0 0 1.2rem
}

.statistic.theme-1 .statistic__title {
    color: #3b5677
}

.statistic.theme-2 .statistic__title {
    color: #0085c3
}

.statistic.theme-3 .statistic__title {
    color: #e62645
}

.statistic.theme-4 .statistic__title {
    color: #007535
}

.statistic.theme-5 .statistic__title {
    color: #fbba07
}

.statistic.theme-6 .statistic__title {
    color: #575756
}

.statistic.theme-7 .statistic__title {
    color: #e94e1d
}

.statistic.theme-8 .statistic__title {
    color: #f1892d
}

.statistic.theme-9 .statistic__title {
    color: #008c9a
}

.statistic.theme-10 .statistic__title {
    color: #702535
}

.statistic.theme-11 .statistic__title {
    color: #9b5295
}

.statistic.theme-12 .statistic__title {
    color: #fef3e8
}

.statistic__subtitle {
    font: 900 2.2rem/1.1 "myriad-pro", sans-serif;
    margin: 0 0 2rem 0;
    width: 80%
}

.statistic.theme-1 .statistic__subtitle {
    color: #3b5677
}

.statistic.theme-2 .statistic__subtitle {
    color: #0085c3
}

.statistic.theme-3 .statistic__subtitle {
    color: #e62645
}

.statistic.theme-4 .statistic__subtitle {
    color: #007535
}

.statistic.theme-5 .statistic__subtitle {
    color: #fbba07
}

.statistic.theme-6 .statistic__subtitle {
    color: #575756
}

.statistic.theme-7 .statistic__subtitle {
    color: #e94e1d
}

.statistic.theme-8 .statistic__subtitle {
    color: #f1892d
}

.statistic.theme-9 .statistic__subtitle {
    color: #008c9a
}

.statistic.theme-10 .statistic__subtitle {
    color: #702535
}

.statistic.theme-11 .statistic__subtitle {
    color: #9b5295
}

.statistic.theme-12 .statistic__subtitle {
    color: #fef3e8
}

.statistic__subtitle.match-the-height-02 {
    min-height: 48px
}

.tooltip {
    color: inherit;
    display: inline-block;
    text-decoration: none;
    white-space: nowrap
}

.tooltip:after {
    background: url(../images/icon-info.svg) no-repeat center center;
    content: '';
    display: inline-block;
    height: 1.5rem;
    margin-left: .4rem;
    vertical-align: middle;
    width: 1.5rem
}

.tooltip-wrapper {
    display: inline-block;
    position: relative;
    z-index: 10
}

.tooltip-wrapper .tooltip-content {
    opacity: 0;
    visibility: hidden
}

.tooltip-wrapper.active .tooltip-content {
    opacity: 1;
    transition: opacity 300ms, visibility 0ms 0ms;
    visibility: visible;
    z-index: 20
}

.tooltip-content {
    background: #3b5677;
    box-sizing: border-box;
    color: #fff;
    font-size: 1.3rem;
    left: 0;
    line-height: 1.9;
    min-width: 46rem;
    top: 100%;
    padding: 2.5rem 2.5rem 4.2rem;
    position: absolute;
    transform: translate(0, 1rem);
    transition: opacity 300ms, visibility 0ms 300ms;
    z-index: 1000
}

.tooltip-content .definition-title {
    display: none
}

.tooltip-content .definition-desc {
    margin: 0
}

.tooltip-content .tooltip-close {
    background: url(../images/cross-narrow.svg) no-repeat center center/contain;
    bottom: 1.5rem;
    display: block;
    height: 1.5rem;
    left: 2.5rem;
    position: absolute;
    text-indent: -9999rem;
    transform: rotate(90deg);
    transition: transform 150ms;
    width: 1.5rem
}

.tooltip-content .tooltip-close:hover {
    transform: rotate(0deg)
}

.grid {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap
}

.grid .column {
    box-sizing: border-box;
    width: 8.33%
}

.grid .column .column__inner {
    padding-right: 9rem
}

.grid .column .column__inner.no-pad {
    padding-right: 0
}

.grid .column.span--1 {
    width: 8.33%
}

.grid .column.span--2 {
    width: 16.66%
}

.grid .column.span--3 {
    width: 24.99%
}

.grid .column.span--4 {
    width: 33.32%
}

.grid .column.span--5 {
    width: 41.65%
}

.grid .column.span--6 {
    width: 49.98%
}

.grid .column.span--7 {
    width: 58.31%
}

.grid .column.span--8 {
    width: 66.64%
}

.grid .column.span--9 {
    width: 74.97%
}

.grid .column.span--10 {
    width: 83.3%
}

.grid .column.span--11 {
    width: 91.63%
}

.grid .column.span--offset--1 {
    margin-left: 8.33%
}

.grid .column.span--offset--2 {
    margin-left: 16.66%
}

.grid .column.span--offset--3 {
    margin-left: 24.99%
}

.grid .column.span--offset--4 {
    margin-left: 33.32%
}

.grid .column.span--offset--5 {
    margin-left: 41.65%
}

.grid .column.span--offset--6 {
    margin-left: 49.98%
}

.grid .column.span--offset--7 {
    margin-left: 58.31%
}

.grid .column.span--offset--8 {
    margin-left: 66.64%
}

.grid .column.span--offset--9 {
    margin-left: 74.97%
}

.grid .column.span--offset--10 {
    margin-left: 83.3%
}

.grid .column.span--fs {
    position: absolute;
    right: 1rem;
    top: 0;
    height: 100%
}

@media only screen and (max-width: 768px) {
    .grid {
        display: block
    }
    .grid .column {
        width: 100% !important
    }
    .grid .column .column__inner {
        padding-right: 0
    }
    .grid .column[class*="span--offset-"] {
        margin-left: 0
    }
}

#waste-generation {
    background: #f6c298
}

#waste-generation .section__inner {
    padding-bottom: 25rem
}

.waste__generation {
    margin-top: 10%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start
}

.waste__generation__graph {
    position: relative;
    width: 55%
}

@media only screen and (max-width: 768px) {
    .waste__generation__graph {
        width: 100%
    }
}

.waste__generation__graph img {
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 15%
}

.waste__generation__graph .waste-tractor {
    bottom: 32%;
    left: 15%;
    top: auto;
    transform: scale(1.4)
}

.waste__generation__graph .waste-house {
    left: 6%;
    top: 6%
}

.waste__generation__graph .waste-trash {
    left: 32%;
    top: -10%
}

.waste__generation__graph .waste-plant {
    left: 65%;
    top: -2%;
    transform: scale(1.15)
}

.waste__generation__graph .waste-crane {
    left: 82%;
    top: 21%;
    transform: scale(1.4)
}

.waste__generation__graph .graph__meta-info {
    font-size: 1.1rem;
    font-weight: bold;
    right: 0;
    line-height: normal;
    margin-top: 4rem;
    position: absolute;
    text-transform: uppercase;
    bottom: -2rem;
    transform: translate3d(0, 2rem, 0);
    width: 12rem;
    text-align: right
}

.waste__generation__graph .graph__meta-extra {
    width: 100%;
    text-align: center;
    left: 0;
    position: absolute;
    top: 100%;
    padding: 10px 0 0 0;
    font-size: 14px
}

.waste__generation__infos {
    column-count: 1 !important;
    position: relative;
    width: 40%
}

@media only screen and (max-width: 768px) {
    .waste__generation__infos {
        width: 100%
    }
    .waste__generation__infos .waste__generation__info img {
        top: 25px !important
    }
    .waste__generation__infos.statistics {
        margin: 0
    }
}

.waste__generation__infos .waste__generation__info {
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity 300ms;
    width: 100%
}

.waste__generation__infos .waste__generation__info .statistic__title {
    color: #fff;
    font-size: 5.4rem
}

.waste__generation__infos .waste__generation__info .statistic__subtitle {
    margin-bottom: 2rem;
    padding-right: 40%;
    width: auto
}

.waste__generation__infos .waste__generation__info .note {
    padding: 15px 0 0 0;
    font-size: 14px
}

.waste__generation__infos .waste__generation__info img {
    position: absolute;
    right: 2.3rem;
    top: 0;
    transform: translate(0, -20%);
    width: 11rem;
    z-index: -1
}

.waste__generation__infos .waste__generation__info img.waste-crane {
    transform: translate(0, -35%) scale(0.8)
}

.waste__generation__infos .waste__generation__info img.waste-tractor {
    width: 15rem
}

.waste__generation__infos .waste__generation__info.active {
    opacity: 1;
    z-index: 10
}

@media only screen and (max-width: 768px) {
    .waste__generation__infos .waste__generation__info {
        display: none;
        margin-top: 4rem;
        padding-left: 25%;
        position: relative
    }
    .waste__generation__infos .waste__generation__info img {
        left: 0
    }
    .waste__generation__infos .waste__generation__info.active {
        display: block
    }
}

.waste__generation__figure {
    position: relative
}

.waste__generation__figure .cls-1 {
    fill: #f8f0e9
}

.waste__generation__figure .cls-2 {
    fill: #fff
}

.waste__generation__figure .cls-3 {
    fill: #f2e3d6
}

.waste__generation__figure path,
.waste__generation__figure polygon {
    transition: fill 300ms;
    opacity: 1
}

.waste__generation__figure g[id*="section-"]:hover,
.waste__generation__figure g[id*="section-"].active {
    cursor: pointer
}

.waste__generation__figure g[id*="section-"]:hover .cls-1,
.waste__generation__figure g[id*="section-"].active .cls-1 {
    fill: #87b5c0
}

.waste__generation__figure g[id*="section-"]:hover .cls-2,
.waste__generation__figure g[id*="section-"].active .cls-2 {
    fill: #9bd9ea
}

.waste__generation__figure g[id*="section-"]:hover .cls-3,
.waste__generation__figure g[id*="section-"].active .cls-3 {
    fill: #76abb7
}

.waste__generation__figure:before {
    border-radius: 40%/100%;
    background: linear-gradient(0deg, rgba(231, 173, 132, 0), rgba(231, 173, 132, 0.7));
    content: '';
    bottom: 0;
    height: 130%;
    left: 0;
    position: absolute;
    transform: translate(-20%, 55%) rotate(-30deg) skewX(30deg);
    transform-origin: center top;
    width: 80%;
    z-index: -1
}

.waste__collection,
.waste__treatment {
    position: relative
}

.waste__collection p small,
.waste__treatment p small {
    display: block;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: normal;
    margin-top: 4rem;
    text-align: left;
    text-transform: uppercase
}

.waste__collection .waste__form,
.waste__treatment .waste__form {
    left: 0;
    position: absolute;
    top: 0;
    z-index: 100
}

.waste__collection .waste__form .waste__form__title,
.waste__treatment .waste__form .waste__form__title {
    margin-top: 3.3rem;
    margin-bottom: 1rem;
    max-width: 20rem
}

.waste__collection .waste__form .form-item input[type="radio"]+label:before,
.waste__treatment .waste__form .form-item input[type="radio"]+label:before {
    background: transparent;
    border-color: #f1892d
}

.waste__collection .waste__form .form-item input[type="radio"]:checked+label:before,
.waste__treatment .waste__form .form-item input[type="radio"]:checked+label:before {
    background: #f1892d
}

.waste__collection .waste__countries,
.waste__treatment .waste__countries {
    position: absolute;
    right: 0;
    top: 0;
    width: 39%
}

@media only screen and (max-width: 1050px) {
    .waste__collection .waste__countries,
    .waste__treatment .waste__countries {
        position: relative;
        width: 100%
    }
    .waste__collection .waste__countries .waste__materials,
    .waste__treatment .waste__countries .waste__materials {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap
    }
    .waste__collection .waste__countries .waste__materials .waste__material__column,
    .waste__treatment .waste__countries .waste__materials .waste__material__column {
        width: 48%
    }
    .waste__collection .waste__countries .waste__materials .waste__material__column:last-child,
    .waste__treatment .waste__countries .waste__materials .waste__material__column:last-child {
        width: 100%
    }
}

.waste__collection .waste__countries .waste__country,
.waste__treatment .waste__countries .waste__country {
    display: none;
    background: rgba(59, 86, 119, 0.7);
    color: #fff;
    padding: 4rem
}

.waste__collection .waste__countries .waste__country li.active,
.waste__treatment .waste__countries .waste__country li.active {
    color: #fff
}

.waste__collection .waste__countries .waste__country.active,
.waste__treatment .waste__countries .waste__country.active {
    display: block
}

.waste__collection .waste__countries .waste__country-title,
.waste__treatment .waste__countries .waste__country-title {
    margin-top: 0;
    margin-bottom: 2rem
}

.waste__collection .waste__countries .waste__country-close,
.waste__treatment .waste__countries .waste__country-close {
    background: url(../images/cross-narrow.svg) no-repeat center center/contain;
    display: block;
    height: 1.5rem;
    right: 1.5rem;
    position: absolute;
    text-indent: -9999rem;
    top: 1.5rem;
    transform: rotate(90deg);
    transition: transform 150ms;
    width: 1.5rem
}

.waste__collection .waste__countries .waste__country-close:hover,
.waste__treatment .waste__countries .waste__country-close:hover {
    transform: rotate(0deg)
}

.waste__collection .waste__countries .waste__countries__disclaimer,
.waste__treatment .waste__countries .waste__countries__disclaimer {
    font-size: 12px;
    font-style: italic
}

.waste__collection .waste__countries .waste__material__graph__wrapper,
.waste__treatment .waste__countries .waste__material__graph__wrapper {
    margin-bottom: 1rem
}

.waste__collection .waste__countries .waste__material__graph__wrapper p,
.waste__treatment .waste__countries .waste__material__graph__wrapper p {
    font-weight: bold;
    margin-bottom: 0
}

.waste__collection .waste__countries .waste__material__graph__wrapper .material,
.waste__treatment .waste__countries .waste__material__graph__wrapper .material {
    padding-right: 0;
    width: 60%
}

.waste__collection .waste__countries .waste__material__graph__wrapper .material__graph__wrapper,
.waste__treatment .waste__countries .waste__material__graph__wrapper .material__graph__wrapper {
    background: #fff;
    height: 1.5rem
}

.waste__collection .waste__countries .waste__material__graph__wrapper .material__graph__bar,
.waste__treatment .waste__countries .waste__material__graph__wrapper .material__graph__bar {
    background: #3b5677
}

.waste__collection .waste__countries .waste__material__graph__wrapper .material__graph__bar .material__pct,
.waste__treatment .waste__countries .waste__material__graph__wrapper .material__graph__bar .material__pct {
    color: #3b5677
}

.waste__collection .waste__countries .waste__material__graph__wrapper .material__pct,
.waste__treatment .waste__countries .waste__material__graph__wrapper .material__pct {
    color: #f1892d;
    height: 100%;
    transform: translate(110%, 50%);
    width: 100%
}

.waste__collection .waste__material__generated,
.waste__treatment .waste__material__generated {
    font-size: 2rem;
    font-weight: bold
}

.waste__collection .waste__material__generated span,
.waste__treatment .waste__material__generated span {
    font-size: 3.4rem;
    margin-right: .5rem
}

.waste__treatment {
    overflow: hidden
}

.waste__treatment .waste__countries .waste__country {
    background: rgba(241, 137, 45, 0.8);
    color: #fff
}

.waste__treatment .waste__countries .waste__country .waste__material__type {
    min-height: 0
}

@media only screen and (max-width: 768px) {
    .waste__treatment .waste__form {
        position: relative
    }
}

.waste__collection__map {
    position: relative;
    overflow: hidden
}

@media only screen and (max-width: 1050px) {
    .waste__collection__map {
        margin-right: -40%;
        right: 0
    }
}

.waste__collection__map .waste-chart {
    pointer-events: none;
    position: absolute;
    height: 3.5rem;
    width: 3.5rem
}

.waste__collection__map .waste-chart .ct-series-a path {
    fill: #f1892d !important
}

.waste__collection__map .waste-chart .ct-series-b path {
    fill: #fff !important;
    stroke: #e6e6e6
}

.waste__collection__map .waste-chart .ct-label {
    display: none
}

.waste__collection__map .waste-chart[data-country="belgium"] {
    left: 22%;
    top: 58%
}

.waste__collection__map .waste-chart[data-country="bulgaria"] {
    left: 52%;
    top: 76%
}

.waste__collection__map .waste-chart[data-country="czech_republic"] {
    left: 36%;
    top: 60%
}

.waste__collection__map .waste-chart[data-country="denmark"] {
    left: 30%;
    top: 44%
}

.waste__collection__map .waste-chart[data-country="germany"] {
    left: 30%;
    top: 59%
}

.waste__collection__map .waste-chart[data-country="estonia"] {
    left: 46%;
    top: 35%
}

.waste__collection__map .waste-chart[data-country="ireland"] {
    left: 8%;
    top: 49%
}

.waste__collection__map .waste-chart[data-country="greece"] {
    left: 49%;
    top: 85%
}

.waste__collection__map .waste-chart[data-country="spain"] {
    left: 8%;
    top: 84%
}

.waste__collection__map .waste-chart[data-country="france"] {
    left: 18%;
    top: 67%
}

.waste__collection__map .waste-chart[data-country="croatia"] {
    left: 40%;
    top: 71%
}

.waste__collection__map .waste-chart[data-country="italy"] {
    left: 35%;
    top: 80%
}

.waste__collection__map .waste-chart[data-country="cyprus"] {
    left: 68%;
    top: 94%
}

.waste__collection__map .waste-chart[data-country="latvia"] {
    left: 46%;
    top: 39%
}

.waste__collection__map .waste-chart[data-country="lithuania"] {
    left: 45%;
    top: 44%
}

.waste__collection__map .waste-chart[data-country="luxembourg"] {
    left: 25%;
    top: 61%
}

.waste__collection__map .waste-chart[data-country="hungary"] {
    left: 43%;
    top: 66%
}

.waste__collection__map .waste-chart[data-country="malta"] {
    left: 36%;
    top: 95%
}

.waste__collection__map .waste-chart[data-country="netherlands"] {
    left: 24%;
    top: 54%
}

.waste__collection__map .waste-chart[data-country="austria"] {
    left: 34%;
    top: 66%
}

.waste__collection__map .waste-chart[data-country="poland"] {
    left: 40%;
    top: 54%
}

.waste__collection__map .waste-chart[data-country="portugal"] {
    left: 1%;
    top: 82%
}

.waste__collection__map .waste-chart[data-country="romania"] {
    left: 51%;
    top: 68%
}

.waste__collection__map .waste-chart[data-country="slovenia"] {
    left: 36%;
    top: 70%
}

.waste__collection__map .waste-chart[data-country="slovakia"] {
    left: 42%;
    top: 62%
}

.waste__collection__map .waste-chart[data-country="finland"] {
    left: 45%;
    top: 24%
}

.waste__collection__map .waste-chart[data-country="sweden"] {
    left: 34%;
    top: 26%
}

.waste__collection__map .waste-chart[data-country="united_kingdom"] {
    left: 15%;
    top: 51%
}

.treatment__legend {
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    width: 100%
}

@media only screen and (max-width: 768px) {
    .treatment__legend {
        position: relative
    }
}

.treatment__legend .treatment__legend__title {
    font-weight: bold;
    margin-bottom: 1rem
}

.treatment__legend .treatment__legend__title small {
    display: block;
    font-size: 1.4rem;
    font-style: italic;
    font-weight: normal
}

.treatment__legend .treatment__legend__list {
    font-weight: bold;
    margin: 0;
    padding: 0
}

.treatment__legend .treatment__legend__list li {
    list-style: none;
    position: relative;
    padding-left: 4rem
}

@media only screen and (max-width: 768px) {
    .treatment__legend .treatment__legend__list li {
        display: inline-block
    }
}

.treatment__legend .treatment__legend__list li:before {
    background: red;
    content: '';
    height: .8rem;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    width: 3.5rem
}

.treatment__legend .treatment__legend__list li:nth-child(1):before {
    background: #bacadd
}

.treatment__legend .treatment__legend__list li:nth-child(2):before {
    background: #87a2c4
}

.treatment__legend .treatment__legend__list li:nth-child(3):before {
    background: #6588b3
}

.treatment__legend .treatment__legend__list li:nth-child(4):before {
    background: #4c6f99
}

.treatment__legend .treatment__legend__list li:nth-child(5):before {
    background: #3b5677
}

.treatment__legend .treatment__legend__list li:nth-child(6):before {
    background: #2a3d55
}

.waste__materials .waste__material__type {
    font-size: 1.8rem;
    margin-bottom: 1rem
}

.waste__materials .waste__material__column {
    margin-bottom: 2rem
}

.waste__materials ul,
.waste__materials li {
    list-style: none;
    margin: 0;
    padding: 0
}

.waste__materials li {
    color: rgba(255, 255, 255, 0.5);
    display: inline-block;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 2.2rem;
    opacity: 0.5;
    padding-right: 1rem
}

.waste__materials li.active {
    color: #3b5677;
    opacity: 1
}

.waste__countries__clickinfo {
    margin-bottom: 5px;
    padding: 0 0 0 160px
}

.waste__countries__clickinfo small {
    text-align: left
}

.waste__countries__disclaimer {
    font-size: 12px;
    text-align: left;
    opacity: 0.8;
    padding: 0 0 0 160px
}

@media only screen and (max-width: 1200px) {
    #consumption-today .grid {
        display: block
    }
    #consumption-today .grid .column {
        margin: 0;
        width: 100%
    }
}

@media only screen and (max-width: 768px) {
    #waste-collection,
    #waste-treatment {
        overflow: hidden
    }
}

#consumption-tomorrow .section__part.narrow-spacer .section__inner {
    padding-top: 3rem;
    padding-bottom: 3rem
}

#smart-resources {
    background: #accee5
}

@media only screen and (max-width: 1023px) {
    #smart-resources .grid {
        display: block
    }
    #smart-resources .column {
        width: 100%
    }
    #smart-resources .column .column-inner {
        padding-right: 0
    }
}

#definitions .definition-title {
    margin-top: 0
}

#eu-actions .statistics.grid-2 {
    margin: 0 -50px
}

#eu-actions .statistics.grid-2 .statistic {
    padding-right: 82px;
    padding-left: 50px
}

#eu-actions .statistic {
    position: relative
}

#eu-actions .statistic .statistic__title {
    font-size: 4rem
}

#eu-actions .statistic .statistic__subtitle {
    font-size: 2.5rem;
    width: auto
}

#eu-actions .statistic figcaption {
    background: #007535;
    box-shadow: 0.5rem 0 0 #007535, -1rem 0 0 #007535;
    color: #fff;
    display: inline;
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: 1rem;
    padding: .5rem;
    position: relative;
    top: 1rem;
    -webkit-box-decoration-break: clone;
    -ms-box-decoration-break: clone;
    -o-box-decoration-break: clone;
    box-decoration-break: clone
}

#eu-actions .statistic .figure-element {
    width: 10rem;
    height: 12rem;
    margin: 0 0 25px 0;
    position: absolute;
    right: 0;
    top: 0
}

#eu-actions .statistic .figure-element.figure-hammer {
    top: -10px
}

#eu-actions .statistic .figure-element.figure-bin {
    width: 7rem;
    top: -20px
}

#eu-actions .statistic .figure-element.figure-gdp {
    right: -20px
}

#eu-actions .statistic .figure-element.figure-wind {
    width: 5rem;
    top: -10px
}

#eu-actions .statistic .figure-element.figure-bulb {
    width: 5rem;
    right: 20px
}

#eu-actions .statistic .figure-element.figure-arrow {
    width: 8rem;
    top: 10px
}

#eu-actions .statistic .figure-package,
#eu-actions .statistic .figure-plant,
#eu-actions .statistic .figure-waste {
    height: 9rem;
    position: relative
}

#eu-actions .statistic .figure-package .figure__inner,
#eu-actions .statistic .figure-plant .figure__inner,
#eu-actions .statistic .figure-waste .figure__inner {
    float: left;
    height: 100%;
    left: 0;
    margin-right: -2.5rem;
    position: relative;
    width: 9rem;
    z-index: 10
}

#eu-actions .statistic .figure-package img,
#eu-actions .statistic .figure-plant img,
#eu-actions .statistic .figure-waste img {
    height: 100%
}

#eu-actions .actions-illustration {
    margin: 0 0 10rem;
    padding: 250px 0 0 0;
    position: relative;
    z-index: 10
}

@media only screen and (max-width: 1200px) {
    #eu-actions .actions-illustration {
        padding-top: 20px
    }
}

#eu-actions .actions-illustration img {
    display: block;
    width: 100%
}

#eu-actions .actions-illustration:before {
    background: radial-gradient(circle at center center, #c0eecc 0%, rgba(192, 238, 204, 0) 60%);
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1
}

#eu-actions .actions-illustration:after {
    background-image: radial-gradient(#ffffff, rgba(255, 255, 255, 0.8) 2px, rgba(0, 0, 0, 0) 2px), radial-gradient(#ffffff, rgba(255, 255, 255, 0.8) 4px, rgba(0, 0, 0, 0) 4px), radial-gradient(#ffffff, rgba(255, 255, 255, 0.8) 2px, rgba(0, 0, 0, 0) 2px), radial-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1) 3px, rgba(0, 0, 0, 0) 3px);
    background-size: 550px 550px, 450px 450px, 250px 250px, 350px 350px;
    background-position: 0 0, -150px -500px, 130px 270px, 70px 100px;
    content: '';
    height: 50%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1
}

#ambitious-goals {
    background: #afc8b1
}

#ambitious-goals ul {
    padding: 0 0 0 15px;
    margin: 0
}

@media only screen and (max-width: 1200px) {
    #ambitious-goals .grid {
        display: block
    }
    #ambitious-goals .grid .column {
        width: 100%
    }
}

#intro {
    position: relative;
    z-index: 2
}

.section-intro {
    background: #6588b3
}

.section-intro .footnote__icon .custom {
    fill: #3b5677
}

.section-intro .footnote__text {
    background: #3b5677
}

.intro__title {
    color: #2a3d55;
    margin-top: 12rem
}

.intro__graph {
    position: relative
}

.intro__graph__meta {
    bottom: 25%;
    right: 0;
    transform: translate3d(0, 100%, 0);
    position: absolute;
    width: 24rem
}

.intro__graph__meta .graph__meta-info {
    left: 0;
    position: absolute;
    top: 0;
    transform: translate3d(-14rem, 0, 0);
    width: 14rem;
    text-align: left
}

.intro__graph__meta .graph__meta-item {
    display: none
}

.intro__graph__meta .graph__meta-item.active {
    display: block
}

.intro__graph__meta .graph__meta-title {
    margin: 0 0 1rem
}

.intro__graph__meta .graph__meta-desc {
    font-size: 1.4rem;
    font-style: italic;
    line-height: normal
}

.intro__graph__meta .graph__meta-desc a {
    color: inherit
}

.intro__graph__meta .graph__meta-desc .tooltip-wrapper .tooltip-content {
    left: auto;
    right: 0
}

.intro__graph__meta .graph__meta-desc .tooltip-wrapper .tooltip-content:before {
    left: auto;
    right: 2.5rem
}

.intro__graph__form {
    left: 0;
    position: absolute;
    top: 0
}

.intro__graph__form input[type="radio"]:checked+label:before {
    background: #cb4f25
}

@media only screen and (max-width: 1200px) {
    #intro .grid {
        display: block
    }
    #intro .grid .column {
        margin-left: 0;
        width: 100%
    }
}

#outlook {
    background: #fff
}

#outlook .section__inner {
    padding: 0
}

#outlook .column {
    padding-top: 15rem;
    min-height: 70rem
}

#outlook .column:last-child {
    background: #fbf3e8
}

#outlook .column:last-child .column__inner {
    padding-left: 4rem
}

#outlook .addthis_sharing_toolbox {
    margin-bottom: 2.5rem
}

/* #outlook .addthis_sharing_toolbox .addthis_32x32_style .at-share-btn {
    height: 40px;
    width: 40px;
    max-height: 100%;
    max-width: 100%;
    margin: 0 15px
}

#outlook .addthis_sharing_toolbox .addthis_32x32_style .at-share-btn .at-icon-wrapper,
#outlook .addthis_sharing_toolbox .addthis_32x32_style .at-share-btn .at-icon {
    height: 100% !important;
    width: 100% !important
} */

#outlook .ep-link-group {
    width: 100%;
    *zoom: 1
}

#outlook .ep-link-group:after {
    content: "";
    display: table;
    clear: both
}

#outlook .ep-link-group .icon {
    float: left
}

#outlook .icon {
    color: inherit;
    display: inline-block;
    overflow: hidden;
    position: relative;
    text-align: left;
    text-decoration: none;
    width: 7rem;
    margin: 0
}

#outlook .icon:first-child {
    margin-left: 0
}

#outlook .icon img {
    display: block;
    margin: 0;
    width: 100%;
    max-width: 42px
}

#outlook .icon:visited {
    color: inherit
}

#outlook .icon:hover {
    text-decoration: underline
}

#outlook .icon small {
    display: block;
    font-size: 1rem
}

@media only screen and (max-width: 1200px) {
    #outlook .section__part {
        padding-left: 0
    }
    #outlook .grid {
        display: block
    }
    #outlook .grid .column {
        height: auto;
        min-height: 0;
        padding-bottom: 6.26rem;
        padding-top: 6.25rem;
        width: 100%
    }
    #outlook .grid .column .column__inner {
        padding-left: 2rem;
        padding-right: 11rem
    }
}

body {
    background: #fff;
    transition: background 300ms
}

#production-today .material__stock__icon {
    height: 0;
    overflow: hidden;
    padding-top: 84%;
    position: relative
}

#production-today .material__stock__icon video,
#production-today .material__stock__icon img {
    left: 0;
    position: absolute;
    top: 0;
    transform: scale(1.01);
    width: 100%
}

#production-today .material__stock__icon__wrapper {
    max-width: 40rem;
    margin: 0 auto
}

#production-today .material__stock__info {
    font-size: 1.4rem;
    line-height: normal;
    margin-top: 10rem;
    max-width: 16rem
}

#production-today .material__stock__info .material__stock__info__title {
    font-weight: normal;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    text-transform: uppercase
}

#production-today .grid {
    margin-bottom: 10rem
}

#production-today .grid:last-child {
    margin-bottom: 0
}

#production-today .graph__meta__visual-holder {
    position: relative
}

#production-today .graph__meta__visual-holder .graph__meta-info {
    width: 140px;
    text-align: left;
    position: absolute;
    left: 60%;
    top: 90%
}

#production-today .material__stock__form .form-item input[type="radio"]+label:before {
    border-color: #3b5677;
    background: transparent
}

#production-today .material__stock__form .form-item input[type="radio"]:checked+label:before {
    background: #3b5677
}

#production-today .material__stock__form .form-item input[type="radio"][value="cars"]+label:before {
    border-color: #e97142
}

#production-today .material__stock__form .form-item input[type="radio"][value="cars"]:checked+label:before {
    background: #e97142
}

#production-today .material__stock__form .form-item input[type="radio"][value="trucks"]+label:before {
    border-color: #b13c00
}

#production-today .material__stock__form .form-item input[type="radio"][value="trucks"]:checked+label:before {
    background: #b13c00
}

#production-today .material__stock__form .form-item input[type="radio"][value="electrical"]+label:before {
    border-color: #ffa555
}

#production-today .material__stock__form .form-item input[type="radio"][value="electrical"]:checked+label:before {
    background: #ffa555
}

#production-today .material__stock__form .form-item input[type="radio"][value="mechanical"]+label:before {
    border-color: #f88919
}

#production-today .material__stock__form .form-item input[type="radio"][value="mechanical"]:checked+label:before {
    background: #f88919
}

#production-today .material__stock__form .form-item input[type="radio"][value="buildings"]+label:before {
    border-color: #005b9e
}

#production-today .material__stock__form .form-item input[type="radio"][value="buildings"]:checked+label:before {
    background: #005b9e
}

#production-today .material__stock__form .form-item input[type="radio"][value="metal"]+label:before {
    border-color: #ffd154
}

#production-today .material__stock__form .form-item input[type="radio"][value="metal"]:checked+label:before {
    background: #ffd154
}

#production-today .material__stock__form .form-item input[type="radio"][value="packaging"]+label:before {
    border-color: #358248
}

#production-today .material__stock__form .form-item input[type="radio"][value="packaging"]:checked+label:before {
    background: #358248
}

#production-today .material__stock__form .form-item input[type="radio"][value="domestic"]+label:before {
    border-color: #005b1a
}

#production-today .material__stock__form .form-item input[type="radio"][value="domestic"]:checked+label:before {
    background: #005b1a
}

#production-today .material__stock__form .form-item input[type="radio"][value="other"]+label:before {
    border-color: #4cc6f4
}

#production-today .material__stock__form .form-item input[type="radio"][value="other"]:checked+label:before {
    background: #4cc6f4
}

.material__stock__metal {
    padding-bottom: 25%;
    position: relative;
    pointer-events: none
}

@media only screen and (max-width: 1200px) {
    .material__stock__metal {
        padding-bottom: 60%
    }
}

@media only screen and (max-width: 768px) {
    .material__stock__metal {
        padding-bottom: 100%;
        pointer-events: none
    }
}

.material__stock__meta {
    color: #3b5677;
    font-weight: 900;
    width: 22rem
}

.material__stock__meta .material__stock__meta__title {
    font-size: 2.6rem;
    margin-bottom: 1rem
}

.material__labels {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.material__labels .material__label {
    bottom: 0;
    left: 0;
    width: 12rem;
    opacity: 0;
    position: absolute;
    transition: opacity 300ms;
    top: auto
}

.material__labels .material__label.active {
    opacity: 1
}

.material__labels .material__label:before {
    background: #3b5677;
    height: 3rem;
    content: '';
    position: absolute;
    left: 10%;
    top: 0;
    transform: translate(0, -100%);
    width: .2rem
}

.material__labels .material__label .label__number,
.material__labels .material__label .label__title,
.material__labels .material__label .label__pct {
    background: #3b5677;
    color: #fff;
    display: inline-block;
    font-size: 1.4rem;
    font-weight: bold;
    padding: .5rem 1.4rem
}

.material__labels .material__label .label__title {
    display: block
}

.material__labels .material__label .label__pct {
    background: #7bc2d3;
    color: #3b5677
}

.material__stock__steel {
    margin-top: -30%;
    max-width: 41.5rem;
    opacity: 0;
    position: relative;
    transform: translate3d(0, -120%, 0);
    transition: opacity 300ms, transform 300ms
}

@media only screen and (max-width: 1200px) {
    .material__stock__steel {
        margin-top: -60%;
        margin-left: auto;
        margin-right: auto
    }
}

@media only screen and (max-width: 768px) {
    .material__stock__steel {
        margin-top: -95%
    }
}

.material__stock__steel .material__stock__meta {
    bottom: 40%;
    position: absolute;
    right: -10%
}

.material__stock__steel polygon,
.material__stock__steel path {
    pointer-events: none
}

.section__part.active .material__stock__steel {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 300ms, transform 1500ms
}

.material__stock__steel .material__label {
    transform: translate(0, 100%)
}

.material__stock__steel .material__label[data-material="cars"] {
    bottom: 25.1%;
    left: auto;
    transform: translate(75%, 100%);
    right: 0
}

.material__stock__steel .material__label[data-material="cars"] .label__number,
.material__stock__steel .material__label[data-material="cars"] .label__title,
.material__stock__steel .material__label[data-material="cars"]:before {
    background: #e97142
}

.material__stock__steel .material__label[data-material="trucks"] {
    bottom: 23.1%;
    left: auto;
    transform: translate(56%, 100%);
    right: 1%
}

.material__stock__steel .material__label[data-material="trucks"] .label__number,
.material__stock__steel .material__label[data-material="trucks"] .label__title,
.material__stock__steel .material__label[data-material="trucks"]:before {
    background: #b13c00
}

.material__stock__steel .material__label[data-material="electrical"] {
    bottom: 22.1%;
    left: auto;
    transform: translate(48%, 100%);
    right: 1.5%
}

.material__stock__steel .material__label[data-material="electrical"] .label__number,
.material__stock__steel .material__label[data-material="electrical"] .label__title,
.material__stock__steel .material__label[data-material="electrical"]:before {
    background: #ffa555
}

.material__stock__steel .material__label[data-material="mechanical"] {
    bottom: 20.5%;
    left: auto;
    transform: translate(27%, 100%);
    right: 0
}

.material__stock__steel .material__label[data-material="mechanical"] .label__number,
.material__stock__steel .material__label[data-material="mechanical"] .label__title,
.material__stock__steel .material__label[data-material="mechanical"]:before {
    background: #f88919
}

.material__stock__steel .material__label[data-material="infrastructure"] {
    bottom: 16%;
    left: auto;
    right: 5.5%
}

.material__stock__steel .material__label[data-material="infrastructure"] .label__number,
.material__stock__steel .material__label[data-material="infrastructure"] .label__title,
.material__stock__steel .material__label[data-material="infrastructure"]:before {
    background: #004a92
}

.material__stock__steel .material__label[data-material="buildings"] {
    bottom: 8%;
    left: 42%
}

.material__stock__steel .material__label[data-material="buildings"] .label__number,
.material__stock__steel .material__label[data-material="buildings"] .label__title,
.material__stock__steel .material__label[data-material="buildings"]:before {
    background: #005b9e
}

.material__stock__steel .material__label[data-material="metal"] {
    bottom: -1%;
    left: 16%
}

.material__stock__steel .material__label[data-material="metal"] .label__number,
.material__stock__steel .material__label[data-material="metal"] .label__title,
.material__stock__steel .material__label[data-material="metal"]:before {
    background: #ffd154
}

.material__stock__steel .material__label[data-material="packaging"] {
    bottom: -3%;
    left: 10.5%
}

.material__stock__steel .material__label[data-material="packaging"] .label__number,
.material__stock__steel .material__label[data-material="packaging"] .label__title,
.material__stock__steel .material__label[data-material="packaging"]:before {
    background: #358248
}

.material__stock__steel .material__label[data-material="domestic"] {
    bottom: -3.2%;
    left: 8%
}

.material__stock__steel .material__label[data-material="domestic"] .label__number,
.material__stock__steel .material__label[data-material="domestic"] .label__title,
.material__stock__steel .material__label[data-material="domestic"]:before {
    background: #005b1a
}

.material__stock__aluminium {
    bottom: 0;
    position: absolute;
    left: 38%
}

@media only screen and (max-width: 768px) {
    .material__stock__aluminium {
        left: 10%
    }
}

.material__stock__aluminium .material__stock__meta {
    top: -45rem;
    position: absolute;
    left: 20rem
}

.material__stock__aluminium .can-small {
    width: 4rem
}

.material__stock__aluminium .can {
    bottom: 6rem;
    left: 20rem;
    position: absolute;
    width: 15.5rem
}

.material__stock__aluminium .can polygon,
.material__stock__aluminium .can path {
    pointer-events: initial
}

.material__stock__aluminium .can:before,
.material__stock__aluminium .can:after {
    border: 0.1rem dashed #0085c3;
    content: '';
    height: 0;
    position: absolute;
    width: 100%;
    pointer-events: none;
    z-index: -1
}

.material__stock__aluminium .can:before {
    border-radius: 100%;
    left: 50%;
    padding-top: 100%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0) scale(2.4)
}

.material__stock__aluminium .can:after {
    border-bottom: none;
    left: 0;
    transform: translate3d(-13rem, 0, 0) rotate(-33deg) scale(2.4);
    width: 4rem
}

.material__stock__aluminium .material__label {
    bottom: 0;
    left: 38.4rem;
    top: auto
}

.material__stock__aluminium .material__label:before {
    height: .2rem;
    left: 0;
    transform: translate(-100%, 0);
    top: 1.5rem;
    width: 3rem
}

.material__stock__aluminium .material__label[data-material="cars"] {
    top: -22rem
}

.material__stock__aluminium .material__label[data-material="cars"] .label__number,
.material__stock__aluminium .material__label[data-material="cars"] .label__title,
.material__stock__aluminium .material__label[data-material="cars"]:before {
    background: #e97142
}

.material__stock__aluminium .material__label[data-material="trucks"] {
    top: -21rem
}

.material__stock__aluminium .material__label[data-material="trucks"] .label__number,
.material__stock__aluminium .material__label[data-material="trucks"] .label__title,
.material__stock__aluminium .material__label[data-material="trucks"]:before {
    background: #b13c00
}

.material__stock__aluminium .material__label[data-material="electrical"] {
    top: -18rem
}

.material__stock__aluminium .material__label[data-material="electrical"] .label__number,
.material__stock__aluminium .material__label[data-material="electrical"] .label__title,
.material__stock__aluminium .material__label[data-material="electrical"]:before {
    background: #ffa555
}

.material__stock__aluminium .material__label[data-material="mechanical"] {
    top: -16rem
}

.material__stock__aluminium .material__label[data-material="mechanical"] .label__number,
.material__stock__aluminium .material__label[data-material="mechanical"] .label__title,
.material__stock__aluminium .material__label[data-material="mechanical"]:before {
    background: #f88919
}

.material__stock__aluminium .material__label[data-material="buildings"] {
    top: -12.5rem
}

.material__stock__aluminium .material__label[data-material="buildings"] .label__number,
.material__stock__aluminium .material__label[data-material="buildings"] .label__title,
.material__stock__aluminium .material__label[data-material="buildings"]:before {
    background: #005b9e
}

.material__stock__aluminium .material__label[data-material="packaging"] {
    top: -8.5rem
}

.material__stock__aluminium .material__label[data-material="packaging"] .label__number,
.material__stock__aluminium .material__label[data-material="packaging"] .label__title,
.material__stock__aluminium .material__label[data-material="packaging"]:before {
    background: #358248
}

.material__stock__aluminium .material__label[data-material="domestic"] {
    top: -6.5rem
}

.material__stock__aluminium .material__label[data-material="domestic"] .label__number,
.material__stock__aluminium .material__label[data-material="domestic"] .label__title,
.material__stock__aluminium .material__label[data-material="domestic"]:before {
    background: #005b1a
}

.material__stock__aluminium .material__label[data-material="other"] {
    top: -5rem
}

.material__stock__aluminium .material__label[data-material="other"] .label__number,
.material__stock__aluminium .material__label[data-material="other"] .label__title,
.material__stock__aluminium .material__label[data-material="other"]:before {
    background: #4cc6f4
}

.material__supplies__map__wrapper {
    position: relative
}

.material__supplies__map {
    margin: 0
}

.material__supplies__graphs {
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%
}

.material__mapgraph__wrapper {
    left: 0;
    position: absolute;
    top: 0
}

.material__mapgraph__wrapper[data-country="china"] {
    height: 11%;
    left: auto;
    right: 10%;
    top: 35%;
    width: 25%
}

.material__mapgraph__wrapper[data-country="russia"] {
    height: 11%;
    left: auto;
    right: 0;
    top: 11%;
    width: 45%
}

.material__mapgraph__wrapper[data-country="france"] {
    height: 11%;
    left: 26%;
    top: 28%;
    width: 45%
}

.material__mapgraph__wrapper[data-country="turkey"] {
    height: 4%;
    left: 54%;
    top: 39%;
    width: 6%
}

.material__mapgraph__wrapper[data-country="kazakhstan"] {
    height: 4%;
    left: 60%;
    top: 33%;
    width: 13%
}

.material__mapgraph__wrapper[data-country="drc"] {
    height: 9%;
    left: 51%;
    top: 60%;
    width: 5%
}

.material__mapgraph__wrapper[data-country="rwanda"] {
    height: 9%;
    left: 54%;
    top: 58%;
    width: 5%
}

.material__mapgraph__wrapper[data-country="thailand"] {
    height: 11%;
    left: 52%;
    top: 48%;
    width: 45%
}

.material__mapgraph__wrapper[data-country="south-africa"] {
    height: 7%;
    left: 48%;
    top: 80%;
    width: 5%
}

.material__mapgraph__wrapper[data-country="brasil"] {
    height: 16%;
    left: 28%;
    top: 64%;
    width: 9%
}

.material__mapgraph__wrapper[data-country="united-states"] {
    height: 13%;
    left: 12%;
    top: 34%;
    width: 16%
}

.material__supplies__countries .material__supplies__country {
    display: none
}

.material__supplies__countries .material__supplies__country.active {
    display: block
}

.material__mapgraph:nth-child(2n) {
    top: -.8rem
}

.material__mapgraph.theme-1 {
    background: #3b5677
}

.material__mapgraph.theme-2 {
    background: #0085c3
}

.material__mapgraph.theme-3 {
    background: #e62645
}

.material__mapgraph.theme-4 {
    background: #007535
}

.material__mapgraph.theme-5 {
    background: #fbba07
}

.material__mapgraph.theme-6 {
    background: #575756
}

.material__mapgraph.theme-7 {
    background: #e94e1d
}

.material__mapgraph.theme-8 {
    background: #f1892d
}

.material__mapgraph.theme-9 {
    background: #008c9a
}

.material__mapgraph.theme-10 {
    background: #702535
}

.material__mapgraph.theme-11 {
    background: #9b5295
}

.material__mapgraph.theme-12 {
    background: #fef3e8
}

#material-flows {
    background: #a6b4c3
}

@media only screen and (max-width: 1200px) {
    #production-today .grid {
        display: block
    }
    #production-today .grid .column {
        margin: 0;
        width: 100%
    }
}

#production-tomorrow .ct-label {
    font-size: 1rem
}

#production-tomorrow .production__legend {
    font-size: 1.4rem
}

#production-tomorrow .production__legend ul,
#production-tomorrow .production__legend li {
    list-style: none;
    margin: 0;
    padding: 0
}

#production-tomorrow .production__legend li {
    display: inline-block
}

#production-tomorrow .production__legend .production__legend__list {
    display: flex;
    justify-content: space-around
}

#production-tomorrow .production__legend .production__legend__list .chart:before {
    background: #f0f0f0;
    border-radius: .2rem;
    content: '';
    display: inline-block;
    height: .4rem;
    margin-right: 1rem;
    vertical-align: middle;
    width: 2rem
}

#production-tomorrow .production__legend .production__legend__list .chart.chart-1:before {
    background: #007535
}

#production-tomorrow .production__legend .production__legend__list .chart.chart-2:before {
    background: #0085c3
}

#production-tomorrow .production__legend .production__legend__list .chart.chart-3:before {
    background: #fbba07
}

#production-tomorrow .figure-element {
    width: 12rem;
    height: 12rem;
    position: relative;
    margin: 0 0 15px 5px
}

#production-tomorrow .figure-element img {
    margin: 0 auto
}

#production-tomorrow .figure-bulb {
    margin-left: 22%
}

#production-tomorrow .figure-bulb img {
    width: auto;
    height: 100%
}

#production-tomorrow .figure-bulb:before {
    background: linear-gradient(0deg, rgba(29, 30, 28, 0), rgba(29, 30, 28, 0.2));
    border-radius: 30% 30% 0 0;
    content: '';
    bottom: 0;
    height: 40%;
    left: 0;
    position: absolute;
    transform: translate(65%, 85%) rotate(-30deg) skewX(30deg);
    transform-origin: center top;
    width: 40%;
    z-index: -1
}

#production-tomorrow .figure-money:before {
    background: linear-gradient(0deg, rgba(29, 30, 28, 0), rgba(29, 30, 28, 0.2));
    content: '';
    bottom: 0;
    height: 40%;
    left: 0;
    position: absolute;
    transform: translate(150%, 60%) rotate(-30deg) skewX(30deg);
    transform-origin: center top;
    width: 40%;
    z-index: -1
}

#production-tomorrow .figure-greenhouse:before {
    background: linear-gradient(0deg, rgba(29, 30, 28, 0), rgba(29, 30, 28, 0.2));
    content: '';
    bottom: 0;
    height: 40%;
    left: 0;
    position: absolute;
    transform: translate(107%, 87%) rotate(-30deg) skewX(30deg);
    transform-origin: center top;
    width: 50%;
    z-index: -1
}

#production-tomorrow .figure-briefcase {
    width: 16rem
}

#production-tomorrow .figure-piggy {
    width: 16rem;
    top: -2rem
}

#production-tomorrow .figure-logs {
    width: 17rem
}

#production-tomorrow .figure-materials {
    width: 14rem
}

#production-tomorrow .figure-pencil {
    top: 25px
}

#production-tomorrow .figure-pencil:before {
    background: linear-gradient(0deg, rgba(29, 30, 28, 0), rgba(29, 30, 28, 0.2));
    content: '';
    bottom: 0;
    height: 40%;
    left: 0;
    position: absolute;
    transform: translate(-5%, -55%) rotate(-30deg) skewX(30deg);
    transform-origin: center top;
    width: 100%;
    z-index: -1
}

#production-tomorrow .statistic {
    overflow: visible;
    position: relative
}

#longer-lifetime .grid:first-child {
    margin-bottom: 4rem
}

@media only screen and (max-width: 1200px) {
    #production-tomorrow .grid {
        display: block
    }
    #production-tomorrow .grid .column {
        margin: 0;
        width: 100%
    }
    #production-tomorrow #longer-lifetime .grid:first-child {
        margin-bottom: 4rem
    }
    #production-tomorrow #longer-lifetime .longer-lifetime-bulb-intro {
        padding-left: 200px;
        position: relative;
        padding-bottom: 50px
    }
    #production-tomorrow #longer-lifetime .longer-lifetime-bulb-intro .figure-bulb {
        margin: 0;
        position: absolute;
        left: 0;
        top: 0
    }
}

.section {
    box-sizing: border-box;
    min-height: 100%;
    position: relative;
    width: 100%
}

.section .section__part {
    padding-left: 9rem;
    padding-right: 11rem;
    position: relative
}

@media only screen and (max-width: 1023px) {
    .section .section__part {
        padding-left: 2rem
    }
}

.section .section__inner {
    margin: 0 auto;
    max-width: 125rem;
    padding-bottom: 12.5rem;
    padding-top: 12.5rem;
    position: relative
}

@media only screen and (max-width: 768px) {
    .section .section__inner {
        padding-bottom: 9.25rem;
        padding-top: 6.25rem
    }
}


/*# sourceMappingURL=style.css.map */