/* -------------------------------------------- START RESPONSIVE */


@media (max-width:961px) {
	#grub-hero {
		border: 1em solid #fff;
	}
}

@media (max-width:890px) {
	#wrap-phone {
		font-size: 190%;
	}
	#grub-hero {font-size: 95%;}
	
	#utp { font-size: 85%; }
	
	#phone-middle:before {display: none;}
	#phone-middle {width: 10em;}
}

@media (max-width:768px) {
	#quick-nav .vam {
		display: inline-block;
		width: 100%;
	}
	#wrap-phone {
		text-align: center;
		width: 11em;
		margin: .85em auto 0 auto;
	}

	#utp { font-size: 80%; }
	#pic-big { width: 35%; }
	#pic-big img { width: 100%; max-width: 300px; }
	
	#grub-hero {
		border: none;
		border-radius: 0;
		margin: 0 0 2.5em 0;
		padding: 2.5em 1.5em;
	}
	#grub-hero:before {
		display: none;
	}
	
	#services img {
		width: 30%;
	}
	
	#grub-middle {font-size: 95%; padding: 2.5em 1em;}
	#gm-name {display: none;}
	#grub-middle input {width: 45%;}
	#grub-middle button {width: 30%;}
	
	#advantages {font-size: 93%;}
	#advantages > div {
		width: 100%;
	}
	#advantages b {margin-bottom: .2em;}
	#phone-middle:before {display: block;}
	#phone-middle {width: 11.5em;}
	
	#about, #reliably, #prices {font-size: 94%;}
	
	#how-we-work {font-size: 93%;}
	#how-we-work li {
		width: 100%;
		text-align: left;
		padding-left: 11em;
		position: relative;
		min-height: 6em;
	}
	#how-we-work li:before {
		content: "";
		position: absolute;
		left: 7.85em; top: 50%;
		width: 1px;
		z-index: 0;
		height: 100%;
		border-left: 2px dotted #aaa;
	}

	#how-we-work img {
		position: absolute;
		left: 0; top: 0;
		width: 5em;
	}
	#how-we-work i {margin: .5em 0 .1em 0 ;}
	 {display: none;}
	#how-we-work i:before {
		text-align: center;
		margin: 0;
		position: absolute;
		left: 3em; top: .5em;
	}
	#how-we-work i br, #how-we-work:before, #how-we-work li:last-child:before
	{display: none;}
	
	#grub-bottom { font-size: 95%; }
	#grub-bottom fieldset:before { display: none; }
	#grub-bottom legend { width: 35%; }
	#grub-bottom input { width: 40%; }
	
	#contact { font-size: 90%; line-height: 1.75; }
}

@media (max-width:755px) {

	#feedback-btn:before, #callback-btn:before { width: 100% !important; }
	#feedback-btn, #callback-btn {
		width: 2.85em;
		height: 2.85em;
		overflow: hidden;
	}

}

@media (max-width:730px) {
	#utp {
		font-size: 75%;
	}
	
	body.mod  .r{ display: none; }
	body.mod, .mod .modal, .mod .modal-wrap, .mod .modal-tab { width: 100%; height: auto; max-width: 100%; max-height: 100%; }
	.mod .modal, .mod .modal-wrap { padding: 0; margin: 0; float: left; }
	.mod .modal { position: fixed; }
	.mod .modal-wrap { overflow: auto; }
	.mod .modal-tab { float: left; box-shadow: none; }
}

