@import '../default.less';
@import '../mixins.less';
//DON'T ADD IMPORTS, ABOVE ARE TO MAKE INTELLISENSE WORK
@charcoal: #353d40;
@sky: #c8d7df;

div#site-holder.v6
{
	@landing-title-color: #7d9cb3;

	.landing-sprite()
	{
		.hires('/img/v6/sprite', 'png?v=1');
		background-size: 308px 84px !important;
	}

	overflow: hidden;

	a
	{
		outline: none;
	}

	.landing-btn
	{
		padding: 12px 41px;
		font-size: 16px;
		display: inline-block;
		line-height: 1.25em;
		border-radius: 2px;
		text-decoration: none;
		text-transform: uppercase;
		border: 1px solid #fff;
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24);

		&.accent
		{
			font-weight: normal;
			border: none;
		}

		&.signup:hover
		{
			color: @charcoal;
			background: #fff;
		}
	}

	.centered-text
	{
		text-align: center;
		margin-top: 20px;
	}

	#landing
	{
		font-family: @title-font;

		.wrapper
		{
			width: 940px;
			position: relative;
			margin: auto;

			.products
			{
				background-color: #F1F8FE;
			}
		}
	}

	h1
	{
		font-size: 26pt;
		font-weight: normal;
		color: @landing-title-color;
		margin: 40px auto 30px auto;
	}

	h2 + p
	{
		font-size: 18px;
		font-weight: bold;
		line-height: 1.33em;
		letter-spacing: -0.1px;
		color: @secondary-color;
		margin: 0;
	}

	h1, h2, h3, h4
	{
		text-transform: uppercase;
	}

	#head
	{
		width: 100%;
		height: 400px;
		margin: auto;
		padding-top: 69px;
		padding-bottom: 69px;
		.hires('/img/v7/home/landing-bg', 'jpg');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		z-index: 10;
		color: #fff;
		position: relative;
		white-space: nowrap;

		&.autocomplete
		{
			#benefits
			{
				display: none;
			}
		}


		h1
		{
			font-weight: bold;
			font-size: 36px;
			margin-top: 0;
			margin-bottom: 5px;
			color: #fff;
		}

		#repository
		{
			font-size: 18px;
			font-weight: bold;
			letter-spacing: -0.1px;
		}

		#site-search
		{
			border-bottom: 1px solid #fff;
			margin-top: 30px;
			margin-bottom: 30px;
			padding-bottom: 15px;

			#search-query
			{
				background-image: none;
				color: #fff;
				font-size: 30pt;
				height: 50px;
				.margin-left-right(50px, 0);

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

				&::-ms-clear
				{
					display: none;
				}
			}

			#site-search-button
			{
				left: 0;
				top: 10px;
				.landing-sprite();
				background-position: 0 -45px;
				height: 40px;
				width: 40px;
				position: absolute;
				padding: 0;
				background-repeat: no-repeat;
				background-color: transparent;

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

			#site-search-examples, #search-progress
			{
				display: none !important;
			}
		}

		#benefits
		{
			display: inline-block;
			vertical-align: top;
			color: white;
			float: left; //Safari moves button down otherwise
			max-width: 60%;

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

			h2
			{
				font-weight: bold;
				font-size: 18px;
				letter-spacing: -0.1px;
				margin-bottom: 5px;
				color: white;
				text-transform: none;
			}

			ul
			{
				padding: 0;
				margin: 0;
				display: inline-block;
				list-style-type: none;

				li
				{
					padding: 3px 0;
					font-size: 16px;
					line-height: 1.25em;
					white-space: normal;
				}
			}

			span
			{
				display: inline-block;
				.landing-sprite();
				background-position: -45px -41px;
				width: 42px;
				height: 41px;
				cursor: pointer;
				.margin-left-right(20px, 0);

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

		#signup-and-intro
		{
			display: inline-block;
			margin-top: 70px;
			float: right;

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

			.intro
			{
				.margin-left-right(20px, 0);

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

				span
				{
					.landing-sprite();
					background-position: -64px -23px;
					width: 15px;
					height: 15px;
					display: inline-block;
					.margin-left-right(0, 10px);

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

		#search-overlay
		{
			background-color: #000;
			opacity: 0.5;
			width: 940px;
			height: 400px;
			position: absolute;
			display: none;
			top: 0;
		}

		#search-close
		{
			.landing-sprite();
			background-position: -162px -3px;
			height: 18px;
			width: 18px;
			position: absolute;
			top: 96px;
			right: ~'calc((100% - 940px) / 2 + 18px)';
			display: none;
			cursor: pointer;
			z-index: 1;

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

		#tags-sources-topics
		{
			display: none;
			margin-top: 20px;
			padding: 0 60px;


			h2
			{
				font-size: 18px;
				color: white;
			}

			div
			{
				display: inline-block;
				vertical-align: top;
				margin-top: 20px;
				.margin-left-right(0, 120px);

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

				a
				{
					color: white;
					text-decoration: none;
					font-weight: normal;
					line-height: 1em;
				}

				h3
				{
					margin: 5px 0;

					a
					{
						font-weight: bold;
					}
				}

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

					li
					{
						padding: 3px 0;
					}
				}
			}
		}

		&.search-expanded
		{
			h1, #benefits, #signup-and-intro, #repository
			{
				display: none;
			}

			#site-search
			{
				margin-top: 0;
			}

			#search-overlay, #search-close
			{
				display: block;
			}

			&.x2
			{
				height: 759px;

				#search-overlay
				{
					height: 759px;
				}

				#tags-sources-topics
				{
					display: block;
				}
			}
		}
	}

	.world-data
	{
		ul
		{
			list-style-type: none;
			font-size: 0;
			padding: 0;
			margin-top: 30px;
		}

		li
		{
			font-size: 16px;
			display: inline-block;
			width: 260px;
			margin-right: 70px;
			text-align: center;
			vertical-align: top;
			height: 300px;
			position: relative;

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

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

				&:last-child
				{
					.margin-left-right(0, 0);
				}
			}

			&.topics
			{
				width: 272px;
			}

			.icon
			{
				display: inline-block;
				width: 160px;
				height: 160px;
			}

			&.topics .icon
			{
				.hires('/Img/v7/home/1', @backgroundSize: 160px 160px)
			}

			&.sources .icon
			{
				.hires('/Img/v7/home/2', @backgroundSize: 160px 160px)
			}

			&.countries .icon
			{
				.hires('/Img/v7/home/3', @backgroundSize: 160px 160px)
			}

			h4
			{
				font-size: 18px;
				font-weight: bold;
				line-height: 1.89em;
				letter-spacing: -0.1px;
				color: @charcoal;
				text-transform: uppercase;
			}

			p
			{
				line-height: 1.25em;
				color: #292929;
			}

			.explore
			{
				font-size: 16px;
				font-weight: bold;
				line-height: 2.13;
				letter-spacing: -0.1px;
				color: @accent-color;
				position: absolute;
				bottom: 0;
				text-decoration: none;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}

	.professionals
	{
		text-align: center;

		h2 + p
		{
			margin: 0 auto;
			width: 680px;
		}

		.item-slider
		{
			width: 940px;
			overflow: hidden;
			margin-top: 40px;
		}

		.item-slider-wrapper
		{
			width: 5*940px;
			position: relative;
		}

		.item-nav
		{
			text-align: center;
			margin-bottom: 20px;

			ul
			{
				margin: 0;
				padding: 0;

				li
				{
					display: inline-block;
					border: 1px solid #707070;
					width: 15px;
					height: 15px;
					margin-right: 14px;
					border-radius: 50%;
					cursor: pointer;

					&.active
					{
						background-color: transparent;
						background-color: #707070;
					}
				}
			}
		}

		.ss-item
		{
			width: 940px;
			display: inline-block;
			vertical-align: top;
			float: left;

			p
			{
				font-size: 22px;
				font-weight: bold;
				line-height: 1.55em;
				letter-spacing: -0.2px;
				color: @charcoal;
				margin: 40px 0;
			}
		}

		.image
		{
			width: 940px;
			height: 480px;
			background-size: cover;
		}

		#ss-item1 .image
		{
			.hires('/Img/v7/home/explore-data', 'jpg?v=1');
		}

		#ss-item2 .image
		{
			.hires('/Img/v7/home/easily-manipulate', 'jpg');
		}

		#ss-item3 .image
		{
			.hires('/Img/v7/home/receive-notifications', 'jpg');
		}

		#ss-item4 .image
		{
			.hires('/Img/v7/home/dashboard-reports', 'jpg');
		}

		#ss-item5 .image
		{
			.hires('/Img/v7/home/view-your-business', 'jpg');
		}
	}

	#landing .products
	{
		h2 + p
		{
			color: white;
			font-size: 16px;
			font-weight: normal;
		}

		li
		{
			h4, p
			{
				color: @charcoal;
			}
		}
	}

	.quotes
	{
		p
		{
			color: #292929;
			font-size: 18px;
		}

		p:nth-child(2n)
		{
			font-size: 22px;
			line-height: 1.27em;
			letter-spacing: 0.3px;
			color: @secondary-color;
		}

		.column
		{
			width: 385px;
		}

		.map
		{
			padding: 0;
			.hires('/img/v7/home/map', 'jpg', @backgroundSize: cover);
			background-size: cover;
			width: 480px;
			height: 270px;
			margin-left: 70px;
			box-shadow: 5px 15px 25px 0 rgba(0, 0, 0, 0.16);

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

	#signup-for-free
	{
		text-align: center;
		height: auto;

		p
		{
			font-size: 24px;
			line-height: 1.29em;
			letter-spacing: 0.3px;
			color: black;
			width: 475px;
			margin: 35px auto;
		}
	}
}

div.search-autocomplete-results
{
	border: none;
	background-color: transparent;
	display: none !important;
	box-shadow: none;
	z-index: 10;

	&.visible
	{
		display: block !important;
	}

	ul
	{
		margin-top: 30px;

		li
		{
			color: #fff;
			font-size: 18pt;
			padding: 5px;

			a.keyword-search-autocomplete-result
			{
				color: inherit;

				.keyword-search-autocomplete-item, .keyword-search-autocomplete-text
				{
					color: inherit;
				}
			}

			&:hover
			{
				background-color: transparent;
				color: @secondary-color;
			}
		}
	}
}

.search-autocomplete-results.visible ul li
{
	&.search-autocomplete-select,
	.search-autocomplete-select
	{
		background-color: transparent;
		color: @secondary-color;
	}

	a.keyword-search-autocomplete-result .keyword-search-autocomplete-text .search-autocomplete-select
	{
		color: @secondary-color;
	}
}

.v6 div#site-header .wrapper.v6 .user-info .user-info-dlg
{
	z-index: 11;
}

.v7 #signup-and-intro
{
	.landing-btn
	{
		background-color: transparent;
	}
}