.mfp-bg
{
        z-index: 1042;
        overflow: hidden;
        background: #0b0b0b;
        opacity: .8
}

.mfp-bg,
.mfp-wrap
{
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: fixed
}

.mfp-wrap
{
        z-index: 1043;
        outline: none !important;
        -webkit-backface-visibility: hidden
}

.mfp-container
{
        text-align: center;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        padding: 0 8px;
        box-sizing: border-box
}

.mfp-container:before
{
        content: "";
        display: inline-block;
        height: 100%;
        vertical-align: middle
}

.mfp-align-top .mfp-container:before
{
        display: none
}

.mfp-content
{
        position: relative;
        display: inline-block;
        vertical-align: middle;
        margin: 0 auto;
        text-align: left;
        z-index: 1045
}

.mfp-ajax-holder .mfp-content,
.mfp-inline-holder .mfp-content
{
        width: 100%;
        cursor: auto
}

.mfp-ajax-cur
{
        cursor: progress
}

.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close
{
        cursor: zoom-out
}

.mfp-zoom
{
        cursor: pointer;
        cursor: zoom-in
}

.mfp-auto-cursor .mfp-content
{
        cursor: auto
}

.mfp-arrow,
.mfp-close,
.mfp-counter,
.mfp-preloader
{
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none
}

.mfp-loading.mfp-figure
{
        display: none
}

.mfp-hide
{
        display: none !important
}

.mfp-preloader
{
        color: #ccc;
        position: absolute;
        top: 50%;
        width: auto;
        text-align: center;
        margin-top: -.8em;
        left: 8px;
        right: 8px;
        z-index: 1044
}

.mfp-preloader a
{
        color: #ccc
}

.mfp-preloader a:hover
{
        color: #fff
}

.mfp-s-error .mfp-content,
.mfp-s-ready .mfp-preloader
{
        display: none
}

button.mfp-arrow,
button.mfp-close
{
        overflow: visible;
        cursor: pointer;
        background: transparent;
        border: 0;
        -webkit-appearance: none;
        display: block;
        outline: none;
        padding: 0;
        z-index: 1046;
        box-shadow: none;
        touch-action: manipulation
}

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

.mfp-close
{
        width: 44px;
        height: 44px;
        line-height: 44px;
        position: absolute;
        right: 0;
        top: 0;
        text-decoration: none;
        text-align: center;
        opacity: .65;
        padding: 0 0 18px 10px;
        color: #fff;
        font-style: normal;
        font-size: 28px;
        font-family: Arial, Baskerville, monospace
}

.mfp-close:focus,
.mfp-close:hover
{
        opacity: 1
}

.mfp-close:active
{
        top: 1px
}

.mfp-close-btn-in .mfp-close
{
        color: #333
}

.mfp-iframe-holder .mfp-close,
.mfp-image-holder .mfp-close
{
        color: #fff;
        right: -6px;
        text-align: right;
        padding-right: 6px;
        width: 100%
}

.mfp-counter
{
        position: absolute;
        top: 0;
        right: 0;
        color: #ccc;
        font-size: 12px;
        line-height: 18px;
        white-space: nowrap
}

.mfp-arrow
{
        position: absolute;
        opacity: .65;
        margin: 0;
        top: 50%;
        margin-top: -55px;
        padding: 0;
        width: 90px;
        height: 110px;
        -webkit-tap-highlight-color: transparent
}

.mfp-arrow:active
{
        margin-top: -54px
}

.mfp-arrow:focus,
.mfp-arrow:hover
{
        opacity: 1
}

.mfp-arrow:after,
.mfp-arrow:before
{
        content: "";
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        left: 0;
        top: 0;
        margin-top: 35px;
        margin-left: 35px;
        border: medium inset transparent
}

.mfp-arrow:after
{
        border-top-width: 13px;
        border-bottom-width: 13px;
        top: 8px
}

.mfp-arrow:before
{
        border-top-width: 21px;
        border-bottom-width: 21px;
        opacity: .7
}

.mfp-arrow-left
{
        left: 0
}

.mfp-arrow-left:after
{
        border-right: 17px solid #fff;
        margin-left: 31px
}

.mfp-arrow-left:before
{
        margin-left: 25px;
        border-right: 27px solid #3f3f3f
}

.mfp-arrow-right
{
        right: 0
}

.mfp-arrow-right:after
{
        border-left: 17px solid #fff;
        margin-left: 39px
}

