/*---------------------------------- font -------------------------------------*/

@import url("http://hello.myfonts.net/count/2b4dc2");
@font-face {font-family: 'Scene Std Bold';src: url('http://digitalsocial.eu/webfonts/2B4DC2_0_0.eot');src: url('http://digitalsocial.eu/webfonts/2B4DC2_0_0.eot?#iefix') format('embedded-opentype'),url('http://digitalsocial.eu/webfonts/2B4DC2_0_0.woff') format('woff'),url('http://digitalsocial.eu/webfonts/2B4DC2_0_0.ttf') format('truetype');}
@font-face {font-family: 'Scene Std Medium';src: url('http://digitalsocial.eu/webfonts/2B4DC2_1_0.eot');src: url('http://digitalsocial.eu/webfonts/2B4DC2_1_0.eot?#iefix') format('embedded-opentype'),url('http://digitalsocial.eu/webfonts/2B4DC2_1_0.woff') format('woff'),url('http://digitalsocial.eu/webfonts/2B4DC2_1_0.ttf') format('truetype');}

/*------------------------------ search fix ----------------------------------*/

.nav-bar .search > a {
  width: 20px;
  float: right;
  text-align: right;
}

/*---------------------------------- viz -------------------------------------*/

#main {
  position: relative;
}

#viz {
  margin: 0 auto;
}

#viz h1 {
  width: 994px;
  margin: 2em auto 1.5em auto;
  clear: both;
}

#mainViz {
  min-height: 50px;
  width: 100%;
  overflow: hidden;
}

#introViz {
  width: 100%;
  overflow: hidden;
  z-index: 2000;
}

#mainViz + h1 {
  margin-top: 1em;
}

/*---------------------------------- intro -------------------------------------*/

#introViz.desktop {
  position: absolute;
  top: 0;
  left: 0;
}

#introViz {
  position: relative;
  color: white;
  font-family: 'Scene Std', sans-serif;
  /* background: rgba(0, 0, 0, 0.7); */
  background-image: url(http://content.digitalsocial.eu/wp-content/themes/digitalsocial/assets/background-gradient.png);
  background-position: center;
  background-repeat: repeat-y;
}

#introHex {
  margin: 1em 0;
}

#introVizContent {
  width: 994px;
  margin: 0 auto;
  height: 100%;
}

#introVizContent .introColumn {
  position: relative;
  width: 322px;
  height: 100%;
  margin-left: 14px;
  float: left;
  display: -webkit-flexbox; display: -ms-flexbox; display: -webkit-flex; display: flex;
  -webkit-flex-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;
}

#introVizContent .introColumn .introColumnContent {
  -webkit-flex-direction: column; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column;
}

#introVizContent .introColumn .exploreBtn,
#introVizContent .introColumn .mapBtn {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 40px;
  display: block;
  color: white;
  text-decoration: none;
  background: rgba(28, 175, 175, 0.7);
  font-size: 150%;
  text-align: center;
  box-sizing: border-box;
  padding: 0.5em;
  -webkit-transition: background 0.2s; -moz-transition: background 0.2s; transition: background 0.2s;
  cursor: pointer;
  margin-top: 50px;
}

#introVizContent .introColumn .mapBtn {
  margin-top: 10px;
}

#introVizContent .introColumn .exploreBtn.disabled {
  background: #808080;
}

.desktop #introVizContent .introColumn .exploreBtn:hover,
.desktop #introVizContent .introColumn .mapBtn:hover {
 background: rgba(28, 175, 175, 1);
}

#introVizContent .introColumn:first-child {
  margin-left: 0;
}

#introVizContent h1 {
  font-size: 13px;
  text-transform: uppercase;
  width: 322px;
  text-align: center;
  margin-bottom: 0;
}

#introVizContent p {
  font-size: 14px;
  line-height: 140%;
  padding: 0 0.5em;
}

