html, body {
	margin:0;
	padding:0;
	height: 100%;
	min-width: 440px;
}

body {
	background: #ffffff;
	font-family: 'Open Sans', sans-serif;
	color: #474747;
}

h1, h2, h3, h4, h5, h6 {
	color: #474747;
	font-weight: 300;
	line-height:1.4em;
}

h2 {
	font-size: 30px;
	line-height: 1.3em;
	margin: 0;
	padding-top: 40px;
	text-align: center;
}

ul {margin: 0.5em 0 1.2em 25px; padding:0; }
ul li {margin-bottom:5px; }
ul ul, ul ol, ol ul, ol ol { margin-top:2px; margin-bottom:5px;}
ul li li, ol li li { }
ol ul, ul ul { }
ol {margin: 0 0 1.2em 25px; padding:0;}
ol li {margin-bottom: 4px; }

ul.simple { margin:0; padding:0; list-style:none;}
ul.simple li {margin-bottom:7px;}

.clear { float:none !important;clear:both; width:0px; height:0px; font-size:1px; line-height:0px; }

.clearChlds {  *zoom: 1; }
	.clearChlds:before,
	.clearChlds:after {
		display: table;
		content: "";
		line-height: 0;
	}
	.clearChlds:after {
		clear: both;
	}

.bold {font-weight:bold;}
.italic {font-style:italic;}

.no_mrg_top {margin-top:0 !important;}
.no_mrg_right {margin-right:0 !important;}
.no_mrg_bottom {margin-bottom:0 !important;}
.no_mrg_left {margin-left:0 !important;}

.no_pad_top {padding-top:0 !important;}
.no_pad_bottom { padding-bottom:0 !important;}

.fl_left {float:left;}
.fl_right {float:right;}

.rel { position:relative;}
.nobr { white-space:nowrap;}

.hidden { display:none;}
.invisible { visibility:hidden; }