.mfp-arrow-right:before
{
        border-left: 27px solid #3f3f3f
}

.mfp-iframe-holder
{
        padding-top: 40px;
        padding-bottom: 40px
}

.mfp-iframe-holder .mfp-content
{
        line-height: 0;
        width: 100%;
        max-width: 900px
}

.mfp-iframe-holder .mfp-close
{
        top: -40px
}

.mfp-iframe-scaler
{
        width: 100%;
        height: 0;
        overflow: hidden;
        padding-top: 56.25%
}

.mfp-iframe-scaler iframe
{
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-shadow: 0 0 8px rgba(0, 0, 0, .6);
        background: #000
}

img.mfp-img
{
        width: auto;
        max-width: 100%;
        height: auto;
        display: block;
        box-sizing: border-box;
        padding: 40px 0;
        margin: 0 auto
}

.mfp-figure,
img.mfp-img
{
        line-height: 0
}

.mfp-figure:after
{
        content: "";
        position: absolute;
        left: 0;
        top: 40px;
        bottom: 40px;
        display: block;
        right: 0;
        width: auto;
        height: auto;
        z-index: -1;
        box-shadow: 0 0 8px rgba(0, 0, 0, .6);
        background: #444
}

.mfp-figure small
{
        color: #bdbdbd;
        display: block;
        font-size: 12px;
        line-height: 14px
}

.mfp-figure figure
{
        margin: 0
}

.mfp-bottom-bar
{
        margin-top: -36px;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        cursor: auto
}

.mfp-title
{
        text-align: left;
        line-height: 18px;
        color: #f3f3f3;
        word-wrap: break-word;
        padding-right: 36px
}

.mfp-image-holder .mfp-content
{
        max-width: 100%
}

.mfp-gallery .mfp-image-holder .mfp-figure
{
        cursor: pointer
}

@media screen and (max-height:300px),
screen and (max-width:800px) and (orientation:landscape)
{
        .mfp-img-mobile .mfp-image-holder
        {
                padding-left: 0;
                padding-right: 0
        }

        .mfp-img-mobile img.mfp-img
        {
                padding: 0
        }

        .mfp-img-mobile .mfp-figure:after
        {
                top: 0;
                bottom: 0
        }

        .mfp-img-mobile .mfp-figure small
        {
                display: inline;
                margin-left: 5px
        }

        .mfp-img-mobile .mfp-bottom-bar
        {
                background: rgba(0, 0, 0, .6);
                bottom: 0;
                margin: 0;
                top: auto;
                padding: 3px 5px;
                position: fixed;
                box-sizing: border-box
        }

        .mfp-img-mobile .mfp-bottom-bar:empty
        {
                padding: 0
        }

        .mfp-img-mobile .mfp-counter
        {
                right: 5px;
                top: 3px
        }

        .mfp-img-mobile .mfp-close
        {
                top: 0;
                right: 0;
                width: 35px;
                height: 35px;
                line-height: 35px;
                background: rgba(0, 0, 0, .6);
                position: fixed;
                text-align: center;
                padding: 0
        }
}

@media (max-width:900px)
{
        .mfp-arrow
        {
                transform: scale(.75)
        }

        .mfp-arrow-left
        {
                transform-origin: 0
        }

        .mfp-arrow-right
        {
                transform-origin: 100%
        }

        .mfp-container
        {
                padding-left: 6px;
                padding-right: 6px
        }
}

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

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

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

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

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

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

textarea
{
        resize: vertical
}

.browsehappy
{
        margin: 0;
        background: #ccc;
        color: #000;
        padding: 20px
}

a,
button
{
        color: #fff;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        outline: none
}

*
{
        -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box
}

