@charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap"); .bold { font-weight: 700; } /* Theme Name: ABP 100 jaar Version: 1 Author: Bas Boerman Author URI: https://www.basboerman.nl License: MIT License URI: http://opensource.org/licenses/mit-license.php */ /*! normalize.css v2.1.3 | MIT License | git.io/normalize */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } audio, canvas, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } a { background: 0 0; } a:focus { outline: thin dotted; } a:active, a:hover { outline: 0; } h1, #future .year-row { font-size: 2em; margin: 0.67em 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: 700; } dfn { font-style: italic; } hr { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; } mark { background: #ff0; color: #000; } code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } pre { white-space: pre-wrap; } q { quotes: "“" "”" "‘" "’"; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } fieldset { border: 1px solid silver; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } button, .gform_footer input[type="submit"], .gform_footer input[type="button"], .gform_footer button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; } button, .gform_footer input[type="submit"], .gform_footer input[type="button"], .gform_footer button, input { line-height: normal; } button, .gform_footer input[type="submit"], .gform_footer input[type="button"], .gform_footer button, select { text-transform: none; } button, .gform_footer input[type="submit"], .gform_footer input[type="button"], .gform_footer button, html input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; cursor: pointer; } button[disabled], .gform_footer input[disabled][type="submit"], .gform_footer input[disabled][type="button"], html input[disabled] { cursor: default; } input[type=checkbox], input[type=radio] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } input[type=search] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, .gform_footer input[type="submit"]::-moz-focus-inner, .gform_footer input[type="button"]::-moz-focus-inner, .gform_footer button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } table { border-collapse: collapse; border-spacing: 0; } /* _mixins.scss */ /* fonts.scss */ @font-face { font-family: "TheSerif B7"; src: url("/assets/Questrial-Regular.ttf") format("truetype"); font-weight: bold; font-style: normal; font-display: block; } .container-fluid { margin-right: auto; margin-left: auto; padding-right: 2rem; padding-left: 2rem; } .row, #nav ul, #intros .intro .title, .news, .news .content .action, #news-small .news-small .action, #episodes .episode .action, #timeline .year-row, .pagination { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .row.reverse, #nav ul.reverse, #intros .intro .reverse.title, .reverse.news, .news .content .reverse.action, #news-small .news-small .reverse.action, #episodes .episode .reverse.action, #timeline .reverse.year-row, .reverse.pagination { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .row.center, #nav ul.center, #intros .intro .center.title, .center.news, .news .content .center.action, #news-small .news-small .center.action, #episodes .episode .center.action, #timeline .center.year-row, .center.pagination { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .col.reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .col-xs { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } .col-xs-1 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; max-width: 8.33333%; } .col-xs-offset-1 { margin-left: 8.33333%; } .col-xs-2 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; max-width: 16.66667%; } .col-xs-offset-2 { margin-left: 16.66667%; } .col-xs-3 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .col-xs-offset-3 { margin-left: 25%; } .col-xs-4 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; max-width: 33.33333%; } .col-xs-offset-4 { margin-left: 33.33333%; } .col-xs-5 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; max-width: 41.66667%; } .col-xs-offset-5 { margin-left: 41.66667%; } .col-xs-6 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .col-xs-offset-6 { margin-left: 50%; } .col-xs-7 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; max-width: 58.33333%; } .col-xs-offset-7 { margin-left: 58.33333%; } .col-xs-8 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; max-width: 66.66667%; } .col-xs-offset-8 { margin-left: 66.66667%; } .col-xs-9 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .col-xs-offset-9 { margin-left: 75%; } .col-xs-10 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; max-width: 83.33333%; } .col-xs-offset-10 { margin-left: 83.33333%; } .col-xs-11 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; max-width: 91.66667%; } .col-xs-offset-11 { margin-left: 91.66667%; } .col-xs-12 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .col-xs-offset-12 { margin-left: 100%; } .start-xs { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; text-align: start; } .center-xs { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .end-xs { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; text-align: end; } .top-xs { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .middle-xs { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .bottom-xs { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .around-xs { -ms-flex-pack: distribute; justify-content: space-around; } .between-xs { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .first-xs { -webkit-box-ordinal-group: -9998; -ms-flex-order: -9999; order: -9999; } .last-xs { -webkit-box-ordinal-group: 10000; -ms-flex-order: 9999; order: 9999; } @media screen and (min-width: 640px) { .col-sm { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } .col-sm-1 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; max-width: 8.33333%; } .col-sm-offset-1 { margin-left: 8.33333%; } .col-sm-2 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; max-width: 16.66667%; } .col-sm-offset-2 { margin-left: 16.66667%; } .col-sm-3 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .col-sm-offset-3 { margin-left: 25%; } .col-sm-4 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; max-width: 33.33333%; } .col-sm-offset-4 { margin-left: 33.33333%; } .col-sm-5 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; max-width: 41.66667%; } .col-sm-offset-5 { margin-left: 41.66667%; } .col-sm-6 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .col-sm-offset-6 { margin-left: 50%; } .col-sm-7 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; max-width: 58.33333%; } .col-sm-offset-7 { margin-left: 58.33333%; } .col-sm-8 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; max-width: 66.66667%; } .col-sm-offset-8 { margin-left: 66.66667%; } .col-sm-9 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .col-sm-offset-9 { margin-left: 75%; } .col-sm-10 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; max-width: 83.33333%; } .col-sm-offset-10 { margin-left: 83.33333%; } .col-sm-11 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; max-width: 91.66667%; } .col-sm-offset-11 { margin-left: 91.66667%; } .col-sm-12 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .col-sm-offset-12 { margin-left: 100%; } .start-sm { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; text-align: start; } .center-sm { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .end-sm { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; text-align: end; } .top-sm { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .middle-sm { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .bottom-sm { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .around-sm { -ms-flex-pack: distribute; justify-content: space-around; } .between-sm { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .first-sm { -webkit-box-ordinal-group: -9998; -ms-flex-order: -9999; order: -9999; } .last-sm { -webkit-box-ordinal-group: 10000; -ms-flex-order: 9999; order: 9999; } .container { width: 640px; } } @media screen and (min-width: 960px) { .col-md { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } .col-md-1 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; max-width: 8.33333%; } .col-md-offset-1 { margin-left: 8.33333%; } .col-md-2 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; max-width: 16.66667%; } .col-md-offset-2 { margin-left: 16.66667%; } .col-md-3 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .col-md-offset-3 { margin-left: 25%; } .col-md-4 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; max-width: 33.33333%; } .col-md-offset-4 { margin-left: 33.33333%; } .col-md-5 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; max-width: 41.66667%; } .col-md-offset-5 { margin-left: 41.66667%; } .col-md-6 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .col-md-offset-6 { margin-left: 50%; } .col-md-7 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; max-width: 58.33333%; } .col-md-offset-7 { margin-left: 58.33333%; } .col-md-8 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; max-width: 66.66667%; } .col-md-offset-8 { margin-left: 66.66667%; } .col-md-9 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .col-md-offset-9 { margin-left: 75%; } .col-md-10 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; max-width: 83.33333%; } .col-md-offset-10 { margin-left: 83.33333%; } .col-md-11 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; max-width: 91.66667%; } .col-md-offset-11 { margin-left: 91.66667%; } .col-md-12 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .col-md-offset-12 { margin-left: 100%; } .start-md { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; text-align: start; } .center-md { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .end-md { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; text-align: end; } .top-md { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .middle-md { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .bottom-md { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .around-md { -ms-flex-pack: distribute; justify-content: space-around; } .between-md { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .first-md { -webkit-box-ordinal-group: -9998; -ms-flex-order: -9999; order: -9999; } .last-md { -webkit-box-ordinal-group: 10000; -ms-flex-order: 9999; order: 9999; } .container { width: 960px; } } @media screen and (min-width: 1024px) { .col-lg { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } .col-lg-1 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; max-width: 8.33333%; } .col-lg-offset-1 { margin-left: 8.33333%; } .col-lg-2 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; max-width: 16.66667%; } .col-lg-offset-2 { margin-left: 16.66667%; } .col-lg-3 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .col-lg-offset-3 { margin-left: 25%; } .col-lg-4 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; max-width: 33.33333%; } .col-lg-offset-4 { margin-left: 33.33333%; } .col-lg-5 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; max-width: 41.66667%; } .col-lg-offset-5 { margin-left: 41.66667%; } .col-lg-6 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .col-lg-offset-6 { margin-left: 50%; } .col-lg-7 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; max-width: 58.33333%; } .col-lg-offset-7 { margin-left: 58.33333%; } .col-lg-8 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; max-width: 66.66667%; } .col-lg-offset-8 { margin-left: 66.66667%; } .col-lg-9 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .col-lg-offset-9 { margin-left: 75%; } .col-lg-10 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; max-width: 83.33333%; } .col-lg-offset-10 { margin-left: 83.33333%; } .col-lg-11 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; max-width: 91.66667%; } .col-lg-offset-11 { margin-left: 91.66667%; } .col-lg-12 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .col-lg-offset-12 { margin-left: 100%; } .start-lg { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; text-align: start; } .center-lg { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .end-lg { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; text-align: end; } .top-lg { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .middle-lg { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .bottom-lg { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .around-lg { -ms-flex-pack: distribute; justify-content: space-around; } .between-lg { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .first-lg { -webkit-box-ordinal-group: -9998; -ms-flex-order: -9999; order: -9999; } .last-lg { -webkit-box-ordinal-group: 10000; -ms-flex-order: 9999; order: 9999; } .container { width: 1024px; } } @media screen and (min-width: 1140px) { .col-xl { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } .col-xl-1 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; max-width: 8.33333%; } .col-xl-offset-1 { margin-left: 8.33333%; } .col-xl-2 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; max-width: 16.66667%; } .col-xl-offset-2 { margin-left: 16.66667%; } .col-xl-3 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .col-xl-offset-3 { margin-left: 25%; } .col-xl-4 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; max-width: 33.33333%; } .col-xl-offset-4 { margin-left: 33.33333%; } .col-xl-5 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; max-width: 41.66667%; } .col-xl-offset-5 { margin-left: 41.66667%; } .col-xl-6 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .col-xl-offset-6 { margin-left: 50%; } .col-xl-7 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; max-width: 58.33333%; } .col-xl-offset-7 { margin-left: 58.33333%; } .col-xl-8 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; max-width: 66.66667%; } .col-xl-offset-8 { margin-left: 66.66667%; } .col-xl-9 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .col-xl-offset-9 { margin-left: 75%; } .col-xl-10 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; max-width: 83.33333%; } .col-xl-offset-10 { margin-left: 83.33333%; } .col-xl-11 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; max-width: 91.66667%; } .col-xl-offset-11 { margin-left: 91.66667%; } .col-xl-12 { padding-right: 15px; padding-left: 15px; -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .col-xl-offset-12 { margin-left: 100%; } .start-xl { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; text-align: start; } .center-xl { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .end-xl { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; text-align: end; } .top-xl { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .middle-xl { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .bottom-xl { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .around-xl { -ms-flex-pack: distribute; justify-content: space-around; } .between-xl { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .first-xl { -webkit-box-ordinal-group: -9998; -ms-flex-order: -9999; order: -9999; } .last-xl { -webkit-box-ordinal-group: 10000; -ms-flex-order: 9999; order: 9999; } .container { width: 1140px; } } button, .gform_footer input[type="submit"], .gform_footer input[type="button"], .gform_footer button, a.button { display: inline-block; background: #EE7004; color: #ffffff; padding: 0 24px; font: 700 1.8rem/4.8rem "Open Sans", sans-serif; border: 0; position: relative; -webkit-transition: 0.2s ease; -o-transition: 0.2s ease; transition: 0.2s ease; -moz-appearance: none; -webkit-appearance: none; border-radius: 12px; } button:hover, .gform_footer input:hover[type="submit"], .gform_footer input:hover[type="button"], a.button:hover { background: var(--color-blue); } input[type="text"], input[type="search"], input[type="password"], input[type="email"], input[type="url"], input[type="tel"], input[type="file"], input[type="number"], textarea, select { display: block; width: 100%; -webkit-box-shadow: none; box-shadow: none; font-family: "Open Sans", sans-serif; font-size: 1.8rem; line-height: 3.2rem; border-width: 1px; border-color: transparent; -webkit-border-radius: 0 !important; border-radius: 0 !important; background-clip: padding-box !important; /* stops bg color from leaking outside the border: */ padding: 1.2rem; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: #EEF1F2; } input[type="text"]:focus, input[type="search"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="tel"]:focus, input[type="file"]:focus, input[type="number"]:focus, textarea:focus, select:focus { outline-style: none; -webkit-box-shadow: none; box-shadow: none; border: 1px solid #000000; } textarea { height: 14.4rem; } .ginput_container_select { position: relative; } .ginput_container_select:after { position: absolute; top: 50%; right: 1.2rem; width: 3.2rem; height: 3.2rem; z-index: -1; content: ""; display: block; background: transparent url("assets/img/icon/chevron/black.html") 50% 50% no-repeat; background-size: 0.8rem; -webkit-transform: translate(0%, -50%) rotate(90deg); -ms-transform: translate(0%, -50%) rotate(90deg); transform: translate(0%, -50%) rotate(90deg); } .ginput_container_select select { width: 100%; cursor: pointer; } .gform_fields { display: -ms-grid; display: grid; -ms-grid-columns: 1fr [12]; grid-template-columns: repeat(12, 1fr); grid-column-gap: 24px; grid-row-gap: 16px; } .gform_fields .gfield { margin-bottom: 3.2rem; grid-column: 1/-1; margin-bottom: 2.4rem; } @media screen and (min-width: 768px) { .gform_fields .gfield.gfield--width-half { -ms-grid-column-span: 6; grid-column: span 6; } } @media screen and (min-width: 960px) { .gform_fields .gfield.gfield--width-third { -ms-grid-column-span: 4; grid-column: span 4; } } .gform_fields .gfield label.gfield_label { font-weight: 700; margin-bottom: 0.6rem; display: inline-block; } .gform_fields .gfield label.gfield_label .gfield_required { margin-left: 0.2rem; } .gform_fields .gfield label.gfield_label .gfield_required .gfield_required_text { display: none; } .gform_fields .gfield .gfield_description { font-size: 1.4rem; clear: both; margin-top: 0.6rem; } .gform_fields fieldset { padding: 0; border: 0; } .gform_fields fieldset legend.gfield_label { font-weight: 700; margin-bottom: 0.6rem; } .gform_fields fieldset label { margin-left: 0.6rem; } .gform_footer { margin: 2.4rem 0 0 0; display: inline-block; position: relative; } .gform_footer:hover:after { right: 2rem; } .gform_footer:after { display: block; content: ""; width: 2.4rem; height: 2.4rem; background: transparent url("assets/img/icon/chevron/right.html") 50% 50% no-repeat; background-size: cover; right: 2.4rem; top: 1.2rem; position: absolute; -webkit-transition: 0.2s ease; -o-transition: 0.2s ease; transition: 0.2s ease; } h2.gform_submission_error, .gform_submission_error#home-text, #page-content .gform_submission_error.quote { margin: 0 0 48px 0; } .gfield_validation_message { color: #000000; } .gform_validation_container { display: none; } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #000000; font-weight: 400; opacity: 0.5; } ::-moz-placeholder { /* Firefox 19+ */ color: #000000; font-weight: 400; opacity: 0.5; } :-ms-input-placeholder { /* IE 10+ */ color: #000000; font-weight: 400; opacity: 0.5; } :-moz-placeholder { /* Firefox 18- */ color: #000000; font-weight: 400; opacity: 0.5; } p { margin: 0 0 3.2rem 0; padding: 0; text-rendering: optimizeLegibility; } p:last-child { margin: 0; } .smaller-size, #news-small .news-small .meta, #episodes .episode figure .time, .legal { font-size: 1.6rem; line-height: 2.4rem; } a { text-decoration: none; color: var(--color-blue-dark); } a:hover, a:active { outline: 0; } h1, #future .year-row, h2, #home-text, #page-content .quote, h3, h4, h2.gform_submission_error, .gform_submission_error#home-text, #page-content .gform_submission_error.quote, h5, .page-template-pensioenverhalen #content, .page-template-tijdlijn #content, .page-template-ontmoetingen #content, .error404 #content, #episodes .episode h2, #episodes .episode #home-text, #episodes .episode #page-content .quote, #page-content #episodes .episode .quote, #page-share .title, h6 { margin: 0; padding: 0; text-rendering: optimizeLegibility; font-weight: 700; color: var(--color-blue-dark); font-family: "TheSerif B7"; } h1 a, #future .year-row a, h2 a, #home-text a, #page-content .quote a, h3 a, h4 a, h2.gform_submission_error a, .gform_submission_error#home-text a, #page-content .gform_submission_error.quote a, h5 a, .page-template-pensioenverhalen #content a, .page-template-tijdlijn #content a, .page-template-ontmoetingen #content a, .error404 #content a, #episodes .episode h2 a, #episodes .episode #home-text a, #episodes .episode #page-content .quote a, #page-content #episodes .episode .quote a, #page-share .title a, h6 a { text-decoration: none; } h1 .light-blue, #future .year-row .light-blue, h2 .light-blue, #home-text .light-blue, #page-content .quote .light-blue, h3 .light-blue, h4 .light-blue, h2.gform_submission_error .light-blue, .gform_submission_error#home-text .light-blue, #page-content .gform_submission_error.quote .light-blue, h5 .light-blue, .page-template-pensioenverhalen #content .light-blue, .page-template-tijdlijn #content .light-blue, .page-template-ontmoetingen #content .light-blue, .error404 #content .light-blue, #episodes .episode h2 .light-blue, #episodes .episode #home-text .light-blue, #episodes .episode #page-content .quote .light-blue, #page-content #episodes .episode .quote .light-blue, #page-share .title .light-blue, h6 .light-blue { color: var(--color-blue); } h1.center, #future .center.year-row, h2.center, .center#home-text, #page-content .center.quote, h3.center, h4.center, h2.center.gform_submission_error, .center.gform_submission_error#home-text, #page-content .center.gform_submission_error.quote, h5.center, .page-template-pensioenverhalen .center#content, .page-template-tijdlijn .center#content, .page-template-ontmoetingen .center#content, .error404 .center#content, #episodes .episode h2.center, #episodes .episode .center#home-text, #episodes .episode #page-content .center.quote, #page-content #episodes .episode .center.quote, #page-share .center.title, h6.center { text-align: center; } h1, #future .year-row { font-size: 4rem; line-height: 4.8rem; margin-bottom: 3.6rem; } h1.large, #timeline h1.year-row, #timeline #future .year-row, #future #timeline .year-row, #future .large.year-row { font-size: 6.4rem; line-height: 6.4rem; } h2, #home-text, #page-content .quote { font-size: 2.4rem; line-height: 2.8rem; margin-bottom: 3.6rem; } @media screen and (min-width: 1024px) { h2, #home-text, #page-content .quote { font-size: 3.2rem; line-height: 4rem; } } h3 { font-size: 2.4rem; line-height: 2.8rem; margin-bottom: 1.6rem; } h4, h2.gform_submission_error, .gform_submission_error#home-text, #page-content .gform_submission_error.quote, h5, .page-template-pensioenverhalen #content, .page-template-tijdlijn #content, .page-template-ontmoetingen #content, .error404 #content, #episodes .episode h2, #episodes .episode #home-text, #episodes .episode #page-content .quote, #page-content #episodes .episode .quote, #page-share .title, h6 { font-size: 2rem; line-height: 2.8rem; margin-bottom: 1.6rem; } ul, ol { line-height: 3.2rem; margin: 0 0 3.2rem 0; } blockquote { margin: 3.2rem 0; background: #c5c6c7; padding: 24px; } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .clear { clear: both; } html { font-size: 62.5%; height: 100%; } html.no-scroll { overflow: hidden; } body { padding: 0; margin: 0; font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 1.6rem; line-height: 2.8rem; color: #000000; background: #EEF1F2; height: 100%; -webkit-font-smoothing: antialiased; -webkit-overflow-scrolling: touch; } @media screen and (min-width: 960px) { body { font-size: 1.8rem; line-height: 3.2rem; } } .wrapper { overflow: hidden; } @media screen and (min-width: 1140px) { .wrapper { padding-top: 4.8rem; } } .container { max-width: 134.4rem; width: 100%; margin: 0 auto; position: relative; padding: 0 3.2rem; } @media screen and (min-width: 1140px) { .container { padding: 0 48px; } } img { max-width: 100%; height: auto; vertical-align: bottom; } .wp-caption { margin-top: 0.6rem; } .wp-caption .wp-caption-text { font-size: 1.4rem; line-height: 1.8rem; } *:focus { outline: 0 !important; } .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } main, .confetti-wrapper { position: relative; overflow: hidden; } .confetti { position: absolute; width: 100%; height: 100%; min-height: 200rem; overflow: hidden; } .confetti .left-sidebar { position: absolute; left: 0; top: 96px; bottom: 96px; width: 24px; } @media screen and (min-width: 1280px) { .confetti .left-sidebar { width: calc((100vw - 1344px)/2); } } .confetti .right-sidebar { position: absolute; right: 0; top: 96px; bottom: 96px; width: 24px; } @media screen and (min-width: 1280px) { .confetti .right-sidebar { width: calc((100vw - 1344px)/2); } } .confetti svg { width: 60%; } @media screen and (min-width: 1440px) { .confetti svg { width: 100%; } } .confetti svg.item { position: absolute; z-index: 3; } .confetti svg.circle { -webkit-animation: circle 3s infinite linear; animation: circle 3s infinite linear; } .confetti svg.circle.yellow-circle { -webkit-animation: circleReverse 4s infinite linear; animation: circleReverse 4s infinite linear; } .confetti svg.circle.orange-circle { -webkit-animation: circle 5s infinite linear; animation: circle 5s infinite linear; } .confetti svg.circle.red-circle { -webkit-animation: circleReverse 6s infinite linear; animation: circleReverse 6s infinite linear; } .confetti svg.rectangle { -webkit-animation: rectangle 6s infinite linear; animation: rectangle 6s infinite linear; } .confetti svg.line { -webkit-animation: line 5s infinite linear; animation: line 5s infinite linear; } .confetti svg.line.purple-line { -webkit-animation: lineReverse 7s infinite linear; animation: lineReverse 7s infinite linear; } .confetti svg.line.red-line { -webkit-animation: line 8s infinite linear; animation: line 8s infinite linear; } .confetti svg.triangle { -webkit-animation: triangle 5s infinite linear; animation: triangle 5s infinite linear; } .confetti svg.triangle.pink-triangle { -webkit-animation: triangleReverse 6s infinite linear; animation: triangleReverse 6s infinite linear; } .confetti svg.triangle.yellow-triangle { -webkit-animation: triangleReverse 7s infinite linear; animation: triangleReverse 7s infinite linear; } @-webkit-keyframes circle { 0% { -webkit-transform: rotate(0deg) translateX(10px) rotate(0deg); transform: rotate(0deg) translateX(10px) rotate(0deg); } 100% { -webkit-transform: rotate(360deg) translateX(10px) rotate(-360deg); transform: rotate(360deg) translateX(10px) rotate(-360deg); } } @keyframes circle { 0% { -webkit-transform: rotate(0deg) translateX(10px) rotate(0deg); transform: rotate(0deg) translateX(10px) rotate(0deg); } 100% { -webkit-transform: rotate(360deg) translateX(10px) rotate(-360deg); transform: rotate(360deg) translateX(10px) rotate(-360deg); } } @-webkit-keyframes circleReverse { 0% { -webkit-transform: rotate(0deg) translateX(-10px) rotate(0deg); transform: rotate(0deg) translateX(-10px) rotate(0deg); } 100% { -webkit-transform: rotate(-360deg) translateX(-10px) rotate(360deg); transform: rotate(-360deg) translateX(-10px) rotate(360deg); } } @keyframes circleReverse { 0% { -webkit-transform: rotate(0deg) translateX(-10px) rotate(0deg); transform: rotate(0deg) translateX(-10px) rotate(0deg); } 100% { -webkit-transform: rotate(-360deg) translateX(-10px) rotate(360deg); transform: rotate(-360deg) translateX(-10px) rotate(360deg); } } @-webkit-keyframes rectangle { 0% { -webkit-transform: rotate(0deg) translateX(-10px) rotate(0deg); transform: rotate(0deg) translateX(-10px) rotate(0deg); } 100% { -webkit-transform: rotate(360deg) translateX(-10px) rotate(360deg); transform: rotate(360deg) translateX(-10px) rotate(360deg); } } @keyframes rectangle { 0% { -webkit-transform: rotate(0deg) translateX(-10px) rotate(0deg); transform: rotate(0deg) translateX(-10px) rotate(0deg); } 100% { -webkit-transform: rotate(360deg) translateX(-10px) rotate(360deg); transform: rotate(360deg) translateX(-10px) rotate(360deg); } } @-webkit-keyframes line { 0% { -webkit-transform: translateY(50px) rotate(0deg); transform: translateY(50px) rotate(0deg); } 100% { -webkit-transform: translateY(50px) rotate(360deg); transform: translateY(50px) rotate(360deg); } } @keyframes line { 0% { -webkit-transform: translateY(50px) rotate(0deg); transform: translateY(50px) rotate(0deg); } 100% { -webkit-transform: translateY(50px) rotate(360deg); transform: translateY(50px) rotate(360deg); } } @-webkit-keyframes lineReverse { 0% { -webkit-transform: translateY(-50px) rotate(0deg); transform: translateY(-50px) rotate(0deg); } 100% { -webkit-transform: translateY(-50px) rotate(360deg); transform: translateY(-50px) rotate(360deg); } } @keyframes lineReverse { 0% { -webkit-transform: translateY(-50px) rotate(0deg); transform: translateY(-50px) rotate(0deg); } 100% { -webkit-transform: translateY(-50px) rotate(360deg); transform: translateY(-50px) rotate(360deg); } } @-webkit-keyframes triangle { 0% { -webkit-transform: translateY(50px) rotate(0deg); transform: translateY(50px) rotate(0deg); } 100% { -webkit-transform: translateY(50px) rotate(360deg); transform: translateY(50px) rotate(360deg); } } @keyframes triangle { 0% { -webkit-transform: translateY(50px) rotate(0deg); transform: translateY(50px) rotate(0deg); } 100% { -webkit-transform: translateY(50px) rotate(360deg); transform: translateY(50px) rotate(360deg); } } @-webkit-keyframes triangleReverse { 0% { -webkit-transform: translateY(-50px) rotate(0deg); transform: translateY(-50px) rotate(0deg); } 100% { -webkit-transform: translateY(-50px) rotate(-360deg); transform: translateY(-50px) rotate(-360deg); } } @keyframes triangleReverse { 0% { -webkit-transform: translateY(-50px) rotate(0deg); transform: translateY(-50px) rotate(0deg); } 100% { -webkit-transform: translateY(-50px) rotate(-360deg); transform: translateY(-50px) rotate(-360deg); } } .bottom-borders-white, #home-start, #page-header, #page-content .image-block { position: relative; } .bottom-borders-white:before, #home-start:before, #page-header:before, #page-content .image-block:before, .bottom-borders-white:after, #home-start:after, #page-header:after, #page-content .image-block:after { content: ""; display: block; background: #ffffff; position: absolute; height: 4.8rem; width: 50%; } .bottom-borders-white:before, #home-start:before, #page-header:before, #page-content .image-block:before { left: 0; bottom: 0; z-index: 2; border-top-right-radius: 24px; } .bottom-borders-white:after, #home-start:after, #page-header:after, #page-content .image-block:after { right: 0; bottom: 0; z-index: 2; border-top-left-radius: 24px; } .bottom-borders-gray, #home-text, .page-template-pensioenverhalen #content, .page-template-tijdlijn #content, .page-template-ontmoetingen #content, .error404 #content, #past .border { position: relative; } .bottom-borders-gray:before, #home-text:before, .page-template-pensioenverhalen #content:before, .page-template-tijdlijn #content:before, .page-template-ontmoetingen #content:before, .error404 #content:before, #past .border:before, .bottom-borders-gray:after, #home-text:after, .page-template-pensioenverhalen #content:after, .page-template-tijdlijn #content:after, .page-template-ontmoetingen #content:after, .error404 #content:after, #past .border:after { content: ""; display: block; background: white; position: absolute; height: 4.8rem; width: 50%; } .bottom-borders-gray:before, #home-text:before, .page-template-pensioenverhalen #content:before, .page-template-tijdlijn #content:before, .page-template-ontmoetingen #content:before, .error404 #content:before, #past .border:before { left: 0; bottom: 0; z-index: 2; border-top-right-radius: 24px; } .bottom-borders-gray:after, #home-text:after, .page-template-pensioenverhalen #content:after, .page-template-tijdlijn #content:after, .page-template-ontmoetingen #content:after, .error404 #content:after, #past .border:after { right: 0; bottom: 0; z-index: 2; border-top-left-radius: 24px; } .top-borders-white { position: relative; width: 100%; } .top-borders-white:before, .top-borders-white:after { content: ""; display: block; background: #ffffff; position: absolute; height: 4.8rem; width: 50%; } .top-borders-white:before { left: 0; top: 0; z-index: 2; border-top-right-radius: 24px; } .top-borders-white:after { right: 0; top: 0; z-index: 2; border-top-left-radius: 24px; } .top-borders-gray, #footer { position: relative; height: 4.8rem; width: 100%; background: #EEF1F2; } .top-borders-gray:before, #footer:before, .top-borders-gray:after, #footer:after { content: ""; display: block; position: absolute; height: 4.8rem; width: 50%; background: #ffffff; } .top-borders-gray:before, #footer:before { left: 0; top: 0; z-index: 2; border-top-right-radius: 24px; } .top-borders-gray:after, #footer:after { right: 0; top: 0; z-index: 2; border-top-left-radius: 24px; } .header { position: fixed; top: 0; left: 0; width: 100%; border-bottom-right-radius: 28px; border-bottom-left-radius: 24px; background: #ffffff; z-index: 999; padding: 0 2.4rem; } @media screen and (min-width: 960px) { .header { height: 0; padding: 0 48px; } } .header .container { height: 100%; } .header .row, .header #nav ul, #nav .header ul, .header #intros .intro .title, #intros .intro .header .title, .header .news, .header .news .content .action, .news .content .header .action, .header #news-small .news-small .action, #news-small .news-small .header .action, .header #episodes .episode .action, #episodes .episode .header .action, .header #timeline .year-row, #timeline .header .year-row, .header .pagination { margin: 0; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header .main-row { height: 7.2rem; } .header .logo { display: flex; height: 100%; z-index: 2; position: relative; } .header .logo img { height: 100%; width: auto; } .header .logo svg { display: block; height: 2.4rem; width: auto; } @media screen and (min-width: 640px) { .header .logo svg { height: 3.2rem; margin-right: 1rem; } } #open-menu { display: -webkit-box; display: -ms-flexbox; display: flex; font-weight: 700; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; } @media screen and (min-width: 1140px) { #open-menu { display: none; } } #hamburger span { height: 0.3rem; width: 2.4rem; background: var(--color-blue-dark); display: block; margin: 0.3rem 0; } #top-nav { height: 4.8rem; background-color: #EEF1F2; margin: 0 -4.8rem; padding: 0 4.8rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media screen and (min-width: 1140px) { #top-nav { display: -webkit-box; display: -ms-flexbox; display: flex; } } #top-nav ul { list-style-type: none; margin: 0; padding: 0; } #top-nav ul li { display: inline; margin-left: 3.6rem; } #top-nav ul li a { font-size: 1.4rem; } #top-nav ul li a:hover { color: var(--color-blue); } #nav { position: fixed; background: #ffffff; top: -100%; left: 0; width: 100%; height: 100%; padding-top: 144px; } @media screen and (min-width: 1140px) { #nav { display: block; top: auto; left: auto; padding: 0; width: auto; height: auto; position: relative; } } @media screen and (min-width: 1140px) { #nav .menu-header-menu-container, #nav .menu-header-container { display: none; } } #nav ul { list-style-type: none; margin: 0; padding: 0; display: block; height: auto; } @media screen and (min-width: 1140px) { #nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media screen and (min-width: 1140px) { #nav ul li { margin-left: 3.2rem; } } #nav ul li.current-menu-item a { color: var(--color-blue); } #nav ul li.menu-item-has-children ul { display: none; } #nav ul li a { display: block; font-size: 2rem; line-height: 4.8rem; padding: 0 2.4rem; font-weight: 700; } @media screen and (min-width: 1140px) { #nav ul li a { font-size: 1.6rem; line-height: 3.2rem; padding: 0; font-weight: 400; } } #nav ul li a:hover { color: var(--color-blue); } #home-start { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 7.2rem 0 0 0; } #home-start.mobile { display: -webkit-box; display: -ms-flexbox; display: flex; } @media screen and (min-width: 960px) { #home-start.mobile { display: none; } } #home-start.desktop { display: none; } @media screen and (min-width: 960px) { #home-start.desktop { max-height: 65rem; display: -webkit-box; display: -ms-flexbox; display: flex; } } #home-start video { width: 100%; } #home-start button, #home-start .gform_footer input[type="submit"], .gform_footer #home-start input[type="submit"], #home-start .gform_footer input[type="button"], .gform_footer #home-start input[type="button"] { width: 100%; padding: 0; background: none; } #home-start .container { max-width: 192rem; padding: 0; } #home-text { background: #ffffff; padding: 144px 0 144px 0; text-align: center; } #home-text h1, #home-text #future .year-row, #future #home-text .year-row { height: 0; margin: 0; overflow: hidden; } @media screen and (min-width: 960px) { #home-text { padding: 192px 0 192px 0; } } #news { margin: 2rem 0; } @media screen and (min-width: 960px) { #news { margin: 0; } } .news { margin: 0 0 20px 0; } @media screen and (min-width: 960px) { .news:hover .content { border-bottom-left-radius: 24px; } } @media screen and (min-width: 960px) { .news:hover .content .action svg { margin-right: 1.2rem; } } .news .content, .news .image { width: 100%; } @media screen and (min-width: 960px) { .news .content, .news .image { width: 50%; } } .news .content { background: var(--color-blue); color: #ffffff; padding: 3.2rem 2.4rem; border-top-right-radius: 24px; -webkit-transition: 0.2s ease; -o-transition: 0.2s ease; transition: 0.2s ease; } @media screen and (min-width: 960px) { .news .content { padding: 48px; } } .news .content h3 { color: #ffffff; } .news .content p { margin: 0; } .news .content .action { margin: 1.6rem 0 0 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .news .content .action svg { height: 1.2rem; margin-right: 0.6rem; -webkit-transition: 0.2s ease; -o-transition: 0.2s ease; transition: 0.2s ease; } .news .content .action svg path { stroke: #ffffff; } .news .image { position: relative; overflow: hidden; height: 24rem; -webkit-transition: 0.2s ease; -o-transition: 0.2s ease; transition: 0.2s ease; } @media screen and (min-width: 960px) { .news .image { border-top-left-radius: 24px; height: auto; border-bottom-right-radius: 24px; } } .news .image .background-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; } .news.news-2 .content { background: #ffffff; color: #000000; } .news.news-2 .content h3 { color: var(--color-blue-dark); } .news.news-2 .content .action svg path { stroke: var(--color-blue); } .news.news-3 { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } @media screen and (min-width: 960px) { .news.news-3:hover .content { border-bottom-left-radius: 0; border-bottom-right-radius: 24px; } } @media screen and (min-width: 960px) { .news.news-3:hover .image { border-bottom-left-radius: 24px; } } .news.news-3 .content { border-top-right-radius: 0; } @media screen and (min-width: 960px) { .news.news-3 .content { border-top-left-radius: 24px; border-bottom-right-radius: 24px; } } @media screen and (min-width: 960px) { .news.news-3 .image { border-top-right-radius: 24px; border-top-left-radius: 0; border-bottom-right-radius: 0; } } #page-header { position: relative; width: 100%; height: 80vh; } #page-header .background { position: absolute; width: 100%; height: 100%; background-size: cover; } #page-content { background: #ffffff; padding: 7.2rem 0; } @media screen and (min-width: 960px) { #page-content { padding: 7.2rem 0; min-height: 40rem; } } #page-content.higher { margin-top: 48px; } #page-content .block { margin: 48px auto; } @media screen and (min-width: 960px) { #page-content .block { margin: 96px auto; } } #page-content .block:first-child { margin-top: 0; } #page-content .block:last-child { margin-bottom: 0; } #page-content .quote { background: #EEF1F2; padding: 2.4rem; border-bottom-right-radius: 24px; color: #EE7004; } @media screen and (min-width: 960px) { #page-content .quote { padding: 48px; } } #page-content .image-block img { width: 100%; } #page-content a { text-decoration: underline; color: var(--color-blue-dark); } #page-content a:hover { color: #EE7004; } #page-content p + h1, #page-content #future p + .year-row, #future #page-content p + .year-row, #page-content p + h2, #page-content p + #home-text, #page-content p + .quote, #page-content p + h3, #page-content p + h4, #page-content p + h2.gform_submission_error, #page-content p + .gform_submission_error#home-text, #page-content p + .gform_submission_error.quote { margin-top: 48px; } #page-content h2, #page-content #home-text, #page-content .quote { margin-bottom: 1.6rem; } #news-small { margin: 96px 0; } #news-small .news-small { height: 100%; background: #ffffff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-bottom-right-radius: 24px; overflow: hidden; -webkit-transition: 0.2s ease; -o-transition: 0.2s ease; transition: 0.2s ease; } #news-small .news-small:hover { border-bottom-left-radius: 24px; } @media screen and (min-width: 960px) { #news-small .news-small:hover .action svg { margin-right: 1.2rem; } } #news-small .news-small .content { padding: 2.4rem; } #news-small .news-small .meta { margin-bottom: 1.2rem; } #news-small .news-small .action { margin: 1.6rem 0 0 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #news-small .news-small .action svg { height: 1.2rem; margin-right: 0.6rem; -webkit-transition: 0.2s ease; -o-transition: 0.2s ease; transition: 0.2s ease; } #news-small .news-small .action svg path { stroke: var(--color-blue); } #news-small .news-small figure { margin-top: auto; } #news-small .news-small figure img { width: 100%; aspect-ratio: 1.7777777778; } .page-template-nieuws #page-content { margin: 96px 0; background: #EEF1F2; } .page-template-nieuws #page-content a { text-decoration: none; } .page-template-virtuele-omgeving #page-content, .page-template-ontmoetingen #page-content, .single-ontmoetingen #page-content { text-align: center; } .page-template-virtuele-omgeving #page-content .embed-container, .page-template-ontmoetingen #page-content .embed-container, .single-ontmoetingen #page-content .embed-container { margin: 48px 0; } .page-template-ontmoetingen #page-content h1, .page-template-ontmoetingen #page-content #future .year-row, #future .page-template-ontmoetingen #page-content .year-row, .single-ontmoetingen #page-content h1, .single-ontmoetingen #page-content #future .year-row, #future .single-ontmoetingen #page-content .year-row { margin-bottom: 1.6rem; } .page-template-ontmoetingen #page-content h3, .single-ontmoetingen #page-content h3 { margin-bottom: 3.6rem; } #virtual { margin-top: 48px; position: relative; } @media screen and (min-width: 960px) { #virtual figure { overflow: hidden; } } #virtual img { position: relative; -webkit-filter: blur(4px); filter: blur(4px); -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } #virtual .content-wrapper { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #virtual .content-wrapper .content { width: 40rem; max-width: 40rem; background: #CCEBF1; padding: 3.2rem 1.6rem; text-align: center; } @media screen and (min-width: 960px) { #virtual .content-wrapper .content { padding: 4.8rem 2.4rem; } } #virtual .content-wrapper .content a { display: -webkit-box; display: -ms-flexbox; display: flex; text-decoration: none; background: #ffffff; -webkit-border-radius: 2.5rem !important; border-radius: 2.5rem !important; background-clip: padding-box !important; /* stops bg color from leaking outside the border: */ font-size: 1.6rem; line-height: 3.2rem; width: 24rem; padding: 0.6rem; margin: 2.4rem auto 0 auto; -webkit-transition: 0.2s ease; -o-transition: 0.2s ease; transition: 0.2s ease; font-family: "TheSerif B7"; } @media screen and (min-width: 960px) { #virtual .content-wrapper .content a { font-size: 1.8rem; } } #virtual .content-wrapper .content a:hover { background: var(--color-blue); color: #ffffff; } #virtual .content-wrapper .content a svg { margin-right: 1.6rem; } .page-template-pensioenverhalen #content, .page-template-tijdlijn #content, .page-template-ontmoetingen #content, .error404 #content { background: #EEF1F2; padding: 192px 0 96px 0; text-align: center; } #episodes { background-color: #ffffff; padding: 0 0 96px 0; } #episodes .card-margin { margin-bottom: 48px; } @media screen and (min-width: 960px) { #episodes .card-margin { margin-bottom: 96px; } } #episodes .card-margin a:hover .action { color: var(--color-blue); } #episodes .episode figure { background-color: #000000; margin-bottom: 1.6rem; position: relative; } #episodes .episode figure .time { position: absolute; color: #ffffff; left: 2rem; bottom: 1.6rem; } #episodes .episode figure img { opacity: 0.8; width: 100%; height: auto; } #episodes .episode h2, #episodes .episode #home-text, #episodes .episode #page-content .quote, #page-content #episodes .episode .quote { margin-bottom: 1.6rem; } #episodes .episode p { margin: 0; } #episodes .episode .action { margin: 1.6rem 0 0 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: 700; } #episodes .episode .action svg { height: 1.2rem; margin-right: 0.6rem; -webkit-transition: 0.2s ease; -o-transition: 0.2s ease; transition: 0.2s ease; } #all-stories { background: #ffffff; } #all-stories .container { padding: 96px 0; } #all-stories .col:nth-child(9n + 1) .images, #news-small .col:nth-child(9n + 1) .images { border-top-right-radius: 24px; } #all-stories .col:nth-child(9n + 2) .images, #news-small .col:nth-child(9n + 2) .images { border-top-right-radius: 24px; border-bottom-left-radius: 24px; } #all-stories .col:nth-child(9n + 3) .images, #news-small .col:nth-child(9n + 3) .images { border-top-left-radius: 24px; } #all-stories .col:nth-child(9n + 4) .images, #news-small .col:nth-child(9n + 4) .images { border-top-left-radius: 24px; } #all-stories .col:nth-child(9n + 5) .images, #news-small .col:nth-child(9n + 5) .images { border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; } #all-stories .col:nth-child(9n + 6) .images, #news-small .col:nth-child(9n + 6) .images { border-top-left-radius: 24px; } #all-stories .col:nth-child(9n + 7) .images, #news-small .col:nth-child(9n + 7) .images { border-top-right-radius: 24px; border-bottom-left-radius: 24px; } #all-stories .col:nth-child(9n + 8) .images, #news-small .col:nth-child(9n + 8) .images { border-top-left-radius: 24px; border-bottom-right-radius: 24px; } #all-stories .col:nth-child(9n + 9) .images, #news-small .col:nth-child(9n + 9) .images { border-bottom-right-radius: 24px; } .story { margin-bottom: 3rem; } .story:hover .images .hover-image { opacity: 1; } .story:hover strong { color: var(--color-blue-dark); } .story .images { position: relative; overflow: hidden; } .story .images .hover-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: 50% 50%; z-index: 2; opacity: 0; -webkit-transition: 0.6s ease; -o-transition: 0.6s ease; transition: 0.6s ease; } .story .action { margin: 1.2rem 0 0 0; } #timeline { position: relative; overflow: hidden; padding-bottom: 96px; } #timeline .year { margin-bottom: 144px; } #timeline .year:last-child { margin: 0; } #timeline .year-row { margin: 0 0 2.4rem 0; position: relative; color: var(--color-blue-dark); -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 2.4rem; font-size: 4.8rem; line-height: 1; font-weight: 700; font-family: "TheSerif B7"; } @media screen and (min-width: 960px) { #timeline .year-row { font-size: 6.4rem; margin: 0 0 48px 0; } } #timeline .year-row:before { content: ""; display: block; width: 3.2rem; height: 3.2rem; background: var(--color-blue-dark); position: absolute; left: -2rem; -webkit-border-radius: 50% !important; border-radius: 50% !important; background-clip: padding-box !important; /* stops bg color from leaking outside the border: */ } @media screen and (min-width: 960px) { #timeline .year-row:before { left: 50%; margin-left: -2.4rem; width: 4.8rem; height: 4.8rem; } } @media screen and (min-width: 960px) { #timeline .year-row.right { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } } #timeline .year-row .year-number { width: 50%; } @media screen and (min-width: 960px) { #timeline .year-row .year-number.left { text-align: right; padding-right: 6rem; } } @media screen and (min-width: 960px) { #timeline .year-row .year-number.right { padding-left: 6rem; } } #timeline .content.above { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media screen and (min-width: 960px) { #timeline .content.above { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } #timeline .content.above .text { width: 100%; margin-top: 3.6rem; } #timeline .content.above .text + figure { margin-top: 0; } #timeline .content p { font-size: 1.6rem; line-height: 2.4rem; } @media screen and (min-width: 960px) { #timeline .content p { font-size: 1.8rem; line-height: 2.8rem; } } #timeline .content h2, #timeline .content #home-text, #timeline .content #page-content .quote, #page-content #timeline .content .quote { color: var(--color-blue); margin-bottom: 1.2rem; } #timeline .content figure { min-width: 28rem; } #timeline .content figure.mobile { display: block; } @media screen and (min-width: 960px) { #timeline .content figure.mobile { display: none; } } #timeline .content figure.desktop { display: none; } @media screen and (min-width: 960px) { #timeline .content figure.desktop { display: block; } } #timeline .content .text + figure { margin-top: 3.6rem; } #timeline .content figure + figure { margin-top: 3.6rem; } #timeline .content-left { padding-left: 2.4rem; } @media screen and (min-width: 960px) { #timeline .content-left { text-align: right; padding-right: 48px; padding-left: 0; } } @media screen and (min-width: 960px) { #timeline .content-left figure { margin-left: auto; } } #timeline .content-right { padding-left: 2.4rem; margin-top: 2.4rem; } @media screen and (min-width: 960px) { #timeline .content-right { padding-left: 48px; margin: 0; } } #past, #future { position: relative; } #past:before, #future:before { content: ""; display: block; width: 8px; background: var(--color-blue-dark); position: absolute; top: 6.4rem; bottom: 0; left: 2.4rem; z-index: 99; } @media screen and (min-width: 960px) { #past:before, #future:before { width: 8px; margin-left: -4px; left: 50%; } } #past { background: #ffffff; padding: 48px 0 0 0; } #past .year:last-child { padding-bottom: 144px; } #future { padding: 96px 0 48px 0; } #future:before { background: var(--color-blue); top: 0; } #future:after { content: ""; display: block; background: var(--color-blue); position: absolute; bottom: -2px; -webkit-border-radius: 50% !important; border-radius: 50% !important; background-clip: padding-box !important; /* stops bg color from leaking outside the border: */ left: 1.2rem; width: 3.2rem; height: 3.2rem; } @media screen and (min-width: 960px) { #future:after { left: 50%; margin-left: -2.4rem; width: 4.8rem; height: 4.8rem; } } #future .year-row { color: var(--color-blue); } #future .year-row:before { background: var(--color-blue); } #future .content h2, #future .content #home-text, #future .content #page-content .quote, #page-content #future .content .quote { color: var(--color-blue-dark); } .pagination { margin: 48px 0 0 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .pagination .page-numbers { display: -webkit-box; display: -ms-flexbox; display: flex; width: 3.6rem; height: 3.6rem; background: red; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: var(--color-blue); margin-right: 0.8rem; -webkit-border-radius: 50% !important; border-radius: 50% !important; background-clip: padding-box !important; /* stops bg color from leaking outside the border: */ -webkit-transition: 0.2s ease; -o-transition: 0.2s ease; transition: 0.2s ease; margin-right: 0.6rem; color: #ffffff; } .pagination .page-numbers.dots, .pagination .page-numbers.next { display: inline; background: none; width: auto; height: auto; color: #000000; } .pagination .page-numbers.current { background: #EEF1F2; color: #000000; } .pagination .page-numbers.current:hover { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .pagination .page-numbers:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } #page-share { margin-top: 72px; } #page-share .social-share { margin-top: 1.2rem; display: -webkit-box; display: -ms-flexbox; display: flex; } #page-share .social-share a { display: -webkit-box; display: -ms-flexbox; display: flex; width: 3.6rem; height: 3.6rem; background: red; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: var(--color-blue); margin-right: 0.8rem; -webkit-border-radius: 50% !important; border-radius: 50% !important; background-clip: padding-box !important; /* stops bg color from leaking outside the border: */ -webkit-transition: 0.2s ease; -o-transition: 0.2s ease; transition: 0.2s ease; } #page-share .social-share a:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } #page-share .social-share a svg { width: 3rem; } #footer { background: #ffffff; height: auto; } #footer .container { padding-top: 48px; } @media screen and (min-width: 960px) { #footer .container { padding-top: 144px; } } #footer .social { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 48px; } #footer .social a { display: -webkit-box; display: -ms-flexbox; display: flex; width: 3.2rem; height: 3.2rem; overflow: hidden; margin-right: 1.2rem; } #footer .social a:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } #footer .social a svg { width: 3.2rem; height: 3.2rem; } #footer .social a svg path { fill: var(--color-blue); } #footer-nav ul { list-style-type: none; margin: 0; padding: 0; } @media screen and (min-width: 960px) { #footer-nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media screen and (min-width: 960px) { #footer-nav ul li { margin-right: 48px; } .menu-footer-scroll li { margin-right: 0 !important; } } #footer-nav ul li.menu-item-has-children ul { display: none; } #footer-nav ul li a:hover { text-decoration: underline; } .legal { margin: 96px -2.4rem 0 -2.4rem; background: #EEF1F2; border-top-left-radius: 24px; padding: 2.4rem 3.2rem; } @media screen and (min-width: 960px) { .legal { padding: 2.4rem 48px; margin: 96px 0 0 0; } } .legal .row, .legal #nav ul, #nav .legal ul, .legal #intros .intro .title, #intros .intro .legal .title, .legal .news, .legal .news .content .action, .news .content .legal .action, .legal #news-small .news-small .action, #news-small .news-small .legal .action, .legal #episodes .episode .action, #episodes .episode .legal .action, .legal #timeline .year-row, #timeline .legal .year-row, .legal .pagination { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0; } .legal ul { list-style-type: none; margin: 0; padding: 0; } @media screen and (min-width: 768px) { .legal ul { display: -webkit-box; display: -ms-flexbox; display: flex; } } .legal ul li { margin-right: 48px; } .legal ul li a { display: contents; } .menu-footer-scroll li { margin-right: 0 !important; } .legal ul li a:hover { text-decoration: underline; } .legal .logo { margin-top: 2.4rem; } @media screen and (min-width: 960px) { .legal .logo { margin: 0; } } .legal .logo svg { display: block; height: 3.2rem; width: auto; } #intros { margin: 0 0 96px 0; } @media screen and (min-width: 960px) { #intros { margin: 0 0 144px 0; } } #intros .content { padding: 0 48px 48px 48px; background: #ffffff; border-bottom-right-radius: 24px; } #intros h2, #intros #home-text, #intros #page-content .quote, #page-content #intros .quote { position: relative; z-index: 2; } #intros .intro { width: 100%; text-align: center; margin-bottom: 48px; border-bottom: 1px solid #000000; padding-bottom: 2.4rem; } @media screen and (min-width: 640px) { #intros .intro { border-bottom: 0; } } @media screen and (min-width: 960px) { #intros .intro { padding-bottom: 0; margin: 0; } } #intros .intro:last-child { margin: 0; border-bottom: 0; padding-bottom: 0; } @media screen and (min-width: 960px) { #intros .intro { width: 33%; } } #intros .intro:last-child figure { border: 0 !important; } #intros .intro a:hover .title svg { margin-right: 1.2rem; } #intros .intro figure { height: 12rem; padding: 0 48px; } @media screen and (min-width: 960px) { #intros .intro figure { border-right: 1px solid #000000; } } #intros .intro figure img { height: 100%; width: auto; } #intros .intro .title { margin: 1.2rem 0 0 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-weight: 700; } @media screen and (min-width: 960px) { #intros .intro .title { margin: 2.4rem 0 0 0; } } #intros .intro .title svg { height: 1.2rem; width: auto; margin-right: 0.8rem; -webkit-transition: 0.2s ease; -o-transition: 0.2s ease; transition: 0.2s ease; } /*******************************************************************/ /* ftrtch dino */ /* [type: CSS] [file:main-css] [5.1633] DESIGN*/ /*******************************************************************/ /* 0.11 D>D */ /* db 168 */ /*******************************************************************/ /* ftrtch dino */ /* [type: CSS] [file:main-css] [5.3816] DESIGN*/ /*******************************************************************/ /* 0.11 P>P */ /* db 148 */