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;
}
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;
}

@font-face {
	font-family: "Lato";
	src: url('../font/Lato-Regular.ttf') format("truetype");
	font-weight: 500;
}
@font-face {
	font-family: "Lato";
	src: url('../font/Lato-Light.ttf') format("truetype");
	font-weight: 300;
}
@font-face {
	font-family: "Lato";
	src: url('../font/Lato-Regular.ttf') format("truetype");
	font-weight: 400;
}
@font-face {
	font-family: "Lato";
	src: url('../font/Lato-Bold.ttf') format("truetype");
	font-weight: 700;
}



body, html {
	font-family: "Lato", helvetica, sans-serif;
	/*background: #efefef;*/
	height: 100%;
	/*text-align: center;*/
}

body {
	// background-image: url('../img/boxesBackground_2560.png');
	background-size: cover;
	min-height: 100%;
	-webkit-backface-visibility: hidden;
	-webkit-font-smoothing: subpixel-antialiased;
}
a:focus {
	color: #333;
}
a:hover {
	color: #000;
}
a:visited {
	color: #333;
}
a {
	color: #111;
	outline: none;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

#container {
position: relative;
top: 78px;
max-width: 1280px;
margin: 0 auto;
background: #efefef;
z-index: 1;
height: 800px;	
box-shadow: 0 0 20px rgba(0,0,0,.25);
overflow: hidden;
}

header {
	background: #fff;
	height: 75px;
	border-bottom: 3px solid #e5e5e5;
	/*border-left: 1px solid #e5e5e5;*/
	/*border-right: 1px solid #e5e5e5;*/
	/*max-width: 1200px;*/
	margin: 0 auto;
}
#logos {
	z-index: 102;
	position: absolute;
	width: 100%;	
}
#rucksackLogo {
	margin: 8px 25px 0 25px;
	float: left;
	height: 58px;
}
#wuppertalInstitutLogo {
	margin: 18px 25px 0 25px;
	float: right;
	height: 37px;
}

header nav {
	position: absolute;
	width: 750px;
	top: 95px;
	margin-left: -375px;
	left: 50%;	
	z-index: 5;
}
header nav.select {
	z-index: 1005;
}
header nav li:last-child{
	margin-right: 0;
}
.navItem {
	display: inline;
	float: left;
	margin-right: 10px;
	font-size: 12px;
	font-weight: 300;
	color: #808080;
	text-transform: uppercase;
}
.navItem.access {
	cursor: pointer;
}
.navItem p {
	float: left;
	margin: 8px 0 0;
}
.navIco {
	height: 35px;
	background-position: bottom left;
	background-size: auto 35px;
	background-repeat: no-repeat;
}
.navIco.hide {
	display: none;
}
.navItem.Wohnen .navIco.active {
	background-image: url('../img/navIcoWohnen@2x.png');	
}
.navItem.Wohnen .navIco {
	background-image: url('../img/navIcoWohnenGrey@2x.png');	
}
.navItem.Konsum .navIco.active {
	background-image: url('../img/navIcoKonsum@2x.png');	
}
.navItem.Konsum .navIco {
	background-image: url('../img/navIcoKonsumGrey@2x.png');	
}
.navItem.Ernaehrung .navIco.active {
	background-image: url('../img/navIcoErnaehrung@2x.png');	
}
.navItem.Ernaehrung .navIco {
	background-image: url('../img/navIcoErnaehrungGrey@2x.png');	
}
.navItem.Freizeit .navIco.active {
	background-image: url('../img/navIcoFreizeit@2x.png');	
}
.navItem.Freizeit .navIco {
	background-image: url('../img/navIcoFreizeitGrey@2x.png');	
}
.navItem.Mobilitaet .navIco.active {
	background-image: url('../img/navIcoMobilitaet@2x.png');	
}
.navItem.Mobilitaet .navIco {
	background-image: url('../img/navIcoMobilitaetGrey@2x.png');	
}
.navItem.Urlaub .navIco.active {
	background-image: url('../img/navIcoUrlaub@2x.png');	
}
.navItem.Urlaub .navIco {
	background-image: url('../img/navIcoUrlaubGrey@2x.png');	
}

.navIco-print {
	height: 35px;
	/*margin-bottom: -2px;*/
	display: none;
}
.navIco-print.show {
	display: block;
}

.progressContainer {
	position: relative;
	top: 0px;
	left: 0;
	width: 116px;
	margin: 8px 0;
}

.progressBack, .progressShow {
	position: absolute;
	top: 0;
	left: 0;
	height: 3px;
}
.progressBack {
	width: 100%;
	/*background: #ccc;*/
}
.progressShow {
	z-index: 1;
	width: 0;
	background-repeat: repeat;
	-webkit-transition: all 1s ease-in-out;
	   -moz-transition: all 1s ease-in-out;
	    -ms-transition: all 1s ease-in-out;
	     -o-transition: all 1s ease-in-out;
	        transition: all 1s ease-in-out;
}

#progressShowWohnen {
	background: #db3ad5;
}
#progressShowKonsum {
	background: #30cece;
}
#progressShowErnaehrung {
	background: #f16735;
}
#progressShowFreizeit {
	background: #87de4a;
}
#progressShowMobilitaet {
	background: #29abe2;
}
#progressShowUrlaub {
	background: #fab03a;
}
.progress-category {
	max-width: 120px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;	
}

.result-value-nav {
    clear: both;
    text-transform: none;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    top: 5px;
    display: none;
}
.result-value-nav.show {
	display: block;
}

.result-value-number {
	font-size: 18px; 
}
.change-view {
	display: none;
	display: none;
}
.change-view.show {
	display: block;
}
.change-value {
    font-size: 1.5em;
    color: #000;
    display: block;
    margin: 4px 0px 8px;
    position: relative;
    top: 3px;
    visibility: visible;
}
.change-value.hide {
	visibility: hidden;
}

.change-value-container {
	position: relative;
	width: 76px;
	text-align: center;
}
.change-icon {
	position: absolute;
	left: 18px;
}

.Wohnen .result-value-nav {
	color: #db3ad5;
}
.Konsum .result-value-nav {
	color: #30cece;
}
.Ernaehrung .result-value-nav {
	color: #f16735;
}
.Freizeit .result-value-nav {
	color: #87de4a;
}
.Mobilitaet .result-value-nav {
	color: #29abe2;
}
.Urlaub .result-value-nav {
	color: #fab03a;
}

.temp {
    color: #aaaaaa;
}


#questionContainer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	overflow: hidden;
	/*width: 100% !important;*/

	top: 0;
	left: 50%;
	width: 800px;
	margin-left: -400px;
	overflow: visible;
	/*height: 100% !important;*/
	/*display: table;*/
	-webkit-transition: all ease-in-out 0.8s;		
	   -moz-transition: all ease-in-out 0.8s;		
	    -ms-transition: all ease-in-out 0.8s;		
	     -o-transition: all ease-in-out 0.8s;		
	        transition: all ease-in-out 0.8s;		
}

#questionList {
	/*margin: 0 auto;*/
	/*border: 3px solid;*/
	/*vertical-align: middle;*/
	/*display: table-cell;*/
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/*margin: 0 0 0 -25%;*/
}

#questionList li.question {
	display: none;
}

#questionList li.question.top01, #questionList li.question.top02, #questionList li.question.top03, .socialPage.top01, .socialPage.top02, .socialPage.top03 {
	display: block;
}

/* CATEGORY CARD COLOURS */
#questionList li.question.top01.Wohnen {
	background: #db3ad5;
}
#questionList li.question.top02.Wohnen {
	background: #bd32b8;
}
#questionList li.question.top03.Wohnen {
	background: #93278f;
}

#questionList li.question.top01.Konsum {
	background: #30cece;
}
#questionList li.question.top02.Konsum {
	background: #2ab3b3;
}
#questionList li.question.top03.Konsum {
	background: #249999;
}

#questionList li.question.top01.Ernaehrung {
	background: #f16735;
}
#questionList li.question.top02.Ernaehrung {
	background: #d15a2e;
}
#questionList li.question.top03.Ernaehrung {
	background: #b34d27;
}

#questionList li.question.top01.Freizeit {
	background: #87de4a;
}
#questionList li.question.top02.Freizeit {
	background: #7ac943;
}
#questionList li.question.top03.Freizeit {
	background: #65a637;
}

#questionList li.question.top01.Mobilitaet {
	background: #29abe2;
}
#questionList li.question.top02.Mobilitaet {
	background: #2391bf;
}
#questionList li.question.top03.Mobilitaet {
	background: #1c7399;
}

#questionList li.question.top01.Urlaub {
	background: #fab03a;
}
#questionList li.question.top02.Urlaub {
	background: #e19e34;
}
#questionList li.question.top03.Urlaub {
	background: #c78c2e;
}
.socialPage.top01 {
	background: #fff;
	z-index: 105;
}
.socialPage.top02 {
	background: #fafafa;
	z-index: 104;
}
.socialPage.top03 {
	background: #808080;
	z-index: 103;
}
/* CATEGORY CARD COLOURS */

#socialPage01 {
	-webkit-transform: rotateZ(1.23deg);
	   -moz-transform: rotateZ(1.23deg);
	    -ms-transform: rotateZ(1.23deg);
		 -o-transform: rotateZ(1.23deg);
		    transform: rotateZ(1.23deg);		
}
#socialPage02 {
	-webkit-transform: rotateZ(-1.31deg);
	   -moz-transform: rotateZ(-1.31deg);
	    -ms-transform: rotateZ(-1.31deg);
		 -o-transform: rotateZ(-1.31deg);
		    transform: rotateZ(-1.31deg);

}
.question, #socialDataSheet {
	width: 650px;
	height: 400px;
	position: absolute;
	left:50%;
	top: 205px;
	/*margin: -215px 0 0 -340px;*/
	margin: 0 0 0 -340px;
	padding: 15px;
	color: #fff;
	-webkit-transition: all ease-in-out 0.8s;
	   -moz-transition: all ease-in-out 0.8s;
	    -ms-transition: all ease-in-out 0.8s;
		 -o-transition: all ease-in-out 0.8s;
	        transition: all ease-in-out 0.8s;
	/*text-align: center;*/

}

.socialPage {
	padding: 40px;
	width: 600px;
	height: 350px;
	position: absolute;
	left: 50%;
	margin-left: -340px;

	-webkit-transition: all ease-in-out 0.8s;		
	   -moz-transition: all ease-in-out 0.8s;		
	    -ms-transition: all ease-in-out 0.8s;		
	     -o-transition: all ease-in-out 0.8s;		
	        transition: all ease-in-out 0.8s;		

}
#socialDataSheet {
	width: 100%;
	left: 0;
	margin-left: 0;
	height: 437px;	
	z-index: 105;
	color: #000;
	font-size: 14px;	
	padding: 0;
}
#socialDataSheet.hide {
	top: -100%;
}


.socialPage p {
	float: left;
	margin-bottom: 20px;
	line-height: 20px;
}
.socialPage label p {
	color: #000;
	font-size: 0.8em;
	position: relative;
	left: 20px;	
}
.socialPage h3 {
	/*clear: left;*/
	float: left;
	margin-top: 0px;
	/*width: 150px;*/
	margin-right: 10px;
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	margin: 0 10px 5px 0;
}
.socialPage h3.warn {
	font-weight: 700;
	color: #f00;
}
.socialAnswerContainer {
	float: left;
	margin: 0px 0 45px;
	/*width: 470px;*/
}
.socialAnswer input[type="number"] {
	text-align: center;
	color: #000;
	display: inline-block;
	float: left;
	width: 45px;
	margin: -3px 10px 0 0;
	/*background: #bd32b8;*/
	border: 1px solid #808080;
	/*outline: none;*/
	height: 20px;
	font-size: 16px;
	padding: 2px 10px;
	/*background: transparent;*/
	/*border-bottom: 2px solid #000;*/
	-webkit-appearance: none !important;
	border-radius: 0px;
	moz-appearance: none;
}
.socialAnswer input[type="radio"]{
	margin-left: 0;
}
.socialAnswerContainer label {
	/*float: left;*/
	margin-right: 15px;
	line-height: 20px;
	cursor: pointer;	
}
.socialAnswer.vertical label {
	clear: left;
	float: left;
	/*margin-right: 20px;*/
	line-height: 20px;
	cursor: pointer;	
	margin: 0px 0 0 0;
	text-align: center;
	width: 100%;
}
.socialAnswer.vertical input {
	float: left;
}
.socialAnswer {
	float: left;
	/*width: 220px;*/
}
.socialAnswer.vertical {
	margin-right: 20px;
}
.socialAnswerContainer div.socialAnswer:nth-child(odd){
	/*clear: left;*/
}
.socialAnswerContainer.clear {
	clear: both;
	width: 640px;
}
.socialAnswer.fixed {
	width: 210px;
}
.happinessLabel {
	width: 90px;
	font-size: 12px;
	color: #999;
	margin: 2px 0 0;
	float: left;
	line-height: 16px;
}
.happinessLabel.low {
	text-align: right;
	padding-right: 25px;
}
.happinessLabel.high {
	text-align: left;
	padding-left: 5px;
}