@media (max-width:641px) {
	#utp {
		font-size: 70%;
	}
	
	#grub-hero legend {
		float: none;
		display: block;
		width: 100%;
		text-align: center;
	}
	#grub-hero legend span {
		display: inline;
		font-size: 100% !important;
	}
	#grub-hero label {
		margin: 1em 0;
	}
	#grub-hero input { width: 60%; }
	#grub-hero button { width: 35%; }
	
	#services > div {
		padding: 2.5em 0;
		border-style: solid;
		border-color: #bdc3c7;
	}
	#services img {
		float: none;
		display: block;
		width: 100%;
		max-width: 18em;
		margin: 0 auto 1.5em auto;
	}
	
	#grub-middle label br {display: none;}
	
	#about-pic {width: 35%; margin-bottom: 1.5em;}
	#about {overflow: inherit;}
	
	#reliably {
		display: block;
		width: 100%;
		margin-top: 1em;
	}
	#reliably li {
		display: inline-block;
		width: 50%;
		margin-top: 2.5em;
	}
	
	#prices {padding: 3em 0 3.5em 0;}
	#price-cta, #price {width: 100%;}
	#price-cta {margin-bottom: 2em;}
	
	#grub-bottom {padding: 2em .5em 3em .5em;}
	#grub-bottom legend {
		float: none;
		display: block;
		width: 100%;
	}
	#grub-bottom legend span {
		font-size: 100% !important;
		display: inline;
	}
	#grub-bottom label {
		margin: 1.2em 0;
	}
	#grub-bottom input {width: 60%;}
	#grub-bottom button {width: 35%;}
}

@media (max-width:555px) {
	#headline { position: relative; }
	#headline > .tblc > div:first-child { width: 65%; }
	.has-menu {
		padding: 0;
		float: left;
		position: static;
	}
	#logo:before, #geolink:before { width: 100% !important; }
	#logo, #geolink {
		width: 2.85em;
		height: 2.85em;
		overflow: hidden;
		float: left;
	}
	.has-menu ul {
		top: 100%;
		left: 1em !important; right: 1em;;
		border: .35em solid #e67e22;
		z-index: 10;
	}
	#headline [class^="icb-"]:before {
		font-size: 1.45em;
		line-height: 2;
	}
	#utp {
		font-size: 60%;
	}

	#grub-middle input { width: 60%; }
}


