.alignnone {
    margin: .25em 1em 1em 0
}

.aligncenter {
    display: block;
    margin: .25em auto 1em
}

.alignright {
    float: right;
    margin: .25em 0 1em 1em
}

@media print {
    .alignright {
        float: none
    }
}

.alignleft {
    float: left;
    margin: .25em 1em 1em 0
}

@media print {
    .alignleft {
        float: none
    }
}

a img.alignright {
    float: right;
    margin: .25em 0 1em 1em
}

@media print {
    a img.alignright {
        float: none
    }
}

a img.alignleft,
a img.alignnone {
    margin: .25em 1em 1em 0
}

a img.alignleft {
    float: left
}

@media print {
    a img.alignleft {
        float: none
    }
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: .1em solid rgba(0, 0, 0, .125);
    max-width: 100%;
    padding: .1875em .1875em .375em;
    text-align: center
}

.wp-caption.alignleft,
.wp-caption.alignnone {
    margin: .25em 1em 1em 0
}

.wp-caption.alignright {
    margin: .25em 0 1em 1em
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    padding: 0;
    width: auto
}

.wp-caption p {
    margin: 0
}

.wp-caption .wp-caption-text {
    font-size: .75em;
    margin: 0
}

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden
}

.text-content ul.gfield_radio,
.text-content ul.gform_fields {
    list-style: none;
    padding: 0
}

.text-content ul.gfield_radio input,
.text-content ul.gfield_radio label {
    display: inline-block
}

.text-content ul.gfield_radio input[name=input_1_other] {
    max-width: 20em;
    width: 100%
}

.gform_button {
    /*max-width: 12em*/
}

.validation_error,
.validation_message {
    margin-top: 1em;
    background: #f6ed36;
    padding: .75em 1em
}

.validation_message {
    display: inline-block
}