.socialNav {
	width: 650px;
	margin-left: -325px;
	left: 50%;
	position: absolute;
	bottom: -35px;
	/*border: 1px solid;*/
	text-align: center;
}

#saveSocial, #nextSocial, #backSocial {
	float: right;
	font-size: 18px;
	font-weight: 300;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;	
}
#saveSocial p, #nextSocial p, #backSocial p {
	font-size: 18px;
	line-height: 22px;
}
#saveSocial.hide, #nextSocial.hide, #backSocial.hide {
	display: none;
}
#backSocial {
	float: left;
}

#questionList li.question:nth-child(3n+1) {
	/*-webkit-transform-style: preserve-3d;*/
	-webkit-transform: rotateZ(1.23deg);
	   -moz-transform: rotateZ(1.23deg);
	    -ms-transform: rotateZ(1.23deg);
		 -o-transform: rotateZ(1.23deg);
		    transform: rotateZ(1.23deg);
}
#questionList li.question:nth-child(3n+2) {
	/*-webkit-transform-style: preserve-3d;*/
	-webkit-transform: rotateZ(-1.31deg);
	   -moz-transform: rotateZ(-1.31deg);
		-ms-transform: rotateZ(-1.31deg);
		 -o-transform: rotateZ(-1.31deg);
	 	    transform: rotateZ(-1.31deg);
}
#questionList li.question:nth-child(3n+3) {
	/*-webkit-transform-style: preserve-3d;*/
	-webkit-transform: rotateZ(0.18deg);
	   -moz-transform: rotateZ(0.18deg);
		-ms-transform: rotateZ(0.18deg);
		 -o-transform: rotateZ(0.18deg);
			transform: rotateZ(0.18deg);
}

.question.hide, .socialPage.hide  {
	left: -100%;
}

.question .number {
/*	position: relative;
	top: 0;
	left: 0;
	-webkit-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;
	cursor: default;*/	

	position: relative;
	top: 0;
	left: 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	cursor: default;
	width: 145px;	
}
.XofY {
	position: absolute;
	top: 30px;
	left: 0px;
	font-size: 60px;
	font-weight: 300;
	color: #000;
	opacity: 0.3;
	line-height: 72px;
	display: inline;	
}
.XofY .activeNumber {
	font-size: 0.866em;
	font-weight: 700;
	position: relative;
	bottom: 3px;
}
.XofY .splitNumber {
	position: relative;
	left: -2px;	
}
.XofY .sumNumber {
	font-weight: 500;
	position: relative;
	bottom: 3px;
	left: -8px;
	font-size: 0.4em;
}
.socialPage .XofY {
	left: auto;
	right: 10px;
}
.question .number h4 {
	position: relative;
	top: 0px;
	float: left;
	font-size: 18px;
	/*line-height: 72px;*/
	text-transform: uppercase;
	font-weight: 400;
	display: inline;
	color: #fff;
	opacity: 1;
	white-space: nowrap;
	/*margin-left: -50px;*/
}

.question .theme {
	font-weight: 300;
	font-size: 14px;
	text-transform: uppercase;
	position: relative;
	left: 0px;
	top: 3px;
	opacity: 1;
	display: block;
}

.question .actionAreaContainer {
	position: absolute;
	left: 195px;
	top: 50px;
	right: 20px;
	height: 330px;
	display: table;
}
.question .actionArea {
	/*position: absolute;*/
	/*left: 200px;*/
	/*top: 50px;*/
	display: table-cell;
	vertical-align: middle;
}

.question .title {
/*	position: absolute;
	top: 100px;
	left: 200px;
	display: inline-block;
	width: 450px;
	-webkit-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;
	cursor: default;	
*/

	position: relative;
	display: inline-block;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	cursor: default;
	clear: both;
	float: left;
	margin-bottom: 20px;
	max-width: 450px;
}

.question h2 {
	font-size: 18px;
	text-align: left;
	/*margin-top: 30px;*/
}

.question h3 {
	font-size: 14px;
	text-align: left;
	font-weight: 400;
	margin-top: 5px;
	line-height: 16px;
	/*margin-bottom: 10px;*/
}

.answers {
/*	clear: both;
	position: absolute;
	top: 130px;
	font-size: 16px;
	display: inline-block;
*/
	clear: both;
	font-size: 16px;
	display: inline-block;
	float: left;

}

.labelArea {
	float: left;
	-webkit-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;
	cursor: default;	

}

.inputArea {
	float: left;
}

.optionSkip {
	margin-top: 25px;
}
.answers li.option {
	clear: both;
	float: left;
	text-align: left;
	line-height: 20px;
	margin-bottom: 5px;
}
.answers li.option label {
	width: 430px;
	text-align: left;
	float: left;
	margin-bottom: 3px;
}
.answers li.option p {
	margin-bottom: 0px;
}

.answers li.value {
	clear:left; 
	float: left;
	text-align: left;
	line-height: 20px;
	width: 100%;
	margin-bottom: 4px;
}
.answers li.value .answerTitle {
	/*float: right;*/
	margin-bottom: 15px;
}
.answers li.value .labelArea {
	/*margin-left: 195px;*/
	position: relative;
	margin: 0 5px 0 0;
	/*left: 195px;*/
	/*width: 200px;	*/
}
.answers li.value .inputArea {
	position: relative;
	/*left: 200px;*/
	/*float: right;*/
}

.answers li.option-value {
	clear: both;
	float: left;
	text-align: left;
	line-height: 20px;
	/*margin-left: 195px;*/
}

.answers li.check-factor {
	clear: left;
	float: left;
	text-align: left;
	line-height: 24px;
	margin-top: 15px;
}
.answers li.check-factor .inputArea {
	position: relative;
	/*left: 195px;	*/
}
.answers li.check-factor .labelArea {
	position: relative;
	/*left: 200px;*/
}

.answers li p {
	float: left;
	line-height: 20px;
	margin-bottom: 10px;	
}

.answers .unit {
	font-size: 16px;
	float: left;
	-webkit-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;
	cursor: default;	
	margin-bottom: 5px;
	position: relative;
}


.answers input[type="radio"] {
	/*color: #f00;*/
	float: left;
	margin-right: 10px;
	line-height: 24px;
}

.answers input[type="checkbox"] {
	/*color: #f00;*/
	margin: 0 5px 0 0; 
	position: relative;
	top: -5px;
}

.answers input[type="number"] {
/*	text-align: left;
	color: #000;
	display: inline-block;
	float: left;
	width: 50px;
	margin: 0 10px 0 0;*/

	text-align: center;
	color: #000;
	display: inline-block;
	float: left;
	width: 45px;
	margin: -3px 10px 0 0;
	/*background: #bd32b8;*/
	border: 1px solid #808080;
	/*outline: none;*/
	height: 20px;
	font-size: 16px;
	padding: 2px 10px;
	/*background: transparent;*/
	/*border-bottom: 2px solid #FFFFFF;*/
	-webkit-appearance: none !important;
	border-radius: 0px;
	moz-appearance: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input::-o-outer-spin-button,
input::-o-inner-spin-button {
    -o-appearance: none;
}
input[type="number"] {
    -moz-appearance: textfield;
	font-family: lato;    
}

input[type=number]:invalid {
    color: #FF0000;
}

select {
	display: block;
	clear: both;
}

/* The CSS */
select {
    padding: 2px 25px 2px 10px;
    margin: 0;
    -webkit-border-radius:0px;
    -moz-border-radius:0px;
    border-radius:0px;
/*    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
*/    
	background: #fff;
    color:#000;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
    font-size: 16px;
	border: 1px solid #808080;
	height: 30px;
	font-family: "Lato", helvetica, sans-serif;
}
#language-switch select {
	font-size: 14px;
	height: 20px;
	padding: 0 15px 0 25px;
	border: none;
	background-size: 18px 18px;
	background-repeat: no-repeat;
	background-position: center left;
	background-color: transparent;
	width: auto;
	font-weight: 300;
}


/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {padding-right:18px}
}

label.select-label {
	position:relative;
	clear: both;
	float: left;
}
label.select-label:after {
    content: '\25bc';
    font-size:12px;
    line-height: 30px;
    color:#808080;
/*    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
*/	right: 10px;
	/*top: 6px;*/
	padding: 0 0px 0px;
    /*border-bottom:1px solid #ddd;*/
    position:absolute;
    pointer-events:none;
}
label.select-label:before {
/*    content:'';
    right:6px; top:0px;
    width:20px; height:20px;
    background:#f8f8f8;
    position:absolute;
    pointer-events:none;
    display:block;*/
}
#language-switch label.select-label:after {
	line-height: 23px;
	font-size: 12px;
	right: 0px;
	color: #aaa;
}



.inputWarning {
	position: absolute;
	top: -35px;
	left: -60px;
	width: 190px;
	opacity: 0;
	visibility: hidden;
	text-align: center;
	font-size: 14px;
	height: 20px;
	padding: 5px 0;
	overflow: hidden;
	white-space: nowrap;
	background: #e5e53c;
	color: #333;
}
.inputWarning.de::before {
	content: "Ist der Wert wirklich richtig?";	
}
.inputWarning.en::before {
	content: "Is the value really correct?";		
}
.inputWarning.show {
	top: -35px;
	left: -60px;
	z-index: 3;
	visibility: visible;
	opacity: 1;
}
.optValInputContainer {
	position: relative;
	float: left;
}

.answers .title h3 {
	font-size: 16px;
	font-weight: 400;
	margin-top: 40px;
}
.answers .title {
	margin-bottom: 15px;

}

.answerTitle {
	text-align: left;
	float: left;
	display: inline-block;
}

.answerSubtitle {
	/*clear: left;*/
	font-size: 12px;
	/*margin-bottom: 10px;*/
	text-align: left;
	margin-left: 8px;
	line-height: 24px !important;
	font-weight: 400;
	margin-bottom: 10px;

}
.answerSubtitle.break {
	clear: left;
	margin-left: 0px;
}
.answerSubtitle.inline {

}

#questionNav {
	position: absolute;
	width: 650px;
	top: 405px;
	left: 50%;
	margin: 250px 0 50px -325px;
	font-size: 14px;
	line-height: 22px;	
	font-weight: 300;
	text-transform: uppercase;
	-webkit-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;
}

#questionNav > div {
	cursor: pointer;
}

#questionNav.wide {
	width: 800px;
}

#questionNav .back {
	float: left;
	opacity: 0;
}

#questionNav .next {
	float: right;
	
	opacity: 0.2;
	/*width: 200px;*/
}
#resultNav-container .end {
    float: left;
    opacity: 0;
    visibility: hidden;
    position: relative;
}

#questionNav .next p, .restartButton p, .saveRessourcesButton p, .showResultButton p, .restartCategory p, .end p, #saveSocial p, #nextSocial p {
	float: right;
	margin: 0 5px;
}
#questionNav .next img, .restartButton img, .saveRessourcesButton img, .showResultButton img, .restartCategory img, .end img , #saveSocial img, #nextSocial img {
	clear: right;
	float: right;
}

#questionNav .back p, #backSocial p {
	float: left;
	margin: 0 5px;
	color: #666;
}
#questionNav .back img, #backSocial img {
	float: left;
}


