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

@slate-blue: #6080c0;
@charcoal-gray: #222240;
@light-gray: #292929;
@gray97: #f7f7f7;
@sky: #BFCCE6;

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;
	}
}

#premium
{
	div.page-section
	{
		padding: ~"80px calc((100% - 960px) / 2)";

		.left-block, .right-block
		{
			display: inline-block;

			ul
			{
				padding-left: 20px;

				html[dir='rtl'] &
				{
					.padding-left-right(0, 20px);
				}
			}
		}

		.right-block
		{
			float: right;

			html[dir='rtl'] &
			{
				float: left;
			}
		}

		h1
		{
			font: bold 60px @title-font;
			line-height: 60px;
			letter-spacing: -0.48px;
		}

		&.with-video
		{
			padding-top: 0;
			height: 586px;
			padding-right: 0;

			html[dir='rtl'] &
			{
				.padding-left-right(0, ~'calc((100% - 960px) / 2)');
			}

			.video
			{
				display: inline-block;
				.hires("/Img/v7/professional/video-block","jpg?v=1");
				background-repeat: no-repeat;
				width: ~'calc(100% - 650px)';
				height: 586px;
				position: relative;
				margin-left: 275px;


				.sloping-triangle
				{
					width: 0;
					height: 0;
					border-bottom: 586px solid white;
					border-right: 180px solid transparent;

					html[dir='rtl'] &
					{
						border-right: none;
						border-left: 180px solid transparent;
					}
				}

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

				iframe
				{
					position: absolute;
					top: 152px;
					left: -207px;
					box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.16);

					html[dir='rtl'] &
					{
						left: auto;
						right: -207px;
					}
				}
			}

			#activate
			{
				display: inline-block;
				margin: 10px auto 0 auto;
				border-radius: 3px;
				padding: 16px 38px;
				text-decoration: none;
				font: bold 19px @title-font;
				color: #353d3f;
			}

			div#professional
			{
				display: inline-block;
				width: 370px;
				vertical-align: top;

				h1
				{
					line-height: 72px;
					letter-spacing: -0.58px;
					margin-bottom: 20px;
					margin-top: 72px;
					font-size: 72px;
					font-weight: bold;
				}

				span
				{
					font-size: 18px;
					color: @slate-blue;
					font-weight: bold;
					letter-spacing: -0.01em;

					&.subscription-actevated
					{
						color: #4ab55f;
					}
				}

				p#description
				{
					margin-top: 18px;
					margin-bottom: 18px;
				}
			}
		}

		&.light-blue
		{
			background-color: @sky;
			height: 690px;
			padding-top: 60px;

			.chart-block
			{
				width: 620px;
				height: 422px;
				.hires("/Img/v7/professional/chart-block","png?v=4");
				background-size: cover;
				box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.16);
				margin-top: 24px;
				background-repeat: no-repeat;
				float: right;
				display: inline-block;

				html[dir='rtl'] &
				{
					float: left;
				}
			}

			.left-block
			{
				h2
				{
					font: normal 21px @title-font;
					letter-spacing: 0.25px;
					line-height: 24px;
					text-align: left;
					color: @light-gray;
					margin-top: 24px;
					width: 300px;
					position: relative;

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

					&:before
					{
						display: none;
						content: ' ';
						position: absolute;
						top: 12px;
						left: -34px;
						width: 16px;
						height: 1px;
						background-color: @light-gray;

						html[dir='rtl'] &
						{
							left: auto;
							right: -34px;
						}

						@media all and (min-width: 1100px)
						{
							display: inline-block;
						}
					}
				}
			}
		}

		&.gray
		{
			background-color: @gray97;
			padding-top: 130px;
			text-align: center;

			h1
			{
				color: @slate-blue;
			}

			h2
			{
				font: normal 24px @title-font;
				color: @light-gray;
				width: 770px;
				margin: 0 auto;
			}

			.white-block
			{
				position: absolute;
				top: -100px;
				background-color: white;
				width: 560px;
				padding: 20px 200px;
				box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.16);

				p
				{
					font-size: 40px;
					font-weight: bold;
					letter-spacing: -0.32px;
					color: @charcoal-gray;
					line-height: 40px;
				}
			}
		}

		.uppercase
		{
			text-transform: uppercase;
		}

		&.deep-search
		{
			background-color: @charcoal-gray;
			height: 760px;

			.left-block
			{
				width: 250px;

				h1
				{
					color: white;
					margin-top: 0;
					margin-bottom: 20px;
				}

				h2
				{
					font: bold 24px @title-font;
					color: @slate-blue;
					line-height: 30px;
					letter-spacing: -0.19px;
				}

				a
				{
					display: inline-block;
					margin: 33px auto 0 auto;
					border-radius: 3px;
					width: 100%;
					text-decoration: none;
					font: bold 19px @title-font;
					color: @charcoal-gray;
					padding: 17px 0;
				}
			}

			.right-block
			{
				width: 620px;

				iframe
				{
					height: 434px;
					width: 620px;
					display: inline-block;
				}

				.green-line
				{
					margin: 40px 0 32px 0;
					height: 4px;
					background-color: #4ab55f;
					width: 126px;
				}

				p
				{
					color: white;
				}
			}
		}

		&.workflow-tools
		{
			height: 790px;
			background-color: @sky;

			li, h2
			{
				font: bold 18px @title-font;
				color: @charcoal-gray;
				margin-top: 30px;
				line-height: 30px;
				letter-spacing: -0.14px;
			}

			.left-block
			{
				width: 280px;

				h1
				{
					color: @charcoal-gray;
					margin-top: 0;
					margin-bottom: 20px;
				}

				span
				{
					width: 48px;
					height: 51px;
					display: inline-block;

					&.word
					{
						background-image: url("/Img/v7/shared/word.svg");
						margin-right: 20px;

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

					&.excel
					{
						background-image: url("/Img/v7/shared/excel.svg");
					}
				}
			}

			.right-block
			{
				width: 620px;

				iframe
				{
					box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.16);
				}
			}
		}

		&.workflows
		{
			background-color: @gray97;
			text-align: center;

			h1
			{
				color: @slate-blue;
			}

			p
			{
				color: @light-gray;
				font-size: 24px;
				width: 780px;
				margin: 0 auto;
			}
		}

		&.visualizations-toolkit
		{
			background-color: @charcoal-gray;
			height: 660px;

			h1
			{
				color: white;
				font: bold 56px @title-font;
				margin-top: 0;
			}

			.left-block
			{
				width: 306px;
			}

			.right-block
			{
				width: 620px;

				p
				{
					color: white;
				}

				iframe
				{
					height: 387px;
					width: 620px;
					display: inline-block;
				}
			}
		}

		&.data-notifications
		{
			background-color: @sky;
			height: 640px;

			h2
			{
				font: bold 18px @title-font;
				color: @charcoal-gray;
				margin-top: 30px;
				line-height: 24px;
				letter-spacing: -0.14px;
				margin-bottom: 10px;
			}

			a
			{
				font: bold 16px @title-font;
				color: @accent-color;
				line-height: 24px;
				letter-spacing: -0.13px;
				text-decoration: none;
				outline: none;

				.chevron-right
				{
					margin-left: 8px;

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

				&:hover
				{
					color: #1b44a2;
				}
			}

			.left-block
			{
				width: 280px;

				h1
				{
					color: @charcoal-gray;
					margin-top: 0;
					margin-bottom: 20px;
					font-size: 56px;
				}
			}

			.right-block
			{
				width: 620px;

				iframe
				{
					height: 396px;
					width: 620px;
					display: inline-block;
				}
			}
		}

		&.white
		{
			background-color: #fff;

			h1
			{
				font-size: 52px;
				width: 760px;
				margin: 0 auto 60px;
				color: @slate-blue;
				text-align: center;
			}

			.left-block, .right-block
			{
				width: 450px;

				ul
				{
					list-style: none;
					margin: 0;
					padding: 0;

					html[dir='rtl'] &
					{
						margin: 0;
						padding: 0;
					}

					li
					{
						margin-bottom: 25px;
						color: @light-gray;

						&:before
						{
							display: inline-block;
							background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20.346' height='14.793' viewBox='0 0 20.346 14.793'%3E%3Cdefs%3E%3Cstyle%3E .cls-1%7Bfill:none;stroke:%23707070;stroke-linecap:round;stroke-width:2px%7D %3C/style%3E%3C/defs%3E%3Cg id='Group_184' data-name='Group 184' transform='translate(-602.533 -3576.688)'%3E%3Cpath id='Path_13' d='M0 0v16.921' class='cls-1' data-name='Path 13' transform='rotate(45 -4008.42 2539.224)'/%3E%3Cpath id='Path_14' d='M1.22 0v7.2' class='cls-1' data-name='Path 14' transform='rotate(135 -438.392 1920.903)'/%3E%3C/g%3E%3C/svg%3E");
							background-repeat: no-repeat;
							width: 24px;
							height: 15px;
							content: ' ';
							margin-right: 20px;
							vertical-align: top;
							margin-top: 5px;

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

						div
						{
							display: inline-block;
							width: 400px;
						}
					}
				}
			}
		}

		&.light-map
		{
			height: auto;
			padding-top: 110px;
			padding-bottom: 110px;
			text-align: center;

			h1
			{
				color: @charcoal-gray;
				font: bold 52px @title-font;
				margin: 0 auto;
				width: 800px;
			}

			#go-pro
			{
				display: inline-block;
				margin: 30px auto 0 auto;
				border-radius: 3px;
				padding: 16px 38px;
				text-decoration: none;
				font: bold 19px @title-font;
				color: #353d3f;
			}
		}
	}

	.separate-gray
	{
		background-image: url("data:image/svg+xml,%3Csvg width='2600' height='120' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23f7f7f7%7D%3C/style%3E%3C/defs%3E%3Cg%3E%3Ctitle%3ELayer 1%3C/title%3E%3Cpath fill='black' class='cls-1' d='m0.00019,0.00011l1326.1901,117.858l1271.37879,-117.858l-2597.56889,0z' id='Path_1214'/%3E%3C/g%3E%3C/svg%3E");
		height: 120px;
		background-color: @charcoal-gray;
		background-repeat: no-repeat;
		background-position: center -1px;
	}

	.separate-light-blue
	{
		background-image: url("data:image/svg+xml,%3Csvg width='2600' height='120' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23BFCCE6%7D%3C/style%3E%3C/defs%3E%3Cg%3E%3Ctitle%3ELayer 1%3C/title%3E%3Cpath fill='black' class='cls-1' d='m0,0.00005l1284.4631,119.9l1314.88835,-119.9l-2599.35146,0z' id='Path_1213'/%3E%3C/g%3E%3C/svg%3E");
		height: 120px;
		background-color: @gray97;
		background-repeat: no-repeat;
		background-position: center -1px;

		&.white
		{
			background-color: #fff;
		}
	}
}