/*
  Running Squiz Matrix
  Developed by Squiz - http://www.squiz.net
  Squiz, Squiz Matrix, MySource, MySource Matrix and Squiz.net are registered Trademarks of Squiz Pty Ltd
  Page generated: 14 December 2019 17:48:31
*/


/* house icon animations */
/* bike icon animations */
/* business icon animations */
/* car icon animations */
/* education icon animations */
/* enviro icon animation  */
/* emergencies icon animation  */
/* medical icon animations  */
/* briefcase icon animations  */
/* elderly icon animations  */
/* law-and-rights icon animation  */
/* boat icon animation  */


/* house icon animations */
#house {
  margin-top: 0px;
  margin-left: -50px;
  width: 80px;
  height: 80px;
}

.desktop .topics > div:hover #house .st0,
.desktop .topics > div:hover #house .st1,
.desktop .topics > div:hover #house .st3{
  stroke:#004b88;
}
.desktop .topics > div:hover #house .st2{
  fill:#fff;
  stroke:#004b88;
}
.topics > div #house #XMLID_216_{
  stroke-width:2!important;
}
.topics > div #house #sun{
  opacity: 0;
}

@-webkit-keyframes house {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes house {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@-webkit-keyframes house2 {
  0% {opacity: 0;}
  10% {opacity: 1;}
}

@keyframes house2 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

/* bike icon animations */
.topics > div #bike{
  margin-top: -8px;
  margin-left: -16px;
  width: 95px;
  height: 76px;
}
.desktop .topics > div:hover #bike .st0,.topics > div:hover #bike .st1,.topics > div:hover #bike .st2{stroke:#004b88}

#bike #XMLID_782_ > line,
#bike #XMLID_796_ > line{
  opacity: 0;
}
.desktop .topics > div:hover #bike #XMLID_782_ > line{
  -webkit-animation-name: bike2;
  -webkit-animation-duration: .7s;
  animation-name: bike2;
  animation-duration: .7s;
  animation-delay: .7s;
  -webkit-animation-delay: .7s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.desktop .topics > div:hover #bike #XMLID_796_ > line{
  -webkit-animation-name: bike;
  -webkit-animation-duration: .7s;
  animation-name: bike;
  animation-duration: .7s;

}
@-webkit-keyframes bike {
  0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes bike {
  0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 0;}
}

@-webkit-keyframes bike2 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes bike2 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
/* boat icon animation  */
.topics > div #boat{
  margin-top: 0 px;
  margin-left: -40px;
}
.topics > div #boat #wave2{
  /*opacity: 0;*/
}

.desktop .topics > div:hover #boat .st0,
.desktop .topics > div:hover #boat .st1{
  stroke:#004b88;
}
.desktop .topics > div:hover #boat .st2{
  stroke:#004B88;
}


/* business icon animations */
.topics > div #business{
  margin-top: 0;
  width: 65px;
  height: 54px;
  margin-left: -54px;
}
.desktop .topics > div:hover #business{
  -webkit-animation-name: business;
  -webkit-animation-duration: 1s;
  animation-name: business;
  animation-duration: 1s;
  animation-delay: .5s;
  -webkit-animation-delay: .5s;
  -webkit-animation-iteration-count: 2;
  animation-iteration-count: 2;
}
@-webkit-keyframes business {
  0% {margin-top: 0px;}
  25% {margin-top: -10px;}
  50% {margin-top: -15px;}
  75% {margin-top: -10px;}
  100% {margin-top: 0px;}
}

@keyframes business {
  0% {margin-top: 0px;}
  25% {margin-top: -10px;}
  50% {margin-top: -15px;}
  75% {margin-top: -10px;}
  100% {margin-top: 0px;}
}

/* car icon animations */
.desktop .topics > div:hover #car{
  /*margin-top: -5px;*/
}
.topics > div #car{
    width:80px;
    margin-left: -38px;
    margin-top: 8px;
}
.desktop .topics > div:hover #car .st0,
.desktop .topics > div:hover #car .st1{
  stroke:#004b88;
}
.topics > div #car #XMLID_447_,
.topics > div #car #XMLID_444_,
.topics > div #car #XMLID_401_{
  opacity: 0;
}
.desktop .topics > div:hover #car #XMLID_447_,
.desktop .topics > div:hover #car #XMLID_401_{
  -webkit-animation-name: car;
  -webkit-animation-duration: .7s;
  animation-name: car;
  animation-duration: .7s;
  animation-delay: .3s;
  -webkit-animation-delay: .3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.desktop .topics > div:hover #car #XMLID_444_{
  -webkit-animation-name: car;
  -webkit-animation-duration: .7s;
  animation-name: car;
  animation-duration: .7s;
  animation-delay: .7s;
  -webkit-animation-delay: .7s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes car {
  0% {opacity: 0;}
  100% {opacity: 1;}

}
@keyframes car {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

/* education icon animations */
.topics > div #education{
  margin-top: 0;
  margin-left:-44px;
}
.topics > div #education #XMLID_663_,
.topics > div #education #XMLID_662_{
  opacity: 0;
}
.desktop .topics > div:hover #education .st0,
.desktop .topics > div:hover #education .st1{
  stroke:#004b88;
}