/*
#introViz h1 {
  position: absolute;
  margin: 0;
  font-family: 'Scene Std', sans-serif;
  font-weight: normal;
  font-size: 170%;
  line-height: 120%;
}

#introViz h2 {
  font-family: 'Scene Std', sans-serif;
  font-size: 120%;
  font-weight: lighter;
}

#introViz h3 {
  font-family: 'Scene Std', sans-serif;
  font-size: 85%;
  font-weight: normal;
  width: 50%;
  margin: 0 0 2em 0;
  padding: 0;
  float: left;
}

#introViz .col {
  width: 50%;
  float: left;
}

#introViz a {
  font-size: 70%;
  display: block;
  width: 40%;
  float: left;
  height: 4em;
  line-height: 130%;
  box-sizing: border-box;
}

#introViz a img {
  vertical-align: top;
  margin: 0 0.75em 0 0;
}

#introViz a span {
  display: inline-block;
  width: 85%;
}

#introVizMapBtn {
  position: absolute;
  left: 50%;
}

#introVizMapBtn img {
  margin-top: 170px;
  margin-left: -200px;
}

#introVizExploreBtn {
  position: absolute;
  left: 50%;
}

#introVizExploreBtn img {
  margin-top: 170px;
  margin-left: 10px;
}

#introVizMapBtn img,
#introVizExploreBtn img {
  transition: transform 0.2s; -webkit-transition: -webkit-transform 0.2s; -moz-transition: -moz-transform 0.2s;
  transform: scale(0.9); -webkit-transform: scale(0.9); -moz-transform: scale(0.9);
}

#introVizMapBtn img:hover,
#introVizExploreBtn img:hover {
  transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1);
}

/*---------------------------------- main map -------------------------------------*/

#mainmap {
  width: 100%;
}

#mainmap .leaflet-fullscreen-button {
  background-image: url(http://content.digitalsocial.eu/wp-content/themes/digitalsocial/assets/leaflet-fullscreen.png);
}

#mainmap .leaflet-center-button {
  background-image: url(http://content.digitalsocial.eu/wp-content/themes/digitalsocial/assets/leaflet-center.png);
}

#map-overlay {
  float: right;
  margin-right: 100px;
  background: rgba(204, 204, 204, 0.3);
  position: relative;
  padding: 0 20px 0 20px;
  width: 300px;
}

#map-overlay h3 {
  font-size: 18px;
  margin-top: 30px;
  margin-bottom: 10px;
}

#map-overlay h3 a {
  text-decoration: none;
  color: black;
}

#map-overlay .more {
  font-size: 90%;
  color: black;
  margin-top: 50px;
  display: block;
}

#map-overlay .close {
  float: right;
  color: #808080;
  padding: 7px;
  font-size: 18px;
  margin-right: -20px;
  cursor: pointer;
  font-weight: bold;
}

#map-overlay .tech-areas {
  height: 12px;
  margin-bottom: 50px;
}

#map-overlay .tech-areas > div {
  float: left;
  margin-right: 4px;
  width: 12px;
  height: 12px;
}

#map-overlay .tech-areas .open-data { background-image: url(http://content.digitalsocial.eu/wp-content/themes/digitalsocial/assets/open-data.png); }
#map-overlay .tech-areas .open-hardware { background-image: url(http://content.digitalsocial.eu/wp-content/themes/digitalsocial/assets/open-hardware.png); }
#map-overlay .tech-areas .open-knowledge { background-image: url(http://content.digitalsocial.eu/wp-content/themes/digitalsocial/assets/open-knowledge.png); }
#map-overlay .tech-areas .open-networks { background-image: url(http://content.digitalsocial.eu/wp-content/themes/digitalsocial/assets/open-networks.png); }

.map-fullscreen {
  float: right;
  position: absolute;
  right: 0;
  color: white;
  background: black;
  padding: 7px;
  font-size: 14px;
  height: 14px;
  margin-top: -28px;
  cursor: pointer;
}

/*---------------------------------- carousel -------------------------------------*/

#caseStudiesViz {
  margin-top: -1em;
}

