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

@block-width: 940px;
@grass-green: #81c45c;
@charcoal: #353d40;
@off-white: #f0f0ec;
@sky: #c8d7df;
@soft-green: #d1e9d1;
@light-gray: #292929;
@validation-red: #ff5500;

.contact
{
	text-align: center;
	font-size: 20px;

	.text-align-left
	{
		text-align: left;

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

	#captcha-placeholder
	{
		display: none;

		&.active
		{
			display: block;
			width: 256px;
			margin: 40px auto 10px auto;
		}
	}

	.ui-button
	{
		font-size: 19px;
		text-transform: uppercase;
		border-radius: 2px;
		box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.3);
		width: 236px;
		height: 56px;
	}

	.page-section
	{
		&.dark-map
		{
			padding: ~"110px calc((100% - 940px) / 2)";

			&.contact-us
			{
				height: 160px;
				padding-top: 10px;
				padding-bottom: 10px;

				h1
				{
					line-height: 65px;
					margin-top: 25px;
					margin-bottom: 0;
				}

				p
				{
					font-size: 16px;
					margin: 0;
				}
			}
		}

		&.light-map
		{
			height: auto;
			color: @light-gray;
		}

		.inline-block
		{
			display: inline-block;
			vertical-align: top;
		}

		.size-50
		{
			width: 50%;
		}

		.size-100
		{
			width: @block-width;
		}

		.contact-title
		{
			h2
			{
				text-transform: uppercase;
				color: black;
			}

			.contact-desc
			{
				text-transform: uppercase;
				color: @charcoal;
				font: bold 18px @title-font;
				margin-top: 6px;
				letter-spacing: -0.01em;
			}
		}

		.contact-form
		{
			label
			{
				display: none;

				.ie9 &
				{
					display: inline;
				}

				float: left;

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

				&[for = Subject]
				{
					display: inline-block;
					margin: 5px 0px 10px 0px;
					font-weight: bold;
					font-size: 18px;
				}
			}

			input[type=text], textarea, select
			{
				width: 100%;
				background-color: @sky;
				border: 1px solid white;
				box-sizing: border-box;
				padding: 25px 30px;
				font: normal 20px @title-font;

				&::placeholder
				{
					color: @light-gray !important;
					opacity: .6;
				}

				&:-ms-input-placeholder
				{
					color: #8B9499!important;
				}

				&::-ms-input-placeholder
				{
					color: @light-gray !important;
					opacity: .6;
				}
			}

			select
			{
				background-image: url(/Img/v7/shared/input-arrow.svg);
				background-repeat: no-repeat;
				background-size: 21px 10px;
				background-position-x: ~'calc(100% - 20px)';
				background-position-y: 35px;
				-moz-appearance: none;
				-webkit-appearance: none;
				padding-right: 50px;

				html[dir='rtl'] &
				{
					background-position: 19px 35px;
					padding-left: 50px;
				}

				option 
				{
					background-color: white;
				}
			}

			//For IE
			select::-ms-expand {
				display: none;
			}

			select:focus::-ms-value {
				background-color: @sky;
				color: black;
			}

			input[type=text]
			{
				height: 80px;
			}

			textarea
			{
				resize: vertical;
				min-height: 160px;
			}

			.inline-block
			{
				padding-top: 5px;
				padding-bottom: 5px;
				box-sizing: border-box;

				&.odd, html[dir='rtl'] &.even
				{
					padding-left: 0;
					padding-right: 5px;
				}

				&.even, html[dir='rtl'] &.odd
				{
					padding-left: 5px;
					padding-right: 0;
				}
			}

			.form-data
			{
				padding-top: 100px;
				padding-bottom: 40px;
			}

			.field-validation-error
			{
				color: @validation-red;
				text-align: center;
			}
		}
	}
}

#mobile-content
{
	.contact
	{
		.contact-us
		{
			h1
			{
				margin-top: 9px;
				margin-bottom: 9px;
				text-transform: none;
			}
		}

		.contact-title
		{
			.margin-left-right(45px, 45px);

			.contact-desc
			{
				color: @secondary-color;
			}
		}

		.contact-form
		{
			.form-data
			{
				padding-top: 20px;
				padding-bottom: 10px;
			}

			.inline-block
			{
				width: 100%;
				padding-top: 10px;
				padding-bottom: 10px;
				border: none;
			}

			input[type=text]
			{
				-webkit-appearance: none; // For iPhone/iPad
				height: 60px;
				.padding-left-right(20px, 20px);
				text-overflow: ellipsis;
			}

			textarea
			{
				-webkit-appearance: none; // For iPhone/iPad
				height: 24px;
				.padding-left-right(20px, 20px);
			}

			input[type=submit]
			{
				-webkit-appearance: none; // For iPhone/iPad
				width: 320px;
				height: 45px;
				background-color: @accent-color;
				box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24);
				color: white;
				width: 100%;
				border: none;
			}

			span.field-validation-valid
			{
				display: none;
			}

			.hidden
			{
				display: none;
			}

			label[for = 'Subject']
			{
				margin-top: -5px;
			}
		}
	}
}