﻿#site-holder.solutions-and-services #site-main
{
	box-shadow: none;
	margin: auto;
	width: 100%;
	padding: 0;

	#solutions-and-services-container
	{
		.button-up
		{
			position: fixed;
			right: 0;
			top: 50%;
			display: block;
			.hires('/img/v6/solutionsandservices/btn-up');
			background-repeat: no-repeat;
			width: 48px;
			height: 48px;
			outline: none;
			cursor: pointer;

			html[dir='rtl'] &
			{
				right: auto;
				left: 0;
			}
		}

		.header-container
		{
			.hires('/img/v6/solutionsandservices/bg', 'jpg');
			background-repeat: no-repeat;
			background-size: cover;
			height: 360px;
			position: relative;

			.social-bar
			{
				position: absolute;
				left: 0;
				top: 100px;

				html[dir='rtl'] &
				{
					left: auto;
					right: 0;
				}

				a
				{
					cursor: pointer;
				}

				.twitter
				{
					display: block;
					.hires('/img/v6/solutionsandservices/ico-sb-tw');
					background-repeat: no-repeat;
					width: 40px;
					height: 40px;
					outline: none;
				}

				.facebook
				{
					display: block;
					.hires('/img/v6/solutionsandservices/ico-sb-fb');
					background-repeat: no-repeat;
					width: 40px;
					height: 40px;
					outline: none;
					margin-top: 10px;
				}

				.google-plus
				{
					display: block;
					.hires('/img/v6/solutionsandservices/ico-sb-gp');
					background-repeat: no-repeat;
					width: 40px;
					height: 40px;
					outline: none;
					margin-top: 10px;
				}
			}

			.header
			{
				width: 940px;
				margin: auto;

				.left-part
				{
					display: inline-block;
					vertical-align: top;
					width: 68%;

					h1
					{
						margin-top: 50px;
						margin-bottom: 30px;
						font: bold 30px @title-font;
						color: white;
					}

					p
					{
						font: 16px @title-font;
						color: white;
					}
				}

				.right-part
				{
					display: inline-block;
					vertical-align: top;
					width: 30%;

					html[dir='rtl'] &
					{
						width: 17%;
					}

					.logo
					{
						.hires('/img/v6/solutionsandservices/logo-powered-by-knoema');
						background-repeat: no-repeat;
						width: 240px;
						height: 110px;
						margin-top: 120px;
						margin-left: 20px;

						html[dir='rtl'] &
						{
							.margin-left-right(0, 20px);
						}
					}
				}
			}
		}

		.item-container
		{
			padding-top: 60px;
			padding-bottom: 60px;

			&:nth-child(2n)
			{
				background: #f0f9fe;
			}

			.ss-item
			{
				margin: auto;
			}
		}

		.contact-us-container
		{
			padding-bottom: 60px;

			.contact-us
			{
				width: 940px;
				margin: auto;
				text-align: center;

				p
				{
					display: inline-block;
					vertical-align: top;
					font: bold 24px @title-font;
					color: black;
					margin: 0;
				}

				.button
				{
					display: inline-block;
					vertical-align: top;
					font: 16px @title-font;
					color: white;
					background: @accent-color;
					padding: 7px 23px;
					border-radius: 17px;
					text-decoration: none;
					margin-left: 20px;

					html[dir='rtl'] &
					{
						.margin-left-right(0, 20px);
					}

					&:hover
					{
						background: lighten(@accent-color, 10%);
					}
				}
			}
		}
	}
}