#carousel {
  width: 994px;

  margin: 0 auto;
}

#carousel .filters {
  width: 994px;
  margin: 0 auto;
  margin-bottom: 20px;
  font-size: 14px;
  color: #808080;
}

#carousel .arrowbutton,
#carousel-popup .arrowbutton {
  cursor: pointer;
  width: 14px;
  height: 26px;
}

#carousel .arrowbutton {
  margin-top: 76px;
}

#carousel .button-prev,
#carousel-popup .button-prev {
  float: left;
  margin-left: -40px;
  background-image: url(http://content.digitalsocial.eu/wp-content/themes/digitalsocial/assets/larrow.png);
}

#carousel .button-next,
#carousel-popup .button-next {
  float: right;
  margin-right: -40px;
  background-image: url(http://content.digitalsocial.eu/wp-content/themes/digitalsocial/assets/rarrow.png);
}

#carousel .carousel-wrapper {
  height: 181px;
  margin: 0 auto;

  overflow: hidden;
  position: relative;
}

#carousel .carousel-item {
  float: left;
  background: #ECECEC;
}

#carousel .carousel-item,
#carousel .carousel-item img {
  width: 322px;
  height: 181px;
}

#carousel .carousel-item a {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;

  text-decoration: none;
}

#carousel .carousel-item > span {
  display: block;
  position: absolute;

  top: 181px;
  /* top: 0; */
  left: 0;
  width: 322px;
  height: 181px;

  padding-top: 20px; /* ugly text hand centering */
  text-align: center;

  background: rgba(234, 235, 235, 0.75);
  color: black;

  font-family: "Scene Std Medium", "Helvetica", sans-serif;

  -webkit-transition: top 300ms;
  transition: top 300ms;

  cursor: pointer;
}

#carousel .carousel-item:hover > span {
  top: 0;
}

#carousel .carousel-item span > img {
  width: 110px;
  height: 125px;
  width: 55px;
  height: 62px;
  display: block;
  margin: 0 auto;
  padding-bottom: 10px;
  padding-right: 80px;
  padding-left: 80px;
  margin-top: 20px;
  border-bottom: 2px solid black;
}

#carousel .carousel-item span .name {
  display: block;
  padding-top: 10px;
}

#carousel img.preloading {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 40px;
  width: auto;
  margin-left: -20px;
  margin-top: -20px;
}

/*---------------------------------- carousel popup -----------------------------------*/

#carousel-popup {
  position: fixed;
  width: 990px;
  height: 418px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: white;
  border: 1px solid #eee;
  box-shadow: 0px 10px 15px #999;
  z-index: 2001;
}

#header .nav-bar .search {
  z-index: 2002;
}

#carousel-popup .title {
  text-align: center;
  padding-top: 18px;
  font-family: "Scene Pro", "Helvetica", sans-serif;
  font-size: 20px;
}

#carousel-popup .title a {
  text-decoration: none;
}

#carousel-popup .content-container {
  height: 90%;
  overflow: hidden;
}

#carousel-popup .content {
  font-family: Helvetica, sans-serif;
  font-size: 15px;

  float: right;
  width: 32%;
  height: 334px;
  margin: 2% 2% 2% 0;
  padding: 0 1.5% 0 0;

  overflow: scroll;
}

#carousel-popup .content .cover {
  float: left;
  padding-right: 10px;
  padding-bottom: 5px;
}

#carousel-popup .content p {
  margin-bottom: 0.2em;
}

#carousel-popup .content p a {
  color: #000;
}

#carousel-popup .images {
  float: left;
  width: 594px;
  height: 335px;
  margin: 2%;
  position: relative;
}

#carousel-popup .images img {
  width: 594px;
  height: 335px;
}

#carousel-popup .button-next,
#carousel-popup .button-prev {
  cursor: pointer;
  margin-top: 20%;
  font-size: 40px;
}

#carousel-popup .button-prev {
  float: left;
  margin-left: -40px;
}