@media print
{

        *,
        :after,
        :before
        {
                background: transparent !important;
                color: #000 !important;
                box-shadow: none !important;
                text-shadow: none !important
        }

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

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

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

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

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

        thead
        {
                display: table-header-group
        }

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

        img
        {
                max-width: 100% !important
        }

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

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

/*! normalize.scss v0.1.0 | MIT License | based on git.io/normalize */
html
{
        font-family: sans-serif;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%
}

body
{
        margin: 0
}

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

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

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

[hidden],
template
{
        display: none
}

a
{
        background-color: transparent
}

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

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

b,
strong
{
        font-weight: 700
}

dfn
{
        font-style: italic
}

h1
{
        font-size: 2em;
        margin: .67em 0
}

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

small
{
        font-size: 80%
}

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

sup
{
        top: -.5em
}

sub
{
        bottom: -.25em
}

img
{
        border: 0
}

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

figure
{
        margin: 1em 40px
}

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

pre
{
        overflow: auto
}

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

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

button
{
        overflow: visible
}

button,
select
{
        text-transform: none
}

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

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

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

input
{
        line-height: normal
}

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

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

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

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

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

legend
{
        border: 0;
        padding: 0
}

textarea
{
        overflow: auto
}

optgroup
{
        font-weight: 700
}

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

td,
th
{
        padding: 0
}

.hidden
{
        display: none !important;
        visibility: hidden
}

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

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

.invisible
{
        visibility: hidden
}

.clearfix:after,
.clearfix:before,
.cookies-alert:after,
.cookies-alert:before,
.cover__legend:after,
.cover__legend:before,
.cover__nav__list:after,
.cover__nav__list:before,
.nav__list:after,
.nav__list:before
{
        content: " ";
        display: table
}

.clearfix:after,
.cookies-alert:after,
.cover__legend:after,
.cover__nav__list:after,
.nav__list:after
{
        clear: both
}

.clearfix,
.cookies-alert,
.cover__legend,
.cover__nav__list,
.nav__list
{
        *zoom: 1
}

.table-container
{
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
}

.table-container_fixed table
{
        table-layout: fixed
}

.table
{
        display: table;
        width: 100%;
        height: 100%
}

.table__cell
{
        display: table-cell;
        vertical-align: middle
}

.align-center
{
        text-align: center
}

.table-fixed
{
        table-layout: fixed
}

.no-click
{
        pointer-events: none
}

.video-container
{
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
        background: #000
}

.video-container iframe
{
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute
}

.icon
{
        display: inline-block;
        width: 30px;
        height: 30px;
        vertical-align: middle
}

.icon-plus
{
        background: url(../img/icon_plus.png)
}

@media only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min--moz-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2),
only screen and (min-resolution:2dppx),
only screen and (min-resolution:192dpi)
{
        .icon-plus
        {
                background: url(../img/icon_plus%402x.png);
                background-size: cover
        }
}

@media only screen and (-webkit-min-device-pixel-ratio:2.25),
only screen and (min-device-pixel-ratio:2.25),
only screen and (min-resolution:2.25dppx)
{
        .icon-plus
        {
                background: url(../img/icon_plus%403x.png);
                background-size: cover
        }
}

.icon-times
{
        background: url(../img/icon_times.png)
}

@media only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min--moz-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2),
only screen and (min-resolution:2dppx),
only screen and (min-resolution:192dpi)
{
        .icon-times
        {
                background: url(../img/icon_times%402x.png);
                background-size: cover
        }
}

@media only screen and (-webkit-min-device-pixel-ratio:2.25),
only screen and (min-device-pixel-ratio:2.25),
only screen and (min-resolution:2.25dppx)
{
        .icon-times
        {
                background: url(../img/icon_times%403x.png);
                background-size: cover
        }
}

.icon-play
{
        background: url(../img/icon_play.png)
}

@media only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min--moz-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2),
only screen and (min-resolution:2dppx),
only screen and (min-resolution:192dpi)
{
        .icon-play
        {
                background: url(../img/icon_play%402x.png);
                background-size: cover
        }
}

@media only screen and (-webkit-min-device-pixel-ratio:2.25),
only screen and (min-device-pixel-ratio:2.25),
only screen and (min-resolution:2.25dppx)
{
        .icon-play
        {
                background: url(../img/icon_play%403x.png);
                background-size: cover
        }
}

.btn
{
        display: inline-block;
        padding: 6px 15px;
        color: #fff;
        border: none;
        outline: none;
        text-decoration: none;
        line-height: 1.3em
}

.btn_video
{
        position: relative;
        padding-left: 40px
}

.btn_video .btn__icon
{
        position: absolute;
        top: 0;
        left: 0
}

.popup-content
{
        overflow-y: auto
}

.popup-content table td
{
        border: 1px solid #1f364d;
        padding: 8px
}

html
{
        -webkit-font-smoothing: antialiased
}

body,
html
{
        height: 100%
}

body
{
        font-size: 1em;
        font-family: Roboto, serif;
        color: #fff;
        overflow: hidden;
        overflow-y: auto;
        background: #1f364d
}

@media (min-width:48em)
{
        body.body-canvas
        {
                overflow-y: hidden
        }
}

