The detail layout is a one-column layout with one small column.
Use the detail layout for detail pages of content.
Examples of detail pages of content:
Do not use the detail layout to present an overview of content. In this case, use the overview layout instead.
A detail layout consists of the following parts:
The detail page content gets a default width of 7/12 based on the container.
However, as also shown in the example, some direct children of the detail page content break out of the default 7 column width.
The following components in the detail page content get a width of 10/12 based on the container:
The following component in the detail page content get a width of 12/12 based on the container:
If you are unable to place these components as direct children of the page content,
you can use the helper classes .w7-o2, .w9-o1, .w10-o1 and .w12 on whatever wrapper element you are dealing with.
{% include '@header' with {
"site_name": "Stad Gent",
"search": true,
"header_search_id": "header-search",
"header_search_label": "Search",
"header_search_placeholder": "Search",
"header_search_text": "Search",
"breadcrumbs_items": [
"<a href='#'>Home</a>",
"<a href='#'>Overview</a>",
"<a href='#'>Theme</a>",
"<a href='#'>Subpage</a>",
"<span>Page title</span>"
]
} %}
<main class="info-page">
<article class="detail-layout">
{% block info_page_article_content %}
{% include '@content-header' with {
'modifier': 'primary dark-background overlap',
'heading_text': 'This is the page title and we make it a little longer to see what happens',
'speech_button': true,
'summary': true,
'summary_text': 'Donec lacinia pellentesque eros id dignissim. Donec justo neque, consectetur ac rhoncus a, dictum non neque. Donec semper tempor nisl, eu blandit sapien consequat rhoncus. Nunc urna magna, consequat nec hendrerit.',
'image': true
} %}
{% include '@summary' %}
{% include '@table-of-contents' with {
'list': [
'<a href="#" class="active">Anchor link 1</a>',
'<a href="#">Anchor link 2</a>',
'<a href="#">Anchor link 3</a>',
'<a href="#">Anchor link 4</a>',
'<a href="#">Anchor link 5</a>',
'<a href="#">Anchor link 6</a>'
],
'type': 'three-column'
} %}
{% include '@opening-hours' %}
{% include '@paragraph' with {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et facilisis augue. Donec mi mauris, pretium eu nunc at, maximus semper libero. Etiam rhoncus, ante eget pharetra consequat, purus libero varius quam, vel porttitor leo urna in odio. In id tellus ut ligula facilisis efficitur at vel urna. Vivamus iaculis felis non <strong>bold text</strong> tristique malesuada. Quisque venenatis, arcu sed luctus molestie, leo mauris commodo sem, eget <a href='https://stad.gent' alt='Stad Gent'>egestas orci</a> libero eu justo. Curabitur sollicitudin odio non vulputate tincidunt. Etiam vel dolor in massa dapibus bibendum sit amet vel ipsum. Donec sagittis, elit et hendrerit maximus, nulla tortor laoreet quam, id tincidunt massa neque a ex. Fusce suscipit, ipsum interdum elementum sodales, <a href='javascript:(void);' alt='Link'>tellus</a> sapien vehicula nisi, in condimentum neque nisl sit amet elit. Donec sed augue a elit sodales commodo pulvinar vitae nisl. Sed <a href='javascript:(void);' alt='File link' download>pharetra</a> ante non mollis consequat. Pellentesque a est neque. Nullam maximus ornare metus. Quisque porttitor turpis tristique faucibus efficitur."
} %}
{% include '@paragraph' with {
'text': 'Donec lacinia pellentesque eros id dignissim. Donec justo neque, consectetur ac rhoncus a, dictum non neque. Donec semper tempor nisl, eu blandit sapien consequat rhoncus. Nunc urna magna, consequat nec hendrerit a, blandit in arcu. Pellentesque tellus odio, volutpat a vehicula vitae, rhoncus quis arcu. Praesent ut sodales sem. Donec semper pharetra dui, ac ultrices nunc dignissim eget. Nunc hendrerit massa ligula, in condimentum enim mattis quis. Aenean ut felis turpis. Aliquam vitae cursus metus.',
'modifier': 'summary-text'
} %}
{% include '@highlight' with {
'title': '<h3>Highlight</h3>',
'content': '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>'
} %}
{% include '@heading' with {
'heading': 'h2',
'heading_text': 'This is an H2 paragraph title'
} %}
{% include '@paragraph' with {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et facilisis augue. Donec mi mauris, pretium eu nunc at, maximus semper libero. Etiam rhoncus, ante eget pharetra consequat, purus libero varius quam, vel porttitor leo urna in odio. In id tellus ut ligula facilisis efficitur at vel urna. Vivamus iaculis felis non <strong>bold text</strong> tristique malesuada. Quisque venenatis, arcu sed luctus molestie, leo mauris commodo sem, eget <a href='https://stad.gent' alt='Stad Gent'>egestas orci</a> libero eu justo. Curabitur sollicitudin odio non vulputate tincidunt. Etiam vel dolor in massa dapibus bibendum sit amet vel ipsum. Donec sagittis, elit et hendrerit maximus, nulla tortor laoreet quam, id tincidunt massa neque a ex. Fusce suscipit, ipsum interdum elementum sodales, <a href='javascript:(void);' alt='Link'>tellus</a> sapien vehicula nisi, in condimentum neque nisl sit amet elit. Donec sed augue a elit sodales commodo pulvinar vitae nisl. Sed <a href='javascript:(void);' alt='File link' download>pharetra</a> ante non mollis consequat. Pellentesque a est neque. Nullam maximus ornare metus. Quisque porttitor turpis tristique faucibus efficitur."
} %}
{% include '@heading' with {
'heading': 'h3',
'heading_text': 'This is an H3 paragraph title'
} %}
{% render "@table" %}
{% include '@paragraph' with {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et facilisis augue. Donec mi mauris, pretium eu nunc at, maximus semper libero. Etiam rhoncus, ante eget pharetra consequat, purus libero varius quam, vel porttitor leo urna in odio."
} %}
{% include '@cta-block' with {
'description': 'Nulla nec eros lorem. Morbi at augue eu purus congue auctor. Sed id volutpat odio. Nunc congue diam vel diam venenatis, ut consequat urna dapibus. Vivamus at lobortis odio. Sed felis mauris, mattis eget purus at, pharetra ullamcorper risus.',
'links': [
{
'text': 'In the summertime',
'url': '#',
'modifier': 'standalone-link'
},
{
'text': 'When the weather is hot',
'url': '#',
'modifier': 'standalone-link'
}
]
} %}
{% include '@cta-block' with {
'layout': 'image-left',
'src': 'https://via.placeholder.com/570x570&text=1:1+(570x570)',
'alt_text': 'Image alt text',
'description': 'Nulla nec eros lorem. Morbi at augue eu purus congue auctor. Sed id volutpat odio. Nunc congue diam vel diam venenatis, ut consequat urna dapibus. Vivamus at lobortis odio. Sed felis mauris, mattis eget purus at, pharetra ullamcorper risus.',
'links': [
{
'text': 'In the summertime',
'url': '#',
'modifier': 'standalone-link'
},
{
'text': 'When the weather is hot',
'url': '#',
'modifier': 'standalone-link'
}
]
} %}
{% include '@heading' with {
'heading': 'h4',
'heading_text': 'This is an H4 paragraph title'
} %}
{% include '@paragraph' with {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et facilisis augue. Donec mi mauris, pretium eu nunc at, maximus semper libero. Etiam rhoncus, ante eget pharetra consequat, purus libero varius quam, vel porttitor leo urna in odio."
} %}
{% include '@image-gallery--multiple' with {
"items": [
{
"src": "https://loremflickr.com/735/459/ghent?random=1",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://loremflickr.com/735/459/ghent?random=2",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://loremflickr.com/735/459/ghent?random=3",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://loremflickr.com/735/459/ghent?random=4",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://loremflickr.com/735/459/ghent?random=5",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://loremflickr.com/735/459/ghent?random=6",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://loremflickr.com/735/459/ghent?random=7",
"alt": "placeholder image alternative text"
}
]
} %}
{% include '@paragraph' with {
"text": "Donec lacinia pellentesque eros id dignissim. Donec justo neque, consectetur ac rhoncus a, dictum non neque. Donec semper tempor nisl, eu blandit sapien consequat rhoncus. Nunc urna magna, consequat nec hendrerit a, blandit in arcu. Pellentesque tellus odio, volutpat a vehicula vitae, rhoncus quis arcu. Praesent ut sodales sem. Donec semper pharetra dui, ac ultrices nunc dignissim eget. Nunc hendrerit massa ligula, in condimentum enim mattis quis. Aenean ut felis turpis. Aliquam vitae cursus metus."
} %}
{% include '@image-gallery' with {
"src": "https://loremflickr.com/735/459/ghent",
"alt": "placeholder image alternative text",
"caption": "image caption"
} %}
{% include '@paragraph' with {
"text": "Quisque sollicitudin leo at erat sagittis aliquet. Nullam ipsum erat, aliquet vel scelerisque posuere, interdum vitae dolor. Morbi finibus nisi efficitur, laoreet risus id, mollis mauris. Donec eu interdum velit, at mattis leo. Suspendisse eget finibus diam. Aliquam condimentum nec elit a aliquam. Donec efficitur et enim et tempor. Vestibulum quis tempor purus. Cras id magna ante. Morbi nec purus vehicula, auctor erat eget, aliquet mi. Nam at ligula convallis, vestibulum ligula a, pretium tellus. Sed pretium vulputate iaculis."
} %}
{% include '@quote' %}
{% include '@paragraph' with {
"text": "Nam lorem ex, posuere non lectus tempus, ornare scelerisque mauris. Integer vitae tortor orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas enim lectus, malesuada in hendrerit in, vulputate ut enim. Integer pretium elit purus, ac pulvinar augue scelerisque quis. In velit elit, luctus vitae nunc quis, hendrerit congue felis. Nulla tincidunt tincidunt cursus. Mauris pretium eu ex id aliquet. Aenean massa metus, posuere ac dui sit amet, volutpat interdum libero."
} %}
{% include '@contact-details' %}
{% include '@paragraph' with {
"text": "Quisque sollicitudin leo at erat sagittis aliquet. Nullam ipsum erat, aliquet vel scelerisque posuere, interdum vitae dolor. Morbi finibus nisi efficitur, laoreet risus id, mollis mauris. Donec eu interdum velit, at mattis leo. Suspendisse eget finibus diam. Aliquam condimentum nec elit a aliquam. Donec efficitur et enim et tempor. Vestibulum quis tempor purus. Cras id magna ante. Morbi nec purus vehicula, auctor erat eget, aliquet mi. Nam at ligula convallis, vestibulum ligula a, pretium tellus. Sed pretium vulputate iaculis."
} %}
{% include '@list' with {
'type': 'unordered',
"items": [
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
'Aliquam tincidunt mauris eu risus.',
'Vestibulum auctor dapibus neque.',
'Nunc dignissim risus id metus.',
'Cras ornare tristique elit.',
'Vivamus vestibulum ntulla nec ante.',
'Praesent placerat risus quis eros.',
'Fusce pellentesque suscipit nibh.',
'Integer vitae libero ac risus egestas placerat.',
'Vestibulum commodo felis quis tortor.',
'Ut aliquam sollicitudin leo.'
]
}
%}
{% include '@accordion--multiple' with {
items: [
{
'buttonText': 'First item',
'content': '<p>Multiple item accordions are contained in a list element.</p>' ~
'<p>They are indicated with a \'plus\' or \'minus\' icon</p>' ~
'<p>Below is some nonsens text.</p>' ~
'<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ' ~
'Animi culpa dolorum enim molestiae molestias nemo nulla quas sed, ' ~
'temporibus voluptatem!</p>'
},
{
'buttonText': 'Second item',
'content': '<p>Single item accordions are indicated by a chevron.</p>' ~
'<p>Below is some nonsens text.</p>' ~
'<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ' ~
'Animi culpa dolorum enim molestiae molestias nemo nulla quas sed, ' ~
'temporibus voluptatem!</p>'
},
{
'buttonText': 'Third item',
'content': '<p>Single item accordions are indicated by a chevron.</p>' ~
'<p>Below is some nonsens text.</p>' ~
'<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ' ~
'Animi culpa dolorum enim molestiae molestias nemo nulla quas sed, ' ~
'temporibus voluptatem!</p>'
},
{
'buttonText': 'Fourth item',
'content': '<p>Single item accordions are indicated by a chevron.</p>' ~
'<p>Below is some nonsens text.</p>' ~
'<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ' ~
'Animi culpa dolorum enim molestiae molestias nemo nulla quas sed, ' ~
'temporibus voluptatem!</p>'
}
]
} %}
{% include '@video' with {
"title": "Promofilm stad Gent.",
"src": "https://www.youtube.com/embed/S0vLmTWUmok",
"audio_description_src": "https://www.youtube.com/embed/S0vLmTWUmok"
} %}
{% include '@timeline' %}
{% endblock %}
</article>
<aside class="top">
{% include '@documents' with {
unique_id: '1',
documents: [
{
'text': 'In the summertime',
'type': 'PDF',
'size': '102kb'
},
{
'text': 'When the weather is hot',
'type': 'PDF',
'size': '102kb'
}
],
other_documents: [
{
'text': 'And another one',
'type': 'PDF',
'size': '102kb'
},
{
'text': 'And another one',
'type': 'PDF',
'size': '102kb'
},
{
'text': 'And another one bites the dust',
'type': 'PDF',
'size': '102kb'
}
]
}
%}
</aside>
</main>
<footer>
{% include '@theme-footer' %}
{% include '@footer' with footerConfig %}
</footer>
<header class="header">
<div class="content-container">
<a href="#" title="Home" class="site-logo " rel="home">
Stad Gent
</a>
<a href='#' class="search--link" title="search">
search </a>
<form class="form search">
<label for="default-header-search">Search
</label>
<input type="search" id="default-header-search" name="default-header-search" class="search" placeholder="Search" required="true" />
<button type="submit" class="button button- ">
Search
</button>
</form>
</div>
<nav class="breadcrumb section--default" aria-labelledby="default-header-crumbs">
<div class="content-container">
<h2 id="default-header-crumbs" class="visually-hidden">Breadcrumb</h2>
<ol class="no-style">
<li><a href='#'>Home</a></li>
<li><a href='#'>Overview</a></li>
<li><a href='#'>Theme</a></li>
<li><a href='#'>Subpage</a></li>
<li><span>Page title</span></li>
</ol>
</div>
</nav>
</header>
<main class="info-page">
<article class="detail-layout">
<div class="content-header-container primary dark-background overlap image">
<div class="left">
<button class="readspeaker-button">
<i class="icon-readspeaker" aria-hidden="true"></i><span>Listen</span>
</button>
<h1>This is the page title and we make it a little longer to see what happens</h1>
<div class="summary-text">
<p>Donec lacinia pellentesque eros id dignissim. Donec justo neque, consectetur ac rhoncus a, dictum non neque. Donec semper tempor nisl, eu blandit sapien consequat rhoncus. Nunc urna magna, consequat nec hendrerit.</p>
</div>
</div>
<div class="right">
<figure><img src="data:image/png;base64,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IkCAAAECgtUcIECAAAECiQKCNRFTUwQIECBAQLCaAwQIECBAIFFAsCZiaooAAQIECAhWc4AAAQIECCQKCNZETE0RIECAAAHBag4QIECAAIFEAcGaiKkpAgQIECAgWM0BAgQIECCQKCBYEzE1RYAAAQIEBKs5QIAAAQIEEgUEayKmpggQIECAgGA1BwgQIECAQKKAYE3E1BQBAgQIEBCs5gABAgQIEEgUEKyJmJoiQIAAAQKC1RwgQIAAAQKJAoI1EVNTBAgQIEBAsJoDBAgQIEAgUUCwJmJqigABAgQICFZzgAABAgQIJAoI1kRMTREgQIAAAcFqDhAgQIAAgUQBwZqIqSkCBAgQICBYzQECBAgQIJAoIFgTMTVFgAABAgQEqzlAgAABAgQSBQRrIqamCBAgQICAYDUHCBAgQIBAooBgTcTUFAECBAgQEKzmAAECBAgQSBQQrImYmiJAgAABAoLVHCBAgAABAokCgjURU1MECBAgQECwmgMECBAgQCBRQLAmYmqKAAECBAgIVnOAAAECBAgkCgjWRExNESBAgAABwWoOECBAgACBRAHBmoipKQIECBAgIFjNAQIECBAgkCggWBMxNUWAAAECBASrOUCAAAECBBIFBGsipqYIECBAgIBgNQcIECBAgECigGBNxNQUAQIECBAQrOYAAQIECBBIFBCsiZiaIkCAAAECgtUcIECAAAECiQKCNRFTUwQIECBAQLCaAwQIECBAIFFAsCZiaooAAQIECAhWc4AAAQIECCQKCNZETE0RIECAAAHBag4QIECAAIFEAcGaiKkpAgQIECAgWM0BAgQIECCQKCBYEzE1RYAAAQIEBKs5QIAAAQIEEgUEayKmpggQIECAgGA1BwgQIECAQKKAYE3E1BQBAgQIEBCs5sBjL/CWt7zl9OpXv/rG4de//vXpF7/4xWNvAuA6Ak8++eTpVa961c3Ofvazn51++9vfXmfH9nKnAoL1Tnmv3/hLXvKS0ytf+cqbHf/rX/+6CYprb8973vNOr3/96292+8wzz5x++ctfnv773/9euxuH9vfCF77w9NGPfvTBa3/wgx/c2uyd73zn6fnPf/5NW3//+99PP/rRjw714RovetGLXnR66Utfenrxi198es5znnP6xz/+cdPHP/7xjzc1qrzFfHrXu971oIu/+93vbl2j7HE+8cQTp/ibC9uYS1Pt//rXv57+8pe/7O7uzW9+8ym+2E1/K1/84hfL/q3sDsYLHggI1mfZZPjIRz5yig/R6Q/185///NVH+La3ve30hje84cF+v/nNb57+/Oc/X70fR3Y49/r3v/99euqpp4687ZHXjGP+z3/+c4oPyaXt4x//+IMAvtXOhjd9/etfP8UH+dL22te+9vTWt771FOG0tEWo/ulPfzp9//vfv/kiVnGb1yj6F/391re+9UhXI+Q+/elPpw0hbNb+fmJfcbQZ8zz+76Ut5kAcgf7whz/c7NOnPvWpmy87sf3hD384Pf3002lj0ND9CAjW+3G/k70+97nPPX3yk5980PbWB8OddOB/jX7iE5946IO8arBG6MRR5rTFB+CvfvWrs2le9rKXnT7wgQ889L6tYI0aRa2ytjXfD37wgzdHUke2mCvxgR5HsJW2+FLwxje+8aEuXStYY6ef+9znHuGILylxluNoDeMLS3z5WfviMj9qjZ1V/XupNC+q90WwVq/QGf1797vf/eBaYbztPoL1Na95zUOn7ap+UMRRRgTcdKSwFYRbJYj3xxeJqZ3ptfcdrO973/tOr3jFK86YPf//0q2j37Mbu/AN8aUgvhyM230Ga9T5Yx/72OoZgLUhx3yIsyFrp93nR62XnDm5kNzbkwQEaxLkfTez9M3+2sEaizDe8573PEJR8Rv4O97xjtPrXve6B32N66FxLfjcLY5U44h13LaCdTyiP3ef4+u/+tWv3lwvnbY4PRmnpsctPrDjlHy8NkI3rreOpzHjNV/60pfu/bpr9Cuclo4KrxWssS7gC1/4wkOM73//+08vf/nLH7H95z//+eB6ddhO11vnL4yzAd/+9rcXyx3XWePIddpiIdNPf/rTS6eG99+TgGC9J/hLdhsfNvFtPj7Qp/9Zus5zl8Ea+4s+TP8THyZrp8aqBWscdcTR6mS29AF6pD5rARbv3QrW2P/adbmt/UYQjqeclz6Al041//znPz/95Cc/eaT5peu98bp4/X1uW0fca8Ea/b2tbdRyWkQ0jTuu48a+pm1c6Lb2uvjv8dq4NjzW+Stf+crNwrFxi9fFUev0+vjbtZDpPmfgZfsWrJf53cu7P/OZzxza710Ga1xjWvpWvtSxasE6Hq3GApPvfe97h0z3PmSnf7/tqeW1TkRgRAjOv7wsLXRZCvutBTFLARAf/BEA97XFmYSo0dq2Fay36XOs6v3Qhz700FuXVocvHa1uXZcfr+HHDmKVfrS9tL33ve99sKJ/77W3Gaf3XE9AsF7POm1PdxmssaJ4/i07TnFFSIxb12Adj1ZjXF/+8pdPMc5ztvFILxamTLfaRDvZwTouRFo7ZTuuoD3y5WrpMkIcLcUYYi7Ev8+3aDOOardu0wnnWDUbr4kzAvG/w/g3v/nNJvMLXvCCm4VB8zk42mYGa3xRiVrOr5GvfRGJFcfzfv3tb387fe1rX9scz4c//OGbU+7TtnX9NP72on7TdtszKefMY6+9GwHBejeud9rqXQVrrHaM61rzbe1D5j6CdVxsdJtbY2KF6Two4npjXKM8Z4uVxHE0Mm3xwR+nZN/+9rc/+G+ZwTquGo2djNdVpx2PH/5xL+U3vvGNzeGNH+jx4ukU89rirL2j/KVTuUf6EguDIlyn7fe///1N6M0XYmUG69EvLEsLqeIaaDhtbeO1063axb+NX9i++93vnuK+XVsvAcHaq143vY3rqkv3JcaH/fQUl3jdkaOV+fDPCdb4MJ7ul523EUdt84CJf8s6FTz/QnHu2KY+jh+ksWDpnAc5xMM34pTdfIuQiwUtdxGs4RkftvNt7Xrp0of/0VuI5qtSY19xX2ysEI5tbVFaBPbSQxCWjKJe8UVo6ezHNLbwmx4sEv9tWkkb3ncRrEsr2NfGNN6nHP2L8cQR6Na2dF12a2FSLP6b/w27r7XhB/TpdBKsPeu22OvxyObc8DknWNfY4mgjjjrmW6VgHY/oxgUqW9Nh6bThdNQSgXAXwRrX/uIa4LRtHQkvndKNVa1Hnno17idO28Yp8mkbr//Ff186rbl2hLt35BVfTOIa5nybbv0Zj34zjliX+rnV7nhKN85SxOrpI9s45+J0eDyQY2kbry9nnvk40levyREQrDmOJVoRrNtlWDqiW3oAwForY/jMr7HdRbAuLX6JRVZrz5Mdj3bO+WI13gM9fqCv3f4SD9SYP1loKYD3jrqWQi6e1/zjH//4phR3EayjVewngnLtIQ7jLVLzI/q9P/7x9O7WbTfjQ172+rW3b/9+PwKC9X7c72SvlwZrfMDF7RzzBRqxivGc+zsrH7GOq4HPOepYso0P4ulUYHawjg+wiAmzt1p3vKf2nKOd8TTsUigvHVVGv2IBT3zJiNO1EYLzbe/BCPHa8fT8OM7sYF36grW1Wjf6OJ4qP+eoeVyPsLfoaQxx97TeycflnTYqWO+U97qNXxqsGb2tHKzjB/jRD8dY1RmnAufbeGozO1jHoIt97z0V6ZLTlUuLbJaO5seFW9Gv+IISp42XHuiwdxlgvD0oAj3amh85ZgfruHI6TpXHKuitVc7j6dxYUBRz4Mi2d5p9bGN8fTzUIxxtfQQEa59a7fZUsG4TjR+oRz4c48gxTuXNF4stndrMDNalW4KOfAkYV9Ses+J57H9IxgPol8Jm6clREU7jYx3H08RjdZZWIy/dP5oZrEtH1UcWeI0r8c9Z9Db2f+9Mwvj6c+q4+yHhBVcREKxXYb7OTgTrtvN4rWvvgz9aG6/FrZ3azAzWpaPCIytQx/Edub1lElt6KMPa9eelByqM8kdOs4/9XfvykBms45ePI/2MsY3BeuRWm8lk7P/es4DjJ/JixfK0He3jdT5l7OWIgGA9otTkNZ2DNY5ept+RXeMeH1QwLW5Ze30cWc6foTteJ9v7cIwfP49FPfNt7XaMrGBdWryyd8/o1L/xiHzvWt58XEtPbNpa2LV0+8m8vbVH902vGcMjjnjjy8PSCuasYF26beg73/nOKe6V3dvGU8HzxVV77x2f2LR3rXxc3e1BEXvC9f5dsNarya171DlYxw/aWyPM3jgekY4fjlunAOPUbxxRzRdybX2YZgXrUmBtrVadO42Ll8ZbZrZMx7lz5MN87Xdl9541vBRwW7c9ZQXr+MVj75Ts3Gv8UrZ1y8zoPF7b3zuTMD7EJNo7Z/V6xt+ONi4TEKyX+ZV6t2B9uBxjsI6n8+JewrVH7C0FfQTr2jb9KML073Ftcr6aOk7/HXmw/daDGvYm23jLzN4px3l74+nnI+9de/rW0nXS+b7G07ERcLEqd22L06Lzx0XGqdH5LUcRVHtPJzr3QQ1jX8YvEXGUG0e7R7ZxvHu3Hy1d7xasR6TrvEaw1qnFxT0RrOcF69aR1RhSFxfnwFHH0qnn+Jmxoz8+Pp5CPOc+1vFod+905dJjFudfKua3Iu2F1KW2e32N9pfqubY4a6k/44rrc06zj782tHdrz23OHlxq6P25AoI11/NeW+scrLFac/783SXI+YKO+Pe1ByVM740j1rhVYdrGU8FbKzvvI1iXbgMZfw90a4ItXSfdu9Y5tXfOQwzWfj5t3ret4Fk7hXzbP54jwXqbZyjP+zNeJz1yqjzeH5cSYt/zbe+IfrwccOTswW3tvO9uBATr3bjeS6udg/UI2KXPCh6PHLZut8kO1r2jx7hVJU4Dz7cjtwPNX790+8reAq21D/+tRxCOpzbXaheLy5ZOn2cH697tKEtnAvYesTiOaekI/civIi3te+9IebwMceSLw5G/H6+5noBgvZ71ne9JsG4Tj6fztu4NjcVL82f07hUvjrhj0cm0RZA+/fTTD/7/OOqIx+CtbUvX1fYeCLHU1hhae6ETbZyzInhpcVVc44zT6uOzfqPtpfCJLwDzX7DZs42HV8Q17GmLMc1/OCGCZ+nHw6fXj0ebe19ylvqz9MXnyO1a564Ijn2Pi7X2Fjvt+fn36wsI1uub39keBes27XgN8kjoHC3WuNL1nBWnsY/xaTu3+fCPdpYexL92i1C8fukZwGuncZfuX41+TtdTl56/m3G0NZ49OPKwjHndxtPA5zznd97O+MUsxh6n6tee2LR0BmHtl4m29rO32OnoHPW66wkI1utZ3/meLg3W+FYeKz3nWyy0iNOJR7fKjzQcg+G24bVkcWmwZn34L/1CUYR8HDmOP9kW9Y7ruuPR49o1wKUnLsWR47T6ee1B/UfCZGt+XRKs8ROLsTBrvt322btLD9FYC+l4DGZ8WZrfrhV9OHLr1LgyfO+a7NG/Ta+7noBgvZ71ne/p0mB9HH827ujinr3iXRKsS0eCt/3wj36O903Gf4vFNnG6Nm4vijrHQrA4BTz+ru/aEebS06CWjviXHhkY+58e1L/nuPTvlwTr0qnrtR+JP9K3MfTiPXG/cNwTHau3o5ZhG6f2x1DdWw0cbS39/u7Rn/470n+vuY6AYL2O81X2Ilj3mceVt0cW9+y3+uiPgZ9zKnjpAfi3ub469XPpd2OPjGEtANd+1WbtS8nSKeFLHst3SbBmnWKf/NYs9nyP/MpPtDFe7z7nIR97ffDv1xMQrNezvvM9CdZ94vEIJmthyCVHrOMRZsYp6giAWAQzHjVtCcViq7ieN9/WTu9uPYVq6Sfvos0jR2zZR6zjEWbGdfU3velNpyeffHJ/sv3vFRGqccQeIbm3jQuXbmu2tx//frcCgvVufa/a+vgotHM/oJeeU3vOE2ZisEunsi45+poDzq9Dnju2qZ1xQcnR+xH3CjmeAj3n3sNxJW/WUUpcO41VqXHf6dYW+4vbT+JLxrgtLYY6cvQZz32OHz0ft9uc1hxPQ2/9UPi4v/FpW+c8inDLLOodR9LxN7O1hWk85GO8vr32nvGLQNbfzt789e+5AoI111NrDQTGR/FtPdqwwXB2uxjX/eIoK75UTNdUI/jjemosPIpVtrbbCcSZirieGl9iwja+8MUXlTgyjssMR45Spz2PZz0yjq5vNyrvulRAsF4q6P3tBMab9jNuCWmHoMPlBMbr/1s/TFCu8zr0kIBgNSEeS4Hx9GvW6uDHEtOgLxYYL1H4sncx6b02IFjvld/O70tgXN157kMH7qvf9vvsFBif0ORotXedBWvv+un9BQLjCswjz369YHfeSmBRYFzw50te/4kiWPvX0AhuKRArOuNpQtMtKT7QbgnpbRcJxOrpWEUdWyx+euqppw6vIr5ox958ZwKC9c5oNdxBYHz4vaPWDlV79vRxPFrNemDJs0eo50gEa8+66XWiwHw15rn37SZ2Q1OPocD8qVJH7g9+DIlaDlmwtiybTmcKxCnh6SfiYjXmOfceZvZDW4+fQNz/Oj3AI+5bjXC19RcQrP1raAQECBAgUEhAsBYqhq4QIECAQH8Bwdq/hkZAgAABAoUEBGuhYugKAQIECPQXEKz9a2gEBAgQIFBIQLAWKoauECBAgEB/AcHav4ZGQIAAAQKFBARroWLoCgECBAj0FxCs/WtoBAQIECBQSECwFiqGrhAgQIBAfwHB2r+GRkCAAAEChQQEa6Fi6AoBAgQI9BcQrP1raAQECBAgUEhAsBYqhq4QIECAQH8Bwdq/hkZAgAABAoUEBGuhYugKAQIECPQXEKz9a2gEBAgQIFBIQLAWKoauECBAgEB/AcHav4ZGQIAAAQKFBARroWLoCgECBAj0FxCs/WtoBAQIECBQSECwFiqGrhAgQIBAfwHB2r+GRkCAAAEChQQEa6Fi6AoBAgQI9BcQrP1raAQECBAgUEhAsBYqhq4QIECAQH8Bwdq/hkZAgAABAoUEBGuhYugKAQIECPQXEKz9a2gEBAgQIFBIQLAWKoauECBAgEB/AcHav4ZGQIAAAQKFBARroWLoCgECBAj0FxCs/WtoBAQIECBQSECwFiqGrhAgQIBAfwHB2r+GRkCAAAEChQQEa6Fi6AoBAgQI9BcQrP1raAQECBAgUEhAsBYqhq4QIECAQH8Bwdq/hkZAgAABAoUEBGuhYugKAQIECPQXEKz9a2gEBAgQIFBIQLAWKoauECBAgEB/AcHav4ZGQIAAAQKFBARroWLoCgECBAj0FxCs/WtoBAQIECBQSECwFiqGrhAgQIBAfwHB2r+GRkCAAAEChQQEa6Fi6AoBAgQI9BcQrP1raAQECBAgUEhAsBYqhq4QIECAQH8Bwdq/hkZAgAABAoUEBGuhYugKAQIECPQXEKz9a2gEBAgQIFBIQLAWKoauECBAgEB/AcHav4ZGQIAAAQKFBARroWLoCgECBAj0FxCs/WtoBAQIECBQSECwFiqGrhAgQIBAfwHB2r+GRkCAAAEChQQEa6Fi6AoBAgQI9BcQrP1raAQECBAgUEhAsBYqhq4QIECAQH8Bwdq/hkZAgAABAoUEBGuhYugKAQIECPQXEKz9a2gEBAgQIFBIQLAWKoauECBAgEB/AcHav4ZGQIAAAQKFBARroWLoCgECBAj0FxCs/WtoBAQIECBQSECwFiqGrhAgQIBAfwHB2r+GRkCAAAEChQQEa6Fi6AoBAgQI9BcQrP1raAQECBAgUEhAsBYqhq4QIECAQH8Bwdq/hkZAgAABAoUEBGuhYugKAQIECPQXEKz9a2gEBAgQIFBIQLAWKoauECBAgEB/AcHav4ZGQIAAAQKFBARroWLoCgECBAj0FxCs/WtoBAQIECBQSECwFiqGrhAgQIBAfwHB2r+GRkCAAAEChQQEa6Fi6AoBAgQI9BcQrP1raAQECBAgUEhAsBYqhq4QIECAQH8Bwdq/hkZAgAABAoUEBGuhYugKAQIECPQXEKz9a2gEBAgQIFBIQLAWKoauECBAgEB/AcHav4ZGQIAAAQKFBARroWLoCgECBAj0FxCs/WtoBAQIECBQSECwFiqGrhAgQIBAfwHB2r+GRkCAAAEChQQEa6Fi6AoBAgQI9BcQrP1raAQECBAgUEhAsBYqhq4QIECAQH8Bwdq/hkZAgAABAoUEBGuhYugKAQIECPQXEKz9a2gEBAgQIFBIQLAWKoauECBAgEB/AcHav4ZGQIAAAQKFBARroWLoCgECBAj0FxCs/WtoBAQIECBQSECwFiqGrhAgQIBAfwHB2r+GRkCAAAEChQQEa6Fi6AoBAgQI9BcQrP1raAQECBAgUEhAsBYqhq4QIECAQH8Bwdq/hkZAgAABAoUEBGuhYugKAQIECPQXEKz9a2gEBAgQIFBIQLAWKoauECBAgEB/AcHav4ZGQIAAAQKFBARroWLoCgECBAj0FxCs/WtoBAQIECBQSECwFiqGrhAgQIBAfwHB2r+GRkCAAAEChQQEa6Fi6AoBAgQI9BcQrP1raAQECBAgUEhAsBYqhq4QIECAQH8Bwdq/hkZAgAABAoUEBGuhYugKAQIECPQXEKz9a2gEBAih2JHBAAAEQUlEQVQQIFBIQLAWKoauECBAgEB/AcHav4ZGQIAAAQKFBARroWLoCgECBAj0FxCs/WtoBAQIECBQSECwFiqGrhAgQIBAfwHB2r+GRkCAAAEChQQEa6Fi6AoBAgQI9BcQrP1raAQECBAgUEhAsBYqhq4QIECAQH8Bwdq/hkZAgAABAoUEBGuhYugKAQIECPQXEKz9a2gEBAgQIFBIQLAWKoauECBAgEB/AcHav4ZGQIAAAQKFBARroWLoCgECBAj0FxCs/WtoBAQIECBQSECwFiqGrhAgQIBAfwHB2r+GRkCAAAEChQQEa6Fi6AoBAgQI9BcQrP1raAQECBAgUEhAsBYqhq4QIECAQH8Bwdq/hkZAgAABAoUEBGuhYugKAQIECPQXEKz9a2gEBAgQIFBIQLAWKoauECBAgEB/AcHav4ZGQIAAAQKFBARroWLoCgECBAj0FxCs/WtoBAQIECBQSECwFiqGrhAgQIBAfwHB2r+GRkCAAAEChQQEa6Fi6AoBAgQI9BcQrP1raAQECBAgUEhAsBYqhq4QIECAQH8Bwdq/hkZAgAABAoUEBGuhYugKAQIECPQXEKz9a2gEBAgQIFBIQLAWKoauECBAgEB/AcHav4ZGQIAAAQKFBARroWLoCgECBAj0FxCs/WtoBAQIECBQSECwFiqGrhAgQIBAfwHB2r+GRkCAAAEChQQEa6Fi6AoBAgQI9BcQrP1raAQECBAgUEhAsBYqhq4QIECAQH8Bwdq/hkZAgAABAoUEBGuhYugKAQIECPQXEKz9a2gEBAgQIFBIQLAWKoauECBAgEB/AcHav4ZGQIAAAQKFBARroWLoCgECBAj0FxCs/WtoBAQIECBQSECwFiqGrhAgQIBAfwHB2r+GRkCAAAEChQQEa6Fi6AoBAgQI9BcQrP1raAQECBAgUEhAsBYqhq4QIECAQH8Bwdq/hkZAgAABAoUEBGuhYugKAQIECPQXEKz9a2gEBAgQIFBIQLAWKoauECBAgEB/AcHav4ZGQIAAAQKFBARroWLoCgECBAj0FxCs/WtoBAQIECBQSECwFiqGrhAgQIBAfwHB2r+GRkCAAAEChQQEa6Fi6AoBAgQI9BcQrP1raAQECBAgUEhAsBYqhq4QIECAQH8Bwdq/hkZAgAABAoUEBGuhYugKAQIECPQXEKz9a2gEBAgQIFBIQLAWKoauECBAgEB/AcHav4ZGQIAAAQKFBARroWLoCgECBAj0FxCs/WtoBAQIECBQSECwFiqGrhAgQIBAfwHB2r+GRkCAAAEChQQEa6Fi6AoBAgQI9BcQrP1raAQECBAgUEhAsBYqhq4QIECAQH8Bwdq/hkZAgAABAoUEBGuhYugKAQIECPQXEKz9a2gEBAgQIFBIQLAWKoauECBAgEB/AcHav4ZGQIAAAQKFBARroWLoCgECBAj0FxCs/WtoBAQIECBQSOD/AAbjI5gNvVq1AAAAAElFTkSuQmCC" alt="Header image" />
<figcaption>This is the image caption.</figcaption>
</figure>
</div>
</div>
<aside class="summary-box">
<ul class="icon-list ">
<li><i class="icon-calendar" aria-hidden="true"></i><span><time datetime="2018-11-18T18:00:00+02:00">Saturday 18 november 2018 between 18:00 and 22:00</time>Saturday 18 november with continuous activities</span></li>
<li><i class="icon-marker" aria-hidden="true"></i>Inner city</li>
</ul>
<button type="button" class="button button-secondary icon-arrow-right ">
Register for this event
</button>
</aside>
<nav class="table-of-contents" aria-labelledby="table-of-contents-header">
<div class="content-container">
<h4 id="table-of-contents-header">On this page</h4>
<ul class="three-column">
<li><a href="#" class="active">Anchor link 1</a></li>
<li><a href="#">Anchor link 2</a></li>
<li><a href="#">Anchor link 3</a></li>
<li><a href="#">Anchor link 4</a></li>
<li><a href="#">Anchor link 5</a></li>
<li><a href="#">Anchor link 6</a></li>
</ul>
</div>
</nav>
<div class="tabs opening-hours" data-tabs>
<ul role="tablist">
<li role="presentation">
<a role="tab" href="#opening-hoursweek" aria-controls="opening-hoursweek">
This week
</a>
</li>
<li role="presentation">
<a role="tab" href="#opening-hoursmonth" aria-controls="opening-hoursmonth">
This month
</a>
</li>
</ul>
<div role="tabpanel" id="opening-hoursweek">
<div class="openinghours-widget" data-type="week-from-now">
<div vocab="http://schema.org/" typeof="Library" class="openinghours openinghours--list">
<ul class="openinghours--days">
<li class="openinghours--day openinghours--day-open">
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-active" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-14">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Wednesday">Wednesday
</span>
<span class="openinghours--date-day">14</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li class="openinghours--day openinghours--day-open">
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-15">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Thursday">Thursday
</span>
<span class="openinghours--date-day">15</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li class="openinghours--day openinghours--day-open">
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-16">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Friday">Friday
</span>
<span class="openinghours--date-day">16</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li class="openinghours--day openinghours--day-open">
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-17">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Saturday">Saturday
</span>
<span class="openinghours--date-day">17</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="12:00" aria-label="12:00">
12:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li class="openinghours--day openinghours--day-open">
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-18">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Sunday">Sunday
</span>
<span class="openinghours--date-day">18</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="22:00" aria-label="22:00">
22:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="00:00" aria-label="00:00">
00:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li class="openinghours--day openinghours--day-open">
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-19">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Monday">Monday
</span>
<span class="openinghours--date-day">19</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li class="openinghours--day openinghours--day-open">
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-20">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Tuesday">Tuesday
</span>
<span class="openinghours--date-day">20</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div role="tabpanel" id="opening-hoursmonth">
<div class="openinghours-widget" data-type="month">
<div vocab="http://schema.org/" typeof="Library" class="openinghours openinghours--calendar">
<div class="openinghours--header">
<button class="openinghours--prev">
Previous
</button>
<div class="openinghours--month">
November 2018
</div>
<button class="openinghours--next">
Next
</button>
</div>
<ul class="openinghours--days">
<li aria-hidden="true" class="openinghours--day openinghours--day--day-of-week">Mo
</li>
<li aria-hidden="true" class="openinghours--day openinghours--day--day-of-week">Tu
</li>
<li aria-hidden="true" class="openinghours--day openinghours--day--day-of-week">We
</li>
<li aria-hidden="true" class="openinghours--day openinghours--day--day-of-week">Th
</li>
<li aria-hidden="true" class="openinghours--day openinghours--day--day-of-week">Fr
</li>
<li aria-hidden="true" class="openinghours--day openinghours--day--day-of-week">Sa
</li>
<li aria-hidden="true" class="openinghours--day openinghours--day--day-of-week">Su
</li>
<li aria-hidden="true" class="openinghours--day openinghours--day-disabled"></li>
<li aria-hidden="true" class="openinghours--day openinghours--day-disabled"></li>
<li aria-hidden="true" class="openinghours--day openinghours--day-disabled"></li>
<li aria-setsize="30" aria-posinset="1" tabindex="-1" class="openinghours--day openinghours--day-closed openinghours--day-passed">
<span aria-hidden="true">1</span>
<div class="openinghours openinghours--details openinghours--day-closed openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-01">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Thursday">Thursday
</span>
<span class="openinghours--date-day">1</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">closed</span>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="2" tabindex="-1" class="openinghours--day openinghours--day-closed openinghours--day-passed">
<span aria-hidden="true">2</span>
<div class="openinghours openinghours--details openinghours--day-closed openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-02">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Friday">Friday
</span>
<span class="openinghours--date-day">2</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">closed</span>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="3" tabindex="-1" class="openinghours--day openinghours--day-closed openinghours--day-passed">
<span aria-hidden="true">3</span>
<div class="openinghours openinghours--details openinghours--day-closed openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-03">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Saturday">Saturday
</span>
<span class="openinghours--date-day">3</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">closed</span>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="4" tabindex="-1" class="openinghours--day openinghours--day-closed openinghours--day-passed">
<span aria-hidden="true">4</span>
<div class="openinghours openinghours--details openinghours--day-closed openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-04">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Sunday">Sunday
</span>
<span class="openinghours--date-day">4</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">closed</span>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="5" tabindex="-1" class="openinghours--day openinghours--day-closed openinghours--day-passed">
<span aria-hidden="true">5</span>
<div class="openinghours openinghours--details openinghours--day-closed openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-05">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Monday">Monday
</span>
<span class="openinghours--date-day">5</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">closed</span>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="6" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">6</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-06">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Tuesday">Tuesday
</span>
<span class="openinghours--date-day">6</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="7" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">7</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-07">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Wednesday">Wednesday
</span>
<span class="openinghours--date-day">7</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="8" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">8</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-08">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Thursday">Thursday
</span>
<span class="openinghours--date-day">8</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="9" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">9</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-09">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Friday">Friday
</span>
<span class="openinghours--date-day">9</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="10" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">10</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-10">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Saturday">Saturday
</span>
<span class="openinghours--date-day">10</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="12:00" aria-label="12:00">
12:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="11" tabindex="-1" class="openinghours--day openinghours--day-closed openinghours--day-passed">
<span aria-hidden="true">11</span>
<div class="openinghours openinghours--details openinghours--day-closed openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-11">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Sunday">Sunday
</span>
<span class="openinghours--date-day">11</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">closed</span>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="12" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">12</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-12">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Monday">Monday
</span>
<span class="openinghours--date-day">12</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="13" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">13</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-13">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Tuesday">Tuesday
</span>
<span class="openinghours--date-day">13</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="14" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">14</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-14">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Wednesday">Wednesday
</span>
<span class="openinghours--date-day">14</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="15" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">15</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-15">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Thursday">Thursday
</span>
<span class="openinghours--date-day">15</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="16" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">16</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-16">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Friday">Friday
</span>
<span class="openinghours--date-day">16</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="17" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">17</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-17">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Saturday">Saturday
</span>
<span class="openinghours--date-day">17</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="12:00" aria-label="12:00">
12:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="18" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">18</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-18">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Sunday">Sunday
</span>
<span class="openinghours--date-day">18</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="22:00" aria-label="22:00">
22:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="00:00" aria-label="00:00">
00:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="19" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">19</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-19">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Monday">Monday
</span>
<span class="openinghours--date-day">19</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="20" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">20</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-20">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Tuesday">Tuesday
</span>
<span class="openinghours--date-day">20</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="21" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">21</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-21">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Wednesday">Wednesday
</span>
<span class="openinghours--date-day">21</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="22" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">22</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-22">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Thursday">Thursday
</span>
<span class="openinghours--date-day">22</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="23" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">23</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-23">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Friday">Friday
</span>
<span class="openinghours--date-day">23</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="24" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">24</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-24">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Saturday">Saturday
</span>
<span class="openinghours--date-day">24</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="12:00" aria-label="12:00">
12:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="25" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">25</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-25">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Sunday">Sunday
</span>
<span class="openinghours--date-day">25</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="22:00" aria-label="22:00">
22:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="00:00" aria-label="00:00">
00:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="26" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">26</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-26">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Monday">Monday
</span>
<span class="openinghours--date-day">26</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="27" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">27</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-27">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Tuesday">Tuesday
</span>
<span class="openinghours--date-day">27</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="28" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">28</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date openinghours--special-day" property="validFrom validThrough" datetime="2018-11-28">
<span class="openinghours--date-special-day">Yesterday</span>
<span class="openinghours--date-between">, </span>
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Wednesday">Wednesday
</span>
<span class="openinghours--date-day">28</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="29" tabindex="0" class="openinghours--day openinghours--day-open openinghours--day-active">
<span aria-hidden="true">29</span>
<div class="openinghours openinghours--details openinghours--day-open" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date openinghours--special-day" property="validFrom validThrough" datetime="2018-11-29">
<span class="openinghours--date-special-day">Today</span>
<span class="openinghours--date-between">, </span>
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Thursday">Thursday
</span>
<span class="openinghours--date-day">29</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open </span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">van </span>
<time datetime="09:00" aria-label="09:00">9 u </time>
<span class="openinghours--time-separator">tot </span>
<time datetime="12:30" aria-label="12:30">12.30 u </time>
</div>
<div class="openinghours--times-between">en </div>
<div class="openinghours--time">
<span class="openinghours--time-prefix">van </span>
<time datetime="13:30" aria-label="13:30">13.30 u </time>
<span class="openinghours--time-separator">tot </span>
<time datetime="16:00" aria-label="16:00">16 u.</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="30" tabindex="-1" class="openinghours--day openinghours--day-open">
<span aria-hidden="true">30</span>
<div class="openinghours openinghours--details openinghours--day-open" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date openinghours--special-day" property="validFrom validThrough" datetime="2018-11-30">
<span class="openinghours--date-special-day">Tomorrow</span>
<span class="openinghours--date-between">, </span>
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Friday">Friday
</span>
<span class="openinghours--date-day">30</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-hidden="true" class="openinghours--day openinghours--day-disabled"></li>
<li aria-hidden="true" class="openinghours--day openinghours--day-disabled"></li>
</ul>
</div>
</div>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et facilisis augue. Donec mi mauris, pretium eu nunc at, maximus semper libero. Etiam rhoncus, ante eget pharetra consequat, purus libero varius quam, vel porttitor leo urna in odio. In id tellus ut ligula facilisis efficitur at vel urna. Vivamus iaculis felis non <strong>bold text</strong> tristique malesuada. Quisque venenatis, arcu sed luctus molestie, leo mauris commodo sem, eget <a href='https://stad.gent' alt='Stad Gent'>egestas orci</a> libero eu justo. Curabitur sollicitudin odio non vulputate tincidunt. Etiam vel dolor in massa dapibus bibendum sit amet vel ipsum. Donec sagittis, elit et hendrerit maximus, nulla tortor laoreet quam, id tincidunt massa neque a ex. Fusce suscipit, ipsum interdum elementum sodales, <a href='javascript:(void);' alt='Link'>tellus</a> sapien vehicula nisi, in condimentum neque nisl sit amet elit. Donec sed augue a elit sodales commodo pulvinar vitae nisl. Sed <a href='javascript:(void);' alt='File link' download>pharetra</a> ante non mollis consequat. Pellentesque a est neque. Nullam maximus ornare metus. Quisque porttitor turpis tristique faucibus efficitur.</p>
<p>Donec lacinia pellentesque eros id dignissim. Donec justo neque, consectetur ac rhoncus a, dictum non neque. Donec semper tempor nisl, eu blandit sapien consequat rhoncus. Nunc urna magna, consequat nec hendrerit a, blandit in arcu. Pellentesque tellus odio, volutpat a vehicula vitae, rhoncus quis arcu. Praesent ut sodales sem. Donec semper pharetra dui, ac ultrices nunc dignissim eget. Nunc hendrerit massa ligula, in condimentum enim mattis quis. Aenean ut felis turpis. Aliquam vitae cursus metus.</p>
<section class="highlight">
<div class="highlight__inner">
<i class="icon-star-empty" aria-hidden="true"></i>
<h3>Highlight</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>
</div>
</section>
<h2>This is an H2 paragraph title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et facilisis augue. Donec mi mauris, pretium eu nunc at, maximus semper libero. Etiam rhoncus, ante eget pharetra consequat, purus libero varius quam, vel porttitor leo urna in odio. In id tellus ut ligula facilisis efficitur at vel urna. Vivamus iaculis felis non <strong>bold text</strong> tristique malesuada. Quisque venenatis, arcu sed luctus molestie, leo mauris commodo sem, eget <a href='https://stad.gent' alt='Stad Gent'>egestas orci</a> libero eu justo. Curabitur sollicitudin odio non vulputate tincidunt. Etiam vel dolor in massa dapibus bibendum sit amet vel ipsum. Donec sagittis, elit et hendrerit maximus, nulla tortor laoreet quam, id tincidunt massa neque a ex. Fusce suscipit, ipsum interdum elementum sodales, <a href='javascript:(void);' alt='Link'>tellus</a> sapien vehicula nisi, in condimentum neque nisl sit amet elit. Donec sed augue a elit sodales commodo pulvinar vitae nisl. Sed <a href='javascript:(void);' alt='File link' download>pharetra</a> ante non mollis consequat. Pellentesque a est neque. Nullam maximus ornare metus. Quisque porttitor turpis tristique faucibus efficitur.</p>
<h3>This is an H3 paragraph title</h3>
<div class="responsive-table">
<div class="table-wrapper">
<table>
<tr>
<th scope="col">Header column 1</th>
<th scope="col">Header column 2</th>
<th scope="col">Header column 3</th>
<th scope="col">Header column 4</th>
<th scope="col">Header column 5</th>
<th scope="col">Header column 6</th>
</tr>
<tr>
<th scope="row">Header row 2</th>
<td class="success">Row 2, column 2</td>
<td>Row 2, column 3</td>
<td>Row 2, column 4</td>
<td>Row 2, column 5</td>
<td>Row 2, column 6</td>
</tr>
<tr>
<th scope="row">Header row 3</th>
<td>Row 3, column 2</td>
<td>Row 3, column 3</td>
<td>Row 3, column 4</td>
<td>Row 3, column 5</td>
<td>Row 3, column 6</td>
</tr>
<tr>
<th scope="row">Header row 4</th>
<td>Row 4, column 2</td>
<td>Row 4, column 3</td>
<td>Row 4, column 4</td>
<td class="error">Row 4, column 5</td>
<td>Row 4, column 6</td>
</tr>
<tr>
<th scope="row">Header row 5</th>
<td>Row 5, column 2</td>
<td>Row 5, column 3</td>
<td>Row 5, column 4</td>
<td>Row 5, column 5</td>
<td>Row 5, column 6</td>
</tr>
<tr>
<th scope="row">Header row 6</th>
<td>Row 6, column 2</td>
<td>Row 6, column 3</td>
<td class="warning">Row 6, column 4</td>
<td>Row 6, column 5</td>
<td>Row 6, column 6</td>
</tr>
<tr>
<th scope="row">Header row 7</th>
<td>Row 7, column 2</td>
<td>Row 7, column 3</td>
<td>Row 7, column 4</td>
<td>Row 7, column 5</td>
<td>Row 7, column 6</td>
</tr>
<tr>
<th scope="row">Header row 8</th>
<td>Row 8, column 2</td>
<td>Row 8, column 3</td>
<td>Row 8, column 4</td>
<td>Row 8, column 5</td>
<td>Row 8, column 6</td>
</tr>
<tr class="success">
<th scope="row">Header row 9</th>
<td>Row 9, column 2</td>
<td>Row 9, column 3</td>
<td>Row 9, column 4</td>
<td>Row 9, column 5</td>
<td>Row 9, column 6</td>
</tr>
<tr>
<th scope="row">Header row 10</th>
<td>Row 10, column 2</td>
<td>Row 10, column 3</td>
<td>Row 10, column 4</td>
<td>Row 10, column 5</td>
<td>Row 10, column 6</td>
</tr>
<caption>
This is a table caption that describes the table content.
</caption>
</table>
</div>
</div>
<div aria-labelledby="-list-description" class="table-list">
<ul>
<li>
<h3>Header row 2</h3>
<dl>
<dt>Header column 2</dt>
<dd class="success">Row 2, column 2</dd>
<dt>Header column 3</dt>
<dd>Row 2, column 3</dd>
<dt>Header column 4</dt>
<dd>Row 2, column 4</dd>
<dt>Header column 5</dt>
<dd>Row 2, column 5</dd>
<dt>Header column 6</dt>
<dd>Row 2, column 6</dd>
</dl>
</li>
<li>
<h3>Header row 3</h3>
<dl>
<dt>Header column 2</dt>
<dd>Row 3, column 2</dd>
<dt>Header column 3</dt>
<dd>Row 3, column 3</dd>
<dt>Header column 4</dt>
<dd>Row 3, column 4</dd>
<dt>Header column 5</dt>
<dd>Row 3, column 5</dd>
<dt>Header column 6</dt>
<dd>Row 3, column 6</dd>
</dl>
</li>
<li>
<h3>Header row 4</h3>
<dl>
<dt>Header column 2</dt>
<dd>Row 4, column 2</dd>
<dt>Header column 3</dt>
<dd>Row 4, column 3</dd>
<dt>Header column 4</dt>
<dd>Row 4, column 4</dd>
<dt>Header column 5</dt>
<dd class="error">Row 4, column 5</dd>
<dt>Header column 6</dt>
<dd>Row 4, column 6</dd>
</dl>
</li>
<li>
<h3>Header row 5</h3>
<dl>
<dt>Header column 2</dt>
<dd>Row 5, column 2</dd>
<dt>Header column 3</dt>
<dd>Row 5, column 3</dd>
<dt>Header column 4</dt>
<dd>Row 5, column 4</dd>
<dt>Header column 5</dt>
<dd>Row 5, column 5</dd>
<dt>Header column 6</dt>
<dd>Row 5, column 6</dd>
</dl>
</li>
<li>
<h3>Header row 6</h3>
<dl>
<dt>Header column 2</dt>
<dd>Row 6, column 2</dd>
<dt>Header column 3</dt>
<dd>Row 6, column 3</dd>
<dt>Header column 4</dt>
<dd class="warning">Row 6, column 4</dd>
<dt>Header column 5</dt>
<dd>Row 6, column 5</dd>
<dt>Header column 6</dt>
<dd>Row 6, column 6</dd>
</dl>
</li>
<li>
<h3>Header row 7</h3>
<dl>
<dt>Header column 2</dt>
<dd>Row 7, column 2</dd>
<dt>Header column 3</dt>
<dd>Row 7, column 3</dd>
<dt>Header column 4</dt>
<dd>Row 7, column 4</dd>
<dt>Header column 5</dt>
<dd>Row 7, column 5</dd>
<dt>Header column 6</dt>
<dd>Row 7, column 6</dd>
</dl>
</li>
<li>
<h3>Header row 8</h3>
<dl>
<dt>Header column 2</dt>
<dd>Row 8, column 2</dd>
<dt>Header column 3</dt>
<dd>Row 8, column 3</dd>
<dt>Header column 4</dt>
<dd>Row 8, column 4</dd>
<dt>Header column 5</dt>
<dd>Row 8, column 5</dd>
<dt>Header column 6</dt>
<dd>Row 8, column 6</dd>
</dl>
</li>
<li class="success">
<h3>Header row 9</h3>
<dl>
<dt>Header column 2</dt>
<dd>Row 9, column 2</dd>
<dt>Header column 3</dt>
<dd>Row 9, column 3</dd>
<dt>Header column 4</dt>
<dd>Row 9, column 4</dd>
<dt>Header column 5</dt>
<dd>Row 9, column 5</dd>
<dt>Header column 6</dt>
<dd>Row 9, column 6</dd>
</dl>
</li>
<li>
<h3>Header row 10</h3>
<dl>
<dt>Header column 2</dt>
<dd>Row 10, column 2</dd>
<dt>Header column 3</dt>
<dd>Row 10, column 3</dd>
<dt>Header column 4</dt>
<dd>Row 10, column 4</dd>
<dt>Header column 5</dt>
<dd>Row 10, column 5</dd>
<dt>Header column 6</dt>
<dd>Row 10, column 6</dd>
</dl>
</li>
</ul>
<div class="list-description" id="-list-description">
This is a table caption that describes the table content.
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et facilisis augue. Donec mi mauris, pretium eu nunc at, maximus semper libero. Etiam rhoncus, ante eget pharetra consequat, purus libero varius quam, vel porttitor leo urna in odio.</p>
<section class="cta-block image-none">
<div class="cta-block__content">
<div class="feature-block secondary ">
<p>
<p>Nulla nec eros lorem. Morbi at augue eu purus congue auctor. Sed id volutpat odio. Nunc congue diam vel diam venenatis, ut consequat urna dapibus. Vivamus at lobortis odio. Sed felis mauris, mattis eget purus at, pharetra ullamcorper risus.</p>
<ul class="links">
<li>
<a href='#' class="button button-large button-secondary">
In the summertime </a>
</li>
<li>
<a href='#' class="standalone-link">
When the weather is hot </a>
</li>
</ul class="links">
</p>
</div>
</div>
</section>
<section class="cta-block image-left">
<div class="cta-block__image">
<img src="https://via.placeholder.com/570x570&text=1:1+(570x570)" alt="Image alt text" />
</div>
<div class="cta-block__content">
<div class="feature-block secondary ">
<p>
<p>Nulla nec eros lorem. Morbi at augue eu purus congue auctor. Sed id volutpat odio. Nunc congue diam vel diam venenatis, ut consequat urna dapibus. Vivamus at lobortis odio. Sed felis mauris, mattis eget purus at, pharetra ullamcorper risus.</p>
<ul class="links">
<li>
<a href='#' class="button button-large button-secondary">
In the summertime </a>
</li>
<li>
<a href='#' class="standalone-link">
When the weather is hot </a>
</li>
</ul class="links">
</p>
</div>
</div>
</section>
<h4>This is an H4 paragraph title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et facilisis augue. Donec mi mauris, pretium eu nunc at, maximus semper libero. Etiam rhoncus, ante eget pharetra consequat, purus libero varius quam, vel porttitor leo urna in odio.</p>
<div class="image-gallery--wrapper multiple">
<ul class="image-gallery js-lightbox">
<li>
<a href="https://loremflickr.com/735/459/ghent?random=1" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://loremflickr.com/735/459/ghent?random=1" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://loremflickr.com/735/459/ghent?random=2" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://loremflickr.com/735/459/ghent?random=2" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://loremflickr.com/735/459/ghent?random=3" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://loremflickr.com/735/459/ghent?random=3" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://loremflickr.com/735/459/ghent?random=4" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://loremflickr.com/735/459/ghent?random=4" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://loremflickr.com/735/459/ghent?random=5" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://loremflickr.com/735/459/ghent?random=5" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://loremflickr.com/735/459/ghent?random=6" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://loremflickr.com/735/459/ghent?random=6" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://loremflickr.com/735/459/ghent?random=7" class="gallery-link" aria-labelledby="image-gallery__open-gallery">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://loremflickr.com/735/459/ghent?random=7" alt="placeholder image alternative text" /></div>
</figure>
</a>
</li>
<li class="image-gallery__show-more">
<div class="show-more__content">
<span class="show-more__total">7</span>
<span>Show all photos <i class="icon-fullscreen-enter" aria-hidden="true"></i></span>
</div>
</li>
</ul>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
<p>Donec lacinia pellentesque eros id dignissim. Donec justo neque, consectetur ac rhoncus a, dictum non neque. Donec semper tempor nisl, eu blandit sapien consequat rhoncus. Nunc urna magna, consequat nec hendrerit a, blandit in arcu. Pellentesque tellus odio, volutpat a vehicula vitae, rhoncus quis arcu. Praesent ut sodales sem. Donec semper pharetra dui, ac ultrices nunc dignissim eget. Nunc hendrerit massa ligula, in condimentum enim mattis quis. Aenean ut felis turpis. Aliquam vitae cursus metus.</p>
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="https://loremflickr.com/735/459/ghent" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://loremflickr.com/735/459/ghent" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
<p>Quisque sollicitudin leo at erat sagittis aliquet. Nullam ipsum erat, aliquet vel scelerisque posuere, interdum vitae dolor. Morbi finibus nisi efficitur, laoreet risus id, mollis mauris. Donec eu interdum velit, at mattis leo. Suspendisse eget finibus diam. Aliquam condimentum nec elit a aliquam. Donec efficitur et enim et tempor. Vestibulum quis tempor purus. Cras id magna ante. Morbi nec purus vehicula, auctor erat eget, aliquet mi. Nam at ligula convallis, vestibulum ligula a, pretium tellus. Sed pretium vulputate iaculis.</p>
<div class="quote-wrapper">
<div class="quote">
<blockquote>
<div class="content">
<p>
This is a huge quote on lots of lines. Dessert cookie cotton candy. Gummies jelly beans cupcake liquorice carrot cake chocolate bar jelly-o gummies gingerbread.Bonbon marshmallow dragée danish lollipop cheesecake gingerbread.
</p>
</div>
<footer>
Daniel Termont, Mayor Ghent
</footer>
</blockquote>
</div>
</div>
<p>Nam lorem ex, posuere non lectus tempus, ornare scelerisque mauris. Integer vitae tortor orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas enim lectus, malesuada in hendrerit in, vulputate ut enim. Integer pretium elit purus, ac pulvinar augue scelerisque quis. In velit elit, luctus vitae nunc quis, hendrerit congue felis. Nulla tincidunt tincidunt cursus. Mauris pretium eu ex id aliquet. Aenean massa metus, posuere ac dui sit amet, volutpat interdum libero.</p>
<section class="contact-details contact-details--with-image">
<h2 class="h3">Contact details</h2>
<div class="contact-details-columns">
<div class="contact-details-column">
<ul class="icon-list ">
<li><i class="icon-marker" aria-hidden="true"></i><strong>Stadhuis</strong> — Botermarkt 1, 9000 Gent</li>
<li><i class="icon-normalphone" aria-hidden="true"></i><a class="no-icon" href="tel:+32 9 266 50 00" alt="Person tel">09 266 50 00</a></li>
<li><i class="icon-phone" aria-hidden="true"></i><a class="no-icon" href="tel:+32 476 23 42 98" alt="Person mobile phone">0476 23 42 98</a></li>
<li><i class="icon-fax" aria-hidden="true"></i><span><a class="no-icon" href="tel:+32 9 266 50 19" alt="Person fax number">09 266 50 19</a> (Fax)</span></li>
<li><i class="icon-envelope" aria-hidden="true"></i><a class="no-icon" href="mailto:jane.doe@stad.gent" alt="Person mail link">jane.doe@stad.gent</a></li>
<li><i class="icon-envelope" aria-hidden="true"></i><a class="no-icon" href="mailto:jane.doe@stad.gent" alt="Person mail link">jane.doe@stad.gent</a></li>
<li><i class="icon-url" aria-hidden="true"></i><a class="no-icon" href="http://stad.gent" alt="Website link">http://stad.gent</a></li>
<li><i class="icon-url" aria-hidden="true"></i><a class="no-icon" href="http://stad.gent" alt="Website link">http://stad.gent</a></li>
</ul>
</div>
<div class="contact-details-column">
<div class="image-wrapper" data-ratio="1:1">
<figure><img src="https://via.placeholder.com/400x400&text=1:1+(400x400)" alt="Person avatar" /></figure>
</div>
</div>
</div>
</section>
<p>Quisque sollicitudin leo at erat sagittis aliquet. Nullam ipsum erat, aliquet vel scelerisque posuere, interdum vitae dolor. Morbi finibus nisi efficitur, laoreet risus id, mollis mauris. Donec eu interdum velit, at mattis leo. Suspendisse eget finibus diam. Aliquam condimentum nec elit a aliquam. Donec efficitur et enim et tempor. Vestibulum quis tempor purus. Cras id magna ante. Morbi nec purus vehicula, auctor erat eget, aliquet mi. Nam at ligula convallis, vestibulum ligula a, pretium tellus. Sed pretium vulputate iaculis.</p>
<ul class="">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Nunc dignissim risus id metus.</li>
<li>Cras ornare tristique elit.</li>
<li>Vivamus vestibulum ntulla nec ante.</li>
<li>Praesent placerat risus quis eros.</li>
<li>Fusce pellentesque suscipit nibh.</li>
<li>Integer vitae libero ac risus egestas placerat.</li>
<li>Vestibulum commodo felis quis tortor.</li>
<li>Ut aliquam sollicitudin leo.</li>
</ul>
<ul class="accordion">
<li>
<h3>
<button class="accordion--button" aria-expanded="false" aria-controls="accordion--multiple--content--1">
First item
</button>
</h3>
<div class="accordion--content" id="accordion--multiple--content--1">
<p>Multiple item accordions are contained in a list element.</p>
<p>They are indicated with a 'plus\' or \'minus\' icon</p>
<p>Below is some nonsens text.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi culpa dolorum enim molestiae molestias nemo nulla quas sed, temporibus voluptatem!</p>
</div>
</li>
<li>
<h3>
<button class="accordion--button" aria-expanded="false" aria-controls="accordion--multiple--content--2">
Second item
</button>
</h3>
<div class="accordion--content" id="accordion--multiple--content--2">
<p>Single item accordions are indicated by a chevron.</p>
<p>Below is some nonsens text.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi culpa dolorum enim molestiae molestias nemo nulla quas sed, temporibus voluptatem!</p>
</div>
</li>
<li>
<h3>
<button class="accordion--button" aria-expanded="false" aria-controls="accordion--multiple--content--3">
Third item
</button>
</h3>
<div class="accordion--content" id="accordion--multiple--content--3">
<p>Single item accordions are indicated by a chevron.</p>
<p>Below is some nonsens text.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi culpa dolorum enim molestiae molestias nemo nulla quas sed, temporibus voluptatem!</p>
</div>
</li>
<li>
<h3>
<button class="accordion--button" aria-expanded="false" aria-controls="accordion--multiple--content--4">
Fourth item
</button>
</h3>
<div class="accordion--content" id="accordion--multiple--content--4">
<p>Single item accordions are indicated by a chevron.</p>
<p>Below is some nonsens text.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi culpa dolorum enim molestiae molestias nemo nulla quas sed, temporibus voluptatem!</p>
</div>
</li>
</ul>
<div class="video">
<div class="responsive-video">
<iframe width="100%" height="500" src="https://www.youtube.com/embed/S0vLmTWUmok" frameborder="0" title="Promofilm stad Gent." allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="audio-description">
<a href='https://www.youtube.com/embed/S0vLmTWUmok' class="standalone-link">
Watch this video with audio description </a>
</div>
</div>
<div class="timeline-wrapper">
<h2 class="visually-hidden">Timeline</h2>
<dl class="timeline accordion">
<div class="timeline-slot" role="listitem">
<dt>
<h3 class="dt-title">Paragraph title</h3>
</dt>
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
<h4 class="timeline-slot-title">
<button aria-expanded="true" aria-controls="timeline-slot-content--1" data-controls-img="timeline-slot-img--1" class="accordion--button">
Timeline item title
</button>
</h4>
<h5 class="timeline-slot-date">Timeline item subtitle/date</h5>
</div>
<div class="timeline-slot-content accordion--content accordion--expanded" id="timeline-slot-content--1" aria-hidden="false">
<div class="content-image hidden-desktop">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
<p>This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.</p>
<ol>
<li>Candy lollipops</li>
<li>Sugar sweetness</li>
<li>Toffee sticks</li>
</ol>
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--1" aria-hidden="true">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
</dd>
</div>
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
<h4 class="timeline-slot-title">
<button aria-expanded="true" aria-controls="timeline-slot-content--1b" data-controls-img="timeline-slot-img--1b" class="accordion--button">
Timeline item title
</button>
</h4>
<h5 class="timeline-slot-date">Timeline item subtitle/date</h5>
</div>
<div class="timeline-slot-content accordion--content accordion--expanded" id="timeline-slot-content--1b" aria-hidden="false">
<div class="content-image hidden-desktop">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
<p>This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.</p>
<ol>
<li>Candy lollipops</li>
<li>Sugar sweetness</li>
<li>Toffee sticks</li>
</ol>
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--1b" aria-hidden="false">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
</dd>
</div>
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
<h4 class="timeline-slot-title">
<button aria-expanded="true" aria-controls="timeline-slot-content--10" data-controls-img="timeline-slot-img--10" class="accordion--button">
Timeline item title
</button>
</h4>
<h5 class="timeline-slot-date">Timeline item subtitle/date</h5>
</div>
<div class="timeline-slot-content accordion--content accordion--expanded" id="timeline-slot-content--10" aria-hidden="false">
<div class="content-image hidden-desktop">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
<p>This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.</p>
<ol>
<li>Candy lollipops</li>
<li>Sugar sweetness</li>
<li>Toffee sticks</li>
</ol>
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--10" aria-hidden="true">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
</dd>
</div>
</div>
<div class="timeline-slot" role="listitem">
<dt>
<h3 class="dt-title">Paragraph title</h3>
</dt>
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
<h4 class="timeline-slot-title">
<button aria-expanded="false" aria-controls="timeline-slot-content--2" data-controls-img="timeline-slot-img--2" class="accordion--button">
Timeline item title
</button>
</h4>
<h5 class="timeline-slot-date">Timeline item subtitle/date</h5>
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--2" aria-hidden="true">
<div class="content-image hidden-desktop">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
<p>This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.</p>
<ul>
<li>Candy lollipops</li>
<li>Sugar sweetness</li>
<li>Toffee sticks</li>
</ul>
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--2" aria-hidden="true">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
</dd>
</div>
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
<h4 class="timeline-slot-title">
<button aria-expanded="false" aria-controls="timeline-slot-content--2b" data-controls-img="timeline-slot-img--2b" class="accordion--button">
Timeline item title
</button>
</h4>
<h5 class="timeline-slot-date">Timeline item subtitle/date</h5>
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--2b" aria-hidden="true">
<div class="content-image hidden-desktop">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
<p>This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.</p>
<ul>
<li>Candy lollipops</li>
<li>Sugar sweetness</li>
<li>Toffee sticks</li>
</ul>
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--2b" aria-hidden="true">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
</dd>
</div>
</div>
<div class="timeline-slot" role="listitem">
<dt>
<h3 class="dt-title">Paragraph title</h3>
</dt>
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
<h4 class="timeline-slot-title">
<button aria-expanded="false" aria-controls="timeline-slot-content--3" data-controls-img="timeline-slot-img--3" class="accordion--button">
Timeline item title
</button>
</h4>
<h5 class="timeline-slot-date">Timeline item subtitle/date</h5>
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--3" aria-hidden="true">
<div class="content-image hidden-desktop">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
<p>This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.</p>
<ul>
<li>Candy lollipops</li>
<li>Sugar sweetness</li>
<li>Toffee sticks</li>
</ul>
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--3" aria-hidden="true">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
</dd>
</div>
</div>
<div class="timeline-slot timeline-slot-reverse" role="listitem">
<dt>
<h3 class="dt-title">Paragraph title</h3>
</dt>
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
<h4 class="timeline-slot-title">
<button aria-expanded="false" aria-controls="timeline-slot-content--4" data-controls-img="timeline-slot-img--4" class="accordion--button">
Timeline item title
</button>
</h4>
<h5 class="timeline-slot-date">Timeline item subtitle/date</h5>
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--4" aria-hidden="true">
<div class="content-image hidden-desktop">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
<p>This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.</p>
<ul>
<li>Candy lollipops</li>
<li>Sugar sweetness</li>
<li>Toffee sticks</li>
</ul>
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--4" aria-hidden="true">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
</dd>
</div>
</div>
<div class="timeline-slot" role="listitem">
<dt>
<h3 class="dt-title">Paragraph title</h3>
</dt>
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
<h4 class="timeline-slot-title">
<button aria-expanded="false" aria-controls="timeline-slot-content--5" data-controls-img="timeline-slot-img--5" class="accordion--button">
Timeline item title
</button>
</h4>
<h5 class="timeline-slot-date">Timeline item subtitle/date</h5>
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--5" aria-hidden="true">
<div class="content-image hidden-desktop">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
<p>This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.</p>
<ul>
<li>Candy lollipops</li>
<li>Sugar sweetness</li>
<li>Toffee sticks</li>
</ul>
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--5" aria-hidden="true">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
</dd>
</div>
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
<h4 class="timeline-slot-title">
<button aria-expanded="false" aria-controls="timeline-slot-content--7" data-controls-img="timeline-slot-img--7" class="accordion--button">
Timeline item title
</button>
</h4>
<h5 class="timeline-slot-date">Timeline item subtitle/date</h5>
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--7" aria-hidden="true">
<div class="content-image hidden-desktop">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
<p>This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.</p>
<ul>
<li>Candy lollipops</li>
<li>Sugar sweetness</li>
<li>Toffee sticks</li>
</ul>
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--7" aria-hidden="true">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
</dd>
</div>
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
<h4 class="timeline-slot-title">
<button aria-expanded="false" aria-controls="timeline-slot-content--8" data-controls-img="timeline-slot-img--8" class="accordion--button">
Timeline item title
</button>
</h4>
<h5 class="timeline-slot-date">Timeline item subtitle/date</h5>
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--8" aria-hidden="true">
<div class="content-image hidden-desktop">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
<p>This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.</p>
<ul>
<li>Candy lollipops</li>
<li>Sugar sweetness</li>
<li>Toffee sticks</li>
</ul>
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--8" aria-hidden="true">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
</dd>
</div>
</div>
</dl>
</div>
</article>
<aside class="top">
<div class="documents accordion">
<h2>Documents</h2>
<ul class="links">
<li>
<a href='javascript:(void);' class="standalone-link" download>
In the summertime </a>
<span class="file-type">
PDF
<span class="file-size">
(102kb)
</span>
</span>
</li>
<li>
<a href='javascript:(void);' class="standalone-link" download>
When the weather is hot </a>
<span class="file-type">
PDF
<span class="file-size">
(102kb)
</span>
</span>
</li>
</ul>
<h3>
<button class="accordion--button" aria-expanded="false" aria-controls="documents--content--documents-1">
There are 3 other documents available
</button>
</h3>
<div class="accordion--content" id="documents--content--documents-1">
<ul class="links">
<li>
<a href='javascript:(void);' class="standalone-link" download>
And another one </a>
<span class="file-type">
PDF
<span class="file-size">
(102kb)
</span>
</span>
</li>
<li>
<a href='javascript:(void);' class="standalone-link" download>
And another one </a>
<span class="file-type">
PDF
<span class="file-size">
(102kb)
</span>
</span>
</li>
<li>
<a href='javascript:(void);' class="standalone-link" download>
And another one bites the dust </a>
<span class="file-type">
PDF
<span class="file-size">
(102kb)
</span>
</span>
</li>
</ul>
</div>
</div>
</aside>
</main>
<footer>
<section class="theme-footer">
<h2 class="visually-hidden">Theme footer</h2>
<div class="content-container">
<div class="bottom">
</div>
</div>
</section>
<section class="footer">
<h2 class="visually-hidden">Footer</h2>
<div class="footer-top">
<div class="content-container">
<div class="footer--column">
<div class="gentinfo-block dark-background">
<div class="gentinfo-block-content">
<h3 class="gentinfo-title">Gent<strong>info</strong></h3>
<p>Do you have questions, suggestions, complaints, ... about the City of Ghent? We are here for you!</p>
<p><i class="icon-clock" aria-hidden="true"></i>Monday to Saturday from 8.00 am until 7.00 pm.</p>
<ul class="icon-list inline">
<li><i class="icon-phone" aria-hidden="true"></i><a class="no-icon" href="tel:+32 9 210 10 10">09 210 10 10</a></li>
<li><i class="icon-envelope" aria-hidden="true"></i><a class="no-icon" href="mailto:gentinfo@stad.gent">gentinfo@stad.gent</a></li>
<li><i class="icon-subscribe" aria-hidden="true"></i><a class="no-icon" href="https://stad.gent/contact">Contact form</a></li>
</ul>
</div>
<button type="button" class="button button-secondary gentinfo-chat-button icon-chat-round icon-left ">
Chat with us
</button>
</div>
</div>
<div class="footer--column">
<h4>Useful links</h4>
<ul class="">
<li><a href="https://jobs.gent.be/">Vacancies</a></li>
<li><a href="https://stad.gent/over-gent-en-het-stadsbestuur/over-gent/kaarten-cijfers-en-data/gent-kaart/stadsplan">City plan</a></li>
<li><a href="https://persruimte.stad.gent/nl">City of Ghent newsroom</a></li>
</ul>
</div>
<div class="footer--column">
<h4>Follow the city of Ghent</h4>
<div class="social-list">
<ul class="">
<li><a href="https://www.facebook.com/stadsbestuurgent"><i aria-hidden="true" class="icon-facebook"></i><span class="visually-hidden">Facebook</span></a></li>
<li><a href="https://www.twitter.com/stadgent"><i aria-hidden="true" class="icon-twitter"></i><span class="visually-hidden">Twitter</span></a></li>
<li><a href="https://www.linkedin.com/company/stad-gent"><i aria-hidden="true" class="icon-linkedin"></i><span class="visually-hidden">LinkedIn</span></a></li>
<li><a href="https://www.youtube.com/channel/UCmJLf8SFG0D0GTd6LSSTQLw"><i aria-hidden="true" class="icon-youtube"></i><span class="visually-hidden">Youtube</span></a></li>
<li><a href="https://www.instagram.com/stadgent/"><i aria-hidden="true" class="icon-instagram"></i><span class="visually-hidden">Instagram</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer-bottom content-container">
<div class="footer--column">
<ul class="">
<li><a href="https://stad.gent/nl/over-gent-en-het-stadsbestuur/juridische-info/gebruiksvoorwaarden-website-stad-gent">Terms of use</a></li>
<li><a href="https://stad.gent/nl/over-gent-en-het-stadsbestuur/juridische-info/met-respect-voor-uw-privacy">Privacy</a></li>
<li><a href="https://stad.gent/nl/responsible-disclosure">Responsible disclosure</a></li>
<li><a href="https://stad.gent/nl/over-gent-en-het-stadsbestuur/juridische-info/toegankelijkheidsverklaring-stad-gent">Accessibility statement</a></li>
<li><a href="#">Cookie settings</a></li>
</ul>
</div>
<div class="footer--column partnership">
<span>In cooperation with District09</span><i aria-hidden="true" class="icon-district09"></i>
</div>
</div>
</section>
</footer>
{
"footerConfig": {
"gentinfo": {
"title": "gentinfo",
"description": "Do you have questions, suggestions, complaints, ... about the City of Ghent? We are here for you!",
"open": "Monday to Saturday from 8.00 am until 7.00 pm.",
"phone": {
"label": "09 210 10 10",
"machine": "+32 9 210 10 10"
},
"email": "gentinfo@stad.gent",
"form": "Contact form",
"chat": "Chat with us"
},
"disclaimer": {
"title": "Useful links",
"links": [
"Vacancies",
"City plan",
"City of Ghent newsroom"
]
},
"social": {
"title": "Follow the city of Ghent"
},
"bottom": {
"partnership": "In cooperation with District09",
"links": [
"Terms of use",
"Privacy",
"Responsible disclosure",
"Accessibility statement",
"Cookie settings"
]
}
}
}
.detail-layout {
@extend %content-container;
font-size: .9rem;
line-height: 1.8;
// Give each direct child a specific width.
// This is a fallback width given to all children of the detail layout.
.w7-o2,
> * {
@include desktop {
@include col(7);
@include col-offset(2);
}
}
> .content-header-container {
margin-right: -20px;
margin-left: -20px;
@include tablet {
width: calc(100% + 255px * 2);
margin-left: -255px;
padding-right: 255px;
padding-left: 255px;
}
&.accolade-title {
@include tablet {
// Set max width because the absolute title gets out of boundary.
.left {
max-width: calc(100% - (135px * 2 + 20px));
}
}
}
& + .summary-box,
& + .table-of-contents {
position: relative;
z-index: 1;
}
&.image {
& + .summary-box,
& + .table-of-contents {
margin: 20px 0 40px;
@include tablet {
margin: 120px 0 40px;
}
@include desktop {
max-width: calc($bp-max-content - 480px - 60px);
margin: -205px 0 100px;
}
}
}
&:not(.image) {
// @todo: + .teasers
& + .summary-box,
& + .table-of-contents,
& + .partner-block,
& + p {
@include col(12);
margin-top: -150px;
@include tablet {
margin-top: -120px;
}
}
+ .partner-block,
+ p {
position: relative;
max-width: 100%;
padding: 20px;
background-color: color('white');
z-index: 1;
@include tablet {
padding: 60px;
}
}
}
}
> div:not(.content-header-container),
> section,
> aside,
> article,
> nav {
margin-top: 60px;
margin-bottom: 60px;
@include desktop {
margin-top: 100px;
margin-bottom: 100px;
}
}
> ul,
> ol {
padding-left: 20px;
}
.w9-o1 {
@include desktop {
@include col(9);
@include col-offset(1);
}
}
.w10-o1,
> .highlight,
> .image-gallery--wrapper.multiple {
@include desktop {
@include col(10);
@include col-offset(1);
}
}
> ul.accordion {
@include desktop {
@include col(7);
@include col-offset(2);
}
.accordion--content p {
line-height: 1.75;
}
}
> .partner-block {
@include desktop {
@include col(12);
}
}
> .quote-wrapper {
@include desktop {
@include col(12);
> .quote {
@include col(7);
@include col-offset(4);
}
}
}
> .cta-block {
@include desktop {
@include col(11);
@include col-offset(1);
}
&.image-left,
&.image-right {
@include col(12);
}
}
> div.responsive-table {
margin-top: 20px;
margin-bottom: 20px;
}
> .table-of-contents {
margin-top: 60px;
margin-bottom: 60px;
}
> .contact-details--with-image {
@include col(12);
}
.w12,
> .timeline-wrapper,
> .programme-wrapper,
> .roadmap-wrapper {
@include col(12);
@include extra-wide;
}
.readspeaker-button {
display: block;
width: auto;
margin-top: -8px;
margin-bottom: 40px;
}
.openinghours-widget[data-type="month"] {
@include desktop {
@include month-widget-mobile;
}
@include breakpoint(1200px) {
@include month-widget-desktop;
}
}
> .full-width {
@include full-width;
}
}
$bulb-image-width: 120px;
aside.top,
aside.bottom {
@extend %content-container;
> * {
margin-top: 30px;
margin-bottom: 30px;
@include tablet {
margin-bottom: 60px;
}
@include desktop {
@include col(12);
width: 100%;
// Related teasers box should be wider.
&:not(.related-box-teasers) {
margin-left: 0;
padding-right: calc(5px + (2 / 12 * 100%));
padding-left: calc(5px + (2 / 12 * 100%));
}
}
}
> p {
padding-top: 0;
border-top: 0;
}
}
aside.top {
position: relative;
margin: 100px auto 0;
}
aside.bottom {
.changed-date {
@include desktop {
@include col(9);
@include col-offset(2);
}
padding: 0;
}
}