/*
==================================================
 Chody Logo Navigation
 File: assets/css/style.css
==================================================
*/

/* ==================================================
   LOGO CONTAINER
================================================== */

.chody-logo-wrapper {
    position: relative;
    width: 100%;
    max-width: 1774px;
    margin: 0 auto;
    line-height: 0;
}

/* ==================================================
   LOGO IMAGE
================================================== */

.chody-logo {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;

    user-select: none;
    -webkit-user-drag: none;

    pointer-events: none;
}

/* ==================================================
   HOTSPOTS
================================================== */

.chody-hotspot {
    position: absolute;
    display: block;
    z-index: 10;

    background: transparent;
    border: none;
    border-radius: 14px;

    text-decoration: none;

    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;

    cursor: pointer;

    transition:
        box-shadow .35s ease,
        transform .20s ease;
}

/* ==================================================
   SOFT GOLD GLOW
================================================== */

.chody-hotspot:hover {
    box-shadow:
        0 0 12px rgba(212,175,55,.40),
        0 0 24px rgba(212,175,55,.35),
        0 0 40px rgba(212,175,55,.28),
        0 0 60px rgba(212,175,55,.18);

    transform: scale(1.03);
}

.chody-hotspot:focus {
    outline: none;

    box-shadow:
        0 0 12px rgba(212,175,55,.40),
        0 0 24px rgba(212,175,55,.35),
        0 0 40px rgba(212,175,55,.28),
        0 0 60px rgba(212,175,55,.18);
}

/* ==================================================
   BUTTERFLIES
================================================== */

.chody-butterflies {
    left: 11.3%;
    top: 41%;
    width: 14.5%;
    height: 6.5%;
}

/* ==================================================
   AQUARIUMS
================================================== */

.chody-aquariums {
    left: 30.4%;
    top: 41%;
    width: 15%;
    height: 6.5%;
}

/* ==================================================
   GARDENS
================================================== */

.chody-gardens {
    left: 50.2%;
    top: 41%;
    width: 12.3%;
    height: 6.5%;
}

/* ==================================================
   MY LITTLE LASSIE
================================================== */

.chody-lassie {
    left: 67.8%;
    top: 41%;
    width: 20%;
    height: 6.5%;
}

/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 1200px) {
    .chody-hotspot {
        border-radius: 10px;
    }
}

@media (max-width: 768px) {
    .chody-hotspot {
        border-radius: 8px;
    }
}

@media (max-width: 480px) {
    .chody-hotspot {
        border-radius: 6px;
    }
}

/* ==================================================
   SCREEN READER TEXT
================================================== */

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);

    white-space: nowrap;
    border: 0;
}