/*******************************************
 *** Адаптивные стили ADAPTIVE.CSS
 *** Собственность компании WEBBERRIES
 *** https://webberries.ru (C) 2005-2025
 *** Для вопросов: webberries@yandex.ru
 *** Дата обновления: 30.01.2025
 *** Версия файла: V4.10 
 *******************************************/




/*
@media screen and (min-width: 1900px) {
	section, header, footer, nav { 
		min-width: 1880px; 
	}

	div.con { 
		width: 1840px; 
	}
}

@media screen and (min-width: 1600px) and (max-width: 1899px) {
	section, header, footer, nav { 
		min-width: 1560px; 
	}

	div.con { 
		width: 1520px; 
	}
}
*/

:root {
	--color-main: #283238;
	--green: #00897b;
	--greenhover: #01554c;
	--yellow: #ffcc33;
	--yellowlight: #fee18b;
}

@media screen and (max-width: 800px) {
 	
	nav {
		height: 80px;
		padding: 0 15px;
	}

	nav .con .logo {
		width: 180px;
		height: 66px;
		background: url(/sys/images/main/logo-3.png) left center / contain no-repeat;
	}

	nav .con .address,
	nav .con .contacts, 
	nav .con .menu-btn {
		display: none;
	}

	.hamburger {
		display: block;
		font-size: 2.5em;
	}

	.imgbannermobile {
		display: block;
		background: url(/sys/images/banners/banner-beton-2025-1.jpg) top center / contain no-repeat;
		margin: 15px 0;
		overflow: hidden;
		position: relative;
	}

	.imgbannermobile:before {
		content: "";
		float: left;
		padding-top: 107.14%;
	}


	header .con .imgbanner {
		display: none;
	}

	header {
		padding: 50px 15px;
		margin-top: 80px;
	}

	header .con > div {
		width: 100%;
	}

	header .con > div h1 {
		color: #fff;
		font-size: 1.75em;
		line-height: 1;
		margin-bottom: 50px;
	}

	header .con > div .p-line {
		padding: 15px 0 15px 25px;
		border-left: 5px solid var(--yellow);
		position: relative;
		left: 2px;
		width: 100%;
		margin-bottom: 50px;
	}

	header .con > div h1 span:nth-child(1) {
		font-size: 2.5em;
	}

	.mobile-menu {
		padding: 100px 15px 25px 15px;
		position: fixed;
		z-index: 2000;
		background: #fff;
		inset: 0;
		overflow-y: auto;
	}

	.mobile-menu .close {
		position: absolute;
		top: 15px;
		right: 15px;
		font-size: 2.5em;
		color: #e53935;
	}

	.mobile-menu .menu-btn {
		text-align: center;
		padding: 10px 0;
		font-size: 1.25em;
	}

	.mobile-menu .contacts {
		margin-top: 25px;
	}

	.mobile-menu .contacts span {
		display: block;
		font-size: 1.5em;
		font-weight: 700;
		text-align: center;
	}

	.mobile-menu .address {
		margin-top: 50px;
	}

	.mobile-menu .address span {
		display: block;
		font-size: 1em;
		font-weight: 400;
		text-align: center;
	}

	.mobile-menu .address span i {
		color: var(--yellow);
	}

	header.sheben .con > div h1 span:nth-child(1),
	header.arenda .con > div h1 span:nth-child(1) {
		margin-bottom: 10px;
		display: block;
	}

	header .con > div small {
		font-size: 0.8em;
		display: block;
		text-align: center;
	}

	div.form {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	div.form div:nth-child(1),
	div.form div:nth-child(2) {
		width: 100%;
		margin-bottom: 10px;
		height: 50px;
	}

	header .con > div .form-intro {
		font-size: 1.25em;
	}

	div.form div.go-btn {
		width: 160px;
	}


	section {
		padding: 50px 15px;
	}

	h2 {
		padding: 5px 0 5px 15px;
		border-left: 5px solid var(--yellow);
		margin-bottom: 25px;
		color: var(--color-main);
		font-size: 2.0em;
		font-weight: 700;
	}

	h3 {
		font-size: 1.5em;
		font-weight: 700;
	}


	section .table > div > span {
		width: 33.333%;
		color: #fff;
		display: block;
		padding: 10px 5px;
		font-size: 1em;
	}

	section.makeanorder .left h2 {
		font-size: 2em;
	}

	section.makeanorder .left {
		width: 100%;
		padding: 25px;
	}

	section.makeanorder .left h3 {
		font-size: 1.0em;
	}

	section.makeanorder .left .phones span {
		font-size: 1.5em;
		margin-bottom: 5px;
		display: block;
		width: 100%;
	}

	section.makeanorder .left .form {
		flex-wrap: wrap;
		width: 100%;
	}

	section.makeanorder .left .form > div.go-btn {
		width: 160px;
	}

	section.makeanorder .left small {
		font-size: 0.8em;
	}


	section.question .que-con {
		flex-wrap: wrap;
	}

	section.question .left {
		width: 100%;
		margin-bottom: 25px;
	}

	section.question .right {
		width: 100%;
		margin-left: unset;
		padding: 25px;
	}

	section.question .right .form {
		width: 100%;
	}

	section.question .right h3 {
		margin-bottom: 25px;
	}

	section.question .right .form > div.go-btn {
		width: 160px;
		margin-top: 10px;
	}


	section.contacts {
		padding: 0;
		height: unset;
		background: url(/sys/images/main/car-beton-2.jpg) center center / cover;
		margin-bottom: 50px;
	}

	section.contacts .left {
		width: 100%;
		height: 300px;
		overflow: hidden;
	}

	section.contacts .right {
		position: relative;
		background: rgba(0, 0, 0, .70);
		left: unset;
		top: unset;
		bottom: unset;
		right: unset;
		width: 100%;
		backdrop-filter: blur(5px);
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		align-content: center;
		padding: 25px;
	}

	section.contacts .right > div h3 {
		font-size: 2em;
	}


	section.contacts .right > div:nth-child(5),
	section.contacts .right > div:nth-child(6),
	section.contacts .right > div:nth-child(7) {
		font-size: 1.25em;
	}

	footer .con {
		flex-wrap: wrap;
	}

	footer .con > div {
		color: #777;	
		width: 100%;
		text-align: center;
		margin-bottom: 10px;
	}

	footer .con > div:last-child {
		color: #fff;
		text-align: center;
		font-weight: 700;
		margin-bottom: 0;
	}

	section.static h1 {
		font-size: 2em;
		margin-bottom: 25px;
	}

	section.static {
		padding: 25px 15px;
		margin-top: 100px;
	}

	.images > div {
		width: calc(50% - 5px);
		margin-bottom: 10px;
	}


	header.beton video {
		right: 40%;
		transform: translateX(40%);
		bottom: 0;
	}


	header.arenda video {
		right: 20%;
		transform: translateX(20%);
		top: 0;
	}



}