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

/*------------------------------------------------------------------------------
 ******************* TABLETS SETTINGS ******************************************

@media screen and (min-width: 480px) and (max-width: 800px) {
	section, footer, header { width: 100%; min-width: 100%; padding: 0; overflow: hidden; }
	.container { width: 94%; overflow: hidden; margin: 0 auto; }

	section h2, section h3 {
		font-size: 1.8em;
	}

	div.overlay .window {
	  width: 90%;
	  padding: 10px;
	}

}
-------------------------------------------------------------------------------*/




/*
@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; 
	}
}
*/




/*------------------------------------------------------------------------------
 ******************* MOBILE SETTINGS *******************************************
 @media screen and (max-width: 479px) {
-------------------------------------------------------------------------------*/
@media screen and (max-width: 800px) {
 	section, footer, header, nav { width: 100%; min-width: 100%; padding: 0; overflow: hidden; }
	div.con { width: 100%; overflow: hidden; margin: 0 auto; }

	h1, h2, h3 {
		font-size: 1.6em;
	}

	h3, h4, h5, h6 {
		font-size: 1.2em;
	}

	div.popup .window {
	  width: 90%;
	  padding: 40px 10px 10px 10px;
	}

	div.popup .window input, div.popup .window button {
		width: 90%;
	}

	.mobileclear {
		clear: both !important;
	}

	body {
		padding: 0;
	}

	body.addtop {
		padding: 0;
	}

	.hamburger {
		display: block;
	}

	nav.mobile {
		display: none;
	}

	nav.pc {
		display: none;
	}

	header {
		height: unset;
		padding: 15px;
		position: relative;
		border-bottom: 1px solid #ccc;
	}

	header .logo {
		margin-top: unset;
		height: 60px;
		width: calc(100% - 30px);
		background: url(/images/main/logo-web-big-2.png) left center / contain no-repeat;
		transition: 0.2s;
	}

	header .address {
		position: relative;
		left: unset;
		top: unset;
		transform: unset;
		color: #111;
		transition: 0.2s;
	}

	header .address .street {
		margin-top: 10px;
		font-size: 0.9em;
		font-weight: 600;
		text-align: center;
	}

	header .address .worktime {
		margin-top: 5px;
		font-size: 0.65em;
		font-weight: 400;
		color: #777;
		text-align: center;
	}

	header .phone {
		position: relative;
		right: unset;
		top: unset;
		transform: unset;
		margin-top: 10px;
	}

	header .phone .number {
		font-size: 1.2em;
		color: #111;
		font-weight: 600;
		transition: 0.2s;
		text-align: center;
	}

	header .phone .email {
		font-size: 0.9em;
		text-align: center;
		font-weight: 600;
		color: #1565C0;
		transition: 0.2s;
	}

	header.scroll {
		height: unset;
	}

	header.scroll .logo {
		height: 60px;
		width: calc(100% - 30px);
		margin-top: unset;
	}

	header.scroll .address .worktime {
		display: block;
	}

	header.scroll .phone .number {
		font-size: 1.2em;
	}

	header.scroll .phone .email {
		font-size: 0.9em;
	}


	nav {
		background: rgba(255,255,255,1);
		height: unset;
		line-height: unset;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		color: #111;
		z-index: 199999;
		box-shadow: unset;
		transition: unset;
		padding-top: 75px;

		display: none;
	}

	nav.addtop {
		background: rgba(255,255,255,1);
	}

	nav.scroll {
		top: 0;
		background: rgba(255,255,255,1);
	}

	nav .menu-btn {
		display: block;
		color: #111;
		height: 40px;
		line-height: 40px;
		font-weight: 700;
		margin-top: 15px;
	}

	nav .menu-btn.dropdown .dropdown-menu {
		left: 0;
		right: 0;
		width: unset;
		background: #efefef;
		border-radius: 10px;
	}

	nav .menu-btn:hover:before {
		display: none;
	}


	section.videobg {
		background: url(/images/main/bg-top-mobile.jpg) center center / cover;
	}


	section.videobg .video {
		display: none;
	}

	section.videobg:after {
		content: "";
		position: absolute;
		z-index: 20;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,0.6);
	}

	section.videobg {
		padding: 25px 15px;
		min-height: unset;
		height: unset;
		max-height: unset;
	}

	section.videobg .con {
		z-index: 30;
	}

	section.videobg .con .content {
		position: relative;
		top: unset;
		transform: unset;
		text-align: center;
		margin: 50px 0;
	}


	section.videobg .con .content h1 {
		font-size: 1.5em;
		text-transform: none;
		text-align: center;
		font-weight: 600;
		color: #fff;
		text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
		margin-bottom: 50px;
	}

	section.videobg .con .content h1 span {
		font-weight: 800;
		font-size: 1.5em;
		text-transform: uppercase;
	}

	section.videobg .con .content .buttons {
		overflow: hidden;
		height: unset;
		width: 80%;
		margin: 0 auto;
	}

	section.videobg .con .content .button-more {
		width: 100%;
		margin-right: unset;
		margin-bottom: 15px;
		display: block;
		padding: 0 8px;
		font-size: 0.8em;
	}

	section.videobg .con .content .button-calc {
		margin-left: unset;
		width: 100%;
		display: block;
		padding: 0 8px;
		font-size: 0.8em;
	}

	section h2 {
		font-size: 2em;
		text-align: center;
		text-transform: uppercase;
		font-weight: 800;
		margin-bottom: 15px;
	}

	section.types {
		padding: 25px 15px;
		background: #fff;
	}

	section.types .item {
		width: 100%;
	}

	section.types .item:before {
		padding-top: 80%;
	}

	section.types .item .ins .text {
		font-size: 1.2em;
	}

	section.slide-vorota .vorota, section.slide-vorota .zabor {
		display: none;
	}


	section.slide-vorota h2 {
		text-align: center;
		width: 100%;
		margin: 0 auto;
		display: block;
		color: #fff;
		text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
	}

	section.slide-vorota p {
		text-align: center;
		width: 100%;
	}

	section.slide-vorota {
		height: unset;
		padding: 25px 15px;
	}

	section.slide-vorota .content {
		position: relative;
		top: unset;
		transform: unset;
		text-align: center;
		z-index: 15;
	}

	section.banner1 {
		height: unset;
		padding: 25px 15px;
	}

	section.banner1 .fon {
		position: relative;
		top: unset;
		transform: unset;
		width: 100%;
		margin:  0 auto;
		padding: 25px 25px;
		display: block;
	}

	section.banner1 .fon h2 {
		color: #111;
		text-align: left;
		font-size: 2em;
	}


	section.banner1 .fon h3 {
		color: #111;
		font-size: 1.5em;
		text-align: left;
	}

	section.myworks	{
		padding: 25px 15px;
	}

	section.myworks .item {
		width: 33.3333333%;
	}

	section.myworks .item:before {
		content: "";
		padding-top: 75%;
	}

	section.myworks .item .ins .image {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	section.about {
		padding: 25px 15px;
	}

	section.about .b-4f {
		padding-right: unset;
		margin-bottom: 25px;
		width: 100%;
	}

	section.about .b-4 {
		width: 100%;
	}

	section.recommend	{
		padding: 25px 15px;
	}

	section.recommend .b-2 {
		width: 100%;
	}

	section.recommend .left {
		padding-right: unset;
	}

	section.recommend .right {
		padding-left: unset;
		margin-top: 15px;
	}

	footer {
		padding: 50px 15px;
	}
	footer .b-3 {
		width: 100%;
	}


	footer .mid {
		padding: 25px 0px;
	}



	section.page {
		padding: 25px 15px;
	}

	section .breadcrumbs {
		margin-bottom: 25px;
		font-size: 0.8em;
		color: #777;
	}

	section.page h1 {
		font-size: 2.0em;
		font-weight: 700;
		text-align: center;
		margin-top: 0;
		margin-bottom: 25px;
	}

	section.page h2 {
		font-size: 2.0em;
		font-weight: 700;
		text-transform: none;
		margin-bottom: 25px;
		margin-top: 50px;
	}

	section.page .b-2,section.page .b-3,section.page .b-4 {
		width: 100%;
	}

	section.page .left-image {
		padding-right: unset;
	}

	section.page .right-image {
		padding-left: unset;
	}

	section.page .item .ins .image:before {
		content: "";
		float: left;
		padding-top: 80%;
	}

	section.page .item .ins .image.small:before {
		content: "";
		float: left;
		padding-top: 45%;
	}

	section.page .item .ins .image.big:before {
		content: "";
		float: left;
		padding-top: 100%;
	}

	section.page .item {
		padding: 10px 20px;
	}

	section.page .item .ins {
		padding: 15px;
	}




	.callphone {
		margin-top: 25px;
		text-align: center;
	}

	.callphone p {
		font-size: 0.8em;
		text-align: center;
		margin-bottom: 10px;
		font-weight: 400;
	}

	.callphone span {
		font-size: 1.5em;
		font-weight: 800;
	}


}