/* ===================================================== */
/* VMX Interactive Build System - MASTER CSS             */
/* ===================================================== */

.bike-map{
    position:relative;
    max-width:900px;
    margin:20px auto;
}

.bike-map img{
    width:100%;
    display:block;
    border-radius:8px;
}

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

.hotspot{
    position:absolute;

    width:10px;
    height:10px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;
    background:#ff0000;
    color:#ffffff;

    border:1px solid #ffffff;

    font-weight:bold;
    font-size:10px;
    line-height:1;

    cursor:pointer;

    box-shadow:0 0 5px #000;

    transform:translate(-50%, -50%);
}

@media (min-width:769px){

    .hotspot{
        width:18px;
        height:18px;
        font-size:14px;
    }

}

.hotspot:hover{
    transform:translate(-50%, -50%) scale(1.4);
    background:#ffffff;
    color:#000000;
    box-shadow:0 0 8px #35d7ff;
}

/* ===================================================== */
/* SIDE BUTTONS                                          */
/* ===================================================== */

.side-buttons{
    text-align:center;
    margin:20px 0;
}

.side-buttons button{
    padding:10px 20px;
    margin:0 5px;

    border:1px solid #35d7ff;

    background:#111;
    color:#35d7ff;

    cursor:pointer;
    border-radius:4px;

    font-weight:bold;
}

.side-buttons button.active{
    background:#35d7ff;
    color:#000;
}

.side-buttons button:hover{
    background:#35d7ff;
    color:#000;
}

/* ===================================================== */
/* POPUP                                                 */
/* ===================================================== */

.part-popup{
    display:none;

    position:absolute;
    z-index:9999;

    width:max-content;
    max-width:240px;

    background:#111;

    border:1px solid #35d7ff;
    border-radius:8px;

    padding:10px 12px;

    color:#fff;

    box-shadow:0 0 15px rgba(0,0,0,.5);
}

.part-popup h3{
    margin:0 0 6px 0;
    color:#35d7ff;
    font-size:14px;
}

.part-popup a,
.part-popup button{

    display:inline-block;

    margin-top:10px;
    padding:6px 10px;

    font-size:10px;

    background:#35d7ff;
    color:#000;

    text-decoration:none;

    border:none;
    border-radius:4px;

    font-weight:bold;
    cursor:pointer;
}

.part-popup a:hover,
.part-popup button:hover{
    background:#fff;
}

.part-popup button:disabled{
    opacity:0.6;
    cursor:not-allowed;
}

/* ===================================================== */
/* TAG                                                   */
/* ===================================================== */

.tag{
    display:inline-block;

    padding:3px 8px;

    background:#35d7ff;
    color:#000;

    border-radius:4px;

    font-size:11px;
    font-weight:bold;

    margin-bottom:8px;
}

/* ===================================================== */
/* CLOSE BUTTON                                          */
/* ===================================================== */

.popup-close{
    position:absolute;

    top:5px;
    right:10px;

    cursor:pointer;

    font-size:20px;
    font-weight:bold;

    color:#fff;
}

.popup-close:hover{
    color:#35d7ff;
}