body, html {
	margin: 0;
	padding: 0;
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}

body {
	background: black;
}

:root {
  --yes-color: #1b8200; /* original #74cc68   tria #21a700 nice 06D6A0*/
  --no-color: #87001c; /* original #f04a00  tria a70021 nice 9C3848*/
}

/*font-family:'Avenir LT W01_95 Black1475556';*/


body {
	/*font-family:'Avenir LT W01_35 Light1475496';*/
	font-family: 'Exo 2', sans-serif;
	font-weight: 300;
	color: #818e9b;
}

h1, h2, h3, h4 {
	/*font-family:'Avenir LT W01_45 Book1475508';*/
	font-weight: 700;
}

video {
	width: 100%;
	height: auto;
}

#wrapper {
	width: 768px;
	/*/height: 1024px;*/
	height: 954px;
	background-color: black;
	margin: auto;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	overflow: hidden;
}


/*
#loader {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: black;
	background-image: url(graphics/bg.png);
	background-size: 768px 1024px;
	z-index: 99999;
	transition: 4s;
	opacity: 1;
	visibility: hidden;
	pointer-events: none;
}

#loader.active {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
}
*/

/* INTRODUCTION */


#intro {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: black;
	background-image: url(graphics/new_bg.png?v=3);
	background-size: 768px 1024px;
	z-index: 100;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: 1.5s;
}

#intro.active {
	opacity: 1;
	pointer-events: all;
	visibility: visible;
}

#begin {
	position: absolute;
	top: 200px;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	color: black;
	width: 200px;
	height: 200px;
	border-radius: 200px;
	background-color: white;
	background-image: url(svg/touch2.svg);
	background-repeat: no-repeat;
	background-size: 160px auto;
	background-position: center center;
	line-height: 200px;
	color: transparent;
	cursor: pointer;
	opacity: 0;
	transition: 1s;
	pointer-events: none;
	visibility: hidden;
/*	box-shadow: 0px 0px 50px 5px white;*/
}

#begin.active {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
}

/* VIDEO 1 */

#video-intro {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	top:0;
	margin: auto;
	transition: .5s;
	font-size: 0;
	line-height: 0;
	background: black;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: 4s;
	z-index: 100;
}

#video-intro.active {
	opacity: 1;
	pointer-events: all;
	visibility: visible;
}


#video-intro-skip {
	position: absolute;
	bottom: 20px;
	right: 20px;
	transition: 0.5s;
	font-size: 18px;
	font-weight: 700;
	color: white;
	line-height: 1em;
	cursor: pointer;
	background-image: url(svg/skip.svg?v=1);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 12px;
	width: 50px;
	height: 50px;
	border-radius: 50px;
	border: 1px solid white;
	z-index: 999;
}

/* Home screen */

#homescreen {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: black;
	/*background-image: url(graphics/bg.png);
	background-size: 768px 1024px;*/
	z-index: 100;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: 1.5s;
}

#homescreen.active {
	opacity: 1;
	pointer-events: all;
	visibility: visible;
}

#homescreen #participate {
	position: absolute;
	top: 200px;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	width: 200px;
	height: 200px;
	border-radius: 200px;
	/*box-shadow: 0px 0px 10px 2px white;*/
	line-height: 200px;
	font-size: 20px;
	color: black;
	font-weight: 700;
	background-color: white;
	background-image: url(svg/participate.svg);
	background-repeat: no-repeat;
	background-size: 160px auto;
	background-position: center center;
	line-height: 200px;
	color: transparent;
	cursor: pointer;
}

