/*------------------------------------------------------------------------------
 ******************* Файл пользовательских стилей: style.css *******************
 ******************* Собственность компании WEBBERRIES *************************
 ******************* https://webberries.ru (C) 2018-2019 ***********************
 ******************* Для вопросов: webberries@yandex.ru ************************
 ******************* Дата обновления: 30.10.2019 *******************************
-------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------
 ******************* ВСПОМОГАТЕЛЬНЫЕ СТИЛИ *************************************
-------------------------------------------------------------------------------*/

/*
Для изменения цвета элементов - раскомментировать и поменять со стандартных на нужные:
*/
/*------------------------------------------------------------------------------
		a:link {color: #006699; text-decoration: underline; }
		a:visited {color: #006699; text-decoration: underline; }
		a:active {color: #006699; text-decoration: underline; }
		a:hover {color: #009999; text-decoration: none; }

		body {
			background: #f5f5f5;
		}

		input[type=text], textarea, input[type=password], select {
			border: 1px solid #c5c5c5;
			border-radius: 2px;
		}

		input[type=submit] {
			background: #4CAF50;
			color: #fff;
			border-radius: 2px;
		}
		input[type=submit]:hover {
			background: #2E7D32;
		}
-------------------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,700&display=swap');

a.white:link {color: #fff; text-decoration: none;}
a.white:visited {color: #fff; text-decoration: none; }
a.white:active {color: #fff; text-decoration: none;}
a.white:hover {color: #fff; text-decoration: underline;}

/*------------------------------------------------------------------------------
 ******************* HEADER ****************************************************
-------------------------------------------------------------------------------*/


body {
	background: #213141 url(/images/bg3.png);
	background-size: 100%;
	background-repeat: repeat-y;
}

header {
	height: 142px;
	margin-top: 30px;
}

header .logo {
	height: 142px;
	width: 250px;
	float: left;
}

header .contacts {
	float: left;
	width: calc(100% - 250px);
	height: 142px;
	text-align: right;
	line-height: 142px;
}

header .contacts i {
	color: #ff8d44;
	font-size: 1.6em;
	position: relative;
	top: 5px;
}

header .contacts .location {
	margin-right: 50px;
	color: #fff;
	font-size: 1.4em;
	display: inline-block;
	font-family: 'Roboto Condensed', sans-serif;
}

header .contacts .phone {
	color: #fff;
	font-size: 1.4em;
	display: inline-block;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: bold;
}



section.main-info {
	padding: 0;
}

section.main-info h1 {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: bold;
	text-align: left;
	font-size: 2.5em;
	color: #fff;
}

section.main-info h2 {
	font-family: 'Roboto Condensed', sans-serif;
	text-align: left;
	font-size: 1.6em;
	margin-top: 5px;
	font-weight: normal;
	color: #ccc;
}

section.main-info img {
	width: 98%;
	margin-left: 2%;
}

section.main-info p {
	margin: 40px 0 20px 0;
	padding: 0;
	text-align: left;
	color: #ff8d44;
}

section.main-info .headers {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

section.main-info .headersInside {
	padding-top: 50px;
	padding-bottom: 50px;
}

section.main-info .headers {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

section.main-info .button-order {
	padding: 16px 28px;
	background: #c83200;
	color: #fff;
	display: inline-block;
	cursor: pointer;
	transition: 0.5s;
}

section.main-info .button-order:hover {
	background: #8b2908;
}

section.main-info .img1 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
}

section.main-info .img2 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
}

section.main-info .phone-big {
	display: inline-block;
	text-align: center;
	margin: 15px auto 50px auto;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-weight: bold;
	/*background: #4CAF50;*/
	background: #b00;
	padding: 16px 40px;
	border-radius: 0;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
}

section.main-info .phone-big > div {
	font-size: 3.5em;
	font-family: 'Roboto Condensed', sans-serif;
}



section.order-top {
	padding: 0 0 20px 0;
}

section.order-top h3 {
	text-transform: none;
	font-weight: normal;
	font-size: 1.2em;
	text-align: center;
	color: #fff;
	margin-bottom: 20px;
}


section.order-top input {
	height: 50px;
	padding: 0;
	line-height: 50px;
	display: block;
	width: 100%;
	border: 0;
	text-transform: none;
}

section.order-top input[type=submit] {
	background: #c83200;
	color: #fff;
	cursor: pointer;
	transition: 0.5s;
}

section.order-top input[type=submit]:hover {
	background: #8b2908;
}