#carousel-popup .button-next {
  float: right;
  margin-right: -40px;
}

#carousel-popup .content::-webkit-scrollbar {
    -webkit-appearance: none;
}

#carousel-popup .content::-webkit-scrollbar:vertical {
    width: 11px;
}

#carousel-popup .content::-webkit-scrollbar:horizontal {
    height: 11px;
}

#carousel-popup .content::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

#carousel-popup .content::-webkit-scrollbar-track { 
    background-color: #fff; 
    border-radius: 8px; 
}

#carousel-popup .images-ui {
  position: absolute;
  right: 0;
  overflow: auto;
}

#carousel-popup .images-ui-counter,
#carousel-popup .images-ui-next,
#carousel-popup .images-ui-prev {
  width: 30px;
  height: 30px;
  background: rgba(100, 100, 100, 0.5);
  float: left;
  box-sizing: border-box;
  font-size: 12px;
  padding: 0.8em 0.1em;
  text-align: center;
  color: white;
  cursor: pointer;
}

#carousel-popup .images-ui-counter:hover ,
#carousel-popup .images-ui-next:hover ,
#carousel-popup .images-ui-prev:hover  {
  background: rgba(150, 150, 150, 0.5);
}

#carousel-popup .images-ui-next {
  padding: 0.4em 0.5em;
  font-size: 16px;
}

#carousel-popup .images-ui-prev {
  padding: 0.4em 0.5em;
  font-size: 16px;
}

/*---------------------------------- eu countries -------------------------------------*/

#countriesVizTitle a {
  font-family: "Scene Pro Light", "Helvetica", sans-serif;
  font-weight: 100;
  color: #999;
  text-decoration: none;
}

#countriesVizTitle a:hover {
  color: #000;
}

#countriesViz {
  width: 994px;
  margin: 0 auto;
  overflow: hidden;
}

#countriesViz .map {
  font-family: "Scene Pro", "Helvetica", sans-serif;
  width: 112px;
  display: block;
  float: left;
  padding: 0;
  margin-right: 14px;
  color: #222222;
}

#countriesViz .map:nth-child(8n+0) {
  margin-right: 0;
}

#countriesViz .map:nth-child(8n+9) {
  clear: left;
}

#countriesViz .area-chart {
  margin-bottom: 20px;
}

#countriesViz .project-count,
#countriesViz .funds-count {
  margin-bottom: 20px;
}

#countriesViz .project-count .title,
#countriesViz .funds-count .title {
  font-size: 20px;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

#countriesViz .project-count .count,
#countriesViz .funds-count .count {
  font-size: 32px;
}

#countriesViz .country-name {
  font-size: 18px;
  margin-bottom: 30px;
}

#countriesViz .country svg path {
  fill: #999999;
  stroke: #999999;
}

/*---------------------------------- choropleth --------------------------------------*/

#choroplethViz svg {
  display: block;
  margin: 0 auto;
  width: 944px;
}

#choroplethViz text {
  font-family: "Scene Pro", "Helvetica", sans-serif;
  font-weight: 300;
  font-size: 16px;
  fill: #222222;
}

/*---------------------------------- explorer ----------------------------------------*/

#explorerViz {
  padding-bottom: 80px;
}

#explorerViz svg {
  display: block;
  margin: 0 auto;
  padding-bottom: 10px;
}

/*---------------------------------- main stats ---------------------------------*/

#mainStatsViz {
  width: 994px;
  margin: 0 auto;
}

#mainStatsViz .section {
  position: relative;
  overflow: auto;
}

#mainStatsViz div.title {
  font-size: 24px;
  margin-top: 10px;
  margin-bottom: 6px;
}

#mainStatsViz div.subtitle {
  margin-bottom: 30px;
  font-size: 18px;
  color: #9B9B9B;
}

#mainStatsViz div.column {
  float: left;
  margin-bottom: 20px;
}

#mainStatsViz svg {
  display: block;
}

