/****************************** SCALE *************************************/

.scale-subjective {
	background: #ddd;
	display: table;
	width: 100%;
	height: 110px;
	position: relative;
	border-radius: 15px;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
	margin: 20px 0;
}
.scale-subjective:after {
	content: "";
	display: block;
	clear: both;
}

.scale-subjective:before {
	content: "";
	width: 4px;
	background: black;
	height: 110px;
	position: absolute;
	left: 50%;
	margin-left: -2px;
	top: 0;
	z-index: 2;
}						
						

		.scale-subjective em {
			font-family: "OswaldBold";
			font-size: 18px;
			line-height: 1;
			color: #333333;
			font-style: normal;
		}		
		
		.scale-from, .scale-to {
			width:75px;
			display: table-cell;			
			font-family: OswaldBold;
			line-height: 1;
			position: relative;
		}
		
				.scale-subjective .scale-key {
					background: black;
					border: 3px solid white;
					border-radius: 100px;
					font-size: 36px;
					line-height: 55px;
					width: 60px;
					height: 60px;
					color: #FFFFFF;
					display: block;
					margin: 0 auto;
					text-align: center;
					position: relative;
					top:-5px;
					box-sizing: border-box;
					margin-bottom: 4px;
				}				

		.scale-subjective .scale {
			padding: 0 15px;
			position: relative;
			vertical-align: middle;
			display: table-cell;
			box-sizing: border-box;
		}
				
				.scale-subjective .scale > div {
					display: table;
					width: 100%;
					table-layout: fixed;
					height: 50%;
					box-sizing: border-box;
				}
				
						.scale-subjective .scale > div > span {
							display: table-cell;
							width: auto;
							text-align:center;
							font-family: "OswaldLight";
							color: #666;
							position: relative;							
						}
						
						.scale-subjective .scale-units {						
							border-bottom: 1px solid white;	
							font-size: 22px;
						}
						
								.scale-subjective .scale > .scale-units > span {
									vertical-align: bottom;
								}

								.scale-subjective .scale-units > span:after {						
									width: 1px;
									background: white;
									position: absolute;
									bottom: -5px;
									height: 10px;
									content: "";
									left: 50%;
								}	

								.scale-subjective .scale-selected {
									display: block;
									background: black;
									color: white;
									position: absolute;
									width: 50px;
									height: 65px;
									text-align: center;
									font-family: "OswaldBold";
									font-size: 26px;
									top: -5%;
									height: 55%;
									left:50%;
									margin-left: 5%;
									margin-top: -1px;
									z-index: 4;
									padding-top: 15px;
									box-sizing: border-box;
								}
								.scale-subjective .scale-selected:after {
									background: #cccccc;
									background: -moz-linear-gradient(top,  #999999 0%, transparent 100%);
									background: -webkit-linear-gradient(top,  #999999 0%,transparent 100%);
									background: linear-gradient(to bottom,  #999999 0%,transparent 100%);
									filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='transparent',GradientType=0 );
									width: 100%;
									height: 50px;
									bottom: -50px;
									left: 0;
									content: "";
									position: absolute;
									opacity: 0.4;
								}
								
						.scale-subjective .scale-labels {
							font-size: 16px;
						}
								
								.scale-subjective .scale-labels > span {								
									padding-top: 4px;
								}
								
								.scale-unit-middle em {
									position: absolute;
									width: 80px;
									background: #ddd;
									left: 50%;
									margin-left: -40px;
									padding: 4px 0;
									z-index: 3;
									top: 5px;
								}
								
						
								@media (max-width:650px) {
									
									.scale-subjective .scale-labels > span {
										visibility: hidden;
									}
									
									.scale-subjective .scale-labels > .scale-unit-middle,
									.scale-subjective .scale-labels > .scale-unit-intermediate {
										visibility: visible;
									}
									
								}
						
								@media (max-width:450px) {
									.scale-subjective .scale-labels > .scale-unit-intermediate {
										visibility: hidden;
									}
								}