<!-- start Simple Custom CSS and JS -->
<style type="text/css">
.impression-map {
width: 66%;
margin: auto;
font-family: "Roboto", sans-serif;
color: #555;
font-weight: 300;
}
.impression-map .impression-map__title {
text-align: center;
text-transform: uppercase;
font-weight: 300;
}
.impression-map .impression-map__visual {
position: relative;
}
.impression-map .impression-map__visual__land {
fill: #ddd;
}
.impression-map .impression-map__visual__boundaries {
stroke: #fff;
stroke-width: 0.5px;
fill: none;
}
.impression-map .impression-map__visual__tooltip {
position: absolute;
left: 0;
top: 0;
width: 100px;
}
.impression-map .impression__map__visual__tooltip__box {
padding: 0.5em;
background: rgba(0, 0, 0, 0.35);
color: #fff;
font-size: 0.75em;
text-align: center;
}
.impression-map .impression__map__visual__tooltip__box img {
max-width: 100%;
}
.impression-map .impression__map__visual__tooltip__country {
text-transform: uppercase;
}
.impression-map .impression__map__visual__tooltip__arrow {
position: absolute;
left: 50%;
width: 0px;
margin-left: -6px;
border-width: 6px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.35) transparent transparent transparent;
}
.impression-map .impression-map__table {
display: flex;
justify-content: center;
}
.impression-map .impression-map__table > div {
flex: 1;
display: flex;
flex-flow: column nowrap;
align-items: center;
}
.impression-map .impression-map__table > div p + p {
margin-top: 0;
font-size: 1.5em;
}
.impression-map .impression-map__footnote {
margin: 0;
text-align: center;
color: #777;
font-size: 0.75em;
}</style>
<!-- end Simple Custom CSS and JS -->