@charset "UTF-8";

/*
 * Mobile layout
 *
 * The desktop site is deliberately spatial. At phone widths the same elements
 * move into document flow so artwork and copy remain readable without a second,
 * horizontally scrolling canvas.
 */

.mobile_only,
.pageindex_mobile {
	display: none;
}

@media screen and (max-width: 700px) {
	* {
		box-sizing: border-box;
	}

	img {
		max-width: 100%;
		height: auto;
	}

	html,
	body {
		height: auto;
		min-height: 100%;
		overflow-x: hidden;
	}

	#onderlaag {
		display: flow-root;
		width: 100%;
		min-width: 0;
		max-width: none;
		height: auto;
		padding-left: 0;
	}

	#header,
	#header_zwart {
		left: 16px;
		top: 16px;
		height: auto;
	}

	.titels_zwart {
		font-size: 18px;
		line-height: 24px;
		letter-spacing: 4px;
	}

	.titels_zwart a:link,
	.titels_zwart a:visited,
	.titels_zwart a:hover,
	.titels_zwart a:active,
	.titels_zwart a:visited:hover {
		padding-left: 3px;
	}

	.navtoshop {
		right: 16px;
		top: 16px;
	}

	.navtoshop div.titels_zwart {
		margin-right: -4px;
	}

	#menu {
		display: flex;
		align-items: center;
		left: 16px;
		top: 48px;
		width: calc(100% - 32px);
		height: auto;
		min-height: 32px;
		padding-left: 3px;
		white-space: nowrap;
	}

	.menuitem,
	.menuitem_selected {
		float: none;
		margin-right: 18px;
		padding: 7px 0;
	}

	.menuitem_work {
		display: none;
	}

	.pageindex {
		float: none;
		margin-left: auto;
	}

	.desktop_only,
	.pageindex_desktop {
		display: none;
	}

	.mobile_only,
	.pageindex_mobile {
		display: block;
	}

	#subheader {
		left: 16px;
		top: 88px;
		width: calc(100% - 32px);
		height: auto;
		min-height: 48px;
		padding-left: 3px;
		padding-right: 3px;
	}

	#letterbalk_links {
		position: relative;
		left: auto;
		top: auto;
		width: max-content;
		margin: 154px 16px 0;
	}

	#letterbalk_links #verticalmenu {
		display: flex;
		width: auto;
	}

	#letterbalk_links .niet_ingevuld {
		width: 25px;
	}

	#woorden_lijst {
		display: none;
	}

	.frame {
		position: relative;
		left: auto;
		top: auto;
		width: auto;
		min-width: 0;
		max-width: none;
		height: auto;
		margin: 24px 12px 40px;
	}

	.frame > div[style*="width:850px"] {
		width: 100% !important;
		height: 0 !important;
	}

	#breedte img,
	#gif img {
		display: block;
		width: 100%;
	}

	.tekst {
		position: relative;
		left: auto;
		float: none;
		width: 100% !important;
		max-width: none !important;
		margin: 24px 0 0;
		padding: 0;
	}

	td.tabel {
		height: auto;
		padding-left: 0;
		vertical-align: top;
	}

	.knoppenlaag {
		width: 100%;
		margin-top: 12px;
	}

	div.gotoshopholder {
		position: relative;
		left: auto;
		top: auto;
		margin: 16px 0;
	}

	.gotoshopbutton {
		min-height: 40px;
		margin-left: 0;
	}

	#lettermenu {
		position: relative;
		left: auto;
		top: auto;
		width: calc(100% - 32px);
		margin: 154px 16px 0;
	}

	.wordcontainer {
		min-height: 25px;
	}

	.character {
		width: 25px;
	}

	.word {
		max-width: calc(100vw - 73px);
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	#lettermenu .word.hidden,
	#lettermenu .word.shown,
	#lettermenu .word.hidden a,
	#lettermenu .word.shown a {
		display: block;
		background-color: #fff;
		color: #000;
	}

	#testimonial_tekst {
		position: relative;
		left: auto;
		top: auto;
		width: auto;
		margin: 24px 16px 40px;
		padding: 0;
	}

	#indexlaag,
	#overview_indexlaag,
	#index_indexlaag {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		bottom: auto;
		width: auto;
		height: auto;
		overflow: visible;
		margin: 154px 12px 0;
		padding: 0 !important;
	}

	#indexlaag {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		align-items: start;
		gap: 24px 10px;
	}

	.index_woorden {
		left: auto;
		float: none;
		width: auto;
		min-width: 32px;
		padding-bottom: 0;
	}

	.index_woorden a {
		font-size: 24px;
		line-height: 28px;
		min-height: 40px;
		padding-left: 7px;
	}

	#overview_indexlaag {
		display: grid;
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.overview_image {
		float: none;
		width: auto;
		height: auto;
		margin: 0;
	}

	.overview_image img {
		display: block;
		width: 100%;
	}

	#overview_indexlaag > div[style*="clear"],
	#overview_indexlaag > br {
		display: none;
	}

	.wordscol {
		float: none;
		width: 100%;
		margin: 0 0 32px;
		font-size: 16px;
		line-height: 20px;
	}

	#textcol1,
	#textcol2,
	#storecol,
	#newscol {
		position: relative;
		left: auto;
		top: auto;
		bottom: auto;
		width: auto;
		overflow: visible;
		margin: 32px 12px 40px;
		padding: 0;
		font-size: 16px;
		line-height: 20px;
	}

	#textcol2 {
		margin-top: 0;
	}

	.storearticleimage,
	.storearticletext,
	.newsarticleimage,
	.newsarticletext {
		float: none;
		width: 100%;
		padding: 0;
	}

	.storearticleimage,
	.newsarticleimage {
		margin-bottom: 16px;
	}

	.storearticleimage img,
	.newsarticleimage img {
		display: block;
		width: 100%;
	}

	.newsarticle {
		margin-bottom: 48px;
	}
}

@media screen and (max-width: 390px) {
	.menuitem,
	.menuitem_selected {
		margin-right: 12px;
	}

	.pageindex {
		font-size: 12px;
	}
}