html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
html, body {
	height: 100%;
	display: flex;
	flex-direction: column;
}
body {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 14px;
	line-height: 1.42857143;
	color: #333;
	background-color: #fff;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
input, textarea {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 16px;
	box-sizing: border-box;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a { text-decoration: none; }


.header {
	background: url(../static/header-x1.jpg?v2) no-repeat center center;
	background-size: cover;
	position: relative;
}
.header::after { content: ''; position:absolute; bottom:0; left:0; right:0; height:5px; background: rgba(0,0,0,0.3); }


.header .top-menu { height:40px; background-color: rgba(0,0,0,0.5); color:#fff; display: flex; justify-content: space-between; align-items: center; padding:0 30px; }
.header .top-menu .item { display:inline-block; margin-right: 20px; }
.header .top-menu .item .fas { margin-right: 5px; color:#ddb688; }
.header .top-menu a { color:#fff; }
.header .lang a { color:#fff; font-size:12px; }

.header .inner.home { padding: 170px 0 170px 0; text-align:center; position: relative; }
.header .inner { text-align:center; position: relative; }

.fixed-header { position: relative; width:100%; }
.home .fixed-header { position: absolute; top:0; right:0; }
.fixed-header.fixed { position: fixed; top:0; left:0; z-index: 1000; }
.fixed-header .background { position: absolute; top:0; left:0; width:100%; height:100%; background-color:#211f1d; opacity:1; }
.home .fixed-header .background { opacity:0; }
.fixed-header .wrap { max-width:100%; position: relative; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding:0 30px; }
.fixed-header .logo { display: block; margin-top:5px; }
.home .fixed-header .logo { margin-top:-30px; opacity:0; }
.fixed-header .logo img { height:36px; }
.fixed-header .mobile-wrap { display:none; }
.fixed-header .mobile-menu-panel { display:none; }


.header .menu { white-space: nowrap; text-align: right; padding: 30px 0; position:relative; }
.header .menu li { display: inline-block; margin-right: 20px; }
.header .menu li:last-child { margin-right: 0; }
.header .menu li a { color:#fff; font-size: 16px; text-transform: uppercase; }
.header .menu li a:hover { color:#ddb688; }
.header .menu li.contacts a { background-color: #ba9772; color:#fff; padding: 14px 20px; text-shadow: 0 1px 0 rgba(0,0,0,0.2); }
.header .menu li.contacts a:hover { background-color: #a78662; }
.header .menu li.contacts a:active { background-color: #836648; }

.main-content { flex-grow: 1; }


.wrap { max-width:1000px; margin:0 auto; }

.content {
	padding:50px 0;
}
.center { text-align:center; }

.title-wrap { padding:60px 0 20px; background-color: #f5f5f5; }


h1.title, h2.title {
	font-size: 24px;
	text-transform: uppercase;
	margin-bottom: 30px;
	text-align: center;
	font-weight: bold;
}
h1.title::after, h2.title::after {
	content: '';
	width: 70px;
	height: 1px;
	background-color: #ddb688;
	display: block;
	margin: 20px auto;
}

h1.title { font-size: 36px; }

.content .block { margin-bottom: 70px; }

.content p { font-size: 18px; line-height: 1.5; }
.content .text { font-size: 18px; line-height: 1.5; margin-bottom: 20px; }
.content .about .text { text-align: justify; }

ul.ob {
	font-size:0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-column-gap: 20px;
	grid-row-gap: 30px;
}
ul.ob li:hover { opacity: 0.9; }
ul.ob li img { width:100%; }
ul.ob li span { display: block; text-align: center; margin-top: 10px; font-size:18px; color:#000; }

ul.ob.c3 {
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 50px;
	grid-row-gap: 60px;
}
ul.ob.c3 span { font-size:20px; }

ul.services li {
	margin-bottom:25px;
	font-size:18px;
	padding-left: 30px;
	position: relative;
}
ul.services li i.fas { color:#ddb688; position:absolute; top:6px; left:0; font-size:14px; }



.finish-ornament { margin-bottom: 30px; opacity: 0.3; text-align: center; }
.finish-ornament img { width:30%; max-width: 120px; }


.big-button { display:inline-block; background-color: #ba9772; color:#fff; padding: 18px 25px; text-transform: uppercase; font-size:15px; font-weight: bold; }
.big-button:hover { background-color: #a78662; }
.big-button:active { background-color: #836648; }

.calc-button { width:480px; display:inline-flex; justify-content: center; align-items: center; }
.calc-button i { margin-right: 20px; font-size:40px; }
.calc-button span { text-align: left; }


.footer { background-color: #211f1d; color:#fff; background: url(../static/footer.jpg) no-repeat bottom center; background-size: cover; }
.footer .inner { padding: 50px 0; display: flex; justify-content: space-between; align-items:flex-start; }
.footer .bottom { background-color: rgba(0,0,0,0.4); border-top:1px solid rgba(255,255,255,0.05); padding:20px 0; }
.footer .bottom .wrap { display:flex; justify-content: space-between; align-items: center; width:100%; }
.footer .copy { color:#7e756b; }
.footer .logo img { height:30px; }

.footer h3 { font-size: 18px; text-transform: uppercase; margin-bottom: 20px; font-weight:bold; color:#a0825e; }
.footer .contacts { line-height: 1.5em; }
.footer .contacts .item { margin-bottom: 10px; font-size:16px; }
.footer .contacts .item .fas { margin-right: 5px; color:#a0825e; }

.footer .menu { text-align: left; }
.footer .menu a { display: block; margin-bottom: 10px; color:#fff; font-size: 14px; text-transform: uppercase; }

.footer .contact-form-pad { flex-grow:1; text-align: center; }
.footer .contacts-button {
	display: inline-block;
	width: 300px;
	height: 60px;
	background-color: #ba9772;
	color:#fff;
	text-transform: uppercase;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	line-height: 60px;
	margin-top: 50px;
}
.footer .contacts-button:hover { background-color: #a78662; }
.footer .contacts-button:active { background-color: #836648; }



/*************************************/
/*********** MEDIA QUERIES ***********/
/*************************************/


@media (max-width:1060px) {
	.wrap{ max-width: 800px; }
	ul.ob { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width:860px) {
	.fixed-header .wrap { justify-content: flex-end; }
	.fixed-header .logo { display: none; }
	.wrap{ max-width: 700px; }
}

@media (max-width: 767px){
	.header .top-menu { display: block; padding:0; height:auto; }
	.header .contacts { padding:10px 20px; }
	.header .contacts .item i { display: none; }
	.header .top-menu .lang { display: none; }
	.home .fixed-header { left:0; right:auto; }
	.fixed-header .wrap { display: none; }
	.fixed-header .mobile-wrap { display: flex; justify-content: space-between; align-items: center; padding:0px 20px; position: relative; z-index: 100; }
	.fixed-header .mobile-menu { display:block; background: transparent; border:none; color:#fff; font-size: 24px; padding:10px 0; }

	.fixed-header .logo { display: block; margin-top:5px; }
	.home .fixed-header .logo { margin-top:-30px; opacity:0; }
	.fixed-header .logo img { height:22px; }

	.fixed-header .mobile-menu-panel {
		position: fixed;
		top:0; left:0;
		width:70%;
		height:100vh;
		max-width: 300px;
		min-width: 250px;
		background-color: #0d0a0a;
		padding: 30px 0;
		box-shadow: 0 0 50px rgba(0,0,0,0.8);
	}
	.fixed-header .mobile-menu-panel .menu li { display: block; margin:0; padding: 10px 30px; text-align:left; }
	.fixed-header .mobile-menu-panel .menu li.contacts a { background-color:transparent; padding: 0; text-shadow:none; }
	.fixed-header .mobile-menu-panel .close { position: absolute; top:0; left:0; padding:20px; font-size: 14px; color:#fff; background: transparent; border:none; text-transform: uppercase; opacity:0.7; }
	.fixed-header .mobile-menu-panel .close i.fas { font-size: 20px; vertical-align:-3px; margin-right:6px; }

	.header .inner.home { padding: 100px 0 100px 0; }
	.header .logo-big img { width:80%; }

	.content.wrap { padding:50px 20px; }

	ul.ob { grid-template-columns: repeat(2, 1fr); }
	ul.ob.c3 { grid-template-columns: repeat(1, 1fr); }

	.calc-button { width:100%; }

	.footer .inner { padding:50px 20px; flex-direction: column; }
	.footer .bottom { padding:20px 20px; }
	.footer .bottom .wrap { display:block; text-align: center; }
	.footer .bottom .wrap .logo { margin-bottom: 10px; }
	.footer .contact-form-pad { width:100%; }
}

@media (max-width:400px) {
	ul.ob { grid-template-columns: repeat(1, 1fr); }
	ul.ob.c3 { grid-template-columns: repeat(1, 1fr); }
}