.footer
	{
		color: %(footer.color);
		background: %(footer.bg-color);
	}

.footer
	{
		color: %(footer.row-top.color);
		background: %(footer.row-top.bg-color);		
	}

.footer > .row-bottom
	{
		color: %(footer.row-bottom.color);
		background: %(footer.row-bottom.bg-color);		
	}

.logo img
	{
		object-fit: contain;
	}
	
.footer
	{
		font-size: 1.0em;
		font-weight: 300;
		line-height: 30px;
	}

.title
	{
		font-size: 1.2em;
		font-weight: 600;
		letter-spacing: 1px;
		text-transform: normal;
	}

.item .text
	{
	}

.footer > .row-bottom .text
	{
		font-size: 0.95em;
		line-height: 18px;
		text-align: center;
	}

.openinghours > .text:is( :not( :empty ) )
	{
		margin: 5px 0px;
	}

.openinghours .block-day
	{
		width: 100px;
	}

.openinghours li .text,
.openinghours li:is([data-closed="true"],[data-appointment="true"]) .block-time > *:not( .text )
	{
		display: none;
	}

.openinghours li:is([data-closed="true"],[data-appointment="true"]) .text
	{
		display: flex;
	}

.openinghours li:is([data-closed="true"]) .text::before
	{
		content: "Gesloten";
		content: "%(openinghours.item.text)";
		padding: 0px 0px 0px 7px;
	}

.openinghours li:is([data-appointment="true"]) .text::after
	{
		content: "Op afspraak";
		padding: 0px 0px 0px 7px;
	}

.openinghours .block-time > .from,
.openinghours .block-time > .to
	{
		width: 40px;
	}

.openinghours .block-time > *
	{
		justify-content: flex-end;
	}

.openinghours .block-time > .spacer
	{
		width: 20px;
		justify-content: center;
	}


.openinghours .hour.spacer::before
	{
		content: ".";
	}

.openinghours .time.spacer::before
	{
		content: "-";
	}

.footer a
	{
		display: inline-flex;
		align-items: center;
	}

.footer a:is( .icon )::before
	{
		display: inline-block;
		width: 20px;
		height: 20px;
		margin: 0px 8px 0px 0px;
	}

a,
.footer::slotted( a )
	{
		text-decoration: none;
		color: inherit;
	}

a:is( [href]:hover ),
.footer::slotted( a[href]:hover )
	{
		text-decoration: underline;
	}

a:is( [href=""], [href=""]:hover ),
.footer::slotted( a[href=""], a[href=""]:hover )
	{
		color: inherit !important;
		cursor: default !important;
	}

a.button
	{
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 1px;
	}

