/* =========================
   INTERACTIVE SITE MAP
========================= */

.site-map {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.site-map > img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

.map-link {
    position: absolute;
    display: block;
    z-index: 10;
    background: transparent;
    text-decoration: none;
    border-radius: 25px;
}

.map-link:hover {
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 0 0 2px rgba(184, 155, 94, 0.45);
}

.map-link:focus-visible {
    outline: 2px solid #b89b5e;
    outline-offset: 2px;
}


/* MAP COORDINATES
   Original image: 1200 x 896
*/

.map-home {
    left: 11.7%;
    top: 39.6%;
    width: 12.7%;
    height: 5.1%;
}

.map-dogs {
    left: 30.7%;
    top: 33.5%;
    width: 16.4%;
    height: 5.5%;
}

.map-puppies {
    left: 53.5%;
    top: 33.5%;
    width: 13.5%;
    height: 5.5%;
}

.map-children {
    left: 70.5%;
    top: 39.0%;
    width: 15.5%;
    height: 7.0%;
}

.map-memory {
    left: 42.0%;
    top: 53.5%;
    width: 12.9%;
    height: 5.6%;
}

.map-about {
    left: 5.5%;
    top: 85.5%;
    width: 12.2%;
    height: 5.8%;
}

.map-news {
    left: 27.5%;
    top: 83.0%;
    width: 12.5%;
    height: 5.5%;
}

.map-champions {
    left: 45.2%;
    top: 82.4%;
    width: 19.7%;
    height: 5.5%;
}

.map-golden-club {
    left: 75.3%;
    top: 76.8%;
    width: 15.4%;
    height: 6.2%;
}

.map-library {
    left: 82.2%;
    top: 23.7%;
    width: 16.0%;
    height: 5.5%;
}

.map-information {
    left: 86.5%;
    top: 36.0%;
    width: 12.5%;
    height: 4.5%;
}

/* ==============================
   SITE MAP LINK
============================== */

.site-map-link {

    max-width:1200px;
    margin:0 auto;

    padding:12px 20px 6px;

    display:flex;
    align-items:center;

    font-size:14px;
    line-height:1.4;

    color:#b89b5e;

    font-style:italic;

    text-decoration:none;

    transition:color 0.3s ease;
}


/* ==============================
   HOVER
============================== */

.site-map-link:hover,
.site-map-link:focus {

    color:#d0b77a;

    text-decoration:none;
}


/* ==============================
   MOBILE
============================== */

@media (max-width:768px){

    .site-map-link {

        max-width:100%;

        padding:10px 15px 6px;

        font-size:13px;

        line-height:1.45;
    }


    .site-map-link:hover,
    .site-map-link:focus,
    .site-map-link:active {

        color:#c8b99f;

        text-decoration:none;
    }

}