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

body
{
	overflow-x: hidden !important;
	overflow-y: auto !important;
}

.factfinder
{
	font-family: @title-font;

	div#site-main
	{
		width: 100%;
		box-shadow: none;
		padding: 0;
	}

	div#site-footer-links
	{
		display: none;
	}

	.factfinder-landing
	{
		height: 100%;

		.left-part
		{
			float: left;
			position: relative;
			height: 100%;
			width: 500px;
			background-color: rgba(0, 0, 0, 0.75);
			z-index: 1;

			.left-part-content
			{
				width: 400px;
				margin: 25% auto;

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

				.logo
				{
					.hires('/img/v6/factfinder/logo-factfinder-white-letters');
					width: 240px;
					height: 60px;
					background-repeat: no-repeat;
				}

				.factfinder-slider
				{
					margin-top: 92px;
					width: 325px;
					overflow: hidden;
				}

				.factfinder-slider-wrapper
				{
					width: 1300px;
					position: relative;
				}

				.factfinder-solution
				{
					width: 325px;
					height: 220px;
					display: inline-block;
					vertical-align: top;
					color: #fff;
					float: left;

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

					.title
					{
						margin: 0;
						font: bold 1.88em @title-font;
					}

					.text
					{
						font: 1.31em @title-font;
						margin-top: 30px;
					}
				}

				.factfinder-nav
				{
					margin-top: 5px;

					ul
					{
						margin: 0;
						padding: 0;

						li
						{
							display: inline-block;
							border-radius: 50%;
							width: 10px;
							height: 10px;
							margin-right: 5px;
							background-color: #d2d2d2;
							cursor: pointer;

							&.active
							{
								background-color: @accent-color;
							}
						}
					}
				}

				div.contact-us
				{
					margin: 40px auto 0;

					a
					{
						font: bold 1.13em @title-font;
						display: inline-block;
						background: @accent-color;
						color: white;
						padding: 9px 40px;
						text-decoration: none;

						&:hover
						{
							background: #0088e6;
						}

						&#watch-intro
						{
							.margin-left-right(20px, 0);
							background: #fff;
							color: @accent-color;
							border: 2px solid @accent-color;
							padding: 0 20px;
							line-height: 38px;

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

							span
							{
								.hires('/img/v6/factfinder/ico-play');
								width: 30px;
								height: 30px;
								display: inline-block;
								margin-left: 0;
								margin-right: 10px;
								vertical-align: middle;
							}
						}
					}
				}
			}

			.arrow
			{
				.hires('/img/v6/factfinder/arrow');
				display: block;
				width: 22px;
				height: 82px;
				background-repeat: no-repeat;
				cursor: pointer;
				position: absolute;
				top: 320px;
				right: 44px;
				outline: none;

				html[dir='rtl'] &
				{
					.hires('/img/v6/factfinder/arrow-rtl');
					left: inherit;
					right: 44px;
				}
			}
		}

		.right-part
		{
			position: relative;
			height: 100%;

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

			.animation-frame
			{
				.hires('/img/v6/factfinder/factfinder2');
				width: 936px;
				height: 551px;
				background-repeat: no-repeat;
				position: absolute;
				top: 120px;
				right: calc(10%);

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

				.animation
				{
					background-size: cover;
					width: 730px;
					height: 450px;
					background-repeat: no-repeat;
					position: absolute;
					top: 34px;
					right: 102px;

					html[dir='rtl'] &
					{
						right: inherit;
						left: 102px;
					}

					&[data-index="0"]
					{
						.hires('/img/v6/factfinder/1', 'gif');
					}

					&[data-index="1"]
					{
						.hires('/img/v6/factfinder/2', 'gif');
					}

					&[data-index="2"]
					{
						.hires('/img/v6/factfinder/3', 'gif');
					}

					&[data-index="3"]
					{
						.hires('/img/v6/factfinder/4', 'gif');
					}
				}
			}
		}
	}
}