@font-face {
    font-family: "W";
    src: url(w.woff) format("woff"),
     url(w.woff2) format("woff2");
}
*, *:after,*:before{
  box-sizing: border-box;
}
body,html{
	padding: 0px;
	margin: 0px;
	min-width: 750px;

	font-size: 14px;
	font-family: "W";
	line-height: 1.3;

	overflow-x: hidden;
}
@media screen and ( min-height: 500px )
  and (min-device-width: 350px) {
	body.floating .mapcontainer{
		position: fixed;
		top: 8px;
	}
	body.floating .mapPlaceholder{
		height: 400px;
		display: inline-block;
	}
	body.floating #Gradientoverlay{
		display: block;
	}
}
#Gradientoverlay{
	width: 100%;
	height: 450px;
	position: fixed;
	top: 0px;
	left: 0px;
	background: linear-gradient(white 85%,rgba(255,255,255,0.2));
  	display: none;
  	pointer-events: none;
}
.content{
	position: relative;
	max-width: 650px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
}
h1{
    background: white;
    display: block;
    top: 0px;
    width:650px;
    margin-top: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 2px dotted #bcbcbc;
    font-size: 48px;
}
h2{
	font-size: 38px;
}
h1 span{
	display: block;
	font-size: 22px;
	color: #bcbcbc;
}
p{
	text-align: justify;
	color: #3D3529;
	font-family: 'Copse', serif;
	font-size: 22px;
}

p.firstPar .firstWord .firstLetter {
	font-family: 'W';
	font-weight: 800;
}
p.firstPar .firstWord {
	font-size: 22px;
}

.mapcontainer{   
	position: relative; 
	width: 750px;
    margin-left: -50px;
    height: 360px;
    z-index: 1000;
    display: inline-flex;
    border-radius: 12px;
    overflow: hidden;
}
#map1,#map2{
	margin-left: 0px;
	width: 375px;
	height: 100%;
	display: inline-block;
}
#map2{
	position: absolute;
	right: 0px;
	border-left: 4px solid #fff;
}
#mapSlider{
	width: 4px;
	display: inline-block;
	height: 100%;
	position: relative;
}
.sliderButton{
	z-index: 999;
	background-color: #000;
    display: inline-block;
    border-radius: 8px;
    border: 3px solid #fff;
    position: absolute;
    width: 60px;
    height: 40px;
    top: 88%;
    left: -30px;
    margin: -30px 1px 0;
    color: #fff;
    cursor: ew-resize;
    background-size: 66px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgd2lkdGg9IjYwIiAgIGhlaWdodD0iNjAiICAgdmVyc2lvbj0iMS4xIiAgIHZpZXdCb3g9IjAgMCA2MCA2MCIgICBpZD0ic3ZnNTQzNCIgICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxK2RldmVsK29zeG1lbnUgcjEyOTExIiAgIHNvZGlwb2RpOmRvY25hbWU9Imwtci5zdmciPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGE1NDQ0Ij4gICAgPHJkZjpSREY+ICAgICAgPGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI+ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAgIDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+ICAgICAgPC9jYzpXb3JrPiAgICA8L3JkZjpSREY+ICA8L21ldGFkYXRhPiAgPGRlZnMgICAgIGlkPSJkZWZzNTQ0MiIgLz4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiICAgICBncmlkdG9sZXJhbmNlPSIxMCIgICAgIGd1aWRldG9sZXJhbmNlPSIxMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTI4NiIgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9Ijc1MSIgICAgIGlkPSJuYW1lZHZpZXc1NDQwIiAgICAgc2hvd2dyaWQ9InRydWUiICAgICBpbmtzY2FwZTp6b29tPSI0IiAgICAgaW5rc2NhcGU6Y3g9IjI1Ljg4OTgzMSIgICAgIGlua3NjYXBlOmN5PSIzNC4zODE4MzMiICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMCIgICAgIGlua3NjYXBlOndpbmRvdy15PSIyMyIgICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmc1NDM0IiAgICAgaW5rc2NhcGU6b2JqZWN0LW5vZGVzPSJ0cnVlIiAgICAgaW5rc2NhcGU6c25hcC1zbW9vdGgtbm9kZXM9InRydWUiPiAgICA8aW5rc2NhcGU6Z3JpZCAgICAgICB0eXBlPSJ4eWdyaWQiICAgICAgIGlkPSJncmlkNTk4OSIgLz4gIDwvc29kaXBvZGk6bmFtZWR2aWV3PiAgPHBhdGggICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIiAgICAgZD0iTSAyNSAyNCBMIDE2IDMwIEwgMjUgMzYgTCAyNSAyNCB6IE0gMzUgMjQgTCAzNSAzNiBMIDQ0IDMwIEwgMzUgMjQgeiAiICAgICBpZD0icGF0aDU5OTUiIC8+PC9zdmc+)
	
}

.mapboxgl-ctrl{
	display: none !important;
}


.cb.teal{
	border-radius: 50% !important;
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAZ0lEQVQoU2Nk8I/8P7e1jCG5uosBBrDxGedeOf8fpAgmiU4zxAQxMISGMjKCTMRnUrKOIdgwnCbCTALbqGMIMRGrG6Em4TQR3SQUE1HciGYShom4TMJ0Iw6T4CYyrF79HxROMJ24aAAY25lGTbKRTQAAAABJRU5ErkJggg==') repeat !important;
}
.cb.blue{
	border-radius: 50% !important;
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAALklEQVQYV2NkCG3/v6C9giFBhZFxwZ3//8FEQmUHA0yQkYGBgQFZEKICqhykEgDkZR3UdE16ugAAAABJRU5ErkJggg==') repeat !important;
}
.cb.green{
	border-radius: 50% !important;
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAATElEQVQoU2NkQALOG7T+O/P8Ztj7hZVhb8A1RmQ5OAdZETbFYIXoJmEzmRGXdejijG17VP9jcxO6TWAT0R2OzYMoPkNWgK4YQyEuGwBQUEWnv4zfrgAAAABJRU5ErkJggg==') repeat !important;
}


#wavingflags{
	margin-top: 54px;
}
.scattercontainer{   
	position: relative; 
	width: 750px;
    margin-left: -50px;
    height: 450px;
    z-index: 1000;
    display: inline-flex;
    border-radius: 12px;
    overflow: hidden;
    background: #F7F8F9 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AgMAAABHkjHhAAAACVBMVEWAgIBaWlo+Pj7rTFvWAAAAA3RSTlMHCAw+VhR4AAAA+klEQVQoz4WSMW7EQAhFPxKWNh2FCx+HkaZI6RRb5DYbyVfIJXLKDCFoMbaTKSw/8ZnPAPjaH2xgZcUNUDADD7D9LtDBCLZ45fbkvo/30K8yeI64pPwl6znd/3n/Oe93P3ho9qeh72btTFzqkz0rsJle8Zr81OLEwZ1dv/713uWqvu2pl+k0fy7MWtj9r/tN5q/02z89qa/L4Dc2LvM93kezPfXlME/O86EbY/V9GB9ePX8G1/6W+/9h1dq/HGfTfzT3j/xNo7522Bfnqe5jO/fvhVthlfk434v3iO9zG/UOphyPeinPl1J8Gtaa7xPTa/Dk+RIs4deMvwGvcGsmsCvJ0AAAAABJRU5ErkJggg==);
}
.scattercontainer #scatterplot canvas{
	width: 100%;
	height: 100%;
}