a { color: #474747; text-decoration: none;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}
a:hover { color: #000000; text-decoration: none;}

a.dashed { border-bottom:1px dashed; text-decoration:none !important;}
a.dashed:hover {
	border-bottom: 0;
}
a.noOutline:active, a.noOutline:link, a.noOutline:focus, a.noOutline:hover { outline: none; }

.ta-right { text-align: right;}


section	{
	width: 1302px;
	margin: 0 auto;
}

header {
	position: relative;
	height: 611px;
	overflow: hidden;
	min-height: 350px;
	margin-bottom: 35px;
	}

	header .content {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
	}
	header .section {
		position: relative;
		width: auto;
		}
		header .logo {
			position: absolute;
			left: 10%;
			top: 43px;
		}
		header .slogan {
			text-align: center;
			font-size: 35px;
			line-height: 1.2em;
			color: #ffffff;
			opacity: 0.85;
			font-weight: 300;
			padding-top: 292px;
		}

		header nav {
			position: absolute;
			right: 10%;
			top: 78px;
			}
			header nav .br {
				display: none;
			}
			header nav a {
				color: #ffffff;
				margin-right: 50px;
				opacity: 0.85;
				font-size: 20px;
				font-weight: 400;
			}
			header nav a:hover {
				color: #ffffff;
				opacity: 1;
			}
			header nav a.lang {
				font-size: 17px;
				margin-right: 20px;
			}
			header nav a.lang.active,
			header nav a.lang.active:hover {
				opacity: 0.4;
				cursor: default;
			}
			header nav a:last-child {
				margin-right: 0 !important;
		}

	header .video {
		background: url("../video/placeholder.jpg") no-repeat 0 0 / cover;
		display: block;
		width: 100%;
		position: relative;
		min-height: 350px;
		}
		header .object {
			margin-top: -10%;
			}
			header video {
				display: block;
			}
			.video-placeholder {
				display: none;
			}
			.mobile header video {
				display: none;
			}
			.mobile .video-placeholder {
				display: block;
		}
		header .overlay {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			opacity: 0.85;
			}
			header .overlay img	{
				display: block;
				width: 100%;
				height: 100%;
				min-height: 350px;
		}


#about {}
	.devices {
		list-style: none;
		padding: 40px 0 45px 0;
		margin: 0;
		text-align: center;
		}
		.devices li {
			margin: 0 0px;
			text-align: center;
			display: inline-block;
			vertical-align: top;
		}
		.devices .iphone { width: 88px; }
		.devices .ipad { width: 106px; }
		.devices .andr-phone { width: 88px; }
		.devices .andr-tablet { width: 134px; }
		.devices .win-phone { width: 88px; }
		.devices .win-tablet { width: 134px; }

		.devices li span {
			display: block;
			text-align: center;
			font-size: 14px;
			line-height: 1em;
			padding-top: 7px;
	}

#programs {}
	.programs-list {
		padding: 40px 0 50px 0;
		margin: 0 0 0 0;
		list-style: none;
	}
	.programs-list li {
		width: 430px;
		height: 240px;
		position: relative;
		display: block;
		float: left;
		margin: 0 4px 4px 0;
		}
		.programs-list li .cover {
			width: 430px;
			height: 240px;
			display: block;
		}
		.programs-list li p {
			color: #ffffff;
			position: absolute;
			left: 25px;
			top: 100px;
			margin: 0;
			}
			.programs-list li p strong {
				display: block;
				font-size: 26px;
				font-weight: 600;
				line-height: 1em;
				padding-bottom: 5px;
			}
			.programs-list li p em {
				display: block;
				font-size: 14px;
				line-height: 1.2em;
				font-weight: 400;
			}
		.programs-list .hover {
			position: absolute;
			left: 0;
			top: 0;
			width: 184px;
			height: inherit;
			padding: 0 123px;
			background: rgba(0,123,245,0.85);
			text-align: center;
			opacity: 0;
			-webkit-transition: opacity 300ms ease-in-out;
			-moz-transition: opacity 300ms ease-in-out;
			-ms-transition: opacity 300ms ease-in-out;
			-o-transition: opacity 300ms ease-in-out;
			transition: opacity 300ms ease-in-out;
			}
			.programs-list .hover:hover {
				opacity: 1;
			}
			.programs-list .hover div {
				display: table-cell;
				width: inherit;
				height: inherit;
				vertical-align: middle;
			}
			.hover .btn {
				display: inline-block;
				width: 184px;
				height: 58px;
				position: relative;
				margin: 6px 0;
				vertical-align: middle;
				}
				.hover .btn img {
					width: 184px;
					height: 58px;
					position: absolute;
					left: 0;
					top: 0;
					-webkit-transition: opacity 300ms ease-in-out;
					-moz-transition: opacity 300ms ease-in-out;
					-ms-transition: opacity 300ms ease-in-out;
					-o-transition: opacity 300ms ease-in-out;
					transition: opacity 300ms ease-in-out;
					}
					.btn .normal { opacity: 1; }
					.btn .active { opacity: 0; }
					.btn:hover .normal { opacity: 0; }
					.btn:hover .active { opacity: 1; }

		.mobile .programs-list .hover {
			display: none;
			opacity: 1;
			-webkit-transition: none;
			-moz-transition: none;
			-ms-transition: none;
			-o-transition: none;
			transition: none;
		}
		.mobile .programs-list .hover:after {
			content: '×';
			position: absolute;
			right: 18px;
			top: 12px;
			color: #ffffff;
			font-size: 28px;
			line-height: 1em;
		}

#clients {
	padding-bottom: 80px;
	}
	.clients-list {
		padding: 0;
		list-style: none;
		display: inline-block;
		margin: 40px 0 0;
		}
		.clients-list li {
			display: block;
			float: left;
			width: 216px;
			height: 144px;
			border: 1px solid #ececec;
			margin: 0 -1px -1px 0;
			text-align: center;
		}
		.clients-list li a {
			display: table-cell;
			width: inherit;
			height: inherit;
			vertical-align: middle;
			}
			.clients-list li a span {
				position: relative;
				display: inline-block;
				vertical-align: middle;
			}
				.clients-list li a img	{
					display: inline-block;
					border: 0;
					-webkit-transition: opacity 300ms ease-in-out;
					-moz-transition: opacity 300ms ease-in-out;
					-ms-transition: opacity 300ms ease-in-out;
					-o-transition: opacity 300ms ease-in-out;
					transition: opacity 300ms ease-in-out;
				}
				.clients-list li a .color {
					position: absolute;
					left: 0;
					top: 0;
					opacity: 0;
				}
				.clients-list li a:hover .color {
					 opacity: 1;
				 }
				.clients-list li a:hover .gray {
					opacity: 0;
				}

#contacts {
	width: 800px;
	padding-bottom: 30px;
	}
	#contacts h1 {
		font-size: 40px;
		line-height: 1.2em;
		font-weight: 600;
		margin: 0 0 60px 0;
		padding-top: 40px;
	}
	.contacts-text {
		font-size: 24px;
		font-weight: 300;
		line-height: 1.2em;
		vertical-align: top;
		display: table-cell;
		width: 535px;
		margin: 0;
	}
	.contacts-info {
		font-size: 22px;
		font-weight: 600;
		vertical-align: top;
		display: table-cell;
		text-align: center;
		width: 265px;
		margin: 0;
		}
		.contacts-info span {
			font-weight: 300;
			font-size: 16px;
			display: block;
			margin: -5px 0;
		}

.loading-state {
	margin: 40px 0 0 0;
	padding: 0;
	list-style: none;
	text-align: center;
	}
	.loading-state li {
		display: inline-block;
		width: 306px;
		text-align: center;
		font-size: 16px;
		line-height: 1.3em;
		margin: 0 0 55px  0;
		}
	.loading-state p {
		margin: 0;
	}
	.loading-state .count {
		font-size: 18px;
		padding-top: 10px;
		}
		.loading-state .num {
			font-size: 24px;
			font-weight: 600;
		}
		.loading-state .count strong {
			font-weight: 600;
		}

	.loading-state .hi .s-hi { display: inline-block}
	.loading-state .hi .s-med {	display: none; }
	.loading-state .hi .s-lo { display: none; }

	.loading-state .med .s-hi { display: none; }
	.loading-state .med .s-med { display: inline-block; }
	.loading-state .med .s-lo { display: none; }

	.loading-state .lo .s-hi { display: none; }
	.loading-state .lo .s-med { display: none; }
	.loading-state .lo .s-lo { display: inline-block; }

footer {
	background: #373d44;
	text-align: center;
	color: #ffffff;
	padding: 70px 0 35px 0;
	}
	footer .logo {
		display: inline-block;
		margin-bottom: 35px;
	}
	footer p {
		margin: 0;
		font-size: 14px;
		line-height: 1em;
}


/* media queries effects */

header .slogan,
header .logo,
header .logo img,
section,
#about h2 {
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}
header .object {
	-webkit-transition: margin 300ms ease-in-out;
	-moz-transition: margin 300ms ease-in-out;
	-ms-transition: margin 300ms ease-in-out;
	-o-transition: margin 300ms ease-in-out;
	transition: margin 300ms ease-in-out;
}