body {
	padding: 0;
	margin: 0;
	font-family: 'Veranda', sans-serif;
	background: #494949 url('../img/fone12.png') no-repeat center top/cover;
	background-attachment: fixed;
}

.container {
 	width: 1140px;
 	margin: 0 auto;
}

.logo{
	margin-top: 15px;
	width: 125px;
	height: 60px;
	margin-right: 50px;
}
/*1 блок*/
nav{
	float: right;
	margin-top: 35px;
}

.menu{
	background: #0000;
	padding: 0;
	margin: 0;
	display: block;
}

p{
	padding: 0;
	margin: 0;
	font-weight: bold;
}

.menu li{
	float: left;
	display: block;
	margin-right: 37px;
}

.menu li a{
	color: #ffffff;
	text-decoration: none;
	font-size: 15px;
	font-weight: 300;
	/*text-transform: capitalize;*/
	/*letter-spacing: 0.3em;*/
}
.ukr{
	width: 30px;
}
.contact{
	margin-top: 35px;
	margin-left: 50px;
	text-align: right;
	font-size: 15px;
	letter-spacing: 0.1em;
	color: rgb(255, 255, 255);
}

.utp{
	display: flex;
	/*justify-content: space-between;*/
	margin-top: 50px;
}

.utp_oll{
	margin-left: 50px;
	background: rgba(0, 0, 0, .45);
	border-radius: 35px;
	padding: 50px;
	width: 950px;
	/*margin-top: 50px;*/
	/*margin-bottom: 100px;
	margin-right: 100px;*/
}
.heading{
	display: flex;
	padding-top: 30px;
}

h1{
	color: #FFFFFF;
	font-size: 55px;
	text-align: center;
	font-weight: 500;
	letter-spacing: 0.0em;
	margin-top: auto;
	text-transform: uppercase;
}

h2{
	/*width: 800px;*/
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
	color: #FFFFFF;
	text-align: center;
}

.button{
	background: #FFCA43;
	width: 310px;
	color: #000000;
	text-decoration: none;
	display: block;
	padding: 15px;
	margin: 0 auto;
	text-align: center;
	/*margin-left: 0px;*/
	font-size: 18px;
	margin-top: 20px;
	margin-bottom: 20px;
	text-transform: uppercase;
	border-radius: 15px;
	font-weight: 300;
	box-shadow: 4px -4px 8px 0px #5d5d5d;
	border: 2px solid #FFCA43;
	box-sizing: border-box;
}

.more{
	font-size: 14px;
	font-weight: 100;
	letter-spacing: 0.4em;
	color: #FFFFFF;
	/*margin-bottom: 10px;*/
}

.moreworks{
	display: flex;
}
.morework{
	font-size: 14px;
	font-weight: 100;
	letter-spacing: 1.23em;
	color: #000000;
	margin-bottom: 50px;
	writing-mode: vertical-lr;
	text-orientation: mixed;
}

.more a{
	text-decoration: none;
	color: #FFFFFF;
}
.social a{
	width: 30px;
	height: 30px;
	display: flex;
	margin-top: 30px;
	margin-right: 30px;
	margin-bottom: 70px;
	margin-left: 0px;
	text-decoration: none;

}
.social{
	padding-bottom: 50px;
}
/*2 блок*/

.skills{
	display: flex;
	justify-content: space-between;
	margin-top: 70px;
}

.skills h1{
	font-size: 40px;
}

.about{
	margin-bottom: 70px;
	background: rgba(0, 0, 0, .45);
	border-radius: 35px;
	padding: 30px;
	width: 100%;
	height: fit-content;
}

.skill img{
	width: 30px;
	height: 30px;
}

.skill{
	display: flex;
	background: rgba(255, 255, 255, 0.8);
	width: 500px;
	border-radius: 25px;
	margin-left: 50px;
	margin-bottom: 20px;
	padding: 15px 15px;
	font-size: 15px;
	font-weight: 100;
}


/*Проєктування*/

