/*
=========================================================
Safari Planner
Module 2
Layout & Sliding Panel
=========================================================
*/

#safari-planner-wrapper {

    position: relative;

    width: 100%;

    height: 700px;

    overflow: hidden;

    background: #f4f1ea;

}


#safari-planner {

    width: 100%;

    height: 100%;

}


/* --------------------------------------------------
   PANEL
--------------------------------------------------- */

#safari-panel {

    position: absolute;

    top: 0;

    right: 0;

    width: 380px;

    height: 100%;

    background: #f7f3eb;

    box-shadow: -8px 0 25px rgba(0,0,0,.18);

    transform: translateX(100%);

    transition: transform .35s ease;

    z-index: 1000;

    overflow-y: auto;

    box-sizing: border-box;

    padding: 24px;

}

#safari-panel.open{

    transform: translateX(0);

}


/* --------------------------------------------------
   CLOSE BUTTON
--------------------------------------------------- */

#jp-close{

    position:absolute;

    top:16px;

    right:16px;

    width:38px;

    height:38px;

    border:none;

    border-radius:4px;

    background:#b68653;

    color:white;

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

    cursor:pointer;

display:flex;
align-items:center;
justify-content:center;
line-height:1;
padding:0;

}


/* --------------------------------------------------
   IMAGE
--------------------------------------------------- */

#jp-image{

    width:100%;

    height:220px;

    object-fit:cover;

    border-radius:6px;

    margin-top:40px;

    display:block;

}


/* --------------------------------------------------
   TYPOGRAPHY
--------------------------------------------------- */

#jp-title{

    margin:24px 0 12px;

    font-size:30px;

    line-height:1.15;

    color:#2b2b2b;

}


#jp-description{

    font-size:17px;

    line-height:1.7;

    color:#555;

}


/* --------------------------------------------------
   LINK
--------------------------------------------------- */

#jp-link{

    display:inline-block;

    margin-top:20px;

    text-decoration:none;

    font-weight:600;

    color:#295f86;

}


#jp-link:hover{

    color:#163c57;

}


/* --------------------------------------------------
   LEAFLET
--------------------------------------------------- */

.leaflet-container{

    background:#efe9dd;

}


.leaflet-control-attribution{

    font-size:11px;

}


/* --------------------------------------------------
   MOBILE
--------------------------------------------------- */

@media (max-width:900px){

    #safari-panel{

        width:100%;

        height:55%;

        top:auto;

        bottom:0;

        transform:translateY(100%);

    }

    #safari-panel.open{

        transform:translateY(0);

    }

}

/*--------------------------------------------------
Safari Planner marker
--------------------------------------------------*/

.sp-marker{

    width:18px;
    height:18px;

    border-radius:50%;

    background:#f8f6f1;

    border:3px solid #5E7F99;

    box-shadow:0 3px 10px rgba(0,0,0,.18);

    transition:
        transform .20s ease,
        border-color .20s ease,
        box-shadow .20s ease;

}

.sp-marker:hover{

    transform:scale(1.15);

}

.sp-marker.active{

    border-color:#C99054;

    transform:scale(1.35);

    box-shadow:0 6px 18px rgba(0,0,0,.25);

}