/* ------------------------------------------------------------------
 * Duinhilletje - fotogalerij op mobiel
 *
 * De navigatiebolletjes onder de galerij (FlexSlider, .flex-control-nav)
 * staan absoluut gepositioneerd met bottom:-60px. Dat klopt zolang ze op
 * een rij passen, maar de galerij telt 38 foto's: op een telefoon vallen
 * die over drie rijen, waardoor de bovenste rij 30px in de foto liep.
 *
 * Oplossing: op mobiel meelopen in de tekststroom, netjes onder de foto.
 * Dan bepaalt het aantal rijen vanzelf de hoogte en kan er niets meer
 * overheen vallen, ook niet als er later foto's bijkomen.
 * ------------------------------------------------------------------ */

@media (max-width: 782px) {

	/* Deze selectors moeten op tegen .single-room-gallery .flexslider
	 * ol.flex-control-nav uit hotel-booking.css (bottom:-60px) en
	 * .mphb-flexslider ol.flex-control-nav uit flexslider-fixed.css
	 * (position:absolute). Vandaar de !important. */
	.single-room-gallery .flexslider ol.flex-control-nav,
	.mphb-flexslider ol.flex-control-nav,
	.flexslider ol.flex-control-nav {
		position: static !important;
		top: auto !important;
		bottom: auto !important;
		width: 100%;
		margin: 1em 0 0;
		padding: 0;
		line-height: 1;
	}

	/* Het thema houdt hier 100px vrij: 60px daarvan was voor de bolletjes
	 * die onder de foto uit hingen, de rest was lucht. Nu de bolletjes
	 * meelopen, blijft alleen die lucht nodig - anders gaapt er een gat
	 * tussen de galerij en "Details". */
	.single-room-gallery {
		margin-bottom: 2.5rem;
	}

	/* Iets meer tikruimte tussen de bolletjes onderling: ze staan nu op
	 * meerdere rijen, en 38 stuks dicht op elkaar is lastig mikken. */
	.single-room-gallery .flexslider ol.flex-control-nav li,
	.mphb-flexslider ol.flex-control-nav li,
	.flexslider ol.flex-control-nav li {
		margin: 4px 8px;
	}
}