header,
#hp-ss {
    /* display: none; */
}

.hp-map {
    position: relative;
    z-index: 1;
}

.map-wrap {}

.map-content {
    position: absolute;
    top: 105px;
    left: 99px;
    z-index: 8;
}

.map-title {}

.map-list {
    margin-top: 98px;
    margin-left: 9px;
}

.map-list li {
    display: block;
}

.map-list li a {
    font-family: var(--font-family-small-title);
    display: block;
    position: relative;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 0.05em;
    color: #030303;
    width: max-content;
    margin-bottom: 2.6em;
    text-transform: uppercase;
    padding-left: 1.9em;
    text-decoration: none;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
}

.map-list li a:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: .9em;
    aspect-ratio: 18/23;
    -webkit-mask-image: url(../images/map/pin.png);
    mask-image: url(../images/map/pin.png);
    background: #a0a0a0;
    -webkit-mask-size: 100%;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
}

.map-list li a:hover,
.map-list li a.hover {
    color: #000;
    font-weight: 700;
}

.map-list li a:hover::before,
.map-list li a.hover::before {
    background: #042338;
}

.map-list li:last-child a {
    margin-bottom: 0;
}

.map-outer {}

.map-inner {}

.map-transparent {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    opacity: 0;
}

.map-hover {
    pointer-events: none;
    z-index: 5;
}

.map-hover div {
    position: absolute;
}

.map-hover div>img {
    opacity: 0;
    z-index: 6;
    position: relative;
    transition: all 0.35s ease-in-out;
}

.map-hover div.hover>img {
    opacity: 1;
    transform: none;
}

.map-areas.map-hover div span {
    position: absolute;
    pointer-events: none;
    color: #eee89f;
    display: block;
    font-style: normal;
    font-family: var(--font-family-title);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 5;
    text-shadow: 2px 1px 0 rgba(0, 0, 0, 0.4);
    transition: all 0.35s ease-in-out;
}

.map-areas.map-hover div.hover span {
    text-shadow: -0.25px 0.25px 0 #eee89f, -0.25px -0.25px 0 #eee89f, 0.25px 0.25px 0 #eee89f, 0.25px -0.25px 0 #eee89f;
    color: #07263a;
    z-index: 6;
}

.map-areas.map-hover div span:before {
    content: "";
    position: absolute;
    left: -24px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    aspect-ratio: 18/23;
    -webkit-mask-image: url(../images/map/pin.png);
    mask-image: url(../images/map/pin.png);
    background: currentColor;
    -webkit-mask-size: 100%;
    transition: all 0.35s ease-in-out;
}

.map-areas.map-hover div.hover span:before {
    background: #000;
}

.map-hover #map-bala {
    top: 613px;
    left: 563px;
}

.map-hover #map-bala span {
    top: 106px;
    left: 99px;
}

.map-hover #map-bracebridge {
    top: 492px;
    left: 860px;
}

.map-hover #map-bracebridge span {
    top: 196px;
    left: 233px;
}

.map-hover #map-gravenhurst {
    top: 757px;
    left: 787px;
}

.map-hover #map-gravenhurst span {
    top: 154px;
    left: 243px;
}

.map-hover #map-huntsville {
    top: 93px;
    left: 820px;
}

.map-hover #map-huntsville span {
    top: 283px;
    left: 289px;
}

.map-hover #map-lake-of-bays {
    top: 13px;
    left: 1104px;
}

.map-hover #map-lake-of-bays span {
    top: 177px;
    left: 162px;
}

.map-hover #map-minett {
    top: 550px;
    left: 685px;
}

.map-hover #map-minett span {
    top: 39px;
    left: -26px;
}

.map-hover #map-minett span::before {
    top: -25px;
    left: 42px;
    transform: none;
}

.map-hover #map-port-carling {
    top: 245px;
    left: 606px;
}

.map-hover #map-port-carling span {
    top: 390px;
    left: 111px;
}

.map-hover #map-port-sydney {
    top: 455px;
    left: 1018px;
}

