@import './default.less';
@import './mixins.less';
//DON'T ADD IMPORTS, ABOVE ARE TO MAKE INTELLISENSE WORK

@charcoal: #353d40;
@slate-blue: #6993a9;
@sky: #c8d7df;

#site-main
{
	box-shadow: none;

	&.our-products
	{
		padding: 0;
	}
}

.data-products-landing
{
	h2.center
	{
		text-align: center;
	}

	.uppercase
	{
		text-transform: uppercase;
	}

	.margin-bottom-60
	{
		margin-bottom: 60px;
	}

	div.row
	{
		display: table;
		width: 100%;
		table-layout: fixed;
		margin-top: 2px;
		
		&.first
		{
			margin-top: 65px;
		}

		&.black
		{
			background-color: @charcoal;
			color: white;
		}

		&.blue
		{
			background-color: @slate-blue;
			color: white;
		}

		&.dark-gray
		{
			background-color: #808080;
			color: white;
		}

		&.gray
		{
			background-color: #efefef;
			color: #292929;
		}


		div.one-column
		{
			height: 360px;
			width: 265px;
			display: inline-block;
			padding: 0 20px;
			.margin-left-right(5px, 6px);
			background: white;
			overflow: hidden;
			position: relative;
			float: left;

			&:first-child
			{
				margin-left: 0px;
			}

			&:last-child
			{
				margin-right: 0px;
			}

			p
			{
				color: @charcoal;
			}

			&.gray
			{
				background-color: #f7f7f7;
			}

			&.sky
			{
				background-color: @sky;
			}

			&.no-margin
			{
				margin: 0;
			}

			&.big
			{
				height: 380px;
				margin-top: -10px;
			}

			h3
			{
				color: black;
				text-align: center;
				margin: 42px 0 36px 0;
			}

			a
			{
				display: inline-block;
				text-align: center;
				margin: 10px auto 0 auto;
				padding: 12px 30px;
				text-decoration: none;
				font-size: 16px;
				position: absolute;
				bottom: 40px;
				color: @accent-color;
				font-weight: bold;
				width: 266px;
				box-sizing: border-box;

				&.button
				{
					border-radius: 3px;
					font-weight: normal;
					color: white;
				}
			}
		}

		.table-cell
		{
			height: 80px;
			display: table-cell;
			overflow: hidden;
			position: relative;
			vertical-align: middle;
			text-align: center;

			&.header
			{
				width: 408px;
				text-align: left;
				padding-left: 32px;

				html[dir='rtl'] &
				{
					text-align: right;
					padding-right: 32px;
				}
			}

			&.free
			{
				width: 105px;
				padding: 0 10px;
			}

			&.professional
			{
				width: 115px;
				padding: 0 10px;
			}

			&.enterprise
			{
				width: 150px;
				padding-left: 10px;
				padding-right: 30px;
			}

			&.block-height-40
			{
				height: 40px;
			}

			&.font-size-20
			{
				font-size: 20px;
			}

			span.check
			{
				.hires("/Img/v7/products/ico-check");
				width: 28px;
				height: 28px;
				background-repeat: no-repeat;
				display: inline-block;
			}

			a
			{
				text-decoration: none;
				color: #666;
				&.white
				{
					color: white;
				}

			}
		}

		.people-column
		{
			display: inline-block;
			width: 49%;
			box-sizing: border-box;
			vertical-align: top;
			position: relative;

			p
			{
				.margin-left-right(150px, 50px);

				html[dir='rtl'] &
				{
					.margin-left-right(50px, 150px);
				}

				&.blue
				{
					color: @slate-blue;
					font-weight: bold;
					margin-top: -10px;
				}
			}

			span
			{
				width: 120px;
				height: 120px;
				background-repeat: no-repeat;
				display: inline-block;
				position: absolute;
				top: 25px;

				&#people1
				{
					.hires("/Img/v7/products/people-01", "png?v=1");
				}

				&#people2
				{
					.hires("/Img/v7/products/people-02", "png?v=1");
				}

				&#people3
				{
					.hires("/Img/v7/products/people-03", "png?v=1");
				}

				&#people4
				{
					.hires("/Img/v7/products/people-04", "png?v=1");
				}

				&#people5
				{
					.hires("/Img/v7/products/people-05", "png?v=1");
				}

				&#people6
				{
					.hires("/Img/v7/products/people-06", "png?v=1");
				}
			}
		}
	}

	div.products
	{
		li.free, li.enterprise
		{
			background-color: #f7f7f7;
		}
	}

	div.compare-products
	{
		div.first
		{
			white-space: nowrap;
		
			div, p,h
			{
				white-space: normal;
			}
		}
	}
}