@media (max-width:481px) {
  
  #call-now {
  	display: block;
    position: fixed;
    width: 4.5em;
   	height: 4.5em;
    right: 1.25em; bottom: 1.25em;
    border-radius: 5em;
    background: #4fd863 url(../img/call.png) no-repeat 50%;
    background-size: 42px;
    border: 3px solid rgba(255,255,255,.3);
  }
  
	#services-anchor { padding-left: .7em; }
	#services-anchor li {
		float: none;
		display: inline-block;
		width: 100%;
	}
	#wrap-phone {
		font-size: 150%;
		margin-top: 1em;
	}
	
	#banner, #banner > div { display: block; }
	#utp { padding: 2.5em 0; text-align: center; }
	#utp h1:before {
		display: block;
		font: 230%/1.4 icons;
		width: 1.45em;
		margin: 0 auto .3em auto;
		display: block;
		color: #fff;
		border: .2em solid rgba(0,0,0,.1);
		border-radius: .45em;
		text-align: center;
	}
	
	.pereezd h1:before { content: "🚚"; }
	.gruzchik h1:before { content: "\f1b3"; }
	.santehnik h1:before { content: "🔧"; }
	.elektrik h1:before { content: "\26a1"; }
	.uborka h1:before { content: "\f182"; }
	.himchistka h1:before { content: "\e11e"; }
	.zamkov h1:before { content: "🔒"; }
	.sborka h1:before, .peretyajka h1:before { content: "\e800"; }
	.vannoj h1:before { content: "💧"; }
	
	#utp button:after { display: none; }
	
	#pic-big { width: 100%; }
	#pic-big img {
		width: 100%;
		margin: 0 auto;
		max-width: 200px;
	}
	
	#grub-hero {font-size: 100%;padding-bottom: 3.5em;}
	#grub-hero legend {font-size: 165%;line-height: 1.2;}
	#grub-hero label {font-size: 110%;line-height: 1.4;}
	#grub-hero input, #grub-hero button {
		float: none;
		display: block;
		width: 100%;
		max-width: 320px;
		font-size: 115%;
	}
	#grub-hero button {position: relative;top:1em}
	
	#uslugi { font-size: 95%; }
	#uslugi h2 { font-size: 160%; }
	
	#services {font-size: 95%;}
	#services > div {
		border: none;
		padding: 3.5em 1.2em 2em 1.2em;
		border-radius: .5em;
	}
	#services > div:nth-child(2n) {background: #f7f7f7;}
	#services img {max-width: 9em;min-width: 9em;}
	#services h2 {font-size: 160%;}
	#services p {line-height: 1.4; font-size: 97%;}
	#services em {display: block;width: 100%; text-align: center;}
	#services button {float: none;margin: .8em auto 0 auto;display: block;}
	
	#grub-middle {
		text-align: left;
		padding-bottom: 3em;
		margin-top: 1em;
		border-bottom: none;
		margin-bottom: 3em;
	}
	#grub-middle legend {
		font-size: 180%;
		text-align: left;
		position: relative;
		padding-left: 2.5em;
	}
	#grub-middle legend:before {
		position: absolute;
		left: 0; top: .05em;
		content: "📱";
		font: 300%/1 icons;
		text-shadow: none;
		color: rgba(0,0,0,.25);
	}
	#grub-middle label {font-size: 120%;}
	#gm-name {display: block;}
	#grub-middle input {width: 100%; margin-bottom: 1em;}
	#grub-middle button {width: 100%;}
	
	#advantages {
		padding: 0;
		border:none;
	}
	#advantages > div {
		padding: 0;
	}
	#advantages h2 {font-size: 130%;}
	#advantages b {font-size: 130%;}
	#advantages img {
		float: none;
		display: block;
		margin: 0 auto .5em auto;
	}
	
	#phone-middle {
		width: 100%;
		font-size: 180%;
		text-align: center;
	}
	#phone-middle:before {display: none;}
	
	#about-pic {
		float: none;
		display: block;
		margin: 0 auto 1.5em auto;
		width: 100%;
		max-width: 10em;
	}
	#about {font-size: 91%;}
	#about h2 {font-size: 200%;}
	#about p {margin-top: 1.2em;}
	
	#reliably li {width: 100%;}
	
	#prices h3 {font-size: 170%;text-align: center;}
	#prices p {display: none;}
	#price {font-size: 90%;}
	#price td:last-child {width: 6em;}
	
	#how-we-work img {display: none;}
	#how-we-work li {
		padding-left: 5em;
		margin-top: 1.5em;
	}
	#how-we-work li:before {
		left: 1.6em;
		top: 1.5em;
	}
	#how-we-work i {margin-top: 0;}
	#how-we-work i:before {left: 0; top: 0;}
	#wrap-howwework h3 {
		font-size: 180%;
		margin-bottom: .5em;
	}
	#wrap-howwework {padding: 2em 0 2.5em 0;}
	
	#grub-bottom legend {
		font-size: 200%;
		position: relative;
		padding-left: 2.7em;
	}
	#grub-bottom legend:before {
		position: absolute;
		left: 0; top: .05em;
		content: "\e75e";
		font: 300%/1 icons;
		text-shadow: none;
		color: rgba(0,0,0,.25);
	}
	#grub-bottom label {font-size: 115%;}
	#grub-bottom input, #grub-bottom button {
		float: none;
		display: block;
		width: 100%;
	}
	#grub-bottom button {
		position: relative;
		top: 1em;
	}
	
	#contacts {padding: 2em 1.3em 2.5em 1.3em; font-size: 90%;}
	#contact, #map {width: 100%;}
	#contact h2 {text-align: center;margin-bottom: .75em;}
	#contact {line-height: 1.5;}
	#map {margin-top: 2em;height: 11em;box-shadow: none;border-radius: 0;border: none;}
	
	.modal-wrap { margin: 1em 0; }

	#reviews { font-size: 95%; }
	.review span {display: block;}

	.price-item.col3 tr td:nth-child(2),
	.price-item.col3 tr th:nth-child(2) { display: none; }
	 
	.price-item { font-size: 90%; }
	.pl-price { width: 6em; }
	 
	#ceny, #no-oferta { font-size: 90%; }
}

@media (max-width:321px) {
/*
	#utp {
		width: 100%;
		font-size: 60%;
		display: block;
		text-align: center;
	}
	#pic-big {
		display: block;
	}
	#pic-big img { width: 100%; }
*/
	.modal { padding: 0; font-size: 92%; }
	.modal-wrap { margin: 0; min-height: 98%; }
	.modal-h { font-size: 180%; }
	.modal-tab { border-width: 1.25em; }
	.close-modal { top: 0; right: 0; }
}

/* -------------------------------------------- END RESPONSIVE */