/*==========  Desktop First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1600px) {
	header .title{
		margin: 300px 0 200px;
	}
	nav ul{
		text-align: left; 
	}
	#mm {display:none;}
	.wide {display:block;}
}


@media only screen and (max-width : 1200px) {
       #mm {display:none;}
       .wide {display:block;}

	header .title{
		margin: 250px 0 180px;
	}
	nav .contacts{
		top: 20px;
		right: 20px;
	}
	nav .contacts .tel{
		font-size: 22px;
	}
	nav ul li a{
		padding: 3px 8px;
	}

	header .logo h3{
		font-size: 24px;
	}
	header .logo h3 + p{
		max-width: 220px;
		font-size: 14px;
	}
	header .offer{
		font-size: 18px;
	}
	header .motto p{
		font-size: 16px;
	}


	.btn{
		font-size: 16px;
		min-width: 220px;
		padding: 10px 25px;
	}
	.btn:hover{
		background: #eb4333;
		color: #fff;
	}


	.price .wrapper:before, .price .wrapper:after{
		display: none;
	}
	.price .wrapper{
		padding: 0 0 20px;
	}

	.key .items div{
		height: 255px;
		margin: 4px;
		overflow: hidden;
	}
	.key .items div:nth-child(n + 5){
		height: 166px;
	}
	.key .items > div:nth-child(1){
		width: 296px;
	}
	.key .items > div:nth-child(2){
		width: 229px;
	}
	.key .items > div:nth-child(3){
		width: 173px;
	}
	.key .items > div:nth-child(4){
		width: 204px;
	}
	.key .items > div:nth-child(5){
		width: 458px;
	}
	.key .items > div:nth-child(6){
		width: 241px;
	}
	.key .items > div:nth-child(7){
		width: 216px;
	}

	.about .wrapper .features{
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		padding: 5px;
	}
	.about .features .item{
		padding: 10px 5px;
	}
	.about .features .item span{
		margin-left: 10px;
	}
	.about .features .item img{
		width: 50px;
	}



	.feedback .owl-carousel3:before{
		left: 230px;
	}
	footer{
		min-height: 550px;
	}
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	nav ul {
		display: none;
		width: 100%;
		padding: 0 0 20px;
	}
	.nav-wrap{
		height: 68px;
	}
	.wide {display:none;}
	.main_mnu_button{
		display: block;
		color: #ffc222;
		font-size: 30px;
		padding: 10px 5px;
	}
	nav ul li {
		padding: 0;
		display: block;
		width: 100%;
	}
	nav ul li a{
		padding: 5px;
		display: block;
		font-size: 16px;
		width: 100%;
	}
	nav ul li a:hover{
		color: #fff;
		background: #ffc222;
	}
	nav .contacts{
		top: 11px;
		right: 20px;
	}
	nav .contacts .tel{
		font-size: 18px;
	}

	.corners:before, .corners:after{
		display: none;
	}
	header .logo h3{
		padding: 0;
	}
	header .logo h3 + p{
		margin: 0;
	}
	header .contacts{
		margin: 0;
	}




	.about .wrapper{
		margin: 0;
		margin-top: 30px;
		padding: 0;
		border: none;
	}
	.about .wrapper > img{
		width: 300px;
		margin: 0;
	}
	.about .wrapper > img + div{
		display: inline-block;
		width: calc(100% - 320px);
		vertical-align: top;
	}
	.about .wrapper .features{
		margin: 0;
		width: 100%;
		margin-top: 20px;
	}

	.noise .back-img{
		display: none;
	}






	.key .items > div{
		display: block;
		width: 100% !important;
		height: auto !important;
		margin: 0;
		background: #e0e0e0;
		text-align: left;
	}
	.key .items > div img{
		width: auto;
		max-width: 200px;
	}
	.key .items > div span{
		position: static;
		display: inline-block;
		vertical-align: middle;
		min-height: unset;
		color: #343434;
		padding: 0 0 0 20px;
	}
	.key .items > div + div{
		margin-top: 20px;
	}
	.key .items > div:after{
		display: none;
	}


	.price .items > div > h3{
		font-size: 14px;
		min-height: 50px;
	}
	.price .advice{
		max-width: 100%;
	}


	.offer-form .form input{
		display: block;
		width: 100%;
		margin: 10px 0 0 !important;
	}

	.services{
		background: #f4f4f4;
	}
	.services h2:before{
		display: none;
	}
	.services img, .services h3{
		margin: 0;
	}
	.services img{
		margin-top: 20px;
	}
	.services h3{
		margin-top: 20px;
	}

	.utp{
		padding: 10px 0;
	}
	.utp .yellow{
		width: 100%;
		padding: 30px;
	}
	.utp .yellow > span strong:after{
		display: none;
	}
	.utp .yellow > span{
		margin-bottom: 10px;
	}
	.utp .yellow .timer-wrapper{
		margin-bottom: 5px;
	}
	.utp .yellow:before{
		display: none;
	}
	.utp .grey:after{
		display: none;
	}
	.utp .grey{
		padding: 30px;
		max-width: 100%;
		background: #ededed;
		margin: 30px 0 0;
	}
	.utp .grey h3{
		margin-top: 0;
	}



	.portfolio .owl-next, .portfolio .owl-prev{
		padding: 16px 21px;
		right: -30px;
		background: no-repeat #424242 url(../img/left_arov.png) center center;
	}
	.portfolio .owl-prev{
		left: -30px;
		margin-top: -30px;
		transform: scale(-1);
	}
	.portfolio .offer:before, .portfolio .offer .btn:after{
		display: none;
	}
	.portfolio .offer{
		margin: 30px 0;
	}


	.pluses h2{
		margin-bottom: 30px;
	}
	.pluses .img-wrap{
		margin-top: 30px;
		display: inline-block;
		position: relative;
		vertical-align: middle;
		top: 0;
		left: 0;
	}
	.pluses h3{
		display: inline-block;
		vertical-align: middle;
		margin: 30px 0 0 30px;
	}
	.pluses ul{
		margin-top: 30px;
	}
	.pluses ul li:after{
		display: none;
	}
	.pluses ul li p{
		height: auto;
		min-height: unset;
	}
	.pluses .img-wrap img{
		top: 50%;
		transform: translate(-50%, -50%);
	}


	.garanties{
		padding-bottom: 30px;
	}
	.garanties h2:before{
		display: none;
	}
	.garanties h2{
		padding: 60px 0 80px;
	}

	.work{
		text-align: center;
	}
	.work .item{
		width: calc(50% - 10px);
		margin-bottom: 10px;
	}


	.reminder strong:before{
		display: none;
	}
	.reminder h2{
		font-size: 30px;
	}
	.reminder h2 strong{
		vertical-align: baseline;
		font-size: 48px;
		margin: 0;
	}


	.feedback{
		padding-bottom: 30px;
	}
	.feedback .owl-carousel3:before, .feedback .owl-carousel3:after{
		display: none;
	}
	.feedback .owl-dots {
		margin-top: 10px;
		margin-bottom: 10px;
	}

	footer .tel{
		display: block;
	}
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
	
 .wide {display:none;}
	/*Disable Animation on Mobile Devices*/
	.animated {
		/*CSS transitions*/
		-o-transition-property: none !important;
		-moz-transition-property: none !important;
		-ms-transition-property: none !important;
		-webkit-transition-property: none !important;
		transition-property: none !important;
		/*CSS transforms*/
		-o-transform: none !important;
		-moz-transform: none !important;
		-ms-transform: none !important;
		-webkit-transform: none !important;
		transform: none !important;
		/*CSS animations*/
		-webkit-animation: none !important;
		-moz-animation: none !important;
		-o-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
	}


	header .logo{
		top: 10px;
		left: 13px;
	}
	header .contacts{
		top: 35px;
		right: 30px;
	}
	header .title{
		margin: 200px 0 130px;
	}
	header .title h1{
		font-size: 26px;
	}
	header .motto{
		display: none;
	}

	header .logo h3{
		font-size: 18px;
	}
	header .logo h3 + p{
		font-size: 14px;
		max-width: 190px;
	}


	header .contacts .tel{
		font-size: 18px;
	}
	header .contacts a + a{
		font-size: 14px;
	}
	header .contacts p{
		font-size: 13px;
	}


	h2{
		font-size: 24px !important;
	}

	.noise{
		padding: 30px 0;
	}
	.noise .italic{
		font-size: 18px;
		float: left;
		max-width: 100%;
	}
	.noise .img-wrap img{
		margin-top: 10px;
	}


	.about .wrapper > img{
		display: block;
		width: 100%;
	}
	.about .wrapper > img + div{
		display: block;
		width: 100%;
		margin: 0;
		margin-top: 20px;
	}
	.about .features .item{
		display: block;
		width: 100%;
	}
	.about .features .item span{
		margin-top: 10px;
	}
	.about .features .item br{
		display: none;
	}

	.key h2 + p{
		font-size: 16px;
	}

	.key .items > div img{
		display: block;
		width: 100% !important;
		max-width: 100%;
	}
	.key .items > div:after{
		display: block;
	}
	.key .items > div span{
		position: absolute;
		padding-bottom: 20px;
		color: #fff;
	}

	.price .wrapper .items > div{
		display: block;
		margin: 0;
		width: 100%;
	}
	.price .wrapper .items > div + div{
		margin-top: 20px;
	}


	.reminder .form input, .reminder .form button{
		width: 100%;
		margin: 0;
		margin-top: 10px;
	}

	.feedback .item > img{
		display: block;
		width: 100%;
	}
	.feedback .item > div{
		display: block;
		width: 100%;
	}

	footer .contacts{
		position: static;
	}
	footer{
		min-height: 600px;
	}
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
 .wide {display:none;}
	.btn{
		font-size: 16px;
	}

		
	header .logo p {
		display: none;	
	}

	header .title{
		margin: 130px 0 100px;
	}

	header .title h1{
		font-size: 18px;
	}
	header .title h1 + p{
		font-size: 16px;
	}
	header .offer{
		font-size: 16px;
	}


	.noise ul li{
		padding-left: 0;
	}
	.noise ul li:before{
		display: none;
	}

	.about{
		margin-top: 30px;
	}

	.utp .yellow{
		padding: 10px;
	}
	.utp .yellow h2 strong{
		font-size: 22px;
	}
	.utp .yellow > span strong{
		margin: 0;
		padding: 0;
	}


	.portfolio .offer h3{
		font-size: 24px;
	}
	.portfolio .offer .btn{
		float: none;
		margin-top: 15px;
	}

	.pluses .img-wrap{
		display: none;
	}
	.pluses ul li{
		padding-left: 0;
	}
	.pluses h3{
		margin-left: 0;
	}
	.pluses li:before{
		display: none;
	}


	.garanties .img-wrap{
		display: none;
	}
	.garanties .item{
		margin-left: 0;
	}
	.garanties .item > p{
		display: block;
		width: 100%;
		max-width: 100%;
	}


	.work .item{
		width: 100%;
		margin: 0;
		margin-top: 10px;
	}


	.reminder h2{
		padding: 10px;
		border: 2px solid #ffc21f;
		margin: 0;
	}
	.reminder .p{
		font-size: 16px;
	}
	.reminder .p strong{
		font-size: 18px;
	}
	.reminder h2:before, .reminder h2:after{
		display: none;
	}

	.feedback .item h3 a{
		float: none;
		margin-top: 10px;
	}

	footer .contacts{
		padding: 20px;
	}
	footer .contacts .tel{
		margin: 5px 0;
		font-size: 24px;
	}
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
 .wide {display:none;}
}


/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
nav > ul {
		display: block !important;
	}
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
       #mm {display:none;}

}