#mainStatsViz div.count {
  font-size: 24px;
  margin-top: 16px;
  margin-bottom: 6px;
}

#mainStatsViz div.name {
  height: 50px;
  overflow: hidden;
  font-size: 16px;
  color: #9B9B9B;
}

#mainStatsViz div.section-organizationType div.name {
  height: 66px;
}

/*---------------------------------- key ----------------------------------------*/

#vizKeyContainer {
  position: absolute;
  top: 146px;
  left: -220px;
  transition: margin 0.5s; -webkit-transition: margin 0.5s; -moz-transition: margin 0.5s; -ms-transition: margin 0.5s;
}

#vizKeyContainer.open:hover {
  margin-left: 0;
}

#vizKeyContainer:hover {
  margin-left: 6px;
}

#vizKeyContainer #vizKeySideBar {
  font-size: 12px;
}

#vizKeyContainer h3 {
  color: white;
  font-weight: normal;
  padding: 1em 0 1em 0;
  font-size: 14px;
  margin-bottom: 0;
}

#vizKeyContainer.organisations h3 {
  color: black;
}

#vizKeyContainer h3 img {
  vertical-align: middle;
  margin-bottom: 0.5em;
}

#vizKeyContainer a {
  font-size: 12px;
  display: block;
  line-height: 150%;
  color: #BBB;
  float: none;
}

#vizKeyContainer.organisations a {
  color: black;
}

#vizKeySideBar .row {
  width: 220px;
  float: left;
  overflow: hidden;
}

.organisations #vizKeySideBar .row {
  width: 224px;
}

#vizKeySideBar .row.right {
  width: 0;
}

#vizKeySideBar .section.organisations,
#vizKeySideBar .section.projects {
  text-align: center;
}

#vizKeySideBar .section.organisations img,
#vizKeySideBar .section.projects img {
  padding-top: 12px;
  padding-bottom: 10px;
}

#vizKeySideBar .section {
  margin: 1px;
  padding-bottom: 10px;
  background: black;
  width: 220px;
}

#vizKeySideBar .section:first-child {
  margin-top: 0;
}

.organisations #vizKeySideBar .section {
  background: white;
  color: black;
  border: 1px solid black;
  width: 218px;
  padding-bottom: 8px;
}

.organisations #vizKeySideBar .section:last-child {
  padding-bottom: 9px;
}

#vizKeySideBar .section.more {
  padding-bottom: 0;
  text-align: center;
  cursor: pointer;
}

#vizKeySideBar .section > h3,
#vizKeySideBar .section > a {
  padding-left: 10px;
  padding-right: 10px;
}

#vizKeySideBar .section > a {
  padding-left: 30px;
  padding-top: 4px;
  padding-bottom: 4px;
}

#vizKeySideBar .row.right .section > a {
  padding-left: 14px;
}

#vizKeyContainer a:hover, #vizKeyContainer a.active {
  color: #FFF;
  text-decoration: none;
  cursor: pointer;
}

#vizKeyContainer.organisations a:hover {
  color: #BBB;
}

#vizKeyContainer a.filterLink {
  background-repeat: no-repeat;
  background-position: 10px 9px;
  background-size: 10px 10px;
}

#vizKeyContainer a.filterLink.funding-acceleration-and-incubation { background-image: url(http://content.digitalsocial.eu/wp-content/themes/digitalsocial/assets/triangle-funding-acceleration-and-incubation.png)}
#vizKeyContainer a.filterLink.collaborative-economy { background-image: url(http://content.digitalsocial.eu/wp-content/themes/digitalsocial/assets/triangle-collaborative-economy.png)}
#vizKeyContainer a.filterLink.open-democracy { background-image: url(http://content.digitalsocial.eu/wp-content/themes/digitalsocial/assets/triangle-open-democracy.png)}
#vizKeyContainer a.filterLink.awareness-networks { background-image: url(http://content.digitalsocial.eu/wp-content/themes/digitalsocial/assets/triangle-awareness-networks.png)}
#vizKeyContainer a.filterLink.new-ways-of-making { background-image: url(http://content.digitalsocial.eu/wp-content/themes/digitalsocial/assets/triangle-new-ways-of-making.png)}
#vizKeyContainer a.filterLink.open-access { background-image: url(http://content.digitalsocial.eu/wp-content/themes/digitalsocial/assets/triangle-open-access.png)}

