/* Responsive layer for rumyvn.com - load it AFTER style.css.
   Desktop (950px and wider) is untouched; everything here applies only to narrower screens.
   The desktop design uses 950px-wide background images, so on narrow screens they are replaced
   with flat colours. The four colours below are approximations - tune them to the images if needed. */

@media (max-width: 949px) {

	:root {
		--page-bg: #004095;
		--menu-bg: #0b66b4;
		--content-bg: #7b9bd6;
		--line: #99b1df;
	}

	html { -webkit-text-size-adjust: 100%; }

	/* the 950px page-background image cannot scale */
	body { background: var(--page-bg); }

	/* was position:absolute; width:950px */
	div.container { position: static; width: auto; max-width: 950px; margin: 0 auto; left: auto; }

	/* banner: <a><img src=head.jpg></a> - scale it with the screen, keep proportions */
	div.head { height: auto; }
	div.head a { display: block; }
	div.head img { display: block; width: 100%; height: auto; }

	/* menu: wraps onto several rows, bigger tap targets */
	div.menu { height: auto; display: flex; flex-wrap: wrap; justify-content: center; background-color: var(--menu-bg); background-size: auto 100%; }
	div.menu a { margin: 0; padding: 12px 10px; font-size: 13px; white-space: nowrap; }

	/* title block: drop the 950px image */
	div.titler { height: auto; background: var(--content-bg); border-bottom: 1px solid var(--line); padding: 14px 0 10px; }
	div.title { font-size: 22px; padding: 0 15px; }
	div.subtitle { font-size: 15px; padding: 0 15px; }

	/* content: no more 150px left gutter with the baked-in vertical line */
	div.content { background: var(--content-bg); padding: 15px; font-size: 15px; line-height: 1.5; overflow-wrap: break-word; }
	div.content img { max-width: 100%; height: auto; }
	div.content iframe, div.content video { max-width: 100%; }
	div.content table { max-width: 100%; }

	/* the pages use runs of <br /><br /><br /> for vertical gaps: keep one, drop the rest */
	div.content > br + br { display: none; }

	/* sub-menu ("Счетоводни услуги / Услуги ТРЗ / ...") and section headings */
	div.content p.section { margin: 0 0 12px; line-height: 2; }
	div.content p.section a { margin: 0 8px 0 4px; white-space: nowrap; }
	div.content ol { margin-left: 22px; }
	div.content li { padding: 4px 0; }

	/* the template forces a line break in the middle of the note */
	div.pricenote { height: auto; background: var(--content-bg); border-top: 1px solid var(--line); padding: 12px 15px; }
	div.pricenote p { font-size: 13px; }
	div.pricenote br { display: none; }

	div.footer { height: auto; background-size: cover; padding: 16px 10px; }
	div.footer a { font-size: 11px; }

	/* contacts: the two 380px floated offices stack */
	div.office { float: none; width: auto; margin: 0 0 20px; }
	div.office table { width: 100%; }
	div.office th { width: 38%; }
	div.office th.office_head { width: auto; }
}