#homescreen #archive {
	position: absolute;
	bottom: 300px;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	width: 100px;
	height: 100px;
	border-radius: 100px;
	/*box-shadow: 0px 0px 10px 2px white;*/

	line-height: 100px;
	font-size: 20px;

	text-decoration: none;


	background-color: white;
	background-image: url(svg/archive_black.svg);
	background-repeat: no-repeat;
	background-size: 80px auto;
	background-position: center center;
	line-height: 200px;
	color: transparent;

}
/*
#homescreen .exit {
	position: absolute;
	left: 20px;
	top: 20px;
	color: white;

	background-image: url(svg/exit.svg?v=22);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: auto 15px;
	width: 200px;
	height: 15px;
}
*/
#homescreen .intro {
	position: absolute;
	right: 20px;
	top: 30px;
	color: white;
	background-image: url(svg/intro.svg?v=22);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 10px;
	cursor: pointer;
	z-index: 9999;
	cursor: pointer;
	border: 1px solid white;
	width: 50px;
	height: 50px;
	border-radius: 50px;
}

/* SEARCHING / QUESTIONNAIRE */

#searching-headline-box,
#searching-headline-2-box {
	margin: auto;
	position: absolute;
	padding: 0 20px;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: black;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: 6s;
	z-index: 9500;
}

#searching-headline-2-box {
  transition: 3s;
}

#searching-headline-inner,
#searching-headline-2-inner {
	position: absolute;
	top: 325px;
	left: 20px;
	right: 20px;
	z-index: 9550;
	font-weight: 400;
	text-shadow: 0px 0px 2px black;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: 1s;
	font-size: 26px;
	text-align: center;
}

#searching-headline-2-inner {

}

#searching-headline-inner.active,
#searching-headline-2-inner.active {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
}

#searching-headline-box.active,
#searching-headline-2-box.active {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
}

#searching-headline-box p,
#searching-headline-2-box p {
	display: block;
	height: 100px;
	width: 100%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

/* VIDEO GENERAL */

#video-subtitles {
	position: absolute;
	bottom: 60px;
	left: 0;
	right: 0;
	text-align: center;
	color: white;
	font-size: 20px;
	z-index: 500;
}



/* QUESTIONS */

#searching {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: 1.5s;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

#searching.active {
	opacity: 1;
	pointer-events: all;
	visibility: visible;
}

#svg-holder {
	width: 500px;
	height: 500px;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 200px;
	margin: auto;
	max-width: calc(100% - 150px);
	max-height: calc(100% - 150px);
	z-index: 9525;
	opacity: 0;
	transition: 3s;
	pointer-events: none;
}


#svg-holder.active {
	opacity: 1;
}

#svg-holder.fill path {
	opacity: 1;
}

#svg-holder.fill.yes path {
	fill: var(--yes-color);
}

#svg-holder.fill.no path {
	fill: var(--no-color);
}

.category svg.label {
	stroke: #818e9b;
	fill: #818e9b;
	transition: 1s;
	width: 200px;
	height: 26px;
	    /* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */
  -webkit-filter: drop-shadow( 0px 0px 4px #000 );
          filter: drop-shadow( 0px 0px 5px #000 );
}

.category svg.label path {
	stroke: #818e9b;
	fill: #818e9b;
	opacity: 0.25;
	transition: 0.5s;
}

.category.active svg.label path {
	stroke: #007DEA;
	fill: #007DEA;
	opacity: 1;
}

#svg-holder.overlay .category svg.label,
body.yes-no .category svg.label {
	opacity: 0;
}

#svg-holder.faded {
	opacity: 0.35;
}

body.exhib #svg-holder.faded {
	opacity: 1;
}

.category svg.label path {
	transition: 1s;
}

path.final-shape {
	opacity: 0;
	transition: 2s;
}

.st2 {
	pointer-events: none;
}

path.final-shape.yes,
.st2.yes {
	fill:var(--yes-color);
	stroke: var(--yes-color);
}

path.final-shape.no,
.st2.no {
	fill:var(--no-color);
	stroke: var(--no-color);
}


path.final-shape.active {
	opacity: 1;
}

.category {
	position: absolute;
	text-align: center;
}

.category input {
	width: 40px;
	display: none;
}

.category.north {
	top: 0px;
	left: calc(50% - 100px);

}