#vizKeyContainer a.filterLink.funding-acceleration-and-incubation.active { background-color: #FDE302; }
#vizKeyContainer a.filterLink.collaborative-economy.active { background-color: #A6CE39; }
#vizKeyContainer a.filterLink.open-democracy.active { background-color: #F173AC; }
#vizKeyContainer a.filterLink.awareness-networks.active { background-color: #ED1A3B; }
#vizKeyContainer a.filterLink.new-ways-of-making.active { background-color: #F58220; }
#vizKeyContainer a.filterLink.open-access.active { background-color: #7BAFDE; }

#vizKeyContainer a.filterLink.open-hardware { background-image: url(http://content.digitalsocial.eu/wp-content/themes/digitalsocial/assets/tech-open-hardware-off.png)}
#vizKeyContainer a.filterLink.open-networks { background-image: url(http://content.digitalsocial.eu/wp-content/themes/digitalsocial/assets/tech-open-network-off.png)}
#vizKeyContainer a.filterLink.open-knowledge { background-image: url(http://content.digitalsocial.eu/wp-content/themes/digitalsocial/assets/tech-open-knowledge-off.png)}
#vizKeyContainer a.filterLink.open-data { background-image: url(http://content.digitalsocial.eu/wp-content/themes/digitalsocial/assets/tech-open-data-off.png)}

#vizKeyContainer a.filterLink.open-hardware.active { background-image: url(http://content.digitalsocial.eu/wp-content/themes/digitalsocial/assets/tech-open-hardware.png)}
#vizKeyContainer a.filterLink.open-networks.active { background-image: url(http://content.digitalsocial.eu/wp-content/themes/digitalsocial/assets/tech-open-network.png)}
#vizKeyContainer a.filterLink.open-knowledge.active { background-image: url(http://content.digitalsocial.eu/wp-content/themes/digitalsocial/assets/tech-open-knowledge.png)}
#vizKeyContainer a.filterLink.open-data.active { background-image: url(http://content.digitalsocial.eu/wp-content/themes/digitalsocial/assets/tech-open-data.png)}

#vizKeyContainer a.filterLink.funding-acceleration-and-incubation.active,
#vizKeyContainer a.filterLink.collaborative-economy.active,
#vizKeyContainer a.filterLink.open-democracy.active,
#vizKeyContainer a.filterLink.awareness-networks.active,
#vizKeyContainer a.filterLink.new-ways-of-making.active,
#vizKeyContainer a.filterLink.open-access.active {
  background-image: url(http://content.digitalsocial.eu/wp-content/themes/digitalsocial/assets/triangle-white.png)
}

#vizKeyContainer a.filterLink.open-hardware.active,
#vizKeyContainer a.filterLink.open-networks.active,
#vizKeyContainer a.filterLink.open-knowledge.active,
#vizKeyContainer a.filterLink.open-data.active,
#vizKeyContainer a.filterLink.education-and-skills.active,
#vizKeyContainer a.filterLink.participation-and-democracy.active,
#vizKeyContainer a.filterLink.culture-and-arts.active,
#vizKeyContainer a.filterLink.health-and-wellbeing.active,
#vizKeyContainer a.filterLink.work-and-employment.active,
#vizKeyContainer a.filterLink.neighbourhood-regeneration.active,
#vizKeyContainer a.filterLink.energy-and-environment.active,
#vizKeyContainer a.filterLink.finance-and-economy.active,
#vizKeyContainer a.filterLink.science.active,
#vizKeyContainer a.filterLink.social-enterprise-charity-or-foundation.active,
#vizKeyContainer a.filterLink.business.active,
#vizKeyContainer a.filterLink.grass-roots-organization-or-community-network.active,
#vizKeyContainer a.filterLink.academia-and-research.active,
#vizKeyContainer a.filterLink.government-and-public-sector.active {
  background-color: #CCC;
}