/*! normalize.css v3.0.2 | MIT License | 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
}

html {
    font-size: 62.5%
}

body {
    font-size: 16px;
    font-size: 1.6rem;
    color: #525252;
    font-family: co-text, ubuntu, sans-serif;
    line-height: 1.5
}

.lt-ie9 body,
.lt-ie10 body {
    font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif
}

@media print {
    body {
        color: #000
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #2b2e34;
    font-family: co-headline, ubuntu, sans-serif;
    font-weight: 700;
    line-height: 1.25;
    margin: 0
}

@media print {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: #000;
        page-break-after: avoid
    }
}

h1 {
    font-size: 1.75em
}

h2 {
    font-size: 1.5em
}

h3 {
    font-size: 1.25em
}

h4 {
    font-size: 1.125em
}

h5,
h6,
p {
    font-size: 1em
}

p {
    margin: 0 0 1em
}

a {
    color: #34acde;
    text-decoration: none
}

@media print {
    a {
        color: #000
    }
}

sup {
    top: -.25em
}

::selection {
    background: #f1f1f1;
    text-shadow: none;
    color: #000
}

.make-it-pop h1,
.make-it-pop h2,
.make-it-pop h3,
.make-it-pop h4,
.make-it-pop h5,
.make-it-pop nav a,
.make-it-pop p {
    text-transform: uppercase
}

.make-it-pop h1:after,
.make-it-pop h2:after,
.make-it-pop h3:after,
.make-it-pop h4:after,
.make-it-pop h5:after,
.make-it-pop nav a:after,
.make-it-pop p:after {
    content: "!"
}

@media print {
    p a:after {
        content: " (" attr(href) ")";
        font-size: .75em
    }
}

.clearfix:after,
.clearfix:before {
    content: "";
    display: table
}

.clearfix:after {
    clear: both
}

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

.sr-only[href]:active,
.sr-only[href]:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto
}

.small {
    font-size: .75em
}

.muted {
    opacity: .5
}

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

html {
    background: #f1f1f1
}

body {
    overflow-x: hidden;
    min-width: 20em;
    max-width: 90em;
    margin: 0 auto;
    background: #fff;
    min-height: 100%
}

body:after,
body:before {
    content: "";
    display: table
}

body:after {
    clear: both
}

body.body-jp-widget {
    max-width: none
}

main:after,
main:before {
    content: "";
    display: table
}

main:after {
    clear: both
}

@media screen and (min-width:64em) {
    main {
        transition: opacity .2s cubic-bezier(.365, .095, .535, 1), -webkit-filter .2s cubic-bezier(.365, .095, .535, 1);
        transition: filter .2s cubic-bezier(.365, .095, .535, 1), opacity .2s cubic-bezier(.365, .095, .535, 1);
        transition: filter .2s cubic-bezier(.365, .095, .535, 1), opacity .2s cubic-bezier(.365, .095, .535, 1), -webkit-filter .2s cubic-bezier(.365, .095, .535, 1)
    }
    .search-is-open main,
    .subnav-is-open main {
        filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /></filter></svg>#filter');
        -webkit-filter: grayscale(1);
        filter: grayscale(1);
        opacity: .5
    }
}

.container {
    margin: 0 auto;
    padding: 0 15px
}

.container:after,
.container:before {
    content: "";
    display: table
}

.container:after {
    clear: both
}

@media print {
    .container {
        padding: 0
    }
}

@media (min-width:768px) {
    .container {
        width: 750px
    }
}

@media (min-width:992px) {
    .container {
        width: 970px
    }
}

@media (min-width:1200px) {
    .container {
        width: 1170px
    }
}

.skip-nav {
    height: 0;
    overflow: hidden;
    position: absolute;
    transition: height .2s cubic-bezier(.365, .095, .535, 1)
}

.skip-nav:focus {
    box-shadow: 0 0 0 .125em rgba(0, 0, 0, .125);
    height: 2em;
    line-height: 2em;
    padding: 0 1em;
    top: 0;
    right: 1em;
    background: #34acde;
    color: #fff;
    z-index: 11111
}

.main-content {
    outline: none
}

.control-checkbox,
.control-radio,
.control-select,
.planner-search-trigger-leave-arrive,
input,
select,
textarea {
    font-size: 16;
    color: #404140;
    font-weight: 400;
    font-family: co-text, ubuntu, sans-serif;
    border: .125em solid rgba(0, 0, 0, .125);
    border-radius: 0;
    padding: .375em 0;
    background-color: #fff;
    transition: background .2s cubic-bezier(.365, .095, .535, 1), border-color .2s cubic-bezier(.365, .095, .535, 1);
    text-overflow: ellipsis
}

.control-checkbox:hover,
.control-radio:hover,
.control-select:hover,
.planner-search-trigger-leave-arrive:hover,
input:hover,
select:hover,
textarea:hover {
    border-color: #cbcccb
}

.control-checkbox:focus,
.control-radio:focus,
.control-select:focus,
.planner-search-trigger-leave-arrive:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: #34acde;
    color: #1b1919;
    outline: none
}

.control-checkbox .disabled,
.control-radio .disabled,
.control-select .disabled,
.planner-search-trigger-leave-arrive .disabled,
[disabled].control-checkbox,
[disabled].control-radio,
[disabled].control-select,
[disabled].planner-search-trigger-leave-arrive,
input .disabled,
input[disabled],
select .disabled,
select[disabled],
textarea .disabled,
textarea[disabled] {
    background: #f1f1f1;
    cursor: not-allowed
}

input,
select,
textarea {
    width: 100%
}

@media (min-width:) {
    input,
    select,
    textarea {
        width: 50%
    }
}

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

textarea {
    resize: vertical;
    width: 100%;
    padding: .75em 0 0 .5em
}

legend {
    margin-top: 2rem;
    font-size: 1.5em;
    font-weight: 700
}

label,
legend {
    font-family: co-headline, ubuntu, sans-serif;
    color: #2b2e34
}

label {
    padding: .375em 0;
    display: block;
    line-height: 1.25
}

input,
select {
    text-indent: .75em
}

[type=checkbox],
[type=radio] {
    min-width: 1em;
    width: 1em;
    height: 1em;
    margin: 0;
    margin-right: .5em
}

.btn>[type=checkbox],
.btn>[type=radio] {
    margin-left: -.5em
}

[type=range] {
    border: 0 none;
    margin-left: 0;
    margin-right: 0
}

[type=range]:focus {
    background: none
}

[type=color],
[type=date],
[type=datetime-local],
[type=datetime],
[type=month],
[type=number],
[type=week] {
    width: 25%
}

select {
    padding: 0;
    height: 2.75em;
    cursor: pointer
}

select option {
    padding: .375em .5em;
    border-bottom: 1px solid rgba(0, 0, 0, .125)
}

select option:checked,
select option:focus {
    background: #34acde;
    color: #fff
}

[multiple] {
    padding: 0;
    height: auto
}

[multiple] option {
    padding: .75em;
    height: 3em
}

::-webkit-input-placeholder {
    color: #898a89
}

:-ms-input-placeholder {
    color: #898a89
}

::placeholder {
    color: #898a89
}

.responsive-video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%
}

.responsive-video embed,
.responsive-video iframe,
.responsive-video object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

table {
    width: 100%;
    max-width: 100%
}

table td,
table th {
    padding: .75em 0;
    vertical-align: top
}

img {
    max-width: 100%
}

img,
svg {
    height: auto
}

svg {
    display: inline-block;
    max-height: 100%
}

@media screen and (min-width:37.5em) {
    .cms,
    .text-content {
        font-size: 1.125em;
        line-height: 1.75
    }
}

.cms h1,
.cms h2,
.cms h3,
.cms h4,
.cms h5,
.cms h6,
.text-content h1,
.text-content h2,
.text-content h3,
.text-content h4,
.text-content h5,
.text-content h6 {
    margin: 2em 0 .25em
}

.cms h1:first-child,
.cms h2:first-child,
.cms h3:first-child,
.cms h4:first-child,
.cms h5:first-child,
.cms h6:first-child,
.text-content h1:first-child,
.text-content h2:first-child,
.text-content h3:first-child,
.text-content h4:first-child,
.text-content h5:first-child,
.text-content h6:first-child {
    margin-top: 0
}

.cms h2,
.cms h3,
.text-content h2,
.text-content h3 {
    font-weight: 400
}

.cms h4,
.cms h5,
.cms h6,
.text-content h4,
.text-content h5,
.text-content h6 {
    text-transform: uppercase
}

.cms p,
.text-content p {
    margin: 0 0 1em
}

.cms p:empty,
.text-content p:empty {
    display: none
}

.cms a:focus,
.cms a:hover,
.text-content a:focus,
.text-content a:hover {
    text-decoration: underline
}

.cms ol,
.cms ul,
.text-content ol,
.text-content ul {
    margin-bottom: 2em;
    padding-left: 1.5em
}

.cms ul,
.text-content ul {
    list-style-type: circle
}

.cms ul ul,
.text-content ul ul {
    list-style-type: square
}

.cms ol ol,
.text-content ol ol {
    list-style-type: lower-alpha
}

.cms li,
.text-content li {
    margin-bottom: .5em
}

.cms img,
.text-content img {
    border-radius: .25em
}

.cms img.alignnone,
.text-content img.alignnone {
    margin-bottom: 1em
}

@media print {
    .cms img,
    .text-content img {
        max-width: 500px
    }
}

.cms .wp-caption,
.text-content .wp-caption {
    background: #f1f1f1;
    border: 0;
    max-width: 100%;
    margin: 1em 0;
    text-align: center;
    padding: 1em;
    border-radius: .25em
}

.cms .wp-caption p,
.text-content .wp-caption p {
    margin: 0
}

.cms .wp-caption .wp-caption-text,
.text-content .wp-caption .wp-caption-text {
    margin-top: .25em
}

@font-face {
    font-family: icomoon;
    src: url(../fonts/icomoon.1e1a498c.eot);
    src: url(../fonts/icomoon.1e1a498c.eot#iefix) format("embedded-opentype"), url(../fonts/icomoon.6cfdfc78.ttf) format("truetype"), url(../fonts/icomoon.2af3a486.woff) format("woff"), url(../fonts/icomoon.1d60e663.svg#icomoon) format("svg");
    font-weight: 400;
    font-style: normal
}

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

:hover [class*=" icon-"],
:hover [class^=icon-] {
    text-decoration: none
}

.icon-public-transport-all .path1:before {
    content: "\e901";
    color: #cd1620
}

.icon-public-transport-all .path2:before {
    content: "\e902";
    margin-left: -1em;
    color: #fff
}

.icon-public-transport-all .path3:before {
    content: "\e903";
    margin-left: -1em;
    color: #fff
}

.icon-public-transport-all .path4:before {
    content: "\e904";
    margin-left: -1em;
    color: #34abdd
}

.icon-flight:before {
    content: "\e539"
}

.icon-bike:before,
.icon-cycle:before,
.icon-cycling:before {
    content: "\e52f"
}

.icon-car-share:before,
.icon-car:before,
.icon-driving:before {
    content: "\e531"
}

.icon-walk:before,
.icon-walking:before {
    content: "\e900"
}

.icon-heart:before {
    content: "\f004"
}

.icon-star:before {
    content: "\f005"
}

.icon-star-o:before {
    content: "\f006"
}

.icon-user:before {
    content: "\f007"
}

.icon-check:before {
    content: "\f00c"
}

.icon-close:before,
.icon-remove:before,
.icon-times:before {
    content: "\f00d"
}

.icon-cog:before,
.icon-gear:before {
    content: "\f013"
}

.icon-clock:before,
.icon-save-time:before {
    content: "\f017"
}

.icon-arrow-circle-o-down:before {
    content: "\f01a"
}

.icon-arrow-circle-o-up:before {
    content: "\f01b"
}

.icon-refresh:before {
    content: "\f021"
}

.icon-tag:before {
    content: "\f02b"
}

.icon-tags:before {
    content: "\f02c"
}

.icon-bookmark:before {
    content: "\f02e"
}

.icon-print:before {
    content: "\f02f"
}

.icon-address:before,
.icon-location:before,
.icon-map-marker:before,
.icon-map-pin:before {
    content: "\f041"
}

.icon-chevron-left:before {
    content: "\f053"
}

.icon-chevron-right:before {
    content: "\f054"
}

.icon-check-circle:before {
    content: "\f058"
}

.icon-question-circle:before {
    content: "\f059"
}

.icon-info-circle:before {
    content: "\f05a"
}

.icon-arrow-left:before {
    content: "\f060"
}

.icon-arrow-right:before {
    content: "\f061"
}

.icon-arrow-up:before {
    content: "\f062"
}

.icon-arrow-down:before {
    content: "\f063"
}

.icon-warning-circle:before {
    content: "\f06a"
}

.icon-go-green:before,
.icon-leaf:before {
    content: "\f06c"
}

.icon-warning-sign:before {
    content: "\f071"
}

.icon-plane:before {
    content: "\f072"
}

.icon-random:before {
    content: "\f074"
}

.icon-comment:before {
    content: "\f075"
}

.icon-chevron-up:before {
    content: "\f077"
}

.icon-chevron-down:before {
    content: "\f078"
}

.icon-retweet:before {
    content: "\f079"
}

.icon-comments:before {
    content: "\f086"
}

.icon-heart-o:before {
    content: "\f08a"
}

.icon-sign-out:before {
    content: "\f08b"
}

.icon-external-link:before {
    content: "\f08e"
}

.icon-sign-in:before {
    content: "\f090"
}

.icon-phone:before,
.icon-tel:before,
.icon-telephone:before {
    content: "\f095"
}

.icon-bookmark-o:before {
    content: "\f097"
}

.icon-twitter:before {
    content: "\f099"
}

.icon-facebook-f:before,
.icon-facebook:before {
    content: "\f09a"
}

.icon-credit-card:before,
.icon-save-money:before {
    content: "\f09d"
}

.icon-globe:before {
    content: "\f0ac"
}

.icon-chain:before,
.icon-link:before {
    content: "\f0c1"
}

.icon-email:before,
.icon-envelope:before,
.icon-mail:before {
    content: "\f0e0"
}

.icon-linkedin:before {
    content: "\f0e1"
}

.icon-ticket:before {
    content: "\f145"
}

.icon-external-link-square:before,
.icon-website:before {
    content: "\f14c"
}

.icon-sun-o:before {
    content: "\f185"
}

.icon-bus:before {
    content: "\f207"
}

.icon-ship:before {
    content: "\f21a"
}

.icon-heartbeat:before,
.icon-live-better:before {
    content: "\f21e"
}

.icon-heavy-rail:before,
.icon-light-rail:before,
.icon-public-transport:before,
.icon-subway:before,
.icon-train:before,
.icon-transit:before {
    content: "\f239"
}

.icon-directions:before,
.icon-map-signs:before {
    content: "\f277"
}

.icon-map-o:before,
.icon-map:before {
    content: "\f278"
}

.icon-book,
.icon-smart,
.icon-work,
.icon-working-from-home {
    width: 21px;
    height: 20px;
    display: inline-block;
    background-color: #2eb8f3;
    background-size: cover;
    background-image: url(../templates/components/icons/icon-business.svg)
}

.icon-working-from-home {
    background-image: url(../templates/components/icons/icon-working-from-home.svg)
}

.icon-smart {
    background-image: url(../templates/components/icons/icon-smartcard.svg)
}

.icon-book {
    background-image: url(../templates/components/icons/icon-school.svg)
}

.icon-heavy-rail,
.icon-light-rail,
.icon-public-transport,
.icon-subway,
.icon-train,
.icon-transit {
    color: #34acde
}

.icon-bus {
    color: #cd1620
}

.icon-walk,
.icon-walking {
    color: #208135
}

.icon-bike,
.icon-cycle,
.icon-cycling {
    color: #94bf35
}

.icon-ferry {
    color: #622e80
}

.icon-motorbike {
    color: #e00b80
}

.icon-car,
.icon-driving {
    color: #e64f29
}

.icon-leaf {
    color: #94bf35
}

.icon-heartbeat {
    color: #cd1620
}

.btn>.icon {
    margin-right: .5em
}

.btn>.icon-right {
    margin-left: .5em;
    margin-right: 0
}

.animation svg {
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%
}

.animation-car [id=buildings-layer] {
    animation-duration: 9.5s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: l;
    animation-timing-function: linear
}

.animation-car [id=trees-small-layer] {
    animation-duration: 10s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: m;
    animation-timing-function: linear
}

.animation-car [id=trees-big-layer] {
    animation-duration: 9.75s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: m;
    animation-timing-function: linear
}

.animation-car [id=traffic-lights-layer] {
    animation-duration: 8s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: n;
    animation-timing-function: linear
}

.animation-car [id=lamps-layer] {
    animation-duration: 8s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: o;
    animation-timing-function: linear
}

.animation-car [id=car]:first-child {
    animation-duration: .2s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: k;
    animation-timing-function: ease-in-out
}

@keyframes a {
    0% {
        transform: translate(0)
    }
    to {
        transform: translate(0)
    }
    50% {
        transform: translateY(-50%)
    }
}

@keyframes b {
    0% {
        transform: translateY(15%)
    }
    to {
        transform: translateY(15%)
    }
    50% {
        transform: translateY(-25%)
    }
}

@keyframes c {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(0)
    }
    25% {
        transform: rotate(-1.5deg)
    }
    75% {
        transform: rotate(1.5deg)
    }
}

@keyframes d {
    0% {
        transform: translate(0)
    }
    to {
        transform: translate(0)
    }
    50% {
        transform: translateY(-5%)
    }
}

.animation-ferry .boat-main-wrap,
.animation-ferry .boat-small-left-wrap,
.animation-ferry .boat-small-right-wrap {
    animation-duration: 5s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: d;
    animation-timing-function: ease;
    transform-origin: bottom center
}

.animation-ferry .boat-main,
.animation-ferry .boat-small-left,
.animation-ferry .boat-small-right {
    animation-duration: 5s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: c;
    animation-timing-function: ease;
    transform-origin: bottom center
}

.animation-ferry .boat-small-right,
.animation-ferry .boat-small-right-wrap {
    animation-delay: -2s
}

.animation-ferry .boat-small-left,
.animation-ferry .boat-small-left-wrap {
    animation-delay: -1s
}

.animation-ferry [class*=water-small-] {
    animation-duration: 5s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: a;
    animation-timing-function: ease
}

.animation-ferry .water-large path {
    animation-duration: 5s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: b;
    animation-timing-function: ease
}

.animation-ferry .water-small-1 {
    animation-delay: 2.5s
}

.animation-ferry .water-small-2 {
    animation-delay: 1.25s
}

.animation-ferry .water-small-3 {
    animation-delay: -1.25s
}

.animation-ferry .water-small-4 {
    animation-delay: -2.5s
}

.animation-ferry .water-large path:first-child {
    animation-delay: -.29412s
}

.animation-ferry .water-large path:nth-child(2) {
    animation-delay: -.58824s
}

.animation-ferry .water-large path:nth-child(3) {
    animation-delay: -.88235s
}

.animation-ferry .water-large path:nth-child(4) {
    animation-delay: -1.17647s
}

.animation-ferry .water-large path:nth-child(5) {
    animation-delay: -1.47059s
}

.animation-ferry .water-large path:nth-child(6) {
    animation-delay: -1.76471s
}

.animation-ferry .water-large path:nth-child(7) {
    animation-delay: -2.05882s
}

.animation-ferry .water-large path:nth-child(8) {
    animation-delay: -2.35294s
}

.animation-ferry .water-large path:nth-child(9) {
    animation-delay: -2.64706s
}

.animation-ferry .water-large path:nth-child(10) {
    animation-delay: -2.94118s
}

.animation-ferry .water-large path:nth-child(11) {
    animation-delay: -3.23529s
}

.animation-ferry .water-large path:nth-child(12) {
    animation-delay: -3.52941s
}

.animation-ferry .water-large path:nth-child(13) {
    animation-delay: -3.82353s
}

.animation-ferry .water-large path:nth-child(14) {
    animation-delay: -4.11765s
}

.animation-ferry .water-large path:nth-child(15) {
    animation-delay: -4.41176s
}

.animation-ferry .water-large path:nth-child(16) {
    animation-delay: -4.70588s
}

.animation-ferry .water-large path:nth-child(17) {
    animation-delay: -5s
}

@keyframes e {
    0% {
        transform: rotate(-2.5deg)
    }
    to {
        transform: rotate(-2.5deg)
    }
    50% {
        transform: rotate(2.5deg)
    }
}

@keyframes f {
    0% {
        opacity: 1
    }
    50%,
    52%,
    75%,
    77%,
    80%,
    82% {
        opacity: 1
    }
    51%,
    76%,
    81% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes g {
    0%,
    20% {
        transform: scale(0);
        opacity: 0
    }
    22.5% {
        opacity: 1;
        transform: scale(1.1)
    }
    25%,
    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes h {
    0%,
    25% {
        transform: scale(0);
        opacity: 0
    }
    27.5% {
        opacity: 1;
        transform: scale(1.1)
    }
    30%,
    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes i {
    0%,
    30% {
        transform: scale(0);
        opacity: 0
    }
    32.5% {
        opacity: 1;
        transform: scale(1.05)
    }
    35%,
    to {
        opacity: 1;
        transform: scale(1)
    }
}

.animation-work-from-home .wall-photo {
    animation-duration: 5s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: e;
    animation-timing-function: ease;
    transform-origin: top center
}

.animation-work-from-home .lamp-light {
    animation-duration: 5s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: f;
    animation-timing-function: ease
}

.animation-work-from-home .thoughts-bubble-small {
    animation-duration: 10s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: g;
    animation-timing-function: ease-in-out;
    transform-origin: center center
}

.animation-work-from-home .thoughts-bubble-medium {
    animation-duration: 10s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: h;
    animation-timing-function: ease-in-out;
    transform-origin: center center
}

.animation-work-from-home .thoughts-bubble-big {
    animation-duration: 10s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: i;
    animation-timing-function: ease-in-out;
    transform-origin: center center
}

@keyframes j {
    0% {
        transform: translate(-200%)
    }
    40%,
    50% {
        transform: translate(10%)
    }
    to {
        transform: translate(200%)
    }
}

.animation-train .whole-animation {
    transform: translateY(-25%)
}

.animation-train .train {
    animation-duration: 10s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: j;
    animation-timing-function: ease
}

.animation-bus [id=buildings-layer] {
    animation-duration: 9.5s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: l;
    animation-timing-function: linear
}

.animation-bus [id=trees-small-layer] {
    animation-duration: 10s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: m;
    animation-timing-function: linear
}

.animation-bus [id=trees-big-layer] {
    animation-duration: 9.75s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: m;
    animation-timing-function: linear
}

.animation-bus [id=traffic-lights-layer] {
    animation-duration: 8s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: n;
    animation-timing-function: linear
}

.animation-bus [id=lamps-layer] {
    animation-duration: 8s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: o;
    animation-timing-function: linear
}

.animation-bus [id=bus]:last-child {
    animation-duration: .2s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: k;
    animation-timing-function: ease-in-out
}

@keyframes k {
    0% {
        transform: translate(0)
    }
    to {
        transform: translate(0)
    }
    50% {
        transform: translateY(-1%)
    }
}

.animation-motorbike [id=buildings-layer] {
    animation-duration: 9.5s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: l;
    animation-timing-function: linear
}

.animation-motorbike [id=trees-small-layer] {
    animation-duration: 10s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: m;
    animation-timing-function: linear
}

.animation-motorbike [id=trees-big-layer] {
    animation-duration: 9.75s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: m;
    animation-timing-function: linear
}

.animation-motorbike [id=traffic-lights-layer] {
    animation-duration: 8s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: n;
    animation-timing-function: linear
}

.animation-motorbike [id=lamps-layer] {
    animation-duration: 8s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: o;
    animation-timing-function: linear
}

.animation-motorbike [id=motorbike] {
    animation-duration: .2s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: k;
    animation-timing-function: ease-in-out
}

.animation-cycling [id=buildings-layer] {
    animation-duration: 9.5s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: l;
    animation-timing-function: linear
}

.animation-cycling [id=trees-small-layer] {
    animation-duration: 10s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: m;
    animation-timing-function: linear
}

.animation-cycling [id=trees-big-layer] {
    animation-duration: 9.75s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: m;
    animation-timing-function: linear
}

.animation-cycling [id=traffic-lights-layer] {
    animation-duration: 8s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: n;
    animation-timing-function: linear
}

.animation-cycling [id=lamps-layer] {
    animation-duration: 8s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: o;
    animation-timing-function: linear
}

@keyframes l {
    0% {
        transform: translate(0)
    }
    to {
        transform: translate(-71.5%)
    }
}

@keyframes m {
    0% {
        transform: translate(0)
    }
    to {
        transform: translate(-215%)
    }
}

@keyframes n {
    0% {
        transform: translate(0)
    }
    to {
        transform: translate(-94%)
    }
}

@keyframes o {
    0% {
        transform: translate(0)
    }
    to {
        transform: translate(-93%)
    }
}

.animation-walking [id=buildings-layer] {
    animation-duration: 33.5s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: l;
    animation-timing-function: linear
}

.animation-walking [id=trees-small-layer] {
    animation-duration: 34s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: m;
    animation-timing-function: linear
}

.animation-walking [id=trees-big-layer] {
    animation-duration: 33.75s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: m;
    animation-timing-function: linear
}

.animation-walking [id=traffic-lights-layer] {
    animation-duration: 32s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: n;
    animation-timing-function: linear
}

.animation-walking [id=lamps-layer] {
    animation-duration: 32s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: o;
    animation-timing-function: linear
}

.accordion-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: .125em solid rgba(0, 0, 0, .125);
    margin: 1em 0
}

.accordion-item {
    border-bottom: .125em solid rgba(0, 0, 0, .125)
}

.accordion-item-trigger {
    display: block;
    padding: .75em 0;
    color: #2b2e34
}

.accordion-item-trigger:focus,
.accordion-item-trigger:hover {
    color: #34acde
}

.accordion-item-trigger:active,
.active .accordion-item-trigger,
:target .accordion-item-trigger {
    cursor: text;
    color: #2b2e34
}

.accordion-item-title {
    line-height: 1;
    color: inherit
}

.accordion-item-content {
    display: none
}

.active .accordion-item-content,
:target .accordion-item-content {
    display: block
}

.alert {
    margin-bottom: 1em;
    background: #f6ed36
}

.alert-inner {
    padding: .75em 1em
}

.alert-body {
    margin: 0
}

.article {
    overflow: hidden
}

.article-main {
    padding: 5vw;
    margin: auto;
    width: 100%
}

@media screen and (min-width:64em) {
    .article-main {
        margin: 0;
        float: left;
        width: 66.66%
    }
}

.article-main-footer {
    border-top: .125em solid rgba(0, 0, 0, .125);
    margin-top: 5%;
    padding-top: 5%
}

@media print {
    .article-main-footer {
        border-top: 0 none;
        margin-top: 0;
        padding-top: 0
    }
    .article-main-footer-link-back {
        display: none
    }
}

@media print {
    .article-main {
        padding: 2.5vw 5vw 0
    }
}

.article-secondary {
    padding: 5vw;
    margin: auto;
    max-width: 55em
}

@media screen and (min-width:64em) {
    .article-secondary {
        max-width: 23.4375em;
        margin: 0;
        float: right;
        padding-left: 0;
        width: 33.33%
    }
}

@media print {
    .article-secondary {
        padding: 0 5vw 5vw
    }
}

.article-footer {
    clear: both
}

.article-full {
    position: relative
}

.article-full .article-main {
    max-width: 100%;
    width: 100%
}

.article-map .article-main {
    padding-left: 0;
    padding-right: 0
}

.btn,
.gform_button,
button {
    text-decoration: none;
    text-align: center;
    display: inline-block;
    padding: .75em;
    border-radius: .25em;
    border: .125em solid rgba(0, 0, 0, .125);
    background: hsla(0, 0%, 100%, .1);
    color: currentColor;
    margin-bottom: 1em;
    transition: background .2s cubic-bezier(.365, .095, .535, 1);
    cursor: pointer;
    line-height: 1.25em
}

.btn:focus,
.btn:hover,
.gform_button:focus,
.gform_button:hover,
button:focus,
button:hover {
    color: #34acde;
    background: #fff
}

.btn+.btn,
.btn+.gform_button,
.btn+button,
.gform_button+.btn,
.gform_button+.gform_button,
.gform_button+button,
button+.btn,
button+.gform_button,
button+button {
    margin-left: 1em
}

.btn.disabled,
.btn:disabled,
.disabled.gform_button,
.gform_button:disabled,
button.disabled,
button:disabled {
    cursor: not-allowed
}

.btn-primary,
.btn-secondary,
.btn-tertiary,
.gform_button {
    color: #fff;
    font-weight: 700;
    text-shadow: .1em .1em 0 rgba(0, 0, 0, .125);
    border-color: transparent
}

.btn-primary:focus,
.btn-primary:hover,
.btn-secondary:focus,
.btn-secondary:hover,
.btn-tertiary:focus,
.btn-tertiary:hover,
.gform_button:focus,
.gform_button:hover {
    color: #fff;
    border-color: rgba(0, 0, 0, .125)
}

.btn-primary {
    background: #94bf35
}

.btn-primary:focus,
.btn-primary:hover {
    background: #a0cb43
}

.btn-secondary,
.gform_button {
    background: #34acde
}

.btn-secondary:focus,
.btn-secondary:hover,
.gform_button:focus,
.gform_button:hover {
    background: #4ab5e2
}

.btn-tertiary {
    background: #e00b80
}

.btn-tertiary:focus,
.btn-tertiary:hover {
    background: #f3118d
}

.btn-plain {
    background: none
}

.btn-link {
    color: #34acde;
    padding-left: 0;
    padding-right: 0;
    border: transparent;
    text-transform: none
}

.btn-link:focus,
.btn-link:hover {
    text-decoration: underline
}

.btn-block {
    width: 100%
}

.block-nav {
    padding: 2.5vw
}

.block-nav-title {
    text-align: center;
    color: #94bf35
}

.block-nav-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
    display: flex;
    flex-wrap: wrap
}

.block-nav-item {
    display: inline-block;
    text-align: center;
    flex-grow: 1
}

.block-nav-item-link {
    color: inherit;
    text-decoration: none;
    padding: 2.5vw 1.25vw;
    display: block
}

.block-nav-item-icon {
    margin: auto;
    width: 6.25em
}

.block-nav-item-icon-green path,
.block-nav-item-icon path {
    fill: #94bf35
}

.block-nav-item-icon-red path {
    fill: #cd1620
}

.block-nav-item-icon-blue path {
    fill: #34acde
}

.block-nav-item-icon-orange path {
    fill: #e64f29
}

.block-nav-item-icon-pink path {
    fill: #e00b80
}

.block-nav-item-icon-dark-green path {
    fill: #208135
}

.block-nav-item-icon-purple path {
    fill: #622e80
}

.card {
    border: .125em solid rgba(0, 0, 0, .125);
    position: relative
}

.card:after,
.card:before {
    content: "";
    display: table
}

.card:after {
    clear: both
}

.card+.card {
    margin-top: 5%
}

.card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s cubic-bezier(.365, .095, .535, 1);
    height: 100%
}

.card-link:after,
.card-link:before {
    content: "";
    display: table
}

.card-link:after {
    clear: both
}

.card-link:focus,
.card-link:hover {
    box-shadow: 0 0 0 .125em rgba(0, 0, 0, .125)
}

@media print {
    .card-link:after {
        content: "" attr(href) "";
        font-size: .75em;
        padding: 0 1em .75em
    }
}

.card-content {
    min-height: 7.7em;
    overflow: hidden;
    padding: 5%;
    position: relative
}

.card-content .card-link:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0
}

.card-content .card-link:focus,
.card-content .card-link:hover {
    box-shadow: 0 none
}

.card-content .card-link:focus:before,
.card-content .card-link:hover:before {
    box-shadow: 0 0 0 .125em rgba(0, 0, 0, .125)
}

.card-icon {
    float: left;
    padding: 2.5% 0 0 5%;
    width: 25%;
    max-width: 8em
}

.card-icon-green path,
.card-icon path {
    fill: #94bf35
}

.card-icon-red path {
    fill: #cd1620
}

.card-icon-blue path {
    fill: #34acde
}

.card-icon-orange path {
    fill: #e64f29
}

.card-icon-pink path {
    fill: #e00b80
}

.card-icon-dark-green path {
    fill: #208135
}

.card-icon-purple path {
    fill: #622e80
}

@media screen and (min-width:37.5em) {
    .card-icon {
        margin-top: -.75em;
        margin-bottom: -.75em
    }
}

@media screen and (min-width:50em) {
    .card-icon {
        float: none;
        margin: 0 auto;
        padding-left: 0
    }
    .card-icon+.card-content {
        margin-top: -1.5em
    }
}

.card-icon svg {
    width: 100%;
    height: auto;
    display: inline-block
}

.card-image {
    margin: .5em;
    float: right;
    width: 25%
}

@media screen and (min-width:37.5em) {
    .card-image {
        margin-left: 1em;
        width: 20%
    }
}

.card-title {
    font-size: 1em;
    margin-top: -.125em;
    font-weight: 700;
    margin-bottom: 0
}

@media screen and (min-width:37.5em) {
    .card-title {
        font-size: 1.2em
    }
}

.card-title+.card-body {
    margin-top: .5em
}

.card-meta {
    opacity: .5;
    font-size: .75em;
    margin: 1em 0 0
}

.card-body {
    margin: 0;
    font-size: .875em
}

@media screen and (min-width:37.5em) {
    .card-body {
        font-size: 1em
    }
}

@media screen and (min-width:64em) {
    .card-body {
        font-size: 1.125em
    }
}

.card-tags {
    top: 0;
    left: 5%;
    font-size: .625em;
    position: absolute;
    z-index: 1
}

.card-footer {
    border-top: 1px solid rgba(0, 0, 0, .125);
    padding: 0 5%
}

.card-footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-bottom: .75em
}

.card-footer-list:after,
.card-footer-list:before {
    content: "";
    display: table
}

.card-footer-list:after {
    clear: both
}

.card-footer-list-item {
    font-size: .875em;
    float: left;
    width: 50%;
    padding-right: 0;
    padding-top: .75em
}

@media screen and (min-width:37.5em) {
    .card-footer-list-item {
        width: 25%
    }
}

.card-footer-list-item-disabled {
    opacity: .5
}

.card-footer-list-item-link:hover {
    text-decoration: underline
}

@media print {
    .card-footer-list-item-link:after {
        content: " (" attr(href) ")";
        font-size: .75em
    }
}

@media print {
    .card-footer-list-item {
        float: none;
        width: 100%
    }
}

.card-featured .card-tags {
    top: 1em;
    font-size: .75em
}

@media screen and (min-width:37.5em) {
    .card-featured .card-tags {
        font-size: .875em
    }
}

@media screen and (min-width:64em) {
    .card-featured .card-tags {
        font-size: 1em
    }
}

.card-featured-image {
    background: #f1f1f1;
    color: transparent;
    border-bottom: .125em solid rgba(0, 0, 0, .125)
}

.card-featured-image img {
    display: block;
    width: 100%
}

@media screen and (min-width:50em) {
    .card-centered .card-link {
        text-align: center;
        min-height: 12em
    }
}

.card-compact .card-link {
    height: auto
}

.card-compact .card-footer-list-item {
    font-size: .75em
}

@media screen and (min-width:37.5em) {
    .card-compact .card-content {
        padding: 2.5%
    }
    .card-compact .card-title {
        font-size: 1.125em
    }
    .card-compact .card-footer {
        padding: 0 2.5%
    }
    .card-compact .card-footer-list-item {
        font-size: .875em
    }
}

@media screen and (min-width:64em) {
    .card-compact .card-title {
        font-size: 1.25em
    }
    .card-compact .card-body {
        font-size: 1em
    }
}

@media print {
    .card {
        height: auto!important
    }
}

.collapse-item-header {
    position: relative;
    cursor: pointer;
    padding-right: 3em
}

.collapse-item-header-icon {
    width: 3em;
    height: 3em;
    float: left;
    margin-right: 1em
}

.collapse-item .icon-chevron-down {
    position: absolute;
    right: 4%;
    top: 50%;
    margin-top: -.5em;
    opacity: .5
}

.planner-tabs-content-tab .collapse-item .icon-chevron-down {
    right: 0
}

.collapse-item-open .icon-chevron-down {
    transform: rotate(180deg)
}

.collapse-item-header:hover .icon-chevron-down {
    opacity: 1
}

.collapse-item-content {
    clear: both;
    display: none
}

.collapse-item-open .collapse-item-content {
    display: block
}

.collapse-item-content .btn,
.collapse-item-content p {
    margin-top: 1em
}

.collapse-item-small {
    font-size: .75em
}

.cta-footer {
    padding: 5vw;
    clear: both;
    background: #f1f7e2
}

@media screen and (min-width:37.5em) {
    .cta-footer {
        text-align: center
    }
}

.cta-footer-contact,
.cta-footer-follow {
    background: #eef8fc
}

.cta-footer-contact .cta-footer-title-icon,
.cta-footer-follow .cta-footer-title-icon {
    color: #34acde
}

.cta-footer-title {
    margin: 0 auto .5em
}

@media screen and (min-width:37.5em) {
    .cta-footer-title {
        font-size: 1.5em;
        max-width: 30em
    }
}

.cta-footer-title-icon {
    display: block;
    font-size: 2em;
    margin-right: 0;
    margin-bottom: .25em;
    color: #94bf35
}

.cta-footer-description {
    margin: 0 auto .5em
}

@media screen and (min-width:37.5em) {
    .cta-footer-description {
        font-size: 1.125em;
        max-width: 32em
    }
}

.cta-footer-btn {
    display: inline-block;
    margin: 1em 2.5vw;
    font-size: .75em;
    text-align: center
}

@media screen and (min-width:37.5em) {
    .cta-footer-btn {
        font-size: 1em
    }
}

.cta-footer-btn-icon {
    transform: scale(1);
    transition: transform .2s cubic-bezier(.365, .095, .535, 1);
    border: .5em solid currentColor;
    width: 4em;
    height: 4em;
    line-height: 3em;
    border-radius: 100%;
    display: inline-block
}

.cta-footer-btn-icon:focus,
.cta-footer-btn-icon:hover {
    transform: scale(1.125)
}

.cta-footer-btn-icon:before {
    font-size: 1.33333em
}

.cta-footer-btn-text {
    display: block;
    padding-top: .25em
}

.cta-footer-btn-twitter {
    color: #55acee
}

.cta-footer-btn-facebook {
    color: #3b5998
}

.cta-footer-btn-linkedin {
    color: #4875b4
}

.cta-footer-btn-email {
    color: #e00b80
}

@media print {
    .cta-footer {
        display: none
    }
}

.graphic-page-section {
    background: #94bf35;
    clear: both;
    color: #fff;
    position: relative
}

.graphic-page-section-green {
    background: #94bf35
}

.graphic-page-section-red {
    background: #cd1620
}

.graphic-page-section-blue {
    background: #34acde
}

.graphic-page-section-orange {
    background: #e64f29
}

.graphic-page-section-pink {
    background: #e00b80
}

.graphic-page-section-dark-green {
    background: #208135
}

.graphic-page-section-purple {
    background: #622e80
}

.graphic-page-section:after {
    content: "";
    display: block;
    padding-bottom: 20%
}

@media print {
    .graphic-page-section:after {
        padding-bottom: 0
    }
}



.graphic-page-section.graphic-page-section-kc-active-travel:after {
    padding-bottom: 0%;
}

@media screen and (min-width:64em) {
    .graphic-page-section:after {
        display: none
    }
    .graphic-page-section:before {
        content: "";
        display: block;
        padding-bottom: 36%
    }

    .graphic-page-section.graphic-page-section-kc-active-travel {
        min-height: 510px;
    }

    .graphic-page-section-kc-active-travel .graphic-page-section-inner {
        top: 0;
        left: 5vw;
        transform: none;
        margin: 0;  
        padding-top: 0;
    }

    .graphic-page-section.graphic-page-section-kc-active-travel:after {
        padding-bottom: 20%;
    }


}

.graphic-page-section:first-child * {
    z-index: 5
}

.graphic-page-section-white {
    background: #fff;
    color: #525252
}

.graphic-page-section-nearly-white {
    background: #f8f8f8;
    color: #525252
}

.graphic-page-section-animation {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1
}

@media print {
    .graphic-page-section-animation {
        display: none
    }
}

.graphic-page-section-inner {
    padding: 5vw 0;
    max-width: 42em;
    width: 90%;
    z-index: 1;
    position: relative;
    margin: auto
}

@media screen and (min-width:64em) {
    .graphic-page-section-inner {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%)
    }
}

.graphic-page-section-header {
    font-size: 1em
}

@media screen and (min-width:37.5em) {
    .graphic-page-section-header {
        font-size: 1.125em
    }
}

@media screen and (min-width:64em) {
    .graphic-page-section-header {
        font-size: 1.25em
    }
}

.graphic-page-section-title {
    color: inherit;
    margin-bottom: .25em
}

.graphic-page-section-title small {
    font-size: 1em;
    font-weight: 400;
    display: block
}

.graphic-page-section-body {
    color: inherit
}

.graphic-page-section-centered {
    text-align: center
}

@media print {
    .graphic-page-section-centered {
        text-align: left
    }
}

.graphic-page-section-left {
    text-align: left
}

.graphic-page-section-right {
    text-align: right
}

@media print {
    .graphic-page-section-right {
        text-align: left
    }
}

@media screen and (min-width:64em) {
    .graphic-page-section-two-col {
        float: left;
        width: 50%;
        clear: none
    }
    .graphic-page-section-two-col:before {
        padding-bottom: 72%
    }
    .graphic-page-section-two-col .graphic-page-section-inner {
        max-width: 30em
    }
}

.graphic-page-section-bigger-text .graphic-page-section-header {
    font-size: 1.25em
}

@media screen and (min-width:37.5em) {
    .graphic-page-section-bigger-text .graphic-page-section-header {
        font-size: 1.5em
    }
}

@media screen and (min-width:64em) {
    .graphic-page-section-bigger-text .graphic-page-section-header {
        font-size: 1.75em
    }
}

.graphic-page-section-lovetoride-challenge:before {
    padding-bottom: 40%
}

.graphic-page-section-kc-app-banner .graphic-page-section-inner,
.graphic-page-section-lovetoride-challenge .graphic-page-section-inner {
    top: 0;
    left: 5vw;
    transform: none;
    margin: 0
}

.graphic-page-section-kc-switch-banner {
    background: #eae5e1;
    overflow: hidden;
    position: relative
}

.graphic-page-section-kc-switch-banner .graphic-page-section-animation {
    top: 0
}

.graphic-page-section-kc-switch-banner .graphic-page-section-inner {
    top: 0;
    left: 5vw;
    transform: none;
    margin: 0;
    max-width: 30em
}

@media screen and (min-width:64em) {
    .graphic-page-section-kc-switch-banner .graphic-page-section-inner {
        max-width: 42em
    }
}

.graphic-page-section-kc-switch-banner .kc-switch-banner-cycling,
.graphic-page-section-kc-switch-banner .kc-switch-banner-walking {
    position: absolute
}

.graphic-page-section-kc-switch-banner .kc-switch-banner-walking {
    display: none;
    right: 5em
}

@media screen and (min-width:1200px) {
    .graphic-page-section-kc-switch-banner .kc-switch-banner-walking {
        display: block;
        top: -10%
    }
}

@media screen and (min-width:87.5em) {
    .graphic-page-section-kc-switch-banner .kc-switch-banner-walking {
        top: 0
    }
}

.graphic-page-section-kc-switch-banner .kc-switch-banner-cycling {
    bottom: -35%;
    right: 0
}

@media screen and (min-width:50em) {
    .graphic-page-section-kc-switch-banner .kc-switch-banner-cycling {
        bottom: -25%
    }
}

@media screen and (min-width:64em) {
    .graphic-page-section-kc-switch-banner .kc-switch-banner-cycling {
        bottom: -5%
    }
}

@media screen and (min-width:87.5em) {
    .graphic-page-section-kc-switch-banner .kc-switch-banner-cycling {
        bottom: 0
    }
}

@media print {
    .graphic-page-section {
        color: #000
    }
}

.definition-list dt {
    opacity: .5;
    text-transform: uppercase
}

.definition-list dd {
    margin: 0 0 1em
}

@media screen and (min-width:37.5em) {
    .definition-list:after,
    .definition-list:before {
        content: "";
        display: table
    }
    .definition-list:after {
        clear: both
    }
    .definition-list dt {
        width: 20%;
        margin-right: 5%;
        clear: both;
        margin-bottom: 1em;
        float: left
    }
    .definition-list dd {
        width: 75%;
        float: right
    }
    .definition-list dd+dd {
        margin-top: -1em
    }
}

.header-hero {
    padding: 5vw 5vw 0;
    position: relative
}

.header-hero,
.header-hero-green {
    color: #94bf35
}

.header-hero-red {
    color: #cd1620
}

.header-hero-blue {
    color: #34acde
}

.header-hero-orange {
    color: #e64f29
}

.header-hero-pink {
    color: #e00b80
}

.header-hero-dark-green {
    color: #208135
}

.header-hero-purple {
    color: #622e80
}

.header-hero * {
    position: relative;
    z-index: 5
}

.header-hero-icon {
    width: 20%;
    margin: 0 auto;
    max-width: 8em;
    opacity: .5
}

.header-hero-icon svg {
    width: 100%;
    height: auto;
    display: inline-block
}

@media screen and (min-width:64em) {
    .header-hero-icon {
        float: right;
        margin: -3em 5vw;
        max-width: 12em
    }
}

@media print {
    .header-hero-icon {
        display: none
    }
}

.header-hero-green .header-hero-animation [fill="#000"],
.header-hero .header-hero-animation [fill="#000"] {
    fill: #d3e6a7
}

.header-hero-red .header-hero-animation [fill="#000"] {
    fill: #f28a8f
}

.header-hero-blue .header-hero-animation [fill="#000"] {
    fill: #b8e2f3
}

.header-hero-orange .header-hero-animation [fill="#000"] {
    fill: #f6c0b2
}

.header-hero-pink .header-hero-animation [fill="#000"] {
    fill: #f98bc7
}

.header-hero-dark-green .header-hero-animation [fill="#000"] {
    fill: #62d87c
}

.header-hero-purple .header-hero-animation [fill="#000"] {
    fill: #af78cf
}

.header-hero-green .header-hero-animation [stroke="#000"],
.header-hero .header-hero-animation [stroke="#000"] {
    stroke: #d3e6a7
}

.header-hero-red .header-hero-animation [stroke="#000"] {
    stroke: #f28a8f
}

.header-hero-blue .header-hero-animation [stroke="#000"] {
    stroke: #b8e2f3
}

.header-hero-orange .header-hero-animation [stroke="#000"] {
    stroke: #f6c0b2
}

.header-hero-pink .header-hero-animation [stroke="#000"] {
    stroke: #f98bc7
}

.header-hero-dark-green .header-hero-animation [stroke="#000"] {
    stroke: #62d87c
}

.header-hero-purple .header-hero-animation [stroke="#000"] {
    stroke: #af78cf
}

.header-hero-green .header-hero-animation [fill="#ccc"],
.header-hero .header-hero-animation [fill="#ccc"] {
    fill: #94bf35
}

.header-hero-red .header-hero-animation [fill="#ccc"] {
    fill: #cd1620
}

.header-hero-blue .header-hero-animation [fill="#ccc"] {
    fill: #34acde
}

.header-hero-orange .header-hero-animation [fill="#ccc"] {
    fill: #e64f29
}

.header-hero-pink .header-hero-animation [fill="#ccc"] {
    fill: #e00b80
}

.header-hero-dark-green .header-hero-animation [fill="#ccc"] {
    fill: #208135
}

.header-hero-purple .header-hero-animation [fill="#ccc"] {
    fill: #622e80
}

.header-hero-green .header-hero-animation [fill="#CCC"],
.header-hero .header-hero-animation [fill="#CCC"] {
    fill: #94bf35
}

.header-hero-red .header-hero-animation [fill="#CCC"] {
    fill: #cd1620
}

.header-hero-blue .header-hero-animation [fill="#CCC"] {
    fill: #34acde
}

.header-hero-orange .header-hero-animation [fill="#CCC"] {
    fill: #e64f29
}

.header-hero-pink .header-hero-animation [fill="#CCC"] {
    fill: #e00b80
}

.header-hero-dark-green .header-hero-animation [fill="#CCC"] {
    fill: #208135
}

.header-hero-purple .header-hero-animation [fill="#CCC"] {
    fill: #622e80
}

@media screen and (min-width:64em) {
    .header-hero-animation {
        float: right;
        width: 50%;
        max-width: 40em;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        overflow: hidden
    }
    .header-hero-animation:after {
        content: "";
        z-index: 10;
        position: absolute;
        top: -5em;
        left: 0;
        bottom: -5em;
        right: -5em;
        box-shadow: inset 0 0 5em 3.33333em #94bf35
    }
}

@media print {
    .header-hero-animation {
        display: none
    }
}

@media screen and (min-width:64em) {
    .header-hero-green .header-hero-animation:after {
        box-shadow: inset 0 0 5em 3.33333em #94bf35
    }
    .header-hero-red .header-hero-animation:after {
        box-shadow: inset 0 0 5em 3.33333em #cd1620
    }
    .header-hero-blue .header-hero-animation:after {
        box-shadow: inset 0 0 5em 3.33333em #34acde
    }
    .header-hero-orange .header-hero-animation:after {
        box-shadow: inset 0 0 5em 3.33333em #e64f29
    }
    .header-hero-pink .header-hero-animation:after {
        box-shadow: inset 0 0 5em 3.33333em #e00b80
    }
    .header-hero-dark-green .header-hero-animation:after {
        box-shadow: inset 0 0 5em 3.33333em #208135
    }
    .header-hero-purple .header-hero-animation:after {
        box-shadow: inset 0 0 5em 3.33333em #622e80
    }
}

.header-hero-byline {
    margin: 0;
    position: relative;
    z-index: 4
}

.header-hero-byline a {
    text-decoration: none;
    color: inherit
}

.header-hero-byline a:hover {
    color: #34acde
}

.header-hero-solid-banner .header-hero-byline a:hover {
    color: inherit;
    text-decoration: underline
}

.header-hero-byline-icon {
    max-width: 1.875em;
    width: 100%;
    display: inline-block;
    vertical-align: middle
}

.header-hero-byline-icon svg {
    display: inline-block;
    max-height: 1.5em;
    width: auto;
    max-width: 100%;
    vertical-align: middle
}

.header-hero-byline-icon path {
    fill: currentColor
}

@media screen and (min-width:37.5em) {
    .header-hero-byline {
        font-size: 1.25em
    }
}

@media screen and (min-width:64em) {
    .header-hero-byline {
        font-size: 1.5em;
        text-align: left
    }
}

@media print {
    .header-hero-byline {
        display: none
    }
}

.header-hero-title {
    color: inherit
}

@media screen and (min-width:37.5em) {
    .header-hero-title {
        font-size: 2.5em
    }
}

@media screen and (min-width:64em) {
    .header-hero-title {
        font-size: 3em
    }
    .header-hero-solid-banner .header-hero-title {
        width: 66%
    }
}

@media print {
    .header-hero-title {
        text-align: left
    }
}

@media screen and (min-width:37.5em) {
    .header-hero-subtitle {
        font-size: 1.5em
    }
}

@media screen and (min-width:64em) {
    .header-hero-subtitle {
        font-size: 1.75em;
        width: 66%
    }
}

@media print {
    .header-hero-subtitle {
        text-align: left
    }
}

.header-hero-centered {
    text-align: center
}

.header-hero-centered .header-hero-subtitle,
.header-hero-centered .header-hero-title {
    width: 100%
}

.header-hero-solid-banner {
    color: #fff;
    padding-bottom: 5vw;
    text-align: center
}

@media screen and (min-width:64em) {
    .header-hero-solid-banner {
        text-align: left
    }
}

.header-hero-solid-banner-title {
    color: #fff
}

.header-hero-solid-banner.header-hero,
.header-hero-solid-banner.header-hero-green {
    background: #94bf35
}

.header-hero-solid-banner.header-hero-red {
    background: #cd1620
}

.header-hero-solid-banner.header-hero-blue {
    background: #34acde
}

.header-hero-solid-banner.header-hero-orange {
    background: #e64f29
}

.header-hero-solid-banner.header-hero-pink {
    background: #e00b80
}

.header-hero-solid-banner.header-hero-dark-green {
    background: #208135
}

.header-hero-solid-banner.header-hero-purple {
    background: #622e80
}

.header-hero-solid-banner .header-hero-byline-icon {
    display: none
}

.header-hero-commute-smarter {
    background: url(../images/base/bg-traffic-rainbow.40109ac5.svg) 0 bottom no-repeat;
    background-size: 100%;
    min-height: 35vw;
    max-height: 30em;
    padding-bottom: 32vw
}

@media screen and (min-width:64em) {
    .header-hero-commute-smarter {
        padding-bottom: 0
    }
}

@media print {
    .header-hero-commute-smarter {
        min-height: 0;
        max-height: none;
        padding-bottom: 0
    }
}

.header-hero-travel-smarter-by {
    background: #34acde url(../images/base/bg-smarter-travel.03a9719f.svg) 0 bottom no-repeat;
    color: #fff;
    background-size: 100%;
    min-height: 35vw;
    max-height: 30em;
    padding-bottom: 32vw
}

@media print {
    .header-hero-travel-smarter-by {
        min-height: 0;
        max-height: none;
        padding-bottom: 0
    }
}

.header-hero-info-for {
    background: url(../images/base/bg-info-for.ebfccf4d.svg) 0 bottom no-repeat;
    background-size: 100%;
    min-height: 35vw;
    max-height: 30em;
    padding-bottom: 32vw
}

@media print {
    .header-hero-info-for {
        min-height: 0;
        max-height: none;
        padding-bottom: 0
    }
}

@media print {
    .header-hero {
        color: #000;
        padding: 2.5vw 5vw 0
    }
}
.map-search-inner .my-location {
    right: 73px;
    bottom: 17px;
    position: absolute;
}

.current-location {
    position: absolute;
    top: 12px;
    right: 15px;
    z-index: 100;
}
.current-location i,
.my-location {
    color: rgba(0,0,0,0.4);
    font-size: 25px;
    cursor: pointer;
    text-shadow: none !important;
}

.planner-search-location .current-location i {
    color: rgba(255,255,255,0.6);
}

.journey-planner-widget:after,
.journey-planner-widget:before {
    content: "";
    display: table
}

.journey-planner-widget:after {
    clear: both
}

.journey-planner-widget-form-rows {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.journey-planner-widget-form-row {
    margin-bottom: .5em;
    position: relative;
}

.journey-planner-widget-form-row:last-child {
    margin-bottom: 0
}

.journey-planner-widget-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip: rect(0, 0, 0, 0);
    border: 0
}

.journey-planner-widget-input {
    border: .125em solid rgba(0, 0, 0, .125);
    padding: .375em 40px .5em .375em;
    display: block;
    width: 100%;
    max-width: 100%
}

.journey-planner-widget-link {
    text-decoration: none;
    text-align: center;
    display: inline-block;
    padding: .75em;
    border-radius: .25em;
    border: .125em solid rgba(0, 0, 0, .125);
    background: #94bf35;
    color: #fff;
    margin-bottom: 1em;
    transition: background .2s cubic-bezier(.365, .095, .535, 1);
    cursor: pointer;
    line-height: 1.25em;
    display: block;
    width: 100%;
    max-width: 100%
}

.journey-planner-widget-link:focus,
.journey-planner-widget-link:hover {
    color: #34acde;
    background: #fff
}

.journey-planner-widget-link+.journey-planner-widget-link {
    margin-left: 1em
}

.journey-planner-widget-link.disabled,
.journey-planner-widget-link:disabled {
    cursor: not-allowed
}

.journey-planner-widget-submit {
    margin-top: 1em
}

@media screen and (min-width:64em) {
    .journey-planner-widget-split {
        text-align: center
    }
    .journey-planner-widget-split .journey-planner-widget-form-row {
        display: inline-block;
        width: 48%;
        padding: 0 .5em;
        position: relative;
    }
}

@media print {
    .journey-planner-widget {
        display: none
    }
}

.jp-widget-inner {
    background: #208135;
    color: #fff;
    min-height: 20.9em;
    padding: 1.5em
}

.jp-widget-heading {
    color: inherit;
    font-size: 24px;
    margin: 0 0 .5em;
    text-align: center
}

.jp-widget-intro {
    color: inherit;
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 20px;
    text-align: center
}

.jp-widget-form {
    margin-top: -.375em
}

.jp-widget-form,
.jp-widget-input-group {
    position: relative
}

.jp-widget-input-group label {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    left: 15px;
    position: absolute;
    top: 14px
}

.jp-widget-input {
    background: #156e2a;
    border: none;
    color: #fff;
    font-size: 13px;
    margin-top: .375em;
    padding: .75em 1em .75em 60px
}

.jp-widget-input:focus {
    color: #fff
}

.jp-widget-input::-webkit-input-placeholder {
    color: #60976b
}

.jp-widget-form-action {
    margin-top: 1.125em
}

.jp-widget-form-action .btn {
    background-color: #93c023;
    width: 100%
}

.jp-widget-footer {
    background: #f1f1f1;
    padding: .375em;
    text-align: center
}

.jp-widget-footer a:link,
.jp-widget-footer a:visited {
    color: #898a89;
    font-size: 13px;
    text-decoration: none
}

.links-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(0, 0, 0, .125);
    margin-bottom: 5vw
}

.links-list-item {
    border-bottom: 1px solid rgba(0, 0, 0, .125)
}

.links-list-item-link {
    color: #525252;
    padding: .75em 0;
    display: block
}

.links-list-item-link:focus,
.links-list-item-link:hover {
    color: #34acde
}

@media print {
    .links-list-item-link:after {
        content: " (" attr(href) ")";
        font-size: .75em
    }
}

.links-list-title {
    padding: .75em 0
}

.list-cards {
    list-style-type: none;
    margin: 0;
    padding: 0
}

.list-cards-item {
    margin-bottom: 1em
}

@media screen and (min-width:37.5em) {
    .list-cards-item {
        margin-bottom: 1.5em
    }
}

@media screen and (min-width:64em) {
    .list-cards-item {
        margin-bottom: 2em
    }
}

.list-cards-item .card:hover {
    border-color: rgba(0, 0, 0, .125)
}

@media print {
    .list-cards-item {
        page-break-inside: avoid
    }
    .list-cards-item .card {
        width: 50%
    }
}

@media screen and (min-width:50em) {
    .list-cards {
        margin-left: -1em;
        margin-right: -1em
    }
    .list-cards:after,
    .list-cards:before {
        content: "";
        display: table
    }
    .list-cards:after {
        clear: both
    }
    .list-cards-item {
        float: left;
        width: 50%;
        padding: 0 1em
    }
    .list-cards-1-col .list-cards-item {
        width: 100%
    }
}

@media screen and (min-width:64em) {
    .list-cards-item {
        width: 100%
    }
}

@media screen and (min-width:87.5em) {
    .list-cards-item {
        width: 50%
    }
    .list-cards-1-col .list-cards-item {
        width: 100%
    }
}

.list-cards~.article-main-footer {
    border-top: 0 none
}

.list-cards-grid {
    display: flex;
    flex-wrap: wrap
}

.list-cards-grid .list-cards-item {
    flex: 1 0 100%;
    display: flex
}

.list-cards-grid .list-cards-item .card {
    display: flex;
    width: 100%
}

.list-cards-grid .list-cards-item .card-link {
    display: block;
    width: 100%
}

@media print {
    .list-cards-grid .list-cards-item .card {
        display: block;
        height: auto!important;
        width: 50%
    }
}

@media print {
    .list-cards-grid .list-cards-item {
        display: block
    }
}

@media screen and (min-width:50em) {
    .list-cards-grid {
        margin-left: -1em;
        margin-right: -1em
    }
    .list-cards-grid:after,
    .list-cards-grid:before {
        content: "";
        display: table
    }
    .list-cards-grid:after {
        clear: both
    }
    .list-cards-grid .list-cards-item {
        flex: .5 0 50%;
        float: left;
        padding: 0 1em;
        flex-grow: 0
    }
}

@media screen and (min-width:64em) {
    .list-cards-grid .list-cards-item {
        flex: .33 0 33%
    }
    .list-cards-grid .card-centered .card-link {
        text-align: center;
        min-height: 12em
    }
}

@media print {
    .list-cards-grid {
        display: block
    }
}

@media screen and (min-width:64em) {
    .list-cards-grid-2-col .list-cards-item {
        width: 50%;
        flex: .5 0 50%;
        max-width: 50%
    }
    .list-cards-grid-2-col .list-cards-item:nth-child(odd) {
        clear: left
    }
    .list-cards-grid-3-col .list-cards-item {
        width: 33.3333%;
        max-width: 33.3333%
    }
    .list-cards-grid-3-col .list-cards-item:nth-child(3n+1) {
        clear: left
    }
}

@media print {
    .list-cards-1-col .list-cards-item,
    .list-cards-1-col .list-cards-item .card {
        width: 100%
    }
}

.list-filter {
    margin-bottom: 20px
}

.list-filter button {
    width: 24%;
    float: right;
    height: 2.75em;
    line-height: 2em;
    padding-top: 0;
    padding-bottom: 0;
    font-weight: 400
}

.list-filter select {
    border-color: #83c757;
    width: 75%
}

.list-filter select:focus {
    color: #34acde;
    background: #fff;
    box-shadow: 0 0 0 .125em rgba(0, 0, 0, .125)
}

.list-header {
    margin-bottom: 5%
}

.list-header:after,
.list-header:before {
    content: "";
    display: table
}

.list-header:after {
    clear: both
}

.list-header-title {
    opacity: .5;
    font-weight: 400;
    padding: .75em 0;
    float: left
}

@media print {
    .list-header-title {
        opacity: 1
    }
}

.list-header-sort {
    font-size: .875em;
    float: right;
    margin-bottom: 0;
    margin-left: 1em;
    margin-top: .25em;
    color: #898a89
}

.list-header-sort .icon {
    margin: 0 0 0 .5em
}

@media print {
    .list-header-sort {
        display: none
    }
}

.map-flush {
    margin: -5vw
}

.map-search {
    padding: 4.5em 5vw 5vw;
    background: #fff;
    display: block;
    position: absolute;
    top: 100%;
    width: 100vw;
    max-width: 90em;
    left: 0;
    pointer-events: auto;
    transform: translateY(-100%);
    transition: transform .3s linear .2s, top .2s cubic-bezier(.365, .095, .535, 1);
    box-shadow: 0 0 .25em 0 rgba(0, 0, 0, .125);
    z-index: 3
}

@media screen and (min-width:37.5em) {
    .map-search {
        padding-top: 1.5em
    }
}

.map-search-inner {
    position: relative;
    max-width: 40em;
    margin: auto
}

@media screen and (min-width:37.5em) {
    .map-search-inner {
        font-size: 1.25em
    }
}

@media screen and (min-width:64em) {
    .map-search-inner {
        font-size: 1.5em
    }
}

.map-search-inner .infobox {
    border: 1px solid #721c24;
    background-color: #f8d7da;
    color: #721c24;
    padding: 10px 20px;
    margin-bottom: 30px
}

.map-search-inner .infobox .icon {
    background-color: #721c24;
    color: #fff;
    padding: 3px 13px;
    margin-right: 10px
}

.map-search-trigger {
    right: 0;
    top: 0;
    position: absolute;
    min-width: 2em;
    text-align: center;
    font-size: 2em
}

.map-search-field {
    border-width: 0 0 .125em;
    width: calc(100% - 3em);
    text-indent: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.map-search-field:hover+.site-nav-search-btn {
    border-color: #cbcccb
}

.map-search-field:focus+.site-nav-search-btn {
    color: #34acde;
    border-color: #34acde
}

.map-search-btn {
    background: 0 none;
    margin: 0;
    width: 3em;
    position: absolute;
    border-radius: 0;
    border-width: 0 0 .125em;
    bottom: 0;
    right: 0;
    transition: color .2s cubic-bezier(.365, .095, .535, 1), border .2s cubic-bezier(.365, .095, .535, 1)
}

.map-search-is-open .map-search {
    display: block;
    transform: translate(0)
}

.nav-is-open .map-search {
    top: 0
}

@media screen and (min-width:64em) {
    .map-search {
        padding-top: 5vw;
        top: 0;
        transition: opacity .2s cubic-bezier(.365, .095, .535, 1), top 0s linear .2s, transform .3s linear .2s
    }
    .map-search-is-open .map-search {
        top: 0;
        transform: translate(0);
        transition: opacity .2s cubic-bezier(.365, .095, .535, 1), top 0s linear .2s, transform .15s linear .2s
    }
    .map-search-btn-icon {
        transform: scale(1.25)
    }
}

@media screen and (min-width:64em) {
    .map-search-is-open .map-search {
        top: 0
    }
}

.infobox header {
    padding-left: 26px;
    padding-top: 14px;
    padding-bottom: 14px;
    height: 93px
}

.infobox-header-ev {
    background-color: #2eb8f3
}

.infobox-header-bicycle {
    background-color: #e20613
}

.infobox-header-council_building {
    background-color: #248096
}

.infobox-header-car {
    background-color: #ef8400
}

.infobox-header-tablet {
    background-color: #dcdc3a
}

.infobox-header-house {
    background-color: #a6358a
}

.infobox-header-pedestrian {
    background-color: #59af30
}

.infobox-header-bus {
    background-color: #c70064
}

.infobox-header-train {
    background-color: #ff1919
}

.infobox {
    overflow: hidden
}

.infobubble-box {
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, .5)
}

.infobox h4 {
    font-size: 23px;
    font-family: sans-serif;
    font-weight: 700;
    margin-bottom: 29px
}

.infobox-body {
    padding: 39px 26px 15px;
    font-size: 16px;
    width: 370px
}

.infobox-body ul {
    list-style: none;
    padding-left: 0;
}

.article-main .text-content.map-information {
    text-align: center;
    margin: 0;
    padding: 0 5%
}

.article-main .text-content.map-information p {
    margin-bottom: 0
}

.modal {
    align-items: center;
    display: none;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000
}

.modal-inner {
    background: #fff;
    margin: .75em 1em;
    max-width: 44em;
    padding: 1.5em 1em;
    position: relative;
    text-align: center;
    z-index: 2
}

@media screen and (min-width:64em) {
    .modal-inner {
        padding: 2.5% 5%
    }
}

.modal-overlay {
    background: hsla(0, 0%, 100%, .8);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

.modal-heading {
    margin: 0
}

.modal-content {
    margin-top: 5%
}

.modal-footer {
    margin-top: 5%;
    text-align: center
}

.modal-close {
    background: none;
    border: 0;
    height: 1em;
    outline: none;
    padding: 0;
    position: absolute;
    right: 1em;
    text-indent: -9999em;
    top: .75em;
    width: 1em
}

.modal-close:after,
.modal-close:before {
    background: #000;
    content: "";
    height: .1em;
    left: 0;
    position: absolute;
    top: 50%;
    width: 100%
}

.modal-close:before {
    transform: rotate(45deg)
}

.modal-close:after {
    transform: rotate(-45deg)
}

.modal-open {
    display: flex
}

.post-meta {
    position: relative;
    padding-left: 5em;
    border-bottom: .125em solid rgba(0, 0, 0, .125);
    margin-bottom: 5%;
    padding-bottom: .75em
}

.post-meta:after,
.post-meta:before {
    content: "";
    display: table
}

.post-meta:after {
    clear: both
}

@media screen and (min-width:37.5em) {
    .post-meta {
        font-size: 1.125em
    }
}

.post-meta-author-avatar {
    position: absolute;
    left: 0;
    top: -.25em;
    width: 4em;
    height: 4em;
    color: transparent;
    border-radius: 100%;
    border: solid #34acde;
    border-width: .5em;
    background: #fff
}

.post-meta-author-name {
    font-size: 1.125em
}

.post-meta-author-name-prefix {
    font-size: .625em;
    display: block;
    text-transform: uppercase;
    font-weight: 400;
    color: #898a89
}

.post-meta-date {
    font-size: .75em
}

.post-meta-date-prefix {
    color: #898a89
}

.post-meta-date-only {
    padding-left: 0
}

.post-meta-date-only .post-meta-date {
    opacity: .5;
    font-size: .875em
}

@media print {
    .post-meta-date-only {
        border-bottom: 0 none;
        margin-bottom: 0;
        padding-bottom: 0
    }
}

.promo-card {
    background: #f1f1f1;
    padding: .75em 2em;
    border-radius: .25em;
    text-align: center;
    margin-bottom: 5vw;
    /*display: none*/
}