.map-hover #map-port-sydney span {
    top: 24px;
    left: 29px;
}

.map-hover #map-rosseau {
    top: 391px;
    left: 710px;
}

.map-hover #map-rosseau span {
    top: 21px;
    left: 50px;
}

.map-hover #map-torrance {
    top: 748px;
    left: 775px;
}

.map-hover #map-torrance span {
    top: -4px;
    left: -29px;
}

.map-hover #map-torrance span::before {
    top: 28px;
    left: 42px;
    transform: none;
}

.map-sign {
    position: absolute;
    top: 158px;
    left: 580px;
}

.map-lake {
    position: absolute;
    top: 27px;
    left: 414px;
}

.map-lakes.map-hover div span {
    position: absolute;
    font-family: var(--font-family-small-title);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #bebebe;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    transition: all 0.35s ease-in-out;
    z-index: 6;
    opacity: 0;
}

.map-lakes.map-hover div.hover span {
    opacity: 1;
}

.map-hover #map-lake1 {
    top: 482px;
    left: 565px;
}

.map-hover #map-lake1 span {
    top: 10px;
    left: -60px;
    color: #000;
}

.map-hover #map-lake2 {
    top: 272px;
    left: 442px;
}

.map-hover #map-lake2 span {
    top: 57px;
    left: 10px;
    color: #000;
}

.map-hover #map-lake3 {
    top: 398px;
    left: 459px;
}

.map-hover #map-lake3 span {
    top: 21px;
    left: -44px;
    color: #000;
}

.map-hover #map-lake4 {
    top: 324px;
    left: 647px;
}

.map-hover #map-lake4 span {
    top: 31px;
    left: -11px;
    color: #000;
}

.map-hover #map-lake5 {
    top: 403px;
    left: 816px;
}

.map-hover #map-lake5 span {
    top: 72px;
    left: 1px;
}

.map-hover #map-lake6 {
    top: 389px;
    left: 597px;
}

.map-hover #map-lake6 span {
    top: 28px;
    left: -31px;
    color: #000;
}

.map-hover #map-lake7 {
    top: 495px;
    left: 804px;
}

.map-hover #map-lake7 span {
    top: 47px;
    left: 13px;
}

.map-hover #map-lake8 {
    top: 491px;
    left: 414px;
}

.map-hover #map-lake8 span {
    top: 31px;
    left: 0;
    color: #000;
}

.map-hover #map-lake9 {
    top: 482px;
    left: 709px;
}

.map-hover #map-lake9 span {
    top: 10px;
    left: -52px;
    color: #000;
}

.map-hover #map-lake10 {
    top: 380px;
    left: 691px;
}

.map-hover #map-lake10 span {
    top: -15px;
    left: -8px;
    color: #000;
}

.map-hover #map-lake11 {
    top: 606px;
    left: 901px;
}

.map-hover #map-lake11 span {
    top: 69px;
    left: -5px;
}

.map-hover #map-lake12 {
    top: 245px;
    left: 1303px;
}

.map-hover #map-lake12 span {
    top: 15px;
    left: -36px;
}

.map-hover #map-lake13 {
    top: 705px;
    left: 1259px;
}

.map-hover #map-lake13 span {
    top: -10px;
    left: -22px;
}

.map-hover #map-lake14 {
    top: 595px;
    left: 1107px;
}

.map-hover #map-lake14 span {
    top: 12px;
    left: -22px;
}

.map-hover #map-lake15 {
    top: 658px;
    left: 1291px;
}

.map-hover #map-lake15 span {
    top: 15px;
    left: -12px;
}

.map-hover #map-lake16 {
    top: 738px;
    left: 1199px;
}

.map-hover #map-lake16 span {
    top: 15px;
    left: -11px;
}

.map-hover #map-lake17 {
    top: 733px;
    left: 1243px;
}

.map-hover #map-lake17 span {
    top: 42px;
    left: -3px;
}

