@import url('./reset.css');

body {
	background: url('../images/bg-body.gif') repeat scroll 0% 0% #D9D7D2;
	font-size: 13px;
	font-family: Arial;
	line-height: 1.3;
	color: #969696;
}
h1, h2, h3, h4, h5, h6 {
	color: #2e2c2d;
	font-family: 'Trebuchet NS', Arial, Helvetica, sans-serif;
}
.karkas {
	max-width: 1200px;
	min-width: 200px;
	margin: 0 auto;
}
	.head {
		padding: 30px 30px 80px 0;
		overflow: hidden;
	}
		.logo {
			float: left;
			margin: 25px 50px 0 0;
		}
		.head h1 {
			float: left;
			font-size: 15px;
			color: #939393;
			margin: 32px 0 0 0;
		}
		.head p {
			float: right;
			overflow: hidden;
		}
			.head p img {
				float: left;
				margin-left: 10px;
			}
	.content-wrapper {
		background: none repeat scroll 0% 0% #FFF;
	}
		.menu {
			background: url('../images/bg-menu.gif') repeat scroll 0% 0% #E4E3DF;
			margin-bottom: 30px;
		}
			.menu ul {
				overflow: hidden;
				padding: 30px;
				font: bold 14px 'Trebuchet NS', Arial, Helvetica, sans-serif;
			}
				.menu ul li {
					float: left;
					margin-right: 10px;
				}
					.menu ul li a {
						color: #413f40;
						text-decoration: none;
						padding: 5px 20px;
						display: block;
						border: 1px solid rgba(0, 0, 0, 0);
					}
					.menu ul li a:hover {
						text-decoration: underline;
					}
					.menu ul li.active a {
						color: #FFF;
						background: none repeat scroll 0% 0% #F45300;
						border-radius: 5px;
						border: 1px solid #c84502;
					}
			.menu #pull {
				display: none;
			}
		.content-main {
			padding: 0 30px;
		}
			.slogan-main {
				overflow: hidden;
				margin-bottom: 30px;
			}
				.slogan {
					float: left;
					width: 33.3%;
				}
					.slogan div {
						padding-right: 30px;
					}
						.slogan div h2 {
							font-size: 13px;
							overflow: hidden;
							margin: 0 0 20px 0;
						}
							.slogan div h2 img {
								float: left;
								margin: 0 20px 0 0;
							}
			.features {
				margin-bottom: 30px;
			}
				.features img {
					width: 100%;
					height: 250px;
				}
			.service-main {
				overflow: hidden;
				margin-bottom: 30px;
			}
				.service {
					width: 25%;
					float: left;
				}
					.service div {
						padding-right: 30px;
						text-align: left;
					}
						.service div h2 {
							font-size: 13px;
							margin-bottom: 20px;
						}
						.service div p {
							margin-bottom: 20px;
						}
							.service div p.center {
								text-align: center;
							}
			.work-with-us {
				background: none repeat scroll 0% 0% #f7f5ef;
				padding: 30px 20px;
				margin-bottom: 30px;
				overflow: hidden;
			}
				.work-with-us h2 {
					width: 62%;
					float: left;
					font-size: 18px;
					color: #706d6a;
					line-height: 1.6;
				}
				.work-with-us a {
					float: right;
					width: 38%;
				}
					.work-with-us a img {
						display: block;
						margin: 0 auto;
					}
			.bottom-content-block {
				margin-bottom: 30px;
				overflow: hidden;
			}
				.bottom-content-block h2 {
					font-size: 14px;
					text-transform: uppercase;
					margin-bottom: 20px;
				}
				.bottom-content-left {
					float: left;
					width: 66%;
				}
					.review {
						float: left;
						width: 43%;
						margin-right: 7%;
					}
						.review-head {
							overflow: hidden;
							margin-bottom: 20px;
						}
							.review-head img {
								float: left;
								margin-right: 20px;
								border-radius: 7px;
							}
							.review-head h3 {
								font-size: 13px;
								margin-bottom: 10px;
							}
							.review-head p {
								color: #f55909;
								font-size: 10px;
							}
						.review-content {
						
						}
				.bottom-content-right {
					float: right;
					width: 34%;
				}
					.news-block {
						overflow: hidden;
						margin-bottom: 20px;
					}
						.news-block img {
							float: left;
							margin-right: 15px;
						}
						.news-block h3 {
							font-size: 13px;
							margin-bottom: 5px;
						}
							.news-block h3  a {
								color: #343233;
								text-decoration: none;
							}
							.news-block h3  a:hover {
								text-decoration: underline;
							}
						.news-block p {
							color: #adadad;
							font-size: 12px;
							line-height: 1.5;
						}
							.news-block p  span {
								color: #f55909;
								font-size: 10px;
							}
	.footer-main {
		color: #848484;
		background: none repeat scroll 0% 0% #4A4744;
		padding: 40px 30px 30px;
		line-height: 1.5;
		font-size: 12px;
		overflow: hidden;
	}
		.footer-main a {
			color: #f7f5ee;
			text-decoration: none;
		}
		.footer-main a:hover {
			text-decoration: underline;
		}
			.footer-block-left {
				float: left;
				width: 60%;
				margin-right: 6%;
			}
				.footer-main h3 {
					color: #f7f5ee;
					font-size: 13px;
					margin-bottom: 15px;
				}
				.footer-main p {
					
				}
			.footer-block-right {
				float: right;
				width: 34%;
			}
				.footer-block-right ul {
				
				}
					.footer-block-right ul li {
						margin-bottom: 5px;
					}
	.footer-copy {
		background: none repeat scroll 0% 0% #3B3836;
		overflow: hidden;
		padding: 20px 30px;
	}
		.footer-copy img {
			float: left;
		}
		.footer-copy p {
			color: #d8d5cc;
			float: right;
			font-size: 12px;
		}
		
