:root {

	--webapp_pit: #ECECEC;
	--webapp_gradient1_2: #C0C0C0;
	--webapp_gradient1_1: #EEEEEE;
	--webapp_red: #E74646;
	--webapp_yellow: #E7A846;
	--webapp_green1: #A7C61A;
	--webapp_green2: #7EBF19;
	
	--webapp_red_past: #818383;
	--webapp_yellow_past: #C4B29B;
	--webapp_green1_past: #A7C61A;
	--webapp_green2_past: #7EBF19;
	
	--webapp_grey: #4F4F4F;
	
	--webapp_conventional: #757575;
}


.webapp_emissions_0,
.webapp_emissions_1,
.webapp_emissions_2,
.webapp_emissions_3,
.webapp_emissions_4,
.webapp_emissions_5,
.webapp_emissions_6,
.webapp_emissions_7,
.webapp_emissions_8,
.webapp_emissions_9,
.webapp_emissions_10,
.webapp_emissions_11,
.webapp_emissions_12,
.webapp_emissions_13,
.webapp_emissions_14,
.webapp_emissions_15,
.webapp_emissions_16,
.webapp_emissions_17,
.webapp_emissions_18,
.webapp_emissions_19,
.webapp_emissions_20,
.webapp_emissions_21,
.webapp_emissions_22,
.webapp_emissions_23

 {
	position: absolute;
	right: -15.5vw;
	top: -15vw;
	width: 22vw;
	height: 15vw;
	font-family: 'Gidolinya-Regular';
	color: var(--color_font_dark);
	text-align: center;
	font-weight: bold;
	font-size: 5.5vw;
	line-height: 0.6em;
	visibility: hidden;
	background-image: url(../graphics/webapp_cloud_mobile.svg);
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 6;
	padding-top: 4.3vw;
	padding-right: 2.8vw;
}


.webapp_emissions_0
{ background-image: url(../graphics/webapp_cloud_mobile_top.svg); top: 3vw; padding-top: 6vw; }

.webapp_renewable_percent {
	position: relative;
	display: inline-block;
	top: -7.5vw;
	left: 2.5vw;
	width: 10.5vw;
	height: 10.5vw;
	font-family: 'Gidolinya-Regular';
	color: var(--color_text_dark);
	text-align: center;
	font-size: 6.0vw;
	font-weight: bold;
	visibility: hidden;
	background-image: url(../graphics/renewable_percent_sign.svg);
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 5;
}

.webapp_background { width: 100vw; padding: 3vw 0 5vw 0; border-radius: 0 0 5vw 5vw; background-color: white; filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.7)); overflow: hidden; }


.webapp_stickybox_mobile {
	width: 100%;
	height: 14vw;
	background-color: white;
	position: sticky;
	margin-top: 180px;
	padding-top: 2.2vw;
	top: 0px;
	z-index: 5;
}

.webapp_stickybox { display: none; }




@media (min-width: 1081px) {
.webapp_stickybox_mobile { display: none; }
.webapp_stickybox { display: block; }
}



.webapp_date, .webapp0_date, .webapp1_date, .webapp2_date, .webapp3_date { margin: -0.7vw auto 2vw auto; font-family: 'Gidolinya-Regular'; color: var(--color_font_dark); text-align: center; font-size: 5.0vw; font-weight: bold;   }
.webapp_caption { margin: -1vw auto 11vw auto; font-family: 'Gidolinya-Regular'; color: var(--color_font_dark); text-align: center; font-size: 3.0vw; font-weight: bold;  }

.webapp_failure_img {
	display: block;
	width: 40vw;
	height: 40vw;
	margin: 5vw auto 0 auto;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(../graphics/peaky_abacus.svg);
}
.webapp_failure {
	display: block;
	width: 95vw;
	margin: 4vw 2.5vw;
	font-family: 'Gidolinya-Regular';
	color: var(--color_font_dark);
	text-align: center;
	font-size: 4vw;
	font-weight: bold;
}

