html {
  	scroll-behavior: smooth;
}
html, * {
	box-sizing: border-box;
}


:root {
  	--main-bg-color: #0d0d0d;
  	--main-txt-color: #b7ab98;
  	--second-txt-color: #eb5939; /*#E73C37*/
}

body {
	font-family: 'Roboto', sans-serif;
	background: #fff; /*#F0EAD6*/
	/*font-size: 16px;*/
	font-size: calc(11px + 0.35vw);
	height: 200vh;
}

a {
	text-decoration: none;
}



.container {
	width: 100%;
	padding: 0 2em;
}

.btn {
	padding: 1em 1.5em;
	text-align: center;
	background: #0071F0;
	color: #fff;
	border-radius: 5px;
	font-weight: 400;
	display: inline-block;
	transition: background-color 0.4s;
}
.blue_btn {
	background-color: #0071F0;
}
.blue_btn:hover {
	background-color: #2A8DFF;
}


.header {
	position: fixed;
	background: #fff;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75em 2em;
	border-bottom: 1px solid #D7DADA;
	z-index: 10;
	top: 0;
}
.header_info_block {
	display: flex;
	align-items: center;
}
.header_contacts_href {
	display: inline-block;
	width: inherit;
	/*padding: 1em 2em 0.5em 2em;*/
}
.header_contacts_period {
	display: block;
	margin-top: 10px;
	font-size: 12px;
	font-weight: bold;
}

.header_nav {
	margin: 0 2em;
}
.header_nav_href {
	padding: 0.5em 0.5em;
}
#logo_img {
	height: 2.5em;
}








.main_banner_area {
	/*padding-top: 20px;*/
	margin-top: 40px;
	width: 100%;
	background-image: url(images/banner_photo.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 90vh;

	display: flex;
	justify-content: space-between;
	align-items: center;
}





.form_wrapper {
	width: 420px;
}
.ui-form {
   /*max-width: 550px;*/
   /*width: 400px;*/
   width: 100%;
   padding: 2em 2em;
   background: white;
}
.ui-form h3 {
   text-align: center;
   color: #000;
   font-size: 2em;
   margin-bottom: 2em;
   font-weight: bold;
}
.form-row {
   position: relative;
   margin-bottom: 40px;
}
.row-input {
   display: block;
   width: 100%;
   padding: 0 10px;
   line-height: 40px;
   font-family: 'Roboto', sans-serif;
   background: none;
   border-width: 0;
   border-bottom: 2px solid #4a90e2;
   transition: all 0.2s ease;
}
.row-label {
   position: absolute;
   left: 13px;
   color: #9d959d;
   font-size: 20px;
   font-weight: 300;
   transform: translateY(-35px);
   transition: all 0.2s ease;
}
.row-input:focus {
   outline: 0;
   border-color: #F77A52;
}
.row-input:focus+.row-label, .row-input:valid+.row-label {
   transform: translateY(-60px);
   margin-left: -14px;
   font-size: 14px;
   font-weight: 400;
   outline: 0;
   border-color: #F77A52;
   color: #F77A52;
}
/*.ui-form input[type="submit"] {
   width: 100%;
   padding: 0;
   line-height: 42px;
   background: #4a90e2;
   border-width: 0;
   color: white;
   font-size: 20px;
}
.ui-form p {
   margin: 0;
   padding-top: 10px;
}*/
.form_btn {
	border-width: 0;
	font-size: 1em;
}
.form-check-label {
	color: #5d7079;
	display: inline-block;
	margin-top: 0.35em;
	font-size: 0.8em;
}
.form-check-input {
    width: 1.25em;
    height: 1.25em;

    /*margin-top: .25em;*/
    vertical-align: top;
}




.main_banner_form_block, .main_banner_text_block {
	/*width: 50%;*/
}
.main_banner_form_block {
	/*width: 420px;*/
	display: flex;
	justify-content: center;
}
.form_wrapper {
	border: 1px solid #fff;
	border-radius: 4px;
	background: #E6E3E1;
	padding: 1em 0.5em;
}
.form_title {
	font-size: 1.5em;
	font-weight: bold;
}
.form_group {
	background: #fff;
	padding: 0.5em;
	margin-bottom: 1em;
	border-radius: 5px;
}
#main_form {
	/*border: 1px solid #fff;
	border-radius: 4px;
	background: #E6E3E1;*/
}