.map-hover #map-lake18 {
    top: 705px;
    left: 1230px;
}

.map-hover #map-lake18 span {
    top: 20px;
    left: -27px;
}

.map-hover #map-lake19 {
    top: 750px;
    left: 1059px;
}

.map-hover #map-lake19 span {
    top: 9px;
    left: -59px;
}

.map-hover #map-lake20 {
    top: 569px;
    left: 1232px;
}

.map-hover #map-lake20 span {
    top: 11px;
    left: -28px;
}

.map-hover #map-lake21 {
    top: 285px;
    left: 1435px;
}

.map-hover #map-lake21 span {
    top: 113px;
    left: 62px;
    color: #000;
}

.map-hover #map-lake22 {
    top: 555px;
    left: 1298px;
}

.map-hover #map-lake22 span {
    top: 19px;
    left: -1px;
}

.map-hover #map-lake23 {
    top: 488px;
    left: 1187px;
}

.map-hover #map-lake23 span {
    top: -10px;
    left: -30px;
}

.map-hover #map-lake24 {
    top: 432px;
    left: 1358px;
}

.map-hover #map-lake24 span {
    top: 12px;
    left: -32px;
}

.map-hover #map-lake25 {
    top: 200px;
    left: 1360px;
}

.map-hover #map-lake25 span {
    top: 25px;
    left: -22px;
}

.map-hover #map-lake26 {
    top: 550px;
    left: 1196px;
}

.map-hover #map-lake26 span {
    top: 16px;
    left: -22px;
}

.map-hover #map-lake27 {
    top: 538px;
    left: 1245px;
}

.map-hover #map-lake27 span {
    top: 21px;
    left: -16px;
}

.map-hover #map-lake28 {
    top: 497px;
    left: 1274px;
}

.map-hover #map-lake28 span {
    top: 11px;
    left: -30px;
}

.map-hover #map-lake29 {
    top: 474px;
    left: 1380px;
}

.map-hover #map-lake29 span {
    top: 18px;
    left: -14px;
}

.map-hover #map-lake30 {
    top: 507px;
    left: 1190px;
}

.map-hover #map-lake30 span {
    top: 14px;
    left: -37px;
}

.map-hover #map-lake31 {
    top: 193px;
    left: 1061px;
}

.map-hover #map-lake31 span {
    top: -1px;
    left: 11px;
}

.map-hover #map-lake32 {
    top: 181px;
    left: 1040px;
}

.map-hover #map-lake32 span {
    top: 22px;
    left: -44px;
}

.map-hover #map-lake33 {
    top: 307px;
    left: 1195px;
}

.map-hover #map-lake33 span {
    top: -13px;
    left: -31px;
}

.map-hover #map-lake34 {
    top: 781px;
    left: 763px;
}

.map-hover #map-lake34 span {
    top: -7px;
    left: -56px;
    color: #000;
}

.map-hover #map-lake35 {
    top: 610px;
    left: 944px;
}

.map-hover #map-lake35 span {
    top: 43px;
    left: 22px;
    line-height: 1.2;
}

.map-hover #map-lake36 {
    top: 27px;
    left: 1075px;
}

.map-hover #map-lake36 span {
    top: 17px;
    left: -12px;
    color: #000;
}

.map-hover #map-lake37 {
    top: 792px;
    left: 869px;
}

.map-hover #map-lake37 span {
    top: 32px;
    left: 0px;
}

.map-hover #map-lake38 {
    top: 517px;
    left: 1247px;
}

.map-hover #map-lake38 span {
    top: 16px;
    left: 21px;
}

.map-hover #map-lake39 {
    top: 464px;
    left: 1544px;
}

.map-hover #map-lake39 span {
    top: 18px;
    left: -12px;
    color: #000;
}

.map-hover #map-lake40 {
    top: 545px;
    left: 916px;
}

.map-hover #map-lake40 span {
    top: 15px;
    left: -15px;
}

.map-hover #map-lake41 {
    top: 681px;
    left: 1146px;
}

