/* = @media queries  info 
===========================*/
body:before {
    margin: 1em;
}

#map{
    height:640px;
    width:100%;
    left:0px;
    position:relative;
    top:0;
}

.ol-popup{
    width:250px;
    background-color:#FFFFFF;
    padding:4px;
    box-shadow: 4px 4px 16px black;
}
.ol-popup h3, h4{
    font-size:10pt;
}
.ol-popup-closer{
    color:black;
    float:right;
}

#trail-data{
    overflow-y:auto;
    height:640px;
}
#mouseover{
    top:8px;
    left:8px;
    position:absolute;
}
.map-popup img{
    width:100%;
    max-height:220px;
    object-fit: cover;
}
.hover-popup{
    top:96px;
    position:absolute;
    background-color:#FFF;
    padding:4px;
    font-size:10pt;
    max-width:192px;
    width:auto;
    box-shadow: 4px 4px 8px black;
    left:50%;
    text-align: center;
    min-width: 128px;
    transform: translateX(-50%);
}
.hover-popup::before{
    content: '';
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
  
    border-bottom: 5px solid #FFF;
    position: absolute;
    left:50%;
    top:-6px;
}

#trail-data .entry.active{
    background-color: #3a473f !important;
}
#trail-data .entry.active .entry-h1, #trail-data .entry.active #trail-data .entry-h1, #trail-data .entry.active a, #trail-data .entry.active span,#trail-data .entry.active .entry-h2{
    color:#FFF !important;
    width: 100%;
    display: block;
}

#trail-data .entry{
    width:100%;
    margin:0;
    padding:8px;
    border:none;
    border-bottom:1px solid #EEE;
    background-color: transparent;
    text-align: left;
    line-height: 32px;
}
#trail-data .entry:hover{
    background-color: #e8fff0;
    cursor:pointer;
}
#trail-data .entry a{
    color:#2c4938;
}

#trail-data .entry span{
    font-size:12pt;
    color:#666;
}

#trail-data .entry h3{
    font-size:12pt;
    color:#666;
}
#trail-data .entry .entry-h1{
    font-size:15pt;
    font-weight: bold;
}
#trail-data .entry .entry-h2{
    font-size:12pt;
}

.entry-dist{
    background-color:#2c4e29;
    color:#FFF;
    text-align: center;
    min-height: 96px;
    border-radius: 8px;
}
.entry-miles{
    margin-top:16px;
    font-size:22pt;
    font-weight: bold;
}


@media (min-width: 980px) {
    body:before {
        color: black;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    body:before {
        color: black;
    }
}

@media (max-width: 767px) {
    body:before {
        color: black;
    }
    #trail-data{
        overflow-y:visible;
        height:auto;
    }
}

@media (max-width: 480px) {
    body:before {
        color: black;
    }
    #trail-data{
        overflow-y:visible;
        height:auto;
    }
}