```
*/
[data-background-color="black"] {
background-color: black;
color: white; }
/*doc
---
title: Colors
name: colors
category: Base - Colors
---
## Supported Color names
All modern browsers support 140 color names we picked three base colors for the default pagebuilder accompanied with a couple of shade colors for wireframing.
The full list of HTML colors you can find here:http://www.w3schools.com/colors/colors_names.asp
## Open Colors
As base colors we use the open color scheme https://yeun.github.io/open-color/
It contains a gray and twelve colors that are tested on deuteranopia and protanopia mode.
Visit the website for more information about the colorscheme
### Colors
The ideal model is 60-30-10, where 60% of all website design go to a dominant color, 30% of web space can be filled with the subdominant color(s),
and 10% should be accentuated with an extra color (accent).
You don’t need to stick to this pattern, if you need more colors on your site.
You can add a few of subdominant, i.e. secondary colors,
but keep them all just 30% of the whole space.
Reference:
http://htmlcolorcodes.com/
#### Base colors
Each project has two or three main colors that are added in the system:
These are colors used everywhere and can include brand colors, neutrals, and a typically interactive digital blue.
Primary color:
This will be used for 60% of the website
Secondary color:
This will be used for accents (30% of the website)
Accent color:
Are used to stress details like links, call to actions, navigation etc....
$primary-color
#### Base colors shades
To get more options we create shades for our primary, secondary and accent color, this will be 20%, darker and 20%, lighter get down the intensity and have a more neutral shade.
primary-color-30
primary-color
primary-color-70
secondary-color-30
secondary-color
secondary-color-70
#### Neutrals
A selection of grayscale colors for background or text use
The gray colors are named based on brightness relative to the white, so color-gray-80 is a white color that has 80% darkness
The scale reflects a familiar range from dark to light, allows for injecting new options between.
$black
color-gray-80
color-gray-60
color-gray-40
color-gray-20
color-gray-10
*/
/***************************************
*
* Base Colors
* Add them in clear colour names.
*
*****************************************/
/***************************************
*
* Shades of Grey
* Only change if you need a different style of shades.
*
*****************************************/
/***************************************
*
* Base colour variables
* Add the three colours most used in the site as primary, secondary and accent colour
*
*****************************************/
/***************************************
*
* Base colour shades
* These are shades based on the base colours. Only change if you need a different style of shades.
*
*****************************************/
[data-background-color="red"] {
background-color: #D70A19;
color: white; }
/*doc
---
title: Typography
name: typography
category: Base - Typography
---
#### Typefaces
Here you see the typefaces that are used in the project
```html_example
Din Light
```
*/
/*doc
---
title: Lists
name: lists
category: Elements - Lists
---
#### List style types
There are several types of HTML list. List items are marked up using ‹li›
```html_example
None
Disc
Circle
Square
Decimal
Decimal leading zero
Upper roman
Lower greek
Lower alpha
Upper alpha
Armenian
Georgian
```
#### Unordered list
Unordered lists are marked up using ‹ul› tags. An unordered list describes a collection of items.
```html_example
Unordered list item
Unordered list item
Unordered list item
Unordered list item
Unordered list item
Unordered list item
```
#### Nested Unordered Lists
```html_example
Unordered list item
Nested unordered list item
Nested unordered list item
Nested unordered list item
Unordered list item
```
#### Ordered Lists
Ordered lists are marked up using ‹ol› tags. An ordered list may have various numbering schemes presented through CSS.
```html_example
Ordered list item
Ordered list item
Ordered list item
Ordered list item
Ordered list item
Ordered list item
```
*/
/*doc
---
title: Media
name: media
category: Elements - Media
---
#### Using media as links
https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H2
https://bitsofco.de/alternative-text-and-images/
https://responsiveimages.org/demos/
https://cloudfour.com/thinks/responsive-images-101-part-5-sizes/
#### Informative Images
Informative images are images that, as you would guess, provide some information. This information can be anything from a label, to supplementary information, to just an impression.
For informative images, the alternative text should convey the same information that the image does. This might be as simple as one word saying what the image is. For example, in the image below, images are used to label each section.
#### Functional images
Functional images are those that represent an action to be taken. Unlike informative images, which purely provide information for the user, functional images are used convey something actionable. These images are also typically tied to interactive elements such as links or buttons. For functional images, the alternative text should clearly communicate the action that is to be taken.
#### Decorative images
Decorative images are images that don’t convey any actual/actionable information to the viewer. Their purpose is purely styling. For example, a background pattern on an element does not provide any informative value to the user.
In these cases, an empty alt attribute should be provided. This allows the image to be simply skipped by the screenreader since it is of no use to a user with visual impairments.
#### complex images
Complex images, a type of informative image, are those that contain a very detailed and substantial amount of information. For example bar charts or graphs. For these images, it is suggested that we provide both short and long descriptions.
The short description should be provided via the alt attribute. The long description can be defined in some other element, and simply referenced using the longdesc/ aria-labelledby attributes, or by using the
and elements.
*/
/*doc
---
title: Logo
name: logo
parent: media
---
####Logo as PNG
####Logo as vector
*/
.site-logo {
position: absolute;
right: 0;
width: 100%; }
.site-logo img {
outline: 0;
border: 0;
max-width: 100%;
height: auto; }
.site-logo a {
text-decoration: none; }
.site-logo a:hover {
background-color: transparent; }
/*doc
---
title: Card image
name: card-image
parent: media
---
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
here you can find resets for the responsive card image and image effects for mouseover.
### data-image-effect="zoom"
```html_example
```
*/
/*doc
---
title: Full width banner
name: full-width-banner
parent: media
---
#### Using media as links
https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H2
#### Full Width Banner
Full width Banners are very powerful to attract the users attention because the large background image is visually stimulating
They can be used in top of a page or in the image addon somewhere in the page.
Best practice is to size down an image to keep it sharp, with screens getting bigger the best size to pick would be 1920x1080 with a ratio of 16:9
Best is to resize the image for smaller screensizes and load the appropriate image depending the used screen size.
reference
http://www.wordstream.com/blog/ws/2016/06/07/hero-images-guide
https://www.webmalama.com/the-best-full-screen-background-image-sizes-for-web-design/
In this example we use a full sized banner size 1920x1280
The screensize picked is half of the screen (50vh) and the position is center bottom because most content of this image seems to be at the bottom
The size of this image is 452kb
for wide screens min width 1200px
for desktops min-width:992px
for tablets min-width:768px
for tablets min-width:768px
*/
/*doc
---
title: Video background
name: video-background
parent: media
---
For showing background videos we use the script vide.js
http://vodkabears.github.io/vide/
for this script you upload an mp4, ogv, webm and jpg video.
They all must have the same name
By default video is muted, looped and starts automatically.
*/
/*doc
---
title: Text
name: text
category: Elements - Text
---
#### Inline Text Elements
```html_example
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
```
#### Blockquotes
Block quotes are marked up using ‹blockquote› tags. You may use an optional ‹cite› element to cite an attribution.
```html_example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
A paragraph (from the Ancient Greek παράγραφος paragraphs, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea.
A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
The oldest classical Greek and Latin writing had little or no space between words, and could be written in boustrophedon (alternating directions).
Over time, text direction (left to right) became standardized, and word dividers and terminal punctuation became common. The first way to divide sentences into groups was the original paragraphos,
similar to an underscore at the beginning of the new group.
The Greek paragraphos evolved into the pilcrow (¶), which in English manuscripts in the Middle Ages can be seen inserted inline between sentences. The hedera leaf (e.g. ☙) has also been used in the same way.
```
#### Lead text
A lead paragraph (also called a lead or lede) in journalism and sometimes other kinds of literature is the opening paragraph of an article, essay, news story or book chapter. Often called the lead, it usually occurs together with the headline or title.
It precedes the main body of the article, and it gives the reader the main idea of the story. In both spellings, the word rhymes with the word need.
```html_example
A lead paragraph (also called a lead or lede) in journalism and sometimes other kinds of literature is the opening paragraph of an article, essay, news story or book chapter. Often called the lead, it usually occurs together with the headline or title.
It precedes the main body of the article, and it gives the reader the main idea of the story. In both spellings, the word rhymes with the word need.
```
#### Medium Text
An additional medium text class as alternative for the large text.
```html_example
This is a lead paragraph. Lead paragraphs are preset with a body font size and a primary font, line height and spacing to match the overall vertical rhythm.
```
#### Large text
An additional lead class alters a paragraph’s presentation, and can be used at the start of an article
```html_example
This is a large text. Large texts are used in letterboxes and are preset with a body font size and a primary font, line height and spacing to match the overall vertical rhythm.
```
*/
@media screen and (min-width: 320px) {
p {
margin: 0 0 0.75em;
line-height: 1.4;
font-size: 18px;
font-size: 1.125rem; } }
@media screen and (min-width: 768px) {
p {
font-size: 22px;
font-size: 1.375rem; } }
@media screen and (min-width: 320px) {
.large-text {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.3;
font-family: "DIN Pro Bold"; } }
@media screen and (min-width: 768px) {
.large-text {
font-size: 48px;
font-size: 3rem; } }
/*doc
---
title: Inline text (Text-level Semantics)
name: inline
parent: text
---
#### Links and anchors
The a element is used to hyperlink text, be that to another page, a named fragment on the current page or any other location on the web.
According to WCAG 2.0, color isn’t sufficient for a link to be accessible. For general usability they suggest using underlines on links as a best practice.
Some rules to apply using text links
Reference: https://www.w3.org/WAI/WCAG20/quickref/20140916/#visual-audio-contrast-without-color https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/working-examples/G183/link-contrast.html https://www.sitepoint.com/15-rules-making-accessible-links/
```html_example
this is a text link
This is a reference to an external page that opens a new tab Opens in new window
```
#### Stressed emphasis
The em element is used to denote text with stressed emphasis, i.e., something you’d pronounce differently. Where italicizing is required for stylistic differentiation, the i element may be preferable.
```html_example
this is some text with one emphased element as an example
```
#### Strong importance
The strong element is used to denote text with strong importance. Where bolding is used for stylistic differentiation, the b element may be preferable.
```html_example
this is some text with a couple of words in a strong tag as an example
```
*/
b,
strong {
font-family: "DIN Pro Bold"; }
a {
color: #D70A19; }
/*doc
---
title: Heading
name: heading
parent: text
---
The styles for all of the header elements that are balanced and based on a modular scale.
```html_example
h1. first level header.
h2. Second level header.
h3. Third level header.
h4. Fourth level header.
h5. Fifth level header.
h6. Sixth level header.
```
The heading above is a first-level, heading one that may be used for page
titles as well as titles in sectioning elements including ‹body›, ‹section› and ‹article›.
Other headings are lower level, Use to create a document, section or article outline.
### Other Heading
#### Section title
Section titles are always part carnas thin and part handwriting
``` html_example
This is a section heading in a secondary font
```
#### Cards Heading
For Cards we use this heading
```html_example
This is a heading for cards
```
#### Articles sub-heading
For articles we use special heading
```html_example
This is a sub-header for articles
```
#### Widget title
Widget titles are special classes generated by WordPress widgets
```html_example
```
*/
.section-title {
font-family: "DIN Pro Bold";
color: #666666; }
.image-content h2 {
color: #D70A19;
text-transform: uppercase;
background-color: white;
font-family: "DIN Pro Bold";
padding: 8px 16px;
display: inline-block;
margin-bottom: 16px;
font-size: 2em; }
@media screen and (min-width: 992px) {
.image-content h2 {
font-size: 4.20873em; } }
.image-content h2 a {
color: #D70A19;
text-decoration: none;
text-transform: uppercase; }
.page-home-2 h2:hover {
background-color: #D70A19;
transition-property: all;
transition-duration: .3s; }
.page-home-2 h2:hover a {
color: #D70A19;
text-decoration: none;
text-transform: uppercase; }
.page-home-2 h2:hover a:hover {
background-color: #D70A19;
color: white;
transition-property: all;
transition-duration: .3s; }
.image-content h3 {
color: #D70A19;
font-family: "DIN Light";
display: block;
margin-bottom: 16px;
font-size: 2.36859em; }
.image-content h3 a, .image-content h3 span {
color: #D70A19;
text-decoration: none;
display: inline-block;
background-color: white;
padding: 8px 16px; }
.image-content h3 a:hover {
background-color: #D70A19;
color: white;
transition-property: all;
transition-duration: .3s; }
.copyright {
color: white;
font-size: 2.36859em; }
.copyright a {
text-decoration: none;
color: white; }
.copyright a .bold {
font-family: "DIN Pro Bold"; }
.share-social {
position: relative;
display: block;
background-color: #D70A19;
overflow: hidden;
border: 0; }
@media screen and (min-width: 320px) {
.share-social {
width: 100%; } }
@media screen and (min-width: 768px) {
.share-social {
width: 25em; } }
.share-social:before {
content: 'DEEL MIJN VERHAAL';
font-weight: bold;
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
height: 100%;
background-color: #D70A19;
padding: 0.6em 1em;
color: white;
opacity: 1;
transition: all 0.4s ease-in-out 0.4s; }
@media screen and (min-width: 320px) {
.share-social:before {
font-size: 1.5em; } }
@media screen and (min-width: 768px) {
.share-social:before {
font-size: 1.7em; } }
.share-social:hover ul li {
top: 30%; }
.share-social:hover:before {
opacity: 0;
top: -30%; }
.share-social ul {
list-style-type: none;
padding: 2em 1em;
margin: 0;
position: relative; }
.share-social ul li {
display: inline-block;
position: absolute;
margin-right: 0.6em;
top: 100%;
transition: top 0.6s ease-in-out 0.4s; }
.share-social ul li a {
font-size: 2em;
position: absolute;
color: white;
transition: all 0.6s ease; }
.share-social ul li a:hover {
background-color: transparent;
cursor: pointer;
color: black; }
.share-social ul li:nth-child(1) {
left: 1em;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s; }
.share-social ul li:nth-child(2) {
left: 4.5em;
-webkit-transition-delay: 0.4s;
transition-delay: 0.2s; }
.share-social ul li:nth-child(3) {
left: 8em;
-webkit-transition-delay: 0.6s;
transition-delay: 0.4s; }
/*doc
---
title: Buttons
name: buttons
category: Elements - Buttons
---
We have an HTML element specifically meant for controlling a user interface: button.
The distinction isn’t just semantic. 'button' and 'a' respond to different keyboard events, and screen readers treat them differently.
By using an 'a' , we tell screen readers that the standard behavior should apply.
Pressing the enter key should navigate to the URL of the link. Visually disabled users shouldn’t have to deal with confusing interactions
just because sighted users can’t tell the difference.
Reference:
https://css-tricks.com/use-button-element/
Each project requires different sets of button designs, for creating them we use the wonderful button styles from unicorn-ui. For more info and all
options check http://unicorn-ui.com/buttons/
By default we only import the shapes and sizes and border and borderless buttons, but depending the project you can decide which classes to use.
But in most cases we will use the following buttons
```html_example
some link buttonbutton with a long label
```
*/
.button {
font-family: "DIN Pro Bold"; }
.button-primary {
background-color: #D70A19;
border-color: #D70A19; }
.button-primary:hover {
background-color: #76050e; }
/*doc
---
title: Separator
name: separator
category: components
---
The separator is used to create space between elements if needed.
The default height is 80px;
*/
.wbb-separator-addon {
height: 200px; }
/*doc
---
title: Off Canvas
name: off-canvas
category: components off-canvas
---
*/
.launch-menu {
position: fixed;
top: 10px;
z-index: 999999;
width: 60px;
height: 60px;
cursor: pointer;
transition: all 0.3s ease; }
.c-hamburger {
display: block;
overflow: hidden;
margin: 0;
padding: 0;
width: 60px;
height: 60px;
font-size: 0;
text-indent: -9999px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
cursor: pointer;
transition: background 0.3s; }
.c-hamburger:focus {
outline: none;
background-color: transparent; }
.c-hamburger:hover {
background-color: transparent; }
.c-hamburger span {
display: block;
position: absolute;
top: 29px;
left: 9px;
right: 18px;
height: 8px;
width: 70%;
background: #D70A19; }
.c-hamburger span::before,
.c-hamburger span::after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 8px;
background-color: #D70A19;
content: ""; }
.c-hamburger span::before {
top: -15px; }
.c-hamburger span::after {
bottom: -15px; }
/**
* Hamburger to "x" (htx). Takes on a hamburger shape, bars slide
* down to center and transform into an "x".
*/
.c-hamburger--htx {
background-color: rgba(255, 255, 255, 0); }
.c-hamburger--htx span {
transition: background 0s 0.3s; }
.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
transition-duration: 0.3s, 0.3s;
transition-delay: 0.3s, 0s; }
.c-hamburger--htx span::before {
transition-property: top, transform; }
.c-hamburger--htx span::after {
transition-property: bottom, transform; }
/* active state, i.e. menu open */
.c-hamburger--htx.is-active {
background-color: transparent; }
.c-hamburger--htx.is-active span {
background: none; }
.c-hamburger--htx.is-active span::before {
top: 0;
transform: rotate(45deg); }
.c-hamburger--htx.is-active span::after {
bottom: 0;
transform: rotate(-45deg); }
.c-hamburger--htx.is-active span::before, .c-hamburger--htx.is-active span::after {
transition-delay: 0s, 0.3s; }
/* -----------------------------------------------------------------------------
NAVIGATION MENU
----------------------------------------------------------------------------- */
.mobile-menu.menu-left .launch-menu {
left: 20px; }
.mobile-menu.menu-left .launch-menu.active {
left: 250px; }
.mobile-menu.menu-left nav,
.mobile-menu.menu-left nav .sub-menu {
left: -320px; }
.mobile-menu.menu-left nav.active,
.mobile-menu.menu-left nav .sub-menu.active {
left: 0; }
.mobile-menu.menu-right .launch-menu {
right: 20px; }
.mobile-menu.menu-right .launch-menu.active {
right: 250px; }
.mobile-menu.menu-right nav,
.mobile-menu.menu-right nav .sub-menu {
right: -320px;
left: inherit; }
.mobile-menu.menu-right nav.active,
.mobile-menu.menu-right nav .sub-menu.active {
right: 0; }
@media screen and (min-width: 320px) {
.mobile-menu.mobile {
display: block; } }
@media screen and (min-width: 768px) {
.mobile-menu.mobile {
display: none; } }
@media screen and (min-width: 320px) {
.mobile-menu.tablet {
display: block; } }
@media screen and (min-width: 992px) {
.mobile-menu.tablet {
display: none; } }
@media screen and (min-width: 320px) {
.mobile-menu.desktop {
display: block; } }
.mobile-menu nav {
position: fixed;
top: 0;
z-index: 99999;
width: 320px;
height: 100%;
padding: 0;
overflow: hidden;
background-color: white;
transition: all 0.3s ease; }
.mobile-menu nav ul {
list-style: none;
padding: 0;
top: 0;
left: 0;
width: 340px;
height: 100%;
overflow-y: scroll; }
.mobile-menu nav ul li {
padding: 0.3em 1em;
border-bottom: 1px solid white;
transition: all 0.3s ease; }
.mobile-menu nav ul li a {
color: #D70A19;
text-decoration: none;
font-family: "DIN Pro Bold";
font-size: 24px;
font-size: 1.5rem; }
.mobile-menu nav ul li a:hover {
background-color: #D70A19;
color: white; }
.mobile-menu nav ul li:first-child {
margin-top: 60px; }
.mobile-menu nav ul li:last-child {
border-bottom: 0; }
.mobile-menu nav ul li:hover {
background-color: #D70A19; }
.mobile-menu nav ul li ul.sub-menu {
position: absolute;
top: 0;
background-color: white;
transition: all 0.3s ease;
display: none; }
.mobile-menu nav ul li ul.sub-menu li {
position: relative; }
.mobile-menu nav ul li ul.sub-menu li:first-child {
padding-left: 2em;
text-transform: uppercase; }
.mobile-menu nav ul li ul.sub-menu li:first-child button {
border: 0;
background-color: transparent;
font-size: 1em;
text-transform: uppercase;
-webkit-appearance: none;
font-family: "DIN Light"; }
.mobile-menu nav ul li ul.sub-menu li:first-child button:hover {
cursor: pointer; }
.mobile-menu nav ul li ul.sub-menu li:first-child:before {
content: '';
position: absolute;
top: 50%;
margin-top: -0.3em;
margin-left: 1em;
left: 0;
/* By using an em scale, the arrows will size with the font */
width: 0.6em;
height: 0.6em;
border-right: 0.2em solid #D70A19;
border-top: 0.2em solid #D70A19;
transform: rotate(-135deg); }
.mobile-menu nav ul li[class*="-has-children"] a {
position: relative; }
.mobile-menu nav ul li[class*="-has-children"] a:after {
content: '';
position: absolute;
top: 50%;
margin-top: -6px;
left: 0;
margin-left: 280px;
/* By using an em scale, the arrows will size with the font */
width: 12px;
height: 12px;
border-right: 3px solid #D70A19;
border-top: 3px solid #D70A19;
transform: rotate(45deg); }
.mobile-menu nav ul li:not(.menu-item-has-children) a:after {
content: '';
border: 0; }
.main-container {
transition: all 0.3s ease;
transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0); }
.main-container.translate-left {
transform: translate3d(-320px, 0, 0);
-moz-transform: translate3d(-320px, 0, 0);
-webkit-transform: translate3d(-320px, 0, 0); }
.main-container.translate-right {
transform: translate3d(320px, 0, 0);
-moz-transform: translate3d(320px, 0, 0);
-webkit-transform: translate3d(320px, 0, 0); }
/*doc
---
title: Main Navigation
name: main-navigation
category: components navigation-main
---
*/
.site-navigation {
margin-top: 30px; }
@media screen and (min-width: 320px) {
.site-navigation {
display: none; } }
@media screen and (min-width: 768px) {
.site-navigation {
display: block; } }
.site-navigation.navigation-left {
text-align: left;
padding-right: 30px; }
.site-navigation.navigation-left ul li .sub-menu {
left: 0; }
.site-navigation.navigation-left ul li .sub-menu li [class*="sub-menu"] {
left: 100%; }
.site-navigation.navigation-right {
text-align: right;
padding-left: 30px; }
.site-navigation.navigation-right ul li .sub-menu {
right: 0; }
.site-navigation.navigation-right ul li .sub-menu li [class*="sub-menu"] {
right: 100%; }
.site-navigation ul li {
list-style-type: none;
display: inline-block;
position: relative;
white-space: nowrap;
padding: 0.5em;
transition: all 0.3s ease; }
.site-navigation ul li a:hover {
cursor: pointer; }
.site-navigation ul li:hover {
cursor: pointer; }
.site-navigation ul li:hover > .sub-menu {
display: block; }
.site-navigation ul li .sub-menu {
display: none;
position: absolute;
top: 100%;
margin: 0;
padding: 0; }
.site-navigation ul li .sub-menu li [class*="sub-menu"] {
top: 0; }
.wbb-menu-widget .navigation-menu li .sub-menu li {
display: block;
position: relative; }
.wbb-menu-widget .navigation-menu li .sub-menu li .sub-menu {
left: 100%; }
/*doc
---
title: Image Blocks
name: image-blocks
category: components - image-blocks
---
### Image Block Homepage intro
```html_example
Met de kunstinstallatie Small Victims,
Large Numbers wil Power of Art House samen met diverse gemeentebesturen stilstaan bij de rauwe waarheid omtrent kindermishandeling.
Een indringend en poëtisch eerbetoon aan alle kinderen die door mishandeling om het leven kwamen in de afgelopen tien jaar.
Deel je steun en foto met #SmallVictims
```
### Image Block Homepage Story
```html_example
```
*/
.wbb-image-addon .image-container {
height: 800px; }
@media screen and (min-width: 320px) and (max-width: 480px) {
.wbb-image-addon .image-container {
height: 400px;
padding: 0;
overflow: visible; } }
.wbb-image-addon .image-container .image-intro {
display: inline-block;
right: 5vw;
position: absolute;
top: 186px;
max-width: 556px; }
@media screen and (min-width: 320px) and (max-width: 480px) {
.wbb-image-addon .image-container .image-intro {
width: 100%;
right: 0;
top: 100px; } }
.wbb-image-addon .image-container .image-intro .intro-wrap {
position: relative;
left: 0; }
.wbb-image-addon .image-container .image-intro .intro-wrap .intro {
background-color: white;
color: #D70A19;
padding: 16px; }
.wbb-image-addon .image-container .image-intro .intro-wrap .image-content {
text-align: right; }
@media screen and (min-width: 320px) and (max-width: 480px) {
#addon-image-6030372 .image-container {
margin-bottom: 250px; }
#addon-image-6030372 .image-container .image-intro {
right: 0;
top: 50vh; } }
.wbb-image-addon .image-container[data-image-effect="parallax"] {
min-height: 800px; }
@media screen and (min-width: 320px) and (max-width: 480px) {
.wbb-image-addon .image-container[data-image-effect="parallax"] {
min-height: 400px; } }
/*doc
---
title: Widgets
name: widgets
category: components - widgets
---
We are using a couple of widgets in this theme
*/
/*doc
---
title: Logo widget
name: logo-widget
parent: widgets
---
This widget will position the logo in the correct position
```html_example
```
*/
.logo-widget {
list-style: outside none none;
padding-left: 0;
width: 51%;
position: absolute;
right: 5vw;
top: 0; }
@media screen and (min-width: 768px) {
.logo-widget {
width: 456px; } }
/*doc
---
title: Text Blocks
name: text-blocks
category: components Text-blocks
---
For the website we have a couple of pre-defined text blocks.
Those blocks are used to present important text, call-to actions or introduction text for a website section.
The text blocks can be created by using the Pagebuilder Text Addon
*/
.wbb-text-addon .content-text-container {
position: relative;
top: -200px;
padding: 3vh 32px;
margin: 0 20vw;
background-color: white;
color: black; }
@media screen and (min-width: 320px) and (max-width: 480px) {
.wbb-text-addon .content-text-container {
margin: 0 16px; } }
/*doc
---
title: Letterbox
name: letterbox
parent: text-blocks
---
#### Default style
```html_example
A letterbox is great for creating a focal point and lays different text sizes.
````
*/
/*doc
---
title: Article
name: article
category: sections - Article
---
The main section is the part of the page that shows the content. The entry-content style is added in the entry-content file in base.
```html_example
This is a longer headline that will take two lines in a normal screen
This is the lead paragraph. A lead paragraph (also called a lead or lede) in journalism and sometimes other kinds of literature is the opening paragraph of an article, essay, news story or book chapter. Often called the lead,
it usually occurs together with the headline or title. It precedes the main body of the article, and it gives the reader the main idea of the story. In both spellings, the word rhymes with the word need.[1]
This is a subheading
A paragraph (from the Ancient Greek παράγραφος paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea.
A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
The oldest classical Greek and Latin writing had little or no space between words, and could be written in boustrophedon (alternating directions).
Over time, text direction (left to right) became standardized, and word dividers and terminal punctuation became common. The first way to divide sentences into groups was the original paragraphos,
similar to an underscore at the beginning of the new group.
The Greek paragraphos evolved into the pilcrow (¶), which in English manuscripts in the Middle Ages can be seen inserted inline between sentences. The hedera leaf (e.g. ☙) has also been used in the same way.
```
*/
/*doc
---
title: Site Footer
name: site-footer
category: sections - site-footer
---
Site footer needs to be more dynamic and should be set in the wp-admin
For now we have two containers, one for logo and one for the other content.
*/
.site-footer {
background-color: #D70A19; }
/*# sourceMappingURL=skin.css.map */
####Logo as vector
*/
.site-logo {
position: absolute;
right: 0;
width: 100%; }
.site-logo img {
outline: 0;
border: 0;
max-width: 100%;
height: auto; }
.site-logo a {
text-decoration: none; }
.site-logo a:hover {
background-color: transparent; }
/*doc
---
title: Card image
name: card-image
parent: media
---
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
here you can find resets for the responsive card image and image effects for mouseover.
### data-image-effect="zoom"
```html_example