.map-hover #map-lake41 span {
    top: -1px;
    left: 21px;
}

.map-hover #map-lake42 {
    top: 502px;
    left: 1099px;
}

.map-hover #map-lake42 span {
    top: 13px;
    left: -16px;
}

.map-hover #map-lake43 {
    top: 530px;
    left: 1490px;
}

.map-hover #map-lake43 span {
    top: 27px;
    left: 44px;
    color: #000;
}

.map-hover #map-lake44 {
    top: 234px;
    left: 978px;
}

.map-hover #map-lake44 span {
    top: 17px;
    left: -37px;
}

.map-hover #map-lake45 {
    top: 162px;
    left: 1399px;
}

.map-hover #map-lake45 span {
    top: 27px;
    left: -13px;
}

.map-hover #map-lake46 {
    top: 117px;
    left: 1377px;
}

.map-hover #map-lake46 span {
    top: -9px;
    left: -28px;
}

.map-hover #map-lake47 {
    top: 125px;
    left: 1315px;
}

.map-hover #map-lake47 span {
    top: 11px;
    left: -49px;
}

.map-hover #map-lake48 {
    top: 177px;
    left: 1263px;
}

.map-hover #map-lake48 span {
    top: 8px;
    left: 37px;
}

.map-hover #map-lake49 {
    top: 154px;
    left: 1276px;
}

.map-hover #map-lake49 span {
    top: 12px;
    left: -44px;
}

.map-hover #map-lake50 {
    top: 616px;
    left: 795px;
}

.map-hover #map-lake50 span {
    top: -5px;
    left: -31px;
}

.map-hover #map-lake51 {
    top: 616px;
    left: 825px;
}

.map-hover #map-lake51 span {
    top: -10px;
    left: -2px;
}

.map-hover #map-lake52 {
    top: 630px;
    left: 794px;
}

.map-hover #map-lake52 span {
    top: 0px;
    left: 12px;
}

.map-hover #map-lake53 {
    top: 634px;
    left: 774px;
}

.map-hover #map-lake53 span {
    top: -7px;
    left: -49px;
}

.map-hover #map-lake54 {
    top: 644px;
    left: 734px;
}

.map-hover #map-lake54 span {
    top: 13px;
    left: 7px;
}

.map-hover #map-lake55 {
    top: 647px;
    left: 718px;
}

.map-hover #map-lake55 span {
    top: 19px;
    left: -23px;
}

.map-hover #map-lake56 {
    top: 927px;
    left: 887px;
}

.map-hover #map-lake56 span {
    top: 28px;
    left: -23px;
}

.map-hover #map-lake57 {
    top: 843px;
    left: 861px;
}

.map-hover #map-lake57 span {
    top: -2px;
    left: 3px;
}

.map-hover #map-lake58 {
    top: 873px;
    left: 868px;
}

.map-hover #map-lake58 span {
    top: 19px;
    left: -15px;
}

.map-hover #map-lake59 {
    top: 876px;
    left: 887px;
}

.map-hover #map-lake59 span {
    top: 6px;
    left: 31px;
}

.map-hover #map-lake60 {
    top: 910px;
    left: 926px;
}

.map-hover #map-lake60 span {
    top: 19px;
    left: -4px;
}

.map-hover #map-lake61 {
    top: 864px;
    left: 972px;
}

.map-hover #map-lake61 span {
    top: 15px;
    left: 13px;
}

.map-hover #map-lake62 {
    top: 936px;
    left: 1038px;
}

.map-hover #map-lake62 span {
    top: 47px;
    left: 6px;
}

.map-hover #map-lake63 {
    top: 983px;
    left: 1133px;
}

.map-hover #map-lake63 span {
    top: 14px;
    left: 4px;
}

.map-hover #map-lake64 {
    top: 650px;
    left: 1142px;
}

.map-hover #map-lake64 span {
    top: 17px;
    left: -18px;
}

.map-hover #map-lake65 {
    top: 251px;
    left: 1236px;
}

