*
* This will cause the system to fill up from either the centre or the right
* hand side. Default behaviour is to fill up the layout system from the left.
*
* There are plenty more options available to us: explore them below.
*/
/* Default/mandatory classes
========================================================================== */
/**
* 1. Allows us to use the layout object on any type of element.
* 2. We need to defensively reset any box-model properties.
* 3. Use the negative margin trick for multi-row grids:
* http://csswizardry.com/2011/08/building-better-grid-systems/
*/
.o-layout {
display: block;
/* [1] */
margin: 0;
/* [2] */
padding: 0;
/* [2] */
list-style: none;
/* [1] */
margin-left: -24px;
/* [3] */
font-size: 0;
}
/**
* 1. Required in order to combine fluid widths with fixed gutters.
* 2. Allows us to manipulate grids vertically, with text-level properties,
* etc.
* 3. Default item alignment is with the tops of each other, like most
* traditional grid/layout systems.
* 4. By default, all layout items are full-width (mobile first).
* 5. Gutters provided by left padding:
* http://csswizardry.com/2011/08/building-better-grid-systems/
* 6. Fallback for old IEs not supporting `rem` values.
*/
.o-layout__item {
box-sizing: border-box;
/* [1] */
display: inline-block;
/* [2] */
vertical-align: top;
/* [3] */
width: 100%;
/* [4] */
padding-left: 24px;
/* [5] */
font-size: 14px;
/* [6] */
font-size: 1rem;
}
/* Gutter size modifiers
========================================================================== */
.o-layout--flush {
margin-left: 0;
}
.o-layout--flush > .o-layout__item {
padding-left: 0;
}
.o-layout--tiny {
margin-left: -6px;
}
.o-layout--tiny > .o-layout__item {
padding-left: 6px;
}
.o-layout--small {
margin-left: -12px;
}
.o-layout--small > .o-layout__item {
padding-left: 12px;
}
.o-layout--large {
margin-left: -48px;
}
.o-layout--large > .o-layout__item {
padding-left: 48px;
}
.o-layout--huge {
margin-left: -96px;
}
.o-layout--huge > .o-layout__item {
padding-left: 96px;
}
/* Vertical alignment modifiers
========================================================================== */
/**
* Align all grid items to the middles of each other.
*/
.o-layout--middle > .o-layout__item {
vertical-align: middle;
}
/**
* Align all grid items to the bottoms of each other.
*/
.o-layout--bottom > .o-layout__item {
vertical-align: bottom;
}
/**
* Stretch all grid items of each row to have an equal-height.
* Please be aware that this modifier class doesn’t take any effect in IE9 and
* below and other older browsers due to the lack of `display: flex` support.
*/
.o-layout--stretch {
display: flex;
flex-wrap: wrap;
}
.o-layout--stretch > .o-layout__item {
display: flex;
}
.o-layout--stretch.o-layout--center {
justify-content: center;
}
.o-layout--stretch.o-layout--right {
justify-content: flex-end;
}
.o-layout--stretch.o-layout--left {
justify-content: flex-start;
}
/* Fill order modifiers
========================================================================== */
/**
* Fill up the layout system from the centre.
*/
.o-layout--center {
text-align: center;
}
.o-layout--center > .o-layout__item {
text-align: left;
}
/**
* Fill up the layout system from the right-hand side.
*/
.o-layout--right {
text-align: right;
}
.o-layout--right > .o-layout__item {
text-align: left;
}
/**
* Fill up the layout system from the left-hand side. This will likely only be
* needed when using in conjunction with `.o-layout--reverse`.
*/
.o-layout--left {
text-align: left;
}
.o-layout--left > .o-layout__item {
text-align: left;
}
/**
* Reverse the rendered order of the grid system.
*/
.o-layout--reverse {
direction: rtl;
}
.o-layout--reverse > .o-layout__item {
direction: ltr;
}
/* Auto-widths modifier
========================================================================== */
/**
* Cause layout items to take up a non-explicit amount of width.
*/
.o-layout--auto > .o-layout__item {
width: auto;
}
/* ==========================================================================
#MEDIA
========================================================================== */
/**
* Place any image- and text-like content side-by-side, as per:
* http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
*/
.o-media {
display: block;
}
.o-media:after {
content: '' !important;
display: block !important;
clear: both !important;
}
.o-media__img {
float: left;
margin-right: 24px;
}
.o-media__img > img {
display: block;
}
.o-media__body {
overflow: hidden;
display: block;
}
.o-media__body,
.o-media__body > :last-child {
margin-bottom: 0;
}
/* Size variants
========================================================================== */
/**
* Modify the amount of space between our image and our text. We also have
* reversible options for all available sizes.
*/
.o-media--flush > .o-media__img {
margin-right: 0;
margin-left: 0;
}
.o-media--tiny > .o-media__img {
margin-right: 6px;
}
.o-media--tiny.o-media--reverse > .o-media__img {
margin-right: 0;
margin-left: 6px;
}
.o-media--small > .o-media__img {
margin-right: 12px;
}
.o-media--small.o-media--reverse > .o-media__img {
margin-right: 0;
margin-left: 12px;
}
.o-media--large > .o-media__img {
margin-right: 48px;
}
.o-media--large.o-media--reverse > .o-media__img {
margin-right: 0;
margin-left: 48px;
}
.o-media--huge > .o-media__img {
margin-right: 96px;
}
.o-media--huge.o-media--reverse > .o-media__img {
margin-right: 0;
margin-left: 96px;
}
/* Reversed media objects
========================================================================== */
.o-media--reverse > .o-media__img {
float: right;
margin-right: 0;
margin-left: 24px;
}
/* ==========================================================================
#FLAG
========================================================================== */
/**
* The flag object is a design pattern similar to the media object, however it
* utilises `display: table[-cell];` to give us control over the vertical
* alignments of the text and image.
*
* http://csswizardry.com/2013/05/the-flag-object/
*
* 1. Allows us to control vertical alignments.
* 2. Force the object to be the full width of its parent. Combined with [1],
* this makes the object behave in a quasi-`display: block;` manner.
* 3. Reset inherited `border-spacing` declarations.
*/
.o-flag {
display: table;
/* [1] */
width: 100%;
/* [2] */
border-spacing: 0;
/* [3] */
}
/**
* Items within a flag object. There should only ever be one of each.
*
* 1. Default to aligning content to their middles.
*/
.o-flag__img,
.o-flag__body {
display: table-cell;
vertical-align: middle;
/* [1] */
}
/**
* Flag images have a space between them and the body of the object.
*
* 1. Force `.flag__img` to take up as little space as possible:
* https://pixelsvsbytes.com/2012/02/this-css-layout-grid-is-no-holy-grail/
*/
.o-flag__img {
width: 1px;
/* [1] */
padding-right: 24px;
/**
* 1. Fixes problem with images disappearing.
*
* The direct child selector '>' needs to remain in order for nested flag
* objects to not inherit their parent’s formatting. In case the image tag
* is wrapped into another tag, e.g. an anchor for linking reasons, it will
* disappear. In that case try wrapping the whole o-flag__img object into
* an anchor tag.
*
* E.g.:
*
*
*
* 
*
*
*/
}
.o-flag__img > img {
max-width: none;
/* [1] */
}
/**
* The container for the main content of the flag object.
*
* 1. Forces the `.flag__body` to take up all remaining space.
*/
.o-flag__body {
width: auto;
/* [1] */
}
.o-flag__body,
.o-flag__body > :last-child {
margin-bottom: 0;
}
/* Size variants
========================================================================== */
.o-flag--flush > .o-flag__img {
padding-right: 0;
padding-left: 0;
}
.o-flag--tiny > .o-flag__img {
padding-right: 6px;
}
.o-flag--tiny.o-flag--reverse > .o-flag__img {
padding-right: 0;
padding-left: 6px;
}
.o-flag--small > .o-flag__img {
padding-right: 12px;
}
.o-flag--small.o-flag--reverse > .o-flag__img {
padding-right: 0;
padding-left: 12px;
}
.o-flag--large > .o-flag__img {
padding-right: 48px;
}
.o-flag--large.o-flag--reverse > .o-flag__img {
padding-right: 0;
padding-left: 48px;
}
.o-flag--huge > .o-flag__img {
padding-right: 96px;
}
.o-flag--huge.o-flag--reverse > .o-flag__img {
padding-right: 0;
padding-left: 96px;
}
/* Reversed flag
========================================================================== */
/**
* 1. Swap the rendered direction of the object…
* 2. …and reset it.
* 3. Reassign margins to the correct sides.
*/
.o-flag--reverse {
direction: rtl;
/* [1] */
}
.o-flag--reverse > .o-flag__img,
.o-flag--reverse > .o-flag__body {
direction: ltr;
/* [2] */
}
.o-flag--reverse > .o-flag__img {
padding-right: 0;
/* [3] */
padding-left: 24px;
/* [3] */
}
/* Alignment variants
========================================================================== */
/**
* Vertically align the image- and body-content differently. Defaults to middle.
*/
.o-flag--top > .o-flag__img,
.o-flag--top > .o-flag__body {
vertical-align: top;
}
.o-flag--bottom > .o-flag__img,
.o-flag--bottom > .o-flag__body {
vertical-align: bottom;
}
/* ==========================================================================
#LIST-BARE
========================================================================== */
/**
* Strip list-like appearance from lists by removing their bullets and any
* indentation.
*
* Note: Declaring the item class might not be necessary everywhere,
* but is for example in
* - lists for the
- children.
*/
.o-list-bare {
list-style: none;
margin-left: 0;
}
.o-list-bare__item {
margin-left: 0;
}
/* ==========================================================================
#LIST-INLINE
========================================================================== */
/**
* The list-inline object simply displays a list of items in one line.
*/
.o-list-inline {
margin-left: 0;
list-style: none;
}
.o-list-inline__item {
display: inline-block;
}
/* ==========================================================================
#BOX
========================================================================== */
/**
* The box object simply boxes off content. Extend with cosmetic styles in the
* Components layer.
*
* 1. So we can apply the `.o-box` class to naturally-inline elements.
*/
.o-box {
display: block;
/* [1] */
padding: 24px;
}
.o-box:after {
content: '' !important;
display: block !important;
clear: both !important;
}
.o-box > :last-child {
margin-bottom: 0;
}
/* Size variants
========================================================================== */
.o-box--flush {
padding: 0;
}
.o-box--tiny {
padding: 6px;
}
.o-box--small {
padding: 12px;
}
.o-box--large {
padding: 48px;
}
.o-box--huge {
padding: 96px;
}
/* ==========================================================================
#BLOCK
========================================================================== */
/**
* Stacked image-with-text object. A simple abstraction to cover a very commonly
* occurring design pattern.
*/
.o-block {
display: block;
text-align: center;
}
.o-block__img {
margin-bottom: 24px;
/* Size variants
====================================================================== */
}
.o-block--flush > .o-block__img {
margin-bottom: 0;
}
.o-block--tiny > .o-block__img {
margin-bottom: 6px;
}
.o-block--small > .o-block__img {
margin-bottom: 12px;
}
.o-block--large > .o-block__img {
margin-bottom: 48px;
}
.o-block--huge > .o-block__img {
margin-bottom: 96px;
}
.o-block__body {
display: block;
}
/* Alignment variants
========================================================================== */
.o-block--right {
text-align: right;
}
.o-block--left {
text-align: left;
}
/* ==========================================================================
#RATIO
========================================================================== */
/**
* Create ratio-bound content blocks, to keep media (e.g. images, videos) in
* their correct aspect ratios.
*
* http://alistapart.com/article/creating-intrinsic-ratios-for-video
*
* 1. Default is a 1:1 ratio (i.e. a perfect square).
*/
.o-ratio {
position: relative;
display: block;
}
.o-ratio:before {
content: '';
display: block;
width: 100%;
padding-bottom: 100%;
/* [1] */
}
.o-ratio__content,
.o-ratio > iframe,
.o-ratio > embed,
.o-ratio > object {
position: absolute;
top: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
}
/* Ratio variants.
========================================================================== */
/**
* Generate a series of ratio classes to be used like so:
*
* * */ .o-ratio--2\:1:before { padding-bottom: 50%; } .o-ratio--4\:3:before { padding-bottom: 75%; } .o-ratio--16\:9:before { padding-bottom: 56.25%; } /* Contain modifier. ========================================================================== */ /** * Only works with image content. * Contains the image to the boundaries, without cropping or stretching it. */ .o-ratio--img-contain > .o-ratio__content:before { height: auto; margin: auto; max-height: 100%; max-width: 100%; width: auto; } /* ========================================================================== #CROP ========================================================================== */ /** * Provide a cropping container in order to display media (usually images) * cropped to certain ratios. * * 1. Set up a positioning context in which the image can sit. * 2. This is the crucial part: where the cropping happens. */ .o-crop { position: relative; /* [1] */ display: block; overflow: hidden; /* [2] */ } /** * Apply this class to the content (usually `img`) that needs cropping. * * 1. Image’s default positioning is top-left in the cropping box. * 2. Make sure the media doesn’t stop itself too soon. */ .o-crop__content { position: absolute; top: 0; /* [1] */ left: 0; /* [1] */ max-width: none; /* [2] */ } /** * We can position the media in different locations within the cropping area. */ .o-crop__content--left-top { left: 0; } .o-crop__content--left-center { top: 50%; transform: translateY(-50%); } .o-crop__content--left-bottom { top: auto; bottom: 0; } .o-crop__content--right-top { right: 0; left: auto; } .o-crop__content--right-center { top: 50%; right: 0; left: auto; transform: translateY(-50%); } .o-crop__content--right-bottom { top: auto; right: 0; bottom: 0; left: auto; } .o-crop__content--center-top { left: 50%; transform: translateX(-50%); } .o-crop__content--center, .o-crop__content--center-center { top: 50%; left: 50%; transform: translate(-50%, -50%); } .o-crop__content--center-bottom { top: auto; bottom: 0; left: 50%; transform: translateX(-50%); } /* Crop-ratio variants ========================================================================== */ /** * Generate a series of crop classes to be used like so: * ** */ .o-crop--2\:1 { padding-bottom: 50%; } .o-crop--4\:3 { padding-bottom: 75%; } .o-crop--16\:9 { padding-bottom: 56.25%; } /* Fill modifier ========================================================================== */ /** * Content stretches to fill it's container while maintaining aspect-ratio. */ .o-crop--fill > .o-crop__content { min-height: 100%; min-width: 100%; } /* ========================================================================== #TABLE ========================================================================== */ /** * A simple object for manipulating the structure of HTML `table`s. */ .o-table { width: 100%; } /* Equal-width table cells ========================================================================== */ /** * `table-layout: fixed` forces all cells within a table to occupy the same * width as each other. This also has performance benefits: because the browser * does not need to (re)calculate cell dimensions based on content it discovers, * the table can be rendered very quickly. Further reading: * https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#Values */ .o-table--fixed { table-layout: fixed; } /* Size variants ========================================================================== */ .o-table--tiny th, .o-table--tiny td { padding: 6px; } .o-table--small th, .o-table--small td { padding: 12px; } .o-table--large th, .o-table--large td { padding: 48px; } .o-table--huge th, .o-table--huge td { padding: 96px; } /* ========================================================================== #PACK ========================================================================== */ /** * The pack object simply causes any number of elements pack up horizontally to * automatically fill an equal, fluid width of their parent. * * 1. Fill all available space. * 2. Remove any leftover styling from lists. * 3. Cause children to be automatically equally sized. */ .o-pack { width: 100%; /* [1] */ margin-left: 0; /* [2] */ display: table; table-layout: fixed; /* [3] */ } /** * 1. Cause children to adopt table-like structure. * 2. Default item alignment is with the tops of each other. */ .o-pack__item { display: table-cell; /* [1] */ vertical-align: top; /* [2] */ /* Vertical alignment variants ====================================================================== */ } .o-pack--middle > .o-pack__item { vertical-align: middle; } .o-pack--bottom > .o-pack__item { vertical-align: bottom; } /* Unequal-width items ========================================================================== */ .o-pack--auto { table-layout: auto; } /* Size variants ========================================================================== */ .o-pack--tiny { border-spacing: 6px; } .o-pack--small { border-spacing: 12px; } .o-pack--default { border-spacing: 24px; } .o-pack--large { border-spacing: 48px; } .o-pack--huge { border-spacing: 96px; } /* Reversed order packs ========================================================================== */ .o-pack--reverse { direction: rtl; } .o-pack--reverse > .o-pack__item { direction: ltr; } /* ========================================================================== LAYOUT ========================================================================== */ @media (max-width: 37.49em) { .o-layout { margin-left: -12px; } } @media (max-width: 37.49em) { .o-wrapper { padding-left: 12px; padding-right: 12px; } } @media (max-width: 37.49em) { .o-layout__item { padding-left: 12px; } } .o-wrapper--small { max-width: 800px; } @media (max-width: 37.49em) { .o-cb-padding { padding: 40px 0; } } @media (min-width: 37.5em) { .o-cb-padding { padding: 60px 0; } } @media (max-width: 37.49em) { .o-cb-padding--top { padding-top: 40px; } } @media (min-width: 37.5em) { .o-cb-padding--top { padding-top: 60px; } } @media (max-width: 37.49em) { .o-cb-padding--bottom { padding-bottom: 40px; } } @media (min-width: 37.5em) { .o-cb-padding--bottom { padding-bottom: 60px; } } .table { width: 100%; height: 100%; display: table; } .table__cell { display: table-cell; vertical-align: middle; } .fll { float: left; } .flr { float: right; } .fln { float: none; } .o-bg--white { background-color: #fff; } .o-bg--green { background-color: #46999d; } .o-bg--light-grey { background-color: #f8f8f8; } .o-bg--custom-colour { background-color: #46999d; } /* ========================================================================== LAYOUT ========================================================================== */ /* ========================================================================== #BUTTONS ========================================================================== */ /** * This is an example component. Extend inuitcss by building your own components * that make up your UI. Component classes are prefixed with a `c-`. */ /** * 1. Allow us to style box model properties. * 2. Line different sized buttons up a little nicer. * 3. Make buttons inherit font styles (often necessary when styling `input`s as * buttons). * 4. Reset/normalize some styles. * 5. Force all button-styled elements to appear clickable. */ .c-btn { display: inline-block; /* [1] */ vertical-align: middle; /* [2] */ font: inherit; /* [3] */ text-align: center; /* [4] */ margin: 0; /* [4] */ cursor: pointer; /* [5] */ padding: 12px 24px; transition: all 300ms ease-in-out; border-radius: 3px; font-weight: 600; } /* Style variants ========================================================================== */ .c-btn--primary, .c-btn--primary:hover, .c-btn--primary:active, .c-btn--primary:focus { text-decoration: none; /* [4] */ } .c-btn--primary:hover, .c-btn--primary:focus { background-color: transparent; } .c-btn--secondary { background-color: #2f4054; } .c-btn--secondary, .c-btn--secondary:hover, .c-btn--secondary:active, .c-btn--secondary:focus { text-decoration: none; color: #fff; } .c-btn--secondary:hover, .c-btn--secondary:focus { background-color: #1d2733; } .c-btn--tertiary { background-color: #fff; color: #4a8ec2; } .c-btn--tertiary, .c-btn--tertiary:hover, .c-btn--tertiary:active, .c-btn--tertiary:focus { text-decoration: none; color: #4a8ec2; } .c-btn--tertiary:hover, .c-btn--tertiary:focus { color: #3774a2; } /* Size variants ========================================================================== */ .c-btn--small { padding: 6px 12px; } .c-btn--large { padding: 24px 48px; } /* Ghost buttons ========================================================================== */ /** * Ghost buttons have see-through backgrounds and are bordered. */ .c-btn--ghost { border: 2px solid currentColor; padding: 10px 22px; } .c-btn--ghost, .c-btn--ghost:hover, .c-btn--ghost:active, .c-btn--ghost:focus { background: none; } .c-btn--ghost.c-btn--small { padding: 4px 10px; } .c-btn--ghost.c-btn--large { padding: 22px 46px; } .c-btn--ghost.c-btn--primary { color: #4a8ec2; } .c-btn--ghost.c-btn--primary:hover, .c-btn--ghost.c-btn--primary:focus { color: #3774a2; } .c-btn--ghost.c-btn--secondary { color: #2f4054; } .c-btn--ghost.c-btn--secondary:hover, .c-btn--ghost.c-btn--secondary:focus { color: #1d2733; } .c-btn--ghost.c-btn--tertiary { color: #fff; } .c-btn--ghost.c-btn--tertiary:hover, .c-btn--ghost.c-btn--tertiary:focus { color: #fff; } /*------------------------------------*\ # COOKIE \*------------------------------------*/ #cn-notice-text { margin-bottom: 20px; display: block; text-align: left; font-size: 12px; } #cookie-notice .cookie-notice-container { max-width: 620px; margin: 0 auto; padding: 20px 10px; } #cookie-notice .button { margin: 0 5px; padding: 0 20px; line-height: 30px; display: inline-block; background-color: #46999d; background-image: none; text-shadow: none; color: #fff; border: 2px solid #46999d; border-radius: 0; box-shadow: none; } #cookie-notice .button:hover { background-color: transparent; } #cookie-notice .cn-more-info.button { padding: 0; background-color: transparent; border: 0; } #cookie-notice .cn-more-info.button:hover { text-decoration: underline; } /*------------------------------------*\ # FORMS \*------------------------------------*/ input[type='text'], input[type='password'], input[type='email'], input[type='search'], input[type='tel'], select, textarea, .field { width: 100%; height: 50px; margin: 0 0 10px 0; padding: 0 10px 0 20px; display: block; line-height: 50px; font-size: 14px; color: #000; font-family: 'Montserrat', sans-serif; vertical-align: middle; box-shadow: none; border: 2px solid #f8f8f8; background: #f8f8f8; outline: 0; transition: all 0.2s ease-out; } input[type='text']:focus, input[type='text']:active, input[type='password']:focus, input[type='password']:active, input[type='email']:focus, input[type='email']:active, input[type='search']:focus, input[type='search']:active, input[type='tel']:focus, input[type='tel']:active, select:focus, select:active, textarea:focus, textarea:active, .field:focus, .field:active { border: 2px solid #000; } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #666; font-size: 14px; } ::-moz-placeholder { /* Firefox 19+ */ color: #666; font-size: 14px; } :-ms-input-placeholder { /* IE 10+ */ color: #666; font-size: 14px; } :-moz-placeholder { /* Firefox 18- */ color: #666; font-size: 14px; } #loginform, .post-password-form { max-width: 480px; margin: 0; } #loginform .button, #loginform input[type='submit'], .post-password-form .button, .post-password-form input[type='submit'] { padding: 15px 40px; background-color: #000; color: #fff; outline: 0; border: 0; } /* ========================================================================== TITEL ========================================================================== */ /* ========================================================================== TITEL ========================================================================== */ /* ========================================================================== HEADER ========================================================================== */ .header { height: 100px; box-shadow: 0px 0px 15px 0px rgba(186, 186, 186, 0.4); } .header .o-wrapper, .header .c-logo { height: 100%; } .logo-effectgroep { max-width: 200px; } .lc-ogo-klant { text-align: right; } .logo-klant { text-align: right; } /* ========================================================================== HEADER ========================================================================== */ .footer { padding-top: 60px; padding-bottom: 60px; color: #fff; } .footer a { color: #fff; } /* ========================================================================== AFBEELDING 1 KOLOM ========================================================================== */ /* ========================================================================== AFBEELDING 2 KOLOMMEN ========================================================================== */ /* ========================================================================== AFBEELDING 3 KOLOMMEN ========================================================================== */ /* ========================================================================== AFBEELDING KOLOMMEN 1/3 2/3 ========================================================================== */ /* ========================================================================== LOGO SLIDER ========================================================================== */ /* ========================================================================== CALL TO ACTION ========================================================================== */ /* ========================================================================== HEADER AFBEELDING ========================================================================== */ /* ========================================================================== HEADER SLIDER ========================================================================== */ /* ========================================================================== QUOTE SLIDER ========================================================================== */ /* ========================================================================== QUOTE ========================================================================== */ /* ========================================================================== TEKST KOLOM ========================================================================== */ @media (max-width: 37.49em) { .c-tekst-kolom--left p:last-child { margin-bottom: 24px; } } /* ========================================================================== TEKST 1 KOLOM ========================================================================== */ /* ========================================================================== TEKST 2 KOLOMMEN ========================================================================== */ /* ========================================================================== DRIE KOLOMMEN ========================================================================== */ .o-bg--light-grey .c-drie-kolommen__kolom .c-drie-kolommen__content, .o-bg--custom-colour .c-drie-kolommen__kolom .c-drie-kolommen__content { background-color: #fff; } .o-bg--white .c-drie-kolommen__kolom .c-drie-kolommen__content { background-color: #f8f8f8; } .c-drie-kolommen__kolom .c-drie-kolommen__content { padding: 24px; } .c-drie-kolommen__afbeelding { background-color: #fff; } .c-drie-kolommen__tekst { margin-bottom: 24px; } .c-drie-kolommen__download-links { margin-bottom: 12px; } /* ========================================================================== KLEUREN ========================================================================== */ .o-bg--light-grey .c-kleur .c-kleur__content, .o-bg--custom-colour .c-kleur .c-kleur__content { background-color: #fff; } .o-bg--white .c-kleur .c-kleur__content { background-color: #f8f8f8; } .c-kleur .c-kleur__content { padding: 24px; } .c-kleur__afbeelding { height: 200px; } .c-kleur__label { width: 60px; display: inline-block; } .c-kleur__waarde { padding-left: 5px; display: inline-block; font-weight: 600; } /* ========================================================================== TEKST | AFBEELDING ========================================================================== */ /* ========================================================================== TITEL ========================================================================== */ @media (max-width: 37.49em) { .o-cb-title { font-size: 24px; font-weight: bold; } } @media (min-width: 37.5em) { .o-cb-title { font-size: 32px; font-weight: bold; } } /* ========================================================================== VIDEO ========================================================================== */ /* ========================================================================== #CLEARFIX ========================================================================== */ /** * Attach our clearfix mixin to a utility class. */ .u-clearfix:after { content: '' !important; display: block !important; clear: both !important; } /* ========================================================================== #WIDTHS ========================================================================== */ /** * inuitcss generates a series of utility classes that give a fluid width to * whichever element they’re applied, e.g.: * *
* * These classes are most commonly used in conjunction with our layout system, * e.g.: * *
* * By default, inuitcss will also generate responsive variants of each of these * classes by using your Sass MQ configuration, e.g.: * ** * Optionally, inuitcss can generate offset classes which can push and pull * elements left and right by a specified amount, e.g.: * ** * This is useful for making very granular changes to the rendered order of * items in a layout. * * N.B. This option is turned off by default. */ /** * A series of width helper classes that you can use to size things like grid * systems. Classes take a fraction-like format (e.g. `.u-2/3`). Use these in * your markup: * ** * The following will generate widths helper classes based on the fractions * defined in the `$inuit-fractions` list. */ .u-1\-1 { width: 100% !important; } .u-1\-2 { width: 50% !important; } .u-2\-2 { width: 100% !important; } .u-1\-3 { width: 33.33333% !important; } .u-2\-3 { width: 66.66667% !important; } .u-3\-3 { width: 100% !important; } .u-1\-4 { width: 25% !important; } .u-2\-4 { width: 50% !important; } .u-3\-4 { width: 75% !important; } .u-4\-4 { width: 100% !important; } .u-1\-5 { width: 20% !important; } .u-2\-5 { width: 40% !important; } .u-3\-5 { width: 60% !important; } .u-4\-5 { width: 80% !important; } .u-5\-5 { width: 100% !important; } .u-1\-12 { width: 8.33333% !important; } .u-2\-12 { width: 16.66667% !important; } .u-3\-12 { width: 25% !important; } .u-4\-12 { width: 33.33333% !important; } .u-5\-12 { width: 41.66667% !important; } .u-6\-12 { width: 50% !important; } .u-7\-12 { width: 58.33333% !important; } .u-8\-12 { width: 66.66667% !important; } .u-9\-12 { width: 75% !important; } .u-10\-12 { width: 83.33333% !important; } .u-11\-12 { width: 91.66667% !important; } .u-12\-12 { width: 100% !important; } /** * If we’re using Sass-MQ, automatically generate grid system(s) for each of our * defined breakpoints, and give them a Responsive Suffix, e.g.: * **/ @media (min-width: 20em) { .u-1\-1\@mobile { width: 100% !important; } .u-1\-2\@mobile { width: 50% !important; } .u-2\-2\@mobile { width: 100% !important; } .u-1\-3\@mobile { width: 33.33333% !important; } .u-2\-3\@mobile { width: 66.66667% !important; } .u-3\-3\@mobile { width: 100% !important; } .u-1\-4\@mobile { width: 25% !important; } .u-2\-4\@mobile { width: 50% !important; } .u-3\-4\@mobile { width: 75% !important; } .u-4\-4\@mobile { width: 100% !important; } .u-1\-5\@mobile { width: 20% !important; } .u-2\-5\@mobile { width: 40% !important; } .u-3\-5\@mobile { width: 60% !important; } .u-4\-5\@mobile { width: 80% !important; } .u-5\-5\@mobile { width: 100% !important; } .u-1\-12\@mobile { width: 8.33333% !important; } .u-2\-12\@mobile { width: 16.66667% !important; } .u-3\-12\@mobile { width: 25% !important; } .u-4\-12\@mobile { width: 33.33333% !important; } .u-5\-12\@mobile { width: 41.66667% !important; } .u-6\-12\@mobile { width: 50% !important; } .u-7\-12\@mobile { width: 58.33333% !important; } .u-8\-12\@mobile { width: 66.66667% !important; } .u-9\-12\@mobile { width: 75% !important; } .u-10\-12\@mobile { width: 83.33333% !important; } .u-11\-12\@mobile { width: 91.66667% !important; } .u-12\-12\@mobile { width: 100% !important; } } @media (min-width: 37.5em) { .u-1\-1\@tablet { width: 100% !important; } .u-1\-2\@tablet { width: 50% !important; } .u-2\-2\@tablet { width: 100% !important; } .u-1\-3\@tablet { width: 33.33333% !important; } .u-2\-3\@tablet { width: 66.66667% !important; } .u-3\-3\@tablet { width: 100% !important; } .u-1\-4\@tablet { width: 25% !important; } .u-2\-4\@tablet { width: 50% !important; } .u-3\-4\@tablet { width: 75% !important; } .u-4\-4\@tablet { width: 100% !important; } .u-1\-5\@tablet { width: 20% !important; } .u-2\-5\@tablet { width: 40% !important; } .u-3\-5\@tablet { width: 60% !important; } .u-4\-5\@tablet { width: 80% !important; } .u-5\-5\@tablet { width: 100% !important; } .u-1\-12\@tablet { width: 8.33333% !important; } .u-2\-12\@tablet { width: 16.66667% !important; } .u-3\-12\@tablet { width: 25% !important; } .u-4\-12\@tablet { width: 33.33333% !important; } .u-5\-12\@tablet { width: 41.66667% !important; } .u-6\-12\@tablet { width: 50% !important; } .u-7\-12\@tablet { width: 58.33333% !important; } .u-8\-12\@tablet { width: 66.66667% !important; } .u-9\-12\@tablet { width: 75% !important; } .u-10\-12\@tablet { width: 83.33333% !important; } .u-11\-12\@tablet { width: 91.66667% !important; } .u-12\-12\@tablet { width: 100% !important; } } @media (min-width: 61.25em) { .u-1\-1\@desktop { width: 100% !important; } .u-1\-2\@desktop { width: 50% !important; } .u-2\-2\@desktop { width: 100% !important; } .u-1\-3\@desktop { width: 33.33333% !important; } .u-2\-3\@desktop { width: 66.66667% !important; } .u-3\-3\@desktop { width: 100% !important; } .u-1\-4\@desktop { width: 25% !important; } .u-2\-4\@desktop { width: 50% !important; } .u-3\-4\@desktop { width: 75% !important; } .u-4\-4\@desktop { width: 100% !important; } .u-1\-5\@desktop { width: 20% !important; } .u-2\-5\@desktop { width: 40% !important; } .u-3\-5\@desktop { width: 60% !important; } .u-4\-5\@desktop { width: 80% !important; } .u-5\-5\@desktop { width: 100% !important; } .u-1\-12\@desktop { width: 8.33333% !important; } .u-2\-12\@desktop { width: 16.66667% !important; } .u-3\-12\@desktop { width: 25% !important; } .u-4\-12\@desktop { width: 33.33333% !important; } .u-5\-12\@desktop { width: 41.66667% !important; } .u-6\-12\@desktop { width: 50% !important; } .u-7\-12\@desktop { width: 58.33333% !important; } .u-8\-12\@desktop { width: 66.66667% !important; } .u-9\-12\@desktop { width: 75% !important; } .u-10\-12\@desktop { width: 83.33333% !important; } .u-11\-12\@desktop { width: 91.66667% !important; } .u-12\-12\@desktop { width: 100% !important; } } @media (min-width: 81.25em) { .u-1\-1\@wide { width: 100% !important; } .u-1\-2\@wide { width: 50% !important; } .u-2\-2\@wide { width: 100% !important; } .u-1\-3\@wide { width: 33.33333% !important; } .u-2\-3\@wide { width: 66.66667% !important; } .u-3\-3\@wide { width: 100% !important; } .u-1\-4\@wide { width: 25% !important; } .u-2\-4\@wide { width: 50% !important; } .u-3\-4\@wide { width: 75% !important; } .u-4\-4\@wide { width: 100% !important; } .u-1\-5\@wide { width: 20% !important; } .u-2\-5\@wide { width: 40% !important; } .u-3\-5\@wide { width: 60% !important; } .u-4\-5\@wide { width: 80% !important; } .u-5\-5\@wide { width: 100% !important; } .u-1\-12\@wide { width: 8.33333% !important; } .u-2\-12\@wide { width: 16.66667% !important; } .u-3\-12\@wide { width: 25% !important; } .u-4\-12\@wide { width: 33.33333% !important; } .u-5\-12\@wide { width: 41.66667% !important; } .u-6\-12\@wide { width: 50% !important; } .u-7\-12\@wide { width: 58.33333% !important; } .u-8\-12\@wide { width: 66.66667% !important; } .u-9\-12\@wide { width: 75% !important; } .u-10\-12\@wide { width: 83.33333% !important; } .u-11\-12\@wide { width: 91.66667% !important; } .u-12\-12\@wide { width: 100% !important; } } @media (min-width: 30em) { .u-1\-1\@mobileLandscape { width: 100% !important; } .u-1\-2\@mobileLandscape { width: 50% !important; } .u-2\-2\@mobileLandscape { width: 100% !important; } .u-1\-3\@mobileLandscape { width: 33.33333% !important; } .u-2\-3\@mobileLandscape { width: 66.66667% !important; } .u-3\-3\@mobileLandscape { width: 100% !important; } .u-1\-4\@mobileLandscape { width: 25% !important; } .u-2\-4\@mobileLandscape { width: 50% !important; } .u-3\-4\@mobileLandscape { width: 75% !important; } .u-4\-4\@mobileLandscape { width: 100% !important; } .u-1\-5\@mobileLandscape { width: 20% !important; } .u-2\-5\@mobileLandscape { width: 40% !important; } .u-3\-5\@mobileLandscape { width: 60% !important; } .u-4\-5\@mobileLandscape { width: 80% !important; } .u-5\-5\@mobileLandscape { width: 100% !important; } .u-1\-12\@mobileLandscape { width: 8.33333% !important; } .u-2\-12\@mobileLandscape { width: 16.66667% !important; } .u-3\-12\@mobileLandscape { width: 25% !important; } .u-4\-12\@mobileLandscape { width: 33.33333% !important; } .u-5\-12\@mobileLandscape { width: 41.66667% !important; } .u-6\-12\@mobileLandscape { width: 50% !important; } .u-7\-12\@mobileLandscape { width: 58.33333% !important; } .u-8\-12\@mobileLandscape { width: 66.66667% !important; } .u-9\-12\@mobileLandscape { width: 75% !important; } .u-10\-12\@mobileLandscape { width: 83.33333% !important; } .u-11\-12\@mobileLandscape { width: 91.66667% !important; } .u-12\-12\@mobileLandscape { width: 100% !important; } } /* ========================================================================== #HEADINGS ========================================================================== */ /** * Redefine all of our basic heading styles against utility classes so as to * allow for double stranded heading hierarchy, e.g. we semantically need an H2, * but we want it to be sized like an H1: * * * */ .u-h1 { font-size: 36px !important; font-size: 2.57143rem !important; line-height: 1.16667 !important; } .u-h2 { font-size: 28px !important; font-size: 2rem !important; line-height: 1.28571 !important; } .u-h3 { font-size: 24px !important; font-size: 1.71429rem !important; line-height: 1.25 !important; } .u-h4 { font-size: 20px !important; font-size: 1.42857rem !important; line-height: 1.5 !important; } .u-h5 { font-size: 18px !important; font-size: 1.28571rem !important; line-height: 1.33333 !important; } .u-h6 { font-size: 16px !important; font-size: 1.14286rem !important; line-height: 1.5 !important; } /* ========================================================================== #SPACINGS ========================================================================== */ /** * Utility classes to put specific spacing values onto elements. The below loop * will generate us a suite of classes like: * * .u-margin-top {} * .u-padding-left-large {} * .u-margin-right-small {} * .u-padding {} * .u-padding-right-none {} * .u-padding-horizontal {} * .u-padding-vertical-small {} */ .u-padding { padding: 24px !important; } .u-padding-tiny { padding: 6px !important; } .u-padding-small { padding: 12px !important; } .u-padding-large { padding: 48px !important; } .u-padding-huge { padding: 96px !important; } .u-padding-none { padding: 0 !important; } .u-padding-top { padding-top: 24px !important; } .u-padding-top-tiny { padding-top: 6px !important; } .u-padding-top-small { padding-top: 12px !important; } .u-padding-top-large { padding-top: 48px !important; } .u-padding-top-huge { padding-top: 96px !important; } .u-padding-top-none { padding-top: 0 !important; } .u-padding-right { padding-right: 24px !important; } .u-padding-right-tiny { padding-right: 6px !important; } .u-padding-right-small { padding-right: 12px !important; } .u-padding-right-large { padding-right: 48px !important; } .u-padding-right-huge { padding-right: 96px !important; } .u-padding-right-none { padding-right: 0 !important; } .u-padding-bottom { padding-bottom: 24px !important; } .u-padding-bottom-tiny { padding-bottom: 6px !important; } .u-padding-bottom-small { padding-bottom: 12px !important; } .u-padding-bottom-large { padding-bottom: 48px !important; } .u-padding-bottom-huge { padding-bottom: 96px !important; } .u-padding-bottom-none { padding-bottom: 0 !important; } .u-padding-left { padding-left: 24px !important; } .u-padding-left-tiny { padding-left: 6px !important; } .u-padding-left-small { padding-left: 12px !important; } .u-padding-left-large { padding-left: 48px !important; } .u-padding-left-huge { padding-left: 96px !important; } .u-padding-left-none { padding-left: 0 !important; } .u-padding-horizontal { padding-left: 24px !important; padding-right: 24px !important; } .u-padding-horizontal-tiny { padding-left: 6px !important; padding-right: 6px !important; } .u-padding-horizontal-small { padding-left: 12px !important; padding-right: 12px !important; } .u-padding-horizontal-large { padding-left: 48px !important; padding-right: 48px !important; } .u-padding-horizontal-huge { padding-left: 96px !important; padding-right: 96px !important; } .u-padding-horizontal-none { padding-left: 0 !important; padding-right: 0 !important; } .u-padding-vertical { padding-top: 24px !important; padding-bottom: 24px !important; } .u-padding-vertical-tiny { padding-top: 6px !important; padding-bottom: 6px !important; } .u-padding-vertical-small { padding-top: 12px !important; padding-bottom: 12px !important; } .u-padding-vertical-large { padding-top: 48px !important; padding-bottom: 48px !important; } .u-padding-vertical-huge { padding-top: 96px !important; padding-bottom: 96px !important; } .u-padding-vertical-none { padding-top: 0 !important; padding-bottom: 0 !important; } .u-margin { margin: 24px !important; } .u-margin-tiny { margin: 6px !important; } .u-margin-small { margin: 12px !important; } .u-margin-large { margin: 48px !important; } .u-margin-huge { margin: 96px !important; } .u-margin-none { margin: 0 !important; } .u-margin-top { margin-top: 24px !important; } .u-margin-top-tiny { margin-top: 6px !important; } .u-margin-top-small { margin-top: 12px !important; } .u-margin-top-large { margin-top: 48px !important; } .u-margin-top-huge { margin-top: 96px !important; } .u-margin-top-none { margin-top: 0 !important; } .u-margin-right { margin-right: 24px !important; } .u-margin-right-tiny { margin-right: 6px !important; } .u-margin-right-small { margin-right: 12px !important; } .u-margin-right-large { margin-right: 48px !important; } .u-margin-right-huge { margin-right: 96px !important; } .u-margin-right-none { margin-right: 0 !important; } .u-margin-bottom { margin-bottom: 24px !important; } .u-margin-bottom-tiny { margin-bottom: 6px !important; } .u-margin-bottom-small { margin-bottom: 12px !important; } .u-margin-bottom-large { margin-bottom: 48px !important; } .u-margin-bottom-huge { margin-bottom: 96px !important; } .u-margin-bottom-none { margin-bottom: 0 !important; } .u-margin-left { margin-left: 24px !important; } .u-margin-left-tiny { margin-left: 6px !important; } .u-margin-left-small { margin-left: 12px !important; } .u-margin-left-large { margin-left: 48px !important; } .u-margin-left-huge { margin-left: 96px !important; } .u-margin-left-none { margin-left: 0 !important; } .u-margin-horizontal { margin-left: 24px !important; margin-right: 24px !important; } .u-margin-horizontal-tiny { margin-left: 6px !important; margin-right: 6px !important; } .u-margin-horizontal-small { margin-left: 12px !important; margin-right: 12px !important; } .u-margin-horizontal-large { margin-left: 48px !important; margin-right: 48px !important; } .u-margin-horizontal-huge { margin-left: 96px !important; margin-right: 96px !important; } .u-margin-horizontal-none { margin-left: 0 !important; margin-right: 0 !important; } .u-margin-vertical { margin-top: 24px !important; margin-bottom: 24px !important; } .u-margin-vertical-tiny { margin-top: 6px !important; margin-bottom: 6px !important; } .u-margin-vertical-small { margin-top: 12px !important; margin-bottom: 12px !important; } .u-margin-vertical-large { margin-top: 48px !important; margin-bottom: 48px !important; } .u-margin-vertical-huge { margin-top: 96px !important; margin-bottom: 96px !important; } .u-margin-vertical-none { margin-top: 0 !important; margin-bottom: 0 !important; } /* ========================================================================== #RESPONSIVE-SPACINGS ========================================================================== */ /** * Utility classes enhancing the normal spacing classes by adding responsiveness * to them. By default, there are not responsive spacings defined. You can * generate responsive spacings by adding entries to the following three Sass * maps, e.g.: * * $inuit-responsive-spacing-directions: ( * null: null, * bottom: bottom, * ); * * $inuit-responsive-spacing-properties: ( * "margin": "margin", * ); * * $inuit-responsive-spacing-sizes: ( * "-small": $inuit-global-spacing-unit-small, * ); * * This would bring us the following classes: * * .u-margin-small@mobile {} * .u-margin-small@tablet {} * .u-margin-small@desktop {} * .u-margin-small@wide {} * .u-margin-bottom-small@mobile {} * .u-margin-bottom-small@tablet {} * .u-margin-bottom-small@desktop {} * .u-margin-bottom-small@wide {} * * You can change the generated CSS classes by further extending the Sass maps. * If you want every ‘normal’ spacing (those from `utilities.spacings`) also as * a responsive version, you can just mirror the ‘normal’ spacings: * * $inuit-responsive-spacing-directions: $inuit-spacing-directions !default; * * $inuit-responsive-spacing-properties: $inuit-spacing-properties !default; * * $inuit-responsive-spacing-sizes: $inuit-spacing-sizes !default; * * BUT BE AWARE: This can generate a huge chunk of extra CSS, depending on the * amount of breakpoints you defined. So please check your CSS’ output and * filesize! */ /* stylelint-disable max-nesting-depth */ /* stylelint-enable max-nesting-depth */ /* ========================================================================== #PRINT ========================================================================== */ /** * Very crude, reset-like styles taken from the HTML5 Boilerplate: * https://github.com/h5bp/html5-boilerplate/blob/5.3.0/dist/doc/css.md#print-styles * https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css#L205-L282 */ @media print { /** * 1. Black prints faster: http://www.sanbeiji.com/archives/953 */ *, *:before, *:after { background: transparent !important; color: #000 !important; /* [1] */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: ' (' attr(href) ')'; } abbr[title]:after { content: ' (' attr(title) ')'; } /** * Don’t show links that are fragment identifiers, or use the `javascript:` * pseudo protocol. */ a[href^='#']:after, a[href^='javascript:']:after { content: ''; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } /** * Printing Tables: http://css-discuss.incutio.com/wiki/Printing_Tables */ thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } /* ========================================================================== #HIDE ========================================================================== */ /** * Hide only visually, but have it available for screen readers: * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ .u-hidden-visually { border: 0 !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; width: 1px !important; } /** * Hide visually and from screen readers. */ .u-hidden { display: none !important; } .section-404, .section-content { padding-top: 100px; padding-bottom: 100px; } .o-bg--green { background-color: #e6007e; } .content-links a { color: #e6007e; } .content-links { margin-bottom: 2rem; } .alert { background-color: #e6007e; color: white; padding: 0.5rem; margin-bottom: 1rem; } footer { background-color: black; color: #e6007e; } footer a { color: #e6007e !important; } ul.navi-list { list-style-type: none; /* Remove bullets */ padding: 0; /* Remove padding */ margin: 0; /* Remove margins */ padding: 1rem; } .navi-menu { background-color: #f8f8f8; } .navi-list li { display: inline; margin-right: 2rem; } .navi-list li a { color: #e6007e; } .navi-list li a:hover { text-decoration: underline; }