#resultNav {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    margin: 0 0 40px 0px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    text-transform: uppercase;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    background: #1E719A;
    height: 65px;
    z-index: 0;
    color: #fff;
    -webkit-transition: all 1s ease-in-out;
       -moz-transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
         -o-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out;
    visibility: visible;
    opacity: 0;
    -webkit-transform: translate3d(0,100px,0);
       -moz-transform: translate3d(0,100px,0);
        -ms-transform: translate3d(0,100px,0);
         -o-transform: translate3d(0,100px,0);
            transform: translate3d(0,100px,0);
}
#resultNav.show {
	opacity: 1;
	visibility: visible;
	z-index: 200;
	margin-top: 0;
    -webkit-transform: translate3d(0,0,0);
       -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
         -o-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
}
#resultNav-container {
    position: relative;
    display: inline-block;
    left: 50%;
    -webkit-transform: translate3d(-50%,0,0);
       -moz-transform: translate3d(-50%,0,0);
        -ms-transform: translate3d(-50%,0,0);
         -o-transform: translate3d(-50%,0,0);
            transform: translate3d(-50%,0,0);
}

.resultNav-button {
    text-align: center;
    margin: -35px 30px 0;
    cursor: pointer;
    float: left;
    visibility: hidden;
    -webkit-transform: none !important;
       -moz-transform: none !important;
        -ms-transform: none !important;
         -o-transform: none !important;
            transform: none !important;
    position: relative !important;
    left: 0 !important;
    display: none;
    width: 280px !important;
}
.resultNav-button.show {
	opacity: 1;
	visibility: visible;
	display: inline-block;
}
.resultNav-button img, .resultNav-button p {
    float: none;
    display: block;
	margin: 0 auto;    
}
.resultNav-button p {
    margin: 5px 0 0 !important;
    opacity: 0.9;
    -webkit-transition: all .3s linear;
       -moz-transition: all .3s linear;
        -ms-transition: all .3s linear;
         -o-transition: all .3s linear;
            transition: all .3s linear;
}
.resultNav-img {
	width: 50px;
	height: 50px;
	background-repeat: no-repeat;
	background-size: contain;
	display: block;
	margin: 0 auto;    	
}
.resultNav-button:hover p {
	opacity: 1;
}
.end .resultNav-img {
	background-image: url('../img/icon-end@2x.png');
}
.end:hover .resultNav-img {
	background-image: url('../img/icon-end-active@2x.png');
}
.saveRessourcesButton .resultNav-img {
	background-image: url('../img/icon-question@2x.png');
}
.saveRessourcesButton:hover .resultNav-img {
	background-image: url('../img/icon-question-active@2x.png');
}
.showResultButton .resultNav-img {
	background-image: url('../img/icon-next@2x.png');
}
.showResultButton:hover .resultNav-img {
	background-image: url('../img/icon-next-active@2x.png');
}
.restartButton .resultNav-img {
	background-image: url('../img/icon-restart@2x.png');
}
.restartButton:hover .resultNav-img {
	background-image: url('../img/icon-restart-active@2x.png');
}
.printResult .resultNav-img, .printResult-plan .resultNav-img {
	background-image: url('../img/icon-print@2x.png');
}
.printResult:hover .resultNav-img, .printResult-plan:hover .resultNav-img {
	background-image: url('../img/icon-print-active@2x.png');
}



#resultNav-container .saveRessourcesButton, #resultNav-container .showResultButton {
	/*position: absolute;*/
	/*width: 280px;*/
	/*left:50%;*/
	/*margin-left: -150px;*/
	text-align: center;
	/*top: 1px;*/
	opacity: 0;
	visibility: hidden;
	-webkit-transform: translateX(-50%);
	   -moz-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	     -o-transform: translateX(-50%);
	        transform: translateX(-50%);
}
#resultNav-container .saveRessourcesButton, #resultNav-container .showResultButton {
	/*position: absolute;*/
	/*left: 50%;*/
	-webkit-transform: translateX(-50%);
	   -moz-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	     -o-transform: translateX(-50%);
	        transform: translateX(-50%);
	width: auto;
}
#resultNav-container .saveRessourcesButton p, #resultNav-container .showResultButton p {
	float: none;
}
#resultNav-container .saveRessourcesButton img, #resultNav-container .showResultButton img {
	position: absolute;
	/*top: 0;*/
	bottom: 0;
	right: -15px;
}
#resultNav-container .showResultButton {
	/*width: 390px;*/
	/*margin-left: -205px;*/
	white-space: nowrap;
	font-size: 16px;
}
.restartButton {
	position: absolute;
	font-size: 14px;
	line-height: 22px;	
	font-weight: 300;
	text-transform: uppercase;
	-webkit-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;
	/*width: 270px;*/
	left:50%;
	/*margin-left: -140px;*/
	-webkit-transform: translateX(-50%);
	   -moz-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	     -o-transform: translateX(-50%);
	        transform: translateX(-50%);
	text-align: center;
	/*top: 590px;*/
	/*top: -43px;	*/
	opacity: 0;	
	visibility: hidden;	
	z-index: 102;
}
.restartButton, #resultNav-container .saveRessourcesButton, #resultNav-container .end {
	-webkit-transition: all .7s linear;
	   -moz-transition: all .7s linear;
	    -ms-transition: all .7s linear;
	     -o-transition: all .7s linear;
	        transition: all .7s linear;
/*	-webkit-transition-delay: 2s;
	   -moz-transition-delay: 2s;
	    -ms-transition-delay: 2s;
	     -o-transition-delay: 2s;
	        transition-delay: 2s;
*/}
.restartButton.show, #resultNav-container .end.show {
	-webkit-transition-delay: 2s;
	   -moz-transition-delay: 2s;
	    -ms-transition-delay: 2s;
	     -o-transition-delay: 2s;
	        transition-delay: 2s;
}

.restartButton p {
	margin-top: 65px;	
	line-height: 1.3em;
}
.restartIcon {
	position: absolute;
	float:none;
	margin-top: 0 !important;	
	left: 50%;
	margin-left: -18px;

}
#restartArrow {
	position: absolute; 
	/*top: 0; */
	bottom: -3px;
	right: -20px;	
}
#questionNav .back.show, #questionNav .next.show, #questionNav .next.warn, .restartButton.show, #resultNav-container .saveRessourcesButton.show, #resultNav-container .end.show {
	display: inline-block;
	opacity: 1;
	cursor: pointer;
	visibility: visible;
}
#questionNav .next.hide {
	opacity: 0;
	visibility: hidden;
	display: none;
} 
#questionNav .next img {
	visibility: visible;
}
#questionNav .next.warn img {
	visibility: hidden;
	cursor: pointer;
}
#questionNav .back, #questionNav .next {
	-webkit-transition: all .25s linear;
	   -moz-transition: all .25s linear;
	    -ms-transition: all .25s linear;
	     -o-transition: all .25s linear;
	        transition: all .25s linear;
}

#resultbox {
	position: fixed;
	top: 110px;
	right: 0px;
	text-align: left; 
	font-size: 14px;
	line-height: 18px;
	font-weight: 500;
	color: #7f7f7f;
	padding: 10px;
}

#resultbox li p {
	display: inline;
}

.showRucksack {
	position: absolute; 
	top: 50%;
	right: 50px;
	width: 50px;
	cursor: pointer;
}

/* BOX CONTAINER STYLES */
#resultContainer {
	position: relative;
	top: -50px;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-transition: all .75s ease-in-out;
	   -moz-transition: all .75s ease-in-out;
	    -ms-transition: all .75s ease-in-out;
	     -o-transition: all .75s ease-in-out;
	        transition: all .75s ease-in-out;
}
#moveResultLeft, #moveResultRight {
	position: absolute;
	top: 320px;
	z-index: 201;
	display: none;
}
#moveResultLeft {
	left: 0px;
}
#moveResultRight {
	right: 0px;
}
#moveResultLeft.show, #moveResultRight.show {
	display: none;
}
#moveResultSwipeArea {
	/*border: 1px solid #f00;*/
	position: absolute;
	top: 150px;
	height: 250px;
	left: 0;
	right: 0;
	z-index: 200;
	display: none;
}
#moveResultSwipeArea.show {
	display: block;
}


#resultArea, #resultAreaFuture {
	/*clear: both;*/
	position: absolute;
	left: 50%;
	top: 425px;
	height: 160px;
	width: 320px;
	margin: -80px 0 0 -160px;
	/*border: 1px solid;*/
	opacity: 0;
}
#resultArea {
	z-index: 40;
}
#resultAreaFuture {
	z-index: 41;
}
#compareFutureArea {
	z-index: 42;
}
#resultArea.moveLeft {
	margin-left: -440px;
}

#resultAreaFuture .resultDisplay.categoryTour {
	bottom: -65px;
}

#compareAverageArea {
	/*clear: both;*/
	position: absolute;
	left: 50%;
	top: 425px;
	height: 160px;
	width: 320px;
	margin: -80px 0 0 -440px;
	/*border: 1px solid;*/
	opacity: 0;
}

#compareFutureArea {
	/*clear: both;*/
	position: absolute;
	left: 50%;
	top: 425px;
	height: 160px;
	width: 320px;
	margin: -80px 0 0 120px;
	/*border: 1px solid;*/
	opacity: 0;
}

#compareAverageArea.show, #compareFutureArea.show, #resultArea.show, #resultAreaFuture.show {
	opacity: 1;
	/*z-index: 1;*/
}
#compareAverageArea.hide {
	opacity: 0;
	visibility: hidden;
/*	left: -400px;
	margin-left: 0;
*/}

#compareFutureArea.hide {
	opacity: 0;
	visibility: hidden;
/*	left: 100%;
	margin-left: 0;
*/}

.baseFrame, .shadowFrame {
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -46px;
	z-index: 0;
}

.shadowRect {
	position: absolute;
	bottom: 0;
	left: 50%;
	height: 47px;
	width: 0;
	/*background: #d9d9d9;*/
	-webkit-box-shadow: inset 0px 0px 0px 1000px #d9d9d9;
	-moz-box-shadow: inset 0px 0px 0px 1000px #d9d9d9;
	-o-box-shadow: inset 0px 0px 0px 1000px #d9d9d9;
	box-shadow: inset 0px 0px 0px 1000px #d9d9d9;
	z-index: 1;
}

.baseFrame, .stackLabelArrow, .resultDisplay, .personLabelArrow, 
.personLabelText, #resultArea, #resultFutureArea, #compareAverageArea, #compareFutureArea, 
.reduceLabelArrow, .reduceDisplay, #categoryTippsInfo, #tippHint, #impressumContent, #datenschutzContent,
.inputWarning, #resultPerYear.show {
	-webkit-transition: all .7s linear;
	   -moz-transition: all .7s linear;
	    -ms-transition: all .7s linear;
	     -o-transition: all .7s linear;
	        transition: all .7s linear;
}

.shadowFrame, .shadowRect {
	-webkit-transition: all .7s;
	   -moz-transition: all .7s;
	    -ms-transition: all .7s;
	     -o-transition: all .7s;
	        transition: all .7s;
}
#infoStack {
	-webkit-transition: all 1.5s linear;
	   -moz-transition: all 1.5s linear;
	    -ms-transition: all 1.5s linear;
	     -o-transition: all 1.5s linear;
	        transition: all 1.5s linear;
}
footer {
	-webkit-transition: all .4s ease-in-out;
	   -moz-transition: all .4s ease-in-out;
	    -ms-transition: all .4s ease-in-out;
	     -o-transition: all .4s ease-in-out;
	        transition: all .4s ease-in-out;
}

#boxContainerUser, #boxContainerUserFuture, #boxContainerAverage, #boxContainerFuture {
	clear: both;
	position: absolute;
	/*top: 200px;*/
	left: 110px;
	width: 100px;
	bottom: 65px;
	margin: 0;
	display: block;
	z-index: 2;
	/*border:1px solid;*/
}

.box {
/*	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
*/	/*width: 51px;*/
	width: 29px;
	/*height: 58px;*/
	height: 32px;
	position: absolute;
	left: 50%;
	top: 0;
	margin-left: -25px;
	opacity: 0;
	-webkit-transform: translateY(-200px);
	   -moz-transform: translateY(-200px);
		-ms-transform: translateY(-200px);
	 	 -o-transform: translateY(-200px);
			transform: translateY(-200px);
	-webkit-transition: all ease-in 0.7s;
	   -moz-transition: all ease-in 0.7s;
		-ms-transition: all ease-in 0.7s;
		 -o-transition: all ease-in 0.7s;
			transition: all ease-in 0.7s;
	display: block;
}

