/* !1.0 Reset */
html { -webkit-text-size-adjust: 100%; }
html, body { padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6, p { margin-top: 0; }
* { outline: none; }
img { border: none; }


/* !1.2 Clear Fix */
.clearfix:before,
.clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* For IE 6/7 (trigger hasLayout) */
.clearfix { zoom: 1; }


/* !1.3 Default */
body { font-family: 'Open Sans', arial, sans-serif; font-size: 16px; color: #231F20; }
p { margin: 0 0 15px; }
.wrapper { padding: 0 20px; margin: 0 auto; display: block; }
.hide-mobile { display: none; }
sup { font-size: 0.75em; }
sup a { color: #F16534; text-decoration: none; }


/* !2.0 Header */
.header { padding-bottom: 20px; border-bottom: 1px solid #D1D2D4; margin-bottom: 20px; }
.header h1 { font-weight: 300; font-size: 2.125em; color: #231F20; margin-bottom: 18px; }
.header p { font-weight: 300; font-size: 1.3125em; color: #58585B; margin-bottom: 0; }
.header sup { font-size: 0.65em; }


/* !3.0 Content */
.popup-container { position: relative; }
.popup-container .popup { display: none; opacity: 0; -webkit-transition: opacity 200ms, display 200ms;transition: opacity 200ms, display 200ms; position: absolute; left: 50%; top: 100%; -webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%); width: 200px; padding-top: 16px; }
.popup-container .popup-bottom { top: auto; bottom: 100%; padding-top: 0; padding-bottom: 18px; }
.popup-container:hover .popup { display: block; opacity: 1; }

.popup-container .popup .heading { background: #231F20; color: #fff; font-family: 'Open Sans', arial, sans-serif; font-weight: bold; padding: 9px 15px; box-shadow: 0px 2px 6px rgba(0,0,0,0.4); }
.popup-container .popup .heading h3 { margin-bottom: 0; font-size: 1em; text-align: left; }
.popup-container .popup .snippet { background: #fff; border: 1px solid #231F20; padding: 10px 15px; box-shadow: 0px 2px 6px rgba(0,0,0,0.4); position: relative; z-index: 2; }
.popup-container .popup .snippet p { margin-bottom: 0; word-wrap: break-word; word-break: break-word; color: #231F20; line-height: 120%; text-align: left; }
.popup-container .popup .snippet p .read-more { white-space: nowrap; word-break: normal; word-wrap: normal; font-size: .875em; text-decoration: underline; display: block; margin: 5px 0; color: #007CC2; }

.popup-container .popup::before { content: ""; width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 16px solid #231F20; position: absolute; left: 50%; -webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%); top: 0; }
.popup-container .popup-bottom::before { content: none;  }
.popup-container .popup-bottom::after { content: ""; width: 55px; height: 24px; background: url(/images/tooltip-bottom.svg) no-repeat; position: absolute; left: 50%; -webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%); bottom: -5px; z-index: 3; }
.popup-container .popup-left { left: -16px; -webkit-transform: none;-ms-transform: none;transform: none; }
.popup-container .popup-left::after { left: -6px; -webkit-transform: none;-ms-transform: none;transform: none; }
.popup-container .popup-right { left: auto; right: -16px; -webkit-transform: none;-ms-transform: none;transform: none; }
.popup-container .popup-right::after { left: auto; right: -6px; -webkit-transform: none;-ms-transform: none;transform: none; }



/* !3.1 Map Area */
.map-data .map { cursor: pointer; margin: 0px -10px -20px; position: relative; }
@media screen and (min-width: 370px) {
    .map-data .map { margin: 0 -10px -10px; }
}
@media screen and (min-width: 400px) {
    .map-data .map { margin: 0 -10px 15px; }
}
.map-data .map svg { width: 100%; margin-top: -35px; }
@media screen and (min-width: 360px) {
    .map-data .map svg { margin-top: -15px; }
}
@media screen and (min-width: 400px) {
    .map-data .map svg { margin-top: 0; }
}

.map-data .map .region,
.map-data .map .region .city,
.map-data .map .region path { -webkit-transition: fill 200ms;transition: fill 200ms; }

.map-data .map .colour-lowest, 
.map-data .map .colour-lowest path { fill: #007CC2; }
.map-data .map .colour-low,
.map-data .map .colour-low path { fill: #64C9E9; }
.map-data .map .colour-mid,
.map-data .map .colour-mid path { fill: #B4E1E5; }
.map-data .map .colour-high,
.map-data .map .colour-high path { fill: #F8981C; }
.map-data .map .colour-hgihest,
.map-data .map .colour-hgihest path { fill: #F16534; }

.map-data .map .hover .region,
.map-data .map .hover .region path { fill: #231F20; }
.map-data .map .hover .city { fill: #fff; }
.map-data .map .clicked .region,
.map-data .map .clicked .region path { fill: #231F20; }
.map-data .map .clicked .city { fill: #fff; }
.map-data .map .hover .city:hover,
.map-data .map .hover .city-hover { fill: red; }

.map-data .data .tab-titles { margin: 0 -10px; padding: 0; list-style: none; margin-bottom: 22px; text-align: center; }
.map-data .data .tab-titles li { display: inline-block; font-size: .8125em; margin: 0px; }
.map-data .data .tab-titles li a { display: block; padding: 5px 8px; background: #B4E1E5; color: #231F20; text-decoration: none; -webkit-transition: background 200ms, color 200ms;transition: background 200ms, color 200ms; }
.map-data .data .tab-titles li:hover a,
.map-data .data .tab-titles li .selected { color: #fff; }
.map-data .data .tab-titles .data-set-1:hover a,
.map-data .data .tab-titles .data-set-1 .selected { background: #F16534; }
.map-data .data .tab-titles .data-set-2:hover a,
.map-data .data .tab-titles .data-set-2 .selected { background: #007CC2; }
.map-data .data .tab-titles .data-set-3:hover a,
.map-data .data .tab-titles .data-set-3 .selected { background: #CADB2A; }

.map-data .data .tab-titles .dropdown { position: relative; }
.map-data .data .tab-titles .dropdown .list { display: none; text-align: left; opacity: 0; background: #B4E1E5; -webkit-transition: opacity 200ms, background 200ms;transition: opacity 200ms, background 200ms; position: absolute; left: -16px; top: 28px; margin: 0; width: 120%; list-style: none; padding: 0; }
.map-data .data .tab-titles .dropdown .hover { display: block; opacity: 1; background: #CADB2A; padding: 10px 0; z-index: 4000; }
.map-data .data .tab-titles .dropdown .list li { font-size: .75em; display: block; }
.map-data .data .tab-titles .dropdown .list li a { padding: 4px 8px; background: none; }
.map-data .data .tab-titles .dropdown .list li a:hover { color: #231F20; }

.map-data .data-set .title { font-size: 2.5em; text-align: center; font-weight: 300; margin-bottom: 16px; }

.map-data .data-set .year-tabs { }
.map-data .data-set .year-tabs .year-tab-titles { margin: 0 -20px; padding: 0; list-style: none; border-bottom: 2px solid #939597; margin-bottom: 36px; }
.map-data .data-set .year-tabs .year-tab-titles li { display: inline-block; font-size: 1.0625em; font-weight: 300; margin: 0 -4px -2px 0; }
.map-data .data-set .year-tabs .year-tab-titles li a { display: block; background: #fff; color: #939597; border: 2px solid #939597; border-width: 2px 2px 2px 0; padding: 8px 10px 9px; text-decoration: none; line-height: 100%; width: 44px; text-align: center; -webkit-transition: background 200ms, color 200ms;transition: background 200ms, color 200ms; }
.map-data .data-set .year-tabs .year-tab-titles li:first-child a { border-width: 2px; margin-left: 0 !important; }
.map-data .data-set .year-tabs .year-tab-titles li a:hover,
.map-data .data-set .year-tabs .year-tab-titles li a.selected { background: #F16534; color: #fff; border-color: #F16534; position: relative; z-index: 20; border-width: 2px; margin-left: -2px; }
.map-data .data-set-2 .year-tabs .year-tab-titles li a:hover,
.map-data .data-set-2 .year-tabs .year-tab-titles li a.selected { background: #007CC2; border-color: #007CC2; }
.map-data .data-set-3 .year-tabs .year-tab-titles li a:hover,
.map-data .data-set-3 .year-tabs .year-tab-titles li a.selected { background: #CADB2A; border-color: #CADB2A; }

.map-data table.large-only { display: none; }

.map-data .table { border-collapse: collapse; width: 100%; counter-reset: rows; }
.map-data .table th,
.map-data .table td { text-align: center; }
.map-data .table th { font-size: .75em; color: #939597; text-transform: uppercase; font-weight: 300; padding-top: 0; }
.map-data .table tr:first-child td { font-weight: 700; }
.map-data .table td.city { text-align: left; position: relative; width: 30%; }
.map-data .table td.pop,
.map-data .table td.pay,
.map-data .table td.capita { width: 20%; }
.map-data .table td.city::before { content: counter(rows)'.'; counter-increment: rows; position: absolute; left: -18px; top: 1px; }

.map-data .data-set-regions .table tr td { font-weight: 700; }
.map-data .data-set-regions .table td.city::before { content: none; }
.map-data .data-set-regions .table td.city { font-size: 1.75em; font-weight: 300; }
.map-data .data-set-regions .table tr.region { border-bottom: 2px dashed #939597; }
.map-data .data-set-regions .table tr.region td { padding-bottom: 10px; }
.map-data .data-set-regions table.no-city tr.region { border: 0 none; }
.map-data .data-set-regions table.no-city tr.region td { padding-bottom: 0; }
.map-data .data-set-regions .table tr.city:first-child { padding-top: 10px; background: red; }

.map-data table.small-only { margin-top: -30px; counter-reset: rows-2; }
.map-data table.small-only .st-head-row { text-align: left; padding-top: 20px; text-transform: none; font-size: 1.5em; color: #231F20; }
.map-data table.small-only .st-head-row-main { display: none; }
.map-data table.small-only .st-head-row::before { content: counter(rows-2)'.'; counter-increment: rows-2; padding-right: 2px; }
.map-data table.small-only td { text-align: left; }
.map-data table.small-only .st-key { color: #939597; font-size: .75em; }
.map-data table.small-only .st-val { font-size: .875em; }

.map-data .data-set-regions table.small-only .st-head-row::before { content: none; }
.map-data .data-set-regions table.small-only tr.region { border-bottom: 0 none; }
.map-data .data-set-regions table.small-only tr.region td { padding-bottom: 0px; border-bottom: 0 none; }
.map-data .data-set-regions table.small-only tr.region.row-3 { border-bottom: 2px dashed #939597; }
.map-data .data-set-regions table.small-only tr.region.row-3 td { padding-bottom: 15px; }
.map-data .data-set-regions table.no-city tr.region.row-3 { border-bottom: 0 none; }
.map-data .data-set-regions table.no-city tr.region.row-3 td { padding-bottom: 0; }


.map-data .graph-wrapper { padding-top: 18px; border-top: 2px solid #939597; margin: 18px -18px 0; position: relative; }
.map-data .graph-wrapper .graph-info { margin: 10px 0; }
.map-data .graph-legend { margin: 0; padding: 0; list-style: none; width: 290px; margin: 10px auto 5px; }
.map-data .graph-legend li { display: block; font-size: .625em; margin: 0 0 10px 0; }
.map-data .graph-legend li::before { content: ""; display: inline-block; width: 20px; height: 12px; background: #B4E1E5; margin-right: 5px; vertical-align: middle; }
.map-data .graph-legend li.key-capita::before { background: #007CC2; }
.map-data .graph-legend li.key-average::before { background: transparent; height: 5px; border-top: 1px dashed #F16534; }

.map-data .graph { background: url(/images/graph-bg-regions.svg) no-repeat 50% 100%; background-size: contain; width: 316px; height: 150px; position: relative; display: block; margin: 0 auto; }
@media screen and (min-width: 400px) {
    .map-data .graph-legend { width: 358px; }
    .map-data .graph { width: 396px; height: 182px; }
}
.map-data .graph .graph-data { position: absolute; left: 4%; top: 3%; width: 90.4%; height: 84.7%; }
.map-data .graph .graph-data .region { position: absolute; left: 0; bottom: 0; height: 100%; width: 7.14%; margin: 0; }
.map-data .graph .graph-data .region:hover { background: rgba(0,0,0,0.1); }
.map-data .graph .graph-data .region .pay { position: absolute; left: 10%; bottom: 0; width: 40%; height: 1%; background: #B4E1E5; }
.map-data .graph .graph-data .region .capita { position: absolute; left: 50%; bottom: 0; width: 40%; height: 1%; background: #007CC2; }
.map-data .graph .graph-data .region-2 { left: 7.14%; }
.map-data .graph .graph-data .region-3 { left: 14.28%; }
.map-data .graph .graph-data .region-4 { left: 21.42%; }
.map-data .graph .graph-data .region-5 { left: 28.56%; }
.map-data .graph .graph-data .region-6 { left: 35.7%; }
.map-data .graph .graph-data .region-7 { left: 42.84%; }
.map-data .graph .graph-data .region-8 { left: 49.98%; }
.map-data .graph .graph-data .region-9 { left: 57.12%; }
.map-data .graph .graph-data .region-10 { left: 64.26%; }
.map-data .graph .graph-data .region-11 { left: 71.4%; }
.map-data .graph .graph-data .region-12 { left: 78.54%; }
.map-data .graph .graph-data .region-13 { left: 85.68%; }
.map-data .graph .graph-data .region-14 { left: 92.82%; }

.map-data .graph .graph-data .region .popup-container:hover,
.map-data .graph .graph-data .hover .capita { background: #231F20; }
.map-data .graph .hover .capita .popup { display: block; opacity: 1; }
.map-data .graph .popup { z-index: 2000; width: 165px; }
.map-data .graph .popup .snippet { font-size: .75em; }
.map-data .graph .popup .snippet span { font-size: 1em; color: #231F20; font-weight: 300; }
.map-data .graph .popup .snippet .value { float: right; color: #F16534; font-weight: 600; }

.map-data .graph-wrapper .graph-axis { font-family: 'Open Sans', sans-serif; font-size: .625em; color: #939597; position: absolute; left: 0px; bottom: 15px; width: 100%; }
.map-data .graph-wrapper .graph-axis span { position: absolute; left: 2.5%; top: 0; }
.map-data .graph-wrapper .graph-axis .right-axis { left: auto; right: 2.5%; }
.map-data .graph-wrapper .graph-axis span .fa { margin-right: 4px; }
.map-data .graph-wrapper .graph-axis .right-axis .fa { margin-left: 4px; }

.map-data .graph-wrapper .graph-switcher { padding: 0; list-style: none; margin: 0; text-align: center; }
.map-data .graph-wrapper .graph-switcher li { display: inline-block; font-size: .75em; color: #939597; font-weight: bold; text-decoration: underline; line-height: 110%; cursor: pointer; }
.map-data .graph-wrapper .graph-switcher li.switch-1 { padding-right: 6px; border-right: 2px solid #939597; margin-right: 2px; }
.map-data .graph-wrapper .graph-switcher li.selected { text-decoration: none; color: #F16534; cursor: default; }

.map-data .more-info { color: #939597; text-align: center; font-size: .75em; }


/* !3.2 Charts */
.spend-charts { padding: 20px 0 0; border-top: 1px solid #d1d2d4; margin-top: 20px; }
.spend-charts .title { font-weight: 300; font-size: 2.125em; margin-bottom: 22px; }
.spend-charts .copy p { font-weight: 300; }

.charts { text-align: center; max-width: 840px; margin: 30px auto 0; }
.charts .chart { width: 100px; height: 100px; background: #B4E1E5; border-radius: 50%; position: relative; display: inline-block; margin: 0 16px 100px; vertical-align: top; }
.charts .chart .pie { -webkit-transform: rotate(-90deg);-ms-transform: rotate(-90deg);transform: rotate(-90deg); border-radius: 50%; }
.charts .chart .base { stroke: #F8981C; stroke-width: 32; opacity: 1; }
.charts .chart .value { stroke: #F16534; stroke-width: 32; opacity: 1; }
.charts .chart circle { -webkit-transition: stroke-dasharray 400ms cubic-bezier(0.175, 0.885, 0.32, 1.5), opacity: 5ms; transition: stroke-dasharray 400ms cubic-bezier(0.175, 0.885, 0.32, 1.5), opacity 10ms; -webkit-transition-delay: 500ms; transition-delay: 500ms; }
.charts .chart-1 circle { -webkit-transition: stroke-dasharray 500ms, opacity: 5ms; transition: stroke-dasharray 500ms, opacity 10ms; -webkit-transition-delay: 500ms;transition-delay: 500ms;  }
.charts .chart-2 circle { -webkit-transition: stroke-dasharray 500ms, opacity: 5ms; transition: stroke-dasharray 500ms, opacity 10ms; -webkit-transition-delay: 700ms;transition-delay: 700ms; }
.charts .chart-3 circle { -webkit-transition-delay: 900ms;transition-delay: 900ms; }
.charts .chart-4 circle { -webkit-transition-delay: 1100ms;transition-delay: 1100ms; }
.charts .chart-5 circle { -webkit-transition-delay: 1300ms;transition-delay: 1300ms; }
.charts .chart-6 circle { -webkit-transition-delay: 1500ms;transition-delay: 1500ms; }
.charts .chart-7 circle { -webkit-transition-delay: 1700ms;transition-delay: 1700ms; }
.charts .chart-8 circle { -webkit-transition-delay: 1900ms;transition-delay: 1900ms; }
.reset .chart circle { stroke-dasharray: 0 100; }
.reset .chart .base,
.reset .chart .value { opacity: 0; }
.charts .chart .value { position: absolute; z-index: 10; top: 40%; text-align: center; width: 100%; font-size: 1em; font-weight: 700; color: #231F20; margin: 0; }
.charts .chart .name { width: 100%; text-align: center; font-size: 1em; font-weight: 300; }
@media screen and (min-width: 440px) {
    .charts .chart { width: 150px; height: 150px; }
    .charts .chart .value,
    .charts .chart .name { font-size: 1.125em; }
}
@media screen and (min-width: 590px) {
    .charts .chart { width: 170px; height: 170px; margin: 0 50px 100px; }
    .charts .chart .value,
    .charts .chart .name { font-size: 1.5em; }
}


/* !3.3 Calendars Area */
.calendars { padding: 20px 0 0; border-top: 1px solid #D1D2D4; margin-top: 20px; }
.calendars .title { font-weight: 300; font-size: 2.125em; margin-bottom: 22px; }
.calendars .copy p { font-weight: 300; }

.calendars .year-tabs { margin: 0; padding: 0; list-style: none; margin-bottom: 22px; text-align: center; margin-top: 25px; }
.calendars .year-tabs li { display: inline-block; font-size: .6875em; margin: 0 1px; }
.calendars .year-tabs li a { display: block; padding: 4px 18px; background: #B4E1E5; color: #231F20; text-decoration: none; -webkit-transition: background 200ms, color 200ms;transition: background 200ms, color 200ms; }
.calendars .year-tabs li a:hover,
.calendars .year-tabs li .selected { background: #F16534; color: #fff; }

.calendars .dates { text-align: center; max-width: 340px; margin: 25px auto 0; counter-reset: date-rank; }
.calendars .dates .calendar { opacity: 0; margin: 0 5px 15px; position: relative; top: -15px; display: inline-block; width: 126px; min-height: 160px; padding: 0; background: url(/images/calendar-bg.svg) no-repeat 50% 0%; background-size: contain; vertical-align: top; -webkit-transition: opacity 500ms, top 300ms;transition: opacity 500ms, top 300ms; -webkit-transition-delay: 400ms;transition-delay: 400ms; }
.calendars .dates .calendar-2 { -webkit-transition-delay: 700ms;transition-delay: 700ms; }
.calendars .dates .calendar-3 { -webkit-transition-delay: 1000ms;transition-delay: 1000ms; }
.calendars .dates .calendar-4 { -webkit-transition-delay: 1300ms;transition-delay: 1300ms; }
.calendars .start .dates .calendar { opacity: 1; top: 0; }
.calendars .dates .calendar::before { margin-top: 4px; content: counter(date-rank); counter-increment: date-rank; display: block; text-align: center; font-size: .875em; font-weight: 700; color: #939597; }
.calendars .dates .calendar .date { margin-top: 7px; }
.calendars .dates .calendar .date .part-day { font-weight: 300; font-size: 1.3125em; margin: 0; line-height: 110%; }
.calendars .dates .calendar .date .part-date { font-weight: 300; font-size: 2.5em; margin: 0; line-height: 110%; }
.calendars .dates .calendar .date .part-month { font-weight: 300; font-size: 1.3125em; margin: 0; line-height: 110%; }
.calendars .dates .calendar-1 .date .part-date { color: #F16534; }
.calendars .dates .calendar-2 .date .part-date { color: #F8981C; }
.calendars .dates .calendar-3 .date .part-date { color: #64C9E9; }
.calendars .dates .calendar-4 .date .part-date { color: #007CC2; }

.calendars .dates .calendar .name { margin: 10px 0 0; color: #231F20; font-weight: 300; font-style: italic; font-size: .875em; }


/* !3.4 Summary */
.summary-section { margin-top: 40px; border-top: 1px solid #D1D2D4; padding-top: 40px; }
.summary-section .title { font-size: 2.125em; font-weight: 300; margin-bottom: 45px; }
.summary-section .copy { margin: 0 auto; max-width: 720px; }
.summary-section .copy .smaller { font-size: .625em; }


/* !4.0 Footer */
.footer { padding-top: 40px; border-top: 1px solid #D1D2D4; margin: 60px 0 45px; text-align: center; }
.footer .social { display: inline-block; list-style: none; padding: 0; margin: 0 15px 0 0; vertical-align: middle; }
.footer .social li { display: inline-block; }
.footer .social li .icon { display: block; width: 32px; height: 32px; text-align: center; line-height: 32px; color: #fff; background: #231F20; border-radius: 16px; }
.footer .social li.embed .icon { background: #F16534; }
.footer .social li.facebook .icon { background: #007CC2; }
.footer .social li.twitter .icon { background: #64C9E9; }
.footer .social li .icon:hover { background: #231F20; }
.footer .logo { display: inline-block; vertical-align: middle; }

.footer .footnotes { padding: 40px 20px 30px; }
.footer .footnotes p { font-size: .875em; }
.footer sup { font-size: 0.75em; color: #F16534; vertical-align: text-top; padding-right: 1px; }
.footer .footnotes p a { color: inherit; text-decoration: underline; }

.footer .legal { margin-top: 20px; font-size: .875em; color: #666; }
.footer .legal a { color: inherit; }