/*h1*/
.main_title {
	font-size: 4em;
	font-weight: bold;
	color: white;
	max-width: 700px;
}
.banner_btn {
	display: inline-block;
	margin-top: 1em;
}






.boilers_area {
	margin-top: 5em;
}
.boilers_area_title {
	text-align: center;
	font-size: 2em;
	font-weight: bold;
	/*color: #0071F0;*/
	margin-bottom: 2em;
}
.boilers_area_field {
	display: flex;
	justify-content: center;
}
.boilers_block {
	/*-webkit-box-shadow: 0px 4px 10px 2px rgba(76,  76,  76, 0.3);
	-moz-box-shadow: 0px 4px 10px 2px rgba(76,  76,  76, 0.3);
	box-shadow: 0px 4px 10px 2px rgba(76,  76,  76, 0.3);*/
	border: 1px solid #0071F0;
	border-radius: 5px;
	/*padding: 2em 1em 1em 1em;*/
	padding: 2em;
	margin: 0 1em;

	/*width: 45%;*/
	width: 50%;
	/*display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;*/
	display: flex;
}
.boilers_text_block {
	position: relative;
	width: 50%;
}
.boilers_text_block a {
	position:absolute;
	bottom:0;
}
.boilers_subtitle {
	color: #0071F0;
	margin-bottom: 0.5em;
}
.boilers_title {
	font-weight: bold;
	font-size: 2em;
}
.boilers_decription {
	color: #5d7079;
	margin-bottom: 6em;
}
.boilers_photo_block {
	/*height: calc(15vw);*/
	/*width: 80%;*/
	max-width: 400px;
	width: 50%;
}
.boilers_img {
	display: block;
	/*height: 50vh;*/
	/*margin-bottom: 2em;*/
	/*width: 100%;*/
	width: 100%;
}

/*.boilers_parametrs:before {
    content: ""!important;
    display: block;
    position: absolute;
    bottom: -12px;
    left: 0px;
    width: 12px;
    height: 6px;
    border-right: 2px solid black;
    border-top: 2px solid black;
    transform: rotate(135deg);
}*/


.boilers_parametrs {
	margin: 1em 0;
}





.grafic_of_area {
	margin-top: 5em;
}

.grafic_off_block {
	background: blue;
	color: #fff;
	border-radius: 10px;
	height: 60vh;
}