@media screen and (min-width:37.5em) {
    .promo-card {
        display: block
    }
    .promo-card-share-email {
        display: none
    }
}

@media screen and (min-width:64em) {
    .promo-card-share-email {
        display: block
    }
}

.promo-card-icon {
    width: 6em;
    margin: auto
}

.promo-card-icon svg {
    width: 100%
}

.promo-card-icon path {
    fill: #e64f29
}

.promo-card-icon.icon-journey {
    margin: 1em auto;
    width: 6em
}

.promo-card-icon.icon-journey path {
    fill: #208135
}

.promo-card-icon.icon-man-with-plus {
    margin: 1em auto
}

.promo-card-content .promo-card-body {
    margin-bottom: 1em
}

.promo-card-cycle-map,
.promo-card-share-email {
    margin-bottom: 0;
    margin-top: 1em
}

.promo-card-cycle-map .promo-card-title,
.promo-card-share-email .promo-card-title {
    margin-bottom: 1em
}

.promo-card-cycle-map .promo-card-body,
.promo-card-share-email .promo-card-body {
    display: none
}

@media screen and (min-height:43.75em) {
    .promo-card-cycle-map .promo-card-body,
    .promo-card-share-email .promo-card-body {
        display: block
    }
    .promo-card-cycle-map .promo-card-title,
    .promo-card-share-email .promo-card-title {
        margin-bottom: 0
    }
}

.promo-card-cycle-map .promo-card-icon,
.promo-card-share-email .promo-card-icon {
    display: none
}

@media screen and (min-height:50em) {
    .promo-card-cycle-map .promo-card-icon,
    .promo-card-share-email .promo-card-icon {
        display: block
    }
}

.related-title {
    padding: 5% 0
}

.related-list {
    list-style-type: none;
    margin: 0;
    padding: 0
}

.related-item {
    margin-bottom: 1em
}

@media screen and (min-width:37.5em) {
    .related-item {
        margin-bottom: 1.5em
    }
}

@media screen and (min-width:64em) {
    .related-item {
        margin-bottom: 2em
    }
}

.related-item-link {
    border: .125em solid rgba(0, 0, 0, .125);
    display: block;
    color: inherit;
    text-decoration: none
}

.related-item-image {
    float: left;
    padding: 5% 0 5% 5%;
    font-size: 1.5em;
    line-height: 1
}

.related-item-content {
    padding: 5%;
    overflow: hidden
}

.related-item-title {
    font-weight: 400
}

.related-item-meta {
    opacity: .5;
    text-transform: uppercase;
    font-size: .75em;
    margin: 1em 0 0
}

@media screen and (min-width:37.5em) {
    .related-green .related-item-image,
    .related .related-item-image {
        background: #94bf35
    }
    .related-red .related-item-image {
        background: #cd1620
    }
    .related-blue .related-item-image {
        background: #34acde
    }
    .related-orange .related-item-image {
        background: #e64f29
    }
    .related-pink .related-item-image {
        background: #e00b80
    }
    .related-dark-green .related-item-image {
        background: #208135
    }
    .related-purple .related-item-image {
        background: #622e80
    }
    .related-item-link {
        display: table;
        width: 100%
    }
    .related-item-image {
        display: table-cell;
        color: hsla(0, 0%, 100%, .5);
        float: none;
        vertical-align: middle;
        text-align: center;
        padding: 2.5%;
        width: 1%;
        font-size: 3em
    }
    .related-item-icon {
        width: 1.25em;
        text-align: center
    }
    .related-item-content {
        display: table-cell;
        float: none;
        padding: 2.5%
    }
}

@keyframes p {
    0% {
        transform: translateY(-100%)
    }
    to {
        transform: translate(0)
    }
}

.site-header {
    padding-top: 3em
}

.site-header,
.site-header-green:before,
.site-header:before {
    background: #94bf35
}

.site-header-red:before {
    background: #cd1620
}

.site-header-blue:before {
    background: #34acde
}

.site-header-orange:before {
    background: #e64f29
}

.site-header-pink:before {
    background: #e00b80
}

.site-header-dark-green:before {
    background: #208135
}

.site-header-purple:before {
    background: #622e80
}

.site-header-green {
    background: #94bf35
}

.site-header-red {
    background: #cd1620
}

.site-header-blue {
    background: #34acde
}

.site-header-orange {
    background: #e64f29
}

.site-header-pink {
    background: #e00b80
}

.site-header-dark-green {
    background: #208135
}

.site-header-purple {
    background: #622e80
}

@media screen and (min-width:37.5em) {
    .site-header {
        padding-top: 3.75em
    }
}

@media screen and (min-width:64em) {
    .site-header {
        padding-top: 4.5em
    }
}

.site-header:before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
    height: 3em;
    z-index: 4;
    max-width: 90em
}

@media screen and (min-width:37.5em) {
    .site-header:before {
        height: 3.75em
    }
}

@media screen and (min-width:64em) {
    .site-header:before {
        height: 4.5em
    }
}

.site-header-inner {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    max-width: 90em
}

@media screen and (min-width:64em) {
    .site-header-inner {
        z-index: 89
    }
}

.site-header-title {
    padding: .5em;
    background: #fff;
    display: inline-block;
    box-shadow: 0 0 0 .1em rgba(0, 0, 0, .125);
    margin: 0 0 0 5vw;
    font-size: 1em;
    z-index: 4000;
    position: fixed;
    top: 0;
    left: 0
}

@media screen and (min-width:37.5em) {
    .site-header-title {
        font-size: 1.25em
    }
}

@media screen and (min-width:64em) {
    .site-header-title {
        font-size: 1.75em;
        transition: padding-top .1s cubic-bezier(.365, .095, .535, 1)
    }
    .site-header-title:hover {
        padding-top: .75em
    }
}

@media screen and (min-width:90em) {
    .site-header-title {
        margin-left: calc((100% - 51.42857em)/2 + 5vw)
    }
}

.site-header-title-text {
    display: none
}

@media print {
    .site-header-title {
        box-shadow: none;
        padding: 0;
        position: static
    }
}

.site-header-logo {
    width: 2em;
    display: block;
    position: relative
}

.site-header-logo:before {
    content: "";
    display: block;
    padding-bottom: 131.06796%
}

.site-header-logo svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    height: auto
}

@media print {
    .site-header-logo {
        width: 4em
    }
}

.site-header-search-trigger {
    float: right;
    color: #fff;
    padding: .375em 1em;
    border-radius: .25em;
    background: rgba(0, 0, 0, .125);
    transition: background .2s cubic-bezier(.365, .095, .535, 1);
    margin: .375em 0
}

.site-header-search-trigger:hover {
    background: rgba(0, 0, 0, .25)
}

.site-header-search-trigger .site-header-search-icon {
    width: 1em;
    text-align: center
}

.site-header-search-trigger .site-header-search-icon-close {
    display: none;
    width: 1em;
    text-align: center
}

.search-is-open .site-header-search-trigger .site-header-search-icon {
    display: none
}

.search-is-open .site-header-search-trigger .site-header-search-icon-close {
    display: inline-block
}

@media screen and (min-width:37.5em) {
    .site-header-search-trigger {
        margin-top: .75em
    }
}

@media screen and (min-width:64em) {
    .site-header-search-trigger {
        display: none
    }
}

.nav-is-open .site-header-search-trigger,
.search-is-open .site-header-search-trigger {
    color: #1b1919
}

.site-header-nav-trigger {
    float: right;
    padding: .375em 1em;
    text-decoration: none;
    border-radius: .25em;
    background: rgba(0, 0, 0, .125);
    color: #fff;
    margin: .375em 5vw 0 2.5vw;
    transition: background .2s cubic-bezier(.365, .095, .535, 1)
}

.site-header-nav-trigger:hover {
    background: rgba(0, 0, 0, .25)
}

@media screen and (min-width:37.5em) {
    .site-header-nav-trigger {
        margin-top: .75em
    }
}

@media screen and (min-width:64em) {
    .site-header-nav-trigger {
        display: none
    }
}

.nav-is-open .site-header-nav-trigger span {
    display: none
}

.nav-is-open .site-header-nav-trigger:before {
    content: "Close"
}

.nav-is-open .site-header-nav-trigger,
.search-is-open .site-header-nav-trigger {
    color: #1b1919
}

@media print {
    .site-header {
        display: none
    }
}

.site-nav {
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 90;
    padding-top: 3em;
    box-shadow: 0 0 .25em 0 rgba(0, 0, 0, .125);
    transform: translateY(-100%);
    transition: transform .2s cubic-bezier(.365, .095, .535, 1);
    pointer-events: none
}

@media screen and (min-width:64em) {
    .site-nav {
        transform: translate(0);
        top: 0;
        background: none;
        right: auto;
        left: auto;
        width: 100%;
        max-width: 86em;
        padding-top: 0;
        box-shadow: none;
        animation-duration: .2s;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-timing-function: cubic-bezier(.365, .095, .535, 1);
        animation-direction: normal;
        padding-left: 5vw;
        padding-right: 1.66667vw
    }
    .site-nav-with-banner.site-nav-reverse {
        animation-direction: reverse;
        animation-name: p
    }
    .site-nav-with-banner.site-nav-stuck {
        position: absolute
    }
    .site-nav-with-banner.site-nav-not-top {
        position: fixed;
        animation-name: p
    }
}

.site-nav-list {
    list-style-type: none;
    margin: 0;
    padding: 1.5em 0;
    pointer-events: auto;
    max-height: 90vh;
    overflow-y: scroll;
}