.category.east {
	/*
		right: -50px;*/
	right: -120px;
	top: calc(50% - 13px);
	text-align: right;
/*	transform: rotate(90deg); */
}

.category.south {
	bottom: 0px;
	left: calc(50% - 100px);
}

.category.west {
	/*left: -50px;*/
	left: -120px;
	top: calc(50% - 13px);
	text-align: left;
 /*	transform: rotate(-90deg); */
}

#thesearch-candidate-svg {
	display: block;
	width: 100%;
	height:  100%;
}


#thesearch-candidate-svg path {
	fill:#007DEA;
	fill: transparent;
	stroke:#007DEA;
	/*filter: url(#glow);
	filter: url(#displacementFilter);*/
	transition: 1s;
	stroke-width:0.5;
}

#thesearch-candidate-svg.yes path {
	stroke: var(--yes-color);
}

#thesearch-candidate-svg.no path {
	stroke: var(--no-color);
}

#thesearch-candidate-svg.blink path {
	stroke-width:1.5;
}


#questionnaire {
	width: 100%;
	position: absolute;
	right: 0;
	left: 0;
	bottom: 30px;
	margin: auto;
	text-align: center;
}

#questionnaire #disagree {
	position: absolute;
	left: 20px;
	top: 85px;
	transition: 1.5s;
	font-size: 18px;
	width: 160px;
	text-align: right;
	opacity: 0;
}

#questionnaire #agree {
	position: absolute;
	right: 20px;
	top: 85px;
	transition: 1.5s;
	font-size: 18px;
	width: 160px;
	text-align: left;
	opacity: 0;
}

#questionnaire #disagree.active,
#questionnaire #agree.active {
	opacity: 1;
}

body.yes-no #questionnaire #agree,
body.yes-no #questionnaire #disagree {
	opacity: 0;
}


#next,
#previous,
#done {
	position: absolute;
	width: 40px;
	height: 40px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .5s;
	z-index: 150;
}

#next.active,
#previous.active,
#done.active {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
}

#next {
	right: 15px;
	bottom: -10px;
	background-image: url(graphics/next.svg);
	background-repeat: no-repeat;
	background-size: contain;
}

/* DISABLE THE NEXT BUTTON */
#next,
#next.active {
	visibility: hidden;
}

#done {
	right: 15px;
	bottom: -10px;
	background-image: url(graphics/next.svg);
	background-repeat: no-repeat;
	background-size: contain;
}

/* DISABLE THE Done BUTTON */
#done,
#done.active {
	visibility: hidden;
}


#previous {
	left: 15px;
	bottom: -10px;
	background-image: url(graphics/previous.svg?v=1);
	background-repeat: no-repeat;
	background-size: 25px 25px;
	background-position: center center;
	width: 50px;
	height: 50px;
	border-radius: 50px;
	border: 1px solid white;
}

#questionnaire #questions {
	width: 100%;
	height: 200px;
}

#questionnaire .question {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: 1.5s;
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	transform: scale(1.01);
}

#questionnaire .question.active {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
	transform: scale(1);
}

#questionnaire .question .question-question {
	margin: 0 0 40px 0;
	padding: 0 20px;
	font-size: 26px;
	font-weight: 400;
}

#questionnaire .question .question-question span.count {
	font-size: 16px;
	display: block;
	margin-top: -20px;
}
/*
#questionnaire .question.personality .question-question:before {
	content: "How well do you agree with the following statement";
	display: block;
	font-size: 16px;
	position: absolute;
	top: -30px;
	left: 0;
	right: 0;
	text-align: center;
	color: #818e9b;
}*/

#questionnaire .question .question-question:before {
	content: ""
}

body.yes-no #questionnaire .question .question-question:before {
	content: ""
}

#questionnaire .question .answers {
	font-size: 0;
}