::-webkit-scrollbar
{
        width: 10px;
        border-radius: 5px
}

::-webkit-scrollbar-track
{
        background-color: #1f364d
}

::-webkit-scrollbar-thumb
{
        background-color: rgba(0, 0, 0, .2)
}

::-webkit-scrollbar-button,
::-webkit-scrollbar-corner
{
        background-color: #1f364d
}

.canvas
{
        position: relative;
        background: #1f364d;
        overflow: hidden
}

@media (min-width:48em)
{
        .canvas
        {
                height: 100%
        }
}

.canvas__bg
{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url(../img/bg_cover.jpg) no-repeat 100% 100%;
        background-size: cover;
        opacity: 0
}

.cover
{
        position: relative;
        display: table;
        width: 100%;
        height: 100%;
        text-align: center;
        overflow: hidden
}

.cover__content
{
        display: table-cell;
        padding: 30px 10px 10px;
        vertical-align: middle
}

.cover__title
{
        margin-top: 0;
        font-family: Abril Fatface, cursive;
        font-size: 2.5em;
        line-height: 1.2em;
        overflow: hidden;
        transform: translateY(100%)
}

@media (min-width:48em)
{
        .cover__title
        {
                font-size: 4.375em;
                line-height: 1.3em
        }
}

@media (max-height:670px)
{
        .cover__title
        {
                font-size: 2.5em
        }
}

.cover__title__text
{
        vertical-align: text-bottom;
        transform: translateY(100%)
}

.cover__legend,
.cover__title__text
{
        display: inline-block
}

.cover__legend__item
{
        float: left;
        margin: 0 10px;
        padding: 5px;
        width: 110px;
        font-size: 1.25em;
        text-align: center;
        border-bottom: 4px solid #fff;
        overflow: hidden;
        transform: scaleX(0)
}

@media (min-width:48em)
{
        .cover__legend__item
        {
                font-size: 1.5em;
                width: 120px;
                margin: 0 20px
        }
}

.cover__legend__item_al
{
        border-color: #30f933
}

.cover__legend__item_pvc
{
        border-color: #f4f1bb
}

.cover__legend__item__text
{
        display: inline-block;
        transform: translateY(100%)
}

.cover__text
{
        max-width: 280px;
        margin: 20px auto
}

@media (min-width:48em)
{
        .cover__text
        {
                margin: 30px auto
        }
}

.cover__text span
{
        display: inline-block;
        overflow: hidden;
        vertical-align: text-bottom;
        transform: translateY(100%)
}

.cover__note
{
        font-size: .75em;
        margin: 20px auto 0;
        overflow: hidden
}

@media (min-width:48em)
{
        .cover__note
        {
                margin-top: 30px
        }
}

.cover__note__text
{
        display: inline-block;
        vertical-align: text-bottom
}

.cover__note__text,
.slide
{
        transform: translateY(100%)
}

.slide
{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
        background: #1f364d;
        transition: transform .3s cubic-bezier(.785, .135, .15, .86);
        transition-delay: .3s
}

.slide *
{
        position: relative
}

.slide:before
{
        content: "";
        z-index: 10;
        background: #1f364d;
        transform-origin: center top;
        transition: .3s cubic-bezier(.785, .135, .15, .86);
        transition-delay: .3s
}

.slide:before,
.slide__bg
{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0
}

.slide__bg
{
        opacity: .15;
        transform: translateY(20vh)
}

.slide.slide-1 .slide__bg
{
        background: url(../img/bg_slide_save_short.jpg) no-repeat 50%;
        background-size: cover
}

.slide.slide-2 .slide__bg
{
        background: url(../img/bg_slide_save_long.jpg) no-repeat 50%;
        background-size: cover
}

.slide.slide-3 .slide__bg
{
        background: url(../img/bg_slide_fire.jpg) no-repeat 50%;
        background-size: cover
}

.slide.slide-4 .slide__bg
{
        background: url(../img/bg_slide_toxic.jpg) no-repeat 50%;
        background-size: cover
}

.slide.slide-5 .slide__bg
{
        background: url(../img/bg_slide_durable.jpg) no-repeat 50%;
        background-size: cover
}

.slide.slide-6 .slide__bg
{
        background: url(../img/bg_slide_resist.jpg) no-repeat 50%;
        background-size: cover
}

.slide.slide-7 .slide__bg
{
        background: url(../img/bg_slide_tree.jpg) no-repeat 50%;
        background-size: cover
}

