/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
  letter-spacing: 0.05em;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

input {
    -webkit-appearance: none !important;
}

ul {
	list-style: none;
	padding-left: 0;
}

em, i {
  font-style: italic;
}

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
       cursor: pointer;
}

.highlighted {
  position: relative;
  display: inline-block;
}

.highlighted:before {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 9px;
  bottom: 0;
  z-index: -1;
}

.highlighted--white:before {
  background: #fff;
}

.highlighted--yellow:before {
 background: #fec570;
}

/* ==========================================================================
Icons
========================================================================== */

@font-face {
  font-family: 'fieldtrip';
  src:  url('../fonts/fieldtrip.eot?nk2dig');
  src:  url('../fonts/fieldtrip.eot?nk2dig#iefix') format('embedded-opentype'),
    url('../fonts/fieldtrip.ttf?nk2dig') format('truetype'),
    url('../fonts/fieldtrip.woff?nk2dig') format('woff'),
    url('../fonts/fieldtrip.svg?nk2dig#fieldtrip') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="fticon-"], [class*=" fticon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'fieldtrip' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fticon-zero:before {
  content: "\e900";
}
.fticon-one:before {
  content: "\e901";
}
.fticon-two:before {
  content: "\e902";
}
.fticon-three:before {
  content: "\e903";
}
.fticon-four:before {
  content: "\e904";
}
.fticon-five:before {
  content: "\e905";
}
.fticon-six:before {
  content: "\e906";
}
.fticon-seven:before {
  content: "\e907";
}
.fticon-eight:before {
  content: "\e908";
}
.fticon-nine:before {
  content: "\e909";
}
.fticon-up:before {
  content: "\e90a";
}
.fticon-right:before {
  content: "\e90b";
}
.fticon-down:before {
  content: "\e90c";
}
.fticon-left:before {
  content: "\e90d";
}
.fticon-close:before {
  content: "\e90e";
}
.fticon-enlarge:before {
  content: "\e90f";
}
.fticon-reduce:before {
  content: "\e910";
}
.fticon-about:before {
  content: "\e911";
}
.fticon-share:before {
  content: "\e912";
}
.fticon-facebook:before {
  content: "\e913";
}
.fticon-twitter:before {
  content: "\e914";
}
.fticon-google-plus:before {
  content: "\e915";
}
.fticon-night:before {
  content: "\e916";
}
.fticon-day:before {
  content: "\e917";
}
.fticon-pause:before {
  content: "\e918";
}
.fticon-pause-large:before {
  content: "\e919";
}
.fticon-play-large:before {
  content: "\e91a";
}
.fticon-silhouette:before {
  content: "\e91b";
}
.fticon-switch-off:before {
  content: "\e91c";
}
.fticon-switch-on:before {
  content: "\e91d";
}
.fticon-sound-off:before {
  content: "\e91e";
}
.fticon-sound-on:before {
  content: "\e91f";
}
.fticon-volume-one:before {
  content: "\e920";
}
.fticon-volume-two:before {
  content: "\e921";
}
.fticon-volume-three:before {
  content: "\e922";
}
.fticon-logo-fieldtrip:before {
  content: "\e923";
}
.fticon-logo-miz:before {
  content: "\e924";
}
.fticon-logo-github:before {
  content: "\e925";
}

/*!
 *  Weather Icons 2.0.8
 *  Updated September 19, 2015
 *  Weather themed icons for Bootstrap
 *  Author - Erik Flowers - erik@helloerik.com
 *  Email: erik@helloerik.com
 *  Twitter: http://twitter.com/Erik_UX
 *  ------------------------------------------------------------------------------
 *  Maintained at http://erikflowers.github.io/weather-icons
 *
 *  License
 *  ------------------------------------------------------------------------------
 *  - Font licensed under SIL OFL 1.1 -
 *    http://scripts.sil.org/OFL
 *  - CSS, SCSS and LESS are licensed under MIT License -
 *    http://opensource.org/licenses/mit-license.html
 *  - Documentation licensed under CC BY 3.0 -
 *    http://creativecommons.org/licenses/by/3.0/
 *  - Inspired by and works great as a companion with Font Awesome
 *    "Font Awesome by Dave Gandy - http://fontawesome.io"
 */