.boxWohnen.show, .boxKonsum.show, .boxErnaehrung.show, .boxFreizeit.show, .boxMobilitaet.show, 
.boxUrlaub.show, .boxAverage.show, .boxFuture.show, .boxReduce.show, .boxUrlaubReduce.show, 
.boxKonsumReduce.show, .boxFreizeitReduce.show, .boxMobilitaetReduce.show, .boxWohnenReduce.show, .boxErnaehrungReduce.show {
	opacity: 1;
	-webkit-transform: translateY(0);
	   -moz-transform: translateY(0);
		-ms-transform: translateY(0);
		 -o-transform: translateY(0);
			transform: translateY(0);
}
.boxUrlaub, .boxUrlaubReduce {
	/*background-image: url('../img/boxOrange.png');*/
}
.boxMobilitaet, .boxMobilitaetReduce {
	/*background-image: url('../img/boxBlue.png');*/
}
.boxWohnen, .boxWohnenReduce  {
	/*background-image: url('../img/boxPurple.png');*/
}
.boxFreizeit, .boxFreizeitReduce {
	/*background-image: url('../img/boxGreen.png');*/
}
.boxErnaehrung, .boxErnaehrungReduce {
	/*background-image: url('../img/boxRed.png');*/
}
.boxKonsum, .boxKonsumReduce {
	/*background-image: url('../img/boxAqua.png');*/
}
.boxAverage {
	/*background-image: url('../img/boxWhite.png');*/
}
.boxFuture {
	/*background-image: url('../img/boxWhite.png');*/
}
.boxReduce {
	/*background-image: url('../img/boxWhite.png');*/
}

/* BOX CONTAINER STYLES */

.person {
	position: absolute;
	left: 80px;
	bottom: 12px;
}
.personLabelArrow, .reduceLabelArrow {
	position: absolute;
	left: 44px;
	bottom: 36px;
	opacity: 0;
}
.personLabelText {
	position: absolute;
	left: 4px;
	bottom: 84px;
	width: 80px;
	opacity: 0;
	text-align: center;
	-webkit-transform: rotate(-5.5deg);
	   -moz-transform: rotate(-5.5deg);
	    -ms-transform: rotate(-5.5deg);
	     -o-transform: rotate(-5.5deg);
	        transform: rotate(-5.5deg);
}
.personLabelArrow.show, .personLabelText.show, .futureLabelArrow.show, .futureLabelText.show, .averageLabelArrow.show, .averageLabelText.show, .reduceLabelArrow.show  {
	opacity: 1;
}

.futureLabelArrow {
	position: absolute;
	left: 44px;
	bottom: 36px;
	opacity: 0;
}
.futureLabelText {
	position: absolute;
	left: 4px;
	bottom: 84px;
	width: 80px;
	opacity: 0;
	text-align: center;
	-webkit-transform: rotate(-5.5deg);
	   -moz-transform: rotate(-5.5deg);
	    -ms-transform: rotate(-5.5deg);
	     -o-transform: rotate(-5.5deg);
	        transform: rotate(-5.5deg);
}

.stackLabelArrow {
	position: absolute;
	left: 20px;
	bottom: -72px;
	opacity: 0;
}
.stackLabelArrow.show {
	opacity: 1;
}

.showResult {
	position: absolute;
	left:0;
	bottom: -40px;
	text-transform: uppercase;
	cursor: pointer;
}

.resultDisplay {
	position: absolute;
	bottom: -100px;
	text-align: center;	
	width: 100%;
	color: #4c4c4c;
	opacity: 0;
}

.resultDisplay.show, .categoryDisplay.show, .reduceDisplay.show {
	opacity: 1;
	z-index: 3;	
}


.resultDisplay p, .categoryDisplay p, .personLabelText, .reduceDisplay p, #tippHint p {
	font-size: 14px;
	font-weight: 300;	
	line-height: 16px;
	text-transform: uppercase;
}

.categoryDisplay p strong, .resultDisplay p strong, .reduceDisplay p strong, #tippHint p strong {
	font-weight: 500;	
}

.resultDisplay h1, .reduceDisplay h1 {
	font-size: 22px;
	margin-top: 6px;	
	line-height: 36px;
}
.resultDisplay h1 strong, .reduceDisplay h1 strong {
	font-size: 36px;
}

.categoryDisplay {
	position: absolute;
	bottom: 109px;
	left: 195px;
	width: 180px;
	-webkit-transform: rotate(-4deg);
	   -moz-transform: rotate(-4deg);
	    -ms-transform: rotate(-4deg);
	     -o-transform: rotate(-4deg);
	        transform: rotate(-4deg);
	-webkit-transition: opacity .7s linear;
	   -moz-transition: opacity .7s linear;
	    -ms-transition: opacity .7s linear;
	     -o-transition: opacity .7s linear;
	        transition: opacity .7s linear;
	text-align: center;
	color: #4c4c4c;	
	opacity: 0;
}

.reduceDisplay {
	position: absolute;
	bottom: 108px;
	left: 200px;
	width: 180px;
	-webkit-transform: rotate(-2deg);
	   -moz-transform: rotate(-2deg);
	    -ms-transform: rotate(-2deg);
	     -o-transform: rotate(-2deg);
	        transform: rotate(-2deg);
	-webkit-transition: opacity .7s linear;
	   -moz-transition: opacity .7s linear;
	    -ms-transition: opacity .7s linear;
	     -o-transition: opacity .7s linear;
	        transition: opacity .7s linear;
	text-align: center;
	color: #4c4c4c;	
	opacity: 0;
}
.reduceLabelArrow {
	top: 84px;
	left: 21px;
}

#compareFututeArea .categoryDisplay {

}

#compareAverageArea .categoryDisplay {
	left: -24px;
}
#compareAverageArea .categoryDisplay .stackLabelArrow {
	bottom: -50px;
	left: 87px;
}
.categoryDisplay h2 {
	font-size: 18px;
	margin-top: 3px;
}
.categoryDisplay h2 strong {
	font-size: 22px;
}

#compareAverageArea .resultDisplay, #compareFutureArea .resultDisplay {
	-webkit-transition: all 2.5s linear;
	   -moz-transition: all 2.5s linear;
	    -ms-transition: all 2.5s linear;
	     -o-transition: all 2.5s linear;
	        transition: all 2.5s linear;
}

#compareAverageArea .resultDisplay h1, #compareFutureArea .resultDisplay h1 {
	font-size: 16px;
	margin-top: 10px;	
	line-height: 36px;
}
#compareAverageArea .resultDisplay h1 strong, #compareFutureArea .resultDisplay h1 strong {
	font-size: 24px;
}
/* END BOX CONTAINER STYLES */


/* InfoStack */
#infoStack {
	position: absolute;
	width: 200px;
	height: 200px;
	top: 360px;
	left: 50%;
	margin-left: -580px;
	z-index: 99;
	-webkit-transition-delay: 1s;
	   -moz-transition-delay: 1s;
	    -ms-transition-delay: 1s;
	     -o-transition-delay: 1s;
	        transition-delay: 1s;
}
#infoStack.hide {
	left: -100%;
}

#infoStack.top {
	z-index: 102;
	-webkit-transition-delay: 0s;
	   -moz-transition-delay: 0s;
	    -ms-transition-delay: 0s;
	     -o-transition-delay: 0s;
	        transition-delay: 0s;	
}

.infoPaper {
	position: absolute;
	top: 0;
	left: 0;
	width: 160px;
	height: 160px;
	-webkit-transform-origin: 50% 50%;
	   -moz-transform-origin: 50% 50%;
	    -ms-transform-origin: 50% 50%;
	     -o-transform-origin: 50% 50%;
	        transform-origin: 50% 50%;
}

.infoPaper.bottom {
	background: #d8d8d8;
	-webkit-transform: rotate(-16deg);
	   -moz-transform: rotate(-16deg);
	    -ms-transform: rotate(-16deg);
	     -o-transform: rotate(-16deg);
	        transform: rotate(-16deg);

} 
.infoPaper.middle {
	background: #e5e5e5;
	-webkit-transform: rotate(-23deg);
	   -moz-transform: rotate(-23deg);
	    -ms-transform: rotate(-23deg);
	     -o-transform: rotate(-23deg);
	        transform: rotate(-23deg);
} 
.infoPaper.top {
	background: #fff;
	-webkit-transform: rotate(-7deg);
	   -moz-transform: rotate(-7deg);
	    -ms-transform: rotate(-7deg);
	     -o-transform: rotate(-7deg);
	        transform: rotate(-7deg);
} 

.infoPaper.bottom.access {
	background: #ebd580;
}
.infoPaper.middle.access {
	background: #f5df85;
}
.infoPaper.top.access {
	background: #ffe88b;
	cursor: pointer;
}

.infoPaper.top h2 {
	font-size: 16px;
	font-weight: 300;
	margin: 10px;
	text-transform: uppercase;
}
.infoPaper.top h2 strong {
	font-weight: 400;
}
.infoPaper.top p {
	font-size: 14px;
	font-weight: 300;
	margin: 10px;
	line-height: 17px;
}

.infoPaper.top.show {
	width: 250px;
	height: 250px;
	left: 175px;
	top: 0px;
	z-index: 1005;
	-webkit-transform: rotate(-4deg);
	   -moz-transform: rotate(-4deg);
	    -ms-transform: rotate(-4deg);
	     -o-transform: rotate(-4deg);
	        transform: rotate(-4deg);


}
.infoPaper.top .tipLabel {
	opacity: 0;
	margin: 10px;
	-webkit-transition-delay: .7s;
	   -moz-transition-delay: .7s;
	    -ms-transition-delay: .7s;
	     -o-transition-delay: .7s;
	        transition-delay: .7s;	

}
.infoPaper.top.access .tipLabel {
	opacity: 1;
}
.infoPaper.top .tipContent {
	opacity: 0;
	width: 230px;
	-webkit-transition-delay: 0s;
	   -moz-transition-delay: 0s;
	    -ms-transition-delay: 0s;
	     -o-transition-delay: 0s;
	        transition-delay: 0s;
}
.infoPaper.show .tipLabel {
	opacity: 0;
	visibility: hidden;
	height: 0;
	margin: 0;
	-webkit-transition-delay: 0s;
	   -moz-transition-delay: 0s;
	    -ms-transition-delay: 0s;
	     -o-transition-delay: 0s;
	        transition-delay: 0s;	
}
.infoPaper.show .tipContent, .infoPaper.show .tippClose {
	opacity: 1;
	-webkit-transition-delay: .7s;
	   -moz-transition-delay: .7s;
	    -ms-transition-delay: .7s;
	     -o-transition-delay: .7s;
	        transition-delay: .7s;
}

.infoPaper.top {
	-webkit-transition: all .5s ease-in-out;
	   -moz-transition: all .5s ease-in-out;
	    -ms-transition: all .5s ease-in-out;
	     -o-transition: all .5s ease-in-out;
	        transition: all .5s ease-in-out;
}
.infoPaper .tippClose {
	opacity: 0;
}

#tippHint {
	position: absolute;
	text-align: center;
	top: -95px;
	right: 8px;
	opacity: 0;
	visibility: hidden;
}
#tippHint.show {
	opacity: 1;
	visibility: visible;
}
.tippHintArrow {
	position: absolute;
	left: 10px;
	top: 35px;
}
#tippHint p {
	-webkit-transform: rotateZ(10deg);
	   -moz-transform: rotateZ(10deg);
	    -ms-transform: rotateZ(10deg);
	     -o-transform: rotateZ(10deg);
	        transform: rotateZ(10deg);
}


#popUpBack, .popUp {
	-webkit-transition: all .5s linear;
	   -moz-transition: all .5s linear;
	    -ms-transition: all .5s linear;
	     -o-transition: all .5s linear;
	        transition: all .5s linear;	
}

#popUpBack {
	position: fixed;
	top: 0px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9009;
	background: #000;
	opacity: 0;
	visibility: hidden;
}
#popUpBack.show {
	z-index: 9009;
	opacity: 0.3;
	visibility: visible;
}