@-webkit-keyframes education {
  0% {opacity: 0;}
  25% {opacity: 1;}
  50% {opacity: 0;}
  75% {opacity: 1;}
  100% {opacity: 0;}
}
@keyframes education {
  0% {opacity: 0;}
  25% {opacity: 1;}
  50% {opacity: 0;}
  75% {opacity: 1;}
  100% {opacity: 0;}
}
@-webkit-keyframes education2 {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes education2 {
  0% {opacity: 1;}
  100% {opacity: 0;}
}
@-webkit-keyframes education3 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes education3 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}


/* enviro icon animation  */
.topics > div #environment{
  margin-top: -10px;
}
.topics > div #environment #XMLID_911_,
.topics > div #environment #XMLID_910_{
  opacity: 0;
}
.desktop .topics > div:hover #environment .st0{
  stroke:#004b88;
}

/*.desktop .topics > div:hover #environment #XMLID_909_{
    -webkit-animation-name: education2;
    -webkit-animation-duration: .5s;
    animation-name: education2;
    animation-duration: .5s;
    animation-delay: .2s;
    -webkit-animation-delay: .2s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.desktop .topics > div:hover #environment #XMLID_911_{
    -webkit-animation-name: education3;
    -webkit-animation-duration: .5s;
    animation-name: education3;
    animation-duration: .5s;
    animation-delay: .5s;
    -webkit-animation-delay: .5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.desktop .topics > div:hover #environment #XMLID_910_{
    -webkit-animation-name: education2;
    -webkit-animation-duration: .5s;
    animation-name: education2;
    animation-duration: .5s;
    animation-delay: .4s;
    -webkit-animation-delay: .4s;
}*/

  /* emergencies icon animation  */
/*.topics > div #emergencies{*/
/*  width: 76px;*/
/*  height: 86px;*/
/*  margin-top: -10px;*/
/*}*/

.desktop .topics > div:hover #emergencies path {
  fill: #004b88;
}

.topics > div:hover #siren #siren-s3-1,
.topics > div:hover #siren #siren-s3-2,
.topics > div:hover #siren #siren-s4-1,
.topics > div:hover #siren #siren-s2-1,
.topics > div:hover #siren #siren-s2-2 {
  opacity: 0;
}
.desktop .topics > div:hover #siren #siren-s2-1,
.desktop .topics > div:hover #siren #siren-s2-2{
  -webkit-animation-name: siren;
  -webkit-animation-duration: .7s;
  animation-name: siren;
  animation-duration: .7s;
  animation-delay: .3s;
  -webkit-animation-delay: .3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.desktop .topics > div:hover #siren #siren-s3-1,
.desktop .topics > div:hover #siren #siren-s3-2{
  -webkit-animation-name: siren;
  -webkit-animation-duration: .7s;
  animation-name: siren;
  animation-duration: .7s;
  animation-delay: .5s;
  -webkit-animation-delay: .5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.desktop .topics > div:hover #siren #siren-s4-1{
  -webkit-animation-name: siren;
  -webkit-animation-duration: .7s;
  animation-name: siren;
  animation-duration: .7s;
  animation-delay: .7s;
  -webkit-animation-delay: .7s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}


@-webkit-keyframes siren {
  0% {opacity: 0;}
  100% {opacity: 1;}

}
@keyframes siren {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

/*.topics > div #emergencies #XMLID_50_{opacity: 0}
.desktop .topics > div:hover #emergencies .st0{stroke:#ffffff;}*/

/* medical icon animations  */
/*.desktop .topics > div:hover #medical {
    width: 74px;
    height: 74px;
}
.desktop .topics > div:hover #medical .st0{stroke: #ffffff;}
.topics > div #medical #XMLID_507_,
.topics > div #medical #XMLID_766_{
    opacity: 0;
}
.desktop .topics > div:hover #medical #XMLID_573_{
    -webkit-animation-name: education2;
    -webkit-animation-duration: .7s;
    animation-name: education2;
    animation-duration: .7s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.desktop .topics > div:hover #medical #XMLID_507_{
    -webkit-animation-name: education2;
    -webkit-animation-duration: .5s;
    animation-name: education2;
    animation-duration: .5s;
    animation-delay: .5s;
    -webkit-animation-delay: .5s;
}
.desktop .topics > div:hover #medical #XMLID_766_{
    -webkit-animation-name: education3;
    -webkit-animation-duration: .5s;
    animation-name: education3;
    animation-duration: .5s;
    animation-delay: .8s;
    -webkit-animation-delay: .8s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}*/

/* briefcase icon animations  */
.desktop .topics > div:hover #briefcase{
  width: 77px;
  height: 76px;
}
.desktop .topics > div:hover #briefcase .st0,.topics > div:hover #briefcase .st1,.topics > div:hover #briefcase .st2{stroke: #004b88;}
.topics > div #briefcase #XMLID_3_,.topics > div #briefcase #XMLID_421_{opacity: 0}
.desktop .topics > div:hover #briefcase #XMLID_113_{
  -webkit-animation-name: education2;
  -webkit-animation-duration: .2s;
  animation-name: education2;
  animation-duration: .2s;
  animation-delay: .2s;
  -webkit-animation-delay: .2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.desktop .topics > div:hover #briefcase #XMLID_3_{
  -webkit-animation-name: education2;
  -webkit-animation-duration: .4s;
  animation-name: education2;
  animation-duration: .4s;
  animation-delay: .4s;
  -webkit-animation-delay: .4s;
}
.desktop .topics > div:hover #briefcase #XMLID_421_{
  -webkit-animation-name: education3;
  -webkit-animation-duration: .4s;
  animation-name: education3;
  animation-duration: .4s;
  animation-delay: .5s;
  -webkit-animation-delay: .5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