@font-face {
  font-family: 'weathericons';
  src: url('../fonts/weathericons-regular-webfont.eot');
  src: url('../fonts/weathericons-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/weathericons-regular-webfont.woff2') format('woff2'), url('../fonts/weathericons-regular-webfont.woff') format('woff'), url('../fonts/weathericons-regular-webfont.ttf') format('truetype'), url('../fonts/weathericons-regular-webfont.svg#weather_iconsregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.wi {
  display: inline-block;
  font-family: 'weathericons';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.wi-fw {
  text-align: center;
  width: 1.4em;
}
.wi-rotate-90 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.wi-rotate-180 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.wi-rotate-270 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.wi-flip-horizontal {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.wi-flip-vertical {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}
.wi-owm-200:before {
  content: "\f01e";
}
.wi-owm-201:before {
  content: "\f01e";
}
.wi-owm-202:before {
  content: "\f01e";
}
.wi-owm-210:before {
  content: "\f016";
}
.wi-owm-211:before {
  content: "\f016";
}
.wi-owm-212:before {
  content: "\f016";
}
.wi-owm-221:before {
  content: "\f016";
}
.wi-owm-230:before {
  content: "\f01e";
}
.wi-owm-231:before {
  content: "\f01e";
}
.wi-owm-232:before {
  content: "\f01e";
}
.wi-owm-300:before {
  content: "\f01c";
}
.wi-owm-301:before {
  content: "\f01c";
}
.wi-owm-302:before {
  content: "\f019";
}
.wi-owm-310:before {
  content: "\f017";
}
.wi-owm-311:before {
  content: "\f019";
}
.wi-owm-312:before {
  content: "\f019";
}
.wi-owm-313:before {
  content: "\f01a";
}
.wi-owm-314:before {
  content: "\f019";
}
.wi-owm-321:before {
  content: "\f01c";
}
.wi-owm-500:before {
  content: "\f01c";
}
.wi-owm-501:before {
  content: "\f019";
}
.wi-owm-502:before {
  content: "\f019";
}
.wi-owm-503:before {
  content: "\f019";
}
.wi-owm-504:before {
  content: "\f019";
}
.wi-owm-511:before {
  content: "\f017";
}
.wi-owm-520:before {
  content: "\f01a";
}
.wi-owm-521:before {
  content: "\f01a";
}
.wi-owm-522:before {
  content: "\f01a";
}
.wi-owm-531:before {
  content: "\f01d";
}
.wi-owm-600:before {
  content: "\f01b";
}
.wi-owm-601:before {
  content: "\f01b";
}
.wi-owm-602:before {
  content: "\f0b5";
}
.wi-owm-611:before {
  content: "\f017";
}
.wi-owm-612:before {
  content: "\f017";
}
.wi-owm-615:before {
  content: "\f017";
}
.wi-owm-616:before {
  content: "\f017";
}
.wi-owm-620:before {
  content: "\f017";
}
.wi-owm-621:before {
  content: "\f01b";
}
.wi-owm-622:before {
  content: "\f01b";
}
.wi-owm-701:before {
  content: "\f014";
}
.wi-owm-711:before {
  content: "\f062";
}
.wi-owm-721:before {
  content: "\f0b6";
}
.wi-owm-731:before {
  content: "\f063";
}
.wi-owm-741:before {
  content: "\f014";
}
.wi-owm-761:before {
  content: "\f063";
}
.wi-owm-762:before {
  content: "\f063";
}
.wi-owm-771:before {
  content: "\f011";
}
.wi-owm-781:before {
  content: "\f056";
}
.wi-owm-800:before {
  content: "\f00d";
}
.wi-owm-801:before {
  content: "\f011";
}
.wi-owm-802:before {
  content: "\f011";
}
.wi-owm-803:before {
  content: "\f012";
}
.wi-owm-804:before {
  content: "\f013";
}
.wi-owm-900:before {
  content: "\f056";
}
.wi-owm-901:before {
  content: "\f01d";
}
.wi-owm-902:before {
  content: "\f073";
}
.wi-owm-903:before {
  content: "\f076";
}
.wi-owm-904:before {
  content: "\f072";
}
.wi-owm-905:before {
  content: "\f021";
}
.wi-owm-906:before {
  content: "\f015";
}
.wi-owm-957:before {
  content: "\f050";
}
.wi-owm-day-200:before {
  content: "\f010";
}
.wi-owm-day-201:before {
  content: "\f010";
}
.wi-owm-day-202:before {
  content: "\f010";
}
.wi-owm-day-210:before {
  content: "\f005";
}
.wi-owm-day-211:before {
  content: "\f005";
}
.wi-owm-day-212:before {
  content: "\f005";
}
.wi-owm-day-221:before {
  content: "\f005";
}
.wi-owm-day-230:before {
  content: "\f010";
}
.wi-owm-day-231:before {
  content: "\f010";
}
.wi-owm-day-232:before {
  content: "\f010";
}
.wi-owm-day-300:before {
  content: "\f00b";
}
.wi-owm-day-301:before {
  content: "\f00b";
}
.wi-owm-day-302:before {
  content: "\f008";
}
.wi-owm-day-310:before {
  content: "\f008";
}
.wi-owm-day-311:before {
  content: "\f008";
}
.wi-owm-day-312:before {
  content: "\f008";
}
.wi-owm-day-313:before {
  content: "\f008";
}
.wi-owm-day-314:before {
  content: "\f008";
}
.wi-owm-day-321:before {
  content: "\f00b";
}
.wi-owm-day-500:before {
  content: "\f00b";
}
.wi-owm-day-501:before {
  content: "\f008";
}
.wi-owm-day-502:before {
  content: "\f008";
}
.wi-owm-day-503:before {
  content: "\f008";
}
.wi-owm-day-504:before {
  content: "\f008";
}
.wi-owm-day-511:before {
  content: "\f006";
}
.wi-owm-day-520:before {
  content: "\f009";
}
.wi-owm-day-521:before {
  content: "\f009";
}
.wi-owm-day-522:before {
  content: "\f009";
}
.wi-owm-day-531:before {
  content: "\f00e";
}
.wi-owm-day-600:before {
  content: "\f00a";
}
.wi-owm-day-601:before {
  content: "\f0b2";
}
.wi-owm-day-602:before {
  content: "\f00a";
}
.wi-owm-day-611:before {
  content: "\f006";
}
.wi-owm-day-612:before {
  content: "\f006";
}
.wi-owm-day-615:before {
  content: "\f006";
}
.wi-owm-day-616:before {
  content: "\f006";
}
.wi-owm-day-620:before {
  content: "\f006";
}
.wi-owm-day-621:before {
  content: "\f00a";
}
.wi-owm-day-622:before {
  content: "\f00a";
}
.wi-owm-day-701:before {
  content: "\f003";
}
.wi-owm-day-711:before {
  content: "\f062";
}
.wi-owm-day-721:before {
  content: "\f0b6";
}
.wi-owm-day-731:before {
  content: "\f063";
}
.wi-owm-day-741:before {
  content: "\f003";
}
.wi-owm-day-761:before {
  content: "\f063";
}
.wi-owm-day-762:before {
  content: "\f063";
}
.wi-owm-day-781:before {
  content: "\f056";
}
.wi-owm-day-800:before {
  content: "\f00d";
}
.wi-owm-day-801:before {
  content: "\f000";
}
.wi-owm-day-802:before {
  content: "\f000";
}
.wi-owm-day-803:before {
  content: "\f000";
}
.wi-owm-day-804:before {
  content: "\f00c";
}
.wi-owm-day-900:before {
  content: "\f056";
}
.wi-owm-day-902:before {
  content: "\f073";
}
.wi-owm-day-903:before {
  content: "\f076";
}
.wi-owm-day-904:before {
  content: "\f072";
}
.wi-owm-day-906:before {
  content: "\f004";
}
.wi-owm-day-957:before {
  content: "\f050";
}
.wi-owm-night-200:before {
  content: "\f02d";
}
.wi-owm-night-201:before {
  content: "\f02d";
}
.wi-owm-night-202:before {
  content: "\f02d";
}
.wi-owm-night-210:before {
  content: "\f025";
}
.wi-owm-night-211:before {
  content: "\f025";
}
.wi-owm-night-212:before {
  content: "\f025";
}
.wi-owm-night-221:before {
  content: "\f025";
}
.wi-owm-night-230:before {
  content: "\f02d";
}
.wi-owm-night-231:before {
  content: "\f02d";
}
.wi-owm-night-232:before {
  content: "\f02d";
}
.wi-owm-night-300:before {
  content: "\f02b";
}
.wi-owm-night-301:before {
  content: "\f02b";
}
.wi-owm-night-302:before {
  content: "\f028";
}
.wi-owm-night-310:before {
  content: "\f028";
}
.wi-owm-night-311:before {
  content: "\f028";
}
.wi-owm-night-312:before {
  content: "\f028";
}
.wi-owm-night-313:before {
  content: "\f028";
}
.wi-owm-night-314:before {
  content: "\f028";
}
.wi-owm-night-321:before {
  content: "\f02b";
}
.wi-owm-night-500:before {
  content: "\f02b";
}
.wi-owm-night-501:before {
  content: "\f028";
}
.wi-owm-night-502:before {
  content: "\f028";
}
.wi-owm-night-503:before {
  content: "\f028";
}
.wi-owm-night-504:before {
  content: "\f028";
}
.wi-owm-night-511:before {
  content: "\f026";
}
.wi-owm-night-520:before {
  content: "\f029";
}
.wi-owm-night-521:before {
  content: "\f029";
}
.wi-owm-night-522:before {
  content: "\f029";
}
.wi-owm-night-531:before {
  content: "\f02c";
}
.wi-owm-night-600:before {
  content: "\f02a";
}
.wi-owm-night-601:before {
  content: "\f0b4";
}
.wi-owm-night-602:before {
  content: "\f02a";
}
.wi-owm-night-611:before {
  content: "\f026";
}
.wi-owm-night-612:before {
  content: "\f026";
}
.wi-owm-night-615:before {
  content: "\f026";
}
.wi-owm-night-616:before {
  content: "\f026";
}
.wi-owm-night-620:before {
  content: "\f026";
}
.wi-owm-night-621:before {
  content: "\f02a";
}
.wi-owm-night-622:before {
  content: "\f02a";
}
.wi-owm-night-701:before {
  content: "\f04a";
}
.wi-owm-night-711:before {
  content: "\f062";
}
.wi-owm-night-721:before {
  content: "\f0b6";
}
.wi-owm-night-731:before {
  content: "\f063";
}
.wi-owm-night-741:before {
  content: "\f04a";
}
.wi-owm-night-761:before {
  content: "\f063";
}
.wi-owm-night-762:before {
  content: "\f063";
}
.wi-owm-night-781:before {
  content: "\f056";
}
.wi-owm-night-800:before {
  content: "\f02e";
}
.wi-owm-night-801:before {
  content: "\f022";
}
.wi-owm-night-802:before {
  content: "\f022";
}
.wi-owm-night-803:before {
  content: "\f022";
}
.wi-owm-night-804:before {
  content: "\f086";
}
.wi-owm-night-900:before {
  content: "\f056";
}
.wi-owm-night-902:before {
  content: "\f073";
}
.wi-owm-night-903:before {
  content: "\f076";
}
.wi-owm-night-904:before {
  content: "\f072";
}
.wi-owm-night-906:before {
  content: "\f024";
}
.wi-owm-night-957:before {
  content: "\f050";
}

/* ==========================================================================
Theme Custom Style
========================================================================== */



*, ::after, ::before {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

html {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
}

body {
	font-family: 'Inconsolata', monospace;
	font-size: 100%;
	color: #fff;
	overflow: hidden;
  background: #000;
  width: 100%;
  height: 100%;
}

h3 {
	font-size: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Custom Cursor */

#ftPointer {
  position: fixed;
  width: 13px;
  height: 13px;
  background: #fec570;
  border-radius: 50%;
  top: -20px;
  left: -20px;
  transform: translate(-50%, -50%) scale(1);
  transition:.2s linear top, .2s linear left, .1s ease transform, .2s ease width, .2s ease height;
  z-index:10;
  pointer-events: none;
}

.touch #ftPointer {
  display: none !important;
}

#ftPointer.custom-cursor-outline {
  border: 2px solid #fec570;
  background: none;
  width: 40px;
  height: 40px;
}

/* Start Button */

#ftStartButton {
	position: absolute;
	top: 50%;
	left: 25%;
  margin-top: -90px;
	margin-left: -90px;
	width: 180px;
  height: 180px;
	text-align: center;
  font-size: 2em;
	z-index: 30;
	display: none;
	color: #fec570;
  border-radius: 100%;
}

#ftStartButton .fticon-right, #ftStartButton .chart {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  line-height: 180px;
}

#ftStartButton .outer {
  fill: transparent !important;
  stroke: #fec570;
  stroke-width: 3;
  stroke-dasharray: 900;
  transition: stroke-dashoffset 1s;
  -webkit-animation-play-state: running;

  /* firefox bug fix - won't rotate at 90deg angles */
  transform: rotate(-90deg) translateX(-179px);
 -moz-transform: rotate(-90deg) translateX(-179px);

}

.ftLayer {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: #262626;
}

.ftLayer.active {

}

.ftLayer .ftLogo {
	position: absolute;
	top: 20px;
	left: 20px;
	color: #fff;
	font-size: 2.5em;
	z-index: 2;
	-webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.ftLayer .ftLayerContent {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 1;
	transition-property: all;
	transition-duration: 800ms;
	transform-origin: center;
	transform: scale(1.6) rotate(0deg);
}

.fullscreen-no .ftLayer#fthypervideo .ftLayerContent {
  transition-duration: 0ms;
  transform: scale(1) rotate(0deg) !important;
}

.ftLayer#ftoverview .ftLayerContent {
	transform: scale(1) rotate(0deg);
}

