// Office Market Use Only

.office-market{
	background-color: #FFF;
		&.web{
			box-shadow: 0px -3px 10px -1px $black;
		}
	.header-outer{
		background-color: $taupe-bg;
			header{
				height: 65px;
					.logo{
						padding: 13px 20px 12px 20px;
					}
					.page-head{
						background-color: $dark-blue;
						padding: 7px 15px 0px;
						width: 596px;
						margin-right: -46px;
							h2{
								@include text-style($white, 27pt, 400, $oswald);
								float: left;
							}
							span{
								@include text-style($white, 27pt, 400, $oswald);
								float: right;
							}
					}
			}
	}
	.white-area{
		.wrapper{
			&.ptb20{
				padding: 17px 0;
			}
		}
	}
	h4{
		@include text-style($taupe, 15pt, 400, $oswald);
		text-align: center;
	}
	.gray-section{
		background-color: $sec-bg;
		margin: 10px 0;
		border-top: 4px solid $taupe;
		position: relative;
			.left-set{
				position: absolute;
				top: 0px;
				left: 0px;
				z-index: 10;
				width: 35px;
					h5{
						@include text-style($taupe, 8pt, 400, $oswald);
						-webkit-transform: rotate(-90deg);
						-moz-transform: rotate(-90deg);
						-ms-transform: rotate(-90deg);
						-o-transform: rotate(-90deg);
						filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
							&.top{
								top: 30px;
								position: absolute;
							}
							&.bottom{
								top: 95px;
								position: absolute;
							}
					}
			}
			.three-coloumn{
				width: 241.66px;
				float: left;
				padding: 15px 25px;
					.value-area{
						width: 60%;
						display: inline-block;
						text-align: center;
						vertical-align: middle;
							span{
								display: block;
								line-height: 0;
									.fa{
										font-size: 55px;
										font-weight: bold;
										line-height: 30px;
											&.red{
												color: #d02724;
											}
											&.green{
												color: #3cb74a;
											}
											&.yellow{
												font-size: 25px;
												color: #fda600;
												width: 30px;
											}
									}
							}
							h2{
								@include text-style($taupe, 20pt, 400, $oswald);
							}
					}
					.icon-area{
						width: 38%;
						display: inline-block;
						vertical-align: middle;
					}
			}
			.bottom-area{
				background-color: $taupe;
					.three-head{
						width: 241.66px;
						float: left;
						padding: 7px 25px;
						@include text-style($white, 8pt, 400, $oswald);
						text-align: center;
						text-transform: uppercase;
					}
			}
	}
	.dark-blue-area{		
		.graph-half{
			float: left;
			width: 50%;
			margin-bottom: 20px;
			position: relative;
				.million-text{
					@include text-style($white, 8.5pt, 300, $roboto);
					position: absolute;
					top: 100px;
					-webkit-transform: rotate(-90deg);
					-moz-transform: rotate(-90deg);
					-ms-transform: rotate(-90deg);
					-o-transform: rotate(-90deg);
					filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
						&.top{
							top: 88px;
						}
				}
				svg{
					left: 20px !important;
						tspan{
							@include text-style($white, 8.5pt, 300, $roboto);
						}
				}
		}
		.graph-header{
			&.h65{
				height: 65px;
			}
			&.h50{
				height: 50px;
			}
			.heading{
				&.lh24{
					line-height: 24px;
				}
				&.mt15{
					padding-top: 15px;
				}
				span{
					@include text-style($white, 12pt, 400, $oswald);
					display: block;
				}
			}
			.line-color-list{
				&.two-color{
					width: 215px;
				}
			}
			.square-color-list{
				margin: 5px auto;
				width: 215px;
					ul{
						li{
							@include text-style($white, 8.5pt, 300, $roboto);
							list-style: none;
							float: left;
							margin: 0 15px;
								span{
									float: left;
									@include height-width(10px, 10px);
									margin: 2px 5px 0 0;
										&.taupe{
											background-color: $taupe;
										}
										&.green{
											background-color: $green;
										}
										&.blue{
											background-color: $blue;
										}
								}
						}
					}
			}
		}
	}
	.footer-outer{
		background-color: $dark-blue;
			.footer{
				border-top: 0;
				padding-bottom: 20px;
			}
	}	
}