@charset "utf-8";
/* CSS Document */

*{padding:0; margin:0;}
body{font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:1.3; color:#000;}
.clr{clear:both;}
.karkas{max-width:1000px; margin:0 auto;}

h1, h2, h3, h4, h5, h6{font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
li{list-style:none;}
.header{display: flex; justify-content: space-between;}
.header>a{text-decoration: none;}
.header>a:hover{opacity:0.6;}
.header>div{display: flex; flex-direction: column;}
.slogan{ margin:10px 0 15px 0;}
	.slogan p{color:#5f5f5f; font-size:18px; text-align:center; font-weight:lighter;}
.menu{order: -1; display: flex; justify-content: space-between; margin-bottom: 15px;}

.menu li a{text-decoration:none; color:#000; padding:45px 15px 10px; display:block;}
.menu li a:hover{color:#FFF; background:#fc854f;}
.menu li a.now{background:#fc854f; color:#FFF;}
.menu a#pull{display:none; clear:both;}
.mts{display: flex; justify-content: flex-end; align-items: center; font-size: 14px; padding: 3px 0 3px 0;}
.mts>a{padding: 3px 0 3px 0; margin-left: 10px; color: #000; text-decoration: none; font-size: 16px;}
.mts>a:hover{opacity: 0.7;}
.service-main{padding:40px 1% 0; overflow:hidden;}
	.service{background:url(../images/quality.jpg) center top no-repeat; float:left; width:28%;}
	.service:first-child{margin:0 7% 0 0.5%; background:url(../images/icon2.jpg) center top no-repeat;}
	.service:last-child{margin:0 0.5% 0 7%; background:url(../images/smile.jpg) center top no-repeat;}
	.service-content{
			background:url(../images/newpsd.jpg) center bottom no-repeat; padding-bottom:21px;
			}
			.service-content div{
				background:#FFF; margin:66px 0 0 0;  border: 1px solid #e0e0e0; padding:23px 10px 15px;
				 }
				 .service-content div p{
					 font-size:14px; text-align:center; color:#555;
					 }
				  .service-content div h1{
					 font-size:17px; text-align:center; color:#dd4911; margin-bottom:10px;
				  }
.cat-main{
	overflow:hidden; padding:0 0 0 4%; background: #fff;
	}
.punkt{
	float:left; margin:50px 4% 0 1%;
	}

	.punkt a{
		color:#555; text-decoration:none; display:block;
		}
		.punkt a:hover{
			opacity:0.5;}
		.punkt a h2{
		font-family:Arial, Helvetica, sans-serif; font-weight:lighter; font-size: 17px; text-align:center;
		}
		.punkt a img{
			margin:0 auto; max-width:100%; display:block;
			}

.line{
	margin:70px 13% 0; color:#f38856; border:none; background:#f38856; height:1px;
	}

.latest-project-main{
	margin-top:20px; padding:0 1%; overflow:hidden;
	}
	.latest-project-main h1{
		font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:24px; font-weight:normal; text-transform:uppercase; color:#ff4e00; margin:0 0 25px 1.25%;
		}
		.latest-project{
			overflow:hidden;
			}
			.latest-project>div{
				float:left; width:22.5%; margin:0 1.25%; background:url(../images/shadow-last.png) center bottom no-repeat; padding:0 0 12px 0;
				}
				.latest-project>div h3{
					background:#fc854f; color:#fff; font-size:14px; text-transform:uppercase; text-align:center;padding:10px 0;
					}
				.latest-project>div img{
					max-width:100%;
					}
				.latest-project>div a{
					display:block; background:#fc854f url(../images/logo-bg.png) center center no-repeat; text-decoration:none;
					}
					.latest-project>div a:hover img{
						visibility:hidden;
						}
					.latest-project>div a:hover h3{
						background:#d7f8eb; color:#4b4a4a;
						}




.from-blog-main{
	margin-top:20px; padding:0 1%; overflow:hidden;
	}
	.from-blog-main h1{
		font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:24px; font-weight:normal; text-transform:uppercase; color:#ff4e00; margin:0 0 25px 1.25%;
		}
		.from-blog{
			overflow:hidden;
			}
			.from-blog>div{
				float:left; width:22.5%; margin:0 1.25%; background:url(../images/shadow-last.png) center bottom no-repeat; padding:0 0 12px 0;
				}
				.from-blog>div h3{
					background:#fc854f; color:#fff; font-size:14px; text-transform:uppercase; text-align:center;padding:10px 0;
					}
				.from-blog>div img{
					max-width:100%;
					}
				.from-blog>div a{
					display:block; background:#fc854f url(../images/logo-bg.png) center center no-repeat; text-decoration:none;
					}
					.from-blog>div a:hover img{
						visibility:hidden;
						}
					.from-blog>div a:hover h3{
						background:#d7f8eb; color:#4b4a4a;
						}
					.from-blog>div a:hover div p{
						display:none;
					}
					.from-blog>div a div{
						position:relative;
						}
						.from-blog>div a div p{
							position:absolute; left:0; bottom:0; font-size:14px; text-transform:uppercase; background:#c4e2d6; color:#4b4a4a; padding:5px 10px; text-align:center;
						}
							.from-blog>div a div p span{
								display:block; font-size:16px;
								}

.footer{background:#c4e2d6; overflow:hidden; margin-top:75px; padding:0 0 10px 0;}
.logo-ft{float:left; margin: 5px 0 0 2%;}
.foottel{float:right; margin:48px 10px 0 0; width:20%;}
	.foottel p{padding:0 0 0 18%; font-size:18px; color:#565656;}
  .foottel p a{color:#434343;}
  .foottel p a:hover{text-decoration: none;}
  .foottel .velcom{background:url(../images/velcom-ft.png) left center no-repeat;}
	.foottel .mts{background:url(../images/mts-ft.png) left center no-repeat;}
.ft-bot{font-size:11px; color:#565656; margin: 34px 0 0; overflow: hidden; padding:0 1%;}
	.ft-bot a{color:#565656; text-decoration:none;}
	.ft-bot a:hover{text-decoration:underline;}
	.copy{float: left;}
	.ft-nav{float: right;}
	.social{text-align:center;margin: -5% 30% 0;}
  .social a{padding: 0 10px;}
  .social a:hover{opacity:0.7;}
.about{color:#555; margin:40px 0 10px 1%;}
	.about h1{	font-weight: normal; font-size:23px; text-transform:uppercase; color:#ff4e00; margin:0 0 30px 0;
	}
	.about a{
		text-decoration:none; color:#fc854f; font-size:14px;
		}
	.about a:hover{
		text-decoration:underline;}
.page-map{
	background:#e8e8e8; padding:10px 0 10px 1%; font-size:13px;
	}
	.page-map a{
	color:#555; text-decoration:none;
	}
	.page-map a:hover{
		text-decoration:underline;
		}
	.page-map span{
		color:#ff4e00;
		}


		/*        PORTFOLIO          */

.portfolio-main{
	padding:45px 0 0 0;
	}
	.portfolio-nav{
		overflow:hidden; font-size:18px; color:#555;
		}
		.portfolio-nav li{
			float:left;
			}
			.portfolio-nav li a{
				color:#555; padding:3px 15px; display:block; text-decoration:none;
				}
			.portfolio-nav li a:hover{
				background:#FC854F; color:#fff;

				}
			.portfolio-nav li a.act{
				background:#FC854F; color:#fff;
				}
	.portfolio-all{
		overflow:hidden; padding:0 0 0 1%;
		}
		.portfolio-block{
			float:left; margin:50px 1% 0; width:31.3%;
			}
			.portfolio-block:nth-child(3n+1){
				clear:both;
				}
			.portfolio-block-img{
				margin:0 0 15px 0;
				}
				.portfolio-block-img a{
					display:block;
					}
					.portfolio-block-img a img{
						max-width:100%;
					}
				.portfolio-block-img a:hover{
					opacity:0.7;
					}
			    .portfolio-block-txt{
					}
						.portfolio-block-txt h2{
							font-size:24px; text-align:center; margin-bottom:15px; font-weight:normal;
							}
							.portfolio-block-txt a{
								color:#000; text-decoration:none;
								}
								.portfolio-block-txt a:hover{
									color: #FC854F;
									}


/*  PORTFOLIO_SINGLE  */

.portfolio-single{
	padding:60px 1% 15px; overflow:hidden; border-bottom: 2px solid #ff4e00; margin-bottom:60px;
	}
	.portfolio-single-left{
		float:left; width:70%;
		}
	.portfolio-single-right{
		float:right; width:27%;
		}
		.portfolio-single-right h1{
			font-family:"Trebuchet MS"; font-size:24px; font-weight:normal; text-transform:uppercase; color:#ff4e00; margin-bottom:30px; text-align: center;
			}
		.portfolio-single-right p{
			margin-bottom:20px; color:#555;
			}
			.portfolio-single-right p a{
				text-decoration:none; color:#fc854f; font-size:14px;
				}
				.portfolio-single-right p a:hover{
					text-decoration:underline;
					}




/*  BLOG  */

.articles{
	overflow:hidden; margin: 60px 1% 0 0;
	}
	.articles-gen-img{
		float:left; margin-right:3%; position:relative;
		}
		.articles-gen-img a:hover{
			opacity:0.7;}
		.articles-gen-img p{
			position:absolute; top:0; left:0; background:#fc854f; color:#fff; font-size:18px; text-align:center; padding:5px 10px; line-height:1;
			}

.articles-desc h1{
	font-size:32px; color:#ff4e00; border-bottom:1px solid #fc854f; font-weight: normal; margin: 0 0 15px 33%; padding: 0 0 10px;
	}
	.articles-desc h1 a{
		text-decoration:none; color:#fc854f; font-size:32px; float:none; margin:0;
		}
		.articles-desc h1 a:hover{
			opacity:0.5;
			}

	.articles-desc p{
	color: #555;
    font-size: 14px;
    font-weight: lighter;
	line-height:1.4;
	margin-bottom:10px;
}
.articles-desc p a{
		text-decoration:none; color:#fc854f; font-size:14px; float:none; margin:0;
		}
		.articles-desc p a:hover{
		text-decoration:underline;
		}
	.articles-desc a{
	color:#dd4911; font-size:14px; float:right; margin: 0 1% 0 0;
	}
		.articles-desc a:hover{
			text-decoration:none;
			}

	.line-blog{
	margin:40px 0 0 0; color:#f38856; border:none; background:#f38856; height:3px;
	}



.pager{
	overflow:hidden; margin:70px 0 0 0;
	}
	.pager li{
		float:left;
		}
		.pager li a{
			border:1px solid #fc854f; color:#fc854f; display:block; padding:4px 8px; text-decoration:none; font-size:14px; margin:0 3px 0 0;
			}
			.pager li a:hover{
				background:#fc854f; color:#fff;
				}
			.pager li a.now{
				background:#fc854f; color:#fff;
				}
			.pager li a.dot{
				border:none;
				}
				.pager li a.dot:hover{
					border:1px solid #fc854f;
					}




/*  POST  */


.post-single{
	}
	.post-header{
		position:relative; overflow:hidden; padding: 0 0 10px 70px; margin: 50px 0 0 0;
		}
		.post-header h1{
			font-size:30px; color:#fc854f;
			}
		.date{
			position:absolute; top:0; left:0; background:#fc854f; color:#fff; font-size:18px; text-align:center; padding:5px 10px; line-height:1;
			}
		.post-img{
			margin:20px auto 60px; display:block;
			}
		.post p{
			color: #555;
    font-size: 14px;
    font-weight: lighter;
    line-height: 1.4;
    margin-bottom: 10px;
	}
	.post p a{
		text-decoration:none; color:#fc854f; font-size:14px;
		}
	.post p a:hover{
		text-decoration:underline;}


  .header-contact{margin-bottom: 20px; font-weight: normal; font-size:23px; color:#ff4e00;}
  .my_c{
	padding:8px 0 8px 2%;
	border:1px solid #ccc;
	width:37%;
}
.my_ca{
	padding:20px 10px;
	width:80%;
	height:200px;
	margin-bottom:15px;
	}
.control-group{
	margin-bottom:15px;
	}
.my_check{
	margin-top:3px;
	position:absolute;
	}
.btn{
	background:#fc854f;
	border:1px solid #fc854f;
	padding:7px;
	color:#fff;
	font-size:14px;
	text-transform:uppercase;
	}
	.btn:hover{
		opacity:0.8;}



	@media screen and (max-width:900px){
	.menu{
		float:none;
		}
	.menu ul{
		display:none; clear:both; float:none;
	}
	.menu li{
		float:none;
		}
	.menu ul li a{
		padding: 10px 20px;
	}
	.menu a#pull{
		display:table;
		font-family: Arial, Helvetica, sans-serif;
		font-size:14px;
		font-weight:normal;
		color:#000;
		text-decoration:none;
		padding:10px 3%;
		width:5%;
		position:relative;
		margin:0 auto;
			}
	.menu a#pull:after{
		content:"";
		background:url(../images/icon-menu.png) no-repeat;
		width:12px;
		height:13px;
		display:inline-block;
		position:absolute;
		top:13px;
		right:1%;
	}
	.tel{
		margin: 80px 0 0;
    width: 22%;
		}
	.logo{
		margin-bottom:42px;}
	}




	@media screen and (max-width:800px){
	.punkt{

    width: 18%;
    float: left;
    margin: 20px 1% 0; height:110px;
}
	.tel{
		width:25%;
		}
	.service {
    background: rgba(0, 0, 0, 0) url("../images/icon1.jpg") no-repeat scroll center top;
    float: left;
    width: 90%;
	margin:0 5% 0;
			}
	.service:first-child {
    margin: 0 5% 0;
}
	.service:last-child {
    margin: 0 5% 0;
}
	}

	@media screen and (max-width:700px){
	.tel{
		width:29%;
		}
	.latest-project>div{
		float:left; margin:0 2.4% 70px 2.4%; width:45%;
		}
	.from-blog>div{
		float:left; margin:0 2.4% 70px 2.4%; width:45%;
		}
			}
	@media screen and (max-width:600px){
	.tel{
		width:33%;
		}
			}
	@media screen and (max-width:580px){
	.punkt{
			width:23%;
			}
	.tel {
    margin: 0 30% 25px;
    width: 40%;
}
	.header a{
	display:table;
	margin:0 auto;}

	@media screen and (max-width:480px){
	.punkt{
			width:30%;
			}
		.punkt a h2{
				font-size:14px;
				}
	.tel {
    margin: 0 22% 25px;
    width: 50%;
}

	.menu a#pull::after {
    right: -5%;
}
	}

	@media screen and (max-width:400px){
	.punkt{
			width:48%;}
	.tel {
    margin: 0 16% 25px;
    width: 60%;
}
	.logo{
		width:70%;
    	margin: 10px 15% 42px;
    	width: 70%;
}
	.latest-project>div{
		float:none; margin:0 8% 70px 8%; width:85%;
		}
	.from-blog>div{
		float:none; margin:0 8% 70px 8%; width:85%;
		}

	}


	@media screen and (max-width:300px){
	.punkt{
			width:48%;}
	.tel {
    margin: 0 9% 25px;
    width: 70%;
}
	.menu a#pull::after {
    right: -10%;
}

	}