#questionnaire .question .answer {
	display: inline-block;
	border: 2px solid white;
	width: 50px;
	height: 50px;
	border-radius: 50px;
	text-align: center;
	font-size: 20px;
	line-height: 50px;
	cursor: pointer;
	transition: .2s;
	background-color: white;
	background-size: auto 25px;
	background-position: center center;
	background-repeat: no-repeat;
	color: transparent;
	font-weight: 700;
	margin: 0 10px;
	/*box-shadow: 0px 0px 5px 1px white;*/
}

#questionnaire .question .answer:hover,
#questionnaire .question .answer.active {
	/*background: #007DEA;
	border-color: #007DEA;
	color: white;*/
	background-color: #007DEA;
	border-color: #007DEA;
	/*box-shadow: 0px 0px 5px 1px #007DEA;*/
}



#questionnaire .question .answer-1 {
	background-image: url(svg/1.svg);
}

#questionnaire .question .answer-2 {
	background-image: url(svg/2.svg);
}

#questionnaire .question .answer-3 {
	background-image: url(svg/3.svg);
}

#questionnaire .question .answer-4 {
	background-image: url(svg/4.svg);
}

#questionnaire .question .answer-5 {
	background-image: url(svg/5.svg);
}

#questionnaire .question .answer-yes {
	background-image: url(svg/yes.svg);
	background-size: auto 15px;
}


#questionnaire .question .answer-no {
	background-image: url(svg/no.svg);
	background-size: auto 15px;
}



#video-part-2 {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	top:0;
	margin: auto;
	font-size: 0;
	line-height: 0;
	background: black;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: 3s;
	z-index: 500;
}

#video-part-2-skip {
	position: absolute;
	bottom: 20px;
	right: 20px;
	transition-delay: 2s;
	font-size: 18px;
	font-weight: 700;
	color: white;
	line-height: 1em;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	cursor: pointer;
	background-image: url(svg/skip.svg?v=1);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 12px;
	width: 50px;
	height: 50px;
	border-radius: 50px;
	border: 1px solid white;
	z-index: 999;
}

#video-part-2-skip.active {
	opacity: 1;
	pointer-events: all;
	visibility: visible;
}

#video-part-2.active {
	opacity: 1;
	pointer-events: all;
	visibility: visible;
}




/* RECORDING */

/* DISCLAIMER */

#recording-disclaimer {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	background: rgba(0,0,0,1);
	padding: 20px;
	z-index: 500;
}

#recording-disclaimer.disabled {
	display: none;
}

.recording-disclaimer-button {
	border-radius: 3px;
	display: inline-block;
	padding: 5px;
	cursor: pointer;
	position: absolute;
	bottom: 20px;
}

#recording-disclaimer-popup {
	position: absolute;
	padding: 20px;
	right: 0;
	left: 0;
	bottom: 160px;
	margin: auto;
	max-height: calc(100% - 40px);
	max-width: calc(100% - 40px);
	border: 1px solid transparent;
	border-radius: 3px;
}

#recording-disclaimer-text {

}

body.exhib #recording-disclaimer-popup {
	bottom: 80px;
}

#recording-disclaimer-popup p {
	margin-top: 0;
	margin-bottom: 10px;
}

#recording-skip {
	left: 20px;
	color: white;
}

#recording-accept {
	right: 20px;
	background: white;
	color: black;
}

#recording-disclaimer-popup h1 {
	margin: 0 0 5px 0;
}

#recording {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: 1.5s;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3000;
	background: black;
}

#recording.active {
	opacity: 1;
	pointer-events: all;
	visibility: visible;
}

#recording-buttons {
	position: absolute;
	bottom: 100px;
	right: 0;
	left: 0;
	margin: auto;
	height: 100px;
	text-align: center;
	font-size: 0;
}

#record-button,
#record-play-button,
#record-remove-button {
	width: 100px;
	height: 100px;
	background: #ff3000;
	border-radius: 100px;
	display: block;
	transition: .5s;
	vertical-align: top;
	line-height: 100px;
	text-align: center;
	font-size: 16px;
	margin: 0 5px;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
}

