/*
  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: 26 February 2018 08:57:10
*/


/* 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: -21px;
    margin-left: -5px;
    width: 80px;
    height: 80px;
}

.desktop .topics > div:hover #house .st0,
.desktop .topics > div:hover #house .st1,
.desktop .topics > div:hover #house .st3{
    stroke:#fff;
}
.desktop .topics > div:hover #house .st2{
    fill:#E41B44;
    stroke:#ffffff;
}
.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:#ffffff}

#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: -22px;
    margin-left: 0px;
}
.topics > div #boat #wave2{
    /*opacity: 0;*/
}

.desktop .topics > div:hover #boat .st0,
.desktop .topics > div:hover #boat .st1{
    stroke:#ffffff;
}
.desktop .topics > div:hover #boat .st2{
    stroke:#E41B44;
}


/* business icon animations */
.topics > div #business{
    margin-top: -3px;
    width: 65px;
    height: 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;
}
.desktop .topics > div:hover #car .st0,
.desktop .topics > div:hover #car .st1{
    stroke:#ffffff;
}
.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: -10px;
}
.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:#ffffff;
}

@-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:#ffffff;
}

.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: white;
}

.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: #ffffff;}
.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: -6px;
    margin-top: -19px;
}
.desktop .topics > div:hover #elderly .st0,.topics > div:hover #elderly .st1{stroke: #ffffff;}


/* law-and-rights icon animation  */
.topics > div #law-and-rights{
    width: 71px;
    height: 74px;
    margin-top: -8px;
    margin-left: -8px;
}
.desktop .topics > div:hover #law-and-rights .st0,
.desktop .topics > div:hover #law-and-rights .st1{stroke: #ffffff;}
.topics > div #law-and-rights #lastBang{opacity: 0}


/* community icon animation */
.topics > div #community{
    margin-top: -11px;
    width: 74px;
    height: 75px;
}
.desktop .topics > div:hover #community .st0{stroke: #ffffff;}


.topics > div #housing{
    margin-top: -16px;
    margin-left: -11px;
}
.topics > div #water_and_enviro{
        margin-top: -27px!important;
    margin-left: -27px!important;
}
.desktop .topics > div:hover #water_and_enviro .st0{
    stroke:#fff;
}
.topics > div #work{
    margin-top: -7px;
    margin-left: -9px;
}
.desktop .topics > div:hover #work .st2{
    stroke:#fff;
}
.desktop .topics > div:hover #work #dot2child{
    fill:#fff;
}

.topics > div #property{
    margin-top: -18px;
    margin-left: -17px;
}

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