#Household{

}

	#Household .survey_line{
		width: 380px;
	}
		#Household .household_think .survey_line{
			width: 414px;
		}
			.household_income_label{
				width: 410px;
			}
			.household_thinkpoverty_label .placeholder_country_particle--in{
				text-transform: capitalize;
			}

	.household_periodicity{
		margin:10px 0;
	}

	.household_circular{
		width: 160px;
		height: 160px;
		background: #fff;
		border:2px solid #05bfd0;
		border-radius: 100px;
		position: relative;
		margin: 30px 0 0;
	}
		.household_circular:before{
			content:"";
			position: absolute;
			border: 2px solid #05bfd0;
			width: 146px;
			height: 146px;
			left: 5px;
			top: 5px;
			border-radius: 90px;
		}
		.household_circular .circular_handle{
			position: absolute;
			z-index:100;
			cursor: pointer;
			background: #fff;
		    border: 2px solid #05bfd0;
		    border-radius: 0;
		    cursor: pointer;
		    display: block;
		    height: 32px;
		    width: 32px;
		    -webkit-transform:translate(-2px, -2px);
		   	-ms-transform:translate(-2px, -2px);
		    transform:translate(-2px, -2px);
		}
			.household_circular .circular_handle:hover{
				background: #05bfd0;
			}
			.circular_handle:after {
			    background: url("../img/grip.svg") no-repeat scroll 0 0;
			    background-size: 10px 10px;
			    content: "";
			    height: 10px;
			    left: 9px;
			    position: absolute;
			    top: 9px;
			    width: 10px;
			}
				.circular_handle:hover:after{
					background: url("../img/grip--hover.svg") no-repeat 0 0;
					background-size: 10px 10px;
				}
		.household_circular #slider_svg{
			width: 100%;
			height: 100%;
			-webkit-transform:rotate(-89.9deg);
			-ms-transform:rotate(-89.9deg);
			transform:rotate(-89.9deg);
		}
		.circular_value{
			position: absolute;
			left: 0px;
			top: 66px;
			width: 100%;
			text-align: center;
			font-size: 18px;
			line-height: 20px;
			color: #05bfd0;
		}

	.slider_container{
		position: relative;
		height: 40px;
		margin: 24px 0 20px;
		width: 300px;
	}
		.income_slider_bound, .think_slider_bound, .poverty_slider_bound{
			position: absolute;
			top: 10px;
			font-size: 14px;
			line-height: 18px;
			width: 80px;
		}
			.income_slider_bound--low, .think_slider_bound--low, .poverty_slider_bound--low{
				left: 0px;
			}
			.income_slider_bound--up, .think_slider_bound--up, .poverty_slider_bound--up{
				right: 0px;
				text-align: right;
			}

			.think_slider_bound{
				top: 24px;
			}
				.think_slider_bound .bigger{
					color: #05bfd0;
					font-size: 22px;
				}

		.household_income_slider, .household_think_slider, .household_poverty_slider{
			width: 100%;
		}
		.household_house_income, .poverty_value{
			position: absolute;
			-webkit-transform:translate(-45%,15px);
			-ms-transform:translate(-45%,15px);
			transform:translate(-45%,15px);
			color: #05bfd0;
			font-size: 16px;
			line-height: 20px;
			width: 110px;
			text-align: center;
		}
		.household_income_tooltip{
			background:#fff;
			padding:5px;
			position: absolute;
			left: -60px;
			top:280px;
			width: 300px;
			opacity: 0;
			z-index: -1;
			font-size: 13px;
			line-height: 18px;
			-webkit-transition:opacity 0.3s ease-out;
			-ms-transition:opacity 0.3s ease-out;
			transition:opacity 0.3s ease-out;
		}
			.household_income_tooltip.displayed{
				opacity: 1;
				z-index: 1;
			}
				.household_income_tooltip.displayed:before{
					/*content: "";
					background: url("../img/chevron.svg") no-repeat 0 0;
					background-size: 11px 7px;
					width: 11px;
					height: 7px;
					left: 50%;
					top: -10px;
					position: absolute;
					margin-left: -6px;*/
				}

	.periodicity_radio{
		color: #05bfd0;
		font-size: 18px;
		display: inline-block;
		vertical-align: top;
		cursor: pointer;
		position: relative;
		padding-left:20px;
		height: 20px;
		line-height: 24px;
		margin: 0 10px;
	}
		.periodicity_radio:before{
			content:"";
			position: absolute;
			left: 0px;
			top: 6px;
			border-radius: 15px;
			width: 15px;
			height: 15px;
			border: 2px solid #05bfd0;
			background: #fff;
		}
		.periodicity_radio.selected:before{
			background: #05bfd0;
		}