#site-holder #site-main .ss-item
{
	width: 940px;

	h1
	{
		font: 30px @title-font;
		color: #7d9cb3;
		margin: 0;
	}

	h2
	{
		font: bold 18px @title-font;
		color: black;
		margin: 0;
	}

	p
	{
		font: 16px @title-font;
		color: black;
	}

	.link
	{
		font: bold 16px @title-font;
		color: @accent-color;
		text-decoration: none;
		outline: none;

		.arrow
		{
			.hires('/img/v6/menu-arrowdown-blue');
			background-repeat: no-repeat;
			width: 10px;
			height: 10px;
			display: inline-block;
			margin-right: 5px;
			-moz-transform: rotate(-90deg);
			-ms-transform: rotate(-90deg);
			-o-transform: rotate(-90deg);
			-webkit-transform: rotate(-90deg);
			transform: rotate(-90deg);

			html[dir='rtl'] &
			{
				.margin-left-right(5px, 0);
				-moz-transform: rotate(90deg);
				-ms-transform: rotate(90deg);
				-o-transform: rotate(90deg);
				-webkit-transform: rotate(90deg);
				transform: rotate(90deg);
			}
		}

		.pdf
		{
			.hires('/img/v6/solutionsandservices/ico-pdf');
			background-repeat: no-repeat;
			width: 20px;
			height: 20px;
			display: inline-block;
			margin-left: 5px;
			margin-bottom: -4px;

			html[dir='rtl'] &
			{
				.margin-left-right(0, 5px);
			}
		}

		&.alone
		{
			display: block;
		}

		&:hover
		{
			color: lighten(@accent-color, 10%);
		}
	}
}

#ss-item1
{
	.left-part
	{
		display: inline-block;
		vertical-align: top;
		width: 60%;

		.content
		{
			margin-top: 20px;

			.column1
			{
				display: inline-block;
				vertical-align: top;
				width: 45%;
			}

			.column2
			{
				display: inline-block;
				vertical-align: top;
				width: 45%;
				margin-left: 40px;

				html[dir='rtl'] &
				{
					.margin-left-right(0, 40px);
				}
			}

			.campus
			{
				margin-top: 10px;
			}
		}
	}

	.right-part
	{
		display: inline-block;
		vertical-align: top;

		.preview
		{
			.hires('/img/v6/solutionsandservices/preview-01');
			background-repeat: no-repeat;
			width: 340px;
			height: 300px;
			margin-top: 85px;
			margin-left: 30px;

			html[dir='rtl'] &
			{
				.margin-left-right(0, 30px);
			}
		}
	}
}

#ss-item2
{
	.left-part
	{
		display: inline-block;
		vertical-align: top;
		width: 34%;

		h1
		{
			margin-bottom: 20px;

			.knoema-logo
			{
				.hires('/img/v6/solutionsandservices/logo-knoema-title');
				background-repeat: no-repeat;
				width: 135px;
				height: 22px;
				display: inline-block;
				vertical-align: middle;
				margin-bottom: 4px;
			}
		}
	}

	.right-part
	{
		display: inline-block;
		vertical-align: top;

		.preview
		{
			.hires('/img/v6/solutionsandservices/preview-02');
			background-repeat: no-repeat;
			width: 550px;
			height: 350px;
			margin-left: 66px;

			html[dir='rtl'] &
			{
				.margin-left-right(0, 66px);
			}
		}
	}
}

#ss-item3
{
	.left-part
	{
		display: inline-block;
		vertical-align: top;
		width: 60%;

		.content
		{
			margin-top: 20px;

			.column1
			{
				display: inline-block;
				vertical-align: top;
				width: 45%;
			}

			.column2
			{
				display: inline-block;
				vertical-align: top;
				width: 45%;
				margin-left: 40px;

				html[dir='rtl'] &
				{
					.margin-left-right(0, 40px);
				}
			}
		}
	}

	.right-part
	{
		display: inline-block;
		vertical-align: top;

		.preview
		{
			.hires('/img/v6/solutionsandservices/preview-03');
			background-repeat: no-repeat;
			width: 320px;
			height: 360px;
			margin-top: 20px;
			margin-left: 50px;

			html[dir='rtl'] &
			{
				.margin-left-right(0, 50px);
			}
		}
	}
}