@media screen and (min-width:64em) {
    .site-nav-list {
        margin-top: .375em;
        margin-left: 5.5em;
        padding: 0;
        border-radius: .25em;
        height: 3.5em;
        display: inline-block;
        width: calc(100% - 5.5em);
        margin-top: .75em;
        max-height: inherit;
        overflow-y: visible;
    }
}

@media screen and (min-width:64em) {
    .site-nav-item {
        float: left;
        margin-left: 1em
    }
}

.site-nav-link {
    display: block;
    text-decoration: none;
    padding: .375em 5vw;
    color: inherit;
    font-size: 1.25em;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);
    position: relative
}

.site-nav-link,
.site-nav-link:before {
    transition: background .2s cubic-bezier(.365, .095, .535, 1)
}

.site-nav-link:before {
    content: "";
    background: transparent;
    height: .35em;
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0
}

@media screen and (min-width:64em) {
    .site-nav-link:before {
        height: .75em
    }
}

.site-nav-link:focus,
.site-nav-link:hover {
    color: #34acde
}

@media screen and (min-width:64em) {
    .site-nav-link {
        color: #fff;
        padding: .75em .5em;
        font-size: 1em
    }
    .site-nav-link:focus,
    .site-nav-link:hover {
        color: #fff;
        background: hsla(0, 0%, 100%, .1)
    }
    .current-menu-item .site-nav-link {
        background: rgba(0, 0, 0, .125)
    }
}

.site-nav-link-with-subnav:after {
    content: "\2303";
    line-height: 1em;
    display: inline-block;
    transform: rotate(180deg);
    vertical-align: middle;
    transform-origin: center 37.5%;
    margin-left: .5em
}

.site-nav-item-search {
    float: right;
    display: none;
    margin-left: 0
}

.search-is-open .site-nav-item-search .site-nav-search-icon,
.site-nav-item-search .site-nav-search-icon-close {
    display: none
}

.search-is-open .site-nav-item-search .site-nav-search-icon-close {
    display: inline-block
}

.search-is-open .site-nav-item-search .site-nav-search-trigger {
    background: #fff;
    color: inherit;
    border-radius: .25em .25em 0 0
}

.search-is-open .site-nav-item-search .site-nav-search-trigger:before {
    background: #fff
}

@media screen and (min-width:64em) {
    .site-nav-item-search {
        display: block
    }
}

.site-nav-search-icon,
.site-nav-search-icon-close {
    transform: scale(1.25);
    width: 1em;
    text-align: center
}

.site-nav-item-open .site-nav-link-with-subnav:after {
    transform: rotate(0deg)
}

.site-nav-subnav-list {
    position: relative;
    background: #fff;
    margin: 0;
    padding: 0;
    list-style-type: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s cubic-bezier(.365, .095, .535, 1)
}

@media screen and (min-width:64em) {
    .site-nav-subnav-list {
        position: absolute;
        top: 0;
        width: 100vw;
        max-width: 90em;
        left: 0;
        text-align: center;
        box-shadow: 0 .1em .1em 0 rgba(0, 0, 0, .125);
        transition: opacity .2s cubic-bezier(.365, .095, .535, 1), transform 0s linear .2s, top 0s linear .2s;
        transform: translateY(-100%);
        opacity: 0;
        max-height: none
    }
}

@media screen and (min-width:64em) {
    .site-nav-subnav-item {
        display: inline-block
    }
}

.site-nav-subnav-link {
    padding: .375em 5vw;
    color: inherit;
    display: block
}

.site-nav-subnav-link:focus,
.site-nav-subnav-link:hover {
    color: #34acde
}

@media screen and (min-width:64em) {
    .site-nav-subnav-link {
        padding: 2.5vw 1.25vw
    }
}

.site-nav-subnav-icon {
    display: none;
    width: 6em;
    margin: auto
}

.site-nav-subnav-icon-green path,
.site-nav-subnav-icon path {
    fill: #94bf35
}

.site-nav-subnav-icon-red path {
    fill: #cd1620
}

.site-nav-subnav-icon-blue path {
    fill: #34acde
}

.site-nav-subnav-icon-orange path {
    fill: #e64f29
}

.site-nav-subnav-icon-pink path {
    fill: #e00b80
}

.site-nav-subnav-icon-dark-green path {
    fill: #208135
}

.site-nav-subnav-icon-purple path {
    fill: #622e80
}

@media screen and (min-width:64em) {
    .site-nav-subnav-icon {
        display: block;
        transform: scale(0);
        transition: transform .2s cubic-bezier(.365, .095, .535, 1)
    }
}

.site-nav-item-open .site-nav-link {
    background: #fff;
    color: inherit;
    border-radius: .25em .25em 0 0
}

.site-nav-item-open .site-nav-link:before {
    background: #fff
}

.site-nav-item-open .site-nav-subnav-list {
    max-height: 21em
}

@media screen and (min-width:64em) {
    .site-nav-item-open .site-nav-subnav-list {
        transition: opacity .2s cubic-bezier(.365, .095, .535, 1), transform 0s linear 0s, top 0s linear 0s;
        max-height: none;
        opacity: 1;
        transform: translate(0);
        top: 3.75em;
        top: 4.5em
    }
}

@media screen and (min-width:64em) {
    .site-nav-item-open .site-nav-subnav-icon {
        transform: scale(1);
        transition: transform .2s cubic-bezier(.365, .095, .535, 1)
    }
}

.site-nav-search {
    padding: 4.5em 5vw 5vw;
    background: #fff;
    display: block;
    position: absolute;
    top: 100%;
    width: 100vw;
    max-width: 90em;
    left: 0;
    pointer-events: auto;
    transform: translateY(-100%);
    transition: transform .2s cubic-bezier(.365, .095, .535, 1), top .2s cubic-bezier(.365, .095, .535, 1);
    box-shadow: 0 0 .25em 0 rgba(0, 0, 0, .125);
    z-index: -1
}

@media screen and (min-width:37.5em) {
    .site-nav-search {
        padding-top: 5.25em
    }
}

.site-nav-search-inner {
    position: relative;
    max-width: 40em;
    margin: auto
}

@media screen and (min-width:37.5em) {
    .site-nav-search-inner {
        font-size: 1.25em
    }
}

@media screen and (min-width:64em) {
    .site-nav-search-inner {
        font-size: 1.5em
    }
}

.site-nav-search-trigger {
    min-width: 3em;
    text-align: center
}

.site-nav-search-field {
    border-width: 0 0 .125em;
    width: calc(100% - 3em);
    text-indent: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.site-nav-search-field:hover+.site-nav-search-btn {
    border-color: #cbcccb
}

.site-nav-search-field:focus+.site-nav-search-btn {
    color: #34acde;
    border-color: #34acde
}

.site-nav-search-btn {
    background: 0 none;
    margin: 0;
    width: 3em;
    position: absolute;
    border-radius: 0;
    border-width: 0 0 .125em;
    top: 0;
    bottom: 0;
    right: 0;
    transition: color .2s cubic-bezier(.365, .095, .535, 1), border .2s cubic-bezier(.365, .095, .535, 1)
}

.search-is-open .site-nav-search {
    display: block;
    transform: translate(0)
}

.nav-is-open .site-nav-search {
    top: 0
}

@media screen and (min-width:64em) {
    .site-nav-search {
        padding-top: 5vw;
        top: 0;
        transition: opacity .2s cubic-bezier(.365, .095, .535, 1), top 0s linear .2s, transform 0s linear .2s;
        opacity: 0
    }
    .search-is-open .site-nav-search {
        top: 3.75em;
        opacity: 1;
        transform: translate(0);
        transition: opacity .2s cubic-bezier(.365, .095, .535, 1)
    }
    .site-nav-search-btn-icon {
        transform: scale(1.25)
    }
}

@media screen and (min-width:64em) {
    .search-is-open .site-nav-search {
        top: 4.5em
    }
}

.nav-is-open .site-nav {
    transform: translate(0)
}

@media print {
    .site-nav {
        display: none
    }
}

.site-footer {
    background: url(../images/base/bg-footer.feef77df.svg) 0 bottom no-repeat;
    background-size: 100%;
    transition: opacity .2s cubic-bezier(.365, .095, .535, 1), -webkit-filter .2s cubic-bezier(.365, .095, .535, 1);
    transition: filter .2s cubic-bezier(.365, .095, .535, 1), opacity .2s cubic-bezier(.365, .095, .535, 1);
    transition: filter .2s cubic-bezier(.365, .095, .535, 1), opacity .2s cubic-bezier(.365, .095, .535, 1), -webkit-filter .2s cubic-bezier(.365, .095, .535, 1)
}

.site-footer:after,
.site-footer:before {
    content: "";
    display: table
}

.site-footer:after {
    clear: both
}

@media screen and (min-width:64em) {
    .search-is-open .site-footer,
    .subnav-is-open .site-footer {
        filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /></filter></svg>#filter');
        -webkit-filter: grayscale(1);
        filter: grayscale(1);
        opacity: .5
    }
}

.site-footer-compact {
    background: none;
    margin-bottom: 0
}

.site-footer-compact .site-footer-inner {
    padding-bottom: 5vw;
    padding-top: 5vw
}

.site-footer-compact .site-footer-sub-footer {
    padding: 0
}

/*

.site-footer-compact .site-footer-nav-primary,
.site-footer-compact .site-footer-nav-secondary,
.site-footer-planner-footer {
    display: none
}

@media screen and (min-width:64em) {
    .site-footer-planner-footer {
        display: block
    }
}

*/

.site-footer-inner {
    margin-bottom: 10%
}

@media screen and (min-width:64em) {
    .site-footer-inner {
        padding: 5vw
    }
}

@media print {
    .site-footer-inner {
        margin-bottom: 0
    }
}

.site-footer-main-footer {
    overflow: hidden
}

.site-footer-nav-primary {
    background: hsla(0, 0%, 100%, .5);
    box-shadow: inset 0 0 0 .1em #f1f1f1
}

@media screen and (min-width:64em) {
    .site-footer-nav-primary {
        float: left;
        width: 30%;
        max-width: 20em;
        margin-right: 2.5%
    }
}

.site-footer-nav-primary-list {
    list-style-type: none;
    padding: 0;
    margin: 0 0 1em;
    overflow: hidden
}

@media screen and (min-width:64em) {
    .site-footer-nav-primary-list {
        margin-bottom: 0
    }
}

.site-footer-nav-primary-item {
    border: .05em solid #f1f1f1;
    border-width: 0 0 .1em
}

@media screen and (min-width:37.5em) {
    .site-footer-nav-primary-item {
        border-width: 0 .1em .1em 0;
        float: left;
        width: 50%
    }
}

@media screen and (min-width:64em) {
    .site-footer-nav-primary-item {
        width: 33.33%
    }
}


@media screen and (min-width:64em) {
    .site-footer-nav-primary-item {
        float: none;
        width: auto;
        border-width: 0 0 .1em
    }
}

.site-footer-nav-primary-link {
    text-decoration: none;
    color: inherit;
    font-weight: 700;
    display: block;
    padding: .75em 1em .75em 5vw;
}

.site-footer-nav-primary-link:focus,
.site-footer-nav-primary-link:hover {
    color: #34acde;
    background-color: #f7f7f7
}

.site-footer-nav-primary-link .icon {
    width: 1.75em;
    text-align: center;
    display: inline-block
}

@media screen and (min-width:64em) {
    .site-footer-nav-primary-link {
        padding-left: 1em
    }
}

@media print {
    .site-footer-nav-primary {
        display: none
    }
}

.site-footer-nav-secondary {
    overflow: hidden;
    max-width: 56.25em
}

@media screen and (min-width:64em) {
    .site-footer-nav-secondary {
        width: 67.5%
    }
}

.site-footer-nav-secondary-list {
    list-style-type: none;
    padding: 0;
    margin: 0
}

@media screen and (min-width:37.5em) {
    .site-footer-nav-secondary-item {
        float: left;
        width: 33.33%
    }
}

.site-footer-nav-secondary-link {
    text-decoration: none;
    color: inherit;
    font-weight: 700;
    display: block;
    padding: .375em 1em .375em 5vw
}

.site-footer-nav-secondary-link:focus,
.site-footer-nav-secondary-link:hover {
    color: #34acde;
    background-color: #f7f7f7
}

@media screen and (min-width:90em) {
    .site-footer-nav-secondary-link {
        padding-left: 1em
    }
}

@media print {
    .site-footer-nav-secondary {
        display: none
    }
}

.site-footer-subnav-secondary-list {
    list-style-type: none;
    margin: 0 0 1em;
    padding: 0
}

.site-footer-subnav-secondary-link {
    text-decoration: none;
    color: inherit;
    display: block;
    padding: .375em 1em .375em 5vw
}

.site-footer-subnav-secondary-link:focus,
.site-footer-subnav-secondary-link:hover {
    color: #34acde;
    background-color: #f7f7f7
}

@media screen and (min-width:90em) {
    .site-footer-subnav-secondary-link {
        padding-left: 1em
    }
}

.site-footer-sub-footer {
    padding-top: 3em
}

@media screen and (min-width:37.5em) {
    .site-footer-sub-footer {
        padding-top: .75em
    }
}

@media screen and (min-width:64em) {
    .site-footer-sub-footer {
        background: none;
        padding-top: 3em
    }
}

@media print {
    .site-footer-sub-footer {
        padding-top: 0
    }
}

.site-footer-branding {
    padding: .75em 5vw;
    overflow: hidden
}

@media screen and (min-width:37.5em) {
    .site-footer-branding {
        float: right;
        padding-top: 0
    }
}

@media screen and (min-width:90em) {
    .site-footer-branding {
        padding-right: 0
    }
}

@media print {
    .site-footer-branding {
        padding: 0 5vw
    }
}

.site-footer-logo {
    width: 3.5em;
    display: inline-block;
    margin-right: 1em;
    padding: .5em;
    background: #fff;
    border: 1px solid #f1f1f1;
    position: relative
}

.site-footer-logo:before {
    content: "";
    display: block;
    padding-bottom: 131.06796%
}

.site-footer-logo svg {
    position: absolute;
    top: .5em;
    left: .5em;
    max-width: 100%;
    width: calc(100% - 1em);
    height: auto;
    display: block
}

.kcc-logo {
    width: 6.5em;
    display: inline-block
}

.site-footer-tagline {
    opacity: .5
}

@media print {
    .site-footer-tagline {
        margin-bottom: 0;
        opacity: 1
    }
}

.site-footer-nav-tertiary {
    max-width: 37.5em
}

.site-footer-nav-tertiary-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    overflow: hidden
}

.site-footer-nav-tertiary-item {
    float: left;
    width: 33.33%
}

.site-footer-nav-tertiary-link {
    text-decoration: none;
    color: inherit;
    display: block;
    padding: .1875em 1em .1875em 5vw;
    font-size: .8em;
    color: #a8a8a8;
}

.site-footer-nav-tertiary-link:focus,
.site-footer-nav-tertiary-link:hover {
    color: #34acde;
    background-color: #f7f7f7
}

@media screen and (min-width:64em) {
    .site-footer-nav-tertiary-link {
        padding-left: 1em
    }
}

@media print {
    .site-footer-nav-tertiary {
        display: none
    }
}

.site-footer-smallprint {
    padding: .75em 5vw;
    opacity: .5
}

@media screen and (min-width:64em) {
    .site-footer-smallprint {
        padding-left: 1em
    }
}

.site-footer-smallprint span {
    font-size: .75em
}

.site-footer-smallprint a {
    font-size: .75em;
    display: inline-block;
    color: inherit;
    margin-left: 1em
}

@media print {
    .site-footer-smallprint a {
        display: none
    }
}

@media print {
    .site-footer-smallprint {
        opacity: 1;
        padding: .75em 5vw 0
    }
}

.social-media-cta {
    padding-left: 4em;
    position: relative;
    padding-top: 5%;
    margin-top: 5%
}

.social-media-cta-icon {
    width: 3em;
    position: absolute;
    left: 0;
    top: 1.5em
}

@media screen and (min-width:64em) {
    .social-media-cta-icon {
        top: 2em
    }
}

.social-media-cta-icon svg {
    width: 100%
}

.social-media-cta-title {
    margin: .5em 0 1em
}

.social-media-cta-btn {
    font-size: .875em
}

.social-media-cta-separator {
    padding: 0 1em;
    display: none
}

@media screen and (min-width:37.5em) {
    .social-media-cta {
        padding-left: 7em
    }
    .social-media-cta-icon {
        width: 6em
    }
    .social-media-cta-title {
        margin-top: 0
    }
    .social-media-cta-separator {
        display: inline-block
    }
}

@media print {
    .social-media-cta {
        display: none
    }
}

.tag {
    text-transform: uppercase;
    padding: .25em .5em;
    display: inline-block
}

.tag-icon {
    color: inherit
}

.tag-red {
    color: #cd1620;
    background: #f7b8bb
}

.tag-blue {
    color: #34acde;
    background: #e3f4fb
}

@media print {
    .tag-blue {
        background: #fff;
        color: #000
    }
}

.tag-green {
    color: #94bf35;
    background: #e7f2ce
}

@media print {
    .tag-green {
        background: #fff;
        color: #000
    }
}

.tag-orange {
    color: #e64f29;
    background: #fbe5e0
}

@media print {
    .tag-orange {
        background: #fff;
        color: #000
    }
}

.tag-grey {
    color: #898a89;
    background: #eff0ef
}

@media print {
    .tag-grey {
        background: #fff;
        color: #000
    }
}

.text-content {
    margin-bottom: 5%
}

.video-wrapper {
    padding-bottom: 56.25%;
    position: relative
}

.video-wrapper>:first-child {
    left: 0;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%
}

.video iframe {
    background: #fff
}

.events-section {
    padding: 9vw 10vw;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 1em
}

@media screen and (min-width:64em) {
    .events-section {
        margin-bottom: 0;
        padding: 5vw 10vw
    }
}

.events-section-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap-reverse
}

.events-section h3 {
    font-size: 36px
}

@media screen and (max-width:416px) {
    .events-section h3 {
        font-size: 28px
    }
}

.events-section-items {
    list-style: none;
    padding: 0;
    flex: 1;
    width: 100%;
    text-align: left
}

@media (-ms-high-contrast:active),
(-ms-high-contrast:none) {
    .events-section-items {
        flex: none
    }
}

.events-section-item {
    flex: 1
}

.events-section-item a {
    color: #000;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-decoration: none;
    border-bottom: 2px solid #e3edef;
    order: 2;
    flex-direction: column;
    padding: 1em 0
}

@media screen and (min-width:64em) {
    .events-section-item a {
        flex-direction: row
    }
}

.events-section-item-title {
    flex: 1;
    flex-shrink: 1;
    order: 2;
    width: 100%;
    font-weight: 700;
    clear: both;
    padding: 1.66667vw 1.25vw;
    color: #4a4a4a;
    font-size: 20px
}

@media screen and (min-width:64em) {
    .events-section-item-title {
        order: 1;
        flex: 3
    }
}

.events-section-item-title:hover {
    color: #01b4df
}

.events-section-item-meta {
    order: 1;
    width: 100%;
    flex: 1;
    display: flex;
    padding: 1vw 0;
    align-items: center
}

@media screen and (min-width:64em) {
    .events-section-item-meta {
        order: 2;
        justify-content: flex-end
    }
}

.events-section-item-meta-icon {
    margin-right: 2em
}

.events-section-item-meta-icon svg {
    height: 45px;
    width: 45px
}

.events-section-item-meta-date {
    color: #898a89;
    font-weight: 400;
    font-size: 1.2em;
    width: 6em
}

.events-section>a {
    display: inline-block;
    text-decoration: none;
    color: #154b61;
    font-size: 24px;
    background-color: transparent;
    text-align: center;
    line-height: 60px;
    border: 2px solid #154b61;
    height: 60px;
    width: 80vw;
    transition: all .2s ease-in-out;
    font-family: Poppins, sans-serif;
    font-weight: 600
}

@media screen and (min-width:64em) {
    .events-section>a {
        width: 280px;
        margin-top: 40px
    }
}

@media screen and (max-width:416px) {
    .events-section>a {
        font-size: 20px
    }
}

.events-section>a:active,
.events-section>a:focus,
.events-section>a:hover {
    color: #fff;
    background-color: #154b61
}

.events-calendar *,
.events-calendar:after,
.events-calendar:before {
    box-sizing: border-box
}

.events-calendar {
    transform: translateZ(0);
    width: 100%;
    margin: 0 auto;
    height: 470px;
    overflow: hidden
}

.events-calendar .header {
    height: 60px;
    width: 100%;
    background: #2eb8f3;
    text-align: center;
    position: relative;
    z-index: 100
}

.events-calendar .header h1 {
    color: #fff;
    margin: 0;
    padding: 0;
    font-size: 20px;
    line-height: 60px;
    font-weight: 100;
    letter-spacing: 1px
}

.events-calendar .left,
.events-calendar .right {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    top: 50%;
    margin-top: -7.5px;
    cursor: pointer
}

.events-calendar .left {
    border-width: 7.5px 10px 7.5px 0;
    border-color: transparent #fff transparent transparent;
    left: 20px
}

.events-calendar .right {
    border-width: 7.5px 0 7.5px 10px;
    border-color: transparent transparent transparent #fff;
    right: 20px
}

.events-calendar .month {
    opacity: 0
}

.events-calendar .month.new {
    -webkit-animation: w 1s ease-out;
    opacity: 1
}

.events-calendar .month.in.next {
    animation: t .4s ease-out;
    opacity: 1
}

.events-calendar .month.out.next {
    animation: s .4s ease-in;
    opacity: 1
}

.events-calendar .month.in.prev {
    animation: v .4s ease-out;
    opacity: 1
}

.events-calendar .month.out.prev {
    animation: u .4s ease-in;
    opacity: 1
}

.events-calendar .day,
.events-calendar .week {
    background: transparent
}

.events-calendar .day {
    display: inline-block;
    width: 14.2857%;
    padding: 10px;
    text-align: center;
    vertical-align: top;
    cursor: pointer;
    position: relative;
    z-index: 100;
    color: #646464
}

.events-calendar .day.other {
    color: #dadada
}

.events-calendar .day.today {
    color: #343434
}

.events-calendar .day-name {
    margin-bottom: 5px;
    font-weight: 700;
    color: #666;
    letter-spacing: .7px
}

.events-calendar .day-number {
    letter-spacing: 1.5px
}

.events-calendar .day .day-events {
    list-style: none;
    margin-top: 3px;
    text-align: center;
    height: 8px;
    line-height: 10px;
    padding-left: 3px
}

.events-calendar .day .day-events span {
    vertical-align: top;
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 8px;
    height: 8px;
    line-height: 8px;
    margin: 0 1px;
    border-radius: 8px
}

.events-calendar .blue {
    background: #9ccaeb
}

.events-calendar .orange {
    background: #f7a700
}

.events-calendar .green {
    background: #99c66d
}

.events-calendar .yellow {
    background: #f9e900
}

.events-calendar .day-events .blue,
.events-calendar .day-events .green,
.events-calendar .day-events .orange,
.events-calendar .day-events .yellow {
    background: #75dcff
}

.events-calendar .details {
    position: relative;
    width: 100%;
    height: 75px;
    background: #75dcff;
    margin-top: 5px;
    border-radius: 4px
}

.events-calendar .details.in {
    animation: q .5s ease both
}

.events-calendar .details.out {
    animation: r .5s ease both
}

.events-calendar .arrow {
    position: absolute;
    top: -5px;
    left: 50%;
    margin-left: -2px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 5px;
    border-color: transparent transparent #75dcff;
    transition: all .7s ease
}

.events-calendar .events {
    height: 75px;
    padding: 7px 0;
    overflow-y: auto;
    overflow-x: hidden
}

.events-calendar .events.in {
    animation: w .3s ease both;
    animation-delay: .3s
}

.events-calendar .details.out .events {
    animation: y .4s ease both
}

.events-calendar .events.out {
    animation: x .3s ease both
}

.events-calendar .event {
    font-size: 16px;
    line-height: 22px;
    letter-spacing: .5px;
    padding: 2px 16px;
    vertical-align: top
}

.events-calendar .event.empty {
    color: #eee
}

.events-calendar .event-category {
    height: 10px;
    width: 10px;
    display: inline-block;
    margin: 6px 0 0;
    vertical-align: top
}

.events-calendar .event span {
    color: #fff;
    display: inline-block;
    padding: 0 0 0 7px
}

.events-calendar .event span a {
    color: #000;
    border-bottom: 1px solid #000
}

.events-calendar .legend {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    background: transparent;
    line-height: 30px
}

.events-calendar .entry {
    position: relative;
    padding: 0 0 0 25px;
    font-size: 13px;
    display: inline-block;
    line-height: 30px;
    background: transparent
}

.events-calendar .entry:after {
    position: absolute;
    content: "";
    height: 5px;
    width: 5px;
    top: 12px;
    left: 14px
}

.events-calendar .entry.blue:after {
    background: #9ccaeb
}

.entry.orange:after {
    background: #f7a700
}

.entry.green:after {
    background: #99c66d
}

.entry.yellow:after {
    background: #f9e900
}

@keyframes q {
    0% {
        height: 0;
        margin-top: 0;
        transform: translateY(-100%)
    }
}

@keyframes r {
    to {
        height: 0;
        transform: translateY(-100%)
    }
}

@keyframes s {
    to {
        opacity: 0;
        -moz-transform: translateY(-30%)
    }
}

@keyframes t {
    0% {
        opacity: 0;
        -moz-transform: translateY(30%)
    }
}

@keyframes u {
    to {
        opacity: 0;
        -webkit-transform: translateY(30%)
    }
}

@keyframes v {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-30%)
    }
}

@keyframes w {
    0% {
        opacity: 0
    }
}

@keyframes x {
    to {
        opacity: 0
    }
}

@keyframes y {
    to {
        opacity: 0;
        padding: 0;
        height: 0
    }
}

.events-featured {
    clear: both;
    text-align: center;
    margin-bottom: 88px
}

.events-featured-inner {
    overflow: hidden
}

.events-featured h2.events-featured-title {
    text-align: center;
    font-size: 2em;
    color: #525252;
    margin-bottom: 55px;
    padding-top: 85px
}

.events-featured li,
.events-featured ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: left
}

.events-featured li {
    border: 2px solid #e1e1e1
}

.events-featured .events-featured-item-tag {
    text-transform: capitalize;
    font-size: 1.1em;
    margin: 21px 24px 5px
}

.events-featured .events-featured-item-tag i {
    margin-right: 7px;
    font-size: 1.2em
}

.events-featured .events-featured-item {
    width: 30%;
    float: left;
    margin-left: 2.5%;
    margin-bottom: 25px
}

@media screen and (max-width:37.5em) {
    .events-featured .events-featured-item {
        float: none;
        margin-left: 0;
        width: 100%
    }
}