#ftMapContainer::before {
  content: "";
  background: rgba(2, 5, 15, .75);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
}

.ftLayer.active .ftLayerContent {
	transform: scale(1) rotate(0deg);
}

.ftLayer.zoomOut .ftLayerContent {
	transform: scale(0.8) rotate(-4deg) !important;
}

/* Navigation */

.ftLayer .ftLayerContent .ftNavigation {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 60px;
	z-index: 11;
}

.ftLayer .ftLayerContent .ftNavigation button {
	float: right;
	margin-left: 12px;
}

.ftNavItems {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	padding: 0;
	margin: 0;
	width: 100%;
	list-style: none;

}

.ftNavIconContainer {
	display: block;
	position: relative;
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	opacity: 1;
	font-size: 1.25em;
}

.ftNavIconContainer i {
  cursor: pointer;
  text-shadow: 0 0 2px rgba(0, 0, 0, .5);
}

.ftNavIconContainer.inactive {
	opacity: .35;
	pointer-events: none;
}

.ftNavIconContainer img {
	max-width: 22px;
	height: auto;
	vertical-align: middle;
}

.ftNavIconContainer.ftAboutIconContainer img {
	max-width: 10px;
	height: auto;
}

.ftNavIconContainer span {
	display: block;
}

.ftSound, .ftNavShare, .ftScreen, .ftNavAbout, .ftEdit, .ftNavVision, .ftNavVisitors, .ftNavCooperation {
	position: absolute;
}

.ftNavShare {
  font-size: 1.65em;
}

.ftSound.ftAboutIconContainer img,
.ftNavShare.ftAboutIconContainer img {
	max-width: 20px;
}

.ftSound {
	top: 20px;
}

.ftSoundOff {
  display: none;
}

.ftScreen {
	top: 70px;
}

.fullscreen-no .ftScreen {
  display: none;
}

.ftEdit {
	top: 200px;
	cursor: pointer;
  display: none !important;
}

.ftNavAbout {
	bottom: -2px;
	z-index: 10;
}

.ftNavShare {
	top: 120px;
}

.ftNavVision {
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  cursor: pointer;
}

.ftNavVision .btn {
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
}

.ftNavVision a {
  display: block;
}

.ftNavVision span, .ftNavVision img {
  display: inline-block;
  vertical-align: top;
}

.ftNavVision span {
  font-family: 'Rubik', helvetica, sans-serif;
  font-weight: 600;
  font-size: 1em;
  margin-right: 10px;
}

/*
.ftNavVisitors {
  display: flex;
  align-items: center;
  top: 20px;
  right: 125px;
  font-size: .95em;
  padding: 8px 10px;
  color: #fff;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  text-align: center;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .05);
  text-align: left;
}

.ftNavVisitorsNumber {
  font-family: 'Rubik', helvetica, sans-serif;
  font-size: 2.5em;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-right: 8px;
}

.ftNavVisitors span {
  font-weight: 400;
  line-height: 1.4em;
  font-size: .85em;
}
*/

.tooltip {
  position: absolute;
  background: rgba(0,0,0,.5);
  padding: 10px;
  line-height: 1.25em;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,.5);
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
}

.ftNavUp .tooltip {
  top: 8px;
  width: auto;
  right: 55px;
  border-color: transparent;
  white-space: nowrap;
  display: none;
  font-size: 16px;
}

.arrow_box-right:before {
	left: calc(100% + 1px);
	top: 50%;
	border: solid transparent;
  border-color: transparent;
  border-left-color: rgba(0,0,0,.5);
  border-width: 9px;
  margin-top: -9px;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.ftNavUp .tooltip.is-visible {
  display: block;
}

.ftNavVision .tooltip {
  /* top: -85px; */
  bottom: 0;
  width: 295px;
  right: 155px;
  opacity: 0;
  visibility: hidden;
}

.ftNavVision .tooltip.is-visible {
  opacity: 1;
  visibility: visible;
}

.ftPulsingHint {

  /* fix positioning on iphones */ 
  position: fixed;
  top: calc(100vh - 61px);
  /* old */
  /*
  position: absolute;
  bottom: 20px;
  */
  background: rgba(0,0,0,.5);
  width: auto;
  white-space: nowrap;
  left: 50%;
  padding: 10px 10px 10px 60px;
  line-height: 1.25em;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,.5);
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);

  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
}

.ftPulsingHint.is-visible {
  opacity: 1;
  visibility: visible;
  z-index: 10;
}

.ftPulsingHint.is-visible::before {
  content: "";
  position: absolute;
  -webkit-animation: pulse-one 3s infinite; /* Chrome, Safari, Opera */
  animation: pulse-one 3s infinite;
  background: rgba(254, 197, 112, .5);
  border-radius: 50%;
  height: 0em;
  width: 0em;
  top: 50%;
  left: 30px;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  z-index: -1;
}

.ftPulsingHint.is-visible::after {
  content: "";
  position: absolute;
  -webkit-animation: pulse-two 3s infinite;
  animation: pulse-two 3s infinite;
  background: rgba(254, 197, 112, .25);
  border-radius: 50%;
  height: 0em;
  width: 0em;
  top: 50%;
  left: 30px;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  z-index: -1;
}

/* SHARING BUTTONS */

.ftSocialNav {
  position: absolute;
  top: 41px;
  right: 17px;
  line-height: 1;

  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
}

.ftSocialNav li {
  margin-top: 10px;
}

.ftSocialNav.is-open  {
  opacity: 1;
  visibility: visible;
}

.ftSocialNav i {
  vertical-align: bottom;
}

/* INTRO VIDEO */

.ftLayer#ftintro {
	z-index: 3;
  display: none;
}

.ftLayer#ftintro video {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#ftIntroVideoPoster {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#ftIntroCaptionsContainer {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 11;
}

#ftIntroCaptionsContainer .ftIntroCaption {
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  color: #ffffff !important;
  width: 60%;
  text-align: center;
  font-size: 2em;
  background: rgba(0,0,0,.45);
  padding: 1vw;
  letter-spacing: 0;
  line-height: 1.15em;
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  transition-property: opacity;
  transition-duration: 800ms;
}

#ftIntroCaptionsContainer .ftIntroCaption.active {
  opacity: 1;
}

.ftLayer#ftintro::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  z-index: 1;
}

.ftLayer#ftintro .ftintroLogos {
  position: absolute;
  left: 50%;
  margin-left: -125px;
  width: 250px;
  text-align: center;
  z-index: 10;
}

.ftLayer#ftintro .ftintroLogos.LogosTop {
  top: 30px;
}

.ftLayer#ftintro .ftintroLogos.LogosMiddle {
  top: 140px;
}

.ftLayer#ftintro .ftintroLogos.LogosBottom {
  bottom: 30px;
}

.ftLayer#ftintro .ftintroLogos .ftintroLogo {
  display: block;
  width: 180px;
  height: auto;
  font-size: 80px;
  text-align: center;
  margin: 0 auto;
}

.ftLayer#ftintro .ftintroLogos.LogosBottom  .ftintroLogo {
  width: 120px;
  margin: 0 auto;
}

.ftLayer#ftintro .fticon-logo-fieldtrip {
  display: block;
  font-size: 75px;
  margin-bottom: .25em;
}

.ftLayer#ftintro #ftTagline {
  position: absolute;
  top: 50%;
  left: 25%;
  margin-left: 180px;
  width: 50%;
  font-size: 1.75em;
  line-height: 1.2em;
  color: #fff;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 28;
}

.ftLayer#ftintro #ftSkipIntro {
  position: absolute;
  bottom: 40px;
  right: 40px;
  color: #fff;
  border: 2px solid #fff;
  padding: 4px 8px;
  z-index: 25;
  display: none;
}

.ftLayer#ftintro #ftIntroAudio {
  position: absolute;
  top: 30px;
  right: 80px;
  color: #fff;
  border: none;
  padding: 4px 8px;
  z-index: 25;
  display: none;
}

@media (max-width: 800px) {
  .ftLayer#ftintro #ftIntroAudio {
    top: 20px;
    right: 20px;
  }
}

.ftLayer#ftintro .ftNavCooperation {
  right: 20px;
}

/* OVERVIEW MAP */

#ftoverview {
	background: #252425;
	z-index: 2;
}


/* TRANSLATION OFFSET CAN BE A MAXIMUM OF 10px */
/*
@-moz-keyframes flying { 33%{ -moz-transform:translate3d(-4px, -3px, 0); } 66%{ -moz-transform:translate3d(3px, 5px, 0); } }
@-webkit-keyframes flying { 33%{ -webkit-transform:translate(-4px, -3px, 0); } 66%{ -webkit-transform:translate3d(3px, 5px, 0); } }
@keyframes flying { 33%{ transform:translate3d(-4px, -3px, 0); } 66%{ transform:translate3d(3px, 5px, 0); } }
*/
#ftoverview #ftMapContainer:after {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNjUiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}

/* Weather Widget */

