*/
.u-1\/1 {
width: 100% !important;
}
.u-1\/2 {
width: 50% !important;
}
.u-1\/3 {
width: 33.3333333333% !important;
}
.u-2\/3 {
width: 66.6666666667% !important;
}
.u-1\/4 {
width: 25% !important;
}
.u-2\/4 {
width: 50% !important;
}
.u-3\/4 {
width: 75% !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-1\/6 {
width: 16.6666666667% !important;
}
.u-2\/6 {
width: 33.3333333333% !important;
}
.u-3\/6 {
width: 50% !important;
}
.u-4\/6 {
width: 66.6666666667% !important;
}
.u-5\/6 {
width: 83.3333333333% !important;
}
/*------------------------------------* #WIDTHS-RESPONSIVE
\*------------------------------------*/
/**
* Responsive width classes based on your responsive settings.
*/
@media screen and (max-width: 44.9375em) {
.u-1\/12-palm {
width: 8.3333333333% !important;
}
.u-2\/12-palm {
width: 16.6666666667% !important;
}
.u-3\/12-palm {
width: 25% !important;
}
.u-4\/12-palm {
width: 33.3333333333% !important;
}
.u-5\/12-palm {
width: 41.6666666667% !important;
}
.u-6\/12-palm {
width: 50% !important;
}
.u-7\/12-palm {
width: 58.3333333333% !important;
}
.u-8\/12-palm {
width: 66.6666666667% !important;
}
.u-9\/12-palm {
width: 75% !important;
}
.u-10\/12-palm {
width: 83.3333333333% !important;
}
.u-11\/12-palm {
width: 91.6666666667% !important;
}
}
@media screen and (min-width: 45em) and (max-width: 63.9375em) {
.u-1\/12-lap {
width: 8.3333333333% !important;
}
.u-2\/12-lap {
width: 16.6666666667% !important;
}
.u-3\/12-lap {
width: 25% !important;
}
.u-4\/12-lap {
width: 33.3333333333% !important;
}
.u-5\/12-lap {
width: 41.6666666667% !important;
}
.u-6\/12-lap {
width: 50% !important;
}
.u-7\/12-lap {
width: 58.3333333333% !important;
}
.u-8\/12-lap {
width: 66.6666666667% !important;
}
.u-9\/12-lap {
width: 75% !important;
}
.u-10\/12-lap {
width: 83.3333333333% !important;
}
.u-11\/12-lap {
width: 91.6666666667% !important;
}
}
@media screen and (min-width: 45em) {
.u-1\/12-lap-and-up {
width: 8.3333333333% !important;
}
.u-2\/12-lap-and-up {
width: 16.6666666667% !important;
}
.u-3\/12-lap-and-up {
width: 25% !important;
}
.u-4\/12-lap-and-up {
width: 33.3333333333% !important;
}
.u-5\/12-lap-and-up {
width: 41.6666666667% !important;
}
.u-6\/12-lap-and-up {
width: 50% !important;
}
.u-7\/12-lap-and-up {
width: 58.3333333333% !important;
}
.u-8\/12-lap-and-up {
width: 66.6666666667% !important;
}
.u-9\/12-lap-and-up {
width: 75% !important;
}
.u-10\/12-lap-and-up {
width: 83.3333333333% !important;
}
.u-11\/12-lap-and-up {
width: 91.6666666667% !important;
}
}
@media screen and (max-width: 63.9375em) {
.u-1\/12-portable {
width: 8.3333333333% !important;
}
.u-2\/12-portable {
width: 16.6666666667% !important;
}
.u-3\/12-portable {
width: 25% !important;
}
.u-4\/12-portable {
width: 33.3333333333% !important;
}
.u-5\/12-portable {
width: 41.6666666667% !important;
}
.u-6\/12-portable {
width: 50% !important;
}
.u-7\/12-portable {
width: 58.3333333333% !important;
}
.u-8\/12-portable {
width: 66.6666666667% !important;
}
.u-9\/12-portable {
width: 75% !important;
}
.u-10\/12-portable {
width: 83.3333333333% !important;
}
.u-11\/12-portable {
width: 91.6666666667% !important;
}
}
@media screen and (min-width: 64em) {
.u-1\/12-desk {
width: 8.3333333333% !important;
}
.u-2\/12-desk {
width: 16.6666666667% !important;
}
.u-3\/12-desk {
width: 25% !important;
}
.u-4\/12-desk {
width: 33.3333333333% !important;
}
.u-5\/12-desk {
width: 41.6666666667% !important;
}
.u-6\/12-desk {
width: 50% !important;
}
.u-7\/12-desk {
width: 58.3333333333% !important;
}
.u-8\/12-desk {
width: 66.6666666667% !important;
}
.u-9\/12-desk {
width: 75% !important;
}
.u-10\/12-desk {
width: 83.3333333333% !important;
}
.u-11\/12-desk {
width: 91.6666666667% !important;
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
.u-1\/12-retina {
width: 8.3333333333% !important;
}
.u-2\/12-retina {
width: 16.6666666667% !important;
}
.u-3\/12-retina {
width: 25% !important;
}
.u-4\/12-retina {
width: 33.3333333333% !important;
}
.u-5\/12-retina {
width: 41.6666666667% !important;
}
.u-6\/12-retina {
width: 50% !important;
}
.u-7\/12-retina {
width: 58.3333333333% !important;
}
.u-8\/12-retina {
width: 66.6666666667% !important;
}
.u-9\/12-retina {
width: 75% !important;
}
.u-10\/12-retina {
width: 83.3333333333% !important;
}
.u-11\/12-retina {
width: 91.6666666667% !important;
}
}
/*------------------------------------* #PRINT
\*------------------------------------*/
/**
* Very crude, reset-like styles taken from the HTML5 Boilerplate:
* https://github.com/h5bp/html5-boilerplate/blob/3c3c5e64604209a4d63e1e4c48dd245d45fadfd9/css/main.css#L200-L234
*/
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important;
/* Black prints faster: h5bp.com/s */
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: "";
}
}
/*doc
---
title: Kleuren
category: Kleuren - Kleuren
---
|Variable Name | Hex Value | Swatch | Example |
|------------------|---------|------|----|
| white | #ffffff |
|
Example
|
| black | #000000 |
|
Example
|
*/
h1, h2, h3, h4, h5, h6 {
font-family: "FoundersGrotesk-Bold", sans-serif;
}
body {
font-size: 14px;
line-height: 24px;
}
@media screen and (min-width: 45em) {
body {
font-size: 15px;
}
}
@media screen and (min-width: 64em) {
body {
font-size: 15px;
}
}
/* Hide and show */
@media screen and (max-width: 44.9375em) {
.hide-on-mobile {
display: none;
}
}
@media screen and (min-width: 45em) {
.hide-lap-and-up {
display: none;
}
}
@media only screen and (max-width: 45em) and (min-width: 63.9375em) {
.only-on-tablet {
display: none;
}
}
@media only screen and (min-width: 64em) {
.hide-on-desktop {
display: none !important;
}
}
@media only screen and (min-width: 44.9375em) {
.only-mobile {
display: none !important;
}
}
@media only screen and (max-width: 64em) {
.only-on-desktop {
display: none !important;
}
}
.hide {
font-size: 0;
}
/* absolute positioning */
.abpos-lt {
position: absolute !important;
left: 0;
top: 0;
}
.abpos-rt {
position: absolute !important;
right: 0;
top: 0;
}
.abpos-lb {
position: absolute !important;
left: 0;
bottom: 0;
}
.abpos-rb {
position: absolute !important;
right: 0;
bottom: 0;
}
/* float */
.fl {
float: left;
}
.fr {
float: right;
}
.center-block {
margin: 0 auto;
}
.aligncenter {
text-align: center;
}
.flag__img,
.block__img {
max-width: none;
}
.centerdiv {
margin: 0 auto;
max-width: 1154px;
}
.styleguide-devider {
margin: 24px 0;
border-top: 1px solid red;
}
.bg-cover {
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
}
/* Slider */
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
}
.slick-track:before, .slick-track:after {
content: "";
display: table;
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
display: none;
}
[dir="rtl"] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
/* Slider */
.slick-loading .slick-list {
background: #fff slick-image-url("/img/ajax-loader.gif") center center no-repeat;
}
/* Icons */
@font-face {
font-family: "slick";
src: slick-font-url("/fonts/slick.eot");
src: slick-font-url("/fonts/slick.eot?#iefix") format("embedded-opentype"), slick-font-url("/fonts/slick.woff") format("woff"), slick-font-url("/fonts/slick.ttf") format("truetype"), slick-font-url("/fonts/slick.svg#slick") format("svg");
font-weight: normal;
font-style: normal;
}
/* Arrows */
.slick-prev,
.slick-next {
position: absolute;
display: block;
height: 20px;
width: 20px;
line-height: 0px;
font-size: 0px;
cursor: pointer;
background: transparent;
color: transparent;
top: 39%;
margin-top: -10px;
padding: 0;
border: none;
outline: none;
}
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
outline: none;
color: transparent;
}
.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
opacity: 0.25;
}
.slick-prev:before, .slick-next:before {
font-family: "slick";
font-size: 20px;
line-height: 1;
color: white;
opacity: 0.75;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slider-full {
cursor: move;
}
.slider-full .slick-prev,
.slider-full .slick-next {
height: 40px;
width: 40px;
opacity: 0;
background-size: 40px 40px;
transition: .3s ease-in-out;
}
.slider-full:hover .slick-prev {
opacity: .85;
left: 12px;
}
.slider-full:hover .slick-next {
opacity: .85;
right: 12px;
}
.slider-full .caption {
height: 40px;
}
.slider-thumb {
cursor: pointer;
}
.slider-thumb .slick-slide {
margin-right: 10px;
}
.slider-full .slick-prev {
left: 24px;
background: url(/img/icons/arrow-previous.svg) no-repeat center center;
}
.slider-full .slick-next {
right: 24px;
background: url(/img/icons/arrow-next.svg) no-repeat center center;
}
.slider-full img {
height: auto;
width: 100%;
margin-bottom: 12px;
}
/* Dots */
.slick-dots {
position: absolute;
bottom: -36px;
list-style: none;
display: block;
text-align: center;
padding: 0;
margin: 0;
width: 100%;
}
.slick-dots li {
position: relative;
display: inline-block;
height: 14px;
width: 14px;
margin: 0 5px;
padding: 0;
cursor: pointer;
background: #5aa1f0;
border-radius: 50%;
}
.slick-dots li button {
display: none !important;
border: 0;
background: transparent;
display: block;
height: 20px;
width: 20px;
outline: none;
line-height: 0px;
font-size: 0px;
color: transparent;
padding: 5px;
cursor: pointer;
}
.slick-dots li button:hover, .slick-dots li button:focus {
outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
opacity: 1;
}
.slick-dots li button:before {
position: absolute;
top: 0;
left: 0;
content: "•";
width: 20px;
height: 20px;
font-family: "slick";
font-size: 6px;
line-height: 20px;
text-align: center;
color: black;
opacity: 0.25;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active {
background: #0F55A2;
}
.slick-dots li.slick-active button:before {
color: black;
opacity: 0.75;
}
#idTag {
background: url(../img/image.png) no-repeat center center;
background-size: 180px 58px;
width: 180px;
height: 58px;
z-index: 20;
}
@media screen and (min-width: 45em) {
#idTag {
background-size: 270px 88px;
width: 270px;
height: 88px;
right: auto;
margin: 0;
}
}
@media screen and (min-width: 64em) {
#idTag {
background-size: 313px 102px;
width: 305px;
height: 102px;
}
}
/*doc
---
title: Mobile toggle menu button
category: gui elements - gui elements
---
```html_example
```
```js_example
jQuery(document).ready(function ($) {
$('.togglemenu').on('click', function () {
$('html').toggleClass('togglemenu--active');
});
});
```
Create a animated close button (only visible on mobile)
*/
.togglemenu {
width: 30px;
height: 30px;
position: relative;
display: block;
transition: .3s;
cursor: pointer;
}
.togglemenu:before, .togglemenu:after,
.togglemenu span {
height: 4px;
display: block;
width: 100%;
position: absolute;
content: '';
background: white;
transition: .3s;
-ms-transform-origin: center center;
transform-origin: center center;
}
.togglemenu span {
top: 13px;
}
.togglemenu:before, .togglemenu:after {
top: 4px;
-ms-transform-origin: left top;
transform-origin: left top;
}
.togglemenu:after {
top: auto;
bottom: 4px;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
}
.togglemenu--active .togglemenu span {
background: none;
}
.togglemenu--active .togglemenu:before {
left: 3px;
top: 3px;
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.togglemenu--active .togglemenu:after {
left: 3px;
bottom: 3px;
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
@media screen and (min-width: 45em) {
.togglemenu {
display: none;
}
}
.togglemenu--header {
position: absolute;
top: 12px;
}
.social {
background-repeat: no-repeat;
background-position: right top;
height: 32px;
position: absolute;
display: block;
right: 12px;
top: 12px;
}
@media screen and (min-width: 45em) {
.social {
display: none;
}
}
.social__item {
display: inline-block;
width: 32px;
height: 32px;
margin-left: 6px;
}
.social__item a {
display: block;
height: 100%;
width: 100%;
}
.social__item--twitter {
background-image: url(../img/icons/icon-twitter.svg);
}
.social__item--facebook {
background-image: url(../img/icons/icon-facebook.svg);
}
.social__item--instagram {
background-image: url(../img/icons/icon-instagram.svg);
}
@media screen and (min-width: 45em) {
body.front .pageheader .social {
right: 24px;
top: 328px;
z-index: 100;
display: block;
}
body.front .pageheader .social .social__item {
display: block;
margin-bottom: 12px;
width: 50px;
height: 50px;
background-size: 50px 50px;
}
}
/*doc
---
title: Overlay full screen button nav
category: navigation - navigation
---
```html_example
```
*/
/*------------------------------------* #Overlay full screen button nav
\*------------------------------------*/
@media screen and (max-width: 44.9375em) {
.mainnav {
position: fixed;
width: 100vw;
height: 100vh;
overflow: auto;
transition: .2s;
-ms-transform-origin: center center;
transform-origin: center center;
-ms-transform: scale(0.4, 0.4);
transform: scale(0.4, 0.4);
opacity: 0;
z-index: -10;
left: 0;
top: 0;
}
.mainnav ul {
display: -ms-flexbox;
display: flex;
background: #0F55A2;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.mainnav ul li {
background: #0F55A2;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
outline: 2px solid white;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
max-height: 200px;
height: 50vw;
}
.mainnav ul li a {
font-size: 16px;
font-family: "FoundersGrotesk-Bold", sans-serif;
text-decoration: none;
color: #fff;
}
.mainnav ul li img {
display: block;
margin: 0 auto;
}
.togglemenu--active .mainnav {
-ms-transform: scale(1, 1);
transform: scale(1, 1);
opacity: 1;
z-index: 10000;
}
}
#sticky-header {
z-index: 100;
}
.timetable {
padding-top: 150px;
}
.timetable__slider {
position: relative;
margin: 0 48px 0 48px;
}
.timetable__slider .slick-list {
height: 2364px;
}
.timetable__slider button {
display: none !important;
}
@media screen and (min-width: 45em) {
.timetable__slider {
margin: 0 48px 0 84px;
}
}
.timetable__time {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
width: 100%;
}
.timetable__time > li {
height: 180px;
border-top: 1px solid #ea4132;
display: block;
position: relative;
}
.timetable__time > li:after {
content: attr(data-time);
background: #fff;
display: block;
padding: 0 6px 0 6px;
position: absolute;
left: 0;
top: -12px;
color: #ea4132;
font-weight: bold;
}
.timetable__column {
position: relative;
}
.timetable__slider a .timetable__block {
background: #dd0000;
}
.timetable__slider a:nth-child(odd) .timetable__block {
background: #0F55A2;
}
.timetable__block {
position: absolute;
left: 24px;
right: 0;
padding: 12px;
color: #fff;
}
.parallel .timetable__block {
width: 45%;
}
.parallel:first-child .timetable__block {
left: 24px;
right: auto;
}
.parallel:last-child .timetable__block {
right: 0;
left: auto;
}
.timetable__header {
background: #0F55A2;
color: #fff;
padding: 0 48px 0 48px;
width: 100%;
z-index: 1000;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
font-family: "FoundersGrotesk-Bold", sans-serif;
}
.timetable__header a {
text-decoration: none;
}
@media screen and (min-width: 45em) {
.timetable__header {
padding: 0 48px 0 48px;
}
}
.location {
margin-left: 12px;
padding: 12px;
}
.location span {
display: block;
opacity: .6;
}
@media screen and (min-width: 480px) {
.location {
border-left: 1px solid #fff;
}
}
.location a {
color: #fff;
}
/*
* Arrows
*/
.timetable__header .slick-arrow {
background: none;
border: none;
text-indent: -999px;
overflow: hidden;
position: absolute;
width: 48px;
height: 96%;
top: 13px;
left: 0;
z-index: 100;
background-repeat: no-repeat;
background-position: center center;
background-color: #0F55A2;
}
.timetable__header .slick-prev {
left: -48px;
background-image: url(../img/arrow-left-diap.svg);
}
.timetable__header .slick-next {
right: -48px;
left: auto;
background-image: url(../img/arrow-right-diap.svg);
}
.timetable__header .slick-disabled {
display: none !important;
}
/* liScroll styles */
.tickercontainer {
/* the outer div with the black border */
border: 3px solid #ea4132;
background: #fff;
width: 100%;
overflow: hidden;
}
.tickercontainer .mask {
/* that serves as a mask. so you get a sort of padding both left and right */
position: relative;
width: 100%;
overflow: hidden;
}
/*ul*/
.newsticker {
/* that's your list */
position: relative;
list-style-type: none;
margin: 0;
padding: 0;
}
.newsticker li {
float: left;
/* important: display inline gives incorrect results when you check for elem's width */
margin: 0;
padding: 0;
background: #fff;
}
.newsticker a {
white-space: nowrap;
padding: 12px 24px;
color: #ff0000;
font-size: 16px;
line-height: 24px;
font-family: "FoundersGrotesk-Bold", sans-serif;
text-decoration: none;
display: block;
}
.newsticker a:hover {
color: #0F55A2;
}
@media screen and (min-width: 45em) {
.newsticker a {
padding: 12px 24px;
font-size: 28px;
line-height: 36px;
}
}
.newsticker span {
margin: 0 10px 0 0;
}
.mix__item {
display: none;
}
#mixcontainer {
font-size: 0;
}
.mix__item {
width: calc(100% / 2);
border: 1px solid #333;
min-height: 300px;
font-size: 16px;
vertical-align: top;
text-align: center;
}
@media screen and (min-width: 45em) and (max-width: 63.9375em) {
.mix__item {
width: calc(100% / 3);
}
}
@media screen and (min-width: 64em) {
.mix__item {
width: calc(100% / 4);
}
}
.mixfilter__item {
display: inline-block;
color: #fff;
cursor: pointer;
padding: 8px;
margin: 0 8px;
font-size: 16px;
line-height: 24px;
font-family: "FoundersGrotesk-Bold", sans-serif;
border-radius: 3px;
}
.mixfilter__item.active {
background: #fff;
color: #0F55A2;
}
.mix {
margin: 0 -16px;
}
.mix__item {
border: 0;
}
.mix a {
border: 1px solid #0F55A2;
transition: .3s;
display: block;
padding: 16px;
}
.mix a:hover {
border: 1px solid #fff;
}
/*doc
---
title: Reference logos
category: layout components - layout components
---
```html_example
```
# Responsive reference logos block
- On mobile just swipe with overflow: auto;
- On desktop just wrap it
*/
.reference {
background: #fff;
padding-top: 12px;
overflow-x: auto;
text-align: center;
}
@media screen and (min-width: 45em) {
.reference {
overflow: hidden;
}
}
.reference__logo {
vertical-align: middle;
}
.reference__logo img {
height: 30px;
width: auto;
margin: 0 12px 12px 12px;
}
@media screen and (min-width: 45em) {
.reference__logo img {
height: 60px;
}
}
/*doc
---
title: tabs
category: gui elements
---
Eenvoudig component met tabs
@import "components/tabs";
```html_example
content tab 1
content tab 2
content tab 3
```
```js_example
$(".tabs-menu a").click(function(e) {
e.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
});
```
*/
.tabs-menu {
text-align: center;
margin: 0;
padding: 0;
position: relative;
z-index: 2;
margin-bottom: 12px;
}
.tabs-menu > li {
position: relative;
display: inline-block;
border-radius: 4px;
margin: 0 8px;
top: 0;
color: #0F55A2;
font-family: "FoundersGrotesk-Bold", sans-serif;
border: 1px solid #0F55A2;
margin-bottom: 12px;
}
.tabs-menu > li a {
color: #fff;
border-radius: 3px;
border: 1px solid #fff;
}
.tabs-menu > li.current {
background: white;
}
.tabs-menu > li.current a {
color: #0F55A2;
}
.tabs-menu > li a {
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
padding: 8px 16px;
display: block;
}
.tab-content {
text-align: left;
position: relative;
border-radius: 4px;
z-index: 2;
padding: 24px;
background: #fff;
display: none;
}
@media screen and (min-width: 45em) {
.tab-content {
padding: 48px;
}
}
@media screen and (min-width: 64em) {
.tab-content {
padding: 72px;
}
}
.tab-content:first-child {
display: block;
}
/* Slider */
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
}
.slick-track:before, .slick-track:after {
content: "";
display: table;
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
display: none;
}
[dir="rtl"] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
/* Slider */
.slick-loading .slick-list {
background: #fff slick-image-url("/img/ajax-loader.gif") center center no-repeat;
}
/* Icons */
@font-face {
font-family: "slick";
src: slick-font-url("/fonts/slick.eot");
src: slick-font-url("/fonts/slick.eot?#iefix") format("embedded-opentype"), slick-font-url("/fonts/slick.woff") format("woff"), slick-font-url("/fonts/slick.ttf") format("truetype"), slick-font-url("/fonts/slick.svg#slick") format("svg");
font-weight: normal;
font-style: normal;
}
/* Arrows */
.slick-prev,
.slick-next {
position: absolute;
display: block;
height: 20px;
width: 20px;
line-height: 0px;
font-size: 0px;
cursor: pointer;
background: transparent;
color: transparent;
top: 39%;
margin-top: -10px;
padding: 0;
border: none;
outline: none;
}
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
outline: none;
color: transparent;
}
.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
opacity: 0.25;
}
.slick-prev:before, .slick-next:before {
font-family: "slick";
font-size: 20px;
line-height: 1;
color: white;
opacity: 0.75;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slider-full {
cursor: move;
}
.slider-full .slick-prev,
.slider-full .slick-next {
height: 40px;
width: 40px;
opacity: 0;
background-size: 40px 40px;
transition: .3s ease-in-out;
}
.slider-full:hover .slick-prev {
opacity: .85;
left: 12px;
}
.slider-full:hover .slick-next {
opacity: .85;
right: 12px;
}
.slider-full .caption {
height: 40px;
}
.slider-thumb {
cursor: pointer;
}
.slider-thumb .slick-slide {
margin-right: 10px;
}
.slider-full .slick-prev {
left: 24px;
background: url(/img/icons/arrow-previous.svg) no-repeat center center;
}
.slider-full .slick-next {
right: 24px;
background: url(/img/icons/arrow-next.svg) no-repeat center center;
}
.slider-full img {
height: auto;
width: 100%;
margin-bottom: 12px;
}
/* Dots */
.slick-dots {
position: absolute;
bottom: -36px;
list-style: none;
display: block;
text-align: center;
padding: 0;
margin: 0;
width: 100%;
}
.slick-dots li {
position: relative;
display: inline-block;
height: 14px;
width: 14px;
margin: 0 5px;
padding: 0;
cursor: pointer;
background: #5aa1f0;
border-radius: 50%;
}
.slick-dots li button {
display: none !important;
border: 0;
background: transparent;
display: block;
height: 20px;
width: 20px;
outline: none;
line-height: 0px;
font-size: 0px;
color: transparent;
padding: 5px;
cursor: pointer;
}
.slick-dots li button:hover, .slick-dots li button:focus {
outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
opacity: 1;
}
.slick-dots li button:before {
position: absolute;
top: 0;
left: 0;
content: "•";
width: 20px;
height: 20px;
font-family: "slick";
font-size: 6px;
line-height: 20px;
text-align: center;
color: black;
opacity: 0.25;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active {
background: #0F55A2;
}
.slick-dots li.slick-active button:before {
color: black;
opacity: 0.75;
}
/*doc
---
title: Pillars
category: layout components - layout components
---
```html_example
Mini hockey
6 t/m 10 jaar
Wil jij in de schoolvakantie hockeyen en beter worden? Dan kan jij bij Kidspower op verschillende locaties terecht!
Wil jij in de schoolvakantie hockeyen en beter worden? Dan kan jij bij Kidspower op verschillende locaties terecht!
Wil jij in de schoolvakantie hockeyen en beter worden? Dan kan jij bij Kidspower op verschillende locaties terecht!
Wil jij in de schoolvakantie hockeyen en beter worden? Dan kan jij bij Kidspower op verschillende locaties terecht!
Mini hockey
6 t/m 10 jaar
Wil jij in de schoolvakantie hockeyen en beter worden? Dan kan jij bij Kidspower op verschillende locaties terecht!
Mini hockey
6 t/m 10 jaar
Wil jij in de schoolvakantie hockeyen en beter worden? Dan kan jij bij Kidspower op verschillende locaties terecht!
Mini hockey
6 t/m 10 jaar
Wil jij in de schoolvakantie hockeyen en beter worden? Dan kan jij bij Kidspower op verschillende locaties terecht!
Mini hockey
6 t/m 10 jaar
Wil jij in de schoolvakantie hockeyen en beter worden? Dan kan jij bij Kidspower op verschillende locaties terecht!
Mini hockey
6 t/m 10 jaar
Wil jij in de schoolvakantie hockeyen en beter worden? Dan kan jij bij Kidspower op verschillende locaties terecht!
Mini hockey
6 t/m 10 jaar
Wil jij in de schoolvakantie hockeyen en beter worden? Dan kan jij bij Kidspower op verschillende locaties terecht!
```
Create block grids width equal heights. Compatible from
*/
.pillars {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
margin: 0 -12px;
}
.no-flexbox .pillars {
display: block;
}
.pillars__item {
margin: 0 12px;
width: 100%;
}
@media screen and (min-width: 45em) {
.pillars__item {
width: calc(50% - 24px);
}
}
@media screen and (min-width: 64em) {
.pillars__item {
width: calc(33.3333% - 24px);
}
}
.no-flexbox .pillars__item {
display: block;
float: left;
}
#drupal-default-region {
z-index: 998;
}
.layout {
font-size: 0;
}
.layout__item {
font-size: 14px;
}
#user-pass-reset {
max-width: 980px;
margin: 0 auto;
padding: 96px;
}
.page-user-login .contextual-links-region,
.page-user .contextual-links-region,
.page-user-password .contextual-links-region {
padding: 48px;
}
.media_embed {
padding-bottom: 56%;
content: '';
height: 0;
max-width: 100%;
display: block;
position: relative;
}
.media_embed iframe {
position: absolute;
left: 0;
top: 0;
width: 100% !important;
height: 100% !important;
}
body {
background: white;
font-family: "FoundersGroteskText-Regular", sans-serif;
}
img {
max-width: none;
}
.closebutton {
background: #ea4132 !important;
}
.pageheader {
padding: 24px;
margin-bottom: 48px;
}
@media screen and (min-width: 45em) {
.pageheader {
padding: 48px 0 24px 0;
}
}
.page {
background: #fff;
}
.sticky-logo {
position: absolute;
left: 0;
top: 100px;
background: url(../img/logo-cultuurwerf.png) no-repeat left top;
width: 32px;
height: 214px;
background-size: 32px 214px;
z-index: 100;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
}
@media screen and (min-width: 45em) {
.sticky-logo {
top: 420px;
}
}
.section {
position: relative;
padding: 24px;
}
.section:after, .section:before {
position: absolute;
z-index: 1;
width: 100%;
height: 44px;
left: 0;
}
.section--bluelinetop {
background: #0F55A2;
}
.section--bluelinetop:before {
content: '';
top: -44px;
background: url(../img/blue-border-top.png);
background-position: left top;
}
.section--bluelinetop-half {
background: #0F55A2;
}
.section--bluelinetop-half:before {
content: '';
top: -44px;
background: url(../img/blue-border-top.png);
background-position: left top;
}
.section--bluelinetop-half:after {
content: '';
position: absolute;
background: #fff;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
height: auto;
}
.section--whitelinebottom {
background: #fff;
border-bottom: 1px solid white;
}
.section--whitelinebottom:after {
content: '';
bottom: -44px;
width: 100%;
background: url(../img/white-border.png);
background-position: right bottom;
}
.section--whitelinetop {
background: #fff;
}
.section--whitelinetop:before {
content: '';
top: -44px;
background: url(../img/white-border-top.png);
background-position: left top;
}
.section--redlinebottom {
background: #ea4132;
}
.section--redlinebottom:after {
content: '';
bottom: -44px;
background: url(../img/red-border.png);
background-position: left bottom;
}
.section--textticker {
background: #fff;
padding: 24px 24px 72px 24px;
}
.timetable__header {
position: relative;
}
.timetable__header:before {
position: absolute;
z-index: 1;
width: 100%;
height: 44px;
left: 0;
content: '';
top: -44px;
background: url(../img/blue-border-top.png);
background-position: left top;
}
.section__title,
.section__subtitle {
font-size: 16px;
line-height: 24px;
margin: 48px auto 48px auto;
display: table;
color: #0F55A2;
}
@media screen and (min-width: 45em) {
.section__title,
.section__subtitle {
font-size: 24px;
line-height: 36px;
}
}
.section--redlinebottom .section__title,
.section--blueinebottom .section__title,
.section--redlinetop .section__title,
.section--bluelinetop .section__title, .section--redlinebottom
.section__subtitle,
.section--blueinebottom
.section__subtitle,
.section--redlinetop
.section__subtitle,
.section--bluelinetop
.section__subtitle {
color: #fff;
}
.section--white .section__title, .section--white
.section__subtitle {
color: #ea4132;
}
.layout__item .section__title, .layout__item
.section__subtitle {
margin: 48px 0 48px 0;
}
.section__title {
text-transform: uppercase;
}
.section__subtitle {
font-size: 16px;
line-height: 24px;
}
.layout__item h3 {
color: #0F55A2;
text-transform: uppercase;
}
.layout__item h4 {
color: #0F55A2;
}
.page--title {
font-size: 28px;
line-height: 34px;
color: #ea4132;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 100;
}
#bannerslider {
height: 440px;
}
@media screen and (min-width: 45em) {
#bannerslider {
height: 640px;
}
}
#bannerslider img {
max-width: none !important;
width: 100%;
position: relative;
}
@media screen and (min-width: 1400px) {
#bannerslider {
height: 840px;
}
}
#bannerslider .slickslider__item {
height: 440px;
}
@media screen and (max-width: 44.9375em) {
#bannerslider .slickslider__item img {
height: 100%;
width: auto;
}
}
@media screen and (min-width: 45em) {
#bannerslider .slickslider__item {
height: 640px;
}
}
@media screen and (min-width: 1400px) {
#bannerslider .slickslider__item {
height: 840px;
}
}
#bannerslider .slickslider__item img {
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.praktisch ul {
margin-left: 20px;
}
.notify {
position: absolute;
z-index: 100;
left: 2%;
top: 0;
background: #fff;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
width: 200px;
height: 200px;
border-radius: 50%;
text-align: center;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-transform: rotate(-6deg);
transform: rotate(-6deg);
}
@media screen and (max-width: 44.9375em) {
.notify {
display: none;
}
}
@media screen and (min-width: 45em) and (max-width: 63.9375em) {
.notify {
top: 100%;
}
}
.notify h3, .notify p {
font-family: FoundersGrotesk-Bold;
font-size: 20px;
line-height: 24px;
color: #0F55A2;
position: relative;
margin: 0;
}
.notify p {
color: #ea4132;
}
#idTag img {
width: 70%;
display: block;
max-width: 460px;
position: relative;
z-index: 100;
}
.logoblock img {
margin: 0 auto;
}
.logoblock:after {
bottom: -44px;
}
@media screen and (min-width: 45em) {
.logoblock:after {
bottom: -44px;
}
}
.mixfilter__item:first-child {
float: left;
height: 64px;
}
@media screen and (min-width: 45em) {
.mainnav {
text-align: center;
max-width: 80%;
}
.mainnav ul li {
display: inline-block;
margin: 0 -2px 0 -2px;
padding: 0;
}
.mainnav ul li a {
color: #fff;
text-decoration: none;
font-family: FoundersGrotesk-Bold;
font-size: 15px;
line-height: 24px;
text-transform: uppercase;
display: block;
padding: 6px 12px;
border-radius: 2px;
letter-spacing: 0.44px;
}
.mainnav ul li a:hover, .mainnav ul li a.active {
background: white;
color: #ea4132;
}
}
@media screen and (min-width: 45em) and (min-width: 64em) {
.mainnav ul li.last {
border: 3px solid #fff;
position: absolute;
right: 24px;
border-radius: 2px;
-ms-transform: translateY(-3px);
transform: translateY(-3px);
}
}
@media screen and (min-width: 45em) {
.mainnav .closebutton {
display: none;
}
}
@media screen and (min-width: 45em) {
#upcoming {
margin-top: -200px;
z-index: 10;
}
}
.upcoming {
padding: 24px 24px 48px 24px;
text-align: center;
margin-top: -100px;
}
@media screen and (min-width: 460px) {
.upcoming {
padding: 48px 48px 12px 48px;
}
}
@media screen and (min-width: 45em) {
.upcoming {
margin-top: 0px;
}
}
.upcoming .slickslider__item {
color: #0F55A2;
font-family: "FoundersGrotesk-Bold", sans-serif;
}
@media screen and (min-width: 460px) {
.upcoming .slickslider__item {
padding: 12px;
}
}
.upcoming .slickslider__item img {
width: 100%;
height: auto;
}
#upcoming a {
color: #0F55A2;
text-decoration: none;
}
.upcoming__pane {
background: #fff;
}
.upcoming__pane img {
margin-bottom: 12px;
max-width: 100%;
}
@media screen and (min-width: 460px) {
.upcoming__pane {
border: 12px solid #fff;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3);
min-height: 240px;
}
}
#map img {
width: 100%;
}
.copyright {
padding: 12px 24px;
text-align: center;
color: #fff;
}
.slick-prev,
.slick-next {
width: 40px;
height: 60px;
}
.slick-prev:hover,
.slick-next:hover {
-ms-transform: translateY(-2px);
transform: translateY(-2px);
}
.slick-prev {
background: url(../img/arrow-left.svg) no-repeat center center;
left: -46px;
}
.slick-next {
background: url(../img/arrow-right.svg) no-repeat center center;
right: -46px;
left: auto;
}
.blob {
text-align: center;
background: url(../img/blob.png) no-repeat center center;
background-size: 100% 100%;
padding: 24px 12px;
color: #fff;
}
.blob h4 {
color: #fff;
}
.blob a {
text-decoration: none;
color: #fff;
}
/* buttons */
.btn {
transition: .3s;
font-size: 18px;
line-height: 36px;
text-align: center;
display: inline-block;
margin: 0 auto;
border-radius: 4px;
font-family: "FoundersGrotesk-Bold", sans-serif;
color: #fff;
background: #0F55A2;
min-width: 180px;
padding: 6px 24px;
max-width: 100%;
}
.layout__item .btn {
margin: 0;
}
.btn:hover {
background: #136dd1;
}
.btn--diap {
color: #0F55A2;
background: #fff;
max-width: 260px;
display: block;
}
.btn--diap:hover {
background: rgba(254, 254, 254, 0.85);
color: #0F55A2;
}
/* event mix */
.mix a {
text-decoration: none;
position: relative;
}
.mix a:after {
transition: .5s;
content: "";
background: url(../img/zoom.svg) no-repeat center center;
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 40%;
z-index: -1;
opacity: 0;
}
.mix a:hover:after {
z-index: 1;
opacity: 1;
}
/* infoblock */
.infoblock {
margin-bottom: 24px;
}
@media screen and (min-width: 45em) {
.infoblock {
margin-bottom: 48px;
}
}
.infoblock img {
width: 100%;
margin-bottom: 12px;
}
.event {
cursor: pointer;
background: #fff;
text-transform: none;
min-height: 350px;
}
.event h3 {
font-size: 18px;
line-height: 24px;
margin: 0;
}
.event p {
margin: 0;
}
.event img {
width: 100%;
}
a:hover .event {
opacity: .5;
}
.event .block__body {
text-align: left;
text-transform: none;
text-align: left;
padding: 12px;
color: #0F55A2;
text-decoration: none;
}
.block-title {
font-size: 18px;
line-height: 24px;
margin: 0;
}
.block-subtitle {
font-size: 18px;
line-height: 24px;
margin: 0;
opacity: .8;
}
.praktisch img {
width: 64px;
height: 64px;
}
.media_embed {
padding-bottom: 56%;
content: '';
height: 0;
max-width: 100%;
display: block;
position: relative;
}
.media_embed iframe {
position: absolute;
left: 0;
top: 0;
width: 100% !important;
height: 100% !important;
}
.pillars .block__img img {
margin: 0;
}
.pillars .block__body {
background: #fff;
padding: 12px;
}
.pillars .block__body p:last-child {
margin-bottom: 0;
}
.pillars__item {
margin-bottom: 24px;
background: #fff;
}
.block__title {
color: #0F55A2;
}
/* GRIDDER STYLES */
.gridder-list .block {
background: white;
margin-bottom: 24px;
}
.hasSelectedItem .gridder-list .block {
opacity: .4;
}
.gridder-list.selectedItem .block {
opacity: 1;
position: relative;
}
.gridder-list.selectedItem .block:after {
position: absolute;
border: solid transparent;
content: " ";
height: 0;
width: 0;
margin: 0;
border-width: 16px;
pointer-events: none;
top: 100%;
border-top-color: #fff;
margin-left: -16px;
left: 50%;
}
.gridder-list .block__body {
padding: 24px;
}
.gridder-show {
display: block;
float: left;
width: 100%;
position: relative;
padding-left: 24px;
margin-bottom: 24px;
}
.gridder-show img {
margin-bottom: 24px;
}
.gridder-content {
display: none;
}
.gridder-list img {
width: 100%;
height: auto;
}
.gridder-padding {
position: relative;
background: #fff;
padding: 12px;
}
@media screen and (min-width: 45em) {
.gridder-padding {
padding: 24px;
}
}
.gridder-expanded-content img {
max-width: none;
width: 100%;
}
.gridder-navigation > a {
width: 32px;
height: 32px;
}
.gridder-close {
display: block;
position: absolute;
top: 16px;
right: 16px;
transition: .3s;
background: url(../img/close-button-diap.svg) no-repeat center center;
}
@media screen and (min-width: 45em) {
.gridder-close {
right: 24px;
background: url(../img/close-button.svg) no-repeat center center;
}
}
.gridder-close:hover {
-ms-transform-origin: center center;
transform-origin: center center;
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.gridder-nav {
display: none;
}
.tab-content a {
color: #0F55A2;
}
.tab-content a:hover {
color: #ea4132;
}
#bevrijdingsfestival {
height: 900px;
width: 100%;
}
@media screen and (max-width: 44.9375em) {
#bevrijdingsfestival {
height: 400px;
}
}
@media screen and (min-width: 45em) and (max-width: 63.9375em) {
#bevrijdingsfestival {
height: 600px;
}
}
@media screen and (min-width: 64em) {
#bevrijdingsfestival {
height: 800px;
}
}
.gm-style-iw * {
display: inline-block;
width: 100%;
}
.gm-style-iw h4, .gm-style-iw p {
margin: 0;
padding: 0;
}
.gm-style-iw a {
color: #4272db;
}
.views-field-profile-image-url {
float: left;
margin-right: 12px;
}
.views-field-profile-image-url a {
color: #0F55A2;
}
.twitter-timeline-link {
color: #0F55A2;
}
.view-tweets .views-row {
margin-bottom: 24px;
}
.view-tweets .views-row a {
color: #0F55A2;
}
.views-field-screen-name-1 {
font-weight: bold;
}
.realisation {
padding: 24px;
background: #0b3d73;
text-align: center;
font-size: 80%;
color: #fff;
}
.realisation a {
color: #fff;
}
.logo-vfonds {
position: absolute;
top: 10px;
right: 10px;
}
.logo-vfonds img {
max-width: 100px;
}
.poster-container {
padding-bottom: 200px;
}
.poster {
position: relative;
}
.poster img {
width: 100%;
height: auto;
margin-bottom: 24px;
}
.poster__tekst {
position: absolute;
left: 12px;
right: 12px;
top: 12px;
bottom: 12px;
}
.poster__tekst > .content {
width: 100%;
position: absolute;
top: 38%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
color: white;
text-align: center;
}
.poster__tekst > .content a {
color: white;
}
.poster__tekst > .content h3 {
color: #1f3b90;
word-wrap: break-word;
}
.title.comment-form {
display: none;
}
.captcha .fieldset-wrapper {
padding: 12px;
}
.captcha .fieldset-description,
.captcha .description,
.captcha .form-item-name {
display: none;
}
#comment-form .form-item-name {
display: none;
}
.section--stream {
position: relative;
margin-bottom: -130px;
z-index: 40;
}
.section--stream-page {
position: relative;
margin-bottom: -130px;
z-index: 40;
}
.section--stream-page + .section {
padding-top: 180px;
}
.section--stream:before {
content: '';
bottom: 86px;
width: 100%;
background: url(../img/white-border.png);
background-position: right bottom;
z-index: -1;
}
.streams {
display: flex;
flex-wrap: wrap;
margin: 0 -12px;
margin-top: -24px;
justify-content: center;
align-items: center;
}
.stream-wrapper {
padding: 0 12px;
margin-top: 24px;
width: 100%;
max-width: calc(1154px / 4);
}
.stream {
background: white;
width: 100%;
}
.stream__content {
padding: 24px;
color: #0F55A2;
}
.stream__content a {
color: #0F55A2;
font-weight: bold;
text-decoration: none;
}
.stream__img img {
max-width: 100%;
}
.tab-content img {
max-width: 100%;
height: auto !important;
}