.events-featured .events-featured-item-image {
    margin-bottom: 21px
}

.events-featured .events-featured-item-title {
    color: #4f4f4f;
    font-size: 1.4em;
    font-weight: 700;
    margin-left: 24px;
    margin-right: 24px;
    margin-bottom: 17px
}

.events-featured .events-featured-item-meta {
    margin-left: 24px;
    margin-right: 24px;
    padding-bottom: 20px;
    line-height: 2em;
    color: #676767;
    font-size: .9em
}

.events-featured .events-featured-item-meta-location {
    line-height: 1.3em
}

.events-featured .events-featured-item-meta .icon-calendar,
.events-featured .events-featured-item-meta .icon-pin {
    width: 21px;
    height: 20px;
    display: inline-block
}

.events-featured .events-featured-item-meta .icon-calendar {
    height: 19px;
    background-image: url(../images/icon-calendar.5834816b.png)
}

.events-featured .events-featured-item-meta .icon-pin {
    width: 14px;
    background-image: url(../images/icon-location.256d7335.png)
}

.events-featured .events-featured-item-meta div {
    display: inline-block;
    margin-right: 23px
}

.events-featured .events-featured-item-meta div i {
    font-size: 1.5em;
    margin-right: 5px;
    vertical-align: sub
}

.events-featured .btn.btn-secondary {
    margin-top: 25px;
    text-shadow: none;
    padding: 1em .75em;
    font-size: 1.1em
}

.events-featured .heavy-rail,
.events-featured .light-rail,
.events-featured .public-transport,
.events-featured .subway,
.events-featured .train,
.events-featured .transit {
    color: #34acde
}

.events-featured .bus {
    color: #cd1620
}

.events-featured .walk,
.events-featured .walking {
    color: #208135
}

.events-featured .bike,
.events-featured .cycle,
.events-featured .cycling {
    color: #94bf35
}

.events-featured .ferry {
    color: #622e80
}

.events-featured .motorbike {
    color: #e00b80
}

.events-featured .car,
.events-featured .driving {
    color: #e64f29
}

.events-featured .leaf {
    color: #94bf35
}

.events-featured .heartbeat {
    color: #cd1620
}

.article-main .events-featured .events-featured-item {
    width: 49%;
    float: left;
    margin-left: 2%;
    margin-right: 0;
    margin-bottom: 40px
}

.article-main .events-featured .events-featured-item .events-featured-item-meta div {
    margin-right: 5px
}

@media screen and (max-width:37.5em) {
    .article-main .events-featured .events-featured-item {
        float: none;
        margin-left: 0;
        width: 100%
    }
}

.article-main .events-featured .events-featured-item.item-odd {
    margin-left: 0;
    clear: left;
}

.event-subheader-item-image {
    margin-bottom: 21px
}

.event-subheader-item-image img {
    width: 100%;
    height: auto
}

.event-subheader-item-meta {
    text-align: center;
    padding-bottom: 20px;
    color: #676767;
    font-size: .9em
}

.event-subheader-item-meta .icon-calendar,
.event-subheader-item-meta .icon-pin {
    width: 21px;
    height: 20px;
    display: inline-block
}

.event-subheader-item-meta .icon-calendar {
    height: 19px;
    background-image: url(../images/icon-calendar.5834816b.png)
}

.event-subheader-item-meta .icon-pin {
    width: 14px;
    background-image: url(../images/icon-location.256d7335.png)
}

.event-subheader-item-meta div {
    display: inline-block;
    margin-right: 23px
}

.event-subheader-item-meta div i {
    font-size: 1.5em;
    margin-right: 5px
}

.event-subheader-item-meta div.event-subheader-item-tag {
    margin-right: 0
}

.event-subheader-item-tag .heavy-rail,
.event-subheader-item-tag .light-rail,
.event-subheader-item-tag .public-transport,
.event-subheader-item-tag .subway,
.event-subheader-item-tag .train,
.event-subheader-item-tag .transit {
    color: #34acde
}

.event-subheader-item-tag .bus {
    color: #cd1620
}

.event-subheader-item-tag .walk,
.event-subheader-item-tag .walking {
    color: #208135
}

.event-subheader-item-tag .bike,
.event-subheader-item-tag .cycle,
.event-subheader-item-tag .cycling {
    color: #94bf35
}

.event-subheader-item-tag .ferry {
    color: #622e80
}

.event-subheader-item-tag .motorbike {
    color: #e00b80
}

.event-subheader-item-tag .car,
.event-subheader-item-tag .driving {
    color: #e64f29
}

.event-subheader-item-tag .leaf {
    color: #94bf35
}

.event-subheader-item-tag .heartbeat {
    color: #cd1620
}

.password-form {
    padding: 5vw;
    max-width: 46.875em;
    margin: auto;
    overflow: hidden
}

@media screen and (min-width:64em) {
    .password-form {
        margin: 0
    }
}

.password-form label {
    padding: .75em 0;
    display: none
}

.password-form input {
    border: .2em solid rgba(0, 0, 0, .125);
    padding: .75em 1em;
    display: block;
    margin-bottom: 1em;
    width: 100%
}

.password-form button {
    border: .2em solid #85ab2f;
    padding: .75em 2em;
    display: block;
    float: right;
    background: #94bf35;
    color: #fff
}

.control-select {
    overflow: hidden;
    padding: 0;
    line-height: 2.75em;
    position: relative
}

.control-select-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    font-size: .875em;
    padding: 1em 1em .75em;
    background: #fff;
    z-index: 3;
    color: rgba(82, 82, 82, .5);
    pointer-events: none
}

.control-select select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    position: relative;
    z-index: 2;
    padding: 0;
    text-indent: 1em;
    padding-right: 4.2em;
    width: calc(100% + 3em);
    height: auto;
    border: 0 none
}

.control-select select[disabled] {
    background: #f1f1f1;
    z-index: 1
}

.control-select .suffix {
    z-index: 1
}

.control-checkbox,
.control-radio {
    line-height: 2em;
    cursor: pointer;
    position: relative;
    background: rgba(0, 0, 0, .125);
    border-color: transparent
}

.control-checkbox.active,
.control-checkbox:hover,
.control-radio.active,
.control-radio:hover {
    z-index: 1
}

.control-checkbox.active,
.control-radio.active {
    background: #fff;
    border-color: rgba(0, 0, 0, .125);
    font-weight: 700;
    cursor: default
}

.control-group {
    margin-bottom: 1em
}

.control-group-alert {
    font-size: .875em
}

.control-group-alert-negative {
    color: #cd1620
}

.control-group-prepended {
    position: relative
}

.control-group-prepended input {
    padding-left: 4em;
    text-indent: 0;
    padding-right: 35px;
}

.control-group-label-prepend {
    position: absolute;
    left: 0;
    padding: .75em 1em
}

.header-hero .control-group-label-prepend {
    z-index: 6
}

.negative {
    width: 100%
}

.negative-image {
    display: block;
    max-width: 80%;
    margin: 0 auto
}

@media print {
    .negative-image {
        margin: auto
    }
}

.negative-content {
    padding: .75em 1em;
    width: 100%
}

.negative-image+.negative-content {
    margin-top: -2em
}

.negative-svg+.negative-content {
    padding-top: 0
}

.negative-svg {
    margin: auto
}

.negative-svg-green svg *,
.negative-svg svg * {
    fill: #94bf35
}

.negative-svg-red svg * {
    fill: #cd1620
}

.negative-svg-blue svg * {
    fill: #34acde
}

.negative-svg-orange svg * {
    fill: #e64f29
}

.negative-svg-pink svg * {
    fill: #e00b80
}

.negative-svg-dark-green svg * {
    fill: #208135
}

.negative-svg-purple svg * {
    fill: #622e80
}

.negative-list {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center
}

.negative-list-item {
    display: inline-block;
    width: 100%
}

@media screen and (min-width:37.5em) {
    .negative-list-item {
        width: 49%;
        vertical-align: top
    }
}

@media screen and (min-width:64em) {
    .negative-list-item {
        width: 33%
    }
}

.positive-list {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center
}

.positive-list:after,
.positive-list:before {
    content: "";
    display: table
}

.positive-list:after {
    clear: both
}

.positive-list-item {
    margin: 1em 0 2em;
    display: inline-block;
    width: 100%;
    vertical-align: top
}

@media screen and (min-width:600px) {
    .positive-list-item {
        width: 49%;
        padding: .75em .5em
    }
}

@media screen and (min-width:992px) {
    .positive-list-item {
        width: 33%
    }
}

@media screen and (min-width:1200px) {
    .positive-list-item {
        width: 24%
    }
}

.positive-image {
    display: block;
    margin: 0 auto;
    max-height: 150px
}

.positive-content {
    padding-top: .75em
}

.positive-content h5 {
    margin: 0 0 .25em
}

.positive-content p {
    font-size: .875em;
    margin: 0
}

@media screen and (min-width:37.5em) {
    .positive-content p {
        height: 4.5em
    }
}

.campaign-page-block {
    padding: 5% 0
}

@media screen and (min-width:37.5em) {
    .campaign-page-block {
        font-size: 1.125em
    }
}

@media screen and (min-width:64em) {
    .campaign-page-block {
        font-size: 1.25em
    }
}

.campaign-page-block-header {
    text-align: center;
    padding: 5% 0
}

.campaign-page-block-header-highlight {
    color: #e64f29
}

.campaign-page-block-header-subtitle {
    opacity: .5;
    font-weight: 400;
    margin-bottom: .25em
}

@media print {
    .campaign-page-block-header-subtitle {
        opacity: 1
    }
}

@media print {
    .campaign-page-block-header {
        padding-bottom: 0;
        text-align: left
    }
}

.campaign-page-block-alt {
    background-color: #f8f9fb
}

.campaign-page-block-negatives {
    padding-bottom: 0
}

.campaign-page-block-positives {
    padding-top: 0
}

.campaign-page-block-comparison {
    background-color: #f1f7e2
}

.campaign-page-block-ymal {
    padding-top: 0
}

@media screen and (min-width:37.5em) {
    .campaign-page-block-ymal {
        font-size: 1em
    }
}

@media screen and (min-width:64em) {
    .campaign-page-block-ymal {
        font-size: 1em
    }
}

@media print {
    .campaign-page-block {
        padding: 0 5%
    }
    .campaign-page-block-poll {
        display: none
    }
}

.comparison-table {
    text-align: center;
    max-width: 40em;
    margin: 0 auto;
    background: #fff;
    font-size: .875em
}

@media screen and (min-width:37.5em) {
    .comparison-table {
        font-size: 1em
    }
}

.comparison-table-header {
    text-align: center;
    padding: 5% 0 2.5%
}

.comparison-table-header-title {
    font-weight: 400
}

.comparison-table-header-subtitle {
    font-size: 1.25em
}

.comparison-table-footer {
    text-align: center;
    font-size: .875em;
    padding: 5% 0
}

@media print {
    .comparison-table-footer a {
        display: none
    }
}

.comparison-table td {
    width: 50%;
    padding-left: 1em;
    padding-right: 2em
}

.comparison-table td:last-child {
    padding-left: 2em;
    padding-right: 1em
}

.comparison-table-head td {
    border-bottom: .25em solid #f1f7e2
}

.comparison-table tbody td,
.comparison-table tbody th {
    padding-top: 1.5em;
    padding-bottom: 1.5em
}

.comparison-table-row-title {
    width: 4em;
    position: absolute;
    left: 50%;
    margin-left: -2em
}

.comparison-table-mode-name {
    font-size: 1.25em
}

.comparison-table-vs-badge {
    text-align: center;
    width: 4em;
    height: 4em;
    line-height: 3.5em;
    border-radius: 100%;
    background-color: #fff;
    color: #34acde;
    font-weight: 400;
    margin-top: -1.375em;
    margin-left: -.5em;
    border: .25em solid #f1f7e2
}

.comparison-table-vs-badge:before {
    content: "VS";
    display: inline
}

.comparison-table-metric-title {
    color: #34acde
}

.comparison-table-metric-title .icon {
    font-size: 1.5em
}

.comparison-table-metric-primary {
    color: #2b2e34;
    margin-bottom: 0
}

.comparison-table-metric-secondary {
    font-size: .75em;
    margin-bottom: 0
}

.campaign-page-hero {
    background: #94bf35;
    padding-top: 2em;
    position: relative;
    text-align: center;
    z-index: 10
}

.campaign-page-hero-green {
    background: #94bf35
}

.campaign-page-hero-red {
    background: #cd1620
}

.campaign-page-hero-blue {
    background: #34acde
}

.campaign-page-hero-orange {
    background: #e64f29
}

.campaign-page-hero-pink {
    background: #e00b80
}

.campaign-page-hero-dark-green {
    background: #208135
}

.campaign-page-hero-purple {
    background: #622e80
}

.campaign-page-hero-green:before,
.campaign-page-hero:before {
    background: #94bf35
}

.campaign-page-hero-red:before {
    background: #cd1620
}

.campaign-page-hero-blue:before {
    background: #34acde
}

.campaign-page-hero-orange:before {
    background: #e64f29
}

.campaign-page-hero-pink:before {
    background: #e00b80
}

.campaign-page-hero-dark-green:before {
    background: #208135
}

.campaign-page-hero-purple:before {
    background: #622e80
}

.campaign-page-hero-green:after,
.campaign-page-hero:after {
    background: #94bf35
}

.campaign-page-hero-red:after {
    background: #cd1620
}

.campaign-page-hero-blue:after {
    background: #34acde
}

.campaign-page-hero-orange:after {
    background: #e64f29
}

.campaign-page-hero-pink:after {
    background: #e00b80
}

.campaign-page-hero-dark-green:after {
    background: #208135
}

.campaign-page-hero-purple:after {
    background: #622e80
}

.campaign-page-hero-green .campaign-page-hero-animation [fill="#000"],
.campaign-page-hero .campaign-page-hero-animation [fill="#000"] {
    fill: #d3e6a7
}

.campaign-page-hero-red .campaign-page-hero-animation [fill="#000"] {
    fill: #f28a8f
}

.campaign-page-hero-blue .campaign-page-hero-animation [fill="#000"] {
    fill: #b8e2f3
}

.campaign-page-hero-orange .campaign-page-hero-animation [fill="#000"] {
    fill: #f6c0b2
}

.campaign-page-hero-pink .campaign-page-hero-animation [fill="#000"] {
    fill: #f98bc7
}

.campaign-page-hero-dark-green .campaign-page-hero-animation [fill="#000"] {
    fill: #62d87c
}

.campaign-page-hero-purple .campaign-page-hero-animation [fill="#000"] {
    fill: #af78cf
}

.campaign-page-hero-green .campaign-page-hero-animation [stroke="#000"],
.campaign-page-hero .campaign-page-hero-animation [stroke="#000"] {
    stroke: #d3e6a7
}

.campaign-page-hero-red .campaign-page-hero-animation [stroke="#000"] {
    stroke: #f28a8f
}

.campaign-page-hero-blue .campaign-page-hero-animation [stroke="#000"] {
    stroke: #b8e2f3
}

.campaign-page-hero-orange .campaign-page-hero-animation [stroke="#000"] {
    stroke: #f6c0b2
}

.campaign-page-hero-pink .campaign-page-hero-animation [stroke="#000"] {
    stroke: #f98bc7
}

.campaign-page-hero-dark-green .campaign-page-hero-animation [stroke="#000"] {
    stroke: #62d87c
}

.campaign-page-hero-purple .campaign-page-hero-animation [stroke="#000"] {
    stroke: #af78cf
}

.campaign-page-hero-green .campaign-page-hero-animation [fill="#CCC"],
.campaign-page-hero .campaign-page-hero-animation [fill="#CCC"] {
    fill: #94bf35
}

.campaign-page-hero-red .campaign-page-hero-animation [fill="#CCC"] {
    fill: #cd1620
}

.campaign-page-hero-blue .campaign-page-hero-animation [fill="#CCC"] {
    fill: #34acde
}

.campaign-page-hero-orange .campaign-page-hero-animation [fill="#CCC"] {
    fill: #e64f29
}

.campaign-page-hero-pink .campaign-page-hero-animation [fill="#CCC"] {
    fill: #e00b80
}

.campaign-page-hero-dark-green .campaign-page-hero-animation [fill="#CCC"] {
    fill: #208135
}

.campaign-page-hero-purple .campaign-page-hero-animation [fill="#CCC"] {
    fill: #622e80
}

.campaign-page-hero-green .campaign-page-hero-animation [stroke="#CCC"],
.campaign-page-hero .campaign-page-hero-animation [stroke="#CCC"] {
    stroke: #94bf35
}

.campaign-page-hero-red .campaign-page-hero-animation [stroke="#CCC"] {
    stroke: #cd1620
}

.campaign-page-hero-blue .campaign-page-hero-animation [stroke="#CCC"] {
    stroke: #34acde
}

.campaign-page-hero-orange .campaign-page-hero-animation [stroke="#CCC"] {
    stroke: #e64f29
}

.campaign-page-hero-pink .campaign-page-hero-animation [stroke="#CCC"] {
    stroke: #e00b80
}

.campaign-page-hero-dark-green .campaign-page-hero-animation [stroke="#CCC"] {
    stroke: #208135
}

.campaign-page-hero-purple .campaign-page-hero-animation [stroke="#CCC"] {
    stroke: #622e80
}

.campaign-page-hero-green .campaign-page-hero-animation [fill="#ccc"],
.campaign-page-hero .campaign-page-hero-animation [fill="#ccc"] {
    fill: #94bf35
}

.campaign-page-hero-red .campaign-page-hero-animation [fill="#ccc"] {
    fill: #cd1620
}

.campaign-page-hero-blue .campaign-page-hero-animation [fill="#ccc"] {
    fill: #34acde
}

.campaign-page-hero-orange .campaign-page-hero-animation [fill="#ccc"] {
    fill: #e64f29
}

.campaign-page-hero-pink .campaign-page-hero-animation [fill="#ccc"] {
    fill: #e00b80
}

.campaign-page-hero-dark-green .campaign-page-hero-animation [fill="#ccc"] {
    fill: #208135
}

.campaign-page-hero-purple .campaign-page-hero-animation [fill="#ccc"] {
    fill: #622e80
}

.campaign-page-hero-green .campaign-page-hero-animation [stroke="#ccc"],
.campaign-page-hero .campaign-page-hero-animation [stroke="#ccc"] {
    stroke: #94bf35
}

.campaign-page-hero-red .campaign-page-hero-animation [stroke="#ccc"] {
    stroke: #cd1620
}

.campaign-page-hero-blue .campaign-page-hero-animation [stroke="#ccc"] {
    stroke: #34acde
}

.campaign-page-hero-orange .campaign-page-hero-animation [stroke="#ccc"] {
    stroke: #e64f29
}

.campaign-page-hero-pink .campaign-page-hero-animation [stroke="#ccc"] {
    stroke: #e00b80
}

.campaign-page-hero-dark-green .campaign-page-hero-animation [stroke="#ccc"] {
    stroke: #208135
}

.campaign-page-hero-purple .campaign-page-hero-animation [stroke="#ccc"] {
    stroke: #622e80
}

.campaign-page-hero-title {
    color: #fff;
    font-weight: 400;
    margin: 0 auto;
    padding: 0 5vw;
    max-width: 22em;
    position: relative;
    width: 100%;
    z-index: 10
}

@media screen and (min-width:37.5em) {
    .campaign-page-hero-title {
        font-size: 2em
    }
}

@media screen and (min-width:64em) {
    .campaign-page-hero-title {
        font-size: 2.5em
    }
}

@media print {
    .campaign-page-hero-title {
        color: #000;
        margin: auto;
        padding: 0;
        max-width: none
    }
}

.campaign-page-hero-subtitle {
    opacity: .75;
    color: #fff;
    font-weight: 400;
    margin: 1em 0 .25em
}

@media print {
    .campaign-page-hero-subtitle {
        color: #000;
        opacity: 1
    }
}

.campaign-page-hero-animation {
    max-width: 69em;
    margin: auto;
    padding: 1.5em 0;
    position: relative;
    overflow: hidden
}

.campaign-page-hero-animation:after {
    z-index: 10;
    position: absolute;
    top: -3em;
    left: 0;
    bottom: -3em;
    right: 0;
    box-shadow: inset 0 0 3em 2em #94bf35;
    content: ""
}

@media print {
    .campaign-page-hero-animation {
        display: none
    }
}

.campaign-page-hero-green .campaign-page-hero-animation:after {
    box-shadow: inset 0 0 3em 2em #94bf35
}

.campaign-page-hero-red .campaign-page-hero-animation:after {
    box-shadow: inset 0 0 3em 2em #cd1620
}

.campaign-page-hero-blue .campaign-page-hero-animation:after {
    box-shadow: inset 0 0 3em 2em #34acde
}

.campaign-page-hero-orange .campaign-page-hero-animation:after {
    box-shadow: inset 0 0 3em 2em #e64f29
}

.campaign-page-hero-pink .campaign-page-hero-animation:after {
    box-shadow: inset 0 0 3em 2em #e00b80
}

.campaign-page-hero-dark-green .campaign-page-hero-animation:after {
    box-shadow: inset 0 0 3em 2em #208135
}

.campaign-page-hero-purple .campaign-page-hero-animation:after {
    box-shadow: inset 0 0 3em 2em #622e80
}

@media print {
    .campaign-page-hero {
        padding: 0 5vw;
        text-align: left
    }
}

.poll .gform_wrapper {
    text-align: center
}

.poll .gform_body,
.poll .gform_footer {
    max-width: 22em;
    width: 100%;
    margin: auto
}

.poll .gform_heading {
    margin-top: -5%;
    padding-bottom: 5%
}

.poll .gform_title {
    opacity: .5;
    font-size: 1.25em;
    font-weight: 400;
    margin-bottom: .25em
}

.poll .gform_description,
.poll .gform_title {
    color: #2b2e34;
    font-family: co-headline, ubuntu, sans-serif
}

.poll .gform_description {
    font-size: 1.5em;
    font-weight: 700
}

.poll .gfield_radio,
.poll .gform_fields {
    list-style: none;
    margin: 0;
    padding: 0
}

.poll .gfield_label {
    display: none;
    visibility: hidden
}

.poll .gfield_radio li {
    position: relative;
    margin-bottom: 1em
}

.poll .gfield_radio li input {
    position: absolute;
    left: 1em;
    top: 1.125em;
    height: 1em;
    width: 1em
}

.poll .gfield_radio li label {
    border-radius: .25em;
    border: .125em solid rgba(0, 0, 0, .125);
    font-weight: 400;
    text-align: left;
    padding: .75em 1em;
    padding-left: 2.5em;
    cursor: pointer
}

.poll .gfield_radio li input:checked+label {
    border-color: #34acde
}

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

.poll .gform_confirmation_message {
    text-align: center;
    color: #94bf35;
    font-size: 1.5em;
    font-weight: 700;
    padding-top: 10%
}

.poll .gform_footer {
    padding-top: .75em
}

@media screen and (min-width:50em) {
    .campaign-v2-content {
        padding: 0 5vw 5vw
    }
}

@media screen and (min-width:50em) {
    .campaign-v2-content-first {
        padding-top: 5vw
    }
}

.campaign-v2-content__container {
    margin: 0 auto;
    width: 100%
}

@media (min-width:768px) {
    .campaign-v2-content__container {
        max-width: 750px
    }
}

@media screen and (min-width:50em) {
    .campaign-v2-content__container {
        display: flex
    }
}

.campaign-v2-content__content {
    order: 1;
    padding: .75em 1em 0;
    width: 100%
}

@media screen and (min-width:50em) {
    .campaign-v2-content__content {
        padding-top: 0;
        width: 56%
    }
    .campaign-v2-content__content--full-width {
        width: 100%
    }
    .campaign-v2-content__content p {
        margin-top: 0
    }
}

.campaign-v2-content__aside {
    margin-top: 1.5em;
    order: 0;
    width: 100%
}

@media screen and (min-width:50em) {
    .campaign-v2-content__aside {
        margin-top: 0;
        padding-right: 5vw;
        width: 44%
    }
    .campaign-v2-content__aside--pull-right {
        order: 1;
        padding-left: 5vw;
        padding-right: 0
    }
}

.campaign-v2-content__aside figure {
    margin: 0
}

.campaign-v2-content__aside figure img {
    width: 100%
}

.campaign-v2-hero {
    background-color: #eae5e1;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 20vw 5vw;
    position: relative;
    text-align: center
}

.campaign-v2-hero-white {
    color: #fff
}

@media screen and (min-width:64em) {
    .campaign-v2-hero {
        padding: 10vw 5vw
    }
}

.campaign-v2-hero-title {
    color: inherit;
    font-size: 3em/2
}

@media screen and (min-width:64em) {
    .campaign-v2-hero-title {
        font-size: 3em
    }
}

.campaign-v2-social {
    background: #34acde;
    color: #fff;
    padding: 3em 0;
    text-align: center
}

@media screen and (min-width:64em) {
    .campaign-v2-social {
        padding: 3.75vw 0
    }
}

.campaign-v2-social-header h3 {
    color: inherit
}

.campaign-v2-social-header p {
    margin: .75em auto 0;
    max-width: 36em
}

.campaign-v2-social-images {
    margin: 1.5em auto 0;
    max-width: 60em
}

@media screen and (min-width:64em) {
    .campaign-v2-social-images {
        margin: 3em auto 0
    }
}

.campaign-v2-social-images img {
    float: left;
    margin: 0 .5em;
    width: calc(20% - 1em)
}

.smartcard-page-section {
    padding: 5vw
}

@media screen and (min-width:64em) {
    .smartcard-page-section {
        font-size: 1.125em
    }
}

.smartcard-features {
    background: #e3f4fb;
    margin: -5vw;
    padding: 0 5vw 5vw
}

.smartcard-features-title {
    background: #b8e2f3;
    display: inline-block;
    font-size: 1em;
    text-transform: uppercase;
    padding: .75em 1em;
    margin: 0 0 5%
}

.smartcard-features-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.smartcard-features-list:after,
.smartcard-features-list:before {
    content: "";
    display: table
}

.smartcard-features-list:after {
    clear: both
}

.smartcard-features-list-item {
    padding-left: 4em;
    position: relative;
    margin-bottom: 1em
}

.smartcard-features-list-item-small {
    padding-left: 3em
}

.smartcard-features-list-item-small .smartcard-features-list-item-icon {
    margin-top: -.25em;
    width: 2em
}

@media screen and (min-width:37.5em) {
    .smartcard-features-list-item {
        width: 48%;
        float: left
    }
    .smartcard-features-list-item:nth-child(2n) {
        margin-left: 4%
    }
    .smartcard-features-list-item:nth-child(odd) {
        clear: both
    }
}

.smartcard-features-list-item-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 3em
}

.smartcard-features-list-item h4 {
    font-size: 1em
}

.smartcard-features-list-item p {
    font-size: .875em
}