.webapp_back, .webapp_back_inactive { position: absolute; left: 2vw; top: 3vw; width: 7vw; height: 7vw; transition: 0.3s ease-in-out; z-index: 5;
background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url(../graphics/webapp_back.svg); }
.webapp_forward, .webapp_forward_inactive { position: absolute; right: 2vw; top: 3vw; width: 7vw; height: 7vw; transition: 0.3s ease-in-out; z-index: 5;
background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url(../graphics/webapp_forward.svg); }

.webapp_forward_inactive, .webapp_back_inactive { filter: opacity(0.25); }

.webapp_back:hover { transform: translateX(-0.2vw); transition: 0.2s ease-in-out; }
.webapp_forward:hover { transform: translateX(0.2vw); transition: 0.2s ease-in-out; }


.webapp_country {
	position: absolute;
	left: 16vw;
	top: 4vw;
	width: 5vw;
	height: 5vw;
	border-radius: 2.5vw;
	transition: 0.3s ease-in-out;
	z-index: 5;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(../graphics/flag_de.svg);
}

.webapp_info {
	position: absolute;
	right: 16vw;
	top: 3.5vw;
	width: 6vw;
	height: 6vw;
	transition: 0.3s ease-in-out;
	z-index: 5;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(../graphics/info.svg);
}

.info_back { right: 2.5vw; background-image: url(../graphics/icon_x.svg); }

.webapp_info_text {
	display: inline-block;
	width: 94vw;
	margin: 2vw 3vw;
}

.webapp_info_graphic { display: inline-block; float: left; width: 96vw; height: 96vw; margin: 0 1vw 5vw 1vw; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url(../graphics/webapp_info1.svg);}

.webapp_cursor { position: absolute; left: -16vw; top: 0; width: 6vw; height: 6vw; visibility: hidden;
background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url(../graphics/webapp_cursor.svg); }

.webapp_time { position: absolute; left: -11.5vw; top: 0; width: 10vw; font-family: 'Gidolinya-Regular'; color: var(--color_font_dark); text-align: right; font-weight: normal; font-size: 5.2vw; }
.webapp_minutes { font-size: 0.6em; vertical-align: 1.5vw; }

.webapp_percent { position: absolute; left: -10.5vw; top: 0; width: 9vw; font-family: 'Gidolinya-Regular'; color: var(--color_font_dark); text-align: right; font-size: 6.0vw; }
.webapp_percent_sign { font-size: 0.6em; vertical-align: 1.5vw; margin-left: 0.2vw; }

.webapp_bars { margin-top: 6.5vw; }

.webapp_bar { position: relative; width: 69vw; height:6vw; margin: 1.5vw 17vw 1.5vw 14vw; }
.webapp_bar_edge { position: absolute; left: 0.5vw; top: 0.5vw; width: 67vw; height:5vw; padding: 0 2vw;
	background-image: linear-gradient(0deg, var(--webapp_gradient1_1), var(--webapp_gradient1_2)); border-radius: 2.5vw; filter: blur(0.2vw); }
.webapp_bar_pit { position: absolute; left: 1.5vw; top: 1.5vw; width: 64vw; height: 3vw; padding: 0 2vw; background-color: var(--webapp_pit); border-radius: 1.5vw; filter: blur(1vw); }
.webapp_bar_renewable { position: absolute; left: 1.5vw; top: 1.4vw; width: 0%; height: 3vw; border-radius: 1.5vw; z-index: 5; cursor: pointer; }


