html {
box-sizing:border-box;
-webkit-font-smoothing:antialiased;
font-smoothing:antialiased}

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

body {
padding:0;
margin:0;
color:#383838;
background:#fff;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:16px;
overflow-x:hidden}

a {
color:#069;
text-decoration:none;
outline:none}

a[href^='http'] {
text-decoration:underline}

#content {
max-width:754px;
margin:1rem auto;
visibility:hidden}

.a.b #content {
visibility:visible}

h1 {
font-size:28px;
line-height:1.1;
letter-spacing:-.025em;
margin-bottom:0}

h1 + h2 {
margin:0}

#map-wrapper {
position:relative;
padding-top:2rem;
margin:0}

#map-wrapper .key {
margin-bottom:30px}

.key {
margin:0 0 60px;
padding:0}

.key li {
font-weight:bold;
color:#333;
margin:0 5px 0 0;
padding:0 0 0 14px;
display:inline-block;
font-size:11px;
line-height:12px;
position:relative;
list-style-type:none}

.key li:before {
content:'';
position:absolute;
top:1px;
left:0;
width:10px;
height:10px;
border-radius:50%;
background:#323232}

.key li:nth-child(2):before { 
background:#d8352a}

.key li:nth-child(3):before {
background:#d87b06}

#per-head .key li:before {
border:2px solid #323232;
background:#fff}

#per-head .key li:nth-child(2):before {
border-color:#d8352a}

#per-head .key li:nth-child(3):before {
border-color:#d87b06}

nav {
position:relative;
display:block;
color:#727272;
border-top:2px solid #EAEAEA;
border-bottom:2px solid #EAEAEA;
padding:15px 0;
margin-bottom:5px}

nav span {
display:inline-block;
margin-right:5px;
font-size:10px}

#map-title {
text-transform:capitalize}

#map-title span {
text-transform:none}

select,
option,
input {
font-size:11px}

select,
#reset {
outline:0;
border-radius:4px;
font-family:inherit;
color:#383838;
margin:0;
border:0;
padding:4px 30px 4px 8px;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
display:inline-block;
margin-right:3px}

select {
background:#EAEAEA url(../img/select.svg) no-repeat right 8px center/8px 5px}

#reset {
position:absolute;
right:0;
margin:1px 0 0;
padding:4px 8px;
background:#4a90e2;
color:#fff;
cursor:pointer}

#reset[disabled] {
opacity:.33;
color:#383838;
cursor:default;
background:#EAEAEA}

h3 {
font-size:24px;
letter-spacing:-.025em}

h3 span {
font-weight:normal}

#map-box {
position:relative;
z-index:1;
padding-top:67%;
border:1px solid #EFF3FF}

#msg {
display:none;
position:absolute;
left:50%;
top:50%;
z-index:1;
background:#fff;
border-radius:4px;
color:#333;
font-size:11px;
padding:5px 10px 7px;
text-align:center;
box-shadow:0 3px 14px rgba(0,0,0,0.4);
-webkit-transform:translate(-50%, -75%);
transform:translate(-50%, -75%)}

#msg a {
text-decoration:underline;
cursor:pointer}

#map {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#EFF3FF;
z-index:0}

#map-box + p {
color:#727272;
margin:10px 0 20px;
font-size:11px;
line-height:1.25}

.definitions {
font-size:13px;
margin-bottom:40px
padding-bottom:20px}

section {
position:relative;
z-index:1;
margin:1rem 0 100px}

section h3 {
position:relative;
line-height:1.1;
margin:0 220px 0 0}

section header {
position:relative}

.msg {
position:absolute;
right:0;
top:7px}

.msg:before {
font-size:11px;
font-weight:normal;
text-transform:none;
padding-left:12px;
line-height:12px;
background:url(../img/mouse.svg) no-repeat 0 0/contain;
content:'hover over the dots for more info.'}

.touch .msg:before {
padding-left:14px;
background-image:url(../img/hand.svg);
content:'click the dots for  more info.'}

.msg + p {
font-size:13px}