.designe-oll{
	display: flex;
	background: rgba(30, 30, 30, 1.0);
	border-radius: 30px;
	margin-bottom: 70px;
	padding-top: 30px;
	padding-bottom: 30px;
}

.designe h1{
	font-size: 40px;
	
}

.designe {
	padding: 50px;
	width: 650px;
	height: fit-content;
	
}

.designe h2{
	text-align: justify;
	font-weight: 100;
}

.designe-skills{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	border-radius: 30px;
}

.designe-skill{
	display: block;
	width: 180px;
	margin: 15px;
	justify-content: center;
}

.designe-skill img{
	width: 180px;
/*	height: 180px;*/
	border-radius: 30px;
	box-shadow: 10px -10px 10px 0px #000000;
}

.designe-skill .skill-txt{
	color: #ffffff;
	padding: 15px;
	font-weight: 100;
	font-size: 16px;
	text-align: center;
}



/*Будівельні послуги*/

.bild-inf h1{
	font-size: 40px;
	padding-top: 25px;
}

.bild-inf{
	border-radius: 30px;
}

.bild{
	display: flex;
	justify-content: space-between;
	background: rgba(30, 30, 30, 1.0);
	border-radius: 30px;
	margin-bottom: 70px;
	padding-bottom: 50px;
}

.bilds{
	margin-top: auto;
	border-radius: 30px;
}

.bilds h2{
	font-size: 22px;
}

.bild-inf h2{
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 30px;
	text-align: justify;
	width: auto;
	font-weight: 100;
}

.bilds-center{
	display: flex;
	flex-direction: column;
}

.repairs{
	margin-top: auto;
	border-radius: 30px;
}

.repairs h2{
	font-size: 22px;
}

.bilds div{
	background: white;
	border-left: 5px solid #ffca43;
	border-radius: 5px;
	padding: 15px;
	margin: 15px;
	width: 250px;
	text-align: center;
	font-size: 15px;
	font-weight: 100;
}

.repairs div{
	background: white;
	border-left: 5px solid #ffca43;
	border-radius: 5px;
	padding: 15px;
	margin: 15px;
	width: 250px;
	text-align: center;
	font-size: 15px;
	font-weight: 100;
}

.bild img{
	width: 100%;
	border-radius: 30px;
}

/*Модульні будиночки*/

.modul{
	background: rgba(30, 30, 30, 0.95);
	border-radius: 30px;
	margin-bottom: 70px;
	display: none;
}

.modul h1{
	font-size: 40px;
	padding-top: 25px;
}

.modul img{
	width: 500px;
	height: fit-content;
	border-radius: 30px;
	margin: 25px;
}

.modul h2{
	font-size: 18px;
	padding-left: 30px;
	padding-right: 30px;
	text-align: justify;
	font-weight: 100;
}

.modul-s1 {
	display: flex;
}

.modul-s2 {
	display: flex;
}

/*Декоративне оздоблювання*/

.decor{
	background: rgba(30, 30, 30, 0.95);
	border-radius: 30px;
	margin-bottom: 70px;
	padding-bottom: 30px;
}

.decor h1{
	font-size: 40px;
	padding-top: 25px;
	padding-bottom: 25px;
	color: white;
}

.decor-inf{
	margin: 30px;
	font-size: 18px;
	font-weight: 100;
	color: white;
	text-align: justify;
	line-height: 30px;
}
.decor-title1{
	background: url('../img/dec1.png');
	font-size: 25px;
	padding: 10px;
	color: white;
	width: 250px;
	height: 150px;
	border-radius: 20px;
	text-align: center;
}

.decor-title1:hover{
	scale: 1.3;
}

.decor-title2{
	background: url('../img/dec2.png');
	font-size: 25px;
	padding: 10px;
	color: white;
	width: 250px;
	height: 150px;
	border-radius: 20px;
	text-align: center;
}

.decor-title2:hover{
	scale: 1.3;
}

.decor-title3{
	background: url('../img/dec3.png');
	font-size: 25px;
	padding: 10px;
	color: white;
	width: 250px;
	height: 150px;
	border-radius: 20px;
	text-align: center;
}