#record-button {
	transform: scale(1) rotate(-90deg);
}

#record-button.disabled {
	opacity: 0.5;
	background-color: gray;
	pointer-events: none !important;
}

#record-play-button {
	background-color: white;
	background-image: url(graphics/play.svg);
	background-size: 50px 50px;
	background-position: center center;
	background-repeat: no-repeat;
	display: none !important;

}

#record-remove-button {
	background-color: white;
	background-image: url(graphics/reject.svg);
	background-size: 50px 50px;
	background-position: center center;
	background-repeat: no-repeat;


}

#recording-buttons.player #record-button {
	display: none;
}

#recording-buttons.player #record-button.disabled {
	display: inline-block;
}

#record-button.active,
#record-play-button.active,
#record-remove-button.active {
	opacity: 1;
	pointer-events: all;
	visibility: visible;
}

#record-button svg {
	opacity: 0;
	transition: .2s;
}

@keyframes blinkRecord {
    0%   {background-color:#ff3000;}
    25%  {background-color:#7b1d14;}
    50%  {background-color:#ff3000;}
    75%  {background-color:#7b1d14;}
    100% {background-color:#ff3000;}
}

@keyframes blinkPlay {
    0%   {background-color:white;}
    25%  {background-color:rgba(255, 255, 255, 0.25);}
    50%  {background-color:white;}
    75%  {background-color:rgba(255, 255, 255, 0.25);}
    100% {background-color:white;}
}

#record-button.recording {
  animation-name: blinkRecord;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  transform: scale(1.5) rotate(-90deg);
}

#record-play-button.playing {
  animation-name: blinkPlay;
  animation-duration: 4s;
  animation-iteration-count: infinite;
 	background-image: url(graphics/stop.svg);
}

#record-button.recording svg {
	opacity: 1;
}

#recording-help-text {
	position: absolute;
	bottom: 150px;
	left: 0;
	right: 0;
	font-size: 20px;
}

#recording-help-text p {
	margin: 0;
	line-height: 1.1em;
}

#recording-help-text p.pre-recording,
#recording-help-text p.recording,
#recording-help-text p.recorded,
#recording-help-text p.converting,
#recording-help-text p.please-wait {
	opacity: 0;
	transition: 0.5s;
	display: block;
	height: 0px;
	padding: 0 20px;
}

#recording-help-text[data-action="pre-recording"] p.pre-recording,
#recording-help-text[data-action="recording"] p.recording,
#recording-help-text[data-action="recorded"] p.recorded,
#recording-help-text[data-action="converting"] p.converting,
#recording-help-text[data-action="please-wait"] p.please-wait {
	opacity: 1;
	height: 40px;
}

#approve-skip-recording {
	position: absolute;
	right: 20px;
	bottom: 20px;
	transition: .25s;
	cursor: pointer;
}

#approve-skip-recording.disabled {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

#approve-skip-recording div {
	color: white;
	display: block;
	transition: 0.5s;
	opacity: 0;
	position: absolute;
	right: 0;
	bottom: 0;
	background-size: auto 12px;
	width: 50px;
	height: 50px;
	border-radius: 50px;
	border: 1px solid white;
}

div.skip {
	background-image: url(svg/skip.svg?v=2);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 20px;
	width: 200px;
	height: 20px;
}

div.approve {
	background-image: url(svg/save.svg?v=2);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 20px;
	width: 200px;
	height: 20px;
}

#approve-skip-recording[data-action="skip"] div.skip {
	opacity: 1;
}

#approve-skip-recording[data-action="approve"] div.approve {
	opacity: 1;
}

/* VIDEO 3 */


#volunteer {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: 0.5s;
	bottom: 0;
	left: 0;
	right: 0;
	height: 300px;
	font-size: 20px;
	text-align: center;
	line-height: 1.3em;
	font-weight: 400;
}

#volunteer.active {
	opacity: 1;
	visibility: visible;
}