/* elderly icon animations  */
.topics > div #elderly{
  margin-left: -54px;
  margin-top: 0;
}
.desktop .topics > div:hover #elderly .st0,.topics > div:hover #elderly .st1{stroke: #004b88;}


/* law-and-rights icon animation  */
.topics > div #law-and-rights{
  width: 78px;
  height: 80px;
  margin-top: 0;
  margin-left: -50px;
}
.desktop .topics > div:hover #law-and-rights .st0,
.desktop .topics > div:hover #law-and-rights .st1{stroke: #004b88;}
.topics > div #law-and-rights #lastBang{opacity: 0}


/* community icon animation */
.topics > div #community{
  margin-top: 0;
  margin-left:-20px;
}
.desktop .topics > div:hover #community .st0{stroke: #004b88;}

.topics > div #emergencies{
    margin-left: -30px;
    margin-top: 15px;
}

.topics > div #housing{
  margin-top: 0;
  margin-left: -56px;
}
.topics > div #water_and_enviro{
  margin-left: -44px;
top: -13px;
position: relative;
}
.desktop .topics > div:hover #water_and_enviro .st0{
  stroke:#004b88;
}
.topics > div #work {
    margin-top: 0;
    margin-left: -56px;
    width: 78px;
    height: 80px;
}
.desktop .topics > div:hover #work .st2{
  stroke:#004b88;
}
.desktop .topics > div:hover #work #dot2child{
  fill:#004b88;
}

.topics > div #property{
  margin-top: 0;
  margin-left: -55px;
}

.desktop .topics > div:hover #property .st0{
  fill:#004b88!important;
}
.topics > div #housing #firstOn,
.topics > div #housing #secOn{
  opacity: 0;
}
.desktop .topics > div:hover #housing > g  > g  > path{
  fill: #004b88;
}
.desktop .topics > div:hover #housing .st0,
.desktop .topics > div:hover #housing .st1{
  stroke: #004b88;
}
.topics > div #community #XMLID_545_,.topics > div #community #XMLID_473_{opacity: 0;}

@media all and (min-width: 768px) {
    .topics > div #house {
    margin-left: 0;
    margin-top: 0;
    float: left;
    position: relative;
    top: -10px;
    left: 0px;
}
.topics > div #boat {
    margin-left: 0;
    margin-top: 0;
    float: left;
    position: relative;
    top: -12px;
    left: 0px;
}
.topics > div #emergencies {
    margin-left: 0;
    margin-top: 0;
    float: left;
    position: relative;
    top: 4px;
    left: 0px;
}

.topics > div #business {
    margin-left: 0;
    margin-top: 0;
    float: left;
    position: relative;
    top: 5px;
    left: 0px;
}
.topics > div #elderly {
    margin-left: 0;
    margin-top: 0;
    float: left;
    position: relative;
    top: -13px;
    left: -7px;
}
.topics > div #car {
    margin-left: 0;
    margin-top: 0;
    float: left;
    position: relative;
    top: 4px;
    left: 0px;
}
.topics > div #education {
    margin-left: 0;
    margin-top: 0;
    float: left;
    position: relative;
    top: -7px;
    left: 0px;
}
.topics > div #water_and_enviro {
    margin-left: 0;
    margin-top: 0;
    float: left;
    position: relative;
    top: -24px;
    left: -19px;
}
.topics > div #community {
    margin-left: 0;
    margin-top: 0;
    float: left;
    position: relative;
    top: -7px;
    left: 0px;
}
.topics > div #housing {
    margin-left: 0;
    margin-top: 0;
    float: left;
    position: relative;
    top: -10px;
    left: -13px;
}
.topics > div #property {
    margin-left: 0;
    margin-top: 0;
    float: left;
    position: relative;
    top: -10px;
    left: -18px;
}
.topics > div #law-and-rights {
    margin-left: 0;
    margin-top: 0;
    float: left;
    position: relative;
    top: -10px;
    left: -8px;
}
.topics > div #work {
    margin-left: 0;
    margin-top: 0;
    float: left;
    position: relative;
    top: -10px;
    left: -9px;
}
}