.decor-title3:hover{
	scale: 1.3;
}

.decor-title4{
	background: url('../img/dec4.png');
	font-size: 25px;
	padding: 10px;
	color: white;
	width: 250px;
	height: 150px;
	border-radius: 20px;
	text-align: center;
}

.decor-title4:hover{
	scale: 1.3;
}

.decor-title5{
	background: url('../img/dec5.png');
	font-size: 25px;
	padding: 10px;
	color: white;
	width: 250px;
	height: 150px;
	border-radius: 20px;
	text-align: center;
}

.decor-title5:hover{
	scale: 1.3;
}

.decor-title6{
	background: url('../img/dec6.png');
	font-size: 25px;
	padding: 10px;
	color: white;
	width: 250px;
	height: 150px;
	border-radius: 20px;
	text-align: center;
}

.decor-title6:hover{
	scale: 1.3;
}

.decor-title7{
	background: url('../img/dec7.png');
	font-size: 25px;
	padding: 10px;
	color: white;
	width: 250px;
	height: 150px;
	border-radius: 20px;
	text-align: center;
}

.decor-title7:hover{
	scale: 1.3;
}

.decor-title8{
	background: url('../img/dec8.png');
	font-size: 25px;
	padding: 10px;
	color: white;
	width: 250px;
	height: 150px;
	border-radius: 20px;
	text-align: center;
}

.decor-title8:hover{
	scale: 1.3;
}

.decor-title9{
	background: url('../img/dec9.png');
	font-size: 25px;
	padding: 10px;
	color: white;
	width: 250px;
	height: 150px;
	border-radius: 20px;
	text-align: center;
}

.decor-title9:hover{
	scale: 1.3;
}

.decor-title10{
	background: url('../img/dec10.png');
	font-size: 25px;
	padding: 10px;
	color: white;
	width: 250px;
	height: 150px;
	border-radius: 20px;
	text-align: center;
}

.decor-title10:hover{
	scale: 1.3;
}

.decor-title23{
	background: url('../img/dec23.png');
	font-size: 25px;
	padding: 10px;
	color: white;
	width: 250px;
	height: 150px;
	border-radius: 20px;
	text-align: center;
}

.decor-title23:hover{
	scale: 1.3;
}

.decor-title24{
	background: url('../img/dec24.png');
	font-size: 25px;
	padding: 10px;
	color: white;
	width: 250px;
	height: 150px;
	border-radius: 20px;
	text-align: center;
}

.decor-title24:hover{
	scale: 1.3;
}

.decor-var1{
	width: min-content;
	font-weight: 100;
	margin: 30px;
}

.decor-var2{
	width: min-content;
	font-weight: 100;
	margin: 30px;
}

.decor-var3{
	width: min-content;
	font-weight: 100;
	margin: 30px;
}

.decor-var4{
	width: min-content;
	font-weight: 100;
	margin: 30px;
}

.decor-var5{
	width: min-content;
	font-weight: 100;
	margin: 30px;
}

.decor-var6{
	width: min-content;
	font-weight: 100;
	margin: 30px;
}

.decor-var7{
	width: min-content;
	font-weight: 100;
	margin: 30px;
}

.decor-var8{
	width: min-content;
	font-weight: 100;
	margin: 30px;
}

.decor-var9{
	width: min-content;
	font-weight: 100;
	margin: 30px;
}

.decor-var10{
	width: min-content;
	font-weight: 100;
	margin: 30px;
}

.decor-var23{
	width: min-content;
	font-weight: 100;
	margin: 30px;
}

.decor-var24{
	width: min-content;
	font-weight: 100;
	margin: 30px;
}

.decor-var{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 25px;
}

.decor-var img{
	width: 270px;
	border-radius: 20px;
	margin-top: 30px;
}

.decor-var11{
	margin: 30px;
}

.decor-var12{
	margin: 30px;
}

.decor-var13{
	margin: 30px;
}

