html, body {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	font-family: "Surt", sans-serif;
}

	#container {
		display: block;
		position: relative;
		width: 100vw;
		height: 100vh;
		background-color: #fff;
	}

	#nav {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 60px;
		padding: 0 1em;
		font: Regular 32px/39px Surt;
		background: rgba(255,255,255,0.8);
		z-index: 20;
	}
	
		#nav .nav-item {
			display: inline-block;
			position: relative;
			height: 60px;
			line-height: 60px;
			padding: 0 1em;
			text-transform: uppercase;
			color: #000;
			text-decoration: none;
		}
		


		#nav .nav-nav {
			display: inline-block;
			position: relative;
			height: 60px;
			line-height: 60px;
			padding: 0 .5em;
			text-transform: uppercase;
			color: #000;
			text-decoration: none;
		}

		@media only screen and (min-width: 800px) {
			#nav .nav-nav {
				display: none;
			}
			
			#nav .nav-item.active::after { 
				display: block;
				position: absolute;
				content: "";
				left: 1em;
				right: 1em;
				bottom: 1em;
				height: 2px;
				background-color: #000;
			}
		}

		@media only screen and (max-width: 799px) {
			#nav .nav-item {
				display: none;
			}
			
			#nav .nav-item.active {
				display: inline-block;
				font-size: .9em;
				padding: 0 0.8em;
			}
			#nav {
				text-align: center;
			}
			
			
		}
		
	#info {
		display: fixed;
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 5000;
		padding: 1em;
	}
	
		#info-button {
			display: block;
			position: relative;
			width: 1.4em;
			height: 1.4em;
			font-size: 1.2em;
			font-weight: bold;
			text-align: center;
			line-height: 1.4em;
			font-weight: 300;
			color: rgb(1, 154, 206);
			border: .1em solid rgb(1, 154, 206);
			border-radius: 100%;
			text-decoration: none;
			transition: color 1s ease, border 1s ease;
			outline: none;
		}
		
		#info-texts {
			display: none;
		}
		
		#info-texts > div {
			display: none;
		}
		
		.show-vis-projects #info-texts #info-projects,
		.show-vis-gender #info-texts #info-gender,
		.show-vis-map #info-texts #info-map,
		.show-vis-license #info-texts #info-license,
		.show-vis-language #info-texts #info-language {
			display: block;
		}

		.show-vis-projects #info-texts #info-projects > div {
			display: none;
		}

		.show-vis-projects.show-filter-round #info-texts #info-projects #info-projects-round,
		.show-vis-projects.show-filter-status #info-texts #info-projects #info-projects-status,
		.show-vis-projects.show-filter-team #info-texts #info-projects #info-projects-team,
		.show-vis-projects.show-filter-topics #info-texts #info-projects #info-projects-topics,
		.show-vis-projects.show-filter-technologies #info-texts #info-projects #info-projects-technologies {
			display: block;
		}

		
		#info.show {
			left: 0;
			background-color: #fcfcfc;
			box-shadow: 0 0 2em rgba(0,0,0,0.2);
		}

		#info.show #info-texts {
			display: block;
			position: relative;
			margin: 1em 3em;
			font-size: .9em;
			color: #333;
			line-height: 1.4em;
		}

		#info.show #info-texts a {
			color: #ff0099;
			text-decoration: none;
		}
		
		#info.show #info-button {
			display: block;
			position: absolute;
			right: 1em;
			top: 1em;
			color: rgb(255, 0, 128);
			border: .1em solid rgb(255, 0, 128);
			outline: none;
		}
		
	#vis {
		display: block;
		position: absolute;
		top: 60px;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
		
	}
	
		.vis {
			display: none;
			position: fixed;
			top: 60px;
			left: 0;
			right: 0;
			bottom: 0;
		}

		.show-vis-projects #vis-projects {
			display: block;
			overflow: hidden;
		}
		
			#vis-projects-nav {
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 3em;
				max-width: 100vw;
			}

				#vis-projects-filters { 
					display: block;
					position: relative;
					background-color: #eee;
					height: 3em;
					color: #000;
					text-decoration: none;
					background-color: #fff;
					padding: 0 2em;
				}
				
					#vis-projects-filters .filter {
						display: inline-block;
						position: relative;
						background-color: #fff;
						height: 3em;
						text-align: center;
						color: #000;
						text-decoration: none;
						line-height: 3em;
						text-transform: uppercase;
					}
					
						@media only screen and (max-width: 799px) {
							
							#vis-projects-nav {
								height: 2em;
							}
							
							#vis-projects-filters { 
								height: 2em;
								padding: 0;
							}
							
							#vis-projects-filters .filter {
								height: 2em;
								line-height: 2em;
								font-size: .8em;
							}
						}
			
						#vis-projects-filters .filter.show {
							background-color: #fff;
						}

						#vis-projects-filters .filter .filter-title a {
							display: inline-block;
							color: #000;
							text-decoration: none;
							padding: 0 1em;
							outline: 0;
						}
				
						@media only screen and (max-width: 799px) { 
							#vis-projects-filters {
								text-align: center !important;
								padding: 0 !important;
							}
							
							#vis-projects-filters .filter .filter-title a {
								padding: 0 .5em;
								font-size: .8em;
								outline: 0;
							}
							#vis-projects-filters .filter ul,
							#vis-projects-filters .filter ul li {
								line-height: 1.4em !important;
							}
							#vis-projects-filters .filter .filter-action a {
								padding: 0 .5em;
								font-size: .8em;
								outline: 0;
							}
							
						}
				
						@media only screen and (hover: hover) {
							#vis-projects-filters .filter:not(.show) .filter-title a:hover {
								background-color: #09c;
								color: #fff;
							}
						}

						#vis-projects-filters .filter.active .filter-title a {
							background-color: #f52790 !important;
							color: #fff;
						}
				

						#vis-projects-filters .filter.show ul {
							display: block;
						}
			
						#vis-projects-filters .filter ul {
							display: none;
							position: fixed;
							top: calc(60px + 3em);
							left: 0;
							right: 0;
							margin: 0;
							padding: .3em 2em;
							max-width: calc(100vw-2em);
							background-color: rgba(255,255,255,0.9);
							z-index: 10;
							border-bottom: 1px solid #eee;
							line-height: 2.5em;
							text-align: left;
							font-size: .9em;
						}
						
							#vis-projects-filters .filter ul li {
								display: inline-block;
								position: relative;
								line-height: 2em;
							}
					
							#vis-projects-filters .filter ul li a {
								color: #000;
								display: inline-block;
								background-color: #fff;
								border-radius: .2em;
								padding: .3em .5em;
								text-decoration: none;
								margin: 0 0.2em;
								/*border-left: 5px solid;*/
						
							}

							@media only screen and (max-width: 799px) { 
								#vis-projects-filters .filter ul {
									top: calc(60px + 2em);
									padding: .4em;
									text-align: center;
									overflow-x: auto;
									overflow-y: none;
								}
								#vis-projects-filters .filter ul li a {
									margin: .1em 0;
									padding: .5em;
								}
							}
							
							@media only screen and (max-width: 799px) and (hover: none) {
								#vis-projects-filters .filter ul {
									white-space: nowrap;
								}
							}

							#vis-projects-filters .filter ul li.active a {
								background-color: #f52790;
								color: #fff !important;
							}
					
							@media only screen and (hover: hover) {
								#vis-projects-filters .filter ul li:not(.active) a:hover {
									background-color: #09c;
									color: #fff !important;
								}
							}

			#vis-projects-content {
				display: block;
				position: absolute;
				top: 3em;
				left: 0;
				right: 0;
				bottom: 0;
				overflow-x: hidden;
				overflow-y: auto;
			}
			
			@media only screen and (max-width: 799px) and (hover: none) {
				#vis-projects-content {
					top: 2em;
				}
				#vis-projects-nav.has-submenu+#vis-projects-content {
					top: 3.5em;
				}
			}
	
			#vis-projects #vis-projects-content {
				user-select: none;
			}
	
				#vis-projects .content-inner {
					display: flex;
					padding: 5vw;
					min-height: calc(100% - 10vw);
					align-items: center;
					align-content: center;
					align-self: center;
					justify-content: left;
					flex-grow: 1;
					flex-wrap: wrap;
					overflow-x: hidden;
					overflow-y: auto;
			
				}
	
				#vis-projects .project-item.filtered {
					opacity: 0.1;
					pointer-events: none;
				}
	
				#vis-projects .project-item {

					display: block;
					position: absolute;
					width: 2.8em;
					height: 2.8em;
					max-width: min(6.5vw, 6vh);
					max-height: min(6.5vw, 6vh);
					background-color: #666;
					border-radius: 100%;
					transition: left .2s ease-in-out, top .2s ease-in-out, width .2s ease-in-out, height .2s ease-in-out;
					cursor: pointer;
					z-index: 1000;
				}
	
					@media only screen and (hover: hover) {

						#vis-projects .project-item > a {
							display: block;
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
						}

						#vis-projects .project-item.filtered:hover .tooltip,
						#vis-projects .project-item .tooltip {
							display: none;
							opacity: 0;
							transition: opacity 1s;
						}

						#vis-projects .project-item:hover {
							box-shadow: 0 0 0 .5em rgba(255,0,255,.2);
							z-index: 2000;
							pointer-events: all;
						}

						#vis-projects .project-item:hover .tooltip {
								display: block;
								position: absolute;
								right: 50%;
								bottom: 50%;
								margin: 0;
								padding: 1em;
								width: 300px;
								max-width: 40vw;
								z-index: 10000;
								background-color: #eee;
								box-shadow: 0 0 2em rgba(0,0,0,0.5);
								pointer-events: none;
								opacity: 1;
								border-radius: .5em;
							}

							#vis-projects .project-item.left:hover .tooltip {
								right: auto;
								left: 50%;
							}

							#vis-projects .project-item.top:hover .tooltip {
								top: 50%;
								bottom: auto;
							}
		
					}
					
					@media only screen and (hover: none) {
					
						#vis-projects .project-item > a {
							display: none;
						}
	
						#vis-projects .project-item.filtered.show-tooltip .tooltip,
						#vis-projects .project-item .tooltip {
							display: none;
							opacity: 0;
							transition: opacity 1s;
						}

						#vis-projects .project-item.show-tooltip {
							box-shadow: 0 0 0 .5em rgba(255,0,255,.2);
							z-index: 2000;
							pointer-events: all;
						}

						#vis-projects .project-item.show-tooltip .tooltip {
								display: block;
								position: absolute;
								right: 50%;
								bottom: 50%;
								margin: 0;
								padding: 0 1em 1em;
								width: 300px;
								max-width: 40vw;
								z-index: 10000;
								background-color: #eee;
								box-shadow: 0 0 2em rgba(0,0,0,0.5);
								opacity: 1;
								border-radius: .5em;
							}
				
							#vis-projects .project-item.left.show-tooltip .tooltip {
								right: auto;
								left: 50%;
							}

							#vis-projects .project-item.top.show-tooltip .tooltip {
								top: 50%;
								bottom: auto;
							}
							
						}
						
						@media only screen and (max-width: 799px) {
							#vis-projects .project-item:hover .tooltip,
							#vis-projects .project-item.show-tooltip .tooltip {
								position: fixed;
								z-index: 1000;
								top: auto !important;
								width: auto !important;
								max-width: 98vw !important;
								left: 1vw !important;
								right: 1vw !important;
								top: calc(60px + 1vw) !important;
								bottom: auto !important;
							}
							#vis-projects .project-item.top:hover .tooltip,
							#vis-projects .project-item.top.show-tooltip .tooltip {
								top: auto !important;
								bottom: 1vw !important;
							}
						}
		
							#vis-projects .project-item .tooltip {
								text-transform: uppercase;
								font-size: 1.2em;
								font-weight: 300;
								margin: 0;
								padding: 0 .4em;
								color: #333;
							}

							#vis-projects .project-item .tooltip h2 a {
								color: #333;
								text-decoration: none;
							}

							#vis-projects .project-item .tooltip p {
								font-weight: 300;
								font-size: .8em;
								font-family: "Surt", sans-serif;
								margin: .5em 0 1em;
								padding: 0 .4em;
								color: #333;
							}

							#vis-projects .project-item .tooltip ul {
								display: block;
								position: relative;
								list-style: none;
								margin: 0;
								padding: 0;
							}
			
								#vis-projects .project-item .tooltip ul li{
									display: inline-block;
									position: relative;
									color: #000;
									background-color: rgba(230,230,230,0.5);
									border-radius: .2em;
									padding: .3em .5em;
									text-decoration: none;
									margin: 0.2em;
									font-size: .8em;
								}

					#vis-projects .project-item .indicator {
						display: none;
					}
		
		.show-vis-map #vis-map {
			display: block;
			overflow: hidden;
			margin-top: -60px;
		}
		
		#vis-map-nav {
			display: block;
			position: absolute;
			top: 60px;
			left: 0;
			right: 0;
			padding: .5em 1.6em .5em;
			line-height: 1.6em;
			max-width: 100vw;
			border-bottom: 1px solid #eee;
			text-transform: uppercase;
			font-size: .9em;
			z-index: 1000;
		}
		
			@media only screen and (max-width: 799px) {
				#vis-map-nav {
					font-size: .6em;
					letter-spacing: -.02em;
					text-align: center;
				}
				#vis-map-nav .filter-round {
					margin: 0 0.05em;
					padding: .3em;
				}
			}
		

			#vis-map-nav .filter-round {
				display: inline-block;
				background-color: #fff;
				border-radius: .2em;
				padding: .3em .5em;
				text-decoration: none;
				margin: 0 0.2em;
			}
	
				#vis-map-nav .filter-round:hover {
					background-color: #09c;
					color: #fff !important;
				}

				#vis-map-nav .filter-round.active {
					background-color: #f52790 !important;
					color: #fff !important;
				}
		
		#vis-map-inner {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			min-width: 100vw;
			min-height: 100vh;
			background-color: #fcfcfc;
		}
			
		.show-vis-gender #vis-gender {
			display: block;
			overflow: hidden;
			overflow-y: auto;
		}
		
			#vis-gender-nav {
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				padding: .5em 1.6em .5em;
				line-height: 1.6em;
				max-width: 100vw;
				border-bottom: 1px solid #eee;
				text-transform: uppercase;
				font-size: .9em;
			}
			
				@media only screen and (max-width: 799px) {
					#vis-gender-nav {
						font-size: .6em;
						letter-spacing: -.02em;
						text-align: center;
					}
					#vis-gender-nav .filter-round {
						margin: 0 0.05em;
						padding: .3em;
					}
				}
			
	
				#vis-gender-nav .filter-round {
					display: inline-block;
					background-color: #fff;
					border-radius: .2em;
					padding: .3em .5em;
					text-decoration: none;
					margin: 0 0.2em;
				}
		
					#vis-gender-nav .filter-round:hover {
						background-color: #09c;
						color: #fff !important;
					}
	
					#vis-gender-nav .filter-round.active {
						background-color: #f52790 !important;
						color: #fff !important;
					}

			#vis-gender-inner {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: center;
				align-content: space-around;
				min-height: 90vh;
				min-height: calc(96vh - 100px);
				width: auto;
				padding: 2vh 2vw;
				padding-bottom: 5em;
				padding-top: 3.5em;
			}
	
				#vis-gender .vis-item {
					display: block;
					position: relative;
					margin: 10px;
					/*border-radius: 100%;*/
				}
		
				#vis-gender .vis-item .total {
					display: block;
					position: absolute;
					left: 0;
					top: 50%;
					right: 0;
					height: 1em;
					margin-top: -.5em;
					line-height: 1em;
					text-align: center;
					color: transparent;
					font-size: .9em;
					font-weight: 300;
					user-select: none;
					transition: color .2s, box-shadow .4s;
				}
				
				#vis-gender .vis-item .project-name {
					display: block;
					position: absolute;
					left: -3em;
					top: calc(100% + .5em);
					right: -3em;
					margin-top: -.2em;
					line-height: 1em;
					text-align: center;
					color: transparent;
					font-size: .9em;
					font-weight: 300;
					user-select: none;
					transition: color .2s, box-shadow .4s;
					z-index: 1000;
					border-radius: .5em;
				}
				
				@media only screen and (max-width: 799px) {
					#vis-gender .vis-item .project-name {
						font-size: 10px !important;
					}
				}

				@media only screen and (hover: hover) {

					#vis-gender .vis-item:hover {
						box-shadow: 0 0 10px 10px #fff, 0 0 10px 16px #fff inset;
					}
		
					#vis-gender .vis-item:hover .project-name {
						background-color: rgba(255,255,255,0.5);
						color: #999;
					}

					#vis-gender .vis-item:hover .total {
						color: #999;
					}
					
				}
		
				@media only screen and (hover: none) {

					#vis-gender .vis-item.show {
						box-shadow: 0 0 10px 10px #fff, 0 0 10px 16px #fff inset;
					}
		
					#vis-gender .vis-item.show .project-name {
						background-color: rgba(255,255,255,0.5);
						color: #999;
					}

					#vis-gender .vis-item.show .total {
						color: #999;
					}
					
				}
		
		.show-vis-language #vis-language {
			display: block;
		}
		
			#vis-language-content {
				display: block;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 3em;
			}
		
			#vis-language-nav {
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				padding: .5em 1.6em .5em;
				line-height: 1.6em;
				max-width: 100vw;
				border-bottom: 1px solid #eee;
				text-transform: uppercase;
				font-size: .9em;
			}
			
				@media only screen and (max-width: 799px) {
					#vis-language-nav {
						font-size: .6em;
						letter-spacing: -.02em;
						text-align: center;
					}
					#vis-language-nav .filter-round {
						margin: 0 0.05em;
						padding: .3em;
					}
				}
				
		
				#vis-language-nav .filter-round {
					display: inline-block;
					background-color: #fff;
					border-radius: .2em;
					padding: .3em .5em;
					text-decoration: none;
					margin: 0 0.2em;
				}
			
					#vis-language-nav .filter-round:hover {
						background-color: #09c;
						color: #fff !important;
					}
		
					#vis-language-nav .filter-round.active {
						background-color: #f52790 !important;
						color: #fff !important;
					}

			.vis-language-item {
				display: block;
				position: absolute;
				border-radius: 100%;
				overflow: hidden;
				transition: left 1s ease, top 1s ease;
			}
		
			.vis-language-item-title {
				display: inline-block;
				position: absolute;
				color: #fff;
				top: 50%;
				line-height: 2em;
				margin-top: -1em;
				text-align: center;
				width: 100%;
				font-weight: 300;
				user-select: none;
				
			
			}
		
				.vis-language-item-num {
					display: block;
					position: absolute;
					width: 2em;
					height: 2em;
					top: 1.75em;
					left: 50%;
					font-size: .7em;
					margin-left: -1em;
					background-color: rgba(0,0,0,0.1);
					border-radius: 100%;
					color: #fff;
					line-height: 2em;
					text-align: center;
					user-select: none;
					
				}
		
		.show-vis-license #vis-license {
			display: block;
		}
		
			#vis-license-content {
				display: block;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 3em;
			}
		
			#vis-license-nav {
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 2.2em;
				padding: .5em 1.6em .5em;
				line-height: 1.6em;
				max-width: 100vw;
				border-bottom: 1px solid #eee;
				text-transform: uppercase;
				font-size: .9em;
			}
			
				@media only screen and (max-width: 799px) {
					#vis-license-nav {
						font-size: .6em;
						letter-spacing: -.02em;
						text-align: center;
					}
					#vis-license-nav .filter-round {
						margin: 0 0.05em;
						padding: .3em;
					}
				}
			
				#vis-license-nav .filter-round {
					display: inline-block;
					background-color: #fff;
					border-radius: .2em;
					padding: .3em .5em;
					text-decoration: none;
					margin: 0 0.2em;
				}
				
					#vis-license-nav .filter-round:hover {
						background-color: #09c;
						color: #fff !important;
					}
			
					#vis-license-nav .filter-round.active {
						background-color: #f52790 !important;
						color: #fff !important;
					}
			
			.vis-license-item {
				display: block;
				position: absolute;
				border-radius: 100%;
				overflow: hidden;
				transition: left 1s ease, top 1s ease;
			}
		
			.vis-license-item-title {
				display: inline-block;
				position: absolute;
				color: #fff;
				top: 50%;
				line-height: 1em;
				margin-top: -0.5em;
				text-align: center;
				width: 100%;
				font-weight: 300;
				user-select: none;
			
			}
		
				.vis-license-item-num {
					display: block;
					position: absolute;
					width: 2em;
					height: 2em;
					top: 1.75em;
					left: 50%;
					font-size: .7em;
					margin-left: -1em;
					background-color: rgba(0,0,0,0.1);
					border-radius: 100%;
					color: #fff;
					line-height: 2em;
					text-align: center;
					user-select: none;
					
				}

	