.webapp_bar_cavity1, .webapp_bar_cavity2 {
	position: absolute;
	right: 0.8vw;
	top: 0.65vw;
	width: 1.7vw;
	height: 1.7vw;
	border-radius: 100%;
	z-index: 6;
	cursor: pointer;
	background-image: linear-gradient(-45deg, #fff, #a8a8a8);
	mix-blend-mode: multiply;
	filter: blur(0.08vw);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.webapp_bar_cavity2  { right: 3vw; }

.webapp_bar_line {
	position: absolute;
	left: 50%;
	background-color: rgba(0, 0, 0, 0.25);
	z-index: 1;
	margin-left: 1.5em;
	top: 1em;
	width: 0.3em;
	height: 3.5em;
}


.webapp_bar_conventional_0,
.webapp_bar_conventional_1, 
.webapp_bar_conventional_2,
.webapp_bar_conventional_3,
.webapp_bar_conventional_4,
.webapp_bar_conventional_5,
.webapp_bar_conventional_6,
.webapp_bar_conventional_7,
.webapp_bar_conventional_8,
.webapp_bar_conventional_9,
.webapp_bar_conventional_10,
.webapp_bar_conventional_11,
.webapp_bar_conventional_12,
.webapp_bar_conventional_13,
.webapp_bar_conventional_14,
.webapp_bar_conventional_15,
.webapp_bar_conventional_16,
.webapp_bar_conventional_17,
.webapp_bar_conventional_18,
.webapp_bar_conventional_19,
.webapp_bar_conventional_20,
.webapp_bar_conventional_21,
.webapp_bar_conventional_22,
.webapp_bar_conventional_23

{ position: absolute; left: 1.5vw; top: 1.4vw; width: 0%; height: 3vw; border-radius: 1.5vw; background-color: var(--webapp_conventional); z-index: 4; }

.webapp_edge { display: block; width: 100%; height: 4vw; margin: -10vw 0 6vw 0; background-image: linear-gradient(#FFFFFF00 , var(--gradient_edge_white) 20%, #FFFFFF00); }

.past { filter: grayscale(0.8); transition: 3s; }
.webapp_bar:hover .past { filter: grayscale(0); transition: 0s; }

.now { animation: now 2s infinite; }

@keyframes now {
	0% 		{ transform: translateX(0);  }  
	80% 		{ transform: translateX(0);  }  
	87% 		{ transform: translateX(0.7em);  }  
    92% 		{ transform: translateX(0.0em);  }  
	96% 		{ transform: translateX(0.3em);  }
    98% 		{ transform: translateX(0.0em);  }  
  100% 		{ transform: translateX(0.2em);  }
}




@media (min-width: 1081px) {

.webapp_emissions_0,
.webapp_emissions_1, 
.webapp_emissions_2,
.webapp_emissions_3,
.webapp_emissions_4,
.webapp_emissions_5,
.webapp_emissions_6,
.webapp_emissions_7,
.webapp_emissions_8,
.webapp_emissions_9,
.webapp_emissions_10,
.webapp_emissions_11,
.webapp_emissions_12,
.webapp_emissions_13,
.webapp_emissions_14,
.webapp_emissions_15,
.webapp_emissions_16,
.webapp_emissions_17,
.webapp_emissions_18,
.webapp_emissions_19,
.webapp_emissions_20,
.webapp_emissions_21,
.webapp_emissions_22,
.webapp_emissions_23

{
	right: -7vw;
	top: -0.7vw;
	width: 6.9vw;
	height: 4.8vw;
	font-size: 1.7vw;
	text-align: center;
	margin-top: -0.8vw;
	transform: rotate(90deg);
	visibility: hidden;
	transition-delay: 0.1s;
	background-image: url(../graphics/webapp_cloud.svg);
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 6;
	padding-top: 1.3vw;
	padding-right: 1.1vw;
}

.webapp_renewable_percent {
	left: 1.4vw;
	top: 1.1vw;
	width: 3.5vw;
	height: 3.5vw;
	font-size: 2vw;
	text-align: center;
	transform: rotate(90deg);
	visibility: hidden;
	transition: none;
	z-index: 6;
	line-height: 1em;
}

.webapp_bar:hover .webapp_renewable_percent { visibility: visible; }



.webapp_background { width: 81vw; margin: 1vw 0 2.5vw 0; padding: 1vw 0;  border-radius: 2vw; }
.background_bars { height: 38.5vw; }

.webapp_bars { transform: rotate(-90deg); margin-top: -27vw; }

.webapp_date, .webapp0_date, .webapp1_date, .webapp2_date, .webapp3_date 
{ margin: 0vw auto 0.2vw auto; font-family: 'Gidolinya-Regular'; color: var(--color_font_dark); text-align: center; font-size: 2.2vw; font-weight: bold; }

.webapp_caption { margin: 0vw auto 8.5vw auto;  font-family: 'Gidolinya-Regular'; color: var(--color_font_dark); text-align: center; font-size: 1.4vw; font-weight: normal; }

.webapp_failure_img { width: 10vw; height: 10vw; margin: 0 auto; }
.webapp_failure { width: 76vw; height: 20vw; margin-top: 1vw; font-size: 1.4vw; }

.webapp_time { visibility: hidden; left: -2.5vw; width: 3vw; font-size: 1.8vw; text-align: center; margin-top: 0.5vw; transform: rotate(90deg); }
.webapp_minutes { font-size: 0.5em; vertical-align: 0.7em; margin-left: -0.1em; transform: rotate(90deg); }

.webapp_back, .webapp_back_inactive { position: absolute; left: 2vw; top: 2vw; width: 2vw; height: 2vw; transition: 0.3s ease-in-out;
background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url(../graphics/webapp_back.svg); }
.webapp_forward, .webapp_forward_inactive { position: absolute; right: 2vw; top: 2vw; width: 2vw; height: 2vw; transition: 0.3s ease-in-out;
background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url(../graphics/webapp_forward.svg); }

.webapp_back:hover { transform: translateX(-0.2vw); transition: 0.2s ease-in-out; }
.webapp_forward:hover { transform: translateX(0.2vw); transition: 0.2s ease-in-out; }

.webapp_country { position: absolute; left: 6vw; top: 2vw; width: 2vw; height: 2vw; transition: 0.3s ease-in-out; }
/*.webapp_country:hover { transform: scale(1.2); transition: 0.2s ease-in-out; }*/

.webapp_info { position: absolute; right: 6vw; top: 2vw; width: 2vw; height: 2vw; transition: 0.3s ease-in-out; }
.webapp_info:hover { transform: scale(1.2); transition: 0.2s ease-in-out; }

.info_back { right: 2vw; background-image: url(../graphics/icon_x.svg); }

.webapp_info_text { width: 30vw; margin: 2vw 5vw 2vw 5vw; }
.webapp_info_graphic { width: 38vw; height: 30vw; margin: -1vw 1vw 0 1vw; }


/*
@media (max-width: 1499px) {
.webapp_background { width: 90vw; margin-top: 30px; padding: 1vw 0;  border-radius: 2vw; }
.webapp_info_text { width: 50vw; margin: 2vw; }
.webapp_info_graphic { width: 30vw; height: 30vw; margin: -1vw 2vw 0 2vw; }
}
*/

.webapp_cursor { left: -3.5vw; top: 0; width: 1.5vw; height: 3vw; visibility: hidden; animation: cursor 2s infinite; }



.webapp_bar:hover .webapp_time { visibility: visible; }
.webapp_bar:nth-of-type(6n+1) .webapp_time { visibility: visible; }
.webapp_bar:nth-of-type(24) .webapp_time { visibility: visible; }

.webapp_bar { width: 21vw; height: 3vw; margin: 0 auto;  transition: 0.1s linear; cursor: pointer; }
.webapp_bar_edge { width: 18vw; height: 2vw; margin: 0 0 6vw 0;filter: blur(0.1vw);  transition: 0.1s linear; cursor: pointer; }
.webapp_bar_pit { width: 17.5vw; left: 0.75vw; top: 0.75vw; height: 1.5vw; filter: blur(0.5vw); transition: 0.1s linear; cursor: pointer;}
.webapp_bar_renewable { left: 0.9vw; top: 0.9vw; height: 1.2vw; width: 0%; border-radius: 0.6vw;  transition: 0.1s linear; cursor: pointer;}

.webapp_bar:active .webapp_bar_renewable { transform: scale(0.98); }

.webapp_bar_cavity1, .webapp_bar_cavity2 {
	right: 0.3vw;
	top: 0.3vw;
	width: 0.6vw;
	height: 0.6vw;
		filter: blur(0.04vw);
}

.webapp_bar_cavity2  { right: 1.1vw; }



.webapp_bar_line {
	position: absolute;
	left: 50%;
	top: 0.7vw;
	width: 0.1vw;
	height: 1.6vw;
	background-color: rgba(0, 0, 0, 0.25);
	z-index: 1;
	margin-left: 0.9vw;
}



.webapp_bar_conventional_0,
.webapp_bar_conventional_1, 
.webapp_bar_conventional_2,
.webapp_bar_conventional_3,
.webapp_bar_conventional_4,
.webapp_bar_conventional_5,
.webapp_bar_conventional_6,
.webapp_bar_conventional_7,
.webapp_bar_conventional_8,
.webapp_bar_conventional_9,
.webapp_bar_conventional_10,
.webapp_bar_conventional_11,
.webapp_bar_conventional_12,
.webapp_bar_conventional_13,
.webapp_bar_conventional_14,
.webapp_bar_conventional_15,
.webapp_bar_conventional_16,
.webapp_bar_conventional_17,
.webapp_bar_conventional_18,
.webapp_bar_conventional_19,
.webapp_bar_conventional_20,
.webapp_bar_conventional_21,
.webapp_bar_conventional_22,
.webapp_bar_conventional_23

{ left: 0.9vw; top: 0.9vw; width: 0%; height: 1.2vw; border-radius: 0.6vw; transition: 0.0s linear; cursor: pointer;}
.webapp_bar:active .webapp_bar_conventional { width: calc(100% - 1vw); transition: 0.7s ease-out; }

.webapp_edge { display: block; width: 100%; height: 2vw; margin: -9.5vw 0 8vw 0; background-image: linear-gradient(#FFFFFF00 , var(--gradient_edge_white) 80%, #FFFFFF00); }
.edge_info { margin: -9.5vw 0 3vw 0; }

}



#bar0, #bar1, #bar2, #bar3, #bar4, #bar5, #bar6, #bar7, #bar8, #bar9, #bar10, #bar11, #bar12,
#bar13, #bar14, #bar15, #bar16, #bar17, #bar18, #bar19, #bar20, #bar21, #bar22, #bar23  { display: none; }

#bar0:checked ~ .webapp_bar_conventional_0,
#bar1:checked ~ .webapp_bar_conventional_1,
#bar2:checked ~ .webapp_bar_conventional_2,
#bar3:checked ~ .webapp_bar_conventional_3,
#bar4:checked ~ .webapp_bar_conventional_4,
#bar5:checked ~ .webapp_bar_conventional_5,
#bar6:checked ~ .webapp_bar_conventional_6,
#bar7:checked ~ .webapp_bar_conventional_7,
#bar8:checked ~ .webapp_bar_conventional_8,
#bar9:checked ~ .webapp_bar_conventional_9,
#bar10:checked ~ .webapp_bar_conventional_10,
#bar11:checked ~ .webapp_bar_conventional_11,
#bar12:checked ~ .webapp_bar_conventional_12,
#bar13:checked ~ .webapp_bar_conventional_13,
#bar14:checked ~ .webapp_bar_conventional_14,
#bar15:checked ~ .webapp_bar_conventional_15,
#bar16:checked ~ .webapp_bar_conventional_16,
#bar17:checked ~ .webapp_bar_conventional_17,
#bar18:checked ~ .webapp_bar_conventional_18,
#bar19:checked ~ .webapp_bar_conventional_19,
#bar20:checked ~ .webapp_bar_conventional_20,
#bar21:checked ~ .webapp_bar_conventional_21,
#bar22:checked ~ .webapp_bar_conventional_22,
#bar23:checked ~ .webapp_bar_conventional_23

{ width: calc(100% - 2vw); transition: 0.7s; transition-delay: 0.3s;  } 


#bar0:checked ~ .webapp_emissions_0,
#bar1:checked ~ .webapp_emissions_1,
#bar2:checked ~ .webapp_emissions_2,
#bar3:checked ~ .webapp_emissions_3,
#bar4:checked ~ .webapp_emissions_4,
#bar5:checked ~ .webapp_emissions_5,
#bar6:checked ~ .webapp_emissions_6,
#bar7:checked ~ .webapp_emissions_7,
#bar8:checked ~ .webapp_emissions_8,
#bar9:checked ~ .webapp_emissions_9,
#bar10:checked ~ .webapp_emissions_10,
#bar11:checked ~ .webapp_emissions_11,
#bar12:checked ~ .webapp_emissions_12,
#bar13:checked ~ .webapp_emissions_13,
#bar14:checked ~ .webapp_emissions_14,
#bar15:checked ~ .webapp_emissions_15,
#bar16:checked ~ .webapp_emissions_16,
#bar17:checked ~ .webapp_emissions_17,
#bar18:checked ~ .webapp_emissions_18,
#bar19:checked ~ .webapp_emissions_19,
#bar20:checked ~ .webapp_emissions_20,
#bar21:checked ~ .webapp_emissions_21,
#bar22:checked ~ .webapp_emissions_22,
#bar23:checked ~ .webapp_emissions_23

{ visibility: visible; transition-delay: 0.7s; } 


#bar0:checked ~ .pick_0,
#bar1:checked ~ .pick_1,
#bar2:checked ~ .pick_2,
#bar3:checked ~ .pick_3,
#bar4:checked ~ .pick_4,
#bar5:checked ~ .pick_5,
#bar6:checked ~ .pick_6,
#bar7:checked ~ .pick_7,
#bar8:checked ~ .pick_8,
#bar9:checked ~ .pick_9,
#bar10:checked ~ .pick_10,
#bar11:checked ~ .pick_11,
#bar12:checked ~ .pick_12,
#bar13:checked ~ .pick_13,
#bar14:checked ~ .pick_14,
#bar15:checked ~ .pick_15,
#bar16:checked ~ .pick_16,
#bar17:checked ~ .pick_17,
#bar18:checked ~ .pick_18,
#bar19:checked ~ .pick_19,
#bar20:checked ~ .pick_20,
#bar21:checked ~ .pick_21,
#bar22:checked ~ .pick_22,
#bar23:checked ~ .pick_23

{ visibility: visible; } 




@keyframes renewable_percent{
	0% 		{ visibility: hidden; }
	10% 		{ visibility: visible; }
	50% 		{ visibility: visible; }
	100%		{ visibility: hidden; }
}	




.legend {
	position: relative;
	left: 0vw;
	bottom: 21.5vw;
	width: 77vw;
	margin: 0 2vw;
}


.legend_element {
	display: inline;
	margin-right: 2em;	
}

.legend_bar {
	display: inline-block;
	width: 4.8em;
	height: 1.2em;
	border-radius: 0.6em;
	font-family: "Gidolinya-Regular";
	color: var(--color_font_white);
	text-align: center;
	line-height: 1.3em;
	font-size: 1.5em;
}


.legend_description, .legend_source {
	display: inline-block;
	font-family: 'Gidolinya-Regular';
	color: var(--color_font_dark);
	text-align: left;
	font-size: 1.5em;
	line-height: 1.3em;
	margin-left: 0.4em;
	/*margin-right: 1.3em;*/
}

.legend_source { text-align: right; float: right; }

@media (max-width: 1080px) {

.legend {
	bottom: 0vw;
	left: 0px;
	width: 100vw;
	padding: 0 0;
	margin: 9vw 0 0 0;
	text-align: center;
	
}

.legend_element {
	display: inline-block;
	width: 21em;
	margin-right: 0;
	
}

.legend_bar {
	font-size: 4vw;
	line-height: 1.2em;
	margin: 0 1.5vw;
}

.legend_description {
	font-size: 3.5vw;
	margin-left: 0;
	margin-top: 0.2em;
}

.legend_source {
	text-align: center;
	width: 100vw;
	margin-right: 0;
	clear: both;
	font-size: 3.5vw;
	margin-top: 5vw;
}

}


@media (min-width: 1921px) {

.legend_bar {
font-size: 1vw;
}

.legend_description {
font-size: 1vw;
}

.legend_source {
font-size: 1vw;
}

}