#map_container .places {
overflow-y: scroll;
scrollbar-color: #292929 #ffffff;
scroll-behavior: smooth;
height: 600px;
padding-right: 10px;
}
#map_container .places::-webkit-scrollbar {
width: 10px;
}
#map_container .places::-webkit-scrollbar-track {
background: #292929;
border-radius: 10px;
}
#map_container .places::-webkit-scrollbar-thumb {
background: #fff;
border-radius: 10px;
}
#map_container .places h3 {
background: #292929;
color:#FFF;
text-align: center;
font-size: 20px;
font-weight: 500;
margin-bottom: 15px;
padding: 10px 0;
border-bottom: 1px solid #000;
position: sticky;
top:0;
}
#map_container .places .place {
background:#000;
color: #FFf !important;
padding: 15px;
margin-bottom: 15px;
scroll-margin: 40px;
}
#map_container .places .place {
color:#fff;
}
#map_container .places .place:last-child {
margin-bottom:0;
}
#map_container .places .place.active {
background:transparent;
color: #FFF !important;
}
#map_container .places .place.active a {
color: #FFF !important;
}
#map_container .places .place h2 {
text-align: center;
font-size:20px;
line-height: 30px;
padding: 0;
margin: 0;
font-weight: 500;
}
#map_container .places .place p,#map_container .places .place div {
padding:0;
margin: 0px;
font-size: 15px !important;
line-height: 20px !important;
}
#map_container .places .place p.address {
margin-top: 10px;
margin-bottom: 2px;
}
#map_container {
display: flex;
flex-direction: row;
justify-content: space-between;
height: auto;
}
#map_container #map {
width: 60%;
height: auto;
}
#map_container .places {
width: 35%;
height: 60vh;
}
#map_container #map .marker {
cursor: pointer;
background: #FFF;
border-radius: 50%;
padding: 0;
border-color: #000;
border-width: 2px;
display: flex;
justify-content: center;
align-content: center;
}
#map_container #map .marker svg {
width: 60%;
}
#map_container #map .marker svg .st0 {
fill: #000000 !important;
}
#map_container #map .marker.active {
background-color: #000;
}
#map_container #map .marker.active .st0{
fill: #FFFFFF !important;
}
#map_container #map .marker.active .black {
fill: white !important;
}
#map_container #map .marker.active .white {
fill: black !important;
}
#map_container .map_link {
display: none
}
@media screen and (max-width:640px) {
body.guide #content-container {
width: 100%;
padding: 0;
margin: 80px 0 0 0;
}
#map_container {
display: flex;
flex-direction: column;
padding:0;
margin:0;
}
#map_container .map_link {
display: block;
margin-top: 10px;
}
#map_container #map {
width: 100%;
height: 40vh;
}
#map_container .places {
overflow: hidden;
overflow-x: visible;
height: auto;
display: flex;
flex-direction: row;
justify-content: stretch;
width: 100%;
}
#map_container .places .place {
border-right: 1px solid #292929 !important;
}
#map_container .places .address {
width: 150px;
}
#map_container .places h3 {
width: 46px;
display: flex;
flex-direction: column;
justify-content: center;
left:0;
padding:0 5px;
}
#map_container .places h3 span{
writing-mode: vertical-lr;
font-size: 17px;
padding: 0 10px;
}
}