.popUp {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 400px;
	height: 200px;
	margin: -100px 0 0 -200px;
	background: #fff;
	z-index: 9010;
	-webkit-transform: scale(0) rotateZ(20deg);
	   -moz-transform: scale(0) rotateZ(20deg);
	    -ms-transform: scale(0) rotateZ(20deg);
	     -o-transform: scale(0) rotateZ(20deg);
	        transform: scale(0) rotateZ(20deg);
	padding: 20px;
	/*visibility: hidden;*/
}
.popUp.show {
	z-index: 9010;
	-webkit-transform: scale(1) rotateZ(-1deg);
	   -moz-transform: scale(1) rotateZ(-1deg);
	    -ms-transform: scale(1) rotateZ(-1deg);
	     -o-transform: scale(1) rotateZ(-1deg);
	        transform: scale(1) rotateZ(-1deg);
	visibility: visible;
}
#socialPopUp {
	background: #e5e53c;
}
#socialPopUp.hideLeft {
	left: -100%;
}
#endPopUp {
  	width: 700px;
  	height: 640px;
  	margin: -320px 0 0 -380px;
  	line-height: 18px;
  	padding: 0 30px 30px;
}
#endPopUp h2 {
	font-size: 18px;
	 margin-top: 30px;
}
.popUp h3 {
	/*margin: 10px;*/
	font-size: 24px;
	font-weight: 300;
}
.popUp p {
	margin: 20px 0 0;
	font-size: 14px;
	font-weight: 300;
}
.popUp p strong {
	font-weight: 400;
}
#skipPopUp {
	background: #e5e53c;	
}
#skipPopUp h3 {
	font-size: 18px;
	font-weight: 500;
}
.button {
	font-size: 14px;
	line-height: 24px;
	font-weight: 300;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;
}
.button.left {
	float: left;
}
.button.right {
	float: right;
}
.button.large {
	font-size: 22px;
	line-height: 24px;
	font-weight: 400;
}
.popUpNav {
	position: absolute;
	left: 50px;
	right: 50px;
	bottom: 20px;
}

#socialDataIntro {
	position: absolute;
	width: 190px;
	height: 190px;
	background: #ffe88b;
	-webkit-transform: rotateZ(-4.5deg);
	   -moz-transform: rotateZ(-4.5deg);
	    -ms-transform: rotateZ(-4.5deg);
	     -o-transform: rotateZ(-4.5deg);
	        transform: rotateZ(-4.5deg);
	padding: 20px;
	z-index: 1200;
	top: 180px;
	left: 50%;
	margin-left: -400px;
	-webkit-transition: all 1s ease-out;
	   -moz-transition: all 1s ease-out;
	    -ms-transition: all 1s ease-out;
	     -o-transition: all 1s ease-out;
	        transition: all 1s ease-out;
	-webkit-transition-delay: .5s;
	   -moz-transition-delay: .5s;
	    -ms-transition-delay: .5s;
	     -o-transition-delay: .5s;
	        transition-delay: .5s;
}
#socialDataIntro.hide {
	top: -600px;
	-webkit-transition-delay: 0s;
	   -moz-transition-delay: 0s;
	    -ms-transition-delay: 0s;
	     -o-transition-delay: 0s;
	        transition-delay: 0s;
}
#socialDataIntro h2 {
	font-size: 16px;
	font-weight: 400;
	margin-bottom: 15px;
}
#socialDataIntro p {
	font-size: 14px;
	font-weight: 300;
}
#socialDataIntro .popUpNav {
	left: 20px;
	right: 20px;
}
#socialDataIntro .button {
	font-size: 11px;
}
#socialDataIntro .large {
	font-size: 16px;
	font-weight: 400;	
}
.clear-left {
	clear: left;
}
.social-subline {
	color: #000;
	font-size: 0.8em;
	position: relative;
	left: 20px;
	display: block;	
}

.socialPage p, .socialPage h3, .socialPage > div {
	-webkit-transition: all .5s linear;
	   -moz-transition: all .5s linear;
	    -ms-transition: all .5s linear;
	     -o-transition: all .5s linear;
	        transition: all .5s linear;
}

.socialPage.transparent p, .socialPage.transparent h3, .socialPage.transparent > div {
	opacity: 0.2;
}

.categoryTipp {
	position: absolute;
	width: 480px;
	height: 300px;
	left:50%;
	top: 160px;
	/*margin: -215px 0 0 -340px;*/
	margin: 0 0 0 -255px;
	padding: 15px;
	color: #000;	
	-webkit-transition: all ease-in-out 0.8s;
	   -moz-transition: all ease-in-out 0.8s;
	    -ms-transition: all ease-in-out 0.8s;
		 -o-transition: all ease-in-out 0.8s;
	        transition: all ease-in-out 0.8s;
	/*text-align: center;*/
	background: #fff;
	z-index: -1;
	opacity: 0;
}
.categoryTipp.show {
	top: 235px;

	z-index: 1003;
	opacity: 1;
	-webkit-transform: translateX(0) rotateZ(0deg) !important;
	   -moz-transform: translateX(0) rotateZ(0deg) !important;
	    -ms-transform: translateX(0) rotateZ(0deg) !important;
	     -o-transform: translateX(0) rotateZ(0deg) !important;
	        transform: translateX(0) rotateZ(0deg) !important;

}

.categoryTipp h2 {
	font-size: 18px;
	line-height: 18px;
	font-weight: 300;
	text-transform: uppercase;
	position: absolute;
	top: 60px;
	left: 90px;	
}
.categoryTipp .tippContent {
	font-size: 16px;
	font-weight: 300;
	position: absolute;
	left: 20px;
	right: 20px;
	top: 110px;
	margin-bottom: 10px;
	line-height: 1.3em;
}

.categoryTipp .categoryIcon {
	position: absolute;
	top: 14px;
	left: 20px;
	height: 65px;

}

.categoryTipp .restartCategory {
	position: absolute;
	font-size: 14px;
	line-height: 22px;	
	font-weight: 300;
	text-transform: uppercase;
	-webkit-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;
	cursor: pointer;
	/*width: 240px;*/
	left:50%;
	/*margin-left: -130px;*/
	text-align: center;
	bottom: 30px;
	-webkit-transform: translateX(-50%);
	   -moz-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	     -o-transform: translateX(-50%);
	        transform: translateX(-50%);
}
.restartCategory img {
	float: none;
	position: absolute;
	right: -15px; 
}
.restartCategory p {
	white-space: nowrap;
	float: none;
}
#tippWohnen {
	-webkit-transform: translateX(-90px) rotateZ(-5deg);
	   -moz-transform: translateX(-90px) rotateZ(-5deg);
	    -ms-transform: translateX(-90px) rotateZ(-5deg);
	     -o-transform: translateX(-90px) rotateZ(-5deg);
	        transform: translateX(-90px) rotateZ(-5deg);
}
#tippKonsum {
	-webkit-transform: translateX(-60px) rotateZ(-4deg);
	   -moz-transform: translateX(-60px) rotateZ(-4deg);
	    -ms-transform: translateX(-60px) rotateZ(-4deg);
	     -o-transform: translateX(-60px) rotateZ(-4deg);
	        transform: translateX(-60px) rotateZ(-4deg);
}
#tippErnaehrung {
	-webkit-transform: translateX(-30px) rotateZ(-3deg);
	   -moz-transform: translateX(-30px) rotateZ(-3deg);
	    -ms-transform: translateX(-30px) rotateZ(-3deg);
	     -o-transform: translateX(-30px) rotateZ(-3deg);
	        transform: translateX(-30px) rotateZ(-3deg);
}
#tippFreizeit {
	-webkit-transform: translateX(30px) rotateZ(2deg);
	   -moz-transform: translateX(30px) rotateZ(2deg);
	    -ms-transform: translateX(30px) rotateZ(2deg);
	     -o-transform: translateX(30px) rotateZ(2deg);
	        transform: translateX(30px) rotateZ(2deg);
}
#tippMobilitaet {
	-webkit-transform: translateX(60px) rotateZ(3deg);
	   -moz-transform: translateX(60px) rotateZ(3deg);
	    -ms-transform: translateX(60px) rotateZ(3deg);
	     -o-transform: translateX(60px) rotateZ(3deg);
	        transform: translateX(60px) rotateZ(3deg);
}
#tippUrlaub {
	-webkit-transform: translateX(90px) rotateZ(4deg);
	   -moz-transform: translateX(90px) rotateZ(4deg);
	    -ms-transform: translateX(90px) rotateZ(4deg);
	     -o-transform: translateX(90px) rotateZ(4deg);
	        transform: translateX(90px) rotateZ(4deg);
}

.tippClose {
	position: absolute;
	right: 10px;
	top: 10px;
	cursor: pointer;
}

#categoryTippsInfo {
	position: absolute;
	top: 170px;
	height: 45px;
	width: 550px;
	left: 50%;
	margin-left: -190px;
	opacity: 0;
	visibility: hidden;
}
#categoryTippsInfo.show, #resultNav-container .saveRessourcesButton.show, #resultNav-container .showResultButton.show {
	opacity: 1;
	visibility: visible;
	-webkit-transition-delay: 1s;
	   -moz-transition-delay: 1s;
	    -ms-transition-delay: 1s;
	     -o-transition-delay: 1s;
	        transition-delay: 1s;
}
#categoryTippsInfo img, #categoryTippsInfo p {
	float: left;
    -webkit-transform-origin: right bottom;

}
#categoryTippsInfo p {
	margin: 20px 10px 0;
	cursor: default !important;
}
.buttonText {
	font-size: 14px;
	line-height: 22px;	
	font-weight: 300;
	text-transform: uppercase;
	-webkit-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;
	cursor: pointer;
}

.pulse {
    -webkit-animation: pulsate 3s ease-in-out;
       -moz-animation: pulsate 3s ease-in-out;
    	-ms-animation: pulsate 3s ease-in-out;
    	 -o-animation: pulsate 3s ease-in-out;
    		animation: pulsate 3s ease-in-out;

    -webkit-animation-iteration-count: infinite;
       -moz-animation-iteration-count: infinite;
    	-ms-animation-iteration-count: infinite;
    	 -o-animation-iteration-count: infinite;
    		animation-iteration-count: infinite;	
}

.rightArrowPulse {
    -webkit-animation: rightArrowPulsate 2s ease-in-out;
       -moz-animation: rightArrowPulsate 2s ease-in-out;
    	-ms-animation: rightArrowPulsate 2s ease-in-out;
    	 -o-animation: rightArrowPulsate 2s ease-in-out;
    		animation: rightArrowPulsate 2s ease-in-out;

    -webkit-animation-iteration-count: infinite;
       -moz-animation-iteration-count: infinite;
    	-ms-animation-iteration-count: infinite;
    	 -o-animation-iteration-count: infinite;
    		animation-iteration-count: infinite;	
}


@-webkit-keyframes rightArrowPulsate {
    0% {
        -webkit-transform: translateX(0px);
        opacity: 1;
    }    
    50% {
        opacity: 1;
        -webkit-transform: translateX(5px);
    }
    99% {
        opacity: 1;
        -webkit-transform: translateX(-0px);
    }
    100% {
        -webkit-transform: translateX(0px);
        opacity: 1;
    }    
}
@-moz-keyframes rightArrowPulsate {
    0% {
        -moz-transform: translateX(0px);
        opacity: 1;
    }    
    50% {
        opacity: 1;
        -moz-transform: translateX(5px);
    }
    99% {
        opacity: 1;
        -moz-transform: translateX(-0px);
    }
    100% {
        -moz-transform: translateX(0px);
        opacity: 1;
    }    
}
@-ms-keyframes rightArrowPulsate {
    0% {
        -ms-transform: translateX(0px);
        opacity: 1;
    }    
    50% {
        opacity: 1;
        -ms-transform: translateX(5px);
    }
    99% {
        opacity: 1;
        -ms-transform: translateX(-0px);
    }
    100% {
        -ms-transform: translateX(0px);
        opacity: 1;
    }    
}
@-o-keyframes rightArrowPulsate {
    0% {
        -o-transform: translateX(0px);
        opacity: 1;
    }    
    50% {
        opacity: 1;
        -o-transform: translateX(5px);
    }
    99% {
        opacity: 1;
        -o-transform: translateX(-0px);
    }
    100% {
        -o-transform: translateX(0px);
        opacity: 1;
    }    
}
@keyframes rightArrowPulsate {
    0% {
        transform: translateX(0px);
        opacity: 1;
    }    
    50% {
        opacity: 1;
        transform: translateX(5px);

    }
    99% {
        opacity: 1;
        transform: translateX(-0px);

    }
    100% {
        transform: translateX(0px);
        opacity: 1;
    }    
}