.slide.slide-8 .slide__bg
{
        background: url(../img/bg_slide_recycle.jpg) no-repeat 50%;
        background-size: cover
}

.slide.slide-9 .slide__bg
{
        background: url(../img/bg_slide_steal.jpg) no-repeat 50%;
        background-size: cover
}

.slide.slide-10 .slide__bg
{
        background: url(../img/bg_slide_versatile.jpg) no-repeat 50%;
        background-size: cover
}

.slide.active
{
        transform: translateY(0);
        transition-delay: 0s
}

.slide.active:before
{
        transform: scaleY(0);
        transition-delay: .3s
}

.slide.out:before
{
        transition-delay: 0s
}

.slide__header
{
        position: absolute;
        top: 30px;
        left: 0;
        right: 0;
        text-align: center
}

.slide__title
{
        font-family: Abril Fatface, cursive;
        font-size: 2.25em;
        line-height: 1.2em;
        margin: 10px 0 0
}

.slide__btn-close
{
        display: inline-block;
        transform: scale(0)
}

.slide__btn-close:hover
{
        opacity: .8
}

.slide__btn-close.touch:hover
{
        opacity: 1
}

.slide__btn-close:active
{
        opacity: .5
}

.slide__btn-close__text
{
        display: none
}

.slide__main
{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch
}

@media (min-width:48em)
{
        .slide__main
        {
                bottom: 170px;
                overflow-y: hidden
        }
}

.slide__content
{
        padding: 0 20px 30px;
        text-align: left
}

@media (min-width:48em)
{
        .slide__content
        {
                position: absolute;
                top: 0;
                left: 20px;
                right: 50%;
                bottom: 0;
                padding-bottom: 0;
                overflow: hidden;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch
        }
}

@media (min-width:64em)
{
        .slide__content
        {
                left: 60px;
                right: 40%
        }
}

.slide__content>:first-child
{
        margin-top: 0
}

.slide__content>:last-child
{
        margin-bottom: 0
}

.slide__content>*
{
        font-size: .875em
}

@media (min-width:64em)
{
        .slide__content>*
        {
                font-size: 1em
        }
}

.slide__content .table-cell>*
{
        opacity: 0;
        transform: scaleY(40px)
}

.slide__content__title
{
        position: relative;
        font-family: Abril Fatface, cursive;
        font-size: 2em;
        line-height: 1.2em;
        padding-bottom: 20px;
        margin-top: 0
}

@media (min-width:48em)
{
        .slide__content__title
        {
                font-size: 2.875em
        }
}

.slide__content__title:before
{
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 40px;
        height: 4px;
        background: #fff
}

@media (min-width:48em)
{
        .slide__content__text
        {
                font-size: 1.0625em
        }
}

.slide__content__toggle
{
        display: none
}

.slide__content table
{
        width: 100%;
        border-collapse: collapse;
        font-size: .875em
}

.slide__content td
{
        padding: 5px;
        border: 1px solid #fff
}

.slide__chart
{
        position: relative;
        padding: 30px 20px;
        min-height: 50vh
}

@media (min-width:48em)
{
        .slide__chart
        {
                position: absolute;
                top: 0;
                left: calc(50% + 20px);
                right: 20px;
                bottom: 0;
                min-height: 0
        }
}

@media (min-width:64em)
{
        .slide__chart
        {
                left: calc(60% + 60px);
                right: 60px
        }
}

.slide__chart__bars
{
        position: absolute;
        top: 0;
        left: 20px;
        right: 140px;
        bottom: 30px
}

@media (min-width:48em)
{
        .slide__chart__bars
        {
                bottom: 0
        }
}

.slide__chart__line
{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: hsla(0, 0%, 100%, .15);
        transform: scaleX(0);
        transform-origin: center left
}

.slide__chart__line:nth-child(2)
{
        top: 25%
}

.slide__chart__line:nth-child(3)
{
        top: 50%
}

.slide__chart__line:nth-child(4)
{
        top: 75%
}

.slide__chart__line:nth-child(5)
{
        top: auto;
        bottom: 0
}

.slide__chart__bar
{
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 20vw;
        height: 100%;
        background: #fff;
        transform: scaleY(0);
        transform-origin: center bottom
}

@media (min-width:48em)
{
        .slide__chart__bar
        {
                width: 20%
        }
}

.slide__chart__bar_al
{
        background: #30f933;
        margin-left: -20vw;
        z-index: 10
}

@media (min-width:48em)
{
        .slide__chart__bar_al
        {
                margin-left: -15%
        }
}

.slide__chart__bar_pvc
{
        background: #f4f1bb;
        margin-left: -5%;
        z-index: 5
}

.slide__chart__bar__percent
{
        position: absolute;
        top: 2px;
        color: #1f364d;
        left: 0;
        right: 0;
        text-align: center
}

@media (min-width:48em)
{
        .slide__chart__bar__percent
        {
                top: 10px;
                color: #fff
        }

        .slide__chart__bar__percent_right
        {
                right: -60px;
                left: auto;
                text-align: left
        }

        .slide__chart__bar__percent_left
        {
                left: -60px;
                right: auto;
                text-align: right
        }
}

.slide__chart__title
{
        width: 100px;
        position: absolute;
        top: 0;
        right: 20px;
        text-align: left;
        opacity: 0
}

.slide__chart__legend
{
        position: absolute;
        right: 20px;
        bottom: 30px;
        width: 100px
}

@media (min-width:48em)
{
        .slide__chart__legend
        {
                bottom: 0
        }
}

.slide__chart__legend__item
{
        position: relative;
        line-height: 20px;
        font-weight: 700;
        padding-left: 30px;
        text-align: left;
        font-size: .875em
}

.slide__chart__legend__item:before
{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        height: 20px;
        background: #fff
}

.slide__chart__legend__item_al
{
        margin-bottom: 10px
}

.slide__chart__legend__item_al:before
{
        background: #30f933
}

.slide__chart__legend__item_pvc:before
{
        background: #f4f1bb
}

.cover__nav,
.nav
{
        position: fixed
}

@media (min-width:48em)
{

        .cover__nav,
        .nav
        {
                z-index: 100;
                left: 0;
                right: 0;
                bottom: 0
        }
}

.cover__nav__list,
.nav__list
{
        margin: 0;
        padding: 0;
        list-style: none
}

.cover__nav__item,
.nav__item
{
        float: left;
        width: 33.333333333333336%
}

@media (min-width:48em)
{

        .cover__nav__item,
        .nav__item
        {
                width: 10%
        }
}

.cover__nav__btn,
.nav__btn
{
        display: block;
        padding: 20px 10px;
        text-align: center;
        color: #fff;
        text-decoration: none;
        transition: .15s
}

@media (min-width:48em)
{

        .cover__nav__btn,
        .nav__btn
        {
                padding: 0 10px 30px
        }
}

.cover__nav__btn:hover,
.nav__btn:hover
{
        opacity: .8
}

.cover__nav__btn.touch:hover,
.nav__btn.touch:hover
{
        opacity: 1
}

.cover__nav__btn:active,
.nav__btn:active
{
        opacity: .5
}

.cover__nav__btn__chart,
.nav__btn__chart
{
        position: relative;
        height: 10vh
}

.cover__nav__btn__chart__bar,
.nav__btn__chart__bar
{
        position: absolute;
        bottom: 0;
        left: 50%;
        margin: 0 -5px;
        width: 18px;
        height: 100%;
        transform-origin: bottom center;
        transform: scaleY(0)
}

.cover__nav__btn__chart__bar_al,
.nav__btn__chart__bar_al
{
        background: #30f933;
        margin-left: -12px;
        z-index: 10
}

.cover__nav__btn__chart__bar_pvc,
.nav__btn__chart__bar_pvc
{
        background: #f4f1bb;
        margin-right: -12px;
        z-index: 5
}

.cover__nav__btn__text,
.nav__btn__text
{
        display: block;
        margin: 10px 0;
        font-size: .625em;
        font-weight: 700;
        text-transform: uppercase;
        opacity: 0;
        transform: translateY(60px)
}

@media (min-width:64em)
{

        .cover__nav__btn__text,
        .nav__btn__text
        {
                font-size: .75em
        }
}

.cover__nav__btn__icon,
.nav__btn__icon
{
        vertical-align: bottom;
        transform: scale(0)
}

.cover__nav
{
        position: relative;
        margin: 20px auto;
        z-index: 0
}

@media (min-width:48em)
{
        .cover__nav
        {
                margin: 30px auto
        }
}

.popup-content a
{
        color: #1f364d
}

.mfp-ajax-holder .mfp-content,
.mfp-inline-holder .mfp-content
{
        max-width: 960px
}

.mfp-close
{
        width: 64px;
        height: 64px
}