.household_stage{
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	-webkit-transform:translate(0,500px);
	-ms-transform:translate(0,500px);
	transform:translate(0,500px);
	-webkit-transition:transform 1s ease-out;
	-ms-transition:transform 1s ease-out;
	transition:transform 1s ease-out;
}
	.household_stage.displayed{
		-webkit-transform:translate(0,0);
		-ms-transform:translate(0,0);
		transform:translate(0,0);
	}

	.household_house{
		position: absolute;
		left: 50%;
		margin-left: 130px;
		margin-top: -40px;
		-webkit-transition:-webkit-transform 0.5s ease-out, margin 0.5s ease-out;
		-ms-transition:-ms-transform 0.5s ease-out, margin 0.5s ease-out;
		transition:transform 0.5s ease-out, margin 0.5s ease-out;
		-webkit-transform:scale(0.9);
		-ms-transform:scale(0.9);
		transform:scale(0.9);
	}
	.household_house.scaleless{
		-webkit-transform:scale(0.5);
		-ms-transform:scale(0.5);
		transform:scale(0.5);
		margin-top: -110px;
		margin-left: 4px;
	}
		.household_planetincome_container{
			position: absolute;
			bottom: -240px;
			left: 50%;
			-webkit-transform:translate(-50%, 0);
			-ms-transform:translate(-50%, 0);
			transform:translate(-50%, 0);
			width: 320px;
			height: 0px;
			overflow: hidden;
		}
			.household_planetincome{
				width: 320px;
				height: 320px;
				border-radius: 160px;
				background: #fac748;
				position: absolute;
				left: 0px;
				bottom: 0px;
			}
				.household_planetincome:after{
					position: absolute;
					right: 0px;
					top: 0px;
					content: "";
					width: 160px;
					border-radius: 0px 160px 160px 0;
					height: 320px;
					background: #fde664;
				}

	.household_planets{
		position: absolute;
		left: 0px;
		bottom: 0px;
		opacity: 0;
		width: 100%;
		-webkit-transition:opacity 0.5s ease-out;
		-ms-transition:opacity 0.5s ease-out;
		transition:opacity 0.5s ease-out;
	}
		.household_planets.displayed{
			opacity: 1;
		}
		.household_planets .household_planet{
			background: #aebe44;
			position: absolute;
			left: auto;
			-webkit-transform:translate(-50%, 0);
			-ms-transform:translate(-50%, 0);
			transform:translate(-50%, 0);
		}
			.household_planet:after{
				position: absolute;
				right: 0px;
				top: 0px;
				content: "";
				background: #c9da4e;
			}
			.household_planets .household_planet--poor{
				left: 119px;
				bottom: 30px;
				width: 100px;
				height: 100px;
				border-radius: 50px;
			}
				.household_planet--poor:after{
					width: 50px;
					height: 100px;
					border-radius: 0px 50px 50px 0px;
				}
					.household_poor_member{
						opacity: 0;
					}
						.household_poor_member.displayed{ opacity: 1;}
			.household_planets .household_planet--rich{
				right: -170px;
				bottom: -130px;
				width: 300px;
				height: 300px;
				border-radius: 150px;
			}
				.household_planet--rich:after{
					width: 150px;
					height: 300px;
					border-radius: 0px 150px 150px 0px;
				}
				.household_rich_member{
						opacity: 0;
					}
						.household_rich_member.displayed{ opacity: 1;}

		.planet_income_container{
			position: absolute;
			overflow: hidden;
			-webkit-transform:translate(-50%, 0);
			-ms-transform:translate(-50%, 0);
			transform:translate(-50%, 0);
		}
			.planet_income_container .planet_income{
				width: 100%;
				background: #fac748;
				position: absolute;
				left: 0px;
				bottom: 0px;
			}
				.planet_income_container .planet_income:after{
					position: absolute;
					right: 0px;
					top: 0px;
					content: "";
					background: #fde664;
					width: 50%;
					height: 100%;
				}

			.planet_income_container--poor{
				left: 119px;
				bottom: 30px;
				width: 100px;
				height: 20px;
			}
				.planet_income_container--poor .planet_income{
					border-radius: 50px;
					width: 100px;
					height: 100px;
				}
					.planet_income_container--poor .planet_income:after{
					border-radius: 0px 50px 50px 0px;
				}

			.planet_income_container--rich{
				right: -170px;
				bottom: -130px;
				width: 300px;
				height: 280px;
			}
				.planet_income_container--rich .planet_income{
					border-radius: 150px;
					width: 300px;
					height: 300px;
				}
					.planet_income_container--rich .planet_income:after{
					border-radius: 0px 150px 150px 0px;
				}
	.poor_border{
		position: absolute;
		left: 20%;
		bottom: 60px;
		background: url("../img/poverty_planet.svg") no-repeat 14px 0;
		background-size: 63px 94px;
		width: 63px;
		height: 94px;
		-webkit-transform:translate(-50%,0);
		-ms-transform:translate(-50%,0);
		transform:translate(-50%,0);
		-webkit-transition:opacity 0.3s ease-out;
		-ms-transition:opacity 0.3s ease-out;
		transition:opacity 0.3s ease-out;
		opacity: 1;
		z-index: 1;
	}
		.poor_border.invisible{
			opacity: 0;
			z-index: -1;
		}