.smartcard-intro {
    margin-bottom: 1em;
}

.smartcard-intro:after,
.smartcard-intro:before {
    content: "";
    display: table
}

.smartcard-intro:after {
    clear: both
}

@media screen and (min-width:64em) {
    .smartcard-intro {
        width: 33.3333%
    }
}

@media screen and (min-width:90em) {
    .smartcard-intro {
        width: 50%
    }
}

.smartcard-intro-title {
    font-weight: 400;
    margin-bottom: 1em;
    line-height: 1.5
}

.smartcard-intro .btn {
    width: 47.5%;
    margin: 0 0 1em;
    float: left;
    font-size: .875em
}

@media screen and (min-width:37.5em) {
    .smartcard-intro .btn {
        font-size: 1em;
        width: auto;
        margin-right: .5em
    }
}

.smartcard-intro .btn-secondary {
    margin-right: 5%
}

@media screen and (min-width:37.5em) {
    .smartcard-intro .btn-secondary {
        margin-right: .5em
    }
}

.smartcard-intro .btn-primary {
    font-size: 1em;
    width: 100%
}

@media screen and (min-width:37.5em) {
    .smartcard-intro .btn-primary {
        width: auto
    }
}

.smartcard-graphic {
    margin: 0 0 1em;
    text-align: center
}

.smartcard-graphic img {
    max-width: 16em
}

@media screen and (min-width:37.5em) {
    .smartcard-graphic {
        width: 33.3333%;
        padding-left: 5%;
        float: right
    }
}

.smartcard-steps-list {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-left: 5%;
    margin: 5% 0 1em 1em;
    counter-reset: a;
    border-left: .125em dashed #94bf35
}

.smartcard-steps-list:after,
.smartcard-steps-list:before {
    content: "";
    display: table
}

.smartcard-steps-list:after {
    clear: both
}

@media screen and (min-width:37.5em) {
    .smartcard-steps-list {
        border-top: .125em dashed #94bf35;
        border-left: 0 none;
        padding-top: 2em;
        padding-left: 0;
        margin-left: 0
    }
}

.smartcard-steps-list-item {
    margin-bottom: 2em;
    padding-left: 1em;
    position: relative
}

.smartcard-steps-list-item:before {
    content: counter(a);
    counter-increment: a;
    display: block;
    width: 2em;
    height: 2em;
    background: #fff;
    border: .25em solid #94bf35;
    border-radius: 100%;
    text-align: center;
    font-weight: 700;
    line-height: 1.25;
    color: #94bf35;
    position: absolute;
    left: -5%;
    top: -.25em;
    margin-left: -1.25em
}

@media screen and (min-width:37.5em) {
    .smartcard-steps-list-item:before {
        top: -3.25em;
        left: 0;
        margin-left: -.5em
    }
}

.smartcard-steps-list-item:nth-child(4n) {
    margin-bottom: 0
}

.smartcard-steps-list-item:nth-child(4n) p {
    font-size: .875em
}

.smartcard-steps-list-item:nth-child(4n):before {
    content: "\263A";
    border: 0 none;
    width: 1em;
    height: 1em;
    line-height: .5;
    top: .75em;
    margin-left: -.75em;
    transform: scale(2.75)
}

@media screen and (min-width:37.5em) {
    .smartcard-steps-list-item {
        width: 33%;
        float: left;
        padding-right: 5%;
        padding-left: 0
    }
    .smartcard-steps-list-item:nth-child(4n) {
        width: 1%;
        padding: 0;
        float: right
    }
    .smartcard-steps-list-item:nth-child(4n) p {
        display: none
    }
    .smartcard-steps-list-item:nth-child(4n):before {
        top: -2.25em
    }
}

.smartcard-steps-list-item h3 {
    font-size: 1.125em;
    text-transform: uppercase
}

.smartcard-steps-list-item a {
    font-weight: 700;
    padding: .375em 0;
    display: block
}

.smartcard-steps-list-item p {
    margin-bottom: 0
}

.smartcard-steps-list-item ul {
    margin: .5em 0 0;
    padding: 0
}

.smartcard-video {
    margin: 0 0 1em;
    text-align: center
}

@media screen and (min-width:64em) {
    .smartcard-video {
        width: 66.666%;
        padding-left: 5%;
        float: right
    }
}

@media screen and (min-width:90em) {
    .smartcard-video {
        width: 50%;
        padding-left: 5%;
        float: right
    }
}

.switch-page-competition {
    background: #cd1620;
    color: #fff;
    display: block;
    padding: 1.5em 2em
}

@media screen and (min-width:64em) {
    .switch-page-competition {
        height: 15.225em
    }
}

@media screen and (min-width:64em) {
    .switch-page-competition-body {
        width: 60%
    }
}

.switch-page-competition-image {
    margin-top: 1.5em;
    text-align: center
}

@media screen and (min-width:64em) {
    .switch-page-competition-image {
        margin-top: 0;
        text-align: right;
        width: 40%
    }
}

@media screen and (min-width:64em) {
    .switch-page-competition-body,
    .switch-page-competition-image {
        float: left
    }
}

.switch-page-competition h3 {
    color: #fff;
    font-size: 1.125em;
    margin-bottom: .75em;
    max-width: 20em
}

.switch-page-competition p {
    margin: 0
}

.switch-page-competition p:last-child {
    margin-top: .75em
}

.switch-page-competition ol {
    margin: 0;
    padding: 0 0 0 1.5em
}

.switch-page-competition li,
.switch-page-competition p {
    font-size: .875em
}

.switch-page-competition-terms {
    text-decoration: underline
}

.switch-page-competition-terms:link,
.switch-page-competition-terms:visited {
    color: #fff
}

.switch-page-content {
    padding: 1.5em 0;
    position: relative
}

@media screen and (min-width:64em) {
    .switch-page-content {
        padding: 3.75vw 0
    }
}

.switch-page-content-filters {
    margin-bottom: .75em;
    text-align: center
}

.switch-page-content-blocks {
    overflow: hidden;
    width: 100%
}

.switch-page-content-grid-sizer {
    width: 100%
}

@media screen and (min-width:64em) {
    .switch-page-content-grid-sizer {
        width: 33.33%
    }
}

.switch-page-content-block {
    float: left;
    overflow: hidden;
    width: 100%
}

@media screen and (min-width:64em) {
    .switch-page-content-block {
        height: 16.85em;
        width: 33.33%
    }
}

.switch-page-content-block>* {
    margin: .75em 1em
}

@media screen and (min-width:64em) {
    .switch-page-content-block-wide {
        width: 66.66%
    }
}

.switch-page-content-block .video-wrapper {
    padding-bottom: 0
}

@media screen and (min-width:64em) {
    .switch-page-content-block .video-wrapper {
        padding-bottom: 56.25%
    }
}

.switch-page-content-block .video iframe {
    height: 15.225em;
    position: relative
}

@media screen and (min-width:64em) {
    .switch-page-content-block .video iframe {
        position: absolute
    }
}

.switch-page-content-load-more {
    margin: 2.5vw 0 0;
    overflow: hidden;
    text-align: center;
    width: 100%
}

.switch-page-filters {
    margin: 0 1em;
    overflow: auto;
    white-space: nowrap
}

.switch-page-hero {
    background-color: #eae5e1;
    background-image: url(../images/switch/hero.21ff2a3d.png);
    background-position: center -4em;
    background-repeat: no-repeat;
    background-size: auto 140%;
    padding: 20vw 5vw;
    position: relative;
    text-align: center
}

@media screen and (min-width:64em) {
    .switch-page-hero {
        background-attachment: fixed;
        background-position: center -7em;
        background-size: auto 70%;
        padding: 10vw 5vw
    }
}

.switch-page-hero-title {
    font-size: 3em/2
}

@media screen and (min-width:64em) {
    .switch-page-hero-title {
        font-size: 3em
    }
}

.switch-page-hero-subtitle {
    font-size: 1.75em/2;
    margin-top: .75em
}

@media screen and (min-width:64em) {
    .switch-page-hero-subtitle {
        font-size: 1.75em
    }
}

.switch-page-pledge {
    align-items: center;
    background: #1c073e;
    color: #fff;
    display: flex;
    min-height: 28em;
    padding: 7.5vw 1em;
    position: relative;
    text-align: center
}

@media screen and (min-width:64em) {
    .switch-page-pledge {
        padding: 5vw 0
    }
}

.switch-page-pledge p a {
    color: #fff;
    text-decoration: underline
}

.switch-page-pledge-header {
    margin: 0 auto;
    max-width: 46em
}

.switch-page-pledge-header h3 {
    color: #fff;
    font-size: 2em/1.5
}

@media screen and (min-width:64em) {
    .switch-page-pledge-header h3 {
        font-size: 2em
    }
}

.switch-page-pledge-header p {
    margin: .75em auto 0;
    font-size: 1.25em/1.75;
    width: 85%
}

@media screen and (min-width:64em) {
    .switch-page-pledge-header p {
        font-size: 1.125em
    }
}

.switch-page-pledge-form {
    margin-top: 2.5vw;
    width: 100%
}

.switch-page-pledge-form-info {
    background: #94024c;
    border: 0;
    border-radius: 50%;
    color: #e00b80;
    content: "?";
    height: 1em;
    line-height: 1;
    margin: 0;
    overflow: hidden;
    right: 1em;
    padding: .75em;
    position: absolute;
    text-align: center;
    text-indent: -9999em;
    top: .94em;
    width: 1em
}

.switch-page-pledge-form-info:hover {
    background: #e00b80;
    color: #fff
}

.switch-page-pledge-form-info:after {
    content: "?";
    left: 0;
    line-height: 1.4;
    position: absolute;
    text-align: center;
    text-indent: 0;
    top: 0;
    width: 100%
}

.switch-page-pledge-form-action,
.switch-page-pledge-form-input,
.switch-page-pledge-form-text {
    display: block;
    padding: .375em .5em;
    text-align: center
}

@media screen and (min-width:87.5em) {
    .switch-page-pledge-form-action,
    .switch-page-pledge-form-input,
    .switch-page-pledge-form-text {
        display: inline-block
    }
}

.switch-page-pledge-form-text:first-child {
    display: none
}

@media screen and (min-width:87.5em) {
    .switch-page-pledge-form-text:first-child {
        display: inline-block
    }
}

.switch-page-pledge-form-input {
    position: relative;
    margin: 0 auto;
    max-width: 21em
}

.switch-page-pledge-form-input input,
.switch-page-pledge-form-input select {
    background: transparent;
    border-color: hsla(0, 0%, 100%, .6);
    color: #fff;
    display: inline-block;
    max-width: 20em;
    width: 100%
}

.switch-page-pledge-form-input input option,
.switch-page-pledge-form-input select option {
    color: #000
}

@media screen and (min-width:87.5em) {
    .switch-page-pledge-form-input input,
    .switch-page-pledge-form-input select {
        width: 16em
    }
}

@media screen and (min-width:87.5em) {
    .switch-page-pledge-form-input input.switch-page-pledge-form-input-location,
    .switch-page-pledge-form-input select.switch-page-pledge-form-input-location {
        max-width: 16em;
        width: 16em
    }
}

.switch-page-pledge-form-input-entice {
    display: none
}

.switch-page-pledge-form-action .btn-tertiary {
    margin: .75em 0 0;
    max-width: 20em;
    width: 100%
}

.switch-page-pledge-form br {
    display: none
}

@media screen and (min-width:87.5em) {
    .switch-page-pledge-form br {
        display: block
    }
}

.switch-page-pledge-social {
    margin-top: 3em
}

.switch-page-pledge-terms {
    margin-top: 1.5em
}

.switch-page-pledge-terms p {
    font-size: .75em;
    opacity: .75
}

.switch-page-pledge .container {
    flex: 1;
    opacity: 1;
    transition: opacity .2s cubic-bezier(.365, .095, .535, 1)
}

.switch-page-pledge .hide {
    opacity: 0
}

.switch-page-pledge .hide.js-step-2 {
    display: none
}

.switch-page-social {
    background: #34acde;
    color: #fff;
    padding: 3em 0;
    text-align: center
}

@media screen and (min-width:64em) {
    .switch-page-social {
        padding: 3.75vw 0
    }
}

.switch-page-social-header h3 {
    color: inherit
}

.switch-page-social-header p {
    margin: .75em auto 0;
    max-width: 36em
}

.switch-page-social-images {
    margin: 1.5em auto 0;
    max-width: 60em
}

@media screen and (min-width:64em) {
    .switch-page-social-images {
        margin: 3em auto 0
    }
}

.switch-page-social-images img {
    float: left;
    margin: 0 .5em;
    width: calc(20% - 1em)
}

.kent-school-streets-page-hero {
    background-color: #eae5e1;
    background-image: url(../images/school-streets/hero.png);
    background-position: center -4em;
    background-repeat: no-repeat;
    background-size: auto 140%;
    padding: 15vw 5vw;
    position: relative;
    text-align: center;
}

@media screen and (min-width:64em) {
    .kent-school-streets-page-hero {
        background-position: center;
        background-size: auto 210%;
    }
}

.kent-school-streets-page-hero-button {
    background-color: #D9378F;
    color: white;
    position: relative;
    top: 130px;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    padding: .75em;
    border-radius: .25em;
    border: .125em solid rgba(0, 0, 0, .125);
    background: hsla(0, 0%, 100%, .1);
    color: currentColor;
    margin-bottom: 1em;
    transition: background .2s cubic-bezier(.365, .095, .535, 1);
    cursor: pointer;
    line-height: 1.25em;
}


.kent-school-streets-page-hero-title {
    font-size: 3em/2
}

@media screen and (min-width:64em) {
    .kent-school-streets-page-hero-title {
        font-size: 3em
    }
}

.kent-school-streets-page-hero-subtitle {
    font-size: 1.75em/2;
    margin-top: .75em
}

@media screen and (min-width:64em) {
    .kent-school-streets-page-hero-subtitle {
        font-size: 1.75em
    }
}

.kent-school-streets-page-content {
    padding: 1.5em 0;
    position: relative
}

@media screen and (min-width:64em) {
    .kent-school-streets-page-content {
        padding: 3.75vw 0
    }
}

.kent-school-streets-page-content-blocks {
    overflow: hidden;
    width: 100%
}

.kent-school-streets-page-content-grid-sizer {
    width: 100%
}

@media screen and (min-width:64em) {
    .kent-school-streets-page-content-grid-sizer {
        width: 33.33%
    }
}

.kent-school-streets-page-content-block {
    float: left;
    overflow: hidden;
    width: 100%
}

@media screen and (min-width:64em) {
    .kent-school-streets-page-content-block {
        height: 16.85em;
        width: 33.33%
    }
}

.kent-school-streets-page-content-block>* {
    margin: .75em 1em
}

@media screen and (min-width:64em) {
    .kent-school-streets-page-content-block-wide {
        width: 66.66%
    }
}

.kent-school-streets-page-content-load-more {
    margin: 2.5vw 0 0;
    overflow: hidden;
    text-align: center;
    width: 100%
}

.kent-school-streets-page-info {
    align-items: center;
    position: relative;
    padding-top: 3%;
}

.kent-school-streets-page-info h1 {
    margin-left: 20px;
    margin-right: 20px;
}

.kent-school-streets-page-info p {
    margin-left: 20px;
    margin-right: 20px;
    font-size: 20px;
}

/*

.kent-school-streets-page-hero {
    background-color: #eae5e1;
    background-image: url(../images/school-streets/hero.png);
    background-position: center -4em;
    background-repeat: no-repeat;
    background-size: 100% 118%;
    padding: 11vw 5vw;
    position: relative;
    text-align: center;
}

.kent-school-streets-page-hero-button {
    background-color: #D9378F;
    color: white;
    position: relative;
    top: 130px;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    padding: .75em;
    border-radius: .25em;
    border: .125em solid rgba(0, 0, 0, .125);
    background: hsla(0, 0%, 100%, .1);
    color: currentColor;
    margin-bottom: 1em;
    transition: background .2s cubic-bezier(.365, .095, .535, 1);
    cursor: pointer;
    line-height: 1.25em;
}

.kent-school-streets-page-content {
    padding: 1.5em 0;
    position: relative
}

@media screen and (min-width:64em) {
    .switch-page-content {
        padding: 3.75vw 0
    }
}

.kent-school-streets-page-content-blocks {
    overflow: hidden;
    width: 100%
}

.kent-school-streets-page-content-grid-sizer {
    width: 100%
}

@media screen and (min-width:64em) {
    .kent-school-streets-page-content-grid-sizer {
        width: 25%
    }
}

.kent-school-streets-page-content-block {
    float: left;
    overflow: hidden;
    width: 100%
}

@media screen and (min-width:64em) {
    .kent-school-streets-page-content-block {
        height: 16.85em;
        width: 25%
    }
}

.kent-school-streets-page-content-block>* {
    margin: .75em 1em
}

@media screen and (min-width:64em) {
    .kent-school-streets-page-content-block-wide {
        width: 66.66%
    }
}

.kent-school-streets-page-content-load-more {
    margin: 2.5vw 0 0;
    overflow: hidden;
    text-align: center;
    width: 100%
}

.kent-school-streets-page-info {
    align-items: center;
    position: relative;
    text-align: center;
    padding-top: 3%;
}

*/

.lovetoride-logo {
    position: absolute;
    top: 0;
    right: 0;
    padding: 5vw 5vw 0 0;
    z-index: 3;
    display: none
}

@media screen and (min-width:50em) {
    .lovetoride-logo {
        display: block
    }
}

.lovetoride-logo-link {
    display: block;
    text-decoration: none;
    color: #fff;
    text-align: center
}

.lovetoride-logo-image {
    width: 6em;
    margin: 0 auto .5em
}

.lovetoride-logo-image svg {
    width: 100%;
    height: auto
}

.lovetoride-logo-text {
    display: block;
    text-transform: uppercase;
    font-size: .75em
}

.cycle-map {
    height: 90vh;
    min-height: 30em
}

.planner {
    min-height: 100vh;
    background: #f7f7f7
}

.planner:after,
.planner:before {
    content: "";
    display: table
}

.planner:after {
    clear: both
}

@media screen and (min-width:64em) {
    .planner {
        background: #fff
    }
}

.planner p {
    margin-bottom: 0
}

.planner .loading-text {
    display: inline-block;
    padding: .375em 0;
    width: 70%;
    max-width: 100%;
    background: currentColor;
    opacity: .05
}

.planner .container {
    padding: 0;
    padding-top: 2.625em;
    width: auto;
    position: relative
}

.planner .container:after,
.planner .container:before {
    content: "";
    display: table
}

.planner .container:after {
    clear: both
}

@media screen and (min-width:64em) {
    .planner .container {
        padding-top: 5%
    }
}

.planner .container-with-title-bar {
    padding-top: 3em;
    position: relative;
    z-index: 5000
}

@media screen and (min-width:64em) {
    .planner .container-with-title-bar {
        padding-top: 0;
        z-index: 0
    }
}

@media print {
    .planner .container {
        padding-top: 0
    }
}

.planner-results {
    margin: 1em 0
}

@media screen and (min-width:37.5em) {
    .planner-results {
        font-size: 1.125em
    }
}

@media screen and (min-width:64em) {
    .planner-results {
        font-size: 1.25em
    }
}

.planner-results-list {
    list-style: none;
    margin: 0;
    padding: 0;
    padding: 0 5%;
    margin: 1em 0
}

@media screen and (min-width:64em) {
    .planner-results-list {
        padding: 0
    }
}

.planner-results-list>li {
    margin: 0 -2.5% 2.5%
}

@media screen and (min-width:37.5em) {
    .planner-results-list>li {
        margin: 0 0 2.5%
    }
}

@media print {
    .planner-results-list>li {
        margin: 0 0 2.5%
    }
}

.planner-results-pagination {
    display: block;
    margin: 0 2.5%;
    color: #898a89;
    width: 95%;
    text-transform: capitalize
}

@media screen and (min-width:37.5em) {
    .planner-results-pagination {
        margin: 0 5%;
        width: 90%
    }
}

@media screen and (min-width:64em) {
    .planner-results-pagination {
        margin: 0;
        width: 100%;
        border-width: 2px
    }
}

@media print {
    .planner-results-pagination {
        display: none
    }
}

@media screen and (min-width:64em) {
    .planner-controls {
        position: absolute;
        width: 20em;
        left: 5vw;
        top: 0;
        bottom: 0;
        margin-top: 5vw
    }
}

.planner-controls-with-title-bar {
    display: none
}

@media screen and (min-width:64em) {
    .planner-controls-with-title-bar {
        display: block
    }
}

@media screen and (min-width:64em) {
    .planner-content {
        padding: 0 5% 5%;
        padding-left: 23em;
        margin-left: 5vw
    }
}

.planner-content-header {
    color: #898a89
}

.planner-content-header-title {
    font-weight: 400;
    font-size: 1em;
    padding: 5% 5% 0
}

@media screen and (min-width:37.5em) {
    .planner-content-header-title {
        font-size: 1.5em
    }
}

@media screen and (min-width:64em) {
    .planner-content-header-title {
        padding: 0;
        font-size: 1.75em
    }
}

.planner-content-header-subtitle {
    font-size: .875em;
    padding: 0 5%;
    padding-top: .5em
}

@media screen and (min-width:64em) {
    .planner-content-header-subtitle {
        padding-left: 0;
        padding-right: 0;
        font-size: 1em
    }
}

.planner-content-footer {
    padding-bottom: 3em
}

.planner-alert a {
    text-transform: capitalize;
    font-weight: 700
}

@media print {
    .planner {
        min-height: 0
    }
}

/*
.cta-footer-planner {
    display: none
}

@media screen and (min-width:64em) {
    .cta-footer-planner {
        display: block
    }
}
*/

.planner-error {
    padding: 5%;
    background: #fff
}

@media screen and (min-width:64em) {
    .planner-error {
        padding-top: 0;
        min-height: 22em
    }
}

.planner-error-body {
    max-width: 35em
}

.planner-error-body p {
    margin-bottom: 1em
}

.mode-card,
.route-card {
    display: block;
    color: #525252;
    border: 1px solid rgba(0, 0, 0, .125);
    background: #fff;
    padding: 2.5%
}

@media screen and (min-width:64em) {
    .mode-card,
    .route-card {
        border-width: 2px
    }
}

.ReactModal__Body--open {
    overflow: hidden
}

.ReactModal__Overlay {
    height: 100%
}

.ReactModal__Content {
    margin: 0;
    width: 100%;
    height: 100%;
    max-width: 40em
}

@media screen and (min-width:40em) {
    .ReactModal__Content {
        width: 95%;
        margin: 1em auto;
        height: auto
    }
}

.planner-conclusion button.btn {
    width: 100%
}

.planner-conclusion .poll .gform_body,
.planner-conclusion .poll .gform_footer {
    max-width: 27em
}

.feedback-icon {
    width: 58px;
    height: 58px;
    display: inline-block;
    margin: 54px auto 0;
    background-repeat: no-repeat
}

.feedback-body-negative,
.feedback-body-normal,
.feedback-body-positive {
    display: none
}

.planner-conclusion-header-positive .feedback-icon {
    width: 62px;
    height: 62px;
    background-image: url(../images/feedback-header-smiley.08e15188.png)
}

.planner-conclusion-header-normal .feedback-icon {
    background-image: url(../images/feedback-header-neutral.f20fa820.png)
}

.planner-conclusion-normal .feedback-body-normal,
.planner-conclusion-positive .feedback-body-positive {
    display: block
}

.planner-conclusion-body .gform_body .gfield_radio li textarea {
    margin-top: -2px;
    min-height: 5em
}

.poll .gfield_radio li input+label+textarea {
    display: none
}

.poll .gfield_radio li input:checked+label+textarea {
    border-color: #34acde;
    display: block
}

.planner-conclusion-negative .feedback-body-negative {
    display: block
}

.planner-conclusion-header-negative .feedback-icon {
    background-image: url(../images/feedback-header-sad.cd33fd37.png)
}

.planner-conclusion-header.planner-conclusion-header-positive {
    background-color: #088737
}

.planner-conclusion-header.planner-conclusion-header-normal {
    background-color: #e84e1c
}

.planner-conclusion-body .confirmation_message {
    display: none;
    text-align: center;
    padding: 209px 15% 55px
}

.planner-conclusion.submitted .confirmation_message {
    display: block
}

.planner-conclusion.submitted .poll {
    display: none
}

.planner-conclusion-body .confirmation_message h4 {
    color: #8dc33f;
    font-weight: 400;
    font-size: 1.4em
}

.planner-conclusion-body .confirmation_message p {
    margin-top: 33px;
    margin-bottom: 204px;
    color: #888
}

.planner-conclusion-header.planner-conclusion-header-negative {
    background-color: #cf1115
}

.planner-conclusion-body .gform_body .gfield_radio,
.planner-conclusion-body .gform_body textarea {
    font-size: .85em
}

.planner-conclusion-body .gform_body .gfield_radio,
.planner-conclusion-body .gform_body li li textarea {
    font-size: .92em
}

.planner-conclusion-body .gform_body textarea {
    min-height: 7em
}

.bicycling-layer-labels {
    display: none;
    padding: 40px 60px 21px;
    font-size: .97em
}

.mode-cycling .bicycling-layer-labels {
    display: block
}

.bicycling-layer-labels dt {
    text-indent: -1500px
}

.bicycling-layer-labels dl {
    font-size: .8em
}

.bicycling-layer-labels .dark-green {
    border-bottom: 4px solid #004d00
}

.bicycling-layer-labels .dark-green,
.bicycling-layer-labels .light-green {
    width: 52px;
    height: 8px;
    margin-right: 23px;
    margin-bottom: 24px;
    display: block;
    float: left;
    margin-top: 7px
}

.bicycling-layer-labels .light-green {
    border-bottom: 4px solid #080
}

.bicycling-layer-labels .brown {
    border-bottom: 4px solid #630
}

.bicycling-layer-labels .brown,
.bicycling-layer-labels .dashed {
    width: 52px;
    height: 8px;
    margin-right: 23px;
    margin-bottom: 24px;
    display: block;
    float: left;
    margin-top: 7px
}

.bicycling-layer-labels .dashed {
    border-bottom: 4px dotted #080
}

.bicycling-layer-labels dd {
    margin-bottom: 24px
}

.planner-tabs {
    background: #fff;
    padding-top: 1.25em
}

@media screen and (min-width:64em) {
    .planner-tabs {
        border: .125em solid rgba(0, 0, 0, .125);
        padding-top: 0
    }
}

.planner-tabs-content {
    position: relative
}

.planner-tabs-content:after,
.planner-tabs-content:before {
    content: "";
    display: table
}

.planner-tabs-content:after {
    clear: both
}

.planner-tabs-content-tab {
    display: none;
    padding: 5%;
    margin-bottom: 3.15625em;
    border-bottom: 1px solid transparent
}