#ftoverview #ftMapContainer #ftWeatherContainer {
	position: absolute;
	top: 20px;
	right: 212px;
  height: 57px;
	text-align: right;
	color: #FFF;
	padding: 8px 10px;
	background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .05);
	z-index: 8;
}

body.nobranding #ftoverview #ftMapContainer #ftWeatherContainer {
  right: 60px;
}

#ftWeatherData span {
  display: block;
  font-size: .95em;
  padding: 2px 0;
}

#ftWeatherData, #ftWeatherIcon {
  float: left;
}

#ftWeatherData {
  padding-right: 10px;
  margin-right: 10px;
  border-right: 1px solid #fff;
}

#ftWeatherIcon {
  width: 40px;
}

#ftWeatherIcon i {
  display: inline-block;
  vertical-align: top;
  font-size: 27px;
  line-height: 25px;
  padding: 7px 0 6px;
}

.ftNavCooperation {
  display: block;
  top: 20px;
  right: 60px;
  font-size: .75em;
  padding: 5px 10px;
  color: rgba(255, 255, 255, .7);
  text-align: left;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .05);
  height: 57px;
  width: 146px;
  z-index: 8;
}

#fthypervideo .ftNavCooperation {
  background: transparent;
  border: none;
}

.ftNavCooperation img {
  display: block;
  position: relative;
  margin-top: 7px;
  top: auto !important;
  left: auto !important;
  width: 130px !important;
  height: auto !important;
}

#ftoverview #ftMapContainer img {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	-webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#ftoverview #ftMapContainer img#ftMapBackground {
	/*filter: saturate(1) brightness(0.7) contrast(1.2) opacity(0.3) hue-rotate(180deg);*/
	object-fit: cover;
  left: -10px;
  width: calc(100% + 20px);
  top: -10px;
  height: calc(100% + 20px);
}

#ftoverview #ftMapContainer #ftMapCanvas {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
  z-index: 9;
}

#ftoverview #ftMapContainer #ftMapCanvas img#ftMap {
	top: 11.2%;
	left: 20%;
	width: 60.8%;
	height: auto;
	z-index: 1;

	opacity: 0;
	visibility: hidden;
	-webkit-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;
	-ms-transition: all 400ms ease-in-out;
	-o-transition: all 400ms ease-in-out;
	transition: all 400ms ease-in-out;
}

#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin {
	position: absolute;
	margin-left: -43px;
	margin-top: -43px;
	width: 86px;
	height: 86px;
	line-height: 50px;
	font-size: 2.5em;
	text-align: center;
	border-radius: 50%;
	background-color: transparent;
	transition-property: all;
	transition-duration: 300ms;
	transform-origin: center;
	transform: scale(0.8, 0.8);
	z-index: 1000;
	cursor: pointer;
}

#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin.pinOpen {
	z-index: 1010;
}

#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin:before {
  content: "";
  display: block;
  width: 60px;
  height: 20px;
  opacity: .5;
  position: absolute;
  bottom: -10px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+60&0.65+0,0+60 */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC42NSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvcmFkaWFsR3JhZGllbnQ+CiAgPHJlY3QgeD0iLTUwIiB5PSItNTAiIHdpZHRoPSIxMDEiIGhlaWdodD0iMTAxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
  background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 60%); /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 60%); /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 60%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}


#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin .fticon-silhouette {
	display: block;
	width: 86px;
	height: 86px;
	background-image: url(../graphics/FT-pin-girl-1.png);
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;
	-moz-animation: wobble 1s linear infinite;
	-moz-transform-origin:center bottom;
	-webkit-animation: wobble 1s linear infinite;
	-webkit-transform-origin:center bottom;
	animation: wobble 1s linear infinite;
	transform-origin:center bottom;
}

#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin:nth-child(1) .fticon-silhouette {
	animation-delay: .2s
}

#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin:nth-child(2) .fticon-silhouette {
	animation-delay: .5s
}

#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin:nth-child(3) .fticon-silhouette {
	animation-delay: .8s
}

#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin:nth-child(4) .fticon-silhouette {
	animation-delay: 1s
}

#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin:nth-child(5) .fticon-silhouette {
	animation-delay: 1.2s
}

#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin:nth-child(6) .fticon-silhouette {
  animation-delay: 1.4s
}

#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin:nth-child(7) .fticon-silhouette {
  animation-delay: 1.6s
}

#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin:nth-child(8) .fticon-silhouette {
  animation-delay: 1.8s
}

@-moz-keyframes wobble { 33%{ -moz-transform:rotate(3deg); } 66%{-moz-transform:rotate(-3deg); } }
@-webkit-keyframes wobble { 33%{ -webkit-transform:rotate(3deg); } 66%{-webkit-transform:rotate(-3deg); } }
@keyframes wobble { 33%{ transform:rotate(3deg); } 66%{transform:rotate(-3deg); } }

#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin .fticon-silhouette::before {
	display: none;
}

/*
#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin .fticon-photo-booth {
	display: block;
  width: 22px;
  height: 40px;
  background: url(../graphics/FT-pin-phone-booth.svg) no-repeat;
  margin: 10px 17px 0;
}
*/

#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin:hover::before,
#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin.active::before,
#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin:visited::before {
  content: "";
  position: absolute;
  -webkit-animation: pulse-one 3s infinite; /* Chrome, Safari, Opera */
  animation: pulse-one 3s infinite;
  background: rgba(254, 197, 112, .5);
  border-radius: 50%;
  height: 0em;
  width: 0em;
  top: 50%;
  left: 50%;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  z-index: -1;
}

#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin:hover::after,
#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin.active::after,
#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin:visited::after {
  content: "";
  position: absolute;
  -webkit-animation: pulse-two 3s infinite;
  animation: pulse-two 3s infinite;
  background: rgba(254, 197, 112, .25);
  border-radius: 50%;
  height: 0em;
  width: 0em;
  top: 50%;
  left: 50%;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  z-index: -1;
}

body.overlayHints .overlayElement.active .resourceDetail[data-type="image"]::before {
  content: "";
  position: absolute;
  -webkit-animation: pulse-bigger-one 3s infinite; /* Chrome, Safari, Opera */
  animation: pulse-bigger-one 3s infinite;
  background: rgba(254, 197, 112, .5);
  border-radius: 50%;
  pointer-events: none;
  height: 0em;
  width: 0em;
  top: 90%;
  left: 50%;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  z-index: 2;
}

body.overlayHints .overlayElement.active .resourceDetail[data-type="image"]::after {
  content: "";
  position: absolute;
  -webkit-animation: pulse-bigger-two 3s infinite;
  animation: pulse-bigger-two 3s infinite;
  background: rgba(254, 197, 112, .25);
  border-radius: 50%;
  pointer-events: none;
  height: 0em;
  width: 0em;
  top: 90%;
  left: 50%;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  z-index: 2;
}

body.overlayHints .overlayElement.active .resourceDetail[data-type="image"] .resourceTooltip {
  display: block;
}

body.overlayHints .overlayElement.active .resourceDetail[data-type="image"] .resourceTooltip::after {
  position: absolute;
  content: 'In weitere Story springen →';
  background: rgba(0,0,0,.5);
  pointer-events: none;
  padding: 15px;
  line-height: 1.25em;
  border-radius: 0;
  font-family: 'Rubik', helvetica, sans-serif;
  font-size: 1.15em;
  font-weight: 600;
  letter-spacing: 1px;
  color: #fec570;
  text-transform: uppercase;
  border: 3px solid #fec570;
  top: 70%;
  left: 50%;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  white-space: nowrap;
}

html[lang="en"] body.overlayHints .overlayElement.active .resourceDetail[data-type="image"] .resourceTooltip::after {
  content: 'Jump to next story →';
}

html[lang="pl"] body.overlayHints .overlayElement.active .resourceDetail[data-type="image"] .resourceTooltip::after {
  content: 'Do kolejnej historii →';
}


@-moz-keyframes pulse-one {
  0% {
    opacity: 0.2;
    height: .5em;
    width: .5em;
  }
  50% {
    opacity: 0.9;
    height: 1em;
    width: 1em;
  }
  100% {
    opacity: 0.2;
    height: .5em;
    width: .5em;
  }
}
@-webkit-keyframes pulse-one {
  0% {
    opacity: 0.2;
    height: .5em;
    width: .5em;
  }
  50% {
    opacity: 0.9;
    height: 1em;
    width: 1em;
  }
  100% {
    opacity: 0.2;
    height: .5em;
    width: .5em;
  }
}
@-o-keyframes pulse-one {
  0% {
    opacity: 0.2;
    height: .5em;
    width: .5em;
  }
  50% {
    opacity: 0.9;
    height: 1em;
    width: 1em;
  }
  100% {
    opacity: 0.2;
    height: .5em;
    width: .5em;
  }
}
@keyframes pulse-one {
  0% {
    opacity: 0.2;
    height: .5em;
    width: .5em;
  }
  50% {
    opacity: 0.9;
    height: 1em;
    width: 1em;
  }
  100% {
    opacity: 0.2;
    height: .5em;
    width: .5em;
  }
}


