@import url(//fonts.googleapis.com/css?family=PT+Sans|PT+Sans+Narrow&subset=latin,cyrillic);

body{
	margin: 0;
	padding:0;
	background: #076cb4;
	font-family: 'PT Sans', sans-serif;
	color: #ffffff;
	font-size: 16px;
	min-width: 960px;


}
.first-block{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	position: relative;
	z-index: 10;
}
.first-block .col{
	width: 45%;
	padding-bottom: 20px;
	flex-grow: 0;
}
.first-block ul li{
	margin-left: 15px;
	padding-bottom: 6px;
}

.header-wrapper{
	position: fixed;
	left: 0;
	right: 0;
	padding-top: 40px;
	padding-bottom: 20px;
	/*background: #076cb4;*/
	z-index: 100;
	
}
.header{
	position: relative;
	min-height: 200px;
	margin: 0 auto;
	width: 1000px;


}
.controls-wrap{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 40px 0;

}
.control-wrap{
	position: relative;
	-webkit-perspective: 100px;
	-moz-perspective: 100px;
	-ms-perspective: 100px;
	perspective: 100px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-perspective-origin: bottom center;
	-moz-perspective-origin: bottom center;
	-ms-perspective-origin: bottom center;
	perspective-origin: bottom center;
	width: 200px;
	text-align: center;


}

.control{
	width: 105px;
	height: 65px;
	margin: 0 auto;
	/*box-sizing: border-box;*/
	background-image: url(/img/controls.png);
	background-repeat: no-repeat;
	background-position: 0 0;


}
.control-wrap a{

	color: #fff;
	text-decoration: none;
}
.control a:hover{
	text-decoration: underline;
}
.control-wrap.active .control,
.control-wrap:hover .control{
	animation: rotate .3s;
	animation-fill-mode: both;
}
.control-wrap.active .control-link{
	border-bottom: 1px solid rgba(255,255,255,.7);
}
.control-wrap .control{
	animation: rotateFrom .1s;
	animation-fill-mode: none;
}
@keyframes rotateFrom {
	from{

		transform: rotateX(7deg);
	}
	to {

		transform: rotateX(0deg);

	}
}
@keyframes rotate {
	to {
		opacity: .7;

		transform: rotateX(7deg);
	}
}
.phone{
	position: absolute;
	top: -10px;
	right: 0;
}
.phone a{
	font-weight: normal;
	font-size: 0.8em;
	text-decoration: none;
	color: #fff;

}
.control.c-domophone{
	width: 105px;
	background-position: 0 0;

}
.control.c-videophone{
	width: 105px;
	background-position: -105px 0;

}
.control.c-service{
	width: 105px;
	background-position: -210px 0;
}
.control.c-contact{
	width: 105px;
	background-position: -315px 0;
}

section{
	width: 960px;
	margin: 0 auto;
	position: relative;
	min-height: calc(100vh - 400px);


}
p{
	padding-left: 16px;
}
h2{
	font-family: 'PT Sans Narrow';
	font-weight: normal;
	font-size: 1.8em;
	margin: 0;
	padding: 0;
	margin-bottom: 10px;
	color: #ffffff;
	opacity: .7;
}
ul{
	padding: 0;
	margin: 0;
}
ul li{
	margin-left: 65px;
	left: 0;
	padding-bottom: 10px;
}
.contact{
	width: 100%;


}
.contact-wrapper{
	width: 960px;
	margin: 0 auto;
}
.footer{
	padding: 0;
	margin: 0;
	width: 100%;
	min-height: 60px;
	background-color: #054e82;
}
.map{
	width: 100%;
	min-height: 350px;
}
.text{
	color: #adcce9;
	margin-top: 100px;
}
.top{
	text-align: right;
	vertical-align: middle;
}
.numer{

	white-space: nowrap;
	font-size: 2.3em;
	line-height: .8em;
	vertical-align: middle;
	display: inline-block;
	margin-left: 10px;  
}
.numer a{
	color: #ffffff;
}
.numer a:before{
	content: " ";
	display: inline-block;
	width: 40px;
	height: 19px;
	padding-right: 10px;
	padding-bottom: 2px;
	opacity: .8;
	background: url("/img/prefix.png") no-repeat;
}
.numer a:hover{
	text-decoration: none;
}
.pref{



}
.logo{
	margin-top: 210px;
	font-size: 1.1em;
}
.logo-img{
	max-width: 100%;
	min-width: 200px;
}
.logo-pic{
	max-width: 47px;
	min-width: 20px;
	margin-right: 10px;
	float: left;
	padding-bottom: 57px;
}
.slogan{
	margin-top: 10px;

	font-size: 1.1em;
	position: relative;
}
.slogan:before{
	content: "\2014 ";
	float: left;
	padding-bottom: 45px;
	padding-right: 10px;
	left: 0px;

}

.col-xs-6{
	padding-bottom: 20px;
}

.hide{
	display: none;
}
h3{
	font-family: 'PT Sans Narrow';
	font-weight: normal;
	font-size: 1.6em;
	margin: 0;
	padding: 0;
}
h4{
	padding: 0;
	margin: 0;
}
.domophone-items{
	width: 100%;
	padding: 10px 0;
	background-color: #fff;
	color: #222;


}
.items-wrapper{
	width: 960px;
	margin: 0 auto 40px;
	padding-bottom: 20px;
	border-bottom: 1px solid #eee;
	text-align: left;


}
.items{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;

}
.item{
	max-width: 240px;
	border: 1px solid transparent;
	text-align: center;
	vertical-align: top;
	margin-bottom: 20px;
}
.items-headers{
	margin-bottom: 20px;
}
.item:after{
	content: '';
	clear: both;
}
.col-2 .item{
	max-width: 460px;
  }


.item:hover{
	border: 1px solid #a9daf3;
}

.item-img{
	width: 120px;
	text-align: center;
	display: block;
	float: left;
}
.item-header{
	display: inline-block;
	width: 310px;
	text-align: left;
	color: #444;
}
.item-description{
	width: 310px;
	text-align: left;
	display: inline-block;
	vertical-align: top;
	padding-top: 10px;
	color: #5f5f5f
}
.content{
	position: fixed;
	top: 335px;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 120;
	overflow-y: auto;
	-ms-overflow: none;
	overflow: -moz-scrollbars-none;
	-ms-overflow-style: none;
	overflow-style: none;

}
.content::-webkit-scrollbar {
	width: 0 !important;
	opacity: 0;
}
.pano-view{
	width: 100vw;
	height: 435px;
	position: fixed;
	z-index: 1;
	top: -20px;
	left: 0;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	background-image: url(/img/pano_item.jpg);
	animation-name: pano-run;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-duration: 460s;
	animation-delay: 2s;
}
@keyframes pano-run {
	0%, 100% {
		background-position: 0 0;
	}
	50%{
		background-position: calc( 100vw - 4254px) 0;
	}
}