@media screen and (min-width:64em) {
    .planner-tabs-content-tab {
        font-size: 1.25em;
        padding-top: 0;
        margin-bottom: 0
    }
}

.planner-tabs-content-tab.active {
    display: block
}

.planner-tabs-content-tab-loading {
    min-height: 50vh
}

.planner-tabs-content-tab-footer {
    padding-top: 5%;
    margin-top: 10%;
    border-top: .125em dotted rgba(0, 0, 0, .125)
}

@media print {
    .planner-tabs-content-tab-footer {
        display: none
    }
}

@media print {
    .planner-tabs-content-tab {
        padding-bottom: 0;
        padding-top: 0
    }
}

.smart-metrics {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    line-height: 1.25
}

.smart-metrics .metric-item {
    width: 48%;
    float: left;
    position: relative;
    padding-left: 1.5em
}

.smart-metrics .metric-item:last-child {
    float: right
}

.smart-metrics .metric-icon {
    position: absolute;
    font-size: 1em;
    left: 0;
    top: .25em
}

.smart-metrics .metric-icon.icon-warning-sign {
    color: #d6cc0a
}

.smart-metrics .metric-title {
    font-size: .75em
}

@media screen and (min-width:37.5em) {
    .smart-metrics .metric-title {
        font-size: .875em
    }
}

.smart-metrics .metric-subtitle {
    opacity: .5;
    font-size: .75em;
    display: block;
    clear: both
}

.mode-card .smart-metrics {
    padding-top: 2.5%
}

.journey-summary {
    display: block;
    overflow: hidden
}

.journey-summary-link {
    color: #404140;
    background: #fff
}

.journey-summary-link:focus,
.journey-summary-link:hover {
    background: #f7f7f7
}

.journey-summary-link:focus .journey-summary-origin:after,
.journey-summary-link:hover .journey-summary-origin:after {
    border-color: transparent transparent transparent #f7f7f7
}

.journey-summary-inner {
    display: table;
    width: 100%;
    table-layout: fixed
}

.journey-summary-destination,
.journey-summary-origin {
    width: 50%;
    display: table-cell;
    vertical-align: middle;
    padding: 2.5% 5%
}

.journey-summary-origin {
    position: relative
}

.journey-summary-origin:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    transform: rotate(67deg) translate(-30%, -10%) skew(45deg);
    border: 1px solid rgba(0, 0, 0, .125);
    border-width: 1px 1px 0 0;
    width: 6em;
    height: 6em;
    right: 0
}

.journey-summary-link .journey-summary-origin:after {
    border-color: transparent transparent transparent #fff
}

.journey-summary-location-name {
    font-size: .875em;
    font-weight: 400
}

.journey-summary-location-postcode {
    opacity: .5;
    font-size: .75em;
    text-transform: uppercase
}

.journey-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    margin: 1em 0
}

@media screen and (min-width:64em) {
    .journey-list {
        font-size: 1.25em;
        border: 1px solid rgba(0, 0, 0, .125);
        border-top: 0 none
    }
}

.journey-list-item {
    border-top: 1px solid rgba(0, 0, 0, .125)
}

.journey-list-item-prefix {
    opacity: .375;
    font-size: .75em;
    font-weight: 400;
    margin-bottom: .25em
}

.planner-title-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    min-width: 20em;
    border-bottom: .125em solid rgba(0, 0, 0, .125)
}

.planner-styleguide .planner-title-bar {
    display: none
}

@media screen and (min-width:64em) {
    .planner-title-bar {
        display: none
    }
}

.planner-title-bar .btn {
    margin-bottom: 0;
    border-color: transparent;
    border-radius: 0
}

.planner-title-bar-primary {
    background: #208135;
    color: #fff;
    min-height: 3em;
    position: relative
}

.planner-title-bar-secondary {
    background: #f1f1f1;
    min-height: 3em;
    font-size: .75em;
    position: relative;
    text-align: center
}

.planner-title-bar-secondary-title {
    font-weight: 400
}

.planner-title-bar-secondary-subtitle {
    opacity: .5;
    font-size: .75em;
    padding-top: .375em
}

.planner-title-bar-back-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 3em
}

.planner-title-bar-location-title {
    color: inherit;
    font-weight: 400;
    font-size: 1em;
    text-align: center
}

.planner-title-bar-location-title span {
    display: block;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.planner-title-bar-location-title-origin {
    width: 45%;
    padding: .75em 0 .75em 3em
}

.planner-title-bar-location-title-destination {
    width: 45%;
    padding: .75em 3em .75em 0
}

.planner-title-bar-location-title-seperator {
    width: 10%;
    font-size: .75em;
    height: 3.75em;
    line-height: 3.75em
}

.planner-title-bar-time-title {
    font-weight: 400
}

.directions-icon {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px
}

.directions-icon>img {
    position: absolute;
    left: 0;
    max-width: inherit
}

.directions-icon .img-2x {
    background-image: url(images/journey-planner/directions-icon-sprite-2x.png);
    background-size: 38px 1260px;
    width: 32px;
    height: 32px
}

.highres .directions-icon .img-2x {
    background-image: url(images/journey-planner/directions-icon-sprite-4x.png)
}

.directions-icon-ferry .img-2x {
    background-position: 0 -1228px
}

.directions-icon-ferry-train .img-2x {
    background-position: 0 -1132px
}

.directions-icon-merge .img-2x {
    background-position: 0 -286px
}

.directions-icon-straight .img-2x {
    background-position: 0 -1068px
}

.directions-icon-fork-left .img-2x {
    background-position: 0 -1100px
}

.directions-icon-ramp-left .img-2x {
    background-position: 0 -1196px
}

.directions-icon-roundabout-left .img-2x {
    background-position: 0 -394px
}

.directions-icon-turn-left .img-2x {
    background-position: 0 -826px
}

.directions-icon-turn-sharp-left .img-2x {
    background-position: 0 0
}

.directions-icon-turn-slight-left .img-2x {
    background-position: 0 -756px
}

.directions-icon-uturn-left .img-2x {
    background-position: 0 -610px
}

.directions-icon-fork-right .img-2x {
    background-position: 0 -998px
}

.directions-icon-ramp-right .img-2x {
    background-position: 0 -858px
}

.directions-icon-roundabout-right .img-2x {
    background-position: 0 -464px
}

.directions-icon-turn-right .img-2x {
    background-position: 0 -966px
}

.directions-icon-turn-sharp-right .img-2x {
    background-position: 0 -1164px
}

.directions-icon-turn-slight-right .img-2x {
    background-position: 0 -102px
}

.directions-icon-uturn-right .img-2x {
    background-position: 0 -70px
}

.directions-icon-ferry>img {
    top: -614px
}

.directions-icon-ferry-train>img {
    top: -566px
}

.directions-icon-merge>img {
    top: -143px
}

.directions-icon-straight>img {
    top: -534px
}

.directions-icon-fork-left>img {
    top: -550px
}

.directions-icon-ramp-left>img {
    top: -598px
}

.directions-icon-roundabout-left>img {
    top: -197px
}

.directions-icon-turn-left>img {
    top: -413px
}

.directions-icon-turn-sharp-left>img {
    top: 0
}

.directions-icon-turn-slight-left>img {
    top: -378px
}

.directions-icon-uturn-left>img {
    top: -305px
}

.directions-icon-fork-right>img {
    top: -499px
}

.directions-icon-ramp-right>img {
    top: -429px
}

.directions-icon-roundabout-right>img {
    top: -232px
}

.directions-icon-turn-right>img {
    top: -483px
}

.directions-icon-turn-sharp-right>img {
    top: -582px
}

.directions-icon-turn-slight-right>img {
    top: -51px
}

.directions-icon-uturn-right>img {
    top: -35px
}

.planner-directions-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: .25em solid #34acde;
    margin-bottom: 3em;
    padding-bottom: 1em;
    margin-left: .375em
}

@media screen and (min-width:64em) {
    .planner-directions-list {
        margin-left: .5em;
        margin-top: 1em
    }
}

.planner-directions-list-item {
    position: relative;
    margin-bottom: 1em;
    padding-left: 1.5em
}

.planner-directions-list-item-title {
    font-size: 1.125em;
    line-height: 1
}

.planner-directions-list-item-subtitle {
    opacity: .5;
    font-size: .875em;
    padding-top: .375em
}

.planner-directions-list-instruction {
    font-size: .75em;
    position: relative;
    padding-left: 24px
}

.planner-directions-list-destination,
.planner-directions-list-origin,
.planner-directions-list-waypoint {
    position: relative
}

.planner-directions-list-destination:before,
.planner-directions-list-origin:before,
.planner-directions-list-waypoint:before {
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    position: absolute;
    left: -1.5em;
    margin-left: -.625em;
    background: #fff;
    border-radius: 100%
}

.planner-directions-list-origin:before {
    border: .25em solid #94bf35
}

.planner-directions-list-waypoint:before {
    border: .25em solid #34acde
}

.planner-directions-list-destination {
    position: absolute;
    top: 0
}

.planner-directions-list-destination:before {
    border: .5em double #cd1620;
    top: .25em
}

.planner-timeline {
    list-style-type: none;
    margin: 0 0 3em 4.5em;
    padding: 0 0 1em
}

.planner-timeline-sub-items {
    list-style: none;
    margin: 0;
    padding: 0
}

.planner-timeline-item {
    padding-left: 1.5em;
    position: relative
}

.planner-timeline-item:after {
    content: "";
    position: absolute;
    top: -.75em;
    bottom: -.75em;
    left: -.25em;
    border-left: .25em dotted #208135
}

.planner-timeline-item:first-child:after {
    top: .6em
}

.planner-timeline-item-transit:after {
    top: .6em;
    bottom: 1.2em;
    border-color: #34acde;
    border-left-style: solid
}

.planner-timeline-item-transit .planner-timeline-mode-map,
.planner-timeline-item-transit .planner-timeline-waypoint:before {
    background: #34acde;
    border-color: #34acde
}

.planner-timeline-item-transit+.planner-timeline-item-transit:before {
    content: "";
    position: absolute;
    top: -.75em;
    bottom: 100%;
    left: -.25em;
    border-left: .25em dotted #208135
}

.planner-timeline-item-transit-bus:after {
    border-color: #cd1620
}

.planner-timeline-item-transit-bus .planner-timeline-mode-map,
.planner-timeline-item-transit-bus .planner-timeline-waypoint:before {
    background: #cd1620;
    border-color: #cd1620
}

.planner-timeline-item-transit-train:after {
    border-color: #34acde
}

.planner-timeline-item-transit-train .planner-timeline-mode-map,
.planner-timeline-item-transit-train .planner-timeline-waypoint:before {
    background: #34acde;
    border-color: #34acde
}

.planner-timeline-item-time {
    position: absolute;
    font-size: .875em;
    font-weight: 400;
    left: -5.25em
}

.planner-timeline-item-title {
    font-size: 1.125em;
    line-height: 1
}

.planner-timeline-item-subtitle {
    opacity: .5;
    font-size: .875em;
    padding-top: .375em
}

.planner-timeline-destination,
.planner-timeline-origin,
.planner-timeline-waypoint {
    padding-bottom: 1em
}

.planner-timeline-destination:before,
.planner-timeline-origin:before,
.planner-timeline-waypoint:before {
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    position: absolute;
    left: 0;
    margin-left: -.625em;
    z-index: 2;
    background: #fff;
    border-radius: 100%
}

.planner-timeline-origin:before {
    border: .25em solid #94bf35
}

.planner-timeline-waypoint .planner-timeline-item-title {
    font-size: 1em
}

.planner-timeline-waypoint:before {
    background: #34acde;
    transform: scale(.75);
    margin-top: .125em;
    border: .25em solid #34acde
}

.planner-timeline-destination {
    padding-left: 1.5em;
    position: absolute;
    left: 0
}

.planner-timeline-destination:before {
    border: .5em double #cd1620
}

.planner-timeline-mode {
    margin: 0;
    padding-bottom: .75em
}

.planner-timeline-mode-icon {
    font-size: 2em;
    position: absolute;
    left: -2em;
    margin: 0
}

.planner-timeline-mode-title {
    font-weight: 400;
    font-size: .875em
}

.planner-timeline-mode-subtitle {
    opacity: .5;
    font-size: .75em
}

.planner-timeline-mode-directions {
    margin-top: 1em
}

.planner-timeline-mode-map {
    width: calc(100% + 6em);
    height: 15em;
    margin-top: .5em;
    background: #fff;
    border-radius: .25em;
    overflow: hidden;
    border: .25em solid #208135;
    position: relative;
    z-index: 3;
    margin-left: -6em
}

@media screen and (min-width:64em) {
    .planner-timeline-mode-map {
        height: 20em
    }
}

.planner-timeline-mode-btn {
    font-size: .75em;
    margin-bottom: 0
}

.planner-timeline-mode-btn.btn-link {
    text-transform: none
}

.planner-timeline-transit-meta {
    opacity: 1;
    padding: .375em 0
}

.planner-timeline-transit-meta-vehicle-icon {
    margin-right: .5em;
    height: 1.5em;
    position: relative;
    top: .25em
}

.planner-timeline-transit-meta-line-label {
    padding: .25em .5em;
    border-radius: .25em;
    display: inline-block;
    line-height: 1;
    font-family: sans-serif
}

.planner-timeline-directions-list {
    border-left: 0;
    margin: 0;
    padding: 0
}

.planner-timeline-directions-list>li {
    padding: 0;
    margin-bottom: 1em
}

.planner-timeline-directions-list>li:last-child {
    padding: 0
}

@media screen and (max-width:64em) {
    .planner-sticky-back-btn {
        border-width: 1px 0 0;
        margin: 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 99;
        min-width: 20em;
        font-size: .875em;
        line-height: 1.5;
        background: #fff
    }
}

@media screen and (min-width:64em) {
    .planner-sticky-back-btn {
        margin-top: 2em
    }
}

.planner-sticky-back-btn-icon-group {
    font-size: 1.5em;
    margin: -.25em -5% -.5em 0;
    display: inline-block;
    float: left
}

@media screen and (min-width:64em) {
    .planner-sticky-back-btn-icon-group {
        margin-top: -.125em;
        margin-right: 1em
    }
}

@media print {
    .planner-sticky-back-btn {
        display: none
    }
}

.planner-search-form {
    width: 100%;
    background: #fff;
    padding: 5%;
    border-bottom: .125em solid rgba(0, 0, 0, .125)
}

@media screen and (min-width:64em) {
    .planner-search-form {
        position: absolute;
        top: 5vw;
        border-bottom: 0 none;
        border-radius: .25em
    }
}

.header-hero-solid-banner .planner-search-form {
    background: none;
    padding: 0;
    max-width: 36em;
    margin: 5% auto 0;
    border-bottom: 0
}

@media screen and (min-width:64em) {
    .header-hero-solid-banner .planner-search-form {
        margin: 5% 0 0;
        position: static;
        font-size: 1.125em
    }
}

.header-hero-solid-banner .planner-search-form .control-radio,
.header-hero-solid-banner .planner-search-form .control-select,
.header-hero-solid-banner .planner-search-form .planner-search-trigger-leave-arrive,
.header-hero-solid-banner .planner-search-form input {
    background: #1b6d2d;
    color: hsla(0, 0%, 100%, .875);
    border-radius: .25em;
    border-color: transparent
}

.header-hero-solid-banner .planner-search-form .control-radio:focus,
.header-hero-solid-banner .planner-search-form .control-radio:hover,
.header-hero-solid-banner .planner-search-form .control-select:focus,
.header-hero-solid-banner .planner-search-form .control-select:hover,
.header-hero-solid-banner .planner-search-form .planner-search-trigger-leave-arrive:focus,
.header-hero-solid-banner .planner-search-form .planner-search-trigger-leave-arrive:hover,
.header-hero-solid-banner .planner-search-form input:focus,
.header-hero-solid-banner .planner-search-form input:hover {
    background: #165824;
    border-color: transparent;
    color: #fff
}

.header-hero-solid-banner .planner-search-form fieldset .control-group-input .control-radio.focused {
    background: #165824
}

.header-hero-solid-banner .planner-search-form::-webkit-input-placeholder {
    color: hsla(0, 0%, 100%, .5)
}

.header-hero-solid-banner .planner-search-form:-ms-input-placeholder {
    color: hsla(0, 0%, 100%, .5)
}

.header-hero-solid-banner .planner-search-form::placeholder {
    color: hsla(0, 0%, 100%, .5)
}

.header-hero-solid-banner .planner-search-form .control-group-alert,
.header-hero-solid-banner .planner-search-form label {
    color: #fff
}

.header-hero-solid-banner .planner-search-form .control-group-alert {
    text-align: left
}

.header-hero-solid-banner .planner-search-form select::-ms-value {
    background: none
}

.header-hero-solid-banner .planner-search-form .control-select select {
    background: none;
    color: #fff;
    box-shadow: 0 0 0 .125em rgba(0, 0, 0, .125)
}

.header-hero-solid-banner .planner-search-form .control-select select option {
    color: #525252
}

.header-hero-solid-banner .planner-search-form .control-select select:focus,
.header-hero-solid-banner .planner-search-form .control-select select:hover {
    background: #165824;
    border-color: transparent;
    color: #fff
}

.header-hero-solid-banner .planner-search-form .control-select .icon {
    color: #fff;
    background: #1b6d2d;
    transition: background .2s cubic-bezier(.365, .095, .535, 1)
}

.header-hero-solid-banner .planner-search-form .control-select.focused .icon,
.header-hero-solid-banner .planner-search-form .control-select:focus .icon,
.header-hero-solid-banner .planner-search-form .control-select:hover .icon {
    background: #165824
}

.header-hero-solid-banner .planner-search-form .control-radio.active {
    background: hsla(0, 0%, 100%, .1)
}

@media print {
    .planner-search-form {
        display: none
    }
}

.planner-search-header {
    text-align: center;
    padding-bottom: 5%;
    display: none
}

@media screen and (min-width:64em) {
    .planner-search-header {
        padding-bottom: 1em;
        display: block
    }
    .header-hero-solid-banner .planner-search-header {
        display: none
    }
}

.planner-search-header-subtitle {
    opacity: .5;
    display: none
}

.planner-search-trigger-leave-arrive {
    padding: .75em 2.75em 1em .75em;
    width: 100%;
    line-height: 1;
    text-align: left;
    color: #898a89;
    text-transform: capitalize;
    position: relative;
    font-size: .875em
}

.planner-search-trigger-leave-arrive .icon {
    position: absolute;
    right: 1em
}

.planner-search-footer-back-btn {
    display: none
}

.planner-search-btn {
    width: 100%;
    margin: 0;
    margin-bottom: 1em;
    text-transform: capitalize
}

@media screen and (min-width:37.5em) {
    .header-hero-solid-banner .planner-search-btn {
        margin: 1em auto 0;
        max-width: 18em
    }
}

.planner-search-form-populated .planner-search-header,
.planner-search-form-populated .planner-search-location .control-group-alert {
    display: none
}

@media screen and (min-width:64em) {
    .planner-search-form-populated .planner-search-header,
    .planner-search-form-populated .planner-search-location .control-group-alert {
        display: block
    }
}

.planner-search-form-populated .planner-search-location input {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none
}

@media screen and (min-width:64em) {
    .planner-search-form-populated .planner-search-location input {
        -webkit-user-select: auto;
        -moz-user-select: auto;
        -ms-user-select: auto;
        user-select: auto;
        pointer-events: auto
    }
}

.planner-search-form-populated .planner-search-header,
.planner-search-form-populated .planner-search-location .control-group-input,
.planner-search-form-populated .planner-search-location input {
    background: #208135;
    color: #fff
}

.planner-search-form-populated .planner-search-header>*,
.planner-search-form-populated .planner-search-location .control-group-input>*,
.planner-search-form-populated .planner-search-location input>* {
    color: inherit;
    opacity: 1;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .125)
}

.planner-search-form-populated {
    background: #208135;
    color: #fff;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5000;
    min-width: 20em;
    border-bottom: 0
}

@media screen and (min-width:64em) {
    .planner-search-form-populated {
        position: static;
        top: 6em;
        z-index: 1;
        padding: 1.5em 2em;
        border-radius: .25em
    }
}

@media screen and (min-width:64em) {
    .planner-search-form-populated .planner-search-header {
        margin-top: 2em;
        text-align: left
    }
}

.planner-search-form-populated .planner-search-header-subtitle {
    display: none
}

.planner-search-form-populated .planner-search-location {
    padding: .125em 2em .125em 3em;
    position: relative
}

@media screen {
    .planner-search-form-populated .planner-search-location:after {
        opacity: .5;
        content: "to";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: .75em;
        font-weight: 400
    }
}

@media screen and (min-width:64em) {
    .planner-search-form-populated .planner-search-location {
        padding: 0
    }
    .planner-search-form-populated .planner-search-location:after {
        margin-top: -1em;
        left: 1em;
        display: none
    }
}

.planner-search-location .control-group {
    position: relative;
}

.planner-search-form-populated .planner-search-location .control-group {
    margin-bottom: 0
}

@media screen and (min-width:64em) {
    .planner-search-form-populated .planner-search-location .control-group {
        margin-bottom: 1em
    }
}

.planner-search-form-populated .planner-search-location .control-group-input {
    width: calc(50% - 1em);
    float: left;
    margin-right: 1em
}

@media screen and (min-width:64em) {
    .planner-search-form-populated .planner-search-location .control-group-input {
        width: 100%;
        float: none
    }
}

@media print {
    .planner-search-form-populated .planner-search-location .control-group-input {
        background: none;
        color: #000;
        float: none;
        width: 100%
    }
}

.planner-search-form-populated .planner-search-location .control-group-label-prepend {
    font-size: .875em;
    line-height: 1.75;
    opacity: .5
}

@media print {
    .planner-search-form-populated .planner-search-location .control-group-label-prepend {
        color: #000;
        opacity: 1;
        padding: .35em 0
    }
}

.planner-search-form-populated .planner-search-location .control-group-prepended input {
    padding-left: 3.5em
}

@media print {
    .planner-search-form-populated .planner-search-location .control-group-prepended input {
        padding: 0 0 0 3.5em
    }
}

@media screen and (max-width:64em) {
    .planner-search-form-populated .planner-search-location .control-group-prepended input {
        padding-left: 0
    }
    .planner-search-form-populated .planner-search-location .control-group-label-prepend {
        display: none
    }
}

.planner-search-form-populated .planner-search-location input {
    text-align: center;
    font-weight: 700;
    border-color: transparent;
    text-indent: 0
}

@media screen and (min-width:64em) {
    .planner-search-form-populated .planner-search-location input {
        background: #1b6d2d;
        color: #fff;
        text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);
        text-align: left;
        font-weight: 400
    }
    .planner-search-form-populated .planner-search-location input:focus,
    .planner-search-form-populated .planner-search-location input:hover {
        background: #165824
    }
}

@media print {
    .planner-search-form-populated .planner-search-location input {
        background: none;
        text-align: left
    }
}

.planner-search-form-populated .planner-search-location::-webkit-input-placeholder {
    color: #fff
}

.planner-search-form-populated .planner-search-location:-ms-input-placeholder {
    color: #fff
}

.planner-search-form-populated .planner-search-location::placeholder {
    color: #fff
}

@media print {
    .planner-search-form-populated .planner-search-location::-webkit-input-placeholder {
        color: #000
    }
    .planner-search-form-populated .planner-search-location:-ms-input-placeholder {
        color: #000
    }
    .planner-search-form-populated .planner-search-location::placeholder {
        color: #000
    }
}

@media print {
    .planner-search-form-populated .planner-search-location {
        padding: 0 0 0 5vw
    }
}

.planner-search-form-populated .planner-search-trigger-leave-arrive {
    background: #1b6d2d;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);
    text-align: center;
    font-size: .875em;
    border-color: transparent transparent rgba(0, 0, 0, .125);
    margin-bottom: 0
}

.planner-search-form-populated .planner-search-trigger-leave-arrive:focus,
.planner-search-form-populated .planner-search-trigger-leave-arrive:hover {
    background: #165824
}

.planner-search-form-populated .planner-search-trigger-leave-arrive .icon {
    opacity: .5;
    margin-right: -2em;
    position: relative;
    right: -.5em
}

@media print {
    .planner-search-form-populated .planner-search-trigger-leave-arrive .icon {
        display: none
    }
}

@media screen and (min-width:64em) {
    .planner-search-form-populated .planner-search-trigger-leave-arrive {
        position: relative;
        margin-bottom: 1em
    }
    .planner-search-form-populated .planner-search-trigger-leave-arrive .icon {
        position: absolute;
        right: 1em;
        margin-right: 0
    }
}

@media screen and (min-width:64em) {
    .planner-search-form-populated .planner-search-trigger-leave-arrive {
        border: 0;
        text-align: left;
        text-indent: .5em
    }
}

@media print {
    .planner-search-form-populated .planner-search-trigger-leave-arrive {
        background: none;
        border-bottom: 0 none;
        color: #000;
        margin: 0 0 0 5vw;
        padding-left: 0;
        text-align: left
    }
    .planner-search-form-populated .planner-search-trigger-leave-arrive:hover {
        background: none
    }
}

.planner-search-form-populated .planner-search-leave-arrive {
    padding: 1em 5% 0;
    font-size: .875em;
    position: relative
}

@media screen and (min-width:64em) {
    .planner-search-form-populated .planner-search-leave-arrive {
        padding: 0;
        background: 0
    }
}

.planner-search-form-populated .planner-search-leave-arrive-switch .control-radio {
    background: #208135;
    color: #fff;
    border-color: rgba(0, 0, 0, .125);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .125)
}

.planner-search-form-populated .planner-search-leave-arrive-switch .control-radio.active {
    background: #25953d
}

.planner-search-form-populated .planner-search-leave-arrive-switch .control-radio.focused,
.planner-search-form-populated .planner-search-leave-arrive-switch .control-radio:active,
.planner-search-form-populated .planner-search-leave-arrive-switch .control-radio:focus,
.planner-search-form-populated .planner-search-leave-arrive-switch .control-radio:hover {
    background: #165824
}

@media print {
    .planner-search-form-populated .planner-search-leave-arrive-switch .control-radio {
        color: #000
    }
}

.planner-search-form-populated .control-select {
    background: #1b6d2d;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .125)
}

.planner-search-form-populated .control-select:focus,
.planner-search-form-populated .control-select:hover {
    background: #165824
}

.planner-search-form-populated .control-select:hover {
    border-color: transparent
}

.planner-search-form-populated .control-select .icon {
    background: #1b6d2d;
    transition: background .2s cubic-bezier(.365, .095, .535, 1);
    color: hsla(0, 0%, 100%, .5)
}

.planner-search-form-populated .control-select:hover .icon {
    background: #165824
}

.planner-search-form-populated .control-select select {
    background: none;
    color: #fff
}