@-moz-keyframes pulse-two {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
  }
  50% {
    opacity: 0.9;
    height: 2em;
    width: 2em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
  }
}
@-webkit-keyframes pulse-two {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
  }
  50% {
    opacity: 0.9;
    height: 2em;
    width: 2em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
  }
}
@-o-keyframes pulse-two {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
  }
  50% {
    opacity: 0.9;
    height: 2em;
    width: 2em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
  }
}
@keyframes pulse-two {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
  }
  50% {
    opacity: 0.9;
    height: 2em;
    width: 2em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
  }
}

@-moz-keyframes pulse-bigger-one {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
  }
  50% {
    opacity: 0.9;
    height: 2em;
    width: 2em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
  }
}
@-webkit-keyframes pulse-bigger-one {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
  }
  50% {
    opacity: 0.9;
    height: 2em;
    width: 2em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
  }
}
@-o-keyframes pulse-bigger-one {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
  }
  50% {
    opacity: 0.9;
    height: 2em;
    width: 2em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
  }
}
@keyframes pulse-bigger-one {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
  }
  50% {
    opacity: 0.9;
    height: 2em;
    width: 2em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
  }
}


@-moz-keyframes pulse-bigger-two {
  0% {
    opacity: 0.2;
    height: 2em;
    width: 2em;
  }
  50% {
    opacity: 0.9;
    height: 4em;
    width: 4em;
  }
  100% {
    opacity: 0.2;
    height: 2em;
    width: 2em;
  }
}
@-webkit-keyframes pulse-bigger-two {
  0% {
    opacity: 0.2;
    height: 2em;
    width: 2em;
  }
  50% {
    opacity: 0.9;
    height: 4em;
    width: 4em;
  }
  100% {
    opacity: 0.2;
    height: 2em;
    width: 2em;
  }
}
@-o-keyframes pulse-bigger-two {
  0% {
    opacity: 0.2;
    height: 2em;
    width: 2em;
  }
  50% {
    opacity: 0.9;
    height: 4em;
    width: 4em;
  }
  100% {
    opacity: 0.2;
    height: 2em;
    width: 2em;
  }
}
@keyframes pulse-bigger-two {
  0% {
    opacity: 0.2;
    height: 2em;
    width: 2em;
  }
  50% {
    opacity: 0.9;
    height: 4em;
    width: 4em;
  }
  100% {
    opacity: 0.2;
    height: 2em;
    width: 2em;
  }
}


#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin img {
	width: 102%;
	height: 102%;
	margin-top: -1%;
	margin-left: -1%;
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
}

#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin .ftMapPinDescription {
	position: absolute;
	top: -100px;
	left: -100px;
	width: 290px;
	height: 290px;
	border-radius: 100%;
	background: rgba(5,3,5,.75);
	color: #FFF;
	opacity: 1;
	transition-property: all;
	transition-duration: 300ms;
	transform-origin: center;
	transform: scale(0.5, 0.5);
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
	-webkit-box-shadow: 0 0 15px 5px rgba(0,0,0,.15);
	box-shadow: 0 0 15px 5px rgba(0,0,0,.15);
	opacity: 0;
	pointer-events: none;
}

#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin .ftMapPinDescription.is-visible {
  opacity: 1;
  transform: scale(.8, .8);
  z-index: 2;
  pointer-events: all;
}

#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin .ftMapPinDescription::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .15);
  border-radius: 100%;
}

#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin .ftMapPinDescription .ftMapPinDescriptionImg {
  position: absolute;
  width: 290px;
  height: 290px;
  border-radius: 100%;
  overflow: hidden;
  top: 0;
}


#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin .ftMapPinDescription .ftMapPinDescriptionContent {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 10;
}

#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin .ftMapPinDescription .ftMapPinDescriptionContent i {
  display: block;
  color: #fec570;
  opacity: 0;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;

}

#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin .ftMapPinDescriptionContent.is-visible i {
  opacity: 1;
}

#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin .ftMapPinDescription span {
  display: block;
  font-family: 'Rubik', helvetica, sans-serif;
  font-weight: 600;
  font-size: .55em;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.25em;
  text-shadow: 0 0 5px rgba(0, 0, 0, .15);
  
  position: absolute;
  bottom: -55px;
  background: rgba(12, 0, 12, .65);
  padding: 6px 10px;
  left: 50%;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin.ftLabelUp .ftMapPinDescription span {
  top: -55px;
  bottom: auto;
}

/* ZAUNGÄSTE Title -> top */
/*
#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin#ftMapPin1 .ftMapPinDescription span,
#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin#ftMapPin8 .ftMapPinDescription span,
#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin#ftMapPin10 .ftMapPinDescription span,
*/
#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin#ftMapPin13 .ftMapPinDescription span {
  position: absolute;
  top: -50px;
}

#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin.active .ftMapPinDescription {
	transform: scale(1, 1);
}

#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin .ftMapPinDescription h3 {
	margin: 0 0 10px 0;
	padding: 0;
}

#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin .ftMapPinDescription p {
	margin: 0;
	padding: 4px 10px 5px;
	font-size: 16px;
	line-height: 1.25em;
}

#ftoverview #ftMapContainer #ftMapCanvas .ftMapPin .ftMapPinDescription figure {
  position: relative;
  z-index: 10;
  border-radius: 50%;
}

.circle {
  fill: transparent !important;
}

.outer {
  fill: transparent !important;
  stroke: #fec570;
  stroke-width: 5;
  stroke-dasharray: 900;
  transition-property: stroke-dashoffset;
  transition-duration: 1s;
  /*transition: stroke-dashoffset 1s;*/
  -webkit-animation-play-state: running;

  /* firefox bug fix - won't rotate at 90deg angles */
  transform: rotate(-88deg) translateX(-290px);
 -moz-transform: rotate(-88deg) translateX(-290px);

}


/* Set the initial values for the animation */
.chart[data-percent='100'] .outer {
  stroke-dashoffset: 0;
  -webkit-animation: show100 2s;
  animation: show100 2s;
}

.chart svg {
  overflow: visible;
  border-radius: 50%;
}

.linkPointer {
  fill: #FFF;
  stroke: #fec570;
  stroke-width: 2px;
}

.pointer-group.active .linkPointer, .pointer-group-player.active .linkPointer {
  fill: #fec570;
}

/* END set initial animation values */

/* Keyframes for the initial animation */
@-webkit-keyframes show100 {
  from {
    stroke-dashoffset: 880;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes show100 {
  from {
    stroke-dashoffset: 880;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes show75 {
  from {
    stroke-dashoffset: 880;
  }

  to {
    stroke-dashoffset: 134;
  }
}

@keyframes show75 {
  from {
    stroke-dashoffset: 880;
  }

  to {
    stroke-dashoffset: 124;
  }
}

@-webkit-keyframes show50 {
  from {
    stroke-dashoffset: 880;
  }

  to {
    stroke-dashoffset: 267;
  }
}

@keyframes show50 {
  from {
    stroke-dashoffset: 880;
  }

  to {
    stroke-dashoffset: 267;
  }
}

@-webkit-keyframes show25 {
  from {
    stroke-dashoffset: 880;
  }

  to {
    stroke-dashoffset: 401;
  }
}

@keyframes show25 {
  from {
    stroke-dashoffset: 880;
  }

  to {
    stroke-dashoffset: 401;
  }
}
/* END Keyframes for the initial animation */


/* VIDEO (FRAMETRAIL) */

.ftLayer#fthypervideo {
	z-index: 1;
}

/* .ftLayer#fthypervideo .ftLogo {
	top: 10px;
	left: 10px;
	width: 82px;
	height: auto;
} */

.ftLayer#fthypervideo #VideoPlayer {
	position: absolute !important;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	border: none;
	outline: none;
	visibility: hidden;
	z-index: 0;
	font-family: 'Inconsolata', monospace;
	letter-spacing: -0.9px;
	background: #000;
}

.frametrail-body.editActive {
	width: calc(100% - 64px) !important;
}

.ftLayer#fthypervideo #VideoPlayer.active {
	visibility: visible;
	z-index: 3;
}

.ftLayer#fthypervideo #VideoPlayer h3 {
	font-size: 100%;
}

#VideoPlayer .mainContainer:not([data-edit-mode="overlays"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="annotations"]) .playerContainer .controls {
  background: transparent;
  height: 60px !important;
}

#VideoPlayer .mainContainer:not([data-edit-mode="overlays"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="annotations"]) .playerContainer .controls .leftControlPanel {
  position: absolute;
  left: 60px;
  right: 60px;
  bottom: 0;
  height: 60px;
}

/* Progress Bar */


#VideoPlayer .mainContainer:not([data-edit-mode="overlays"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="annotations"]) .playerContainer .playerProgress {
  top: auto;
  bottom: 30px;
  height: 1px;
  background: rgba(255, 255, 255, .6);
  z-index: 10;
  left: 120px;
  right: 120px;
  width: auto;
  display: none;
}

#VideoPlayer .mainContainer:not([data-edit-mode="overlays"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="annotations"]) .playerContainer .playerProgress .ui-slider-range {
  background: #ffc669;
}