#saveRessourcesHint {
	position: absolute;
	top: 165px;
	width: 320px;
	height: 380px;
	left: 50%;
	margin-left: -160px;
	text-align: center;
	opacity: 0;
	/*visibility: hidden;*/
	z-index: 90;
	background: rgba(239,239,239,0.85);	
}
#saveRessourcesHint.show {
	opacity: 1;
	visibility: visible;
	-webkit-transition: all .75s linear;
	   -moz-transition: all .75s linear;
	    -ms-transition: all .75s linear;
	     -o-transition: all .75s linear;
	        transition: all .75s linear;
	-webkit-transition-delay: 2s;
   	   -moz-transition-delay: 2s;
    	-ms-transition-delay: 2s;
         -o-transition-delay: 2s;
            transition-delay: 2s;

}
.bold {
	font-size: 14px;
	font-weight: 300;
	margin: 55px 0;
}
#saveRessourcesHint p.buttonText {
	/*margin: 25px 0;*/
	cursor: default;
}
/*#saveRessourcesHint img.hintCategory, #saveRessourcesHint img.hintRestart {
	margin-left: -8px;
	left: 50%;
}
*/

#backgroundArea {
	background: #f00;
	position: relative;
	top: 0;
	max-width: 1200px;
	margin: 0 auto;
	height: 100%;
	display: block;
}
footer {
position: absolute;
margin: 0 auto;
width: 100%;
/*max-width: 1200px;*/
bottom: 0px;
background: #fff;
height: 40px;
line-height: 40px;	
z-index: 9004;
overflow: hidden;
	/*border-bottom: 3px solid #e5e5e5;*/
	/*border-left: 1px solid #e5e5e5;*/
	/*border-right: 1px solid #e5e5e5;*/
}

footer a {
text-decoration: none;
color: #333 !important;
font-size: 13px;
text-transform: none !important;
font-weight: 300;
margin: 0 15px;
float: right;	
}

footer.expand {
	height: 722px;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

.footerNav {
	position: absolute;
	left: 25px;
	right: 25px;
	bottom: 0;
	height: 40px;
}
.footerNav li {
	text-align: center;
}
#impressumLink, #datenschutzLink, #kontaktLink, #aboutLink {
	float: right;
	margin: 0 0 0 3%;
	bottom: 0;
	/*width: 23%;*/
}
#aboutLink {
	overflow: visible;
	white-space: nowrap;
	float: left;
	margin-left: 0;
	font-weight: 500;
	color: #29abe2 !important;	
}

#resultPerYear {
    position: relative;
    top: 40px;
    text-align: center;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 14px;	
    line-height: 18px;
    opacity: 0;
    -webkit-transform: translateX(0px);
       -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
         -o-transform: translateX(0px);
            transform: translateX(0px);
}
#resultPerYear.show {
	opacity: 1;
}


footer.expand #impressumLink, footer.expand #datenschutzLink, footer.expand #kontaktLink, footer.expand #aboutLink {
	display: none;
}

.footerContent {
	width: 80%;
	position: absolute;
	top: 80px;
	left: 10%;
}
.footerContent p, a.contentLink {
	font-size: 14px;
  	line-height: 18px;
  	font-weight: 300;
  	margin-bottom: 8px;
}
.footerContent h3 {
	font-size: 18px;
	font-weight: 300;
  	margin: 40px 0 8px;
  	line-height: 22px;
}
.footerContent h2 {
	font-size: 28px;
	margin-bottom: 10px;
	font-weight: 300;
}
a.contentLink {
	position: static;
	text-transform: none;
	float:none;
	margin: 0; 
}
.footerContent p:last-child{
	margin-bottom: 100px;
}

#footerClose, #endTippClose {
	position: fixed;
	left: 50%;
	top: 50%;
  	margin-top: -300px;
  	margin-left: 402px;
  	z-index: 9012;
  	text-align: right;
  	width: 200px;
  	opacity: 0;
  	visibility: hidden;
  	-webkit-transition-delay: 0s;
  	   -moz-transition-delay: 0s;
  	    -ms-transition-delay: 0s;
  	     -o-transition-delay: 0s;
  	        transition-delay: 0s;
}
#footerClose.show {
	opacity: 1;
	visibility: visible;
  	-webkit-transition-delay: 1s;
  	   -moz-transition-delay: 1s;
  	    -ms-transition-delay: 1s;
  	     -o-transition-delay: 1s;
  	        transition-delay: 1s;
}
#endPopUp.show #endTippClose {
	display: none;
	opacity: 1;
	visibility: visible;
}
#footerClose span, #endTippClose span {
	font-size: 14px;
	font-weight: 300;
	margin-right: 5px;
	color: #808080;
}
#endPopUp.show #endTippClose { 
	top: 20px;
  	margin: 0;
	display: block;
	right: 20px;
	left: auto;
}	
#closeEnd {
	font-size: 18px;
}

@media screen and (max-width: 1280px) {
	#footerClose {
		left: auto;
		right: 20px;
	}
}
@media screen and (max-height: 800px) {
	#footerClose, #endPopUp.show #endTippClose {
		top: 10px;
		margin-top: 0;
	}	
	#endPopUp.show #endTippClose { 
		top: 20px;
  		margin: 0;
		display: block;
  		right: 20px;
  		left: auto;
	}
	footer.expand {
		top: 0;
	}
}

#impressumContent, #datenschutzContent, #kontaktContent, #aboutContent {
	opacity: 0;
	display: none;
	visibility: hidden;
}
#impressumContent.show, #datenschutzContent.show, #kontaktContent.show, #aboutContent.show {
	display: block;
	opacity: 1;
	visibility: visible;
}
#impressumContent, #datenschutzContent {
	opacity: 1;
	display: block;
	visibility: visible;
	position: static;
	top: auto;
	width: 800px;
}

#impressumContent h4, #datenschutzContent h4 {
	font-weight: 300;
	margin: 2rem 0 0.5rem;
}

#impressumContent ul, #datenschutzContent ul {
	list-style: disc;
	margin: 1rem 2rem;	
}
#impressumContent li, #datenschutzContent li {
	margin-bottom: 0.5rem;
	font-weight: 300;
	font-size: 14px;
	line-height: 18px;
}


#socialShare {
    position: absolute;
    z-index: 9003;
    width: 600px;
    top: 50%;
    left: 50%;
    margin-left: 0;
    display: none;
    -webkit-transform: translate3d(-50%,-50%,0);
       -moz-transform: translate3d(-50%,-50%,0);
        -ms-transform: translate3d(-50%,-50%,0);
         -o-transform: translate3d(-50%,-50%,0);
            transform: translate3d(-50%,-50%,0);
    margin-top: -10px;
}

#socialShare.show {
	display: block;
}
.fb-like, .twitter-share-button {
	float: left;
}
.twitter-share-button {
	margin-left: 4px;
	margin-top: 20px;
}
.hintCategory {
	margin: 25px 0 4px;
}

.hintCategorySub {
	font-weight: 300;
  	font-size: 13px;
}

.hintRestart {
	margin: 0 0 25px;
}

#scrollSign {
  position: fixed;
  margin: 0px 0 -350px -30px;
  background: rgba(255,255,255,0.9);
  bottom: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #29abe2;
  color: #333;
  line-height: 40px;
  /*text-align: center;	*/
  font-weight: 300;
  font-size: 18px; 	
  /*padding-left: 20px;*/
  z-index: 9005;
  -webkit-transition: all .7s linear;
     -moz-transition: all .7s linear;
      -ms-transition: all .7s linear;
       -o-transition: all .7s linear;
          transition: all .7s linear;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;

}
#scrollSign.top {
	visibility: visible;
	opacity: 1;
}
#scrollSign.bottom {
	visibility: visible;
	opacity: 1;
	-webkit-transform: rotateZ(-90deg);
	   -moz-transform: rotateZ(-90deg);
	    -ms-transform: rotateZ(-90deg);
	     -o-transform: rotateZ(-90deg);
	        transform: rotateZ(-90deg);
}
#scrollSign img {
  position: absolute;
  bottom: 50%;
  left: 50%;
  margin-left: -12px;
  margin-bottom: -8px;	
}

#language-switch {
	position: absolute;
	top: 0px;
	left: 0px;
	z-Index: 10;
	display: none;
	text-transform: uppercase;
}
#language-switch.intro-page {
	display: block;
	position: static;
	width: 800px;
	margin: 130px auto 50px;
}
#language-switch.show {
	display: block;
}

/*TEMP OVERLAY*/
#overlay-result p {
	float: left;
}
#overlay-result p.result-value {
	font-weight: 700;
	margin-left: 10px;
	margin-bottom: 5px;
}
#overlay-result p.result-title {
	clear:left;
	line-height: 1em;
	font-size: 0.8em;
}

/*NEW STYLES FOR TEMP VALUES*/
.temp-checked-show {
	color: rgba(0,0,0,0.7);	
}
.temp-checked-show:after {
	// content: 'ursprüngliche Auswahl';
	font-size: 0.8em;
	color: rgba(0,0,0,0.7);
	float: left;
	margin-left: 10px;
}
.temp-checked-show._EN:after {
	// content: 'initial choice';
}
.temp-value {
    font-size: 0.8em;
    color: rgba(0,0,0,0.7);
    margin-left: 10px;
    display: none;
    position: absolute;
}
.temp-value.show {
	display: inline;
}

/*UPDATES NEW INFO PANEL*/
#info-panel {
	position: absolute;
	top: 50%;
	left: -100%;
	/*margin: -100px 0  0 250px;*/
	margin: -75px 0px 0 -400px;	
	padding: 15px;
	width: 210px;
	height: 270px;
	background: #fff;
	z-index: 101;
	display: block;
	-webkit-transition: all 0.8s ease-in-out;
	   -moz-transition: all 0.8s ease-in-out;
	    -ms-transition: all 0.8s ease-in-out;
	     -o-transition: all 0.8s ease-in-out;
	        transition: all 0.8s ease-in-out;
	-webkit-transform: rotate(-1deg);
	   -moz-transform: rotate(-1deg);
	    -ms-transform: rotate(-1deg);
	     -o-transform: rotate(-1deg);
	        transform: rotate(-1deg);
}
#info-panel.show {
	display: block;
	left: 50%;	
}
#info-top {
	height: 135px;
}
.panel-title-small, .panel-title {
    text-transform: uppercase;
}
.panel-title-small {
    font-size: 13px;
    line-height: 1.25em;
}
.panel-title {
    margin-top: 5px;
    font-weight: 700;
    font-size: 1em;
}
.panel-change {
	width: 100%;
	text-align: center;
	font-size: 1em;
	font-weight: 700;
	margin: 20px 0;
	position: relative;
}
.panel-change span {
	font-size: 2em;
	margin-right: 5px;
}
.panel-change span:last-child {
    font-size: 1.2em;
}

.icon-change-arrow {
    position: absolute;
    top: -3px;
    left: 50%;
    margin-left: -30px;
    z-index: -1;
    display: none;
}
.icon-change-arrow.show {
	display: block;
}

#info-panel hr {
	margin: 0 0 20px 0;
}

#tip-panel {
    display: block;
    height: 135px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    box-sizing: border-box;
    padding: 15px;
}
#tip-panel.hide {
	display: none;
}
#tip-panel h3 {
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 5px;
}
#tip-panel p {
	font-size: 14px;
	line-height: 1.25em;
}


/*PRINT UPDATES*/
#print-header, #print-infotext, #print-comparison {
	display: none;
}
#start-print, #escape-print {
	display: none;
}

#info-panel .mobile-close, .mobile-panel-icon {
	display: none;
}

#mobile-panel-icon-back {
   	display: none;
}