/* webfonts - Surt */

@font-face {
	font-family: 'Surt';
	font-weight: 500;
	font-style: normal;
	src: url("../fonts/Surt-Regular.eot");
	src: url("../fonts/Surt-Regular.eot?#iefix") format("embedded-opentype"),
		url("../fonts/Surt-Regular.woff") format("woff"),
		url("../fonts/Surt-Regular.woff2") format("woff2");
}

@font-face {
	font-family: 'Surt';
	font-weight: 700;
	font-style: normal;
	src: url("../fonts/Surt-Bold.eot");
	src: url("../fonts/Surt-Bold.eot?#iefix") format("embedded-opentype"),
		url("../fonts/Surt-Bold.woff") format("woff"),
		url("../fonts/Surt-Bold.woff2") format("woff2");
}

@font-face {
	font-family: 'Surt';
	font-weight: 500;
	font-style: italic;
	src: url("../fonts/Surt-RegularOblique.eot");
	src: url("../fonts/Surt-RegularOblique.eot?#iefix") format("embedded-opentype"),
		url("../fonts/Surt-RegularOblique.woff") format("woff"),
		url("../fonts/Surt-RegularOblique.woff2") format("woff2");
}

@font-face {
	font-family: 'Surt';
	font-weight: 300;
	font-style: italic;
	src: url("../fonts/Surt-LightOblique.eot");
	src: url("../fonts/Surt-LightOblique.eot?#iefix") format("embedded-opentype"),
		url("../fonts/Surt-LightOblique.woff") format("woff"),
		url("../fonts/Surt-LightOblique.woff2") format("woff2");
}

/* arrows */

[class^="arrow-"], [class*=" arrow-"] {
	display: inline-block;
	speak: none;
	line-height: 1;
}

.arrow-right:before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	background: url(../images/arrow.svg) center center no-repeat;
	background-size: contain;
	margin: 0;
	padding: 0;
}

.arrow-left:before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	background: url(../images/arrow.svg) center center no-repeat;
	background-size: contain;
	transform: rotate(180deg);
}