#volunteer-your-answer {
	margin: 0 0 20px 0;
}

#volunteer-no,
#volunteer-yes {
	display: inline-block;
	width: 100px;
	margin: 0 0 20px 0;
	padding: 20px 0;

}

#volunteer-no {
	text-align: left;
	border-right: 2px solid #818e9b;
}

#volunteer-yes {
	text-align: right;
}

#volunteer-no {
	color: var(--no-color);
}
#volunteer-yes {
	color: var(--yes-color);
}


#volunteer-text {

}

#volunteer-next {
	position: absolute;
	right: 20px;
	bottom: 20px;
	pointer-events: all;
	cursor: pointer;
	z-index: 9999;
	opacity: 0;
	transition: 0.5s;
	visibility: hidden;
}

#volunteer-next.active {
	opacity: 1;
	visibility: visible;
}


#video-part-3 video {
	opacity: 0;
	transition: 3s;
}

#video-part-3 video.active {
	opacity: 1;
}

#video-part-3 {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	top:0;
	margin: auto;
	transition: .5s;
	font-size: 0;
	line-height: 0;
	background: black;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: 3s;
	z-index: 500;
}

#video-part-3-skip {
	position: absolute;
	bottom: 20px;
	right: 20px;
	transition: 0.5s;
	font-size: 18px;
	font-weight: 700;
	color: white;
	line-height: 1em;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	cursor: pointer;
	background-image: url(svg/skip.svg?v=1);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 12px;
	width: 50px;
	height: 50px;
	border-radius: 50px;
	border: 1px solid white;
	z-index: 999;
}

#video-part-3-skip.active {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
}

#video-part-3.active {
	opacity: 1;
	pointer-events: all;
	visibility: visible;
}


/* PART 6 THE END */



#the-end {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: 1.5s;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3500;
	background: black;
}

#the-end.active {
	opacity: 1;
	pointer-events: all;
	visibility: visible;
}

#the-map {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	margin: auto;
	overflow: hidden;
}

#the-map-inner {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	/*background-image: url(graphics/the-map.png);
	background-repeat: no-repeat;
	background-size: 800px auto;
	background-position: center top;
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
	 */
}

#the-map svg .st3 {
	display: none;
}

#the-map svg .st2 {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: 0.5s;
}

#the-end.active #the-map svg .st2.active {
	opacity: 1;
	visibility: visible;
}

#the-end.active.zoomed #the-map svg .st2.active {
	pointer-events: all;
}


#the-map svg .st2.yes {
	fill: var(--yes-color);
}

#the-map svg .st2.no {
	fill: var(--no-color);
}



#the-map-inner:hover {
}

#map-helper {
	margin: auto;
	position: absolute;
	padding: 0 20px;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: transparent;
	transition: 1s;
	z-index: 9500;
	pointer-events: none;
}

#map-helper.disabled {
	opacity: 0;
	visibility: hidden;
}

#map-helper-inner {
	position: absolute;
	top: 325px;
	left: 20px;
	right: 20px;
	z-index: 9550;
	font-weight: 300;
	text-shadow: 0px 0px 2px black;
	pointer-events: none;
	transition: 1s;
	font-size: 16px;
	text-align: center;
}

#map-helper-inner .yes-color {
	color: var(--yes-color);
	font-weight: 400;
}

#map-helper-inner .no-color {
	color: var(--no-color);
	font-weight: 400;

}

#map-helper-inner h1 {
	font-size: 26px;
	font-weight: 400;
	margin: 0;
}


#exit {
	position: absolute;
	left: 20px;
	top: 30px;
	color: white;
	background-image: url(svg/exit.svg?v=22);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 10px;

	opacity: 1;
	pointer-events: all;
	transition: 1s;
	z-index: 99999999;
	cursor: pointer;
	border: 1px solid white;
	width: 50px;
	height: 50px;
	border-radius: 50px;
}