.uslugi_area {
	margin-top: 8em;
}
.uslugi_field {
	display: flex;
}
.uslugi_title {
	font-size: 2em;
	font-weight: bold;
}
.uslugi_text_block {
	width: 50%;
}
.uslugi_decription_block {
	color: #5d7079;
	line-height: 1.8;
	max-width: 500px;
	margin-top: 2em;
}
.uslugi_photo_block {
	width: 50%;
	display: flex;
}
.uslugi_photo_block_left {
	width: 55%;
	height: 62vh;
	background-image: url(images/uslugi_photo_01.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 5px;
}
.uslugi_photo_block_right {
	width: 45%;
	margin-left: 1em;
}
.first_right_photo_block {
	width: 100%;
	height: 30vh;
	background-image: url(images/uslugi_photo_04.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 5px;
	margin-bottom: 1em;
}
.second_right_photo_block {
	width: 100%;
	height: 30vh;
	background-image: url(images/uslugi_photo_05.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 5px;
}
.uslugi_img {
	width: 100%;
	border-radius: 5px;
}



.questions_area {
	margin-top: 8em;
	width: 100%;
	background: #0071F0;
	padding: 5em 1em;
	text-align: center;
	color: #fff;
	position: relative;
	overflow: hidden;
}
.overview-shape {
    position: absolute;
    left: -150px;
    /*top: -220px;*/
    /*z-index: -1;*/
    /*opacity: 25%;*/
    top: -200px;
    opacity: 0.5;
    -webkit-animation: moveleftbounce 5s linear infinite;
    animation: moveleftbounce 5s linear infinite;
}

.questions_title {
	font-size: 2em;
	font-weight: bold;
}
.questions_subtitle {
	margin: 1.5em 0;
}

.questions_href {
	background: #0FC9BB;
	position: relative;
	z-index: 9;
}
.questions_href:hover {
	background: #0FB4BB;
}




.footer_area {
	margin-top: 6em;
	padding-bottom: 6em;
}
.footer_field {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 1000px;
	margin: 0 auto;
}
.footer_info {
	color: #5d7079;
}
.footer_title {
	font-weight: bold;
	font-size: 1.5em;
	color: #000;
	position: relative;
	margin-bottom: 1em;
}
.footer_title:before {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    background-color: blue;
    width: 50px;
    height: 2px;
}
.footer_block {
	/*text-align: center;*/
	/*width: 33%;*/
	line-height: 1.8;
	margin: 2em;
}
.footer_info span {
	font-weight: bold;
}
.footer_contacts_link {
	display: block;
	color: #000;
	line-height: 1.5;
}
.footer_contacts_link:hover {
	color: blue;
}
.footer_social_link {
	padding: 0.5em;
}
.footer_social_networks_img {
	width: 2em;
}
.footer_contacts_icon {
	height: 0.8em;
	/*padding-top: 0.35em;*/
}

.success_form {
	color: #50C878;
}






    /*1060px*/


/* Media-запросы */
@media screen and (max-width: 1060px) {
	.main_title {
		font-size: 3.5em;
	}
	.form_wrapper {
		max-width: 320px;
	}
	.ui-form {
		padding: 1.5em 1em;
	}
	.boilers_area_field {
		flex-wrap: wrap;
	}
	.boilers_block {
		width: 100%;
		margin-bottom: 2em;
	}
	.ui-form h3 {
		margin-bottom: 1em;
	}
	.uslugi_field {
		flex-wrap: wrap;
	} 
	.uslugi_text_block {
		width: 100%;
	}
	.uslugi_photo_block {
		width: 80%;
		margin: 2em auto 0 auto;
	}

}


@media screen and (max-width: 860px) {
	.main_banner_area {
		flex-wrap: wrap;
		justify-content: center;
	}
	.main_banner_text_block {
		margin-top: 10em;
		width: 100%;
	}
	.main_banner_form_block {
		margin-top: 3em;
		width: 100%;
	}
	.form-check-label {
		margin-top: 0.25em;
		font-size: 1em;
	}
	.form_wrapper {
		max-width: 400px;
		margin-bottom: 2em;
	}

}

@media screen and (max-width: 620px) {
	.boilers_text_block, .boilers_photo_block {
		width: 100%;
	}
	.boilers_block {
		flex-wrap: wrap;
    	flex-direction: column-reverse;
	}
	.boilers_photo_block {
		margin-bottom: 2em;
	}
	.container {
		padding: 0 1em;
	}
	.header {
		padding: 0.75em 1em;
	}
	.header_nav {
		display: none;
	}
	.btn {
		font-size: 1.2em;
	}
	.header_contacts_href {
		font-size: 1em;
	}
	.footer_contacts_link {
		font-size: 1.4em;
	}
	.uslugi_decription_block {
		font-size: 1.2em;
	}
	.uslugi_photo_block {
		width: 100%;
	}
}


@media screen and (max-width: 470px) {
	.main_title {
		font-size: 2.75em;
	}
	#logo_img {
		height: 2.2em;
	}
	.uslugi_photo_block_left {
		height: 32vh;
	}
	.first_right_photo_block {
		height: 15vh;
	}
	.second_right_photo_block {
		height: 15vh;
	}
}