#VideoPlayer .mainContainer:not([data-edit-mode="overlays"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="annotations"]) .playerContainer .playerProgress .ui-slider-handle::before {
  opacity: 0;
}

#VideoPlayer .mainContainer:not([data-edit-mode="overlays"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="annotations"]) .playerContainer .playerProgress .ui-slider-handle::after {
    content: "";
    position: absolute;
    left: -5.5px;
    width: 11px;
    height: 11px;
    border-radius: 100%;
    top: -5.5px;
    background: #ffc669;
    z-index: 1;
    cursor: pointer;
}

#VideoPlayer .mainContainer:not([data-edit-mode="overlays"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="annotations"]) .playerContainer .playerProgress .ui-slider-handle {
  opacity: 1;
}

/* Player */

#VideoPlayer .mainContainer:not([data-edit-mode="overlays"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="annotations"]) .playButton.playerControl,
#VideoPlayer .mainContainer:not([data-edit-mode="overlays"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="annotations"]) .timeDisplay.playerControl {
  position: absolute !important;
}

#VideoPlayer .mainContainer:not([data-edit-mode="overlays"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="annotations"]) .playButton.playerControl {
  bottom: 21px;
  left: 20px;
  background: url('../../_data/resources/1_1556104792_icon-play.svg') no-repeat center center;
  font-size: 0;
}

#VideoPlayer .mainContainer:not([data-edit-mode="overlays"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="annotations"]) .playButton.playerControl span {
  display: none;
}

#VideoPlayer .mainContainer:not([data-edit-mode="overlays"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="annotations"]) .playButton.playerControl.playing {
  background: url('../../_data/resources/1_1556104813_icon-pause.svg') no-repeat center center;
}

#VideoPlayer .mainContainer:not([data-edit-mode="overlays"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="annotations"]) .timeDisplay.playerControl {
  bottom: 11px;
  right: 5px;
}

.titlebar .titlebarTitle {
  top: 15px;
  letter-spacing: 2px !important;
}

/* ==========================================================================
ABOUT / CREDITS / IMPRINT
========================================================================== */

#fthyperInfo {
  background: #fec570;
  color: #111;
  z-index: 4;
  opacity: 0;
  visibility: hidden;

  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -ms-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}

#fthyperInfo.is-open {
  opacity: 1;
  visibility: visible;
}

#fthyperInfo.is-open .ftLogo,
#fthyperInfo.is-open .fticon-about {
  text-shadow: none;
}

#fthyperInfo .ftLogo {
  color: #111;
}

#fthyperInfo .ftNavCooperation img {
  margin-top: 14px;
}

#fthyperInfo .ftLayerContent {
  transition-property: none;
  transition-duration: 0;
  transform-origin: none;
  transform: none;
  overflow-y: scroll !important;
}

#fthyperInfo .section-footer {
  display: block;
  clear: both;
  padding-top: 1.5vw;
}

#fthyperInfo h6 {
  border-bottom: 1px solid #fff;
  display: inline-block;
  margin: 1.5em 0 .5em;
  font-weight: 900;
}

.ftCloseInfo {
  position: fixed;
  top: 30px;
  right: 30px;
  color: #fff;
  font-size: 1.25em;
  cursor: pointer;
  z-index: 10;
}
.layoutArea[data-area="areaRight"] .layoutAreaToggleCloseButton {
  font-size: 1.25em;
}


#fthyperInfo .ftNavCooperation {
  background: rgba(255, 255, 255, 0);
  top: 10px;
  right: 80px;
}

.divider {
    width: 100%;
    padding: 10px 0;
}

/* Navigation */

#fthyperInfo .ftInfoNavigation {
  position: fixed;
  background: #fff;
  width: 20%;
  top: 0;
  left: 0;
  bottom: 0;
}

#fthyperInfo .ftInfoNavigation nav ul {
  position: absolute;
  left: 30px;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#fthyperInfo .ftInfoNavigation li {
  display: block;
  position: relative;
  font-family: 'Rubik', helvetica, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  margin: 2.5vh 0;
}

#fthyperInfo .ftInfoNavigation li a {
  cursor: pointer;
}

#fthyperInfo .ftInfoNavigation li a:before {
 opacity: 0;
  -webkit-transition: opacity 200ms ease-in-out;
  -moz-transition: opacity 200ms ease-in-out;
  -ms-transition: opacity 200ms ease-in-out;
  -o-transition: opacity 200ms ease-in-out;
  transition: opacity 200ms ease-in-out;
}

#fthyperInfo .ftInfoNavigation li a:hover:before,
#fthyperInfo .ftInfoNavigation li .is-active:before {
 opacity: 1;
}

/* content */

#fthyperInfo .ftInfoContainer {
  margin-left: 20%;
}

.ftInfoSection {
  position: relative;
  line-height: 1.45em;
}

.ftInfoSection.full-height {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ftInfoSection.padding-top {
  padding-top: 10vh;
  padding-bottom: 10vh;
}

.ftInfoContent {
  padding: 0 10%;
  width: 100%;
}

.ftInfoContent h5 {
  font-family: 'Rubik', helvetica, sans-serif;
  font-weight: 600;
  margin-bottom: 1em;
  line-height: 1em;
}

.ftInfoContent p, .areaRightContainer .customhtmlContainer {
  font-size: .85em;
  line-height: 1.45em;
  margin: 1em 0;
}

/* Next btn */

.ftNextSection {
  position: absolute;
  left: 10%;
  bottom: 30px;
  font-size: 1.25em;
  color: #fff;
}

.ftNextSection:hover {
  opacity: .75;
}

/* About */

#ueber-uns .ftHero {
  font-size: 1em;
  line-height: 1.65em;
}

/* Team */

#team .ftTeam-member {
  float: left;
  width: 50%;
  font-size: .85em;
  line-height: 1.25em;
  margin: 2.5vw 0;
}

#team .ftTeam-member--portrait {
  float: left;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  overflow: hidden;
  margin-right: 15px;
}

#team .ftTeam-member--portrait img {
  width: 100%;
  height: auto;
}

#team .ftTeam-member--details {
  float: left;
  margin-top: 10px;
}

#team .ftTeam-member h3 {
  font-family: 'Rubik', helvetica, sans-serif;
  font-weight: 600;
  font-size: .85em;
  text-transform: uppercase;

}

#team .ftTeam-member h4 {
  font-weight: 700;

}

/* Partners */

#abspann .parterns-list {
  margin-top: 0;
}

#abspann .partners--row,
#abspann .partners--row:last-child {
  border: none !important;
}

#abspann li {
  float: left;
  width: 20%;
  position: relative;
}


#abspann li:after {
  content: "";
  display: block;
  padding-bottom: 70%;
}

#abspann .partner-logo {
  position: absolute;
  width: 70%;
  height: 70%;
  top: 15%;
  left: 15%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#abspann .partner-logo img {
  max-width: 100%;
  height: auto;
}

/* Resourcen */

#resourcen {
  height: auto;
}

#resourcen b {
  font-weight: 900;
}

#resourcen a, section-footer a {
  border-bottom: 1px solid;
}

.ftInfoGithub {
  margin-top: 5vh;
}

#resourcen .ftInfoGithub .ftLogoGithub {
  border-bottom: none;
}

#resourcen .ftInfoGithub a {
  color: #fff;
  opacity: .75;
}

.ftInfoGithub {
  margin-top: 5vh;
}

.ftInfoGithub a {
  color: #fff;
  opacity: .75;
}

.ftInfoGithub a:hover {
  opacity: .75;
}

/* Imprint */

#impressum .ftImpressum-intro {
  font-family: 'Rubik', helvetica, sans-serif;
  font-weight: 600;
  font-size: 1.15em;
}

/* Datenschutz */

#datenschutz p:last-of-type {
  margin-bottom: 10vh;
}

/* Night/Day Mode */

.switch-container {
  position: absolute;
  bottom: 24px;
  left: 80px;
  height: 16px;
  margin: auto;
  text-align: center;
  z-index: 10;
}

/** Switch
 -------------------------------------*/

.switch input {
  position: absolute;
  opacity: 0;
}

/**
 * 1. Adjust this to size
 */

.switch {
  display: inline-block;
  font-size: 16px; /* 1 */
  height: 16px;
  width: 32px;
  background: none;
  background: rgba(255,255,255,.25);
  border-radius: 1em;
  cursor: pointer;
}

.switch div {
  height: 16px;
  width: 16px;
  border-radius: 1em;
  background: #FFF;
  box-shadow: 0 0.1em 0.3em rgba(0,0,0,0.3);
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  transition: all 300ms;

}

.switch input:checked + div {
 -webkit-transform: translate3d(100%, 0, 0);
 -moz-transform: translate3d(100%, 0, 0);
 transform: translate3d(100%, 0, 0);
}

.fticon-night {
  font-size: .85em;
}

/* Night */

.night .fticon-silhouette {
  color: #fec570;
}

.night #ftMapContainer::before {
  opacity: 1;
  visibility: visible;
}

.night #ftoverview #ftMapContainer #ftMapCanvas img#ftMap {
  opacity: .25;
  visibility: visible;
}