#ss-item4
{
	.content
	{
		margin-top: 20px;
		font-size: 0;

		.row1 .tool
		{
			height: 230px;

			#landing &
			{
				height: 190px;
			}
		}

		.row2 .tool
		{
			height: 170px;
		}

		.tool
		{
			width: 31%;
			display: inline-block;
			vertical-align: top;
			padding: 20px;

			&:first-child
			{
				width: 30%;
				padding-left: 0;

				html[dir='rtl'] &
				{
					.padding-left-right(20px, 0);
				}
			}

			&:last-child
			{
				width: 30%;
				padding-right: 0px;

				html[dir='rtl'] &
				{
					.padding-left-right(0, 20px);
				}
			}

			&.right-border
			{
				border-right: solid 1px #e5ebf0;

				html[dir='rtl'] &
				{
					border-right: none;
					border-left: solid 1px #e5ebf0;
				}
			}

			&.bottom-border
			{
				border-bottom: solid 1px #e5ebf0;
			}

			.search-logo
			{
				.hires('/img/v6/solutionsandservices/logo-search');
				background-repeat: no-repeat;
				width: 22px;
				height: 34px;
				display: inline-block;
				margin-bottom: -10px;
			}

			.yodatai-logo
			{
				.hires('/img/v6/solutionsandservices/logo-yodatai');
				background-repeat: no-repeat;
				width: 98px;
				height: 34px;
				display: inline-block;
			}

			.data-finder-logo
			{
				.hires('/img/v6/solutionsandservices/logo-data-finder');
				background-repeat: no-repeat;
				width: 120px;
				height: 34px;
				display: inline-block;
			}

			.geoplayground-logo
			{
				.hires('/img/v6/solutionsandservices/logo-geoplayground');
				background-repeat: no-repeat;
				width: 174px;
				height: 34px;
				display: inline-block;
			}

			.vizofday-logo
			{
				.hires('/img/v6/solutionsandservices/logo-vizofday');
				background-repeat: no-repeat;
				width: 28px;
				height: 34px;
				display: inline-block;
				margin-bottom: -10px;
			}

			.yodatai-bots
			{
				margin-bottom: 10px;

				.skype
				{
					.hires('/img/v6/solutionsandservices/ico-skype');
					background-repeat: no-repeat;
					width: 24px;
					height: 24px;
					display: inline-block;
				}

				.messenger
				{
					.hires('/img/v6/solutionsandservices/ico-messenger');
					background-repeat: no-repeat;
					width: 24px;
					height: 24px;
					display: inline-block;
					margin-left: 30px;

					html[dir='rtl'] &
					{
						.margin-left-right(0, 30px);
					}
				}

				.slack
				{
					.hires('/img/v6/solutionsandservices/ico-slack');
					background-repeat: no-repeat;
					width: 24px;
					height: 24px;
					display: inline-block;
					margin-left: 30px;

					html[dir='rtl'] &
					{
						.margin-left-right(0, 30px);
					}
				}
			}
		}
	}
}

#ss-item5
{
	.left-part
	{
		display: inline-block;
		vertical-align: top;
		width: 37%;

		h1
		{
			margin-bottom: 20px;
		}
	}

	.right-part
	{
		display: inline-block;
		vertical-align: top;

		.preview
		{
			.hires('/img/v6/solutionsandservices/preview-05');
			background-repeat: no-repeat;
			width: 520px;
			height: 430px;
			margin-left: 65px;

			html[dir='rtl'] &
			{
				.margin-left-right(0, 65px);
			}
		}
	}
}

#ss-item6
{
	.left-part
	{
		display: inline-block;
		vertical-align: top;
		width: 34%;

		h1
		{
			margin-bottom: 20px;
			.knoema-logo
			{
				.hires('/img/v6/solutionsandservices/logo-knoema-title');
				background-repeat: no-repeat;
				width: 135px;
				height: 22px;
				display: inline-block;
				vertical-align: middle;
				margin-bottom: 4px;
			}
		}
	}

	.right-part
	{
		display: inline-block;
		vertical-align: top;

		.preview
		{
			.hires('/img/v6/solutionsandservices/preview-06');
			background-repeat: no-repeat;
			width: 550px;
			height: 350px;
			margin-top: 10px;
			margin-left: 66px;

			html[dir='rtl'] &
			{
				.margin-left-right(0, 66px);
			}
		}
	}
}