@media print {
    .planner-search-form-populated .control-select select {
        color: #000
    }
}

.planner-search-form-populated .planner-search-footer {
    padding: 0 5%
}

@media screen and (min-width:64em) {
    .planner-search-form-populated .planner-search-footer {
        padding: 0
    }
}

.planner-search-form-populated .planner-search-footer-back-btn {
    display: block;
    border-radius: 0;
    border-color: transparent;
    background: transparent;
    position: absolute;
    margin: 0;
    top: 0;
    left: 0
}

.planner-search-form-populated .planner-search-footer-back-btn:focus,
.planner-search-form-populated .planner-search-footer-back-btn:hover {
    opacity: 1;
    background: #1b6d2d;
    color: inherit
}

.planner-search-form-populated .planner-search-footer-back-btn .icon {
    margin: 0
}

.planner-search-form-populated .planner-search-footer-back-btn-text {
    display: none
}

@media screen and (min-width:64em) {
    .planner-search-form-populated .planner-search-footer-back-btn {
        opacity: .5;
        width: 100%;
        border-radius: .25em .25em 0 0;
        padding: .75em 5%
    }
    .planner-search-form-populated .planner-search-footer-back-btn-text {
        display: inline-block
    }
    .planner-search-form-populated .planner-search-footer-back-btn .icon {
        margin-right: .5em
    }
}

@media print {
    .planner-search-form-populated .planner-search-footer {
        display: none
    }
}

.planner-search-form-populated .planner-search-btn {
    display: none;
    font-size: 1.4rem
}

.planner-search-form-populated .planner-search-btn:before {
    content: "Done"
}

.planner-search-form-populated .planner-search-btn span {
    display: none
}

@media screen and (min-width:64em) {
    .planner-search-form-populated .planner-search-btn {
        display: block;
        font-size: 1.6rem
    }
    .planner-search-form-populated .planner-search-btn:before {
        display: none
    }
    .planner-search-form-populated .planner-search-btn span {
        display: inline
    }
}

@media print {
    .planner-search-form-populated {
        background: #fff;
        color: #000;
        display: block;
        padding-top: 1.5em;
        position: static
    }
}

.planner-search-leave-arrive+.planner-search-footer .planner-search-btn {
    display: block
}

.planner-search-form-in-title-bar .planner-search-location {
    display: none
}

.header-hero-solid-banner .planner-search-leave-arrive {
    font-size: .875em
}

.planner-search-leave-arrive-switch {
    overflow: hidden
}

.planner-search-leave-arrive-switch .control-radio {
    width: 50%;
    float: left;
    text-align: center
}

.planner-search-leave-arrive-switch .control-radio input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip: rect(0, 0, 0, 0);
    border: 0
}

.planner-search-leave-arrive-switch .control-radio:first-child {
    margin-left: 0;
    border-radius: .25em 0 0 .25em
}

.planner-search-leave-arrive-switch .control-radio:last-child {
    margin-left: -.0625em;
    border-radius: 0 .25em .25em 0
}

@media screen and (max-width:64em) {
    .planner-view-timeline .planner-search-leave-arrive {
        display: none
    }
}

.planner-search-set-date {
    width: 49%;
    float: left
}

@media screen and (min-width:64em) {
    .planner-search-form-populated .planner-search-set-date {
        width: 100%;
        float: none
    }
}

.planner-search-set-time {
    width: 49%;
    float: right
}

@media screen and (min-width:64em) {
    .planner-search-form-populated .planner-search-set-time {
        width: 100%;
        float: none
    }
}

.mode-card {
    position: relative
}

.mode-card:after,
.mode-card:before {
    content: "";
    display: table
}

.mode-card:after {
    clear: both
}

.mode-card-link {
    display: block;
    text-decoration: none;
    color: inherit
}

.mode-card-link:after,
.mode-card-link:before {
    content: "";
    display: table
}

.mode-card-link:after {
    clear: both
}

.mode-card-icon {
    font-size: 2em;
    position: absolute;
    border-radius: 50%;
    background: #f1f1f1;
    left: 0;
    top: 0;
    width: 1.5em;
    height: 1.5em;
    padding: .25em
}

@media screen and (min-width:64em) {
    .mode-card-icon {
        top: -.125em
    }
}

.mode-card-icon:before {
    position: absolute;
    top: .25em;
    width: 1em;
    text-align: center
}

.mode-card-header {
    padding-left: 4em;
    position: relative;
    min-height: 3em
}

.mode-card-title {
    padding: .5em 0;
    font-weight: 400
}

.mode-card-duration-prefix {
    opacity: .5
}

@media screen and (min-width:64em) {
    .mode-card .smart-metrics {
        width: 75%;
        float: left
    }
}

.mode-card-cta {
    display: none;
    font-size: 1.4rem;
    margin: 0
}

.mode-card-cta .icon {
    opacity: .5
}

@media screen and (min-width:64em) {
    .mode-card-cta {
        display: inline-block;
        width: 20%;
        margin-top: 1em;
        margin-left: 5%;
        max-width: 10em;
        float: right
    }
}

.mode-card-warning {
    opacity: .5;
    font-size: .75em
}

.mode-card-footer {
    border-top: .125em dotted rgba(0, 0, 0, .125);
    padding-top: 2.5%;
    margin-top: 2.5%;
    clear: both
}

.route-card-icon-group {
    margin-bottom: .5em;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.route-card-icon-group .icon {
    font-size: 2em;
    margin-right: .25em;
    min-width: 1em;
    text-align: center
}

.route-card-meta {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-top: .375em
}

.route-card-meta:after,
.route-card-meta:before {
    content: "";
    display: table
}

.route-card-meta:after {
    clear: both
}

.route-card-meta-item {
    float: left
}

.route-card-times {
    width: 75%;
    padding-right: 1em
}

.route-card-duration {
    width: 25%
}

.route-card-meta-title {
    font-weight: 400;
    font-size: 1em
}

.route-card-meta-subtitle {
    opacity: .75;
    font-size: .75em;
    margin: 0
}

.route-card-meta-subtitle .icon {
    color: inherit
}

.planner-title-bar-route-summary {
    font-size: 1.6rem;
    position: relative
}

.planner-title-bar-route-summary.btn {
    display: block;
    padding: .375em 2.5%;
    text-transform: none
}

.planner-title-bar-route-summary .mode-icon {
    position: absolute;
    font-size: 2em;
    left: 1em;
    top: 0
}

.planner-title-bar-route-summary-duration {
    display: block;
    padding: 0 4em
}

.planner-title-bar-route-summary-distance {
    position: absolute;
    font-size: .75em;
    top: .75em;
    right: 1em;
    text-align: right;
    width: 5.5em
}

.planner-results-directions-header {
    margin-bottom: 5%;
    padding-bottom: 1em;
    border-bottom: .125em dotted rgba(0, 0, 0, .125)
}

.planner-results-directions-header-title {
    font-weight: 400;
    font-size: 1em
}

.planner-results-directions-header-subtitle {
    font-size: .875em;
    padding-top: .5em
}

.planner-results-directions-header-alert {
    opacity: .5;
    font-size: .75em;
    max-width: 32em
}

.planner-results-map-tab {
    padding: 0;
    margin: 0
}

.planner-results-map {
    min-height: 500px;
}

@media screen and (min-width:64em) {
    .planner-results-map {
        border-top: .125em solid rgba(0, 0, 0, .125)
    }
}

@media print {
    .planner-results-map {
        page-break-inside: avoid;
        min-height: 40em
    }
}

.bicycling-layer-labels {
    padding-bottom: 100px
}

@media screen and (min-width:64em) {
    .bicycling-layer-labels {
        padding-bottom: 21px
    }
}

.map-text {
    text-stroke: 1px #fff;
    text-fill-color: #2b2e34;
    color: #2b2e34;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff
}

.map-pin {
    display: block;
    width: 1.25em;
    height: 1.25em;
    border: .25em solid #fff;
    box-shadow: 0 0 .25em rgba(0, 0, 0, .125);
    border-radius: 100%
}

.map-pin-origin {
    background: #94bf35
}

.map-pin-destination {
    background: #cd1620
}

.map-pin-waypoint {
    background: #fff;
    border-color: #000;
    font-size: .75em
}

.marker-route-time {
    position: absolute;
    z-index: 50;
    font-size: 16px;
    font-family: co-headline, ubuntu, sans-serif;
    white-space: nowrap
}

.marker-route-time.marker-route-time-selectable {
    cursor: pointer
}

.marker-route-time .contents {
    background-color: #fff;
    color: #2b2e34;
    border-radius: .25em;
    padding: 1px 8px;
    border: 1px solid #b4b4b3;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, .125);
    position: relative
}

.marker-route-time .contents:after,
.marker-route-time .contents:before {
    content: "";
    display: block;
    height: 0;
    width: 0;
    position: absolute
}

.marker-route-time-top-left .contents {
    margin-right: 10px;
    margin-bottom: 10px;
    border-bottom-right-radius: 0
}

.marker-route-time-top-left .contents:before {
    border-bottom: 10px solid transparent;
    border-left: 10px solid #b4b4b3;
    right: -12px;
    bottom: -6px;
    transform: rotate(-40deg) scaleY(2) skew(-135deg)
}

.marker-route-time-top-left .contents:after {
    border-bottom: 10px solid transparent;
    border-left: 10px solid #fff;
    right: -10px;
    bottom: -5px;
    transform: rotate(-40deg) scaleY(2) skew(-135deg)
}

.marker-route-time-top-right .contents {
    margin-left: 10px;
    margin-bottom: 10px;
    border-bottom-left-radius: 0
}

.marker-route-time-top-right .contents:before {
    border-bottom: 10px solid transparent;
    border-left: 10px solid #b4b4b3;
    left: -9px;
    bottom: -12px;
    transform: rotate(60deg) scaleY(2) skew(-135deg)
}

.marker-route-time-top-right .contents:after {
    border-bottom: 10px solid transparent;
    border-left: 10px solid #fff;
    left: -7px;
    bottom: -10px;
    transform: rotate(60deg) scaleY(2) skew(-135deg)
}

.marker-route-time-bottom-left .contents {
    margin-right: 10px;
    margin-top: 10px;
    border-top-right-radius: 0
}

.marker-route-time-bottom-left .contents:before {
    border-top: 10px solid transparent;
    border-right: 10px solid #b4b4b3;
    right: -9px;
    top: -10px;
    transform: rotate(65deg) scaleY(2) skew(-135deg)
}

.marker-route-time-bottom-left .contents:after {
    border-top: 10px solid transparent;
    border-right: 10px solid #fff;
    right: -8px;
    top: -9px;
    transform: rotate(65deg) scaleY(2) skew(-135deg)
}

.marker-route-time-bottom-right .contents {
    margin-left: 10px;
    margin-top: 10px;
    border-top-left-radius: 0
}

.marker-route-time-bottom-right .contents:before {
    border-top: 10px solid transparent;
    border-left: 10px solid #b4b4b3;
    left: -6px;
    top: -14px;
    transform: rotate(-3deg) scaleY(2) skew(-135deg)
}

.marker-route-time-bottom-right .contents:after {
    border-top: 10px solid transparent;
    border-left: 10px solid #fff;
    left: -4px;
    top: -12px;
    transform: rotate(-3deg) scaleY(2) skew(-135deg)
}

.planner-results-elevation {
    margin-bottom: 1em
}

.planner-elevation-title {
    padding: .75em 1em 0
}

@media screen and (min-width:64em) {
    .planner-results-tabs {
        border-top-width: 1px
    }
}

.planner-results-tabs-navbar {
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, .125);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-width: 20em;
    z-index: 99
}

.planner-results-tabs-navbar .route-actions {
    float: right;
    display: none
}

.planner-results-tabs-navbar .route-feedback {
    font-size: .9em;
    line-height: 40px;
    width: 100%;
    text-align: center
}

@media screen and (min-width:64em) {
    .planner-results-tabs-navbar .route-feedback {
        text-align: left;
        width: auto
    }
}

.planner-results-tabs-navbar .route-feedback a {
    display: inline-block;
    height: 30px;
    margin-left: 20px;
    vertical-align: text-bottom;
    width: 30px
}

.planner-results-tabs-navbar .icon-smiley {
    background-image: url(../images/icon-smiley.245292f5.png)
}

.planner-results-tabs-navbar .icon-neutral {
    background-image: url(../images/icon-neutral.8555a9f7.png)
}

.planner-results-tabs-navbar .icon-sad {
    background-image: url(../images/icon-sad.c69b2eb7.png)
}

@media screen and (min-width:64em) {
    .planner-results-tabs-navbar {
        position: relative;
        z-index: 1;
        border-top: 0 none;
        padding: .75em 1em 0
    }
    .planner-results-tabs-navbar-short {
        height: 2em
    }
}

.planner-results-tabs-navbar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1
}

.planner-results-tabs-navbar-menu:after,
.planner-results-tabs-navbar-menu:before {
    content: "";
    display: table
}

.planner-results-tabs-navbar-menu:after {
    clear: both
}

.planner-results-tabs-navbar-menu-item {
    display: inline-block;
    float: left;
    width: 50%;
    padding: .375em .25em .375em .5em
}

.planner-results-tabs-navbar-menu-item:after,
.planner-results-tabs-navbar-menu-item:before {
    content: "";
    display: table
}

.planner-results-tabs-navbar-menu-item:after {
    clear: both
}

.planner-results-tabs-navbar-menu-item:last-child {
    padding: .375em .5em .375em .25em
}

.planner-results-tabs-navbar-menu-item:only-child {
    margin-left: 25%
}

@media screen and (min-width:64em) {
    .planner-results-tabs-navbar-menu-item {
        width: auto;
        padding: 0 .5em .75em 0
    }
    .planner-results-tabs-navbar-menu-item:last-child {
        float: right;
        padding: 0 0 .75em
    }
}

.planner-results-tabs-navbar-menu-item .btn {
    display: block;
    margin: 0;
    font-size: .875em;
    width: 100%
}

@media screen and (min-width:64em) {
    .planner-results-tabs-navbar-menu-item a.btn {
        background: #fff;
        border-color: transparent;
        color: #34acde
    }
    .planner-results-tabs-navbar-menu-item a.btn:hover {
        background: #f1f1f1
    }
}

.planner-results-tabs-navbar-menu-item.active {
    display: none
}

@media screen and (min-width:64em) {
    .planner-results-tabs-navbar-menu-item.active {
        display: block
    }
    .planner-results-tabs-navbar-menu-item.active .btn {
        color: #1b1919;
        cursor: default;
        font-weight: 700
    }
    .planner-results-tabs-navbar-menu-item.active .btn:focus,
    .planner-results-tabs-navbar-menu-item.active .btn:hover {
        background: #fff
    }
}

@media print {
    .planner-results-tabs-navbar {
        display: none
    }
}

.planner-conclusion {
    background: #fff
}

@media screen and (min-width:37.5em) {
    .planner-conclusion {
        border-radius: .25em;
        border: .125em solid rgba(0, 0, 0, .125);
        overflow: hidden
    }
}

.planner-conclusion p {
    margin-bottom: 0
}

.planner-conclusion-header {
    background: #94bf35;
    text-align: center;
    color: #fff
}

.planner-conclusion-header-cycling {
    background: #94bf35
}

.planner-conclusion-header-bus {
    background: #cd1620
}

.planner-conclusion-header-ferry {
    background: #622e80
}

.planner-conclusion-header-car {
    background: #e64f29
}

.planner-conclusion-header-motorbike {
    background: #e00b80
}

.planner-conclusion-header-walking {
    background: #208135
}

.planner-conclusion-header-train {
    background: #34acde
}

@media screen and (min-width:37.5em) {
    .planner-conclusion-header {
        font-size: 1.25em
    }
}

.planner-conclusion-header * {
    color: inherit
}

.planner-conclusion-header-title {
    padding: 5%;
    font-weight: 400
}

.planner-conclusion-header-icon {
    width: 6em
}

.planner-conclusion-header-description {
    padding: 0 5% 5%;
    font-weight: 700
}

.planner-conclusion-header .smart-metrics {
    background: rgba(0, 0, 0, .125);
    padding: 2.5% 5%;
    text-align: left
}

@media screen and (min-width:37.5em) {
    .planner-conclusion-body {
        font-size: 1.25em
    }
}

.planner-conclusion .saved-journey-origin:after {
    border-color: transparent transparent transparent #fff
}

.planner-conclusion .saved-journey-location-name {
    font-weight: 700
}

.planner-conclusion .saved-journey-location-postcode {
    opacity: 1
}

.planner-conclusion-route-meta {
    padding: .75em 5%;
    border-top: 1px solid rgba(0, 0, 0, .125)
}

.planner-conclusion .route-card-times {
    width: 60%
}

.planner-conclusion .route-card-duration {
    width: 40%
}

.planner-conclusion-footer {
    padding: 1.5em 5% .75em;
    border-top: 1px solid rgba(0, 0, 0, .125);
    text-align: center
}

.planner-conclusion-footer .planner-alert {
    margin: 0 0 1em;
    font-size: .875em
}

.planner-conclusion-footer .planner-alert-info .icon {
    color: #94bf35
}

.planner-conclusion-footer .btn {
    width: 100%;
    margin: 0 0 1em
}

@media screen and (min-width:37.5em) {
    .planner-conclusion-footer {
        padding: 1.5em 2.5% .75em
    }
    .planner-conclusion-footer .btn {
        width: 44%;
        margin: 0 2.5% 1em
    }
}

.planner-route-summary-header {
    font-size: 1.6rem;
    display: block;
    position: fixed;
    top: 3em;
    left: 0;
    right: 0;
    z-index: 5001;
    background: #f1f1f1;
    border: .125em solid rgba(0, 0, 0, .125);
    border-width: 0 0 .125em;
    padding: .375em 2.5%;
    text-align: center;
    color: inherit;
    height: 4em
}

@media screen and (min-width:64em) {
    .planner-route-summary-header {
        position: relative;
        top: 0;
        z-index: 0;
        font-size: 1.25em;
        text-align: left;
        padding-left: 7em;
        border-width: .125em .125em 0;
        background: #fff;
        height: auto;
        min-height: 5em;
        padding-top: 1.5em;
        padding-bottom: 1.5em
    }
}

.planner-route-summary-header:focus,
.planner-route-summary-header:hover {
    background: #fff
}

@media screen and (min-width:64em) {
    .planner-route-summary-header:focus .planner-route-summary-header-back-icon,
    .planner-route-summary-header:hover .planner-route-summary-header-back-icon {
        opacity: 1;
        color: #34acde
    }
}

.planner-route-summary-header-back-icon {
    opacity: .25;
    position: absolute;
    font-size: 1.6rem;
    top: .75em;
    left: 1.125em
}

@media screen and (min-width:64em) {
    .planner-route-summary-header-back-icon {
        font-size: 1em;
        top: 1.5em;
        left: 5%
    }
}

@media print {
    .planner-route-summary-header-back-icon {
        display: none
    }
}

.planner-route-summary-header-subtitle {
    font-size: .75em;
    padding-top: .375em
}

.planner-route-summary-header-subtitle .icon {
    color: inherit
}

.planner-route-summary-header .mode-icon {
    position: absolute;
    font-size: 1.5em;
    left: 1.5em;
    top: .25em
}

@media screen and (min-width:64em) {
    .planner-route-summary-header .mode-icon {
        font-size: 2em;
        top: .5em;
        left: 5%;
        margin-left: .75em
    }
}

@media print {
    .planner-route-summary-header .mode-icon {
        display: none
    }
}

.planner-route-summary-header-duration {
    display: block;
    padding: 0 4em
}

@media screen and (min-width:64em) {
    .planner-route-summary-header-duration {
        padding-left: 0;
        padding-right: 8em;
        font-weight: 700
    }
}

@media print {
    .planner-route-summary-header-duration {
        padding: 0
    }
}

.planner-route-summary-header-distance {
    position: absolute;
    font-size: .75em;
    top: .75em;
    right: 1em;
    text-align: right;
    width: 7.5em;
    font-weight: 400
}

@media screen and (min-width:64em) {
    .planner-route-summary-header-distance {
        font-size: .875em;
        top: 1.5em
    }
}

@media print {
    .planner-route-summary-header-distance {
        position: static
    }
}

@media print {
    .planner-route-summary-header {
        background: #fff;
        border: 0 none;
        height: auto;
        left: auto;
        padding: .375em 5%;
        position: static;
        right: auto;
        text-align: left;
        top: auto
    }
}

.planner-tabs-content-tab .ticket-info {
    font-size: .75em;
    border-top: .25rem dotted rgba(0, 0, 0, .125);
    margin-top: 10%;
    padding-top: 5%
}

.ticket-info-title {
    margin-bottom: .5em
}

.ticket-info-title .icon-ticket {
    color: #e64f29
}

.ticket-info-list {
    margin: 0;
    padding: 0
}

.ticket-info-list-item {
    position: relative;
    margin-top: 2.5%;
    list-style-position: inside
}

.ticket-info-list-item:only-child {
    list-style-type: none
}

.ticket-info-list-item-title {
    font-weight: 400;
    margin-bottom: .5em
}

.ticket-info-list-item-btn {
    width: 100%;
    margin-top: 1em
}

@media screen and (min-width:37.5em) {
    .ticket-info-list-item-btn {
        position: absolute;
        right: 0;
        top: 0;
        width: 12em;
        margin: 0
    }
}

@media print {
    .ticket-info-list-item-btn {
        display: none
    }
}

.ticket-info-operator-title {
    opacity: .5;
    font-weight: 400;
    margin-bottom: .25em
}

.ticket-info-operator-list {
    list-style: none;
    margin: 0;
    padding: 0
}

.ticket-info-operator-list-item a:hover {
    text-decoration: underline
}

@media screen and (min-width:37.5em) {
    .ticket-info-list-item.ticket-info-list-item-link {
        padding-right: 13em
    }
}

.planner-view-home {
    background: #fff
}

.planner-view-home .container {
    padding-top: 0
}

@media screen and (min-width:64em) {
    .planner-view-home .planner-content {
        padding: 5vw;
        margin: 0;
        width: 66.6666%
    }
}

.planner-view-home .cta-footer-planner {
    display: block
}

.planner-view-home .promo-card p {
    margin-bottom: 1em
}

.planner-view-home .previous-journeys {
    margin: -5%;
    margin-bottom: 5%
}

@media screen and (min-width:64em) {
    .planner-view-home .previous-journeys {
        margin: 0 0 5%
    }
}

.planner-view-home .planner-intro .planner-content-header-title {
    margin: 0;
    padding: 0
}

.planner-view-home .planner-intro p {
    font-size: .875em;
    margin-top: 1em
}

@media screen and (min-width:64em) {
    .planner-view-home .planner-intro p {
        font-size: 1em
    }
}

.planner-style-guide .view-planner {
    padding: 5vw;
    max-width: 30em;
    margin: 0 auto
}

.planner-style-guide .view-planner .btn {
    width: 100%
}

.planner-style-guide .planner .container {
    min-height: 100vh
}

.roadworks {
    font-size: 16px
}

.roadworks-title {
    font-size: 1.125em;
    padding-bottom: .75em;
    border-bottom: 1px solid rgba(0, 0, 0, .125)
}

.roadworks-title .icon {
    opacity: .25;
    font-size: .875em;
    margin-right: .25em
}

.roadworks-type {
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.125em;
    margin-bottom: .5em
}

.roadworks-type .icon {
    opacity: .25;
    font-size: .875em;
    margin-right: .25em
}

.roadworks-body {
    font-family: co-text, ubuntu, sans-serif;
    overflow: scroll;
    max-height: 180px;
    padding: .75em 0
}

.roadworks-date-end strong,
.roadworks-date-start strong {
    min-width: 4em;
    display: inline-block
}

.roadworks-info {
    padding-top: .75em;
    font-size: .875em
}

/* WEATHER  ================================================ */

.weather-forecast-card {
    padding: 20px;
    font-size: 14px;
}

.weather-forecast-card  h2 {
    font-size: 16px;
    text-transform: uppercase;
}

.weather-forecast-row {
    padding: 10px 20px;
    font-size: .8em;
}

.weather-forecast-row h4 {
    margin-bottom: 0;
    font-size: 14px;
    letter-spacing: 0;
    font-weight: 600;
}

.weather-forecast-row:first-child h4 {
    margin-bottom: 20px;
}

.weather-forecast-row {
    border-top: 1px solid #ddd;
}

.weather-temp {
    font-size: 40px;
    line-height: 48px;
    font-weight: 600;
}

.weather-temp   small {
    color: #333;
    font-size: 12px;
    font-weight: normal;
    color: #666;
}

.weather-icon {
    width: 60px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 40px;
    opacity: 0.8;
}

.weather-details {
    width:180px;
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
}

.weather-summary {
    display: inline-block;
    vertical-align: middle;
}

.weather-climate {
    color: #666;
}

.weather-symbol  {
   display: inline-block;
   width: 20px; 
   height: 20px;
   margin-right: -2px;
   margin-bottom: -1px;
   background-position: 50% 50%;
   background-repeat: no-repeat;
   background-size: contain;
   vertical-align: text-bottom;
   opacity: 0.8;
}

.forecast-ahead .weather-details {
    width: 30px;
    text-align: center;
    color: #666;
    font-size: 12px;
    vertical-align: top;
    font-weight: 600;
}

.forecast-ahead .weather-icon {
    width: 90px;
    text-align: center;
    color: #666;
    font-size: 12px;
    margin: 0;
    opacity: 1;
}

.forecast-ahead .weather-summary {
    width: 385px;
}

.temp-high {
    font-weight: 600;
}

.humidity-icon {
   display: inline-block;
   width: 20px; 
   height: 20px;
   margin-right: -2px;
   background-image: url(/wp-content/themes/kent-connected/images/weather/icon-humidity.png);
   background-position: -1px 50%;
   background-repeat: no-repeat;
   background-size: contain;
   vertical-align: text-bottom;
   opacity: 0.8;
}

.wind-icon {
   display: inline-block;
   width: 20px; 
   height: 20px;
   margin-right: 0;
   margin-left: 10px;
   margin-bottom: -1px;
   background-image: url(/wp-content/themes/kent-connected/images/weather/icon-wind.png);
   background-position: 50% 50%;
   background-repeat: no-repeat;
   background-size: contain;
   vertical-align: text-bottom;
   opacity: 0.8;
}

.journey-map-controls {
  background-color: #57b94a;
  cursor: pointer;
  height: 59px;
  top: 3px;
  left: 1px;
  overflow: hidden;
  position: absolute;
  z-index: 2;
}

.planner-elevation + .planner-results-map + .journey-map-controls {
  top: 162px;
  left: 10px;
}

a.change-map-type {
  display: inline-block;
  width: 75px;
  height: 59px;
  font-size: 11px;
  line-height: 59px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
}