#vizKeyContainer img {
  vertical-align: top;
  margin-right: 1em;
}

#vizKeyThumb {
  background: black;
  color: white;
  transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg);
  position: absolute;
  cursor: pointer;
}

.main #vizKeyThumb  {
  top: 239px;
  left: -18px;
  width: 506px;
}

.organisations #vizKeyThumb  {
  top: 286px;
  left: -62px;
  width: 600px;

  background: white;
  color: black;
  border: 1px solid black;
}

#vizKeyThumb span {
  display: block;
  padding: 0.5em 1.5em;
  font-size: 14px;
}

/*---------------------------------- tooltip ----------------------------------------*/

#vizTooltip {
  font-family: 'Scene Std', sans-serif;
  position: absolute;
  top: 0;
  left: 0;
  padding: 1.2em;
  background: #333;
  color: white;
  font-size: 80%;
  max-width: 300px;
  font-size: 12px;
  line-height: 140%;
  display: none;
  z-index: 9999;
  -webkit-box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.15);
  box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.15);
}

#vizTooltip h4 {
  margin: 0 0 1em 0;
}

/*---------------------------------- tooltip ----------------------------------------*/

#vizPopup {
  position: absolute;
  top: 0;
  left: 0;
  padding: 1.2em;
  background: #333;
  color: white;
  font-size: 80%;
  max-width: 300px;
  font-size: 12px;
  line-height: 140%;
  x-display: none;
  box-sizing: border-box;
  z-index: 200;
}

#vizPopup span {
  display: block;
  margin: 0 0 1em 0;
}

#vizPopup h4.org {
  cursor: pointer;
}

#vizPopup h4 span {
  margin: 0 0 0.1em 0;
}

#vizPopupPointer {
  width: 20px;
  height: 20px;
  background: #333;
  position: absolute;
  bottom: 0%;
  left: 50%;
  margin: 0 0 -10px -10px;

  transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg);
}

#vizPopupContent {
  max-height: 200px;
  overflow: scroll;
}

#vizPopupContent a {
  color: white;
  display: block;
  line-height: 150%;
}

/*---------------------------------- preloader ----------------------------------------*/

#vizPreloader {
  position: absolute;
  top: 0;
  left: 50%;
  top: 200px;
  height: 80px;
  width: auto;
  margin-left: -40px;
  margin-top: -40px;
}

/*---------------------------------- organisation -----------------------------------*/

.viz-1 h2,
.viz-2 h2,
.viz-3 h2 {
  margin-bottom: 20px;
}

.viz-2 svg .percent,
.viz-2 svg .title {
  font-family: "Helvetica";
}

.viz-2 svg .title {
  fill: #808080;
  font-size: 14px;
}

.viz-2 svg .percent {
  font-size: 32px;
  font-weight: 500;
}

/*---------------------------------- bighex -----------------------------------*/

#bigHexViz {
  color: white;
  font-family: 'Scene Std', sans-serif;
}

/*---------------------------------- tablet -----------------------------------*/

@media only screen and (min-width:768px) and (max-width:959px) {
  .container {
    width: 100%;
  }
}

