// Commercial Home Page 

.web-height{
	height: 10px;
	background-color: #525659;
}
.page-one{
	.white-space{
		height: 26px;
		background-color: $white;
	}
	&.web{
		box-shadow: 0px -3px 10px -1px $black;
	}
	.dark-blue-area{
		padding: 20px 0 5px;
	}
	.footer{
		padding-bottom: 15px;
	}
}

.white-area{
	background-color: $white;
		&.h100{
			height: 100px;
		}
}
.tables-area{
	padding: 32px 0 33px;
		.main-head{
			@include text-style($dark-blue, 15pt, 700, $oswald);
			text-transform: uppercase;
		}
}
.dark-blue-area{
	background-color: $dark-blue;
	padding: 30px 0 5px;
		.graph-header{
			height: 45px;
				.heading{
					@include text-style($white, 15pt, 400, $oswald);
					text-align: center;				
				}
				.line-color-list{
					margin: 0 auto;
					width: 260px;
						ul{
							li{
								@include text-style($white, 8.5pt, 300, $roboto);
								list-style: none;
								float: left;
								margin: 0 15px;
									span{
										width: 25px;
										height: 2px;
										float: left;
										@include height-width(2px, 20px);
										margin: 6px 5px 0 0;
											&.taupe{
												background-color: $taupe;
											}
											&.green{
												background-color: $green;
											}
											&.blue{
												background-color: $blue;
											}
									}
							}
						}
				}
		}		
		.comercial-page{
			.graph-side{
				width: 475px;
				float: left;
					svg{
						tspan{
							@include text-style($white, 8.5pt, 300, $roboto);
						}
					}
			}
			.fact-side{
				width: 220px;
				float: right;
					.heading{
						@include text-style($dark-blue, 13pt, 400, $oswald);
						background-color: $white;
						padding: 2px 5px;
					}
					p{
						@include text-style($white, 9pt, 300, $roboto);
						text-align: initial;
						margin: 12px 0;
							a{
								@include text-style($white, 10pt, 300, $roboto);
								height: 19px;
								display: block;
							}
					}
			}
		}
}