@media screen and (max-width: 800px), screen and (max-height: 799px) {
	.navIco {
		height: 25px;
		background-size: auto 25px;
	}
	.progressContainer {
		width: 83px;
	}
	.navItem {
		font-size: 10px;
	}
	header nav {
		width: 550px;
		top: 60px;
		margin-left: -275px;
	}

	header {
		background: #fff;
		height: 50px;
		border-bottom: 3px solid #e5e5e5;
		margin: 0 auto;
	}
	#rucksackLogo {
		margin: 8px 25px 0 25px;
		float: left;
		height: 35px;
	}
	#wuppertalInstitutLogo {
		margin: 10px 25px 0 25px;
		float: right;
		height: 30px;
	}

	#questionContainer {
		top: -70px;
		left: 0;
		right: 0;
		bottom: 0;		
		margin-left: 0;
		width: auto;
	}

	.question {
	width: 550px;
	height: 300px;
	margin: 0 0 0 -290px;
	}

	.question h2 {
	font-size: 16px;
	text-align: left;
	/*margin-top: 30px;*/
	}

	.question h3 {
	font-size: 12px;
	text-align: left;
	font-weight: 400;
	margin-top: 1px;
	line-height: 14px;
	/*margin-bottom: 10px;*/
	}	
	.optionSkip {
		margin-top: 10px;
	}

	.answers, .inputArea .unit {
		font-size: 14px;
	}
	.answerSubtitle {
		line-height: 20px;
	}
	.answers .li.option {
		margin-bottom: 3px;
	}
	.answers .title h3 {
		margin-top: 30px;
	}
	.question .title {
		margin-bottom: 15px;
		max-width: 400px;
	}
	.answers .unit {
		margin-bottom: 1px;
	}
	.answerSubtitle, .question h3 {
		font-size: 11px;
	}
	.answers input[type="number"] {
		font-size: 14px;
		height: 18px;
		width: 33px;
	}
	.question .actionAreaContainer {
		position: absolute;
		left: 160px;
		top: 30px;
		right: 20px;
		height: 250px;
		display: table;
	}
	.answers li.option label {
		width: 370px;
		margin-bottom: 0;
	}
	#questionContainer .number h4 {
		font-size: 16px;
	}
	#questionContainer .number p {
		font-size: 60px;
		top: 30px;
		left: 0px;
	}
	#questionContainer .theme {
		font-size: 12px;
	}
	#resultArea, #resultAreaFuture, #compareAverageArea, #compareFutureArea {
		top: 300px;
	}
	.resultDisplay h1, .reduceDisplay h1 {
		font-size: 16px;
		margin-top: 0;
	}
	.resultDisplay h1 strong, .reduceDisplay h1 strong {
		font-size: 28px;
	}
	#compareAverageArea .resultDisplay h1, #compareFutureArea .resultDisplay h1 {
		font-size: 16px;
		margin-top: 4px;
	}
	#compareAverageArea .resultDisplay h1 strong, #compareFutureArea .resultDisplay h1 strong {
		font-size: 20px;	
	}
	#compareAverageArea {
		margin: -80px 0 0 -380px;
	}
	#compareFutureArea {
		margin: -80px 0 0 60px;
	}
	#resultArea.moveLeft {
		margin-left: -380px;
	}

	#questionNav {
		top: 305px;
		width: 570px;
		margin-left: -285px;
	}
	.socialPage {
		z-index: 105;
		color: #000;
		font-size: 14px;
		padding: 15px;
		width: 550px;
		height: 300px;
		margin-left: -290px;
		top: 135px;
	}
	.socialPage h3, .socialAnswer input[type="number"], #socialDataIntro h2, .infoPaper.top h2 {
		font-size: 14px;
	}
	.socialAnswerContainer label, #socialDataIntro p, .tippClose, .infoPaper.top p, #tippHint p, .categoryTipp .tippContent {
		font-size: 12px;
	}
	.socialAnswerContainer {
		margin-bottom: 25px;
	}
	.socialAnswer.vertical {
		margin-right: 15px;
	}
	.socialNav {
		width: 570px;
		margin-left: -285px;
		/*bottom: -42px;*/
		bottom: -70px;
	}
	#socialDataSheet {
		top: 0;
	}
	#socialDataIntro {
		width: 160px;
		height: 160px;
		top: 125px;
		margin-left: -310px;
	}
	.socialAnswer.fixed {
    	width: 185px;
	}
	#popUpBack {
		top: 0px;
	}
	.popUp {
		position: absolute;
		top: 180px;
		left: 50%;
		width: 300px;
		height: 150px;
		margin-left: -170px;		
	}
	.popUpNav {
		left: 20px;
		right: 20px;
		bottom: 20px;		
	}
	#endPopUp {
		width: 520px;
  		height: auto;
  		margin: 0 0 0 -290px;
  		line-height: 18px;
  		padding: 0 30px 80px;
  		position: absolute;
  		top: 10px;
	}
	.restartButton {
		// top: 420px;
	}
	#saveRessourcesHint {
		top: 100px;
		height: 290px;
	}

	.categoryTipp {
		width: 400px;
		height: 230px;
		top: 100px;
		margin: 0 0 0 -215px;
	}	
	.categoryTipp.show {
		top: 135px;
	}
	.categoryTipp .categoryIcon {
		left: 20px;
		height: 45px;
	}
	.categoryTipp h2 {
		font-size: 16px;
		top: 44px;
		left: 70px;
	}
	#categoryTippsInfo {
		top: 120px;
	}
	#categoryTippsInfo p {
		width: 150px;
	}
	.categoryTipp .tippContent {
		top: 80px;
	}
	.categoryTipp .restartCategory {
		bottom: 20px;
	}

	#infoStack {
		width: 200px;
		height: 200px;
		top: 65px;
		margin-left: -370px;
		z-index: 102;		
	}
	.infoPaper {
		width: 60px;
		height: 60px;
	}
	.infoPaper.top.show {
		width: 200px;
		height: 200px;
		left: 30px;
		top: 175px;
	}
	.infoPaper.top .tipContent {
		width: 180px;
		line-height: 14px;
	}
	#tippHint {
		top: 14px;
		right: 149px;
		z-index: 105;
	}
	.tippHintArrow {
		visibility: hidden;
	}
	#tippHint p {
		line-height: 14px;
		-webkit-transform: rotateZ(-6deg);
		   -moz-transform: rotateZ(-6deg);
		    -ms-transform: rotateZ(-6deg);
		     -o-transform: rotateZ(-6deg);
		        transform: rotateZ(-6deg);
	}


	#container {
		top: 0 !important;
		height: 100%;
		min-height: 650px;
	}
	footer.expand {
		/*top: 53px;*/
		height: 722px;
	}
	#socialShare {
		top: 560px;
	}
	#saveRessourcesHint {
		height: 290px;
	}
	.bold {
		margin: 15px 0;
	}
	#scrollSign {
		margin-bottom: 0;
		bottom: 45px; 
	}
	#scrollSign.bottom {
		bottom: 45px;
	}
	.progress-category {
		max-width: 83px;
	}

	#language-switch {
		top: 0px;
	}
	#language-switch.intro-page {
		width: 80%;
		margin-bottom: 150px;
		margin-top: 90px;
	}

}

@media screen and (min-width: 601px) and (max-width: 799px) {
	#questionNav {
		top: 360px !important;
	}
}

@media screen and (max-width: 800px) {
	.navIco {
		height: 25px;
		background-size: auto 25px;
	}
	.progressContainer {
		width: 100%;
		margin: 4px 0;
	}
	.progressBack, .progressShow {
		height: 2px;
	}
	.navItem {
		font-size: 10px;
		width: 15%;
		margin-right: 2%;
	}
	.navItem p {
		display: none;
	}
	header nav {
		width: 90%;
		top: 60px;
		margin-left: 0;
		left: 5%;
	}

	header {
		background: #fff;
		height: 40px;
		border-bottom: 3px solid #e5e5e5;
		margin: 0 auto;
		left: 0;
		width: 100%;
	}
	#resultPerYear {
		top: 18px;
	}
	.mobileTipp #resultPerYear {
		top: 18px;
		-webkit-transform: translateX(-60px);
		   -moz-transform: translateX(-60px);
		    -ms-transform: translateX(-60px);
		     -o-transform: translateX(-60px);
		        transform: translateX(-60px);
	}
	#result-line-01, #result-line-02 {
		white-space: nowrap;
	}
	#rucksackLogo {
		margin: 4px 0px 0 5%;
		height: 32px;
	}
	#wuppertalInstitutLogo {
		margin: 6px 5% 0 25px;
		/*margin: 6px 65px 0 0;*/
		height: 28px;
	}


	#questionContainer {
		top: -90px;
	}

	.question {
		width: 94%;
		height: 340px;
		margin: 0;
		padding: 3%;
		left: 0;
	}
	.question.hide {
		left: -150%;
	}
	.question h2 {
		font-size: 14px;
		text-align: left;
	/*margin-top: 30px;*/
	}

	.question h3 {
		font-size: 12px;
		text-align: left;
		font-weight: 400;
		margin-top: 1px;
		line-height: 14px;
	/*margin-bottom: 10px;*/
	}	
	.optionSkip {
		margin-top: 10px;
	}
	.answers {
		width: 100%;
	}
	.answers, .inputArea .unit, .labelArea .unit {
		font-size: 14px;
	}
	.answers .unit {
		max-width: 210px;
	}
	.answerSubtitle {
		line-height: 20px;
		font-weight: 400;
	}
	.answerSubtitle.break {
	  line-height: 14px !important;
	}
	.answers .li.option {
		margin-bottom: 3px;
	}
	.answers .title h3 {
		font-size: 14px;
		margin-top: 30px;
	}
	.question .title {
		margin-bottom: 15px;
		max-width: 400px;
	}
	.answers .unit {
		margin-bottom: 1px;
	}
	.answerSubtitle, .question h3 {
		font-size: 11px;
		font-weight: 400;
	}
	.answers input[type="number"] {
		font-size: 14px;
		height: 18px;
		width: 33px;
		clear: left;
	}
	.question .actionAreaContainer {
		position: absolute !important;
		left: 3%;
		top: 50px;
		right: 3%;
		height: 300px;
		display: table;
		width: 94%;
	}
	.question .actionArea {
		top: 50%;
		left: 50%;
		position: absolute;
		-webkit-transform: translate3d(-50%,-50%,0);
		   -moz-transform: translate3d(-50%,-50%,0);
		    -ms-transform: translate3d(-50%,-50%,0);
		     -o-transform: translate3d(-50%,-50%,0);
		        transform: translate3d(-50%,-50%,0);
		min-width: 280px;
	}

	.answers li.value .answerTitle {
		margin-bottom: 5px;
	}
	.answers li.option label {
		width: 100%;
		margin-bottom: 0;
	}
	.option .inputArea {
		width: 25px;
	}
	.option .labelArea {
		width: 240px;
	}
	.check-factor .answerTitle {
		max-width: 240px;
	}
	.answerSubtitle.inline {
		/*max-width: 95px;*/
  		/*overflow: hidden;*/
  		/*white-space: nowrap;*/
	}
	#questionContainer .number {
		top: 0;
		left: 0;
		width: 100%;		
	}

	#questionContainer .number h4 {
		font-size: 16px;
		left: 0px;
		top: 0px;
	}
	#questionContainer .number p {
		font-size: 40px;
		top: -8px;
		left: auto;
		line-height: 50px;
		right: -8px;
	}
	
	.question .number .XofY {
		font-size: 40px;
	}

	#questionContainer .theme {
		font-size: 12px;
		left: 0%;
		top: 3px;
	}
	#questionNav {
		top: 335px;
		width: 94%;
		margin-left: 0;
		left: 3%;		
	}
	#resultNav-container .showResultButton {
		/*width: 100%;*/
		/*max-width: 280px;*/
  		margin-left: 0px;
  		font-size: 16px;
  		white-space: normal;