@media only screen and (min-width: 769px) and  (max-width: 800px) {
	.service {
		width: 50%;
	}
		.work-with-us h2 {
			width: 100%;
			float: none;
			font-size: 18px;
			color: #706d6a;
			line-height: 1.6;
			text-align: center;
			margin-bottom: 20px;
		}
			.work-with-us a {
				float: none;
			}
				.work-with-us a img {
					display: block;
					margin: 0 auto;
				}
}
@media only screen and (min-width: 601px) and (max-width: 768px) {
	.service {
		width: 50%;
	}
		.work-with-us h2 {
			width: 100%;
			float: none;
			font-size: 18px;
			color: #706d6a;
			line-height: 1.6;
			text-align: center;
			margin-bottom: 20px;
		}
			.work-with-us a {
				float: none;
			}
				.work-with-us a img {
					display: block;
					margin: 0 auto;
				}
	.head {
		padding: 30px 30px 30px 0;
		overflow: hidden;
		position: relative;
	}
		.logo {
			float: none;
			margin: 25px auto 0;
			display: block;
		}
		.head h1 {
			float: none;
			font-size: 15px;
			color: #939393;
			margin: 20px 0 0 0;
			text-align: center;
		}
		.head p {
			float: none;
			overflow: hidden;
			position: absolute;
			top: 20px;
			right: 30px;
		}
			.head p img {
				float: left;
				margin-left: 10px;
			}
		.bottom-content-left {
			float: none;
			width: 100%;
			margin-bottom: 30px;
			overflow: hidden;
		}
		.bottom-content-right {
			float: none;
			width: 100%;
		}
			.news-block {
				overflow: hidden;
				margin-bottom: 20px;
				float: left;
				width: 48%;
				margin-right: 2%;
			}
		.menu ul {
			display: none;
		}
		.menu a#pull {
			color: #333;
			display: block;
			font-size: 14px;
			font-weight: bold;
			text-decoration: none;
			padding: 10px 3%;
			width: 94%;
			position: relative;
		} 
		.menu a#pull:after {
			content: '';
			background: url('../images/icon-menu.png') no-repeat scroll 0% 0% rgba(0, 0, 0, 0);
			width: 12px;
			height: 13px;
			display: inline-block;
			position: absolute;
			top: 12px;
			right: 3%;
		}
}
@media only screen and (min-width: 481px) and (max-width: 600px) {
	.menu ul {
		display: none;
	}
		.menu a#pull {
			color: #333;
			display: block;
			font-size: 14px;
			font-weight: bold;
			text-decoration: none;
			padding: 10px 3%;
			width: 94%;
			position: relative;
		} 
		.menu a#pull:after {
			content: '';
			background: url('../images/icon-menu.png') no-repeat scroll 0% 0% rgba(0, 0, 0, 0);
			width: 12px;
			height: 13px;
			display: inline-block;
			position: absolute;
			top: 12px;
			right: 3%;
		}
	.service {
		width: 50%;
	}
		.work-with-us h2 {
			width: 100%;
			float: none;
			font-size: 18px;
			color: #706d6a;
			line-height: 1.6;
			text-align: center;
			margin-bottom: 20px;
		}
			.work-with-us a {
				float: none;
			}
				.work-with-us a img {
					display: block;
					margin: 0 auto;
				}
	.head {
		padding: 30px 30px 30px 0;
		overflow: hidden;
		position: relative;
	}
		.logo {
			float: none;
			margin: 25px auto 0;
			display: block;
		}
		.head h1 {
			float: none;
			font-size: 15px;
			color: #939393;
			margin: 20px 0 0 0;
			text-align: center;
		}
		.head p {
			float: none;
			overflow: hidden;
			position: absolute;
			top: 20px;
			right: 30px;
		}
			.head p img {
				float: left;
				margin-left: 10px;
			}
		.bottom-content-left {
			float: none;
			width: 100%;
			margin-bottom: 30px;
			overflow: hidden;
		}
		.bottom-content-right {
			float: none;
			width: 100%;
		}
			.news-block {
				overflow: hidden;
				margin-bottom: 20px;
				float: left;
				width: 48%;
				margin-right: 2%;
			}
	.slogan {
		float: none;
		width: 100%;
		margin-bottom: 20px;
	}	
}
@media only screen and (min-width: 241px) and (max-width: 480px) {
	.menu ul {
		display: none;
	}
		.menu ul  li {
			width: 100%;
		}
		.menu a#pull {
			color: #333;
			display: block;
			font-size: 14px;
			font-weight: bold;
			text-decoration: none;
			padding: 10px 3%;
			width: 94%;
			position: relative;
		} 
		.menu a#pull:after {
			content: '';
			background: url('../images/icon-menu.png') no-repeat scroll 0% 0% rgba(0, 0, 0, 0);
			width: 12px;
			height: 13px;
			display: inline-block;
			position: absolute;
			top: 12px;
			right: 3%;
		}
	.service {
		width: 100%;
	}
		.service div {
			padding-right: 0;
		}
		.work-with-us h2 {
			width: 100%;
			float: none;
			font-size: 18px;
			color: #706d6a;
			line-height: 1.6;
			text-align: center;
			margin-bottom: 20px;
		}
			.work-with-us a {
				float: none;
			}
				.work-with-us a img {
					display: block;
					margin: 0 auto;
					max-width: 100%;
				}
	.head {
		padding: 10px 0 15px 0;
		overflow: hidden;
		position: relative;
	}
		.logo {
			float: none;
			margin: 0 auto 0;
			display: block;
			width: 100px;
		}
		.head h1 {
			display: none;
		}
		.head p {
			display: none;
		}
			.review {
				float: none;
				width: 100%;
				margin-bottom: 20px;				
			}
		.bottom-content-left {
			float: none;
			width: 100%;
			margin-bottom: 30px;
			overflow: hidden;
		}
			
		.bottom-content-right {
			float: none;
			width: 100%;
		}
			.news-block {
				overflow: hidden;
				margin-bottom: 20px;
				float: none;
				width: 100%;
			}
		.slogan {
			float: none;
			width: 100%;
			margin-bottom: 20px;
		}
			.slogan div {
				padding-right: 0;
			}
		.footer-block-left {
			float: none;
			width: 100%;
			padding-bottom: 25px;
		}
		.footer-block-right {
			float: none;
			width: 100%;
		}
			.footer-copy img {
				float: none;
				display: block;
				margin: 0 auto 10px;
			}
				.footer-copy p {
					color: #d8d5cc;
					float: none;
					font-size: 12px;
					text-align: center;
				}
}
@media only screen and (max-width: 240px) {
	.menu ul {
		display: block;
	}
		.menu ul  li {
			width: 100%;
		}
		.menu a#pull {
			color: #333;
			display: block;
			font-size: 14px;
			font-weight: bold;
			text-decoration: none;
			padding: 10px 3%;
			width: 94%;
			position: relative;
		} 
		.menu a#pull:after {
			content: '';
			background: url('../images/icon-menu.png') no-repeat scroll 0% 0% rgba(0, 0, 0, 0);
			width: 12px;
			height: 13px;
			display: inline-block;
			position: absolute;
			top: 12px;
			right: 3%;
		}
	.content-main {
		padding: 0 30px;
	}
		.service {
			width: 100%;
		}
			.service div {
				padding-right: 0;
			}
			.work-with-us h2 {
				width: 100%;
				float: none;
				font-size: 15px;
				color: #706d6a;
				line-height: 1.6;
				text-align: center;
				margin-bottom: 20px;
			}
				.work-with-us a {
					float: none;
				}
					.work-with-us a img {
						display: block;
						margin: 0 auto;
						max-width: 100%;
					}
		.head {
			padding: 10px 0 15px 0;
			overflow: hidden;
			position: relative;
		}
			.logo {
				float: none;
				margin: 0 auto 0;
				display: block;
				width: 100px;
			}
			.head h1 {
				display: none;
			}
			.head p {
				display: none;
			}
				.review {
					float: none;
					width: 100%;
					margin-bottom: 20px;				
				}
			.bottom-content-left {
				float: none;
				width: 100%;
				margin-bottom: 30px;
				overflow: hidden;
			}
				
			.bottom-content-right {
				float: none;
				width: 100%;
			}
				.news-block {
					overflow: hidden;
					margin-bottom: 20px;
					float: none;
					width: 100%;
				}
			.slogan {
				float: none;
				width: 100%;
				margin-bottom: 20px;
			}
				.slogan div {
					padding-right: 0;
				}
		.footer-main {
			color: #848484;
			background: none repeat scroll 0% 0% #4A4744;
			padding: 30px 10px;
			line-height: 1.5;
			font-size: 12px;
			overflow: hidden;
		}
			.footer-block-left {
				float: none;
				width: 100%;
				padding-bottom: 25px;
			}
			.footer-block-right {
				float: none;
				width: 100%;
			}
				.footer-copy {
					background: none repeat scroll 0% 0% #3B3836;
					overflow: hidden;
					padding: 20px 10px;
				}
					.footer-copy img {
						float: none;
						display: block;
						margin: 0 auto 10px;
					}
						.footer-copy p {
							color: #d8d5cc;
							float: none;
							font-size: 12px;
							text-align: center;
						}	
}