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

@sky: #c8d7df;
@charcoal: #353d40;
@off-white: #f0f0ec;

.v7 #get-started
{
	background-color: @off-white;
	font-family: @title-font;

	h1
	{
		margin-top: 0;
		margin-bottom: 13px;
	}

	h2
	{
		font: bold 36px @title-font;
		margin: 0 auto 35px auto;
		line-height: 1.28;
		letter-spacing: -0.3px;
		color: black;
		text-transform: uppercase;
	}

	h3
	{
		font-size: 18px;
		line-height: 1.89;
		letter-spacing: -0.1px;
		color: @charcoal;
		margin: 16px auto;
		text-transform: uppercase;
	}

	.world-data
	{
		.hires('/Img/v7/get-started/world-data', 'jpg', @backgroundSize: 470px 320px);
		width: 470px;
		height: 320px;
	}

	.intelligent-search
	{
		.hires('/Img/v7/get-started/intelligent-search', 'jpg', @backgroundSize: 470px 320px);
		width: 470px;
		height: 320px;
	}

	.data-atlas
	{
		.hires('/Img/v7/get-started/data-atlas', 'jpg', @backgroundSize: 470px 320px);
		width: 470px;
		height: 320px;
	}

	.page-section
	{
		font-size: 0;

		&.light-map
		{
			height: auto;
			margin-top: 100px;
		}

		&.gray
		{
			padding-bottom: 0;
			padding-top: 0;

			&.first
			{
				padding-top: 110px;
			}
		}

		&.dark-map,
		&.light-map
		{
			padding-top: 110px;
			padding-bottom: 110px;
		}

		&.video
		{
			h3
			{
				margin: 0;
				color: #6993a9;
			}
		}

		p
		{
			margin: 0;
			font: 16px @title-font;
			line-height: 1.25em;
			letter-spacing: 0.2px;
			color: #292929;
		}

		&.dark-map p
		{
			color: #fff;
		}

		.column
		{
			vertical-align: middle;
			width: 50%;
		}
	}

	#register-form .form.register
	{
		width: 100%;
		padding: 0;
		background: none;

		.register-fields,
		.passwords
		{
			font-size: 0;

			> :not(div)
			{
				font-size: 20px;
			}
		}

		p
		{
			font-size: 16px;
			color: black;
		}

		.terms-of-use a
		{
			color: black;
		}

		.text-box
		{
			width: 465px;
			margin: 10px 0;
			padding: 32px 28px;
			border: none;
			background-color: @sky;

			&#UserProfile_Email
			{
				width: 100%;
			}

			&#UserProfile_LastName,
			&#ConfirmPassword
			{
				margin-left: 10px;

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

		input[type=submit]
		{
			display: block;
			text-transform: uppercase;
			width: auto;
			padding: 17px 55px;
			font: 19px @title-font;
			line-height: 24px;
			margin: 46px auto;
			border-radius: 2px;
		}

		form + span
		{
			display: block;
			font: 16px @title-font;
			letter-spacing: 0.2px;
			color: black;
			text-align: center;
			margin: 35px auto;
		}

		br
		{
			display: none;
		}

		.checkboxes
		{
			display: none;
		}

		.invalid.aside
		{
			position: absolute;
		}

		#password-meter
		{
			position: absolute;
			width: 465px;
			color: black;

			div.text,
			div.meter
			{
				width: 100%;
			}


			div.meter
			{
				background: #ccc;

				div
				{
					width: 0;
					height: 3px;

					&.password-meter-very-weak
					{
						width: 25%;
						background: #666;
					}

					&.password-meter-weak
					{
						width: 50%;
						background: #f00;
					}

					&.password-meter-good
					{
						width: 75%;
						background: orange;
					}

					&.password-meter-strong
					{
						width: 100%;
						background: #39922C;
					}
				}
			}
		}

		#signup-social
		{
			font-size: 0;

			a
			{
				font-size: 20px;
				line-height: 1.3em;
				letter-spacing: 0.2px;
				height: 80px;
				width: 306px;
				margin: 0;
				padding: 26px 29px;
				box-sizing: border-box;
				text-decoration: none;
				color: @accent-text-color;
				text-align: center;
				border-radius: 9px;
				background-repeat: no-repeat;
				background-position: 29px center;


				&:first-child
				{
					margin-right: 11px;

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

				&:last-child
				{
					margin-left: 11px;

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

				&.facebook
				{
					background-color: #43629f;
					.hires('/Img/v7/ico-sn-fb', @backgroundSize: 32px 32px)
				}

				&.google
				{
					background-color: #1d87f8;
					.hires('/Img/v7/ico-sn-gl', @backgroundSize: 32px 32px)
				}

				&.linkedin
				{
					background-color: #0277b5;
					.hires('/Img/v7/ico-sn-in', @backgroundSize: 32px 32px)
				}
			}

			& + p
			{
				font-size: 16px;
				color: black;
				width: 658px;
				line-height: 1.13em;
				text-align: center;
				margin: 43px auto;
			}
		}
	}

	#signup-section
	{
		text-align: center;

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

		h2
		{
			width: 638px;
			margin: 0 auto 100px auto;
			text-align: center;
		}
	}

	a.top-button
	{
		box-sizing: border-box;
		float: right;
		margin: -10px 60px 0 0;
		color: white;
		padding: 12px 41px;
		outline: none;
		font-size: 16px;
		display: inline-block;
		line-height: 1.25em;
		border-radius: 2px;
		text-decoration: none;
		text-transform: uppercase;
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24);


		html[dir='rtl'] &
		{
			margin: -10px 0 0 60px;
			float: left;
		}
	}
}

#mobile-content.v7 #get-started
{
	background-color: white;

	h1
	{
		text-transform: none;
	}

	h2
	{
		width: auto;
		font-size: 28px;
		line-height: 1.29em;
		letter-spacing: -0.2px;
		margin-bottom: 25px;
	}

	h3
	{
		margin-top: 0;
	}

	.page-section
	{
		padding: 16px 20px;
		margin-bottom: 13px;

		&.black
		{
			padding-top: 35px;
			padding-bottom: 30px;
			box-sizing: border-box;
			margin-bottom: 0;
		}

		&.light-map
		{
			margin-bottom: 0;
		}

		p
		{
			font-size: 16px;
			line-height: 1.25;
			letter-spacing: 0.2px;
			color: #292929;
			margin-bottom: 14px;
		}

		.header-statement p
		{
			font-size: 14px;
			line-height: 1.43em;
			letter-spacing: -0.1px;
			color: white;
		}

		.world-data,
		.intelligent-search,
		.data-atlas
		{
			width: 100%;
			background-size: contain;
			height: 0;
			padding-top: 68%;
		}
	}

	#signup-section
	{
		margin-top: 0;
		padding-top: 46px;
		padding-bottom: 46px;

		.ui-button
		{
			box-sizing: border-box;
			min-width: 240px;
			max-width: 320px;
			width: 80%;
			font-size: 19px;
			font-weight: normal;
			line-height: 1.26;
			letter-spacing: normal;
		}
	}

	.sign-up-free
	{
		text-align: center;
		margin-top: 20px;

		a
		{
			box-sizing: border-box;
			min-width: 240px;
			max-width: 320px;
			width: 80%;
			padding: 16px;
			font-size: 19px;
			font-weight: normal;
			line-height: 1.26;
			letter-spacing: normal;
			text-transform:  uppercase;
			text-align: center;
			display: inline-block;
		}
	}
}