section h3 + h4 {
font-size:12px;
font-weight:normal;
margin:5px 0 15px;
color:#727272}

section .key + p {
margin-top:15px;
font-size:11px}

.line-wrapper {
margin:140px 65px 40px 40px}

.line {
position:relative;
border-top:1px solid #ccc}

.min,
.max {
position:absolute;
font-size:10px;
top:0;
right:100%;
line-height:1;
width:40px;
-webkit-transform:translateY(-50%);
transform:translateY(-50%)}

.min b,
.max b {
font-size:18px;
display:block;
margin-bottom:2px}

.max {
text-align:center;
width:65px;
right:auto;
left:100%}

/*
.line [data-val]{
position:absolute;
top:0;
width:12px;
height:12px;
background:#323232;
border-radius:50%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
cursor:pointer;
transition:.33s;
cursor:default}
*/

.line [data-val]{
position:absolute;
top:0;
width:12px;
height:12px;
background:#fff;
border:2px solid #323232;
border-radius:50%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
cursor:pointer;
transition:.33s;
cursor:default}

.line [data-val]:hover {
background:#323232}

.line h5 {
position:absolute;
top:100%;
left:50%;
font-weight:normal;
font-size:10px;
line-height:1;
text-align:center;
width:100px;
margin:0;
text-transform:uppercase;
-webkit-transform:translate(-50%, 8px);
transform:translate(-50%, 8px)}

.line [data-val="tiger shark"],
.line [data-val="vic"]{
-webkit-transform:translate(-50%, -20%);
transform:translate(-50%, -20%)}

.line [data-val="bull shark"],
.line [data-val="nt"]{
-webkit-transform:translate(-50%, -80%);
transform:translate(-50%, -80%)}

.line [data-val="bull shark"] h5,
.line [data-val="nt"] h5,
.line [data-val="nsw"] h5{
top:auto;
bottom:100%;
-webkit-transform:translate(-50%, -8px);
transform:translate(-50%, -8px)}

.line [data-val="tas"] h5 {
width:auto;
-webkit-transform:translate(2px, 4px);
transform:translate(2px, 4px)}

span.f,
span.in,
span.un {
vertical-align:baseline;
margin:0 7px -2px 0;
display:inline-block;
width:12px;
height:12px;
border-radius:50%;
background:#323232}

span.in {
background:#d8352a}

span.un {
background:#d87b06}

#per-head {
margin-bottom:60px}

.graph {
position:relative;
height:150px}

.dots {
position:absolute;
margin:0 15px;
top:0;
right:0;
left:0;
bottom:0;
-webkit-transform:translate(10px);
transform:translate(10px)}

.dots h5 {
position:absolute;
bottom:100%;
left:50%;
font-size:10px;
line-height:1;
text-align:center;
width:20px;
margin:0;
color:#d8352a;
-webkit-transform:translate(-50%, -8px);
transform:translate(-50%, -8px)}

.dots [data-year='2003'] h5 {
-webkit-transform:translate(-75%, -8px);
transform:translate(-75%, -8px)}

.dots [data-year='1999'] h5 {
-webkit-transform:translate(-60%, -10px);
transform:translate(-60%, -10px)}

.dots [data-year='2008'] h5 {
-webkit-transform:translate(-55%, -14px);
transform:translate(-55%, -14px)}

.dots [data-year='2006'] h5,
.dots [data-year='2014'] h5 {
-webkit-transform:translate(-80%, -8px);
transform:translate(-80%, -8px)}

.dots [data-year='2005'] h5,
.dots [data-year='2010'] h5,
.dots [data-year='2016'] h5{
-webkit-transform:translate(-20%, -8px);
transform:translate(-20%, -8px)}

polyline {
fill:none;
stroke-width:1;
stroke:#323232}

.dots [data-val="injured"]{
stroke:#d8352a}

.dots [data-val="uninjured"]{
stroke:#d87b06}

/*
.dots div {
position:absolute;
width:12px;
height:12px;
background:#323232;
border-radius:50%;
-webkit-transform:translate(-50%, 50%);
transform:translate(-50%, 50%);
transition:.33s}

.dots [data-val="injured"] {
background:#d8352a}

.dots [data-val="uninjured"]{
background:#d87b06}
*/

.dots div {
position:absolute;
width:12px;
height:12px;
border:2px solid #323232;
background:#fff;
border-radius:50%;
-webkit-transform:translate(-50%, 50%);
transform:translate(-50%, 50%);
transition:.33s}

.dots div:hover {
background:#323232}

.dots [data-val="injured"] {
border-color:#d8352a}

.dots [data-val="injured"]:hover {
background:#d8352a}

.dots [data-val="uninjured"]{
border-color:#d87b06}

.dots [data-val="uninjured"]:hover {
background:#d87b06}

/*
.years {
border-top:1px solid #ccc}
*/

.years ol {
padding:0;
margin:0 15px;
display:-webkit-flex;
-webkit-justify-content:center;
display:flex;
justify-content:center}

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

.years li {
margin:0;
padding:10px 0 0;
list-style-type:none;
width:4.76%;
font-size:10px;
display:inline-block}

.years li:nth-child(even) {
visibility:hidden}

/* MAP */

.leaflet-control-zoom a {
color:#4a90e2!important}

.leaflet-marker-icon {
-webkit-animation:fadein 2s;
animation:fadein 2s;
cursor:default}

@keyframes fadein {
    from {opacity:0}
    to   {opacity:1}
}

@-webkit-keyframes fadein {
    from {opacity:0}
    to   {opacity:1}
}

.leaflet-control-zoom {
border:1px solid #ccc!important}

.leaflet-control-attribution,
.leaflet-popup-close-button {
display:none}

.leaflet-popup-content-wrapper {
border-radius:4px}

.leaflet-popup-content {
margin:12px 10px 5px 12px;
color:#383838;
line-height:1.25}

.leaflet-popup-content h3 {
margin:0 0 2px;
font-weight:normal;
font-size:16px;
text-transform:capitalize;
font-family:'Libre Baskerville', serif}

.per .leaflet-popup-content h3 {
margin:0}

.leaflet-popup-content h3:after {
content:''!important}

.leaflet-popup-content h4 {
margin:0;
font-weight:normal;
font-size:11px;
color:#727272;
font-style:italic;
text-transform:none;
font-family:'Libre Baskerville', serif}

.leaflet-popup-content p {
margin:12px 0;
line-height:1.2}

.leaflet-popup-content h4 + p b {
display:inline-block;
width:52px}

.leaflet-popup-content h4 + p span {
text-transform:capitalize}

.count {
display:none;
font-size:11px;
margin:0}

.count span {
vertical-align:baseline;
margin:0 4px -2px 0;
display:inline-block;
width:12px;
height:12px;
border-radius:50%;
background:#323232}

.injured .count span {
background:#d8352a}

.uninjured .count span {
background:#d87b06}

.leaflet-marker-icon.temp {
display:none;
cursor:default}

path.leaflet-interactive {
stroke:#D2E4F8;
stroke-width:1;
opacity:1;
fill:#fff;
fill-opacity:1;
cursor:inherit}

footer {
display:block;
font-size:11px;
padding-top:7px;
border-top:2px solid #EAEAEA}

#info {
display:none;
position:absolute;
border-radius:4px;
-webkit-transform:translate(-50%,-100%);
transform:translate(-50%,-100%);
font-size:11px;
width:230px;
background:#fff;
z-index:100;
box-shadow:0 3px 14px rgba(0,0,0,0.4)}

#info .lrg {
display:-webkit-flex;
-webkit-align-items:center;
display:flex;
align-items:center;
justify-content:flex-start;
margin:15px 0;
font-size:13px;
line-height:1.1}

#info .lrg span {
display:block;
text-transform:none;
width:60%}

#info .lrg b {
display:block;
font-size:36px;
margin-right:10px;
letter-spacing:-.025em;
width:auto}

#info.injured .lrg b {
color:#d8352a}

#info.uninjured .lrg b {
color:#d87b06}

#info .leaflet-popup-tip-container {
top:100%}

#info.is-left {
-webkit-transform:translate(-20px,-100%);
transform:translate(-20px,-100%)}

#info.is-right {
-webkit-transform:translate(-100%,-100%);
transform:translate(-100%,-100%);
margin-left:20px}

#info.is-left .leaflet-popup-tip-container,
#info.is-right .leaflet-popup-tip-container {
left:auto;
right:20px;
height:10px;
background:url(../img/tip-alt.svg) no-repeat 100% 100%/contain}

#info.is-left .leaflet-popup-tip-container {
left:40px;
right:auto;
-webkit-transform:scaleX(-1);
transform:scaleX(-1);
filter:FlipH;
-ms-filter:"FlipH"}

#info.is-left .leaflet-popup-tip-container .leaflet-popup-tip,
#info.is-right .leaflet-popup-tip-container .leaflet-popup-tip {
display:none}

#months h4 {
display:none;
font-size:10px;
margin:20px 0 5px;
text-transform:uppercase}

#months {
margin-top:100px}

.month {
position:relative;
height:48px;
padding-left:80px;
margin-bottom:5px;
background:#F6F6F6}

.month h5 {
position:absolute;
bottom:6px;
left:6px;
margin:0;
font-weight:normal;
font-size:10px;
text-transform:uppercase;
line-height:1}

.month ol {
margin:0;
padding:0;
height:100%;
display:-webkit-flex;
display:flex;
vertical-align:top}

.month li {
display:-webkit-flex;
-webkit-justify-content:flex-start;
-webkit-align-items:flex-end;
-webkit-flex-direction:column-reverse;
display:flex;
justify-content:flex-start;
align-items:flex-end;
flex-direction:column-reverse;
list-style-type:none;
margin:0;
padding:0;
height:100%;
width:3.22%}

.month div {
width:12px;
height:12px;
border-radius:50%;
background:#232323;
transition:.33s}

.month div.injured {
background:#d8352a}

.month div.uninjured {
background:#d87b06}

/* MOBILE */

.mobile {
display:none}

.row {
position:relative;
margin:0 30px 4px 65px;
height:11px}

#ratios-line-mobile .avg div,
#ratios-line-mobile .avg h5 {
margin-top:4px;
opacity:.5}

.row h5 {
top:50%;
position:absolute;
right:100%;
width:65px;
text-align:left;
margin:0;
font-weight:normal;
font-size:10px;
-webkit-transform:translateY(-50%);
transform:translateY(-50%)}

.row span {
position:absolute;
left:100%;
top:50%;
font-weight:bold;
font-size:10px;
margin-top:0;
-webkit-transform:translate(5px,-50%);
transform:translate(5px,-50%)}

.zero span {
-webkit-transform:translate(0,-50%);
transform:translate(0,-50%)}

.row > div {
position:absolute;
top:50%;
left:0;
height:1px;
margin-top:1px;
background:#323232}

.row > div div {
position:absolute;
width:8px;
height:8px;
right:0;
top:50%;
-webkit-transform:translate(0,-50%);
transform:translate(0,-50%);
border-radius:50%;
background:#323232}

.zero:after {
display:none}


@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none) {
	select {
	padding-right:8px;
	background:#EAEAEA}
}

@media all and (max-width:660px) { 

	select[data-key="incident type"]{
	display:none}
	
	.years li:nth-child(3),
	.years li:nth-child(7),
	.years li:nth-child(11),
	.years li:nth-child(15),
	.years li:nth-child(19){
	visibility:hidden}

}

@media all and (max-width:530px) { 

	.msg {
	position:relative;
	top:-10px}
	
	section h3 {
	margin-right:0}

	select[data-key="injury"]{
	display:none}
		
	.key {
	position:relative}
	
	.dots div {
	width:8px;
	height:8px}
	
	polyline {
	stroke-width:1}
	
	.dots div:nth-child(odd) h5,
	section h3:after {
	display:none}
	
	.dots,
	.years ol {
	margin:0 10px}

}

@media all and (max-width:430px) { 

	nav span {
	display:block;
	margin-bottom:5px}

	.line-wrapper {
	margin-left:0;
	margin-right:0}
	
	.line-wrapper,
	.dots h5,
	.min,
	.max {
	display:none}
	
	.dots div[data-year="2015"][data-val="injured"] h5 {
	display:block}
	
	.mobile {
	display:block}
	
	section {
	margin-bottom:40px}
	
	.leaflet-marker-icon {
	margin-left:-4px!important;
    margin-top:-4px!important;
    width:8px!important;
    height:8px!important}
    	
	#map-box {
	padding:0;
	height:320px}
	
	.month {
	height:auto;
	padding-left:0;
	margin-bottom:10px;
	border-bottom:1px solid #ccc}
	
	.month li {
	align-items:center}
	
	.month ol {
	height:40px}
	
	.month h5 {
	background:#fff;
	padding:5px 0 5px 0;
	bottom:auto;
    left:auto;
	position:relative}
	    
    .month div {
    width:8px;
    height:8px}
	
}

@media all and (max-width:390px) {

	select[data-key="season"]{
	display:none}

}

@media all and (max-width:310px) {

	select[data-key="season"]{
	display:none}

}