.tab-pane .fa{
margin-right:10px;
}

#CanadaMap {
    width: 980px;
    height: 630px;
    overflow: hidden;
    margin: auto;
}

.MapGreen {
    background-image: url(/images/canadamap/province/green.png);
    background-repeat: no-repeat;
}

.MapYellow {
    background-image: url(/images/canadamap/province/yellow.png);
    background-repeat: no-repeat;
}

.MapRed {
    background-image: url(/images/canadamap/province/red.png);
    background-repeat: no-repeat;
}

#MapHover {
    width: 980px;
    height: 630px;
    overflow: hidden;
    background-position: left bottom;
    background-image: url(/images/canadamap/province/canadaHover.png);
}

    #MapBC, #MapHover.hoverBC {
        background-position: left 0px;
    }

    #MapAB, #MapHover.hoverAB {
        background-position: left -630px;
    }

    #MapSK, #MapHover.hoverSK {
        background-position: left -1260px;
    }

    #MapMB, #MapHover.hoverMB {
        background-position: left -1890px;
    }

    #MapON, #MapHover.hoverON {
        background-position: left -2520px;
    }

    #MapQC, #MapHover.hoverQC {
        background-position: left -3150px;
    }

    #MapNL, #MapHover.hoverNL {
        background-position: left -3780px;
    }

    #MapNB, #MapHover.hoverNB {
        background-position: left -4410px;
    }

    #MapNS, #MapHover.hoverNS {
        background-position: left -5040px;
    }

    #MapNT, #MapHover.hoverNT {
        background-position: left -6300px;
    }

    #MapYK, #MapHover.hoverYK {
        background-position: left -5670px;
    }

    #MapNU, #MapHover.hoverNU {
        background-position: left -6930px;
    }

    #MapIP, #MapHover.hoverIP {
        background-position: left -7560px;
    }

/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
    #CanadaMap {
        transform: scale(0.7);
        margin-left: -45%;
        margin-top: -50px;
        margin-bottom: -100px;
        width: 350%;
    }
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    #CanadaMap {
        transform: scale(0.4);
        margin-left: -106%;
        margin-top: -150px;
        margin-bottom: -150px;
        width: 350%;
    }
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {

    #CanadaMap {
        transform: scale(0.28);
        margin-left: -120%;
        margin-top: -150px;
        margin-bottom: -150px;
        width: 350%;
    }
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
    #CanadaMap {
        transform: scale(0.28);
        margin-left: -120%;
        margin-top: -200px;
        margin-bottom: -200px;
        width: 350%;
    }
}