#ResHousehold{}
	#ResHousehold .household_stage{
		z-index: 10;
	}
	#ResHousehold .household_house{
		-webkit-transition:left 0.6s ease-out;
		-ms-transition:left 0.6s ease-out;
		transition:left 0.6s ease-out;
	}
	#ResHousehold .poor_border{
		-webkit-transition:left 0.6s ease-out;
		-ms-transition:left 0.6s ease-out;
		transition:left 0.6s ease-out;
	}

	.poor_border .poor_value{
		position: absolute;
		left: 33px;
		bottom: 270px;
		width: 1px;
	}
		.poor_border .poor_value:before{
			content: "";
			position: absolute;
			left: 0px;
			top: 0px;
			height: 220px;
			border-left: 2px dashed #93b9bd;
			width: 1px;
		}
			.poor_value .poor_value_display{
				position: absolute;
				left: 15px;
				top: 5px;
				color: #93b9bd;
				font-size: 14px;
				text-align: left;
				width: 80px;
			}
				.poor_value .poor_value_display .bigger{
					font-size: 18px;
				}

	#ResHousehold .res_arrows{
		position: absolute;
		left: 10%;
		top: 220px;
		width: 80%;
		opacity: 0;
	}
		#ResHousehold .res_arrows.displayed{
			opacity: 1;
		}
		.res_arrows .res_arrow{
			position: absolute;
			height: 3px;
		}
		.res_arrows .res_arrow_poor{
			left: 0px;
			top: 0px;
			background:#93b9bd;
			color: #93b9bd;
			z-index: 1;
			-webkit-transition:width 0.6s ease-out;
			-ms-transition:width 0.6s ease-out;
			transition:width 0.6s ease-out;
		}
			.res_arrow_poor:before{
				content:"<";
				position: absolute;
				left: -4px;
				top: -13px;
				font-size: 18px;
				color: #93b9bd;
			}
		.res_arrows .res_arrow_rich{
			right: 0px;
			top: 0px;
			width: 100%;
			background:#385871;
			color: #385871;
		}
			.res_arrow_rich:before{
				content:">";
				position: absolute;
				right: -4px;
				top: -13px;
				font-size: 18px;
				color: #385871;
			}
			.res_arrow_legend{
				position: absolute;
				left: 50%;
				bottom: 10px;
				font-size: 14px;
				width: 80px;
				line-height: 18px;
				-webkit-transform:translate(-50%, 0);
				-ms-transform:translate(-50%, 0);
				transform:translate(-50%, 0);
			}
				.res_arrow_legend .bigger{
					font-size: 18px;
					color: #93b9bd;
				}
			.res_arrow_rich .res_arrow_legend_container{
				right: 0px;
				position: absolute;
				bottom: 0px;
				-webkit-transition:width 0.6s ease-out;
				-ms-transition:width 0.6s ease-out;
				transition:width 0.6s ease-out;
			}
				.res_arrow_rich .res_arrow_legend .bigger{
					color: #385871;
				}

	#ResHousehold .info_tooltip{
		position: absolute;
		left: 100%;
		top: -32px;
	}
		#ResHousehold .info_tooltip[data-step="poverty"]{
			left: 100%;
			top: -32px;
		}
	#ResHousehold .info_tooltip_text{
		width: 180px;
		margin-left: -90px;
		left: 100%;
		top: -45px;
		color: #666666;
		-webkit-transform:translate(0,-100%);
		-ms-transform:translate(0,-100%);
		transform:translate(0,-100%);
	}
		#ResHousehold .info_tooltip_text[data-step="poverty"]{
			left: 100%;
			top: -45px;
			width: 200px;
			font-size: 12px;
			line-height: 16px;
			margin-left: -100px;
		}
			.info_tooltip_text .placeholder_household_poverty{
				white-space: nowrap;
			}