#Society{}

#Society .survey_line{
	width: 550px;
}
	.pyramids_container{
		width: 100%;
		margin: 20px 0 0 40px;
		position: relative;
	}
		.pyramids_legend{
			color: #05bed0;
			font-size: 13px;
			width: 100%;
			height: 1px;
			position: absolute;
			left: -20px;
		}
			.legend_title{
				position: absolute;
				left: -110px;
				font-size: 11px;
				width: 110px;
				text-align: right;
			}
			.min .legend_title{ left: -100px;}
			.pyramids_legend[data-wealth="low"]{
				top: 84px;
			}
				.pyramids_legend[data-wealth="low"] .legend_title{
					top: 0px;
				}
			.pyramids_legend[data-wealth="average"]{
				top: 42px;
			}
				.pyramids_legend[data-wealth="average"] .legend_title{
					top: 14px;
				}
				.fr.min .pyramids_legend[data-wealth="average"] .legend_title{
					top: 6px;
					width: 100px;
					left: -90px;
				}
			.pyramids_legend[data-wealth="high"]{
				top: 0px;
			}
				.pyramids_legend[data-wealth="high"] .legend_title{
					top: 14px;
				}
			.pyramids_legend:before{
				content: "";
				position: absolute;
				left: 0px;
				top: 0px;
				width: 440px;
				height: 1px;
				border-top: 2px dashed #a5e0e6;
			}

		.pyramid{
			width: 90px;
			float: left;
			margin: 0 15px 0 0;
			cursor: pointer;
			position: relative;
		}
			.pyramid_line{
				float: left;
				width: 100%;
				height: 16px;
				text-align: center;
			}
				.pyramid_bar{
					-webkit-transition:background 0.3s ease-out;
					-ms-transition:background 0.3s ease-out;
					transition:background 0.3s ease-out;
					display: inline-block;
					height: 100%;
					background: #fff;
					border: 2px solid #05bed0;
					position: relative;
				}
				.pyramid.selected .pyramid_bar:before{
					content:"";
					position: absolute;
					left: -4px;
					top: -4px;
					background: #05bed0;
					height: 20px;
					z-index: -1;
				}
				.pyramid.selected .pyramid_bar{
					background: #05bed0;
					position: relative;
					border:2px solid #fff;
				}
					.pyramid_bar[data-inc="2"]{ position:relative; top: -2px;}
					.pyramid_bar[data-inc="3"]{ position:relative; top: -4px;}
					.pyramid_bar[data-inc="4"]{ position:relative; top: -6px;}
					.pyramid_bar[data-inc="5"]{ position:relative; top: -8px;}
					.pyramid_bar[data-inc="6"]{ position:relative; top: -10px;}
					.pyramid_bar[data-inc="7"]{ position:relative; top: -12px;}
					.pyramid_bar[data-size="1"]{ width: 12px;}
						.pyramid.selected .pyramid_bar[data-size="1"]:before{ width: 16px;}
					.pyramid_bar[data-size="2"]{width: 25px;}
						.pyramid.selected .pyramid_bar[data-size="2"]:before{ width: 29px;}
					.pyramid_bar[data-size="3"]{width: 38px;}
						.pyramid.selected .pyramid_bar[data-size="3"]:before{ width: 42px;}
					.pyramid_bar[data-size="4"]{ width: 50px;}
						.pyramid.selected .pyramid_bar[data-size="4"]:before{ width: 54px;}
					.pyramid_bar[data-size="5"]{ width: 64px; }
						 .pyramid.selected .pyramid_bar[data-size="5"]:before{ width: 68px;}
					.pyramid_bar[data-size="6"]{width: 76px;}
						.pyramid.selected .pyramid_bar[data-size="6"]:before{ width: 80px;}
					.pyramid_bar[data-size="7"]{width: 90px;}
						.pyramid.selected .pyramid_bar[data-size="7"]:before{ width: 94px;}
			.pyramid_text{
				font-size: 12px;
				line-height: 16px;
				text-align: center;
				opacity: 0;
				color: #666666;
				position: relative;
				top: 20px;
			}
				.pyramid_text:before{
					content: "";
					background: url("../img/chevron.svg") no-repeat 0 0;
					background-size: 11px 7px;
					width: 11px;
					height: 7px;
					left: 50%;
					top: 98px;
					position: absolute;
					margin-left: -6px;
				}
			.pyramid.selected .pyramid_text, .pyramid.hovered .pyramid_text{
				opacity: 1;
				-ms-transition:opacity 0.3s ease-out;
				-webkit-transition:opacity 0.3s ease-out;
				transition:opacity 0.3s ease-out;
			}

	.society_planet{
		width: 180px;
		height: 180px;
		border-radius: 180px;
		background: #aebe44;
		position: absolute;
		right: 130px;
		bottom: 100px;
		-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;
	}
	.min .society_planet{ right: 100px;}
		.society_planet[data-step="choice"]{background: #ff4971;}
		.society_planet[data-step="reality"]{background: #3c8eca;}
		.society_planet.invisible{
			opacity: 0;
			z-index: -1;
		}
		.society_planet--choice{
			background: #f67b90;
		}
		.society_planet:after{
			position: absolute;
			right: 0px;
			top: 0px;
			content: "";
			width: 90px;
			border-radius: 0px 90px 90px 0;
			height: 180px;
			background: #c9da4e;
		}
			.society_planet[data-step="choice"]:after{background: #ff89a0;}
			.society_planet[data-step="reality"]:after{background: #65a5d5;}
		.society_planet--choice:after{
			background: #fa95a5;
		}

		.society_ray{
			height: 88px;
			z-index: 1;
			left: 50%;
			bottom: 90px;
		}
			.society_ray .persona{
				position: absolute;
				bottom: 100%;
				left: 50%;
			}

#ResSociety{}
	#ResSociety .slide_form{ left: 70px;}
		.ressociety_label{ width: 200px;}
		.min .ressociety_label{ width: 160px;}
	#ResSociety .pyramid_result{
		position: absolute;
		left: 270px;
		top: 240px;
		width: 90px;
	}
	#ResSociety .pyramid_result.invisible{
		visibility: hidden;
	}
		.pyramid_result .pyramid_bar{
			-webkit-transition:width 0.3s ease-out;
			-ms-transition:width 0.3s ease-out;
			transition:width 0.3s ease-out;
		}
			.pyramid_result .pyramid_bar:before{
				-webkit-transition:width 0.3s ease-out;
				-ms-transition:width 0.3s ease-out;
				transition:width 0.3s ease-out;
			}
		.pyramid_result[data-step="think"] .pyramid_bar{
			background: #c9da4e;
		}
			.pyramid_result[data-step="think"] .pyramid_bar:before{ background:#c9da4e;}
		.pyramid_result[data-step="choice"] .pyramid_bar{
			background: #ff89a0;
		}
			.pyramid_result[data-step="choice"] .pyramid_bar:before{ background:#ff89a0;}
		.pyramid_result[data-step="reality"] .pyramid_bar{
			background: #65a5d5;
		}
			.pyramid_result[data-step="reality"] .pyramid_bar:before{ background:#65a5d5;}

		.pyramid_result .pyramid_text{
			width: 140px;
			top: 100%;
			margin-top: 20px;
			left: 0px;
			margin-left: -25px;
			position: absolute;
		}
			.pyramid_result .pyramid_text:before{
				top: auto;
				bottom: 110%;
			}

	#ResSociety .society_planet{
		right: 200px;
		bottom: 100px;
	}

	#ResSociety .info_tooltip{
		position: absolute;
		left: 50%;
		top: -40px;
	}
	#ResSociety .info_tooltip_text{
		width: 180px;
		margin-left: -90px;
		left: 50%;
		top: 0px;
	}