html, body{
	width: 100vw;
	height: 100vh;
	overflow: none;
	margin: 0;
	padding: 0;
	
	font-family: "San Francisco","Helvetica-Nue",Helvetica,Arial,sans-serif;
	color: rgb(94, 86, 86);
	font-size: 100%;
}

h1, h2, h3{
	font-family: ltc-caslon-pro, serif;
	color: rgb(55, 50, 50);
}

h1{
	margin: 0 auto;
}

h3{
	margin: 0 auto 1.4em;
}

p{
	line-height: 1.4em;
	font-size: 120%;
}

.map-container {
    background-color: #333;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: relative;
    opacity: .9999999;
}

.map{
	width: 2376px;
    height: 3564px;
    z-index: 1;

    position: relative;
    background: #333 url(interactive-map.jpg) no-repeat top left;
}


.map-location .marker{
	width: 22px;
	height: 22px;
	transform: translate( 50% , 50% );
	transform-origin: top left;
	
	border-radius: 50%;
	background: white;
	background: rgba(255,255,255,.85);
	position: absolute;
	
	cursor: pointer;
	pointer-events: all;
	
	
}


.map-cards{
	
}

.map-cards .data-card{
	position: fixed;
	top: 0;
	z-index: 10;
	left: 100vw;
	width: 35vw;
	height: 100vh;
	
	background: white;
	background: rgba(255,255,255,.95);

}

.map-cards .data-card.active{
	box-shadow: 0 0 20px rgba(0,0,0,.75);
}

.data-card .image{
	width: 100%;
	height: 300px;
	background-color: #232323;
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
}

.data-card .detail{
	box-sizing: border-box;
	padding: 24px;
}

svg{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
	pointer-events: none;
}

svg g#Transparent_Outlines path{
	pointer-events: all;
	cursor: pointer;
}

svg g#Transparent_Outlines g:hover path{

}