.decor-var14{
	margin: 30px;
}

.decor-var15{
	margin: 30px;
}

.decor-var16{
	margin: 30px;
}

.decor-var17{
	margin: 30px;
}

.decor-var18{
	margin: 30px;
}

.decor-var19{
	margin: 30px;
}

.decor-var20{
	margin: 30px;
}

.decor-var21{
	margin: 30px;
}

.decor-var22{
	margin: 30px;
}

.decor-var img:hover{
	scale: 1.3;
}

.decor-var h2{
	font-weight: 100;
	text-align: center;
	width: 250px;
}

/*підвал*/

.footer h1{
	font-size: 35px;
	padding-top: 25px;
	text-align: left;
	font-weight: 400;
	margin-left: 25px;
}

.contacts-oll{
	display: flex;
	justify-content: space-between;
}

.position{
	font-size: 18px;
	color: #fff;
	font-weight: 100;
	line-height: 40px;
}

.contacts-oll .social{
	display: flex;
}
.contacts-oll .social a{
	background: radial-gradient(white, #272525);
	margin-right: 60px;
	margin-bottom: 10px;
}

.contacts{
	display: flex;
}

.maps{
	margin-left: 50px;
}

.footer{
	background: #272525;
}

.by{
	color: rgb(150, 150, 150);
	font-size: 14px;
	font-weight: 100;
	text-align: center;
	padding: 15px;
}


@media screen and (max-width: 1200px) {
	body{
		background-size: cover;
	}
	.wripper{
		width: auto;
	}
	.container{
		width: 960px;
	}
	.heading{
		margin: auto;
		justify-content: center;
	}
	.work img{
		height: 400px;
	}
	.logo{
		margin: 15px;
	}
	.menu li{
	margin-right: 25px;
	}

	.contact{
	margin-left: 30px;
	}

	h1{
		text-align: center;
		margin: auto;
	}
	h2{
		text-align: justify;
		margin: auto;
	}

	.utp_oll{
		margin-left: 30px;
	}

	.button-wripper{
		margin-top: 40px;
		margin-bottom: 40px;
	}

	.button{
		margin: auto;
	}

	.more{
		text-align: center;
		margin: auto;
		margin-bottom: 25px;
	}

	.social{
		margin: 0;
	}

	.social a{
		margin-left: 20px;
	}

	.section-header{
		text-align: center;
		margin: auto;
	}

	.skills{
		display: block;
	}

	.about{
		font-size: 20px;
		width: auto;
	}

	.designe-oll{
		display: block;
	}

	.designe{
		width: auto;
	}

	.designe-skills{
		justify-content: center;
	}

	.skill-block-2{
		width: auto;
	}

	.skill{
		width: auto;
		margin-right: 50px;
	}

	.skill img{
		width: auto;
	}

	.decor-var{
		justify-content: center;
	}

	.contacts{
		margin: auto;
		justify-content: center;
	}

	/*.maps{
	margin-left: 50px;
	}*/

	.contacts-oll{
		margin-left: 80px;
	}

	.contacts-oll .social a{
		margin-right: auto;
	}

	.footer h1{
		text-align: center;
		margin-left: 0px;
		margin-bottom: 25px;
	}

	iframe{
		width: auto;
	}


@media screen and (max-width: 992px) {
	.container{
		width: 720px;
	}

	/*header{
		background-size: auto;
	}*/

	.heading{
		flex-direction: column;
	}

	.menu {
	    margin: 0 auto;
	    display: flex;
	    justify-content: center;
	    margin-left: 25px;
	}   

	.logo{
		margin: auto;
	}

	.contact{
		margin: 0 auto;
	    font-size: 20px;
	    color: white;
	    justify-content: center;
	}

	.navigator{
		margin-bottom: 15px;
	}

	.utp{
		margin-top: 20px;
	}

	.work img{
		height: 300px;
	}
		
	.skill-oll{
		display: block;
	}

	.skill-block-2{
		display: block;
		justify-content: center;
	}

	.designe-oll{
		display: block;
	}

	.designe-skills{
		justify-content: center;
	}

	.about{
		width: auto;
	}

	.bild{
		display: block;
	}

	.bilds{
		padding-top: 30px;
	}

	.bilds div{
		width: auto;
	}

	.repairs div{
		width: auto;
	}

	.modul-s1{
		display: block;
		margin-bottom: 40px;
	}

	.modul-s2{
		display: block;
	}

	.modul img{
		width: -webkit-fill-available;
	}

	.decor-var{
		justify-content: center;
	}

	.contacts-oll{
		display: block;
		margin-left: 0px;
	}

	.footer h1{
		text-align: center;
		margin-left: 0px;
		margin-bottom: 25px;
	}

	.position{
		text-align: center;
	}

	.contacts-oll .social{
		justify-content: center;
	}

	.maps{
		margin-left: 0px;
	}

	.cart{
		width: 350px;
	}

	iframe{
		width: 100%;
	}
	
}

@media screen and (max-width: 768px) {
	.container{
		width: 540px;
	}
	.menu li a{
		font-size: 14px;
		letter-spacing: normal;
	}

	.utp{
		display: block;
	}

	.moreworks{
		display: block;
	}

	.morework{
		writing-mode: unset;
		text-align: center;
	}

	.social{
		display: flex;
		padding: 0;
		justify-content: center;
	}

	.social a{
		margin: 20px;
		margin-top: 0px;
	}

	.utp_oll{
		width: auto;
		margin-left: 0px;
	}

	h1{
		font-size: 55px;
		width: auto;
	}

	h2{
		width: auto;
	}

	.more{
		letter-spacing: 0.2em;
	}

	.item{
		width: 300px;
	}
	
	.contacts {
    display: block;
	}

	.maps{
		width: 300px;
		margin: 0 auto;
		text-align: center;
	}

	.contacts-oll {
    margin-left: 15px;
    text-align: center;
	}

	iframe{
		width: auto;
	}
}

@media screen and (max-width: 576px) {
	.container{
		width: auto;
	}
	.menu{
		display: block;
	}
	.menu li{
		float: none;
		text-align: center;
		color: white;
	}

	.navigator{
		display: none;
	}

	.contact{
		padding: 20px;
	}

	.morework{
		margin-bottom: 30px;
	}
	.utp {
    	margin-top: 30px;
	}

	.utp_oll{
		padding: 15px;
	}

	.utp_oll h1{
		font-size: 40px;
		line-height: 1.5em;
	}

	.utp_oll h2{
		display: none;
	}

	h1{
		font-size: 30px;
		width: auto;
		margin-bottom: 15px;
		text-transform: uppercase;
	}

	h2{
		font-size: 16px;
		width: auto;
		line-height: 1.5em;
	}

	.button{
		width: fit-content;
		font-size: 18px;
	}

	.more{
		letter-spacing: 0.1em;
	}

	.skills{
		margin-top: 30px;
	}
	
	iframe{
		width: auto;
	}
	
	.skill-block-2{
		display: block;
	}

	.skill{
		padding: 15px;
		width: auto;
		font-size: 14px;
	}

	.about{
		padding: 15px;
		font-size: 14px;
		margin-bottom: 30px;
	}

	.about h1{
		font-size: 30px;
	}

	.designe{
		padding: 15px;
	}

	.designe h1{
		font-size: 30px;
	}

	.bild-inf h1{
		font-size: 30px;
	}

	.modul h1{
		font-size: 30px;
	}

	.decor h1{
		font-size: 30px;
		margin: 0px;
	}

	.modul h2{
		font-size: 16px;
	}

	.decor-inf{
		font-size: 16px;
		margin: 0px;
		padding: 15px;
	}

	.decor-var{
		margin: 0px;
	}

	.footer h1{
		font-size: 30px;
	}

	.contacts-oll{
		margin: 0px;
	}

	.position{
		font-size: 16px;
		line-height: 30px;
	}

	.social{
		margin-top: 10px;
	}

}