section.order-top .quad {
	display: inline-block;
	padding: 35px 50px 20px 50px;
	border: 1px solid #aaa;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

section.order-top .b-1 {
	color: #ff8d44;
	font-size: 0.8em;
	text-align: center;
}



section.whywe {
	padding: 30px 0;
}

section.whywe h3 {
	font-family: 'Roboto Condensed', sans-serif;
	text-align: center;
	font-size: 2em;
	margin-bottom: 30px;
	font-weight: normal;
	color: #fff;
}

section.whywe .b-3 img {
	display: block;
	max-height: 64px;
	height: 64px;
	margin: 0 auto;
	margin-bottom: 20px;
}

section.whywe .b-3 h4 {
	font-family: 'Roboto Condensed', sans-serif;
	text-align: center;
	font-size: 1.2em;
	margin-bottom: 10px;
	font-weight: normal;
	color: #fff;
}

section.whywe .b-3 p {
	padding: 0 20px;
	text-align: center;
	font-size: 0.85em;
	color: #ff8d44;
}





section.howwework {
	padding: 30px 0 10px 0;
	background: #c83200;
}

section.howwework h3 {
	font-family: 'Roboto Condensed', sans-serif;
	text-align: center;
	font-size: 2em;
	margin-bottom: 30px;
	font-weight: bold;
	color: #111;
}

section.howwework .b-4 img {
	display: block;
	max-height: 64px;
	height: 64px;
	margin: 0 auto;
}

section.howwework .b-4 p {
	margin-top: 20px;
	padding: 0 20px;
	text-align: center;
	font-size: 1em;
	color: #fff;
	font-weight: normal;
}
section.howwework .b-4 {
	overflow: visible;
}

section.howwework .b-4 i {
	position: absolute;
	top: 32px;
	right: -10px;
	color: #ccc;
	font-size: 1em;
	z-index: 100;
}

section.howwework .b-4 a {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}



section.instrument {
	padding: 30px 0;
}

section.instrument h3 {
	font-family: 'Roboto Condensed', sans-serif;
	text-align: center;
	font-size: 2em;
	margin-bottom: 10px;
	font-weight: bold;
	color: #fff;
}

section.instrument .inside-b4 {
	margin: 10px;
	padding: 20px;
	border: 1px solid #aaa;
	text-align: center;
}

section.instrument .inside-b4 h4 {
	font-family: 'Roboto Condensed', sans-serif;
	text-align: center;
	font-size: 1em;
	margin-bottom: 10px;
	font-weight: normal;
	color: #fff;
}

section.instrument .inside-b4 img {
	margin-bottom: 12px;
	display: block;
}

section.instrument .inside-b4 .order-btn {
	background: #c83200;
	color: #fff;
	cursor: pointer;
	transition: 0.5s;
	padding: 10px 18px;
	font-size: 0.85em;
}

section.instrument .inside-b4 p {
	text-align: center;
	font-size: 0.9em;
	padding: 0 0 0 0;
	color: #fff;
	margin: 0 0 10px 0;
}

section.instrument .inside-b4 .order-btn:hover {
	background: #8b2908;
}

section.instrument .question {
	padding: 0 10%;
	color: #fff;
	text-align: center;
	margin-top: 20px;
}






section.specialist {
	padding: 30px 0 0 0;
	background: rgba(255,255,255, 1) url(/images/stroika-bg.jpg) center center / cover;
}
section.specialist .container {
	z-index: 10;
}
section.specialist .spec-overlay {
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}
section.specialist .b-2 {
	padding-bottom: 0;
	padding-top: 0;
}
section.specialist img {
	display: block;
}

section.specialist .spec {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}

section.specialist .spec h3 {
	font-family: 'Roboto Condensed', sans-serif;
	text-align: center;
	font-size: 3em;
	margin-bottom: 30px;
	font-weight: bold;
	color: #213141;
}

section.specialist .spec p {
	text-align: center;
}

section.specialist .spec .phone-spec {
	font-size: 2em;
	font-weight: bold;
	margin-top: 30px;
	text-align: center;
	font-family: 'Roboto Condensed', sans-serif;
	color: #8b2908;
}




section.brands {
	padding: 40px 0;
}

section.brands h3 {
	font-family: 'Roboto Condensed', sans-serif;
	text-align: center;
	font-size: 2em;
	margin-bottom: 30px;
	font-weight: normal;
	color: #fff;
}

section.brands div,
section.brands .bx-wrapper {
	overflow: visible;
}

section.brands .bx-wrapper .bx-pager.bx-default-pager {
	position: absolute;
	bottom: -25px;
}


section.map {
	padding: 30px;
	height: 460px;
}

section.map .contacts {
	position: absolute;
	z-index: 100;
	right: 20px;
	padding: 30px 50px;
	background: rgba(33,49,65,0.75);
	color: #fff;
	font-size: 1.0em;
	text-align: center;
	line-height: 2;
	top: 50%;
	transform: translateY(-50%);
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

section.map .contacts .recall-btn {
	background: #c83200;
	color: #fff;
	cursor: pointer;
	transition: 0.5s;
	padding: 8px 14px;
	font-size: 0.8em;
	margin-top: 15px;
}

section.map .contacts .recall-btn:hover {
	background: #8b2908;
}


footer {
	padding: 20px 0;
	background: #212121;
}

footer .left {
	text-align: left;
	color: #7e7e7e;
	font-size: 0.85em;
}

footer .right {
	text-align: right;
	color: #7e7e7e;
	font-size: 0.85em;
}




div.overlay-catalog {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;
	background: rgba(0,0,0,0.75);
}

div.overlay-catalog .window {
	width: 600px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	background: #fff;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	padding: 20px;
}

div.overlay-catalog .window .b-3 {
	padding: 5px;
}

div.overlay-catalog .window .b-3 input {
	height: 50px;
	line-height: 50px;
	padding: 0 8px;
	width: 100%;
}

div.overlay-catalog .window .b-3 input[type=submit] {
	text-transform: none;
	font-size: 0.8em;
}

div.overlay-catalog .window .close-btn {
	position: absolute;
	width: 30px;
	line-height: 30px;
	height: 30px;
	font-size: 1em;
	text-align: center;
	color: #fff;
	background: #c83200;
	top: 0;
	right: 0;
	cursor: pointer;
	transition: 0.5s;
}

div.overlay-catalog .window .close-btn:hover {
	background: #8b2908;
}

div.overlay-catalog .window .b-1 p {
	text-align: center;
	font-size: 0.8em;
	color: #111;
	margin-top: 0;
	padding-top: 0;
}

div.overlay-catalog .window .call-btn {
	height: 40px;
	line-height: 40px;
	padding: 0 15px;
	display: inline-block;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	background: #c83200;
	color: #fff;
	font-size: 0.8em;
	margin-top: 15px;
	border-radius: 20px;
}