.night #ftoverview #ftMapContainer #ftMapCanvas .ftMapPin .ftMapPinDescription {
  background: rgba(255, 255, 255, .75);
}

.night #ftoverview #ftMapContainer #ftMapCanvas .ftMapPin .ftMapPinDescription p {
	color: #222;
}

/*
.night #ftoverview #ftMapContainer #ftMapCanvas .ftMapPin .ftMapPinDescription::after {
  background: url('../../_data/resources/1_1556105451_icon-arrow-dark.svg') no-repeat right center;
}
*/


/* Mobile Turn */

#ftMobile-turn {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,1);
  color: #fff;
  z-index: 100;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
}

#ftMobile-turn span {
  display: block;
  font-size: 6vw;
  line-height: 1.15em;
  margin-bottom: 1em;
}

#ftMobile-turn img {
  display: block;
  margin: 0 auto;
}

/* Crowfunding */

.ftInfoContent p.startnext-crowfunding {
  display: inline-block;
  background: rgba(255,255,255,.15);
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,.15);
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -ms-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}

.startnext-crowfunding img,
.startnext-crowfunding b {
  display: inline-block;
  vertical-align: middle;
}

.startnext-crowfunding b {
  font-weight: bold;
  font-size: 1.05em;
}

.startnext-crowfunding img {
  margin-right: 10px;
}

.ftInfoContent p.startnext-crowfunding:hover {
  background: rgba(255,255,255,.25);
}

.startnext-crowfunding small {
  font-size: .75em;
}


/*******************
* Media Queries
*******************/

@media (min-width: 2201px) {

  .ftLayer .ftLogo {
    top: 30px;
    left: 30px;
    font-size: 3.25em;
  }

  #ftoverview #ftMapContainer #ftWeatherContainer {
    top: 30px;
    right: 242px;
  }

  body.nobranding #ftoverview #ftMapContainer #ftWeatherContainer {
    right: 90px;
  }

  .ftNavUp .tooltip {
    top: 18px;
    right: 70px;
  }

  .ftNavCooperation {
    top: 30px;
    right: 90px;
  }

  .ftLayer#ftintro .ftNavCooperation {
    right: 30px;
  }

  .ftLayer .ftLayerContent .ftNavigation {
    width: 80px;
  }

  .ftNavIconContainer {
    width: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 2em;
  }

  .ftScreen {
    top: 100px;
  }

  .ftNavShare {
    top: 180px;
  }

  .ftNavShare.ftNavIconContainer {
    font-size: 2.75em !important;
  }

  .ftSocialNav {
    top: 55px;
    right: 18px;
  }

  .ftSocialNav li {
    margin-top: 20px;
  }

  .ftNavIconContainer {
    font-size: 2em !important;
  }

  .ftNavIconContainer.ftAboutIconContainer {
    font-size: 1.35em !important;
  }

  .ftNavVision {
    bottom: 24px;
    right: 25px;
  }

  .ftNavVision span {
    font-size: 1.15em;
  }

  .ftNavVision img {
    width: 22px !important;
    height: 22px !important;
  }

  .switch-container {
    left: 90px;
    bottom: 34px;
  }

  .ftCloseInfo {
    font-size: 1.75em;
  }
  .layoutArea[data-area="areaRight"] .layoutAreaToggleCloseButton {
    font-size: 1.75em;
  }

  #ftoverview #ftMapContainer #ftMapCanvas .ftMapPin .ftMapPinDescription span {
    font-size: .65em;
  }

  #ueber-uns .ftHero {
    max-width: 45vw;
    font-size: 1.25vw;
  }

  #fthyperInfo .ftInfoNavigation li {
    font-size: 1vw;
  }

  #team .ftTeam-member h3 {
    font-size: 1em;
  }

  #team .ftTeam-member h4, #team .ftTeam-member a {
    font-size: 1.15em;
  }

  .ftInfoContent p, .areaRightContainer .customhtmlContainer {
    font-size: 1.25em;
  }

  #abspann li {
    width: 16.6666%;
  }
}

@media (min-width: 1500px) and (max-width: 2200px) {

  .ftLayer .ftLogo {
    top: 30px;
    left: 30px;
    font-size: 3em;
  }

  #ftoverview #ftMapContainer #ftWeatherContainer {
    top: 30px;
    right: 242px;
  }

  body.nobranding #ftoverview #ftMapContainer #ftWeatherContainer {
    right: 90px;
  }

  /*
  .ftNavVisitors {
    top: 30px;
    right: 150px;
  }
  */

  .ftNavUp .tooltip {
    top: 18px;
    right: 70px;
  }

  .ftNavCooperation {
    top: 30px;
    right: 90px;
  }

  .ftLayer#ftintro .ftNavCooperation {
    right: 30px;
  }

  .ftLayer .ftLayerContent .ftNavigation {
    width: 80px;
  }

  .ftNavIconContainer {
    width: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 1.75em;
  }

  .ftScreen {
    top: 100px;
  }

  .ftNavShare {
    top: 180px;
  }

  .ftNavShare.ftNavIconContainer {
    font-size: 2.25em !important;
  }

  .ftSocialNav {
    top: 55px;
    right: 22px;
  }

  .ftNavIconContainer {
    font-size: 1.5em !important;
  }

  .ftNavVision {
    bottom: 30px;
    right: 30px;
  }

  .ftNavVision img {
    width: 160px !important;
  }

  .ftNavVision span {
    font-size: 1.15em;
  }

  .ftNavVision img {
    /* width: 22px !important; */
  }

  .switch-container {
    left: 90px;
    bottom: 34px;
  }

  .ftCloseInfo {
    font-size: 1.75em;
  }
  .layoutArea[data-area="areaRight"] .layoutAreaToggleCloseButton {
    font-size: 1.75em;
  }

  #ftoverview #ftMapContainer #ftMapCanvas .ftMapPin .ftMapPinDescription span {
    font-size: .65em;
  }

  .ftInfoContent p, .areaRightContainer .customhtmlContainer {
    font-size: 1.15em;
  }

  #team .ftTeam-member h3 {
    font-size: 1em;
  }

  #team .ftTeam-member h4, #team .ftTeam-member a {
    font-size: 1.15em;
  }

  #abspann li {
    width: 16.6666%;
  }
}

@media (min-width: 1010px) and (max-width: 1499px) {
	.ftInfoContent p, .areaRightContainer .customhtmlContainer {
	  font-size: .95em;
	}
  .areaRightContainer .customhtmlContainer table {
    float: left;
    width: 47%;
    margin-right: 2%;
  }
  .areaRightContainer .customhtmlContainer hr {
    display: none;
  }
}

@media (min-width: 650px) and (max-width: 1010px) {

  /* About */

  #fthyperInfo .ftInfoNavigation {
    width: 25%;
  }

  #fthyperInfo .ftInfoContainer {
    margin-left: 25%;
  }

  .areaRightContainer .customhtmlContainer table {
    float: left;
    width: 47%;
    margin-right: 2%;
  }
  .areaRightContainer .customhtmlContainer hr {
    display: none;
  }

  #abspann li {
    width: 33.3333%;
  }
}