#exit.disabled {
	pointer-events: none;
	opacity: 0;
}


#the-end a.archive-link {
	color: white;
	text-decoration: none;
	position: absolute;
	right: 20px;
	top: 20px;
	opacity: 0;
	pointer-events: none;
	background-image: url(svg/archive.svg?v=222);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto 10px;
	width: 200px;
	height: 10px;
	transition: 1s;

}


#the-end.zoomed a.archive-link {
	opacity: 1;
	z-index: 5000;
	pointer-events: all;
	cursor: pointer;
}

#the-map-inner svg {
	width: 100%;
	height: 100%;
}

#Table {
	width: 100%;
	height: 100%;
}

#Layer_2 {
	width: 100%;
	height: 100%;
}

svg#Table g {
	background: url("graphics/the-map.png");
	display: block;
}

#theaud {

}






.next-button {
	background-image: url(graphics/next.svg?v=21);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 25px;
	width: 50px;
	height: 50px;
	border-radius: 50px;
	border: 1px solid white;
}




#video-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 99999999;
	pointer-events: none;
}

#video-progress-inner {
	height: 2px;
	background: #818e9b;
	width: 0%;
	opacity: 0;
	transition: opacity 1s;
}

#video-progress-inner.active {
	opacity: 1;
}




/* AUDIO STATEMENTS */

#statement-player {
	position: absolute;
	height: 710px;
	width: 710px;
	background: rgba(0,0,0,0.65);
	border: 1px solid #818e9b;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 80px;
	left: 0;
	z-index: 10000;
	margin: auto;
	border-radius: 400px;
	font-size: 0;
	letter-spacing: 0;
	line-height: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: 1s;
}

#statement-player.active {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
}

#statement-player .close {
	position: absolute;
	top: -20px;
	right: 0;
	left: 0;
	margin: auto;
	width: 40px;
	height: 40px;
	background-color: white;
	background-image: url(graphics/reject.svg);
	background-size: 35px 35px;
	background-position: center center;
	border-radius: 40px;
	cursor: pointer;
	z-index: 99999;
}

#statement-player .shape {
	width: 300px;
	height: 300px;
	position: absolute;
	top: 55px;
	left: 0;
	right: 0;
	margin: auto;
}

#statement-player .shape svg {
	width: 300px;
	height: 300px;

}



#statement-player .player {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 140px;
	margin: auto;
	width: 500px;
	height: 150px;
}

#statement-player .player .play,
#statement-player .player .pause {
	width: 40px;
	height: 40px;
	background-color: white;
	background-size: 30px 30px;
	background-repeat: no-repeat;
	background-position: center center;
	border-radius: 40px;
	display: inline-block;
	cursor: pointer;
	vertical-align: middle;
}

#statement-player .player .play {
	margin-right: 20px;
	background-image: url(graphics/play.svg);
}

#statement-player .player .play.playing {
	background-image: url(graphics/stop.svg);
}



#statement-player .player .pause {
	background-image: url(graphics/pause.svg);
}

#statement-player .player .duration {
	width: 415px;
	display: inline-block;
	vertical-align: middle;
	padding: 0px;
	background: rgba(130, 143, 156, 0.5);
	overflow: hidden;
}

#statement-player .player .duration .inner {
	width: 0%;
	height: 2px;
	background: #818e9b;
}

#statement-player .info {
	font-size: 14px;
	text-align: center;
	line-height: 1.3em;
	margin-top: 40px;
}

#statement-player .share {
	position: absolute;
	bottom: -40px;
	right: 0;
	left: 0;
	margin: auto;
	width: 80px;
	height: 80px;
	background-color: white;
	background-image: url(svg/share.svg?v=22);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 15px;
	color: transparent;
	font-size: 16px;
	line-height: 80px;
	text-align: center;
	border-radius: 40px;
	cursor: pointer;
	z-index: 999999;
}

