/* Responsive layer for daig-tz.com - load it AFTER style.css and colorbox.css.
   Desktop (1000px and wider) is untouched; everything here applies only to narrower screens. */

@media (max-width: 999px) {

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

	body { margin-top: 0; }
	div.container { width: auto; max-width: 1000px; }

	/* logo banner (an <img> inside a link) scales with the screen */
	div.header { height: auto; }
	div.header a { display: block; }
	div.header img { display: block; width: 100%; height: auto; }

	/* two floated columns -> one column.
	   Order: language flags, top menu + page content, category buttons. */
	div.content { display: flex; flex-direction: column; }
	div.leftcol { display: contents; }
	div.langs { order: 0; margin: 12px 0; }
	div.rightcol { order: 1; float: none; width: auto; }
	/* on small screens the Products page already lists the categories as tiles */
	div.categories { display: none; }
	br.cleaner { display: none; }

	/* top menu: fixed-size sprite buttons wrap onto several rows */
	div.menu { margin: 4px 0; }
	a.smallbutton { margin: 3px; }

	/* page content (comes from the database editor, so be defensive) */
	div.dyn { margin: 0; padding: 12px; }
	div.dyn p { font-size: 15px; line-height: 1.5; }
	div.dyn p, div.dyn li { text-align: left !important; }
	div.dyn { overflow-wrap: break-word; }
	div.dyn img { max-width: 100%; height: auto !important; }
	div.dyn iframe, div.dyn table, div.dyn video { max-width: 100%; }
	h1.title { font-size: 16pt; }

	/* contact form: fields stack, full width (16px stops iOS zooming on focus) */
	table.contacts { width: auto; max-width: 100%; margin: 20px 0 0; border-spacing: 0; }
	table.contacts, table.contacts tbody, table.contacts tr, table.contacts th, table.contacts td { display: block; }
	table.contacts th { text-align: left; padding: 8px 0 2px; }
	table.contacts td { padding: 0 0 8px; }
	table.contacts input, table.contacts textarea { width: 100%; box-sizing: border-box; font-size: 16px; }

	/* category / product tiles: two per row */
	div.cat, div.prod { width: calc(50% - 13px); margin: 6px; }
	div.cat div.logo, div.prod div.logo { position: relative; width: 100%; height: auto; aspect-ratio: 1 / 1; box-sizing: border-box; background-size: contain; }
	div.cat div.logo a, div.prod div.logo a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; }

	/* photo gallery thumbnails: two per row */
	div.images { margin: 6px 0; display: flex; flex-wrap: wrap; }
	div.images a { float: none; display: flex; align-items: center; justify-content: center; width: calc(50% - 26px); height: auto; }
	div.images a img { max-width: 100%; height: auto; }

	/* partner logos above their text instead of floated beside it */
	div.partner p img { float: none; display: block; max-width: 100%; margin: 0 0 10px; }
		/* category buttons: align to the top edge, equal spacing */
	div.categories a.bigbutton { vertical-align: top; margin: 4px; }
		/* make the content box contain its floated children so the category buttons don't overlap it */
	div.content, div.rightcol, div.dyn { height: auto; min-height: 0; }
	div.rightcol { flex: none; }
	div.dyn { display: flow-root; }
}