@media (max-width: 820px) {

  html, body, .ftLayer .ftLayerContent, .ftLayer, .ftLayer .ftLayerContent {
    width: 100vw;
    height: 100vh;
    overflow: hidden !important;
    margin: 0;
    padding: 0;
  }

  #ftoverview #ftMapContainer img#ftMapBackground,
  #ftoverview #ftMapContainer #ftMapCanvas {
    overflow-x: hidden !important;
  }

  .ftLayer#ftintro .ftintroLogos .ftintroLogo {
    width: 150px;
    font-size: 40px;
  }

  .ftLayer#ftintro .ftintroLogos.LogosBottom .ftintroLogo {
    width: 110px;
  }

  .ftLayer#ftintro .ftintroLogos.LogosTop {
    top: 30px;
    left: 30px;
    margin-left: 0;
  }

  .ftLayer#ftintro .ftintroLogos.LogosMiddle {
    top: 30px;
    font-size: 1.25em;
  }

  .ftLayer#ftintro .ftintroLogos.LogosBottom {
    top: 15px;
    bottom: auto;
    right: 30px;
    left: auto;
    margin-left: 0;
  }

  #ftStartButton, .ftLayer#ftintro #ftTagline {
    top: 60%;
  }

  .ftLayer#ftintro #ftTagline {
    margin-left: 140px;
    font-size: 20px;
  }

  .ftLayer#ftintro #ftSkipIntro {
    font-size: .75em;
    bottom: 30px;
    right: 30px;
  }

  #ftoverview #ftMapContainer #ftMapCanvas {
    width: 100vw;
  }

  /* Alternate Pin Positions for Mobile Visibility */
  #ftoverview #ftMapContainer #ftMapCanvas .ftMapPin#ftMapPin1 {
    top: 68% !important;
    left: 44% !important;
  }
  #ftoverview #ftMapContainer #ftMapCanvas .ftMapPin#ftMapPin2 {
    top: 49% !important;
  }
  #ftoverview #ftMapContainer #ftMapCanvas .ftMapPin#ftMapPin3 {
    top: 32% !important;
    left: 23% !important;
  }
  #ftoverview #ftMapContainer #ftMapCanvas .ftMapPin#ftMapPin4 {
    top: 33% !important;
  }
  #ftoverview #ftMapContainer #ftMapCanvas .ftMapPin#ftMapPin5 {
    top: 29% !important;
  }
  #ftoverview #ftMapContainer #ftMapCanvas .ftMapPin#ftMapPin6 {
    top: 52% !important;
  }
  #ftoverview #ftMapContainer #ftMapCanvas .ftMapPin#ftMapPin7 {
    top: 51% !important;
  }
  #ftoverview #ftMapContainer #ftMapCanvas .ftMapPin#ftMapPin8 {
    top: 69% !important;
    left: 56% !important;
  }
  #ftoverview #ftMapContainer #ftMapCanvas .ftMapPin#ftMapPin9 {
    top: 41% !important;
    right: 19% !important;
  }
  #ftoverview #ftMapContainer #ftMapCanvas .ftMapPin#ftMapPin10 {
    top: 67% !important;
  }
  #ftoverview #ftMapContainer #ftMapCanvas .ftMapPin#ftMapPin11 {
    top: 56% !important;
  }
  #ftoverview #ftMapContainer #ftMapCanvas .ftMapPin#ftMapPin12 {
    top: 27% !important;
    left: 47% !important;
  }
  #ftoverview #ftMapContainer #ftMapCanvas .ftMapPin#ftMapPin13 {
    top: 70% !important;
  }
  #ftoverview #ftMapContainer #ftMapCanvas .ftMapPin#ftMapPin14 {
    top: 41% !important;
    right: 31% !important;
  }

  /* Alternate Size of Open Pins for Mobile Visibility */
  #ftoverview #ftMapContainer #ftMapCanvas .ftMapPin .ftMapPinDescription {
    top: -80px;
    left: -80px;
    width: 260px;
    height: 260px;
  }
  #ftoverview #ftMapContainer #ftMapCanvas .ftMapPin .ftMapPinDescription .ftMapPinDescriptionImg {
    width: 260px;
    height: 260px;
  }
  #ftoverview #ftMapContainer #ftMapCanvas .ftMapPin .ftMapPinDescription .chart {
    height: 260px;
  }
  #ftoverview #ftMapContainer #ftMapCanvas .ftMapPin .ftMapPinDescription svg {
    -moz-transform: scale(0.9);
    -moz-transform-origin: top left;
    -webkit-transform: scale(0.9);
    -webkit-transform-origin: top left;
    transform: scale(0.9);
    transform-origin: top left;
  }

  #ftoverview #ftMapContainer #ftMapCanvas .ftMapPin .fticon-silhouette {
    width: 72px;
    height: 72px;
  }

  .ftLayer .ftLogo {
    top: 10px;
    left: 12px;
    font-size: 2em;
  }

  [class^="fticon-"], [class*=" fticon-"] {
    font-size: 80%;
  }

  #ftPointer {
    display: none !important;
  }

  #fthyperInfo .ftInfoNavigation {
    width: 100%;
    height: 50px;
    z-index: 1;
    background: rgba(255,255,255,0);
  }

  .ftCloseInfo {
    top: 15px;
    right: 15px;
  }

  .ftNavIconContainer {
    width: 40px;
    height: 40px;
    line-height: 40px;
  }

  .ftLayer {
    width: 100vw;
    height: 100vh;
  }

  .ftSound {
    top: 0;
    right: 0;
  }

  .ftScreen {
    top: 40px;
    right: 0;
  }

  .ftNavItems {
    width: 40px;
    right: 0;
  }

  .ftNavShare {
    top: 80px;
    right: 0;
  }

  .ftSocialNav {
    width: 65px;
    top: 6px;
    right: 30px;
  }

  .ftSocialNav li {
    float: left;
    margin-top: 0;
    margin-right: 10px;
  }

  .ftNavVision span {
    font-size: .9em;
  }

  .ftNavVision {
    bottom: 10px;
    right: 15px;
  }

  .ftNavVision img {
    width: 110px !important;
  }

  .tooltip {
    font-size: .85em;
    width: 255px;
    top: -80px;
  }

  .ftNavVision .tooltip {
    top: auto !important;
    width: 311px;
  }

  .tooltip a {
    display: inline;
  }

  .ftNavUp .tooltip {
    top: 0px;
    right: 40px;
  }

  .switch-container {
    left: 50px;
    bottom: 12px;
  }

  #ftoverview #ftMapContainer #ftWeatherContainer {
    font-size: .75em;
    top: 5px;
    right: 155px;
    height: 50px;
  }

  body.nobranding #ftoverview #ftMapContainer #ftWeatherContainer {
    right: 40px;
  }

  .overlayElement .resourceDetail[data-type="text"] *  {
    font-size: 16px !important;
  }

  #ftIntroCaptionsContainer .ftIntroCaption {
    font-size: 24px !important;
  }

  #ftWeatherIcon {
    width: 20px;
  }

  #ftWeatherIcon i {
    font-size: 20px;
    line-height: 17px;
  }

  .ftNavCooperation {
    top: 5px;
    right: 40px;
    height: 50px;
  }

  .ftNavCooperation {
    width: 112px;
  }

  .ftNavCooperation img {
    width: 90px !important;
    margin-top: 9px;
  }

  .ftLayer#ftintro .ftNavCooperation {
    right: 5px;
  }

  #fthyperInfo .ftNavCooperation {
    right: 50px;
  }

  #fthyperInfo .ftNavCooperation img {
    margin-top: 0;
  }

  #fthyperInfo .ftInfoNavigation ul {
    display: none;
  }

  #fthyperInfo .ftInfoNavigation li {
    display: inline-block;
    font-size: .75em;
    margin: 0;
  }

  .ftInfoSection {
    height: auto;
  }

  .ftInfoSection.padding-top {
    padding-top: 0;
  }

  .ftInfoSection.full-height {
    display: block;
    height: auto;
  }

  .ftInfoContent {
    padding: 5vh 5%;
    width: 100%;
    border-bottom: 1px solid #fff;
  }

  #fthyperInfo .ftInfoContainer {
    margin-left: 0;
  }

  #ueber-uns .ftHero {
    margin-top: 60px;
  }

  #ueber-uns .ftHero p {
    font-size: 14px;
  }

  #team .ftTeam-member {
    width: 70%;
    margin: 2.5vh 0 2.5vh 15%;
  }

  .ftInfoContent p, .areaRightContainer .customhtmlContainer {
    font-size: 14px;
  }

  .areaRightContainer .customhtmlContainer table {
    float: left;
    width: 47%;
    margin-right: 2%;
  }
  .areaRightContainer .customhtmlContainer hr {
    display: none;
  }

  #abspann li {
    width: 25%;
  }

  .ftCloseInfo {
    display: block;
  }

  .ftHiddenMobile {
    display: none;
  }

  .ftCloseInfo {
    color: #000;
  }

  .titlebar .titlebarTitle {
    font-size: 14px !important;
    top: 0;
  }
}

@media screen and (max-width: 480px) {

  #ftMobile-turn {
    opacity: 1;
    visibility: visible;
  }

  #fthyperInfo .ftInfoNavigation {
    height: 52px;
  }

	.ftLayer .ftLogo {
    top: 10px;
    left: 12px;
    font-size: 2em;
  }
  .ftCloseInfo {
    color: #000;
    font-size: 1em;
    top: 17px;
    right: 12px;
  }
  .layoutArea[data-area="areaRight"] .layoutAreaToggleCloseButton {
    font-size: 1em;
  }

  .ftNavShare {
    top: 80px;
  }

  .ftNavVision span {
    font-size: .9em;
  }

  .ftNavVision img {
    width: 17px !important;
    height: 17px !important;
  }

  #ueber-uns .ftHero {
    margin-top: 52px;
  }

  #team .ftTeam-member {
    text-align: center;
    margin: 2.5vh 0;
  }
  #team .ftTeam-member--portrait, #team .ftTeam-member--details {
    float: none;
    display: block;
    margin: 0 auto 1vh;
  }

  #abspann li {
    width: 50%;
  }



}

.ftNavVision #ftPhone {
  color: #fff;
  border: 2px solid #fff;
  padding: 4px 8px;
  display: inline-block;
  margin-top: 10px;
}

@media (max-height: 321px) {
  .ftLayer#ftintro #ftTagline {
    transform: translateY(-50%) scale(0.65);
    margin-left: 92px;
  }
  .ftLayer#ftintro .ftintroLogos {
    transform: scale(0.8);
    transform-origin: center
  }
  .ftLayer#ftintro .ftintroLogos.LogosTop {
    margin-top: -5px;
  }
  #ftStartButton {
    transform: scale(0.8);
    margin-left: -76px;
  }
}

.fullscreen-no .linkPointer {
  display: none !important;
}
.fullscreen-no circle.progress {
  display: none !important;
}
.fullscreen-no circle.progress-move {
  display: none !important;
}