#statement-player .share-qr {
  position: absolute;
  width: 300px;
  height: 300px;
  padding: 10px;
  right: 0;
  left: 0;
  bottom: 50px;
  top:0;
  margin: auto;
  background: white;
  border-radius: 5px;
  z-index: 9999;
	opacity: 0;
	transition: 1s;
	visibility: hidden;
	pointer-events: none;
	box-shadow: 0 0 200px 100px black;
}

#statement-player .share-qr .url {
	display: block;
	height: 20px;
	position: absolute;
	bottom: -50px;
	text-align: center;
	left: 0;
	right: 0;
	font-size: 14px;
	pointer-events: all;
	-webkit-user-select: all; /* Safari */
	-moz-user-select: all; /* Firefox */
	-ms-user-select: all; /* IE10+/Edge */
	user-select: all; /* Standard */
}


#statement-player .share-qr.active {
  opacity: 1;
  visibility: visible;
}



@media (max-height: 954px) {
	#wrapper {
		position: relative;
	}
}

@media (max-width: 767px) {
	#wrapper {
		/*transform: scale(calc(375 / 768));*/
		width: 100vw;
		height: 100vh;
		transform-origin: 0px 0px;
		position: relative;
		margin: 0 auto;
		top: auto;
		left: auto;
		right: auto;
		bottom: auto;
	}

	video {
		top: 0;
		bottom: 0;
		margin: auto;
		position: absolute;
	}

	#homescreen #archive {
		bottom: 100px;
	}

	#homescreen #participate {
		top: 150px;
	}

	#searching-headline-inner {
		font-size: 16px;
		top: 200px;
		bottom: auto;
	}

	#questionnaire .question .question-question {
		font-size: 16px;
		min-height: 60px;
	}

	.category svg.label {
		width: 150px;
	}

	.category.north {
		top: 100px;
		left: calc(50% - 75px);
	}

	.category.south {
	  bottom: 100px;
	  left: calc(50% - 75px);
	}

	.category.east {
		right: -100px;
	}

	.category.west {
		left: -100px;
	}

	#questionnaire .question .answer {
		width: 40px;
		height: 40px;
		border-radius: 40px;
		background-size: auto 12px;
	}

	#previous,
	#exit {
		width: 40px;
		height: 40px;
		border-radius: 40px;
		background-size: 20px auto;
	}

	#questionnaire #agree {
		top: auto;
		bottom: 50px;
		font-size: 12px;
		text-align: right;
	}

	#questionnaire #disagree {
		top: auto;
		bottom: 50px;
		font-size: 12px;
		text-align: left;
	}

	#volunteer {
		font-size: 16px;
	}

	#recording-disclaimer {
		padding: 0px;
		top: 20px;
		bottom: 0;
		font-size: 12px;
	}

	#recording-disclaimer-popup {
		top: 50px;
		bottom: 120px;
		overflow: scroll;
	}

	#statement-player {
		width: calc(100vw - 20px);
		height: calc(100vw - 20px);
	}

	#statement-player .shape {
		width: 150px;
		height: 150px;
		top: 10px;
	}

	#statement-player .shape svg {
		width: 100%;
		height: 100%;
	}

	#statement-player .player {
		width: calc(100% - 60px);
		bottom: 40px;

	}

	#statement-player .player .duration {
		width: calc(100% - 100px);
	}

	#statement-player .info {
		margin-top: 0;
		font-size: 12px;
	}

	#statement-player .share-qr {
		background: transparent;
		height: auto;
		box-shadow: none;
	}

	#statement-player .share-qr .qr {
		display: none;
	}

	#statement-player .share-qr .url {
		background: black;
		bottom: -140px;
		line-height: 1em;
		padding: 10px;
		font-size: 12px;
	}

	#map-helper-inner h1 {
		font-size: 16px;
		font-weight: 400;
		margin: 0;
	}



}

#video-intro:after,
#video-part-2:after,
#video-part-3:after {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	box-shadow: inset 0 0 40px 40px black;
	content: "";
}