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

@charcoal: #353d40;
@off-white: #f0f0ec;
@section-light-gray: #f7f7f7;
@section-blue: #6993a9;

#site-main.about
{
	box-shadow: none;

	&.wide.v7
	{
		width: 100%;
		padding: 0;
	}
}

.header
{
	width: ~'calc(100% + 30px)';
	text-align: center;
	background-color: #0077ca;
	color: white;
	padding: 40px;
	box-sizing: border-box;
	margin: -20px -15px 0 -15px;

	h1
	{
		margin-top: 0;
		font-size: 30px;
		font-weight: bold;
		color: white;
	}
}

.about-pages
{
	font-family: @title-font;

	.team &
	{
		width: 940px;
		padding: 0 10px;
	}

	.wide &
	{
		width: 910px;
		margin: 0 auto;
	}

	.about-knoema &
	{
		width: 100%;

		.about-content
		{
			width: 100%;
		}
	}

	.about-menu
	{
		position: absolute;
		margin-left: 715px;
		margin-top: 50px;

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

		.option
		{
			position: relative;
			background-color: #F0F9FE;
			height: 50px;
			width: 200px;
			border-bottom: 1px solid #D9EDF8;

			a
			{
				position: absolute;
				top: 15px;
				text-decoration: none;
				color: #007BD6;
				margin-left: 20px;
				font-weight: bold;

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

			&:last-child
			{
				border-bottom-width: 0;
			}

			&.active
			{
				background-color: #0077C9;

				a
				{
					color: white;
				}
			}
		}
	}

	.about-content
	{
		width: 680px;

		h1
		{
			text-align: center;
			margin: 0;
			font-size: 30px;
			font-weight: bold;

			&.us
			{
				width: 680px;
			}
		}

		#offices
		{
			#office-map
			{
				background-repeat: no-repeat;
				width: 680px;
				height: 310px;
				.hires('/img/about/map');
				margin-top: 30px;
				margin-bottom: 80px;
			}

			#office-list
			{
				border-right: 1px solid #CFE4F5;
				display: inline-block;
				padding-right: 35px;
				height: 310px;
				margin: 0;
				padding-left: 0;

				html[dir='rtl'] &
				{
					border-left: 1px solid #CFE4F5;
					border-right-width: 0;
					padding-left: 35px;
					padding-right: 0;
				}

				.short
				{
					color: #0077C6;
					cursor: pointer;
					margin-bottom: 20px;
					display: block;

					&:last-child
					{
						margin-top: 5px;
						margin-bottom: 5px;
					}

					&.selected
					{
						color: black;
						font-weight: bold;
					}
				}
			}

			#office-details
			{
				display: inline-block;
				padding-left: 35px;
				position: relative;
				top: -85px;

				html[dir='rtl'] &
				{
					padding-right: 35px;
					padding-left: 0;
				}

				.long
				{
					display: none;

					&.selected
					{
						display: block;
					}

					.office-type
					{
						font-weight: bold;
						padding-bottom: 15px;
					}

					.office-address
					{
						font-size: 14px;
					}
				}
			}

			#zoom-map
			{
				margin-top: -240px;
				margin-left: 230px;

				html[dir='rtl'] &
				{
					margin-right: 230px;
					margin-left: 0;
				}

				.map
				{
					display: none;
					border: 0;

					&.selected
					{
						display: inline-block;
					}

					&.tysons
					{
						.hires('/img/about/map_tysons');
					}

					&.perm
					{
						.hires('/img/about/map_perm');
					}

					&.bangalore
					{
						.hires('/img/about/map_bangalore');
					}

					&.austin
					{
						.hires('/img/about/map_austin');
					}
				}
			}

			#zoom-map, .map
			{
				width: 230px;
				height: 230px;
				background: #fff;
				background-repeat: no-repeat;
			}

			.contact-us a
			{
				margin-top: auto;
			}
		}

		#leadership,
		.office
		{
			display: table;
			width: 100%;
			table-layout: fixed;
			margin-top: 20px;
			font-size: 0;

			.vcard
			{
				display: table-cell;
				text-align: center;
				padding: 10px;
				font-size: 16px;

				.fn
				{
					font-weight: bold;
					margin-bottom: .2em;
				}

				.designation
				{
					color: #7c7c7c;
					margin-top: 0;
					margin-bottom: 0;
					font-size: .8em;
				}

				.short-bio
				{
					text-align: left;
					margin-bottom: 20px;
					margin-top: 20px;

					.more
					{
						color: #0077ca;
						text-decoration: underline;
					}
				}

				.dashboard
				{
					font-size: .8em;
				}
			}

			a
			{
				color: #0077ca;
				text-decoration: none;
			}
		}

		#leadership .vcard .dashboard
		{
			display: block;
			text-align: center;
			font-size: 1em;
		}

		.office
		{
			border-top: 1px solid lighten(#0077ca, 50%);
			padding-top: 30px;

			.vcard
			{
				display: inline-block;
				width: 120px;
				padding: 0;
				vertical-align: top;
				margin-bottom: 40px;
				margin-right: 20px;

				&:nth-child(5n)
				{
					margin-right: -1px;
				}

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

					&:nth-child(5n)
					{
						.margin-left-right(-1px, 0);
					}
				}

				.pic
				{
					width: 100px;
					height: 100px;
					.hires('/img/about/nophoto', 'jpg');
					background-repeat: no-repeat;
				}
			}
		}

		.contact-us
		{
			text-align: center;
			width: 680px;

			a
			{
				display: inline-block;
				color: white;
				background-color: #0077ca;
				border-radius: 3px;
				padding: 10px 30px;
				border: 0;
				margin: auto;
				font: bold 12pt @title-font;
				margin-top: 25px;
				margin-bottom: 25px;
				text-decoration: none;

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


.leadership-popup
{
	display: none;
	z-index: 1;
	width: 760px;
	height: 500px;
	font-family: @title-font;
	font-size: 14px;

	.info
	{
		display: none;
	}

	.left-pane
	{
		display: inline-block;
		border-right: 1px solid #CEE3F4;
		text-align: center;
		width: 200px;
		padding-right: 15px;
		padding-left: 10px;

		html[dir='rtl'] &
		{
			border-left: 1px solid #CEE3F4;
			border-right-width: 0;
			padding-left: 15px;
			padding-right: 10px;
		}

		.pic
		{
			background-repeat: no-repeat;
			width: 180px;
			height: 180px;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 35px;
		}

		.name
		{
			font-weight: bold;
			margin-bottom: 10px;
		}

		.designation
		{
			color: #7c7c7c;
			margin-bottom: 20px;
		}

		.specialties
		{
			color: #7c7c7c;
			font-style: italic;
			margin-bottom: 20px;
		}

		.short-bio
		{
			text-align: left;
			margin-bottom: 20px;

			.more
			{
				color: #0079be;
			}
		}

		.email
		{
			color: #0079be;
			text-decoration: none;
		}
	}

	.right-pane
	{
		display: inline-block;
		font-size: 16px;
		padding-left: 15px;
		line-height: 1.5;
		width: 465px;
		height: 500px;
		text-align: justify;
		overflow: auto;
		float: right;
		padding: 10px;

		html[dir='rtl'] &
		{
			float: left;
			padding-right: 15px;
		}
	}
}

.pic
{
	background-repeat: no-repeat;
	width: 140px;
	height: 140px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	position: relative;

	.photo
	{
		width: 100%;
		height: 100%;
		background-size: contain;
	}

	.photo.highres
	{
		display: none;

		@media only screen and (-webkit-min-device-pixel-ratio: 2),
			only screen and (min--moz-device-pixel-ratio: 2),
			only screen and (min-resolution: 192dpi),
			only screen and (min-resolution: 2ppx),
			only screen and (min-device-pixel-ratio: 2)
		{
			display: block;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
}

.v7 #about-us
{
	width: 100%;
	font-size: 16px;

	h2
	{
		text-transform: uppercase;
	}

	.page-section
	{
		p
		{
			color: #292929;
		}

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

	.our-team
	{
		width: 957px;
		height: 230px;
		.hires('/Img/about/pic-ourteam', @backgroundSize: 957px 230px);
	}

	.our-data-chart
	{
		width: 460px;
		height: 300px;
		.hires('/Img/about/pic-our-data', 'jpg');
	}

	.our-tools-chart
	{
		width: 460px;
		height: 300px;
		.hires('/Img/about/pic-our-tools', @ext: "jpg");
	}

	#infographic
	{
		display: table;
		table-layout: fixed;
		margin-bottom: 30px;

		.separator
		{
			margin-right: 40px;

			html[dir='rtl'] &
			{
				margin-left: 40px;
				margin-right: 0;
			}
		}

		.circle
		{
			width: 200px;
			height: 200px;
			-moz-border-radius: 50%;
			-webkit-border-radius: 50%;
			border-radius: 50%;
			background: #F0F9FE;
			display: table-cell;
			text-align: center;
			color: #007BD6;
			vertical-align: middle;

			.big-text
			{
				display: block;
				font-size: 36px;
				font-weight: bold;
				border-bottom: 1px solid#D7E0E5;
				margin: auto 25px;
				margin-bottom: 15px;
				padding-bottom: 15px;
			}

			.small-text
			{
				display: block;
				font-size: 16px;
				text-transform: uppercase;
			}
		}
	}
}

#trusted-by
{
	padding-left: 10px;

	html[dir='rtl'] &
	{
		padding-right: 10px;
		padding-left: 0;
	}

	.img-row
	{
		display: table;
		width: 100%;
		table-layout: fixed;
		margin-top: 60px;

		.img-wrap
		{
			display: table-cell;
			text-align: center;
		}
	}

	span
	{
		background-repeat: no-repeat;
		display: inline-block;
		width: 160px;
		height: 160px;
	}

	#ico-afdb
	{
		.hires('/img/about/logo_afdb', @ext: "png?v=1");
	}

	#ico-wwf
	{
		.hires('/img/about/logo_wwf', @ext: "png?v=1");
	}

	#ico-ec
	{
		.hires('/img/about/logo_ec', @ext: "png?v=1");
	}

	#ico-idb
	{
		.hires('/img/about/logo_idb', @ext: "png?v=1");
	}

	#ico-caterpillar
	{
		.hires('/img/about/logo_caterpillar', @ext: "png?v=1");
	}

	#ico-basf
	{
		.hires('/img/about/logo_basf', @ext: "png?v=1");
	}

	#ico-syngenta
	{
		.hires('/img/about/logo_syngenta', @ext: "png?v=1");
	}

	#ico-fao
	{
		.hires('/img/about/logo_fao', @ext: "png?v=1");
	}
}

#products
{
	font-size: 16px;
	padding: 15px 30px;
	border-radius: 2px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-transform: uppercase;
	position: absolute;

	html[dir='rtl'] &
	{
		left: auto;
		right: 50%;
		transform: translate(50%, -50%);
	}
}

#mobile-content.v7 #about-us
{
	h1
	{
		text-transform: none;
	}

	h2
	{
		font-size: 24px;
		font-weight: bold;
		line-height: 1.42em;
		letter-spacing: -0.2px;
		color: @charcoal;
	}

	.dark-map
	{
		padding: 35px 20px;
	}

	.our-team,
	.our-data-chart,
	.our-tools-chart
	{
		width: 100%;
		background-size: contain;
		height: 0;
	}

	.our-team
	{
		padding-top: 24%;
	}

	.our-data-chart,
	.our-tools-chart
	{
		padding-top: 65%;
	}

	#trusted-by
	{
		span
		{
			display: block;
			margin: 50px auto;
		}
	}

	.light-map
	{
		padding: 77px 20px;

		.ui-button
		{
			box-sizing: border-box;
			min-width: 240px;
			max-width: 320px;
			width: 80%;
			font-size: 16px;
			font-weight: normal;
			line-height: 1.26;
			letter-spacing: normal;
			top: auto;
			left: auto;
			transform: none;
			text-transform: uppercase;
			position: static;
		}
	}
}