/*
 * Frisbegin startpagina's (desktopweergave) - responsive laag
 * Wordt na het thema geladen. Op schermen van 1020px en breder verandert
 * er niets. Telefoons krijgen de aparte mobiele weergave al vanuit index.php;
 * deze regels zijn voor tablets en smalle browservensters.
 */

@media (max-width: 1019px) {

	img { max-width: 100%; }

	.wrapper-1000, .width-1000, .header-inner, .content, .content-inner, .footer {
		width: 100%;
	}
	.header, .header-inner, .header-inner-left, .header-inner-right, .header-social { height: auto; }
	.header-inner { overflow: hidden; }
	.header-inner-left { width: auto; max-width: calc(100% - 170px); }
	.header-inner-left-title-full, .header-inner-left-title-1000 { margin: 28px 0 20px 2%; }
	.header-inner-left h1 { font-size: 40px; word-break: break-word; }
	.header-manage { width: auto; height: auto; }

	/* Losse berichtbalk over de hele breedte */
	.message { width: 96%; margin: 20px 2% 0; box-sizing: border-box; }

	/* Alle blokken vullen hun kolom */
	.part, .part-title,
	.size-3, .size-4, .size-3-alt, .size-4-alt { width: 100%; box-sizing: border-box; }
	.part ul { width: 100%; box-sizing: border-box; }
	.part ul li a { float: none; display: block; overflow-wrap: anywhere; }

	/* Indeling met 3 kolommen: links een container met kolom 1 + 2, rechts kolom 3 */
	.left-container-3 { width: 63%; margin-left: 2%; }
	.message-3 { width: 100%; }
	.left-container-3 > .row { width: 48.5%; }
	.left-container-3 > .row-alt { width: 48.5%; margin-left: 3%; }
	.content-inner > .row-alt.size-3 { width: 31%; margin-left: 2%; }

	/* Indeling met 4 kolommen */
	.left-container-4 { width: 47%; margin-left: 2%; }
	.message-4 { width: 100%; }
	.left-container-4 > .row { width: 48%; }
	.left-container-4 > .row-alt { width: 48%; margin-left: 4%; }
	.content-inner > .row-alt.size-4 { width: 22.5%; margin-left: 2%; }

	/* Footer */
	.footer { height: auto; padding-bottom: 20px; }
	.footer-dash { width: 96%; margin: 0 2%; }
	.footer-left { width: 30%; height: auto; margin-left: 2%; }
	.footer-left ul { width: 100%; }
	.footer-right { width: 64%; margin-right: 2%; }
}

/* Smal venster (bijv. tablet staand of een klein browservenster): alles onder elkaar */
@media (max-width: 760px) {

	.header-inner-left { float: none; max-width: none; }
	.header-inner-right { float: none; width: auto; }
	.header-social { float: none; width: auto; overflow: hidden; padding: 0 2% 10px; }
	.header-social-facebook, .header-social-twitter { float: left; margin: 0 12px 0 0; }
	.header-inner-left h1 { font-size: 32px; }

	.left-container-3, .left-container-4,
	.left-container-3 > .row, .left-container-3 > .row-alt,
	.left-container-4 > .row, .left-container-4 > .row-alt,
	.content-inner > .row-alt.size-3, .content-inner > .row-alt.size-4 {
		float: none;
		width: 96%;
		margin-left: 2%;
		margin-right: 2%;
		overflow: hidden;
	}
	.left-container-3 > .row, .left-container-3 > .row-alt,
	.left-container-4 > .row, .left-container-4 > .row-alt { width: 100%; margin: 0; }
	.part { float: none; overflow: hidden; }

	.footer-left, .footer-right { float: none; width: 96%; margin: 0 2%; }
	.footer-right-copyright { margin: 10px 0 0; }
}

/* Mobiele weergave van de startpagina's (telefoons): grotere aanraakvlakken voor links */
.part-mobile ul li { margin: 0 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.part-mobile ul li:last-child { border-bottom: 0; }
.part-mobile ul li a { display: block; float: none; padding: 11px 10px; font-size: 15px; }

/* Blok "Gesponsorde links": banner past altijd in de kolom */
.sponsor-block .sponsor-banner { overflow: hidden; }
.sponsor-block .sponsor-banner a { float: none; display: block; padding: 0 !important; }
.sponsor-block .sponsor-banner img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.sponsor-block .sponsor-adsense { min-height: 0; }