.map-hover #map-lake65 span {
    top: -5px;
    left: -18px;
}

.map-hover #map-lake66 {
    top: 257px;
    left: 1191px;
}

.map-hover #map-lake66 span {
    top: 17px;
    left: -14px;
}

.map-hover #map-lake67 {
    top: 320px;
    left: 1132px;
}

.map-hover #map-lake67 span {
    top: 17px;
    left: 11px;
}

.map-hover #map-lake68 {
    top: 215px;
    left: 1055px;
}

.map-hover #map-lake68 span {
    top: 24px;
    left: -16px;
}

.map-hover #map-lake69 {
    top: 289px;
    left: 1004px;
}

.map-hover #map-lake69 span {
    top: 63px;
    left: 23px;
}

.map-hover #map-lake70 {
    top: 474px;
    left: 987px;
}

.map-hover #map-lake70 span {
    top: 0px;
    left: -26px;
}

.map-hover #map-lake71 {
    top: 409px;
    left: 1058px;
}

.map-hover #map-lake71 span {
    top: 36px;
    left: 3px;
}

.map-hover #map-lake72 {
    top: 326px;
    left: 1213px;
}

.map-hover #map-lake72 span {
    top: 152px;
    left: 80px;
}

.map-hover #map-lake73 {
    top: 777px;
    left: 600px;
}

.map-hover #map-lake73 span {
    top: 28px;
    left: 0px;
    color: #000;
}

.map-hover #map-lake74 {
    top: 788px;
    left: 817px;
}

.map-hover #map-lake74 span {
    top: 30px;
    left: -32px;
    color: #000;
}

.map-hover #map-lake75 {
    top: 788px;
    left: 800px;
}

.map-hover #map-lake75 span {
    top: 19px;
    left: -32px;
    color: #000;
}

.map-hover #map-lake76 {}

.map-hover #map-lake76 span {}

.map-hover #map-lake77 {}

.map-hover #map-lake77 span {}

.map-hover #map-lake78 {
    top: 648px;
    left: 722px;
}

.map-hover #map-lake78 span {
    top: 71px;
    left: 164px;
    color: #000;
}

.map-hover #map-lake79 {
    top: 425px;
    left: 684px;
}

.map-hover #map-lake79 span {
    top: 148px;
    left: 41px;
    color: #000;
}

.map-hover #map-lake80 {
    top: 623px;
    left: 645px;
}

.map-hover #map-lake80 span {
    top: 5px;
    left: -51px;
    color: #000;
}

.map-hover #map-lake81 {
    top: 608px;
    left: 652px;
}

.map-hover #map-lake81 span {
    top: 1px;
    left: -39px;
    color: #000;
}

.map-hover #map-lake82 {
    top: 564px;
    left: 594px;
}

.map-hover #map-lake82 span {
    top: 23px;
    left: -22px;
    color: #000;
}

.map-hover #map-lake83 {
    top: 549px;
    left: 469px;
}

.map-hover #map-lake83 span {
    top: 28px;
    left: 0px;
    color: #000;
}

.map-hover #map-lake84 {
    top: 427px;
    left: 586px;
}

.map-hover #map-lake84 span {
    top: 60px;
    left: 3px;
    color: #000;
}

@media screen and (min-width: 992px) {

    .map-title .sc-innr {
        font-size: 100px;
    }

    .map-title .sc-innr span {
        font-size: 20px;
        margin-bottom: 4px;
    }

    .map-title .sc-innr span:after {
        width: 56px;
        margin-left: 25px;
    }
}

@media screen and (max-width: 991px) {
    #hp-map {
        transform: none !important;
    }

    .hp-map {
        height: auto !important;
        padding: 60px 0;
    }

    .map-content {
        position: relative;
        left: auto;
        top: auto;
    }


    .map-list {
        width: max-content;
        max-width: 100%;
        margin: 50px auto auto;
    }

    .map-list li a {
        font-size: 15px;
        margin-bottom: 2em;
    }
}