/*  		float: right;
  		right: 0;
  		left: auto;
  		text-align: right;*/
	}
	#resultNav-container .showResultButton p {
		width: 220px;
		margin-right: 10px;
	}
	#resultNav-container .showResultButton img {
		/*margin-top: 11px;*/
	}
	#resultNav-container .end {
		// position: absolute;
  		// top: 100px;
  		// width: 85px;
  		// margin-left: -57px;
  		// left: 50%;
	}
	#resultNav-container .saveRessourcesButton {
		/*top: 40px;*/
	}
	#resultNav {
    	position: absolute;
    	width: 100%;
    	bottom: 30px;
    	margin: 0 0 0px 0px;
    	height: auto;
	}	
	.resultNav-button {
	    margin: -35px 0px 60px;
    	width: 100% !important;
	}


	#resultArea, #resultAreaFuture, #compareAverageArea, #compareFutureArea {
		top: 300px;
	}
	.resultDisplay h1, .reduceDisplay h1 {
		font-size: 16px;
		margin-top: 0;
	}
	.resultDisplay h1 strong, .reduceDisplay h1 strong {
		font-size: 28px;
	}
	#compareAverageArea .resultDisplay h1, #compareFutureArea .resultDisplay h1 {
		font-size: 16px;
		margin-top: 3px;
	}
	#compareAverageArea .resultDisplay h1 strong, #compareFutureArea .resultDisplay h1 strong {
		font-size: 20px;	
	}

	#compareAverageArea {
		margin: -80px 0 0 -320px;
	}
	#compareAverageArea .resultDisplay.show {
	}
	#compareFutureArea {
		margin: -80px 0 0 0px;
	}
	#compareFutureArea .resultDisplay.show {
	}
	#resultArea.moveLeft {
		margin-left: -320px;
	}

	#compareAverageArea .resultDisplay p, #compareFutureArea .resultDisplay p {
		font-size: 11px;
		line-height: 14px;
	}
	#resultArea .resultDisplay p, #resultAreaFuture .resultDisplay p {
		font-size: 11px;
		line-height: 14px;
	}
	/*add .compare !!! */

	.categoryDisplay {
		left: 180px;
		bottom: 100px;
	}
	.categoryDisplay h2 {
		font-size: 14px;
	}
	.categoryDisplay h2 strong {
		font-size: 18px;
	}

	.categoryTipp {
		width: 94%;
  		height: 260px;
  		top: 100px;
  		padding: 3%;
  		left: 0;
  		margin-left: 0;
	}
	.categoryTipp.show {
		top: 140px;
	}

	.stackLabelArrow {
		left: 35px;
	}



	.socialPage {
		width: 94%;
		height: auto;
		margin: 0;
		padding: 3%;
		left: 0;
		top: 110px;
	}
	.socialAnswerContainer.clear {
		width: 94%
	}
	.inlineSocial {
		clear: left;
	}
	.socialAnswer {
		height: 25px;
	}
	#Geschlecht {
		margin-bottom: 10px;
	}

	.happinessLabel {
		width: 74px;
		float: none;
	}
	.happinessLabel.low {
		text-align: left;
	}
	.happinessLabel.high {
		float: right;
  		clear: both;
    	text-align: right;
	}

	.socialPage h3, .socialAnswer input[type="number"], #socialDataIntro h2, .infoPaper.top h2 {
		font-size: 14px;
	}
	.socialAnswerContainer label, #socialDataIntro p, .tippClose, .infoPaper.top p, #tippHint p, .categoryTipp .tippContent, .categoryDisplay p {
		font-size: 12px;
	}
	.socialAnswerContainer {
		margin-bottom: 25px;
	}
	.socialAnswer.vertical {
		margin-right: 9px;
		margin-bottom: 12px;
	}
	.socialAnswerContainer div.socialAnswer:nth-child(11) {
		margin-right: 0;
	}	
	.socialNav {
  		width: 85%;
  		margin-left: 0;
  		bottom: -42px;
  		left: 3%;
	}
	#socialDataIntro {
		width: 160px;
		height: 160px;
		top: 105px;
		left: 0;
  		margin-left: 0;
	}
	#socialDataSheet.hide {
		top: -800px;
	}
	#container.social-mobile-height {
		height: 890px;
	}
	#container.medium-mobile-height {
		height: 750px;
	}
	#popUpBack {
		top: 0px;
		position: fixed;
	}
	.popUp {
		position: fixed;
  		top: 50%;
  		left: 5%;
  		width: 80%;
  		height: 150px;
  		margin-left: 0;
  		padding: 5%;	
  		margin-top: -85px;

	}
	.popUpNav {
		left: 20px;
		right: 20px;
		bottom: 20px;		
	}
	#endPopUp {
  		width: auto;
  		height: auto;
		margin: 0;
  		padding: 6% 8% 30px;
  		position: fixed;
  		top: 1%;
  		left: 1%;
  		bottom: 1%;
  		overflow: scroll;
  		-webkit-overflow-scrolling: touch;
  		right: 1%;		
	}
	#endPopUp.show {
		-webkit-transform: none;
		   -moz-transform: none;
		    -ms-transform: none;
		     -o-transform: none;
		        transform: none;
	}
	#endPopUp .popUpNav {
		position: static;
  		float: right;
  		margin: 40px 0px 0;
	}
	#socialPopUp.hideLeft {
		left: -100%;
	}
	.restartButton {
		// top: 470px;
	}
	.reduceLabelArrow {
		left: 41px;
	}
	.reduceDisplay {
		bottom: 108px;
  		left: 177px;
	}
	#categoryTippsInfo {
  		left: 95px;
  		top: 95px;
  		margin-left: 0;
	}
	#categoryTippsInfo p {
		line-height: 14px;
  		width: 180px;
  		font-size: 12px;
  		margin: 9px 6px 0;
	}
	#categoryTippsInfo img {
		width: 50px;
	}

	#container {
		width: 100%;
		// height: 890px;
		overflow: hidden;
	}
	footer.expand {
		height: 100%;
		top: 0;
	}
	#impressumLink, #datenschutzLink {
		font-size: 12px;
	}
	#impressumLink {
		right: 10px;
	}
	#datenschutzLink {
		left: 10px;
	}
	#infoStack {
  		top: 52px;
  		left: 0;
  		height: 60px;
  		margin-left: 8px;
	}
	#tippHint {
		top: 12px;
  		right: 152px;
	}
	.infoPaper {
		width: 50px;
		height: 50px;
	}
	.infoPaper.top.show {
		left: 35px;
  		top: 115px;
  		width: 220px;
  		height: 220px;
	}
	header nav.mobileTipp {
		left: 80px;
	}
	.navItem.mobileTipp {
		width: 12%;
	}

	.reduceDisplay h1 {
		font-size: 14px;
		line-height: 24px;
	}
	.reduceDisplay h1 strong {
		font-size: 22px;
	}
	.reduceDisplay p {
		font-size: 12px;
	}
	.reduceLabelArrow {
		left: 38px;
		top: 61px;
	}
	#footerClose {
		top: 10px;
		margin-top: 0;
		background: rgba(255,255,255,0.7);
		width: 85px;
		line-height: 40px;
		height: 40px;
	}	
	#socialShare {
		top: 660px;
	}

	.bold {
		margin: 30px 0;
	}

	footer {
		height: 80px;
	}

	.footerNav {
		position: absolute;
		left: 10%;
		right: 10%;
		bottom: 0;
		height: 80px;
	}
	.footerNav li:nth-child(3){
		clear: left;
	}
	#impressumLink, #datenschutzLink, #kontaktLink, #aboutLink {
		margin: 0 1%;
		font-weight: 400px;
		font-size: 12px;
		/*bottom: 0;*/
		width: 48%;
		height: 35px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;		
	}

	#scrollSign {
		display: none;
	}
	#moveResultLeft.show, #moveResultRight.show {
		display: block;
	}		
	#skipTrue {
		font-size: 18px;
	}
	.socialPage .XofY {
		font-size: 40px;
		top: 15px;		
	}
	#socialDataSheet {
		height: 710px;
		top: 0;
	}
	.socialPage {
		padding: 50px 10px 10px;		
	}
	.socialPage label p {
		color: #888;
		font-size: 10px;
		position: relative;
		left: 20px;
		top: -10px;		
		display: none;
	}
	.socialNav {
		width: 93%;
	}
	.socialAnswerContainer label {
		white-space: nowrap;
	}
	select {
		font-size: 14px;
	}
	#language-switch {
		top: 0px;
		/*z-Index: 9002;*/
	}
	#language-switch select {
		/*width: 1px !important;*/
		/*overflow: hidden;*/
	}
	label.select-label:after {
		position: absolute;
		/*white-space: nowrap;*/
		top: 0;
	}
	#resultNav-container .saveRessourcesButton img, #resultNav-container .showResultButton img {
		/*top: 11px;*/
		bottom: 0;
	}
	#restartArrow {
		/*top: 75px;*/
		bottom: -3px;
	}

	#info-panel {
		top: 165px;
		margin: 0 0 0 -120px;
		-webkit-transition: all 0.6s ease-in-out;
		   -moz-transition: all 0.6s ease-in-out;
		    -ms-transition: all 0.6s ease-in-out;
		     -o-transition: all 0.6s ease-in-out;
		        transition: all 0.6s ease-in-out;
		-webkit-transition-delay: 0s;
		   -moz-transition-delay: 0s;
		    -ms-transition-delay: 0s;
		     -o-transition-delay: 0s;
		        transition-delay: 0s;
		overflow: hidden;
	}
	#info-panel.hide-mobile {
    	width: 22px;
    	height: 28px;
    	top: 46px;
    	left: 10px;
    	margin: 0;
		-webkit-transition-delay: 0.2s;
		   -moz-transition-delay: 0.2s;
		    -ms-transition-delay: 0.2s;
		     -o-transition-delay: 0.2s;
		        transition-delay: 0.2s;
	}
	#info-panel-overlay {
		background: #fff;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		-webkit-transition: all 0.2s linear;
		   -moz-transition: all 0.2s linear;
		    -ms-transition: all 0.2s linear;
		     -o-transition: all 0.2s linear;
		        transition: all 0.2s linear;
		cursor: pointer;
	}
	#info-panel #info-panel-overlay {
		opacity: 0;
		visibility: hidden;
		-webkit-transition-delay: 0.6s;
		   -moz-transition-delay: 0.6s;
		    -ms-transition-delay: 0.6s;
		     -o-transition-delay: 0.6s;
		        transition-delay: 0.6s;
	}
	#info-panel.hide-mobile #info-panel-overlay {
		opacity: 1;
		visibility: visible;
		-webkit-transition-delay: 0s;
		   -moz-transition-delay: 0s;
		    -ms-transition-delay: 0s;
		     -o-transition-delay: 0s;
		        transition-delay: 0s;
	}
	#info-panel .mobile-close {
    	position: absolute;
    	bottom: 10px;
    	left: 0;
    	right: 0;
    	text-align: center;
    	color: #29abe2;
    	font-size: 0.8em;
    	display: block;
    	cursor: pointer;
    	text-transform: uppercase;
	}
	.mobile-panel-icon {
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -11px 0 0 -15px;		
		display: block;
		-webkit-transform: scale(0);
		   -moz-transform: scale(0);
		    -ms-transform: scale(0);
		     -o-transform: scale(0);
		        transform: scale(0);
		-webkit-transition: all .4s ease-in-out;
		   -moz-transition: all .4s ease-in-out;
		    -ms-transition: all .4s ease-in-out;
		     -o-transition: all .4s ease-in-out;
		        transition: all .4s ease-in-out;
	}
	.mobile-panel-icon.show {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
		    -ms-transform: scale(1);
		     -o-transform: scale(1);
		        transform: scale(1);
	}

	#mobile-panel-icon-back {
    	display: block;
    	position: absolute;
    	top: 46px;
    	left: -100px;
    	width: 22px;
    	height: 28px;
    	background: #ccc;
    	padding: 15px;
    	-webkit-transform: rotate(2deg);
    	   -moz-transform: rotate(2deg);
    	    -ms-transform: rotate(2deg);
    	     -o-transform: rotate(2deg);
    	        transform: rotate(2deg);
    	-webkit-transition: all .7s ease-in-out;
    	   -moz-transition: all .7s ease-in-out;
    	    -ms-transition: all .7s ease-in-out;
    	     -o-transition: all .7s ease-in-out;
    	        transition: all .7s ease-in-out;
	}
	#mobile-panel-icon-back.show {
		display: block;
    	left: 10px;
	}
	#mobile-panel-icon-back::after {
    	content: '';
    	width: 22px;
    	height: 28px;
    	background: #fff;
    	position: absolute;
    	padding: 15px;
    	top: 0;
    	left: 0;
    	transform: rotate(-4deg);
	}	
}

@media screen and (min-width: 801px) and (max-width: 1023px) {
	.resultNav-button {
		width: 200px;
		font-size: 0.9em;
		line-height: 1.1em;		
	}
}

@media screen and (min-width: 1281px), screen and (min-height: 801px) {
	body {
		background-image: url('../img/boxesBackground_2560.png');
	}
}




.simulation-button {
	position: absolute;
	background: #fff;
	border: 1px solid #333;
	padding: 0 20px;
	border-radius: 15px;	
	top: 50%;
	z-index: 9999;
	left: 50%;
	height: 30px;
	box-sizing: border-box;	
	display: none;
}

@media screen and (max-height: 850px) {
	.simulation-button {
		top: 425px;
	}
}