html,
body {
	font: 16px/1.2 'Open Sans', sans-serif;
	width: 100%;
	height: 100%;
	min-width: 320px;
	min-height: 100%;
}
body{
	display: block;
}
body{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.header,
footer{
	flex-grow: 0;
	flex-shrink: 0;
}
main{
	flex-grow: 1;
	flex-shrink: 0;
}
.width-wrapper {
	max-width: 1366px;
	padding: 0 15px;
	margin: 0 auto;
	border: 1px solid transparent;
}
@media screen and (min-width: 1080px) and (max-width: 1365px){
	.width-wrapper {
		max-width: 1080px;
	}
}
@media screen and (min-width: 840px) and (max-width: 1079px){
	.width-wrapper {
		max-width: 830px;
		padding: 0 5px;
	}
}
@media screen and (min-width: 768px) and (max-width: 839px){
	.width-wrapper {
		width: 100%;
		padding: 0 43px;
	}
}
@media screen and (max-width: 767px){
	.width-wrapper {
		width: 100%;
		padding: 0 15px;
		margin: 0 auto;
	}
}

/*ОБЛАСТЬ ТЕКСТОВАЯ НАЧАЛО*/
.text-container {
	display: inline-block;
	padding: 0;
	margin: 0;
}
.text-align-left {
	text-align: left;
}
.text-align-right {
	text-align: right;
}
.text-align-center {
	text-align: center;
}

.font-bold {
	font-weight: 600;
}


/*ОБЛАСТЬ ТЕКСТОВАЯ КОНЕЦ*/


/*ОБЛАСТЬ УМНЫХ БЛОКОВ НАЧАЛО*/
/*Да так я назвал эту ср*нь, я не очень умный, пускай хоть блоки будут умными*/
/*
	!!!!!ВНИМАНИЕ!!!!!
	Все представленные классы в этой области ни в коем случае не должны иметь
	свойства регулируещие их отношения с внешними блоками, типа margin или padding,
	эти свойства задаются сугубо с использованием наследственного комбинатора.
	!!!!!ВНИМАНИЕ!!!!!

	.inline-block-container - главный контенер, служит для обнуления шрифта,
	неспосредственно дочерние элмементы могут быть только с классом .di-block,
	если в нем размещается что то другое то значит класс используется не правильно!
	Имеет два модификатора:
		.inline-block-container.no-wrap - все дочерние .di-block будут
		располгагатся сугубо в одной строке и не будут переходить на другую
		в случае превышения ширины родительского эллемента.

		.inline-block-container.justify-blocks - все дочерние .di-block будут
		равномерно распределятся по ширине контейнера, количество эллементов в ряду
		зависит от ширины элемента .di-block.
	Использовать одновременно два модификатора невозможно и запрещено конституцией РФ.
	Использовать контейнер без модификаторов возможно, тогда контроль над поведением блоков
	полностью переходит на свойства с использованием наследственного комбинатора, однако
	если модификатор палнируется использовать повторно, имеет смысл добавить его сюда.
	А если новые описаные правила повторяют уже существующие правила модификаторов,
	то следует их удалить и использовать уже ГОТОВЫЕ модификаторы.

	.di-block - представляет из себя обертку для любого содержания
	является inline-block'ом, по умолчанию с верхним вертикальным выравниванием,
	шириной блока 33% и скрытием контента выходящим за рамки,
	все это соответвеноо можно переопределить но сугубо в рамках используемой области.
*/
.inline-block-container {
	font-size: 0;
}
.inline-block-container > * {
	font-size: 16px;
}
.inline-block-container.no-wrap {
	white-space: nowrap;
}
.inline-block-container.no-wrap > * {
	white-space: normal;
}
.inline-block-container.justify-blocks {
	font-size: 1px;
	white-space: normal;
	text-align: justify;
}
.inline-block-container.justify-blocks:after {
	content: '';
	display: inline-block;
	width: 100%;
}
.di-block {
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
}
.justify-blocks .di-block{
	width: 33%;
}
@media screen and (max-width: 767px){
	.inline-block-container > * {
		font-size: 14px;
	}
}
/*ОБЛАСТЬ УМНЫХ БЛОКОВ КОНЕЦ*/

/*ОБЛАСТЬ ТАБОВ НАЧАЛО*/
.tab-buttons{
	text-align: center;
	margin-bottom: 35px;
}
.tab-btn{
	display: inline-block;
	color: #000;
	font-size: 16px;
	padding: 16px 20px;
	position: relative;
	margin-bottom: 10px;
	text-decoration: none;
}
.tab-btn > span{
	border-bottom: 1px dotted #000;
}
.tab-btn.active,
.tab-btn:hover{
	color: #fff;
	background-color: #ff9f00;
}
.tab-btn.active > span,
.tab-btn:hover > span{
	border-color: transparent;
}
/*ОБЛАСТЬ ТАБОВ КОНЕЦ*/

.big-phone-number {
	font-size: 26px;
	font-weight: 600;
	color: #333;
	text-decoration: none;
}
.orange-button,
.white-button{
	border: 1px solid transparent;
	text-transform: uppercase;
	padding: 10px 15px;
	font-size: 12px;
	border-radius: 5px;
	cursor: pointer;
	font-weight: 600;
	display: inline-block;
	text-decoration: none;
}
.orange-button > span,
.white-button > span{
	vertical-align: middle;
	text-decoration: none;
}
.orange-button{
	background-color: #ff9f00;
	color: #fff;
}
.white-button{
	background-color: #fff;
	color: #ff9f00;
	border-color: #ff9f00;
}
.small-phone-number,
.email,
.email + a {
	display: inline-block;
	font-size: 14px;
	color: #333;
	text-decoration: none;
}
@media screen and (min-width: 768px) and (max-width: 839px){
	.big-phone-number{
		font-size: 14px;
	}
	.orange-button,
	.white-button{
		font-size: 12px;
		font-weight: 600;
	}
	.small-phone-number,
	.email,
	.email + a {
		display: none;
	}
}
@media screen and (max-width: 767px){
	.big-phone-number{
		font-size: 14px;
	}
	.orange-button,
	.white-button{
		font-size: 12px;
		font-weight: 600;
	}
	.small-phone-number,
	.email,
	.email + a {
		display: none;
	}
}


.block-header {
	font-size: 36px;
	color: #333;
	font-weight: 600;
	text-align: center;
	margin-top: 50px;
}
@media screen and (max-width: 767px){
	.block-header {
		font-size: 22px;
		margin-top: 34px;
	}
}

/*MODAL AREA START*/
.modal-callback{
	display: none;
	width: 395px;
	height: 520px;/*//462*/
	background-color: #2475b3;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 50px;
}
.close-modal{
	position: absolute;
	top: 0;
	right: 0;
	width: 24px;
	height: 24px;
	background-color: #fff;
	cursor: pointer;
	border: none;
}
.close-modal:after,
.close-modal:before{
	content: '';
	position: absolute;
	width: 2px;
	height: 22px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	background-color: #2475b3;
	box-shadow: 0 0 1px #2475b3;
	transition: height .05s;
}
.close-modal:after{
	transform: rotate(45deg);
}
.close-modal:before{
	transform: rotate(-45deg);
}
.close-modal:hover:after,
.close-modal:hover:before{
	height: 26px;
}
.modal-header{
	font-size: 18px;
	color: #fff;
	line-height: 1.2;
	font-weight: 600;
	margin-bottom: 35px;
}
.modal-message{
	background-color: #2475b3;
	padding: 15px;
	color: #fff;
	font-size: 20px;
	text-align: center;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin:auto;
	width: 395px;
	height: 80px;
	display: none;
}
@media screen and (max-width: 394px){
	.modal-callback{
		width: 257px;
		height: 480px;
		padding: 25px 19px 44px;
	}
	.modal-message{
		width: 100%;
		height: 102px;
	}
}
/*MODAL AREA END*/

/*INLINE ICON AREA START*/
.doc-ic:before,
.print-ic:before{
	content: '';
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
	background-image: url(../img/button_sprites.png);
}
.doc-ic:before{
	width: 24px;
	height: 32px;
	background-position: -10px -10px;
}
.print-ic:before{
	width: 25px;
	height: 30px;
	background-position: -54px -10px;
}
/*INLINE ICON AREA END*/

/*SLIDER AREA START*/
.slider{
	width: 100%;
	position: relative;
}
.slider .owl-item{
	text-align: center;
}
.slider .owl-controls{
	height: 0;
	text-align: center;
}
.slider .owl-dot{
	position: relative;
	top: 60px;
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: #2476b5;
}
.slider .owl-dot + .owl-dot{
	margin-left: 14px;
}
.slider .owl-dot.active{
	background-color: #ff9e00;
}
.slider .owl-prev,
.slider .owl-next{
	width: 24px;
	height: 40px;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
	color: #2878b6;
}
.slider .owl-prev{
	left: 15px;
}
.slider .owl-next {
	right: 15px;
}
.slider .owl-prev:hover,
.slider .owl-next:hover{
	color: #ff9e00;
}
.slider .owl-prev:after,
.slider .owl-next:after{
	content: '';
	position: absolute;
	width: 24px;
	height: 24px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	border-bottom: 4px solid;
}
.slider .owl-prev:after{
	border-left: 4px solid;
	transform: rotate(45deg);
}
.slider .owl-next:after{
	border-right: 4px solid;
	transform: rotate(-45deg);
}
/*SLIDER AREA END*/

/*PRINT AREA START*/
@media print{
	html,
	body{
		width: 100%;
		padding: 3mm 6mm;
	}
	.width-wrapper{
		width: 100%;
		padding: 0;
	}
	.big-phone-number{
		font-size: 4.94mm;
	}
	#main-phone-and-button .big-phone-number{
		margin-right: 0;
	}
	.small-phone-number, .email, .email + a{
		font-size: 2.82mm;
	}
	#other-phones-and-email a{
		margin-right: 3mm;
	}
}
/*PRINT AREA END*/

/* region FLEX */
.flex-container {
    display: flex;
}
/* endregion FLEX */