@media (min-width: 642px) and (max-width: 1025px) {
  .tablet #introVizContent .introColumn h1 {
    min-width: 0;
  }

  .tablet #introVizContent .introColumn,
  .tablet #introVizContent .introColumn:first-child {
    width: 32%;
    margin-left: 1%;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .tablet #introVizContent .introColumn:first-child p {
    margin-top: 20px;
    margin-bottom: 70px;
  }

  .tablet #introVizContent .introColumn:last-child p {
    margin-top: 120px;
    margin-bottom: 40px;
  }

  .tablet #introVizContent .introColumn .exploreBtn,
  .tablet #introVizContent .introColumn .mapBtn {
    margin-top: 40px;
    bottom: 0;
  }

  .tablet #viz h1,
  .tablet #introVizContent,
  .tablet #carousel,
  .tablet #carousel .filters,
  .tablet #countriesViz,
  .tablet #mainStatsViz {
    width: 90%;
    min-width: 768px;
  }

  .tablet #introVizContent {
    padding-bottom: 10px;
    overflow: auto;
  }

  .tablet #countriesViz,
  .tablet #mainStatsViz {
    width: 720px;
    margin: 0 auto;
    min-width: 0;
  }

  .tablet #viz h1 {
    margin-top: 2em;
    margin-bottom: 1.5em;
    margin-left: 10px;
    margin-right: 10px;
    min-width: 748px;
    clear: both;
  }

  .tablet #carousel .button-prev {
    margin-left: 20px;
  }

  .tablet #carousel .button-next {
    margin-right: 20px;
  }

  .tablet #carousel-popup {
    position: fixed;
    width: 792px;
    height: 332px;
  }

  .tablet #countriesViz .map {
    margin-right: 8px;
  }

  .tablet #countriesViz .map:nth-child(8n+0) {
    margin-right: 8px;
  }

  .tablet #countriesViz .map:nth-child(8n+9) {
    clear: none;
  }

  .tablet #countriesViz .map:nth-child(6n+0) {
    margin-right: 0;
  }

  .tablet #countriesViz .map:nth-child(6n+7) {
    clear: left;
  }

  .tablet #choroplethViz svg {
    width: 720px;
    display: block;
    margin: 0 auto;
  }
}

@media (min-width: 642px) and (max-width: 961px) {
  .tablet #header .nav-bar a {
    display: block;
    margin-bottom: 30px;
    margin-left: 20px;
  }

  .tablet #header .nav-bar ul.links {
    float: none;
    display: block;
    margin: 0 auto;
    width: 700px;
  }

  .tablet #header .nav-bar ul.links li {
    margin-left: 4px;
  }

  .tablet #header .nav-bar .search {
    right: 40px;
    top: 132px;
    width: 700px;
  }

  .tablet #introVizContent .introColumn h1 {
    min-width: 0;
  }

  .tablet #introVizContent .introColumn,
  .tablet #introVizContent .introColumn:first-child {
    float: none;
    display: block;
    margin: 0 auto;
    width: 640px;
    height: auto;
  }

  .tablet #introVizContent #introHex svg {
    display: block;
    margin: 0 auto;
  }

  .tablet #introVizContent .introColumn > p {
    text-align: center;
  }

  .tablet #introVizContent .introColumn:last-child p {
    margin-top: 10px;
  }

  .tablet #carousel-popup {
    position: fixed;
    width: 632px;
    height: 278px;
  }
}

@media (max-width: 641px) {
  .phone #header .nav-bar .links,
  .phone #header .nav-bar .search {
    display: none;
  }

  .phone #introVizContent {
    width: 100%;
  }

  .phone #introVizContent .introColumn h1 {
    min-width: 0;
    width: 80%;
  }

  .phone #introVizContent .introColumn,
  .phone #introVizContent .introColumn:first-child {
    float: none;
    display: block;
    margin: 0 auto;
    width: 100%;
    height: auto;
  }

  .phone #introVizContent .introColumn .exploreBtn,
  .phone #introVizContent .introColumn .mapBtn {
    margin-top: 40px;
    position: relative;
    bottom: 0;
  }

  .phone #introVizContent .introColumn .mapBtn {
    margin-bottom: 40px;
  }

  .phone #introVizContent #introHex svg {
    display: block;
    margin: 0 auto;
  }

  .phone #introVizContent .introColumn > p {
    text-align: center;
  }

  .phone #introVizContent .introColumn p {
    margin-top: 20px;
    margin-top: 30px;
  }
}