@import '../../default.less';
@import '../mixins.less';

div#site-holder
{
	width: auto;
	min-height: 100%;
	position: relative;
}

html, body
{
	height: 100%;
	margin: 0;
}

#site-main
{
	box-shadow: none;

	&.knoema-professional
	{
		padding: 0;

		.page-section
		{
			ul
			{
				list-style: none;
				margin: 25px 0 16px 0;
				padding: 0;

				li
				{
					color: white;
					position: relative;
					line-height: 38px;
					padding-left: 42px;

					html[dir='rtl'] &
					{
						padding-left: 0;
						padding-right: 42px;
					}

					&:before
					{
						content: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 1' enable-background='new 0 0 24 1' xml:space='preserve'%3E%3Crect fill='%236993a9' width='24' height='1'/%3E%3C/svg%3E%0A");
						display: inline-block;
						width: 24px;
						height: 1px;
						position: absolute;
						top: -5px;
						left: 0;

						html[dir='rtl'] &
						{
							left: auto;
							right: 0;
						}
					}
				}
			}
		}
	}
}

#premium
{
	div.page-section
	{
		padding-top: 110px;

		.uppercase
		{
			text-transform: uppercase;
		}

		div#professional
		{
			display: inline-block;
			width: 300px;
			padding-right: 50px;
			vertical-align: top;
			
			html[dir='rtl'] &
			{
				.padding-left-right(50px, 0);
			}

			h1
			{
				font-size: 56px;
				line-height: 90%;
				letter-spacing: -0.01em;
				margin-bottom: 20px;
				margin-top: 0;
			}

			span
			{
				font-size: 18px;
				color: #6993a9;
				font-weight: bold;
				letter-spacing: -0.01em;
			}

			p#description
			{
				margin-top: 30px;
			}
		}

		.video
		{
			display: inline-block;

			h3.blue
			{
				color: #6993a9;
				text-align: center;
				font-style: italic;
				font-weight: normal;
			}
		}

		.img-people
		{
			display: inline-block;
			width: 36%;
			vertical-align: middle;
			text-align: right;

			html[dir=rtl] &
			{
				text-align: left;
			}

			span
			{
				.hires("/Img/v7/professional/pic-people", "jpg");
				width: 300px;
				height: 400px;
				background-repeat: no-repeat;
				display: inline-block;
			}
		}

		&.black
		{
			background-color: #353d40;

			h2
			{
				line-height: 40px;
				width: 66%;
				color: white;
			}

			div.one-line
			{
				hr
				{
					position: absolute;
					margin-top: 10px;
					width: 24px;
					color: #6993a9;
					border-color: #6993a9;
				}

				p
				{
					color: white;
					margin-left: 35px;
				}
			}

			#activate
			{
				display: inline-block;
				text-align: center;
				margin: 10px auto 0 auto;
				border-radius: 3px;
				padding: 12px 0;
				text-decoration: none;
				font-size: 16px;
				width: 190px;
			}
		}

		&.gray
		{
			div#first
			{
				margin-top: 60px;
			}

			div.column
			{
				vertical-align: middle;

				&#right
				{
					padding-left: 7px;

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


			span
			{
				width: 470px;
				height: 320px;
				background-repeat: no-repeat;
				display: inline-block;

				&#search
				{
					.hires("/Img/v7/professional/pic-search", "jpg");
				}

				&#charts
				{
					.hires("/Img/v7/professional/pic-charts", "jpg");
				}

				&#dataset
				{
					.hires("/Img/v7/professional/pic-dataset", "jpg");
				}
			}
		}

		&.sign-up
		{
			p
			{
				margin-left: 180px;
				margin-right: 180px;
				font-size: 24px;
			}

			#sign-up-today
			{
				display: inherit;
				text-align: center;
				margin: 0 auto;
				border-radius: 3px;
				padding: 12px 0;
				text-decoration: none;
				font-size: 16px;
				width: 190px;
			}
		}
	}
}