@charset 'UTF-8';
/*
 * Vars
 */
/*  ------------------------------------------------------
  Colors
------------------------------------------------------  */
/*
 *  ----------------------------------------------------------------------------
 *    Viewport breakpoints
 *  ----------------------------------------------------------------------------
 *
 *  Based on em, 1em for media queries is the browser's default font-size.
 *  In generic preset to 16px / 14pt.
 *
 *  Why do we use em?
 *  http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
 */
/*
 * Extends
 */
/*
 * Mixins
 */
/*  ------------------------------------------------------
   Horizontal Align
  ------------------------------------------------------  */
/*  ------------------------------------------------------
   Vertical Align
  ------------------------------------------------------  */
/*  ------------------------------------------------------
   Horizontal and Vertical Align
  ------------------------------------------------------  */
/*  ------------------------------------------------------
   Classes for using mixins as defined above
  ------------------------------------------------------  */
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
.align--v
{
    top: 50%;

    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}

.align--h
{
    left: 50%;

    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
}

.align--vh
{
    top: 50%;
    left: 50%;

    -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
}

/*
 *    Keyframes mixin
 */
/*
 *    Placeholder
 */
/*
 *    Uni-color SVG
 */
/*
 *    Font mixin - custom shorthand
 */
/*
 *    User select mixin
 *
 *    Default value: `none`.
 */
/*
 *  ----------------------------------------------------------------------------
 *    Viewport mixin
 *  ----------------------------------------------------------------------------
 *
 *
 *  Sample use:
 *
 *  @include viewport('small-min'){ display: none; }
 *  @include viewport('medium'){  display: none; }
 *  @include viewport('large-max'){  display: none; }
 */
/*
 *  ----------------------------------------------------------------------------
 *    Enable-on-{{specific-viewport}} mixin
 *  ----------------------------------------------------------------------------
 *
 *
 *  Mixin to show - and automaticly hide - elements only on one
 *  specific viewports.
 *
 *  Optional param `display` is preset to `block`.
 *
 *
 *  Sample use:
 *
 *  @include enable-on-small();
 *  @include enable-on-medium(inline-block);
 *  @include disable-on-large();
 *  @include disable-on-extra-large();
 */
/* Small variations */
/* Medium variations */
/* Large variations */
/* Extra large variations */
/*
 * Layout
 */
/*
 *  Button styling
 *
 *  This includes mulitple varations.
 *  Code is taken from `BPD 1A / 1B`, thus has a different setup.
 *
 */
.button
{
    font-size: 16px;
    font-weight: 500;
    line-height: 46px;

    position: relative;
    z-index: 0;

    display: inline-block;
    overflow: hidden;

    padding: 0 20px;

    cursor: pointer;
    transition: all 200ms ease-out; 
    text-align: center;
    vertical-align: top;

    opacity: 1;
    color: #fff;
    border: 2px solid #ed9b02;
    background-color: #ed9b02;
}
.button:before
{
    position: absolute;
    z-index: -2;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    content: ''; 

    background-color: #ed9b02;
}
.button:after
{
    position: absolute;
    z-index: -1;
    top: 100%;
    left: 0;

    width: 100%;
    height: 100%;

    content: '';
    transition: all 200ms ease-out; 

    background-color: #fff;
}
.button:hover
{
    text-decoration: none;
}
.button:hover:not(.button-disabled),
.button.active:not(.button-disabled)
{
    color: #ed9b02;
    text-shadow: none;
}
.button:hover:not(.button-disabled):after,
.button.active:not(.button-disabled):after
{
    top: 0;
}
.button.button-full
{
    width: 100%;

    text-align: center;
}
.button.button-small
{
    line-height: 26px;
}
.button.button-right
{
    float: right;
}
.button.color-ghost
{
    color: #fff; 
    border-color: #fff;
    background: transparent;
}
.button.color-ghost:before
{
    background-color: transparent;
}
.button.color-ghost:after
{
    background-color: #fff;
}
.button.color-ghost:hover:not(.button-disabled),
.button.color-ghost.active:not(.button-disabled)
{
    color: #4d4d4d;
}
.button.color-inverted
{
    color: #ed9b02; 
    border-color: #ed9b02;
    background-color: #fff;
}
.button.color-inverted:before
{
    background-color: #fff;
}
.button.color-inverted:after
{
    background-color: #ed9b02;
}
.button.color-inverted:hover:not(.button-disabled),
.button.color-inverted.active:not(.button-disabled)
{
    color: #fff;
}
.button.color-trans
{
    border-color: #fff !important;
    background: none !important;
}
.button.color-trans:before
{
    background: none !important;
}
.button.color-inverted.color-trans
{
    background-color: #fff !important;
}
.button.button-disabled
{
    cursor: not-allowed; 

    color: #fff !important;
    border-color: #e7e7e7 !important;
    background-color: #e7e7e7 !important;
}
.button.button-disabled:before
{
    background-color: #e7e7e7 !important;
}
.button.button-disabled:after
{
    background-color: #fff !important;
}
.button.button-disabled:hover:not(.button-disabled),
.button.button-disabled.active:not(.button-disabled)
{
    color: #e7e7e7 !important;
}
.button.button-disabled.color-inverted
{
    color: #e7e7e7 !important; 
    border-color: #e7e7e7 !important;
    background-color: #fff !important;
}
.button.button-disabled.color-inverted:before
{
    background-color: #fff !important;
}
.button.button-disabled.color-inverted:after
{
    background-color: #e7e7e7 !important;
}
.button.button-disabled.color-inverted:hover:not(.button-disabled),
.button.button-disabled.color-inverted.active:not(.button-disabled)
{
    color: #fff !important;
}
.button.color-secondary
{
    color: #fff; 
    border-color: #b0d148;
    background-color: #b0d148;
}
.button.color-secondary:before
{
    background-color: #b0d148;
}
.button.color-secondary:after
{
    background-color: #fff;
}
.button.color-secondary:hover:not(.button-disabled),
.button.color-secondary.active:not(.button-disabled)
{
    color: #b0d148;
}
.button.color-secondary.color-inverted
{
    color: #b0d148; 
    border-color: #b0d148;
    background-color: #fff;
}
.button.color-secondary.color-inverted:before
{
    background-color: #fff;
}
.button.color-secondary.color-inverted:after
{
    background-color: #b0d148;
}
.button.color-secondary.color-inverted:hover:not(.button-disabled),
.button.color-secondary.color-inverted.active:not(.button-disabled)
{
    color: #fff;
}
.button.color-tertiary
{
    color: #fff; 
    border-color: #32c1de;
    background-color: #32c1de;
}
.button.color-tertiary:before
{
    background-color: #32c1de;
}
.button.color-tertiary:after
{
    background-color: #fff;
}
.button.color-tertiary:hover:not(.button-disabled),
.button.color-tertiary.active:not(.button-disabled)
{
    color: #32c1de;
}
.button.color-tertiary.color-inverted
{
    color: #32c1de; 
    border-color: #32c1de;
    background-color: #fff;
}
.button.color-tertiary.color-inverted:before
{
    background-color: #fff;
}
.button.color-tertiary.color-inverted:after
{
    background-color: #32c1de;
}
.button.color-tertiary.color-inverted:hover:not(.button-disabled),
.button.color-tertiary.color-inverted.active:not(.button-disabled)
{
    color: #fff;
}
.button.color-tertiary-inverted
{
    color: #32c1de; 
    border-color: #32c1de;
    background-color: transparent;
}
.button.color-tertiary-inverted:before
{
    background-color: transparent;
}
.button.color-tertiary-inverted:after
{
    background-color: #32c1de;
}
.button.color-tertiary-inverted:hover:not(.button-disabled),
.button.color-tertiary-inverted.active:not(.button-disabled)
{
    color: #fff;
}
.button.color-tertiary-inverted.color-inverted
{
    color: #fff; 
    border-color: #fff;
    background-color: #32c1de;
}
.button.color-tertiary-inverted.color-inverted:before
{
    background-color: #32c1de;
}
.button.color-tertiary-inverted.color-inverted:after
{
    background-color: #fff;
}
.button.color-tertiary-inverted.color-inverted:hover:not(.button-disabled),
.button.color-tertiary-inverted.color-inverted.active:not(.button-disabled)
{
    color: #32c1de;
}
.button.color-quaternary
{
    color: #fff; 
    border-color: #ed3f3b;
    background-color: #ed3f3b;
}
.button.color-quaternary:before
{
    background-color: #ed3f3b;
}
.button.color-quaternary:after
{
    background-color: #fff;
}
.button.color-quaternary:hover:not(.button-disabled),
.button.color-quaternary.active:not(.button-disabled)
{
    color: #ed3f3b;
}
.button.color-quaternary.color-inverted
{
    color: #ed3f3b; 
    border-color: #ed3f3b;
    background-color: transparent;
}
.button.color-quaternary.color-inverted:before
{
    background-color: transparent;
}
.button.color-quaternary.color-inverted:after
{
    background-color: #ed3f3b;
}
.button.color-quaternary.color-inverted:hover:not(.button-disabled),
.button.color-quaternary.color-inverted.active:not(.button-disabled)
{
    color: #fff;
}
.button.button-facebook
{
    color: #fff; 
    border-color: #44619d;
    background-color: #44619d;
}
.button.button-facebook:before
{
    background-color: #44619d;
}
.button.button-facebook:after
{
    background-color: #fff;
}
.button.button-facebook:hover:not(.button-disabled),
.button.button-facebook.active:not(.button-disabled)
{
    color: #44619d;
}
.button.button-facebook.color-inverted
{
    color: #44619d; 
    border-color: #44619d;
    background-color: #fff;
}
.button.button-facebook.color-inverted:before
{
    background-color: #fff;
}
.button.button-facebook.color-inverted:after
{
    background-color: #44619d;
}
.button.button-facebook.color-inverted:hover:not(.button-disabled),
.button.button-facebook.color-inverted.active:not(.button-disabled)
{
    color: #fff;
}
.button [class*='icon-']
{
    display: inline-block;

    margin: 0 10px;
}

/* Paired holder */
.button-pair button + button,
.button-pair .button + .button
{
    border-left: 0;
}

/*
 *  Align content.
 */
.align--left
{
    text-align: left;
}

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

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

/*
 *  Disable vertical overflow.
 *
 *  Set the height to 100% and disables the overflow,
 *  this way there are no scrollbars whatsoever.
 *
 */
.overflow--none
{
    overflow: hidden;

    height: 100%;
}

/*
 *  Lock item
 *
 *  This disables its overflow.
 *  Like .overflow--none but without (re-)setting the height.
 *
 */
.locked
{
    overflow: hidden;
}

/*
 *  Hidden
 *
 *  Hides the object widht display set to `none`.
 *
 */
.hidden
{
    display: none;
}

/*
 *  Viewport specific
 *
 *  Enable an object to hide or show for a specific viewport.
 *
 */
.hide--small
{
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (max-width: 47.99em)
{
    .hide--small
    {
        display: none;
    }
}

.show--small
{
    display: none;
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (max-width: 47.99em)
{
    .show--small
    {
        display: block;
    }
}

.hide--medium-min
{
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (min-width: 48em)
{
    .hide--medium-min
    {
        display: none;
    }
}

/*
 *  HTML and BODY layout
 */
html,
body
{
    font-family: 'Lato', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
    font-size: 10px;
    font-weight: 300;

    width: 100%;
    min-width: 320px;
    height: 100%;
    margin: 0;
    padding: 0;

    color: #4d4d4d;
    background: #f2f2f2;

    text-rendering: antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (max-width: 47.99em)
{
    html,
    body
    {
        font-size: 8px;
    }
}

body
{
    padding-top: 65px;
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (min-width: 48em)
{
    body
    {
        padding-left: 60px;
    }
}
body.padding--none
{
    padding: 0;
}

/*
 *  Default styling & resets.
 */
*,
*:before,
*:after
{
    box-sizing: border-box;
}

a,
article,
b,
button,
div,
figure,
form,
h1,
h2,
h3,
h4,
h5,
header,
img,
li,
ol,
p,
section,
strong,
span,
svg,
ul
{
    position: relative;

    margin: 0;
    padding: 0;
}

a,
a:hover,
a:active,
a:visited
{
    cursor: pointer;
    text-decoration: none;

    color: inherit; 
    outline: 0;
}

button
{
    cursor: pointer;
    white-space: nowrap; 

    border: none;
    background: none;
}

figure
{
    margin: 0;
}

hr
{
    width: 100%;
    height: 1px;
    margin-top: 0;
    margin-bottom: 40px;

    border: none; 
    background-color: #e7e7e7;
}

img
{
    max-width: 100%;
    max-height: 100%;
}

/*
 *  Google Font - Lato
 */
/*
 *  Form styling
 *
 *  This includes mulitple varations.
 *  Code is taken from `BPD 1A / 1B`, therefor has a different setup.
 *
 */
*:focus
{
    outline: 0;
}

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

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

label,
input,
textarea,
.error
{
    font-size: 14px;
    line-height: 24px;
}

label
{
    display: block;

    margin-bottom: 10px;
}
label a
{
    color: inherit;
    border-bottom: 1px solid #4d4d4d;
}
label.error
{
    margin-bottom: 0;
}

.field-wrapper.field-wrapper-errors
{
    position: fixed;
    z-index: 11;
    top: 65px;
    left: 0;

    display: none;
    overflow: hidden; 

    width: 100%;
    height: 0;
    padding: 0 !important;

    text-align: center;

    background-color: #ed3f3b;
}
.field-wrapper.field-wrapper-errors div
{
    display: inline-block;

    text-align: left;
}
.field-wrapper.field-wrapper-errors div.list-style label:before
{
    display: inline-block;

    width: 5px;
    height: 5px;
    margin-right: 10px;

    content: '';
    vertical-align: middle;

    border-radius: 50%; 
    background-color: #fff;
}
.field-wrapper.field-wrapper-errors div label
{
    font-size: 14px;
    font-weight: inherit;
    line-height: 1;

    margin: 5px 0;
    padding: 0;

    color: #fff;
    color: inherit;
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (min-width: 48em) and (max-width: 63.99em)
{
    .field-wrapper.field-wrapper-errors div label
    {
        font-size: 12.7272727273px;
    }
}
@media (max-width: 47.99em)
{
    .field-wrapper.field-wrapper-errors div label
    {
        font-size: 10.7692307692px;
    }
}
.field-wrapper.field-wrapper-errors div label strong
{
    font-size: 130%;

    margin: auto 1%;
}
.field-wrapper.field-wrapper-errors div label:first-child
{
    margin-top: 10px;
}
.field-wrapper.field-wrapper-errors div label:last-child
{
    margin-bottom: 10px;
}

.field-wrapper.field-wrapper-success
{
    position: fixed;
    z-index: 11;
    top: 65px;
    left: 0;

    width: 100%;
    padding: 0 !important;

    text-align: center; 

    background-color: #b0d148;
}
.field-wrapper.field-wrapper-success div
{
    display: none;

    text-align: left;
}
.field-wrapper.field-wrapper-success div p
{
    font-size: 14px;
    font-weight: inherit;
    line-height: 1;

    margin: 5px 0;
    padding: 0;

    color: #fff;
    color: inherit;
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (min-width: 48em) and (max-width: 63.99em)
{
    .field-wrapper.field-wrapper-success div p
    {
        font-size: 12.7272727273px;
    }
}
@media (max-width: 47.99em)
{
    .field-wrapper.field-wrapper-success div p
    {
        font-size: 10.7692307692px;
    }
}
.field-wrapper.field-wrapper-success div p strong
{
    font-size: 130%;

    margin: auto 1%;
}
.field-wrapper.field-wrapper-success div p:first-child
{
    margin-top: 10px;
}
.field-wrapper.field-wrapper-success div p:last-child
{
    margin-bottom: 10px;
}

form
{
    font-size: 0;
    line-height: 0;
}

.form-wrapper
{
    margin: 0 -10px;
}

.form-padded
{
    padding: 10px;
}

fieldset
{
    font-size: 0;

    width: 100%; 
    margin: 0;
    padding: 0;

    border: 0;
}
.module-fancybox fieldset
{
    margin-bottom: 20px;
}
fieldset:last-child
{
    margin-bottom: 0;
}

textarea
{
    font-size: 14px;
    line-height: 24px;

    display: inline-block;

    width: 100%;
    min-height: 50px;
    margin-bottom: 0;
    padding: 12px;

    resize: none;

    color: #4d4d4d; 
    border: 1px solid #e7e7e7;
    border-radius: 3px;
    background-color: #fff;

    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
textarea::-webkit-input-placeholder
{
    color: #b3b3b3;
}
textarea:-moz-placeholder
{
    color: #b3b3b3;
}
textarea::-moz-placeholder
{
    color: #b3b3b3;
}
textarea:-ms-input-placeholder
{
    color: #b3b3b3;
}
textarea:disabled
{
    cursor: not-allowed; 

    background-color: #f7f7f7;
}

input
{
    font-size: 14px;
    line-height: 24px;

    display: inline-block;

    width: 100%;
    height: 50px;
    margin-bottom: 0;
    padding: 12px;

    color: #4d4d4d; 
    border: 1px solid #e7e7e7;
    border-radius: 3px;
    background-color: #fff;

    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
input::-webkit-input-placeholder
{
    color: #b3b3b3;
}
input:-moz-placeholder
{
    color: #b3b3b3;
}
input::-moz-placeholder
{
    color: #b3b3b3;
}
input:-ms-input-placeholder
{
    color: #b3b3b3;
}
input:disabled
{
    cursor: not-allowed; 

    background-color: #f7f7f7;
}

.field-wrapper
{
    line-height: 1;

    width: 100%;
    padding: 10px 0;
    /*
     *  Variation - has euro infront of input
     */
    /*
     *  Variation - has indent at left side
     */
}
.field-wrapper.before--euro
{
    padding-left: 50px;
}
.field-wrapper.before--euro:before
{
    line-height: 50px;

    position: absolute;
    top: 10px;
    left: 0;

    width: 50px;

    content: '€';
    text-align: center;
}
.field-wrapper.indent--left
{
    width: calc(100% - 40px);
    margin-left: 40px;
}

.field-wrapper.width-half
{
    display: inline-block; 

    width: 50%;
}

.field-wrapper.width-half + .field-wrapper.width-half
{
    width: 49%;
}

.field-wrapper.width-third
{
    display: inline-block;

    width: 33%;
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (max-width: 47.99em)
{
    .field-wrapper.width-third
    {
        width: 100%;
    }
}
.field-wrapper.width-third:nth-of-type(2)
{
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (min-width: 48em)
{
    .field-wrapper.width-third:nth-of-type(2)
    {
        padding: 0 5px;
    }
}

.field-wrapper-col-2
{
    display: inline-block;

    width: 100%;
    padding: 10px 0;

    vertical-align: bottom;
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (min-width: 48em)
{
    .field-wrapper-col-2
    {
        width: 50%;
        padding: 10px 10px 10px 0;
    }
}
.field-wrapper-col-2 + .field-wrapper-col-2
{
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (min-width: 48em)
{
    .field-wrapper-col-2 + .field-wrapper-col-2
    {
        padding-right: 0; 
        padding-left: 10px;
    }
}

.field-wrapper-col-3
{
    display: inline-block;

    width: 100%;
    padding: 10px 0;

    vertical-align: bottom;
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (min-width: 48em)
{
    .field-wrapper-col-3
    {
        width: 33.3333333333%;
    }
}

.field-wrapper-two-third
{
    display: inline-block;

    width: 66.6666666667%; 
    padding: 10px 0;

    vertical-align: bottom;
}

.field-wrapper-one-third
{
    display: inline-block;

    width: 33.3333333333%; 
    padding: 10px 0;

    vertical-align: bottom;
}

.field-wrapper-fixed
{
    font-size: 0;
}

.error
{
    color: #ed3f3b !important;
}
.error::-webkit-input-placeholder
{
    color: #ed3f3b !important;
}
.error:-moz-placeholder
{
    color: #ed3f3b !important;
}
.error::-moz-placeholder
{
    color: #ed3f3b !important;
}
.error:-ms-input-placeholder
{
    color: #ed3f3b !important;
}

.styled-select
{
    position: relative;

    display: inline-block;
    overflow: hidden;

    height: 50px;
    margin-bottom: 0;

    border: 1px solid #e7e7e7;
    border-radius: 3px;
    background-color: #fff;
}
.styled-select.full
{
    width: 100%;
}
.styled-select:before
{
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;

    width: 50px;
    height: 50px;

    content: '';
}
.styled-select:after
{
    font-family: 'bpd-gebieds-iconfont';
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 50px;

    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;

    width: 50px;
    height: 50px;

    content: '\e81D'; 
    text-align: center;
    text-decoration: none;
    text-transform: none;
    pointer-events: none;

    color: #b3b3b3;

    speak: none;
    /* Better Font Rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.styled-select select
{
    font-size: 14px;
    line-height: 24px;
    line-height: 30px;

    position: relative;
    z-index: 1;

    width: 100%;
    height: 50px;
    padding: 4px 48px 4px 10px;

    cursor: pointer;

    color: #b3b3b3;
    border: 0;
    border-radius: 0;
    outline: none; 
    background: transparent;

    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
.ie9 .styled-select select
{
    width: 150%;
}
.styled-select select:disabled
{
    cursor: not-allowed; 

    background-color: #f7f7f7;
}
.styled-select select::-ms-expand
{
    display: none;
}
.styled-select .placeholder
{
    color: #b3b3b3;
}
.styled-select .option
{
    color: #4d4d4d;
}

input[type='checkbox'],
input[type='radio']
{
    position: absolute;
    top: 0;
    left: 0;

    overflow: hidden; 

    width: 0;
    height: 0;

    opacity: 0;
}

input[type='checkbox'] + label,
input[type='radio'] + label
{
    line-height: 30px; 

    position: relative;

    display: inline-block;

    margin-top: 0;
    margin-bottom: 0;
    padding: 10px 40px;

    cursor: pointer;
    vertical-align: top;
}
input[type='checkbox'] + label:before,
input[type='radio'] + label:before
{
    position: absolute;
    top: calc(50% - 15px);
    left: 0;

    width: 30px;
    height: 30px;
    margin: 0 4px 0 0;

    content: ''; 
    cursor: pointer;

    color: #b0d148;
    border: 1px solid #e7e7e7;
    background-color: #fff;
    background-position: 0 0;
}

input[type='radio'] + label:before
{
    border-radius: 50%;
}

input[type='checkbox'] + label:before
{
    border-radius: 3px;
}

input[type='checkbox']:checked + label:before
{
    font-family: 'bpd-gebieds-iconfont';
    font-size: 24px;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 31px;

    content: '\e806'; 
    text-align: center;
    text-decoration: none;
    text-transform: none;

    speak: none;
    /* Better Font Rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

input[type='radio']:checked + label:after
{
    position: absolute;
    top: calc(50% - 7px);
    left: 8px;

    width: 14px;
    height: 14px;

    content: ''; 

    border-radius: 50%;
    background-color: #b0d148;
}

input[type='checkbox'].error + label:before
{
    box-shadow: 0 0 0 1px #ed3f3b;
}

input[type='radio'].error + label:before
{
    box-shadow: 0 0 0 1px #ed3f3b;
}

input[type='checkbox'].error:checked + label:before
{
    font-family: 'bpd-gebieds-iconfont';
    font-size: 24px;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 31px;

    content: '\e806'; 
    text-align: center;
    text-decoration: none;
    text-transform: none;

    speak: none;
    /* Better Font Rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

input[type='radio'].error:checked + label:before
{
    background-position: -90px -60px;
}

/*
 *  The main container of the site / grid.
 *
 */
.container--main
{
    z-index: 0; 

    min-height: 100%;
    padding-bottom: 80px;
}
.container--main.has-footer
{
    padding-bottom: 0;
}

/*
 *  Grid sizes
 *
 *  List with usable variables.
 */
/*
 *  Grid content holder
 *
 *  Full width element which contains all grid objects.
 */
.grid__holder
{
    font-size: 0; 

    display: block;
    overflow: hidden;

    width: 100%;
    max-width: 940px;
    min-height: 100%;
    margin: 0 auto;
    padding-right: 12px;
    padding-left: 12px;

    text-align: center;
}

/*
 *  Grid column - default
 *
 *  Default styling for all columns
 */
[class*='grid__col--']
{
    font-size: 14px; 

    display: inline-block;

    width: 100%;
    margin: 0 auto;

    text-align: left;
    vertical-align: top;
}
[class*='grid__col--'].align--center
{
    text-align: center;
}
[class*='grid__col--'].align--left
{
    text-align: left;
}
[class*='grid__col--'].align--right
{
    text-align: right;
}

/*
 *  Grid column - `fixed`
 *
 *  Column with full width.
 */
.grid__col--fixed
{
    width: 100%;
}

/*
 *  Grid column - `two one`
 *
 *  Column with 1/2 width
 */
.grid__col--two-one
{
    width: calc(100% / 2);
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
.grid__col--two-one:nth-of-type(2n+1)
{
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (min-width: 48em)
{
    .grid__col--two-one:nth-of-type(2n+1)
    {
        padding-right: 10px;
    }
}
.grid__col--two-one:nth-of-type(2n+2)
{
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (min-width: 48em)
{
    .grid__col--two-one:nth-of-type(2n+2)
    {
        padding-left: 10px;
    }
}
@media (max-width: 47.99em)
{
    .grid__col--two-one
    {
        width: 100%;
    }
}

/*
 *  Grid column - `three one`
 *
 *  Column with 1/3 width
 */
.grid__col--three-one
{
    width: calc(100% / 3);
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (max-width: 47.99em)
{
    .grid__col--three-one
    {
        width: 100%;
    }
}
.grid__col--three-one:nth-of-type(3n+1)
{
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (min-width: 48em)
{
    .grid__col--three-one:nth-of-type(3n+1)
    {
        padding-right: calc(20px / 3 * 2);
    }
}
.grid__col--three-one:nth-of-type(3n+2)
{
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (min-width: 48em)
{
    .grid__col--three-one:nth-of-type(3n+2)
    {
        padding-right: calc(20px / 3); 
        padding-left: calc(20px / 3);
    }
}
.grid__col--three-one:nth-of-type(3n+3)
{
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (min-width: 48em)
{
    .grid__col--three-one:nth-of-type(3n+3)
    {
        padding-left: calc(20px / 3 * 2);
    }
}

/*
 *  Grid column - `three one`
 *
 *  Column with 2/3 width
 */
.grid__col--three-two
{
    width: calc(100% * 2/3);
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (max-width: 47.99em)
{
    .grid__col--three-two
    {
        width: 100%;
    }
}
@media (min-width: 48em)
{
    .grid__col--three-two
    {
        padding-left: calc(20px * 2/3);
    }
}

/*
 *  Grid column - `four one`
 *
 *  Column with 1/4 width
 */
.grid__col--four-one
{
    width: calc(100% / 4);
}

.grid__col--four-two
{
    width: calc(100% / 2);
}

/*
 *  Padding size - none
 *
 *  Variation without padding left and right.
 */
.padding--none
{
    padding-right: 0; 
    padding-left: 0;
}

/*
 *  Padding size - big
 *
 *  Variation for a bigger padding left and right, usually used with text.
 */
.padding--large
{
    padding-right: 42px; 
    padding-left: 42px;
}

/*
 *  Grid common childs
 */
.grid-list__title
{
    font-size: 16px;
    font-weight: 300;
    line-height: 20px;

    margin-top: 50px;

    color: #9e9e9e;
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (min-width: 48em) and (max-width: 63.99em)
{
    .grid-list__title
    {
        font-size: 14.5454545455px;
    }
}
@media (max-width: 47.99em)
{
    .grid-list__title
    {
        font-size: 12.3076923077px;
    }
}
.grid-list__title strong
{
    font-size: 130%;

    margin: auto 1%;
}
.grid-list__title.grid__col--two-one
{
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (min-width: 20em)
{
    .grid-list__title.grid__col--two-one
    {
        width: 50%;
    }
}
.grid-list__title a
{
    color: inherit;
}

.grid-list__cta-more
{
    font-size: 16px;
    font-weight: 300;
    line-height: 20px;

    margin-top: 50px;

    text-align: right;

    color: #32c1de;
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (min-width: 48em) and (max-width: 63.99em)
{
    .grid-list__cta-more
    {
        font-size: 14.5454545455px;
    }
}
@media (max-width: 47.99em)
{
    .grid-list__cta-more
    {
        font-size: 12.3076923077px;
    }
}
.grid-list__cta-more strong
{
    font-size: 130%;

    margin: auto 1%;
}
.grid-list__cta-more.grid__col--two-one
{
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (min-width: 20em)
{
    .grid-list__cta-more.grid__col--two-one
    {
        width: 50%;
    }
}
.grid-list__cta-more a
{
    color: inherit;
}

.grid__module-title
{
    font-size: 16px;
    font-weight: 300;
    line-height: 20px;

    margin: 25px 0;

    text-align: left;

    color: #9e9e9e;
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (min-width: 48em) and (max-width: 63.99em)
{
    .grid__module-title
    {
        font-size: 14.5454545455px;
    }
}
@media (max-width: 47.99em)
{
    .grid__module-title
    {
        font-size: 12.3076923077px;
    }
}
.grid__module-title strong
{
    font-size: 130%;

    margin: auto 1%;
}
.grid__module-title a
{
    color: inherit;
}

/*
 *  Icon font
 *
 *  Made with fontello.com
 *  The config.json is located in the fonts folder,
 *  with which you are able to expand the font when needed.
 */
.icon-number
{
    font-size: 11px !important;
    line-height: 15px;

    position: absolute;
    z-index: 3;
    top: 5px;
    left: 41px;

    width: 14px;
    height: 14px;

    text-align: center; 

    color: #4d4d4d;
    border-radius: 50%;
    background-color: #f2f2f2;
}

@font-face
{
    font-family: 'bpd-gebieds-iconfont';
    font-weight: normal;
    font-style: normal; 

    src: url('fonts/bpd-gebieds-iconfont.eot?-2mk49r');
    src: url('fonts/bpd-gebieds-iconfont.svg?-2mk49r#bpd-gebieds-iconfont') format('svg'), url('fonts/bpd-gebieds-iconfont.eot?#iefix-2mk49r') format('embedded-opentype'), url('fonts/bpd-gebieds-iconfont.woff?-2mk49r') format('woff'), url('fonts/bpd-gebieds-iconfont.ttf?-2mk49r') format('truetype');
}

[class^='icon-'],
[class*=' icon-']
{
    font-family: 'bpd-gebieds-iconfont';
    font-weight: normal;
    font-style: normal;
    font-variant: normal;

    text-decoration: none;
    text-transform: none;

    speak: none;
    /* Better Font Rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a [class^='icon-']:before,
a [class*=' icon-']:before
{
    text-decoration: none;
}

.icon-close:before
{
    content: '\e601';
}

.icon-menu:before
{
    content: '\e602';
}

.icon-location:before
{
    content: '\e80E';
}

.icon-search:before
{
    content: '\e60c';
}

.icon-twitter:before
{
    content: '\e60d';
}

.icon-pinterest:before
{
    content: '\e804';
}

.icon-login:before
{
    content: '\e818';
}

.icon-question:before
{
    content: '\e81a';
}

.icon-download:before
{
    content: '\e81b';
}

.icon-documents:before
{
    content: '\e846';
}

.icon-updates:before
{
    content: '\e847';
}

.icon-like:before
{
    content: '\e81c';
}

.icon-pdf:before
{
    content: '\e803';
}

.icon-arrow-left:before
{
    content: '\e605';
}

.icon-arrow-right:before
{
    content: '\e607';
}

.icon-arrow-down:before
{
    content: '\e809';
}

.icon-arrow-up:before
{
    content: '\e608';
}

.icon-select-down:before
{
    content: '\e81D';
}

.icon-arrow-left-thin:before
{
    content: '\e814';
}

.icon-arrow-right-thin:before
{
    content: '\e816';
}

.icon-arrow-up-thin:before
{
    content: '\e824';
}

.icon-arrow-down-thin:before
{
    content: '\e823';
}

.icon-select-up:before
{
    content: '\e81E';
}

.icon-facebook:before
{
    content: '\e819';
}

.icon-calendar:before
{
    content: '\e817';
}

.icon-education:before
{
    content: '\e805';
}

.icon-transport:before
{
    content: '\e812';
}

.icon-shopping:before
{
    content: '\e811';
}

.icon-drinking:before
{
    content: '\e80F';
}

.icon-playing:before
{
    content: '\e80D';
}

.icon-care:before
{
    content: '\e807';
}

.icon-nature:before
{
    content: '\e810';
}

.icon-move:before
{
    content: '\e813';
}

.icon-plus:before
{
    content: '\e80B';
}

.icon-minus:before
{
    content: '\e820';
}

.icon-plus-thin:before
{
    content: '\e841';
}

.icon-minus-thin:before
{
    content: '\e840';
}

.icon-mail:before
{
    content: '\e822';
}

.icon-house:before
{
    content: '\e808';
}

.icon-marker:before
{
    content: '\e80E';
}

.icon-house-hart:before
{
    content: '\e821';
}

.icon-dashboard:before
{
    content: '\e81f';
}

.icon-cart:before
{
    content: '\e811';
}

.icon-village:before
{
    content: '\e825';
}

.icon-city:before
{
    content: '\e82F';
}

.icon-daycare:before
{
    content: '\e837';
}

.icon-schools:before
{
    content: '\e831';
}

.icon-host-family:before
{
    content: '\e83C';
}

.icon-transport-bus:before
{
    content: '\e82A';
}

.icon-transport-tram-metro:before
{
    content: '\e82E';
}

.icon-transport-train:before
{
    content: '\e82D';
}

.icon-transport-highway:before
{
    content: '\e826';
}

.icon-transport-ferry:before
{
    content: '\e82C';
}

.icon-atm:before
{
    content: '\e834';
}

.icon-party:before
{
    content: '\e83E';
}

.icon-restaurant:before
{
    content: '\e832';
}

.icon-recreation-water:before
{
    content: '\e82B';
}

.icon-sport:before
{
    content: '\e830';
}

.icon-marina:before
{
    content: '\e838';
}

.icon-golf:before
{
    content: '\e83B';
}

.icon-water:before
{
    content: '\e833';
}

.icon-park:before
{
    content: '\e836';
}

.icon-forest:before
{
    content: '\e829';
}

.icon-hospital:before
{
    content: '\e83A';
}

.icon-gp:before
{
    content: '\e839';
}

.icon-fysio:before
{
    content: '\e83D';
}

.icon-elderly:before
{
    content: '\e828';
}

.icon-space:before
{
    content: '\e843';
}

.icon-rooms:before
{
    content: '\e844';
}

.icon-outside:before
{
    content: '\e845';
}

.icon-favorite:before
{
    content: '\e842';
}

.icon-heart-rounded:before
{
    content: '\e848';
}

.icon-sharing:before
{
    content: '\e849';
}

.icon-email:before
{
    content: '\e84A';
}

.icon-fullscreen:before
{
    content: '\e84B';
}

.icon-compass:before
{
    content: '\e84C';
}

.icon-plan:before
{
    content: '\E84D';
}

.icon-outside-view:before
{
    content: '\E84E';
}

.icon-tick:before
{
    font-size: 18px; 

    content: '\E806';
}

.icon-filter:before
{
    content: '\E84F';
}

.icon-grid-view:before
{
    content: '\E850';
}

.icon-list-view:before
{
    content: '\E851';
}

.icon-floors:before
{
    content: '\E852';
}

.icon-parking:before
{
    content: '\E853';
}

.icon-sunrise:before
{
    content: '\E854';
}

.icon-drag:before
{
    content: '\E855';
}

.icon-chart:before
{
    content: '\E85E';
}

/*
 *  Default links with variations
 */
[class*='link--']
{
    font-size: 16px;
    font-weight: 500;
    line-height: 46px;

    display: inline-block;

    cursor: pointer;
    text-align: center;
    vertical-align: top;

    color: #fff;
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (min-width: 48em) and (max-width: 63.99em)
{
    [class*='link--']
    {
        font-size: 14.5454545455px;
    }
}
@media (max-width: 47.99em)
{
    [class*='link--']
    {
        font-size: 12.3076923077px;
    }
}
[class*='link--'] strong
{
    font-size: 130%;

    margin: auto 1%;
}

/* Link colored quaternary */
.link--color-quaternary
{
    color: #ed3f3b;
    border-bottom: 2px solid transparent;
}
.link--color-quaternary:hover
{
    border-bottom: 2px solid #ed3f3b;
}

.container--popup
{
    position: fixed;
    z-index: 900;
    top: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 100%;

    pointer-events: none;
}

/*
 *  Default popup styling
 */
.container--popup [class*='module--popup']
{
    display: none;
}

[class*='module--popup']
{
    font-size: 0; 

    display: inline-block;

    width: 100%;
    height: 100%;

    text-align: center;
    vertical-align: middle;
    pointer-events: all;
}
[class*='module--popup'].status--open
{
    display: table;
}

.popup__wrapper
{
    font-size: 0; 

    display: inline-block;
    display: table-cell;

    vertical-align: middle;
}

.popup__underlay
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, .75);
}

.popup__tile
{
    font-size: 0;
    line-height: 0; 

    position: relative;

    display: inline-block;
    overflow: hidden;

    vertical-align: top;
    white-space: normal;

    background-color: #f2f2f2;
}

.popup__tiles
{
    font-size: 0; 

    display: inline-block;
    overflow: hidden;

    width: 100%;

    white-space: nowrap;
}

.tile__header
{
    z-index: 1;

    width: 100%;
    height: 65px;
    padding: 15px 50px;

    background-color: #fff;
    box-shadow: 0 0 0 1px #f2f2f2;
}
.tile__header h2
{
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;

    overflow: hidden;

    max-width: 100%;
    margin-top: 5px;

    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;

    color: inherit;
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (min-width: 48em) and (max-width: 63.99em)
{
    .tile__header h2
    {
        font-size: 16.3636363636px;
    }
}
@media (max-width: 47.99em)
{
    .tile__header h2
    {
        font-size: 13.8461538462px;
    }
}
.tile__header h2 strong
{
    font-size: 130%;

    margin: auto 1%;
}
.tile__header .header__cta-close
{
    line-height: 65px;

    position: absolute;
    top: 0;
    right: 0;

    width: 70px;
    height: 65px;

    cursor: pointer; 
    text-align: center;
}
.tile__header .header__cta--prev
{
    line-height: 65px;

    position: absolute;
    top: 0;
    left: 0;

    width: 70px;
    height: 65px;

    cursor: pointer; 
    text-align: center;
}
.tile__header .header__cta--prev:before
{
    font-size: 16px;
}

.tile__content
{
    position: relative;

    overflow: auto;

    max-height: calc(100vh - 65px);

    text-align: left;
}

.tile__header__prev
{
    line-height: 65px; 

    position: absolute;
    z-index: 8040;
    top: 0;
    left: 0;

    width: 65px;
    height: 65px;

    cursor: pointer;
    text-align: center;
    text-decoration: none;
}
.tile__header__prev:after
{
    font-family: 'bpd-gebieds-iconfont';
    font-size: 18px;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;

    margin-left: -7px;

    content: '\e605';
    text-decoration: none;
    text-transform: none;

    color: #4d4d4d;

    speak: none;
    /* Better Font Rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.popup__tile
{
    font-size: 14px;
    line-height: 1;

    overflow: hidden;

    width: 100%;

    transition: left 450ms cubic-bezier(.77, 0, .175, 1); 

    -webkit-overflow-scrolling: touch;
}

/*
 * Elements
 */
/*
 *  BUTTONS
 */
/* block button */
a.e--button--block,
button.e--button--block
{
    font-size: 2rem;
    font-weight: 400;
    line-height: 6rem;

    display: inline-block;

    margin: 30px auto 0 auto;
    padding: 0 45px;

    transition: background 150ms ease-out;
    white-space: nowrap;

    color: #fff;
    border-radius: 5px;
    background: #f3991f;
    box-shadow: 0 2px 0 0 #d47f0d;
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (min-width: 48em) and (max-width: 63.99em)
{
    a.e--button--block,
    button.e--button--block
    {
        font-size: 1.8181818182rem;
    }
}
@media (max-width: 47.99em)
{
    a.e--button--block,
    button.e--button--block
    {
        font-size: 1.5384615385rem;
    }
}
a.e--button--block strong,
button.e--button--block strong
{
    font-size: 130%;

    margin: auto 1%;
}
a.e--button--block:hover,
button.e--button--block:hover
{
    background: #d47f0d;
}

/* ghoty button */
a.e--button--ghost,
button.e--button--ghost
{
    font-size: 2rem;
    font-weight: 400;
    line-height: 2.5rem;

    display: inline-block;

    margin: 30px auto 0 auto;
    padding: 18px 45px;

    transition: background 150ms ease-out;
    white-space: nowrap;

    color: #fff;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 2px #fff;
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (min-width: 48em) and (max-width: 63.99em)
{
    a.e--button--ghost,
    button.e--button--ghost
    {
        font-size: 1.8181818182rem;
    }
}
@media (max-width: 47.99em)
{
    a.e--button--ghost,
    button.e--button--ghost
    {
        font-size: 1.5384615385rem;
    }
}
a.e--button--ghost strong,
button.e--button--ghost strong
{
    font-size: 130%;

    margin: auto 1%;
}
a.e--button--ghost:hover,
button.e--button--ghost:hover
{
    background: rgba(255, 255, 255, .4);
}

/*
 * Modules
 */
html.infographic,
html.infographic body
{
    width: 100%;
    min-width: 960px;
    height: 100%;
    margin: 0;
    padding: 0;
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (max-width: 47.99em)
{
    html.infographic,
    html.infographic body
    {
        font-size: 10px;
    }
}

.m--infographic
{
    /* ITEM DATA */
}
.m--infographic .infographic__wrapper
{
    display: block;
}
.m--infographic .infographic__item
{
    position: relative;

    width: 100%;
    min-width: 800px;
}
.m--infographic .item__visual
{
    display: block;
}
.m--infographic .visual__center,
.m--infographic .visual__left,
.m--infographic .visual__repeat
{
    position: absolute;
    top: 0;
    left: 0;
    left: 0;

    width: 100%;
    height: 100%;
}
.m--infographic .visual__center
{
    background-repeat: no-repeat; 
    background-position: center top;
}
.m--infographic .visual__left
{
    left: 0;

    background-repeat: no-repeat; 
    background-position: left top;
}
.m--infographic .visual__repeat
{
    background-repeat: repeat-x; 
    background-position: left top;
}
.m--infographic .item__title
{
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.333;

    display: block;

    padding: 105px 0 0 0;

    text-align: center;

    color: #003580;
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (min-width: 48em) and (max-width: 63.99em)
{
    .m--infographic .item__title
    {
        font-size: 2.7272727273rem;
    }
}
@media (max-width: 47.99em)
{
    .m--infographic .item__title
    {
        font-size: 2.3076923077rem;
    }
}
.m--infographic .item__title strong
{
    font-size: 130%;

    margin: auto 1%;
}
.m--infographic .item__title img
{
    display: block;

    margin: 0 auto 20px auto;
}
.m--infographic .item__title span
{
    color: #f7a81e;
}
.m--infographic .item__title.color--invert
{
    color: #f7a81e;
}
.m--infographic .item__title.color--invert span
{
    color: #009fe3;
}
.m--infographic .item__list
{
    display: block;

    width: 635px;
    margin: 40px auto 0 auto;
}
.m--infographic .item__list p
{
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.2;

    width: 300px;

    color: #009fe3;
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (min-width: 48em) and (max-width: 63.99em)
{
    .m--infographic .item__list p
    {
        font-size: 1.8181818182rem;
    }
}
@media (max-width: 47.99em)
{
    .m--infographic .item__list p
    {
        font-size: 1.5384615385rem;
    }
}
.m--infographic .item__list p strong
{
    font-size: 130%;

    margin: auto 1%;
}
.m--infographic .item__list span
{
    font-size: 8rem;
    font-weight: 300;
    line-height: 1;

    color: #feba02;
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (min-width: 48em) and (max-width: 63.99em)
{
    .m--infographic .item__list span
    {
        font-size: 7.2727272727rem;
    }
}
@media (max-width: 47.99em)
{
    .m--infographic .item__list span
    {
        font-size: 6.1538461538rem;
    }
}
.m--infographic .item__list span strong
{
    font-size: 130%;

    margin: auto 1%;
}
.m--infographic .item__list .list__column
{
    display: inline-block;

    vertical-align: middle;
}
.m--infographic .item__list .list__column + .list__column
{
    margin-left: 20px;
}
.m--infographic .infographic__item[data-n='0']
{
    background: #fff;
}
.m--infographic .infographic__item[data-n='0'] .item__visual
{
    height: 393px;
}
.m--infographic .infographic__item[data-n='1']
{
    background: #fff;
}
.m--infographic .infographic__item[data-n='1'] .item__title
{
    padding-top: 85px;
}
.m--infographic .infographic__item[data-n='1'] .item__visual
{
    height: 580px;
}
.m--infographic .infographic__item[data-n='2']
{
    background: #fff;
}
.m--infographic .infographic__item[data-n='2'] .item__visual
{
    height: 365px;
}
.m--infographic .infographic__item[data-n='3']
{
    background: #fff;
}
.m--infographic .infographic__item[data-n='3'] .item__visual
{
    height: 366px;
}
.m--infographic .infographic__item[data-n='4']
{
    padding-bottom: 100px;

    background: #fff;
    /* FF3.6-15 */
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, white 0%, #bde7f8 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.m--infographic .infographic__item[data-n='4'] .item__title
{
    font-size: 4rem;
}
.m--infographic .infographic__item[data-n='5']
{
    background: #fff;
    /* FF3.6-15 */
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffdc8e 0%, white 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.m--infographic .infographic__item[data-n='5'] .item__extra-top
{
    position: absolute;
    top: -50px;
    left: 0;

    width: 100%;
    height: 76px;

    background: url(../img/infographic/numbers-5-extra-top.png) no-repeat center top;
}
.m--infographic .infographic__item[data-n='5'] .item__title
{
    font-size: 4rem;

    color: #fff;
}
.m--infographic .infographic__item[data-n='5'] .item__list p
{
    color: #a68f55;
}
.m--infographic .infographic__item[data-n='6']
{
    background: #fff;
}
.m--infographic .infographic__item[data-n='6'] .item__title
{
    padding-top: 130px;
}
.m--infographic .infographic__item[data-n='6'] .item__visual
{
    height: 520px;
}
.m--infographic .infographic__item[data-n='7']
{
    background: #009fe3;
}
.m--infographic .infographic__item[data-n='7'] .item__title
{
    position: absolute;
    z-index: 100; 
    top: 0;
    left: calc(50% - 310px);

    width: 620px;
    padding-top: 140px;

    color: #fff;
}
.m--infographic .infographic__item[data-n='7'] .item__visual
{
    height: 769px;
}
.m--infographic .infographic__item[data-n='7'] .item__extra-top
{
    position: absolute;
    z-index: 100;
    top: -15px;
    left: 0;

    width: 100%;
    height: 94px;

    background: url(../img/infographic/numbers-7-repeat-top.png) repeat-x center top;
}
.m--infographic .infographic__item[data-n='8']
{
    background: #009fe3;
}
.m--infographic .infographic__item[data-n='8'] .item__title
{
    color: #fff;
}
.m--infographic .infographic__item[data-n='8'] .item__visual
{
    height: 352px;
    margin-top: 40px;
}
.m--infographic .infographic__item[data-n='9']
{
    padding-bottom: 160px;

    background: #009fe3;
}
.m--infographic .infographic__item[data-n='9'] .item__title
{
    color: #fff;
}
.m--infographic .infographic__item[data-n='9'] .item__list p,
.m--infographic .infographic__item[data-n='9'] .item__list span
{
    color: #fff;
}
.m--infographic .infographic__item[data-n='10']
{
    background: #ccecfa;
}
.m--infographic .infographic__item[data-n='10'] .item__title
{
    font-size: 4rem; 

    padding-top: 65px;
}
.m--infographic .infographic__item[data-n='10'] .item__impact
{
    margin-top: 65px;

    text-align: center;
}
.m--infographic .infographic__item[data-n='10'] .item__impact p
{
    font-size: 3rem;
    font-weight: 300;
    line-height: 1.2;

    display: block;

    margin-top: 10px;

    color: #009fe3;
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (min-width: 48em) and (max-width: 63.99em)
{
    .m--infographic .infographic__item[data-n='10'] .item__impact p
    {
        font-size: 2.7272727273rem;
    }
}
@media (max-width: 47.99em)
{
    .m--infographic .infographic__item[data-n='10'] .item__impact p
    {
        font-size: 2.3076923077rem;
    }
}
.m--infographic .infographic__item[data-n='10'] .item__impact p strong
{
    font-size: 130%;

    margin: auto 1%;
}
.m--infographic .infographic__item[data-n='10'] .item__foot
{
    margin: 200px auto 70px auto;

    text-align: center;
}
.m--infographic .infographic__item[data-n='10'] .item__foot img
{
    margin-top: 60px;
}
.m--infographic .infographic__item[data-n='10'] .item__foot p
{
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.3;

    color: #009fe3;
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (min-width: 48em) and (max-width: 63.99em)
{
    .m--infographic .infographic__item[data-n='10'] .item__foot p
    {
        font-size: 2.7272727273rem;
    }
}
@media (max-width: 47.99em)
{
    .m--infographic .infographic__item[data-n='10'] .item__foot p
    {
        font-size: 2.3076923077rem;
    }
}
.m--infographic .infographic__item[data-n='10'] .item__foot p strong
{
    font-size: 130%;

    margin: auto 1%;
}
.m--infographic .infographic__item[data-n='10'] .item__extra-top
{
    position: absolute;
    z-index: 100;
    top: -55px;
    left: 0;

    width: 100%;
    height: 103px;

    background: url(../img/infographic/numbers-10-top.png) no-repeat center top;
}
.m--infographic .infographic__item[data-n='10'] .item__extra-bottom
{
    position: bottom;
    z-index: 100;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 28px;

    background: url(../img/infographic/numbers-10-repeat-bottom.png) repeat-x center top;
}
.m--infographic .infographic__item[data-n='11']
{
    padding: 70px 0 95px 0;

    text-align: center; 

    background: #fff;
}
.m--infographic .infographic__item[data-n='11'] .item-foot__title
{
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.3;

    margin-top: 70px;

    color: #28aee8;
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (min-width: 48em) and (max-width: 63.99em)
{
    .m--infographic .infographic__item[data-n='11'] .item-foot__title
    {
        font-size: 2.7272727273rem;
    }
}
@media (max-width: 47.99em)
{
    .m--infographic .infographic__item[data-n='11'] .item-foot__title
    {
        font-size: 2.3076923077rem;
    }
}
.m--infographic .infographic__item[data-n='11'] .item-foot__title strong
{
    font-size: 130%;

    margin: auto 1%;
}
.m--infographic .infographic__item[data-n='11'] .item-foot__desc
{
    font-size: 2.2rem;
    font-weight: 300;
    line-height: 1.82;

    margin-top: 30px;

    color: #003580;
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
    /* Smallest variation */
    /* Small variations */
    /* Medium variations */
    /* Large variations */
    /* Extra large variations */
}
@media (min-width: 48em) and (max-width: 63.99em)
{
    .m--infographic .infographic__item[data-n='11'] .item-foot__desc
    {
        font-size: 2rem;
    }
}
@media (max-width: 47.99em)
{
    .m--infographic .infographic__item[data-n='11'] .item-foot__desc
    {
        font-size: 1.6923076923rem;
    }
}
.m--infographic .infographic__item[data-n='11'] .item-foot__desc strong
{
    font-size: 130%;

    margin: auto 1%;
}
.m--infographic .infographic__item[data-n='11'] .item-foot__button
{
    margin-top: 55px;
}