/* Minification failed. Returning unminified contents. (535,28): run-time error CSS1039: Token not allowed after unary operator: '-dark-green' (545,28): run-time error CSS1039: Token not allowed after unary operator: '-light-green' (1443,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1476,38): run-time error CSS1039: Token not allowed after unary operator: '-swiper-wrapper-transition-timing-function' (1578,31): run-time error CSS1039: Token not allowed after unary operator: '-swiper-centered-offset-before' (1584,17): run-time error CSS1039: Token not allowed after unary operator: '-swiper-centered-offset-after' (1588,30): run-time error CSS1039: Token not allowed after unary operator: '-swiper-centered-offset-before' (1594,18): run-time error CSS1039: Token not allowed after unary operator: '-swiper-centered-offset-after' (1638,28): run-time error CSS1039: Token not allowed after unary operator: '-swiper-preloader-color' (1638,57): run-time error CSS1039: Token not allowed after unary operator: '-swiper-theme-color' (1648,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1652,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1680,17): run-time error CSS1039: Token not allowed after unary operator: '-swiper-virtual-size' (1685,18): run-time error CSS1039: Token not allowed after unary operator: '-swiper-virtual-size' (1689,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1694,15): run-time error CSS1039: Token not allowed after unary operator: '-swiper-navigation-top-offset' (1695,22): run-time error CSS1039: Token not allowed after unary operator: '-swiper-navigation-size' (1696,18): run-time error CSS1039: Token not allowed after unary operator: '-swiper-navigation-size' (1697,34): run-time error CSS1039: Token not allowed after unary operator: '-swiper-navigation-size' (1703,17): run-time error CSS1039: Token not allowed after unary operator: '-swiper-navigation-color' (1703,47): run-time error CSS1039: Token not allowed after unary operator: '-swiper-theme-color' (1734,16): run-time error CSS1039: Token not allowed after unary operator: '-swiper-navigation-sides-offset' (1739,17): run-time error CSS1039: Token not allowed after unary operator: '-swiper-navigation-sides-offset' (1749,21): run-time error CSS1039: Token not allowed after unary operator: '-swiper-navigation-size' (1761,17): run-time error CSS1039: Token not allowed after unary operator: '-swiper-navigation-sides-offset' (1786,18): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-bottom' (1787,15): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-top' (1827,17): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-bullet-width' (1827,54): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-bullet-size' (1828,18): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-bullet-height' (1828,56): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-bullet-size' (1830,25): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-bullet-border-radius' (1831,22): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-bullet-inactive-color' (1832,19): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-bullet-inactive-opacity' (1853,19): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-bullet-opacity' (1854,22): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-color' (1854,52): run-time error CSS1039: Token not allowed after unary operator: '-swiper-theme-color' (1858,17): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-right' (1859,16): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-left' (1865,22): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-bullet-vertical-gap' (1881,20): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-bullet-horizontal-gap' (1899,17): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-fraction-color' (1903,22): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-progressbar-bg-color' (1908,26): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-color' (1908,56): run-time error CSS1039: Token not allowed after unary operator: '-swiper-theme-color' (1924,18): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-progressbar-size' (1930,21): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-progressbar-size' (1941,25): run-time error CSS1039: Token not allowed after unary operator: '-swiper-scrollbar-border-radius' (1944,22): run-time error CSS1039: Token not allowed after unary operator: '-swiper-scrollbar-bg-color' (1953,20): run-time error CSS1039: Token not allowed after unary operator: '-swiper-scrollbar-sides-offset' (1954,22): run-time error CSS1039: Token not allowed after unary operator: '-swiper-scrollbar-bottom' (1955,19): run-time error CSS1039: Token not allowed after unary operator: '-swiper-scrollbar-top' (1957,22): run-time error CSS1039: Token not allowed after unary operator: '-swiper-scrollbar-size' (1958,37): run-time error CSS1039: Token not allowed after unary operator: '-swiper-scrollbar-sides-offset' (1963,20): run-time error CSS1039: Token not allowed after unary operator: '-swiper-scrollbar-left' (1964,21): run-time error CSS1039: Token not allowed after unary operator: '-swiper-scrollbar-right' (1965,19): run-time error CSS1039: Token not allowed after unary operator: '-swiper-scrollbar-sides-offset' (1967,21): run-time error CSS1039: Token not allowed after unary operator: '-swiper-scrollbar-size' (1968,38): run-time error CSS1039: Token not allowed after unary operator: '-swiper-scrollbar-sides-offset' (1975,22): run-time error CSS1039: Token not allowed after unary operator: '-swiper-scrollbar-drag-bg-color' (1976,25): run-time error CSS1039: Token not allowed after unary operator: '-swiper-scrollbar-border-radius' (2170,28): run-time error CSS1039: Token not allowed after unary operator: '-light-blue' (2275,25): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (2326,32): run-time error CSS1039: Token not allowed after unary operator: '-light-green' (2364,40): run-time error CSS1039: Token not allowed after unary operator: '-dark-green' (2391,36): run-time error CSS1039: Token not allowed after unary operator: '-light-blue' (2392,25): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (2408,29): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (2460,21): run-time error CSS1039: Token not allowed after unary operator: '-dark-green' (2563,28): run-time error CSS1039: Token not allowed after unary operator: '-dark-green' (2793,32): run-time error CSS1039: Token not allowed after unary operator: '-light-green' (2797,32): run-time error CSS1039: Token not allowed after unary operator: '-dark-green' (2904,29): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (2908,33): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (2920,28): run-time error CSS1039: Token not allowed after unary operator: '-light-green' (2948,22): run-time error CSS1039: Token not allowed after unary operator: '-dark-green' (2959,28): run-time error CSS1039: Token not allowed after unary operator: '-light-green-background' (2975,21): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (2991,17): run-time error CSS1039: Token not allowed after unary operator: '-light-green' (3150,28): run-time error CSS1039: Token not allowed after unary operator: '-light-green' (3154,28): run-time error CSS1039: Token not allowed after unary operator: '-dark-green' (3182,28): run-time error CSS1039: Token not allowed after unary operator: '-light-blue' (3187,17): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (3204,17): run-time error CSS1039: Token not allowed after unary operator: '-light-green' (3228,28): run-time error CSS1039: Token not allowed after unary operator: '-blue' (3245,17): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (3258,22): run-time error CSS1039: Token not allowed after unary operator: '-dark-green' (3268,28): run-time error CSS1039: Token not allowed after unary operator: '-light-blue' (3329,17): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (3379,17): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (3440,17): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (3607,32): run-time error CSS1039: Token not allowed after unary operator: '-light-green' (3699,21): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (3703,21): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (3778,48): run-time error CSS1039: Token not allowed after unary operator: '-light-blue' (3779,37): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (3843,36): run-time error CSS1039: Token not allowed after unary operator: '-light-green' (3859,25): run-time error CSS1039: Token not allowed after unary operator: '-light-green' (4173,21): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (4177,21): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (4253,44): run-time error CSS1039: Token not allowed after unary operator: '-light-blue' (4254,33): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (4314,36): run-time error CSS1039: Token not allowed after unary operator: '-light-green' (4319,25): run-time error CSS1039: Token not allowed after unary operator: '-light-green' (4507,25): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (4511,29): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (4516,28): run-time error CSS1039: Token not allowed after unary operator: '-light-blue' (4621,25): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (4744,21): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (4785,21): run-time error CSS1039: Token not allowed after unary operator: '-light-green' (5031,21): run-time error CSS1039: Token not allowed after unary operator: '-light-green' (5035,25): run-time error CSS1039: Token not allowed after unary operator: '-light-green' (5040,17): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (5041,28): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (5045,21): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (5049,32): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (5072,27): run-time error CSS1039: Token not allowed after unary operator: '-fa-font' (5293,25): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (5297,29): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (5392,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5393,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5394,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5395,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5396,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5397,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5398,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5430,25): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (5435,40): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (5440,44): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (5457,40): run-time error CSS1039: Token not allowed after unary operator: '-light-blue' (5458,43): run-time error CSS1039: Token not allowed after unary operator: '-light-blue' (5718,35): run-time error CSS1039: Token not allowed after unary operator: '-light-blue' (5736,41): run-time error CSS1039: Token not allowed after unary operator: '-light-blue' (5744,29): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (5775,41): run-time error CSS1039: Token not allowed after unary operator: '-light-blue' (5776,42): run-time error CSS1039: Token not allowed after unary operator: '-light-blue' (6031,34): run-time error CSS1039: Token not allowed after unary operator: '-light-blue' (6032,27): run-time error CSS1039: Token not allowed after unary operator: '-light-blue' (7070,32): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (7774,36): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (7777,25): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (7793,40): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (7795,40): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' */ /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS and IE text size adjust after device orientation change, * without disabling user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background-color: transparent; } /** * Improve readability of focused elements when they are also in an * active/hover state. */ a:active, a:hover { outline: 0; } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; } /** * Address differences between Firefox and other browsers. */ hr { box-sizing: content-box; height: 0; } /** * Contain overflow in all browsers. */ pre { overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ box-sizing: content-box; /* 2 */ } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } *{outline: none;} /*------------------------------------*\ Footer \*------------------------------------*/ footer { position: relative; background: #4f8fcb; } footer .footer-stroke1, footer .footer-stroke2 { height: 0px; width: 100%; overflow: hidden; position: relative; background: #3fb184; padding-bottom: 1rem; } footer .footer-stroke2 { background-color: #5bc4f1; } footer .footer-stroke1 span { width: 100%; display: block; padding-bottom: 1rem; background: url(../images/footer-stroke.svg) center top no-repeat; } footer .footer-stroke2 span { width: 100%; display: block; padding-bottom: 1rem; background: url(../images/footer-stroke.svg) center bottom no-repeat; } footer .footer-stroke1 span::after, footer .footer-stroke2 span::after { top: 0px; width: 100%; content: ""; left: -100%; height: 100%; display: block; position: absolute; background: #52ae32; } footer .footer-stroke2 span::after { background: #5bc4f1; } footer .sitemap a, footer .sitemap { color: #ffffff; font-weight: 700; font-size: 1.5rem; line-height: 4rem; text-decoration: none; font-family: museo-sans, sans-serif; } footer .sitemap span { text-transform: uppercase; font-size: 1.4rem; } footer .sitemap ul { margin: 0px; padding: 0px; list-style: none; } footer #footer-b { display: flex; justify-content: space-between; } footer #footer-c { list-style: none; display: flex; padding-left: 0; } footer #footer-c li a { padding: 0 3.5rem; } footer #footer-c li a:first-child { padding-left: 0; } footer .links { color: #ffffff; padding: 1rem 0; font-weight: 300; font-size: 1.4rem; background: #3b7ab5; font-family: museo-sans, sans-serif; } footer .links a { color: #ffffff; text-decoration: none; } .footer-cta .inside { display: block; font-family: museo-sans, sans-serif; height: 100%; background-color: var(--dark-green); padding: 6.4rem; color: #fff; font-size: 3.6rem; font-weight: 900; line-height: 1; } .newsletter-block { padding: 6.4rem; background-color: var(--light-green); display: flex; align-content: center; justify-content: center; align-items: flex-start; flex-direction: column; } .newsletter-block a { color: #fff; } .newsletter-block span { display: block; color: #ffffff; font-size: 16px; text-transform: uppercase; font-weight: 800; padding-bottom: 5px; } .newsletter-block input { display: block; width: 100%; background: none; border: none; border-bottom: 2px solid white; padding: 1.5rem 0; margin: 2rem 0; color: #fff; } .newsletter-block input::placeholder { color: white; opacity: 0.45; font-size: 15px; } .newsletter-block p { display: block; color: #fff; font-weight: 400; line-height: 1.4; } .newsletter-block form { display: block; width: 100%; } @media screen and (max-width : 480px) /* Als je de width aanpast pas ook de media query aan in simplegrid */ { footer .xs-center { justify-content: center; align-items: center; align-content: center; display: flex; } footer #footer-c { width: 100%; flex-wrap: wrap; text-align: center; align-items: center; justify-content: center; } footer #footer-c li:last-child a { padding: 1rem 0 0 0; display: block; } .newsletter-block, .footer-cta .inside { padding: 2.4rem; } } /* Simple Grid Learn More - http://dallasbass.com/simple-grid-a-lightweight-responsive-css-grid/ Project Page - http://thisisdallas.github.com/Simple-Grid/ Author - Dallas Bass Site - dallasbass.com */ *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { margin: 0px; } .grid { } .show-on-xs{ display:none !important; } /*------------------------------------*\ Default Grid \*------------------------------------*/ [class*='col-'] { float: left; padding-right: 1.2rem; padding-left: 1.2rem; } .no-p { padding: 0px; } .grid { width: 100%; max-width: 1520px; margin: 0 auto; } .grid:after { content: ""; display: table; clear: both; } .grid-pad { padding-top: 0px; padding-left: 1.2rem; padding-right: 1.2rem; } .push-right { float: right; } .show-on-mobile { display: none; } .col-1-1 { width: 100%; } .col-2-3, .col-8-12 { width: 66.66%; } .col-1-2, .col-6-12 { width: 50%; } .col-1-3, .col-4-12 { width: 33.33%; } .col-1-4, .col-3-12 { width: 25%; } .col-1-5 { width: 20%; } .col-1-6, .col-2-12 { width: 16.667%; } .col-1-7 { width: 14.28%; } .col-1-8 { width: 12.5%; } .col-1-9 { width: 11.1%; } .col-1-10 { width: 10%; } .col-1-11 { width: 9.09%; } .col-1-12 { width: 8.33% } .col-11-12 { width: 91.66% } .col-10-12 { width: 83.333%; } .col-9-12 { width: 75%; } .col-5-12 { width: 41.66%; } .col-7-12 { width: 58.33% } .push-2-3, .push-8-12 { margin-left: 66.66%; } .push-5-12 { margin-left: 41.66%; } .push-1-2, .push-6-12 { margin-left: 50%; } .push-1-3, .push-4-12 { margin-left: 33.33%; } .push-1-4, .push-3-12 { margin-left: 25%; } .push-1-5 { margin-left: 20%; } .push-1-6, .push-2-12 { margin-left: 16.667%; } .push-1-7 { margin-left: 14.28%; } .push-1-8 { margin-left: 12.5%; } .push-1-9 { margin-left: 11.1%; } .push-1-10 { margin-left: 10%; } .push-1-11 { margin-left: 9.09%; } .push-1-12 { margin-left: 8.33%; } .push-right-1-12{ float:right; margin-right:8.33%; } /*------------------------------------*\ MD Grid \*------------------------------------*/ @media screen and (max-width: 1024px) /* Als je de width aanpast pas ook de media query aan in default */ { .grid { width: 100%; min-width: 0; margin: 0 auto; } .grid-pad { padding-top: 0px; padding-left: 1rem; padding-right: 1rem; } [class*='md-col-'] { float: left; padding-right: 1rem; padding-left: 1rem; } .md-col-1-1 { width: 100%; } .md-col-2-3, .md-col-8-12 { width: 66.66%; } .md-col-1-2, .md-col-6-12 { width: 50%; } .md-col-1-3, .md-col-4-12 { width: 33.33%; } .md-col-1-4, .md-col-3-12 { width: 25%; } .md-col-1-5 { width: 20%; } .md-col-1-6, .md-col-2-12 { width: 16.667%; } .md-col-1-7 { width: 14.28%; } .md-col-1-8 { width: 12.5%; } .md-col-1-9 { width: 11.1%; } .md-col-1-10 { width: 10%; } .md-col-1-11 { width: 9.09%; } .md-col-1-12 { width: 8.33% } .md-col-11-12 { width: 91.66% } .md-col-10-12 { width: 83.333%; } .md-col-9-12 { width: 75%; } .md-col-5-12 { width: 41.66%; } .md-col-7-12 { width: 58.33% } .hide-on-md { display: none !important; width: 0; height: 0; } .no-p-md { padding: 0px; } .md-push-2-3, .md-push-8-12 { margin-left: 66.66%; } .md-push-1-2, .md-push-6-12 { margin-left: 50%; } .md-push-1-3, .md-push-4-12 { margin-left: 33.33%; } .md-push-1-4, .md-push-3-12 { margin-left: 25%; } .md-push-1-5 { margin-left: 20%; } .md-push-1-6, .md-push-2-12 { margin-left: 16.667%; } .md-push-1-7 { margin-left: 14.28%; } .md-push-1-8 { margin-left: 12.5%; } .md-push-1-9 { margin-left: 11.1%; } .md-push-1-10 { margin-left: 10%; } .md-push-1-11 { margin-left: 9.09%; } .md-push-1-12 { margin-left: 8.33% } .md-push-0-12{ margin-left: 0% } } /*------------------------------------*\ SM Grid \*------------------------------------*/ @media screen and (max-width: 768px) /* Als je de width aanpast pas ook de media query aan in default */ { .grid { width: 100%; min-width: 0; margin: 0 auto; } .grid-pad { padding-top: 0px; padding-left: 1rem; padding-right: 1rem; } [class*='sm-col-'] { float: left; padding-right: 1rem; padding-left: 1rem; } .sm-col-1-1 { width: 100%; } .sm-col-2-3, .sm-col-8-12 { width: 66.66%; } .sm-col-1-2, .sm-col-6-12 { width: 50%; } .sm-col-1-3, .sm-col-4-12 { width: 33.33%; } .sm-col-1-4, .sm-col-3-12 { width: 25%; } .sm-col-1-5 { width: 20%; } .sm-col-1-6, .sm-col-2-12 { width: 16.667%; } .sm-col-1-7 { width: 14.28%; } .sm-col-1-8 { width: 12.5%; } .sm-col-1-9 { width: 11.1%; } .sm-col-1-10 { width: 10%; } .sm-col-1-11 { width: 9.09%; } .sm-col-1-12 { width: 8.33% } .sm-col-11-12 { width: 91.66% } .sm-col-10-12 { width: 83.333%; } .sm-col-9-12 { width: 75%; } .sm-col-5-12 { width: 41.66%; } .sm-col-7-12 { width: 58.33% } .hide-on-sm { display: none !important; width: 0; height: 0; } .no-p-sm { padding: 0px; } .sm-push-0{ margin-left:0; } .sm-push-2-3, .sm-push-8-12 { margin-left: 66.66%; } .sm-push-1-2, .sm-push-6-12 { margin-left: 50%; } .sm-push-1-3, .sm-push-4-12 { margin-left: 33.33%; } .sm-push-1-4, .sm-push-3-12 { margin-left: 25%; } .sm-push-1-5 { margin-left: 20%; } .sm-push-1-6, .sm-push-2-12 { margin-left: 16.667%; } .sm-push-1-7 { margin-left: 14.28%; } .sm-push-1-8 { margin-left: 12.5%; } .sm-push-1-9 { margin-left: 11.1%; } .sm-push-1-10 { margin-left: 10%; } .sm-push-1-11 { margin-left: 9.09%; } .sm-push-1-12 { margin-left: 8.33% } } /*------------------------------------*\ XS Grid \*------------------------------------*/ @media screen and (max-width: 480px) /* Als je de width aanpast pas ook de media query aan in default */ { .grid { width: 100%; min-width: 0; margin: 0 auto; } .grid-pad { padding-top: 0px; padding-left: 1rem; padding-right: 1rem; } [class*='xs-col-'] { float: left; padding-right: 1rem; padding-left: 1rem; } .xs-col-1-1 { width: 100%; } .xs-col-2-3, .xs-col-8-12 { width: 66.66%; } .xs-col-1-2, .xs-col-6-12 { width: 50%; } .xs-col-1-3, .xs-col-4-12 { width: 33.33%; } .xs-col-1-4, .xs-col-3-12 { width: 25%; } .xs-col-1-5 { width: 20%; } .xs-col-1-6, .xs-col-2-12 { width: 16.667%; } .xs-col-1-7 { width: 14.28%; } .xs-col-1-8 { width: 12.5%; } .xs-col-1-9 { width: 11.1%; } .xs-col-1-10 { width: 10%; } .xs-col-1-11 { width: 9.09%; } .xs-col-1-12 { width: 8.33% } .xs-col-11-12 { width: 91.66% } .xs-col-10-12 { width: 83.333%; } .xs-col-9-12 { width: 75%; } .xs-col-5-12 { width: 41.66%; } .xs-col-7-12 { width: 58.33% } .hide-on-xs { display: none !important; width: 0; height: 0; } .show-on-xs{ display:block !important; } .no-p-xs { padding: 0px; } .xs-push-0{ margin-left:0; } .xs-push-2-3, .xs-push-8-12 { margin-left: 66.66%; } .xs-push-1-2, .xs-push-6-12 { margin-left: 50%; } .xs-push-1-3, .xs-push-4-12 { margin-left: 33.33%; } .xs-push-1-4, .xs-push-3-12 { margin-left: 25%; } .xs-push-1-5 { margin-left: 20%; } .xs-push-1-6, .xs-push-2-12 { margin-left: 16.667%; } .xs-push-1-7 { margin-left: 14.28%; } .xs-push-1-8 { margin-left: 12.5%; } .xs-push-1-9 { margin-left: 11.1%; } .xs-push-1-10 { margin-left: 10%; } .xs-push-1-11 { margin-left: 9.09%; } .xs-push-1-12 { margin-left: 8.33% } } /* Font face excample */ /*** @font-face { font-family: 'MyWebFont'; src: url('webfont-regular.eot'); src: url('webfont-regular.eot?#iefix') format('embedded-opentype'), url('webfont-regular.woff2') format('woff2'), url('webfont-regular.woff') format('woff'), url('webfont-regular.ttf') format('truetype'), url('webfont-regular.svg#svgFontName') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'MyWebFont'; src: url('webfont-bold.eot'); src: url('webfont-bold.eot?#iefix') format('embedded-opentype'), url('webfont-bold.woff2') format('woff2'), url('webfont-bold.woff') format('woff'), url('webfont-bold.ttf') format('truetype'), url('webfont-bold.svg#svgFontName') format('svg'); font-weight: 700; font-style: normal; } ***/ /* height */ .h0, .h5, .h10, .h15, .h17, .h20, .h25, .h30, .h35, .h40, .h45, .h50, .h60, .h65, .h70, .h75, .h80, .h85, .h90, .h100, .h125, .h150 { height: 0px; clear: both; display: block; } .h5 { padding-bottom:0.5rem; } .h10 { padding-bottom:1rem; } .h15 { padding-bottom:1.5rem; } .h17 { padding-bottom:1.7rem; } .h20 { padding-bottom:2rem; } .h25 { padding-bottom:2.5rem; } .h30 { padding-bottom:3rem; } .h35 { padding-bottom:3.5rem; } .h40 { padding-bottom:4rem; } .h45 { padding-bottom:4.5rem; } .h50 { padding-bottom:5rem; } .h60 { padding-bottom:6rem; } .h65 { padding-bottom:6.5rem; } .h70 { padding-bottom:7rem; } .h75 { padding-bottom:7.5rem; } .h80 { padding-bottom:8rem; } .h85 { padding-bottom:8.5rem; } .h90 { padding-bottom:9rem; } .h100 { padding-bottom:10rem; } .h125 { padding-bottom:12.5rem; } /* helpers */ .clearfix::after, .clear::after { content: ""; display: table; clear: both; } .flex { display: -webkit-flex; display: flex; flex-wrap: wrap; } .flex.align-center { align-items: center; } .hidden { display: none; } .z1 { position: relative; z-index: 1; } .text ul { margin: 0px; padding: 0 0 0 20px; } .text ul li a { text-decoration: none; } .text ul li a:hover { color: #1e1e1e; text-decoration: underline; } .text a { transition: ease color 0.3s; -webkit-transition: ease color 0.3s; } .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .center { text-align: center; } .nodec { text-decoration: none; } .fixed-padding { padding-bottom: 10rem; } .flex-center{ display:flex; align-items:center; display:-webkit-flex; -webkit-align-items:center; } .flex-between{ display:flex; align-items:center; display:-webkit-flex; -webkit-align-items:center; justify-content:space-between; -webkit-justify-content:space-between; } figure{ margin:0px; width:100%; height:auto; padding:0px; position:relative; } figure img{ width:100%; height:auto; display:block; } /** * Swiper 11.0.7 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2024 Vladimir Kharlampidi * * Released under the MIT License * * Released on: February 27, 2024 */ @font-face { font-family: swiper-icons; src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA'); font-weight: 400; font-style: normal } :root { --swiper-theme-color: #007aff } :host { position: relative; display: block; margin-left: auto; margin-right: auto; z-index: 1 } .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; display: block } .swiper-vertical > .swiper-wrapper { flex-direction: column } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function,initial); box-sizing: content-box } .swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper { transform: translate3d(0px,0,0) } .swiper-horizontal { touch-action: pan-y } .swiper-vertical { touch-action: pan-x } .swiper-slide { flex-shrink: 0; /*width: 100%;*/ height: 100%; position: relative; transition-property: transform; display: block } .swiper-slide-invisible-blank { visibility: hidden } .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform,height } .swiper-backface-hidden .swiper-slide { transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden } .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px } .swiper-3d .swiper-wrapper { transform-style: preserve-3d } .swiper-3d { perspective: 1200px } .swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide { transform-style: preserve-3d } .swiper-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; -ms-overflow-style: none } .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none } .swiper-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start } .swiper-css-mode.swiper-horizontal > .swiper-wrapper { scroll-snap-type: x mandatory } .swiper-css-mode.swiper-vertical > .swiper-wrapper { scroll-snap-type: y mandatory } .swiper-css-mode.swiper-free-mode > .swiper-wrapper { scroll-snap-type: none } .swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: none } .swiper-css-mode.swiper-centered > .swiper-wrapper::before { content: ''; flex-shrink: 0; order: 9999 } .swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always } .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before) } .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after) } .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before) } .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after) } .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10 } .swiper-3d .swiper-slide-shadow { background: rgba(0,0,0,.15) } .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0)) } .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0)) } .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0)) } .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0)) } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color,var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent } .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader, .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader { animation: swiper-preloader-spin 1s infinite linear } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff } .swiper-lazy-preloader-black { --swiper-preloader-color: #000 } @keyframes swiper-preloader-spin { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } } .swiper-virtual .swiper-slide { -webkit-backface-visibility: hidden; transform: translateZ(0) } .swiper-virtual.swiper-css-mode .swiper-wrapper::after { content: ''; position: absolute; left: 0; top: 0; pointer-events: none } .swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after { height: 1px; width: var(--swiper-virtual-size) } .swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after { width: 1px; height: var(--swiper-virtual-size) } :root { --swiper-navigation-size: 44px } .swiper-button-next, .swiper-button-prev { position: absolute; top: var(--swiper-navigation-top-offset,50%); width: calc(var(--swiper-navigation-size)/ 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(0px - (var(--swiper-navigation-size)/ 2)); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color,var(--swiper-theme-color)) } .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: .35; cursor: auto; pointer-events: none } .swiper-button-next.swiper-button-hidden, .swiper-button-prev.swiper-button-hidden { opacity: 0; cursor: auto; pointer-events: none } .swiper-navigation-disabled .swiper-button-next, .swiper-navigation-disabled .swiper-button-prev { display: none !important } .swiper-button-next svg, .swiper-button-prev svg { width: 100%; height: 100%; object-fit: contain; transform-origin: center } .swiper-rtl .swiper-button-next svg, .swiper-rtl .swiper-button-prev svg { transform: rotate(180deg) } .swiper-button-prev, .swiper-rtl .swiper-button-next { left: var(--swiper-navigation-sides-offset,10px); right: auto } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: var(--swiper-navigation-sides-offset,10px); left: auto } .swiper-button-lock { display: none } .swiper-button-next:after, .swiper-button-prev:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; font-variant: initial; line-height: 1 } .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { content: 'prev' } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: var(--swiper-navigation-sides-offset,10px); left: auto } .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content: 'next' } .swiper-pagination { position: absolute; text-align: center; transition: .3s opacity; transform: translate3d(0,0,0); z-index: 10 } .swiper-pagination.swiper-pagination-hidden { opacity: 0 } .swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled { display: none !important } .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: var(--swiper-pagination-bottom,8px); top: var(--swiper-pagination-top,auto); left: 0; width: 100% } .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0 } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(.33); position: relative } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(.66) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(.33) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(.66) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(.33) } .swiper-pagination-bullet { width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px)); height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px)); display: inline-block; border-radius: var(--swiper-pagination-bullet-border-radius,50%); background: var(--swiper-pagination-bullet-inactive-color,#000); opacity: var(--swiper-pagination-bullet-inactive-opacity, .2) } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; appearance: none } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer } .swiper-pagination-bullet:only-child { display: none !important } .swiper-pagination-bullet-active { opacity: var(--swiper-pagination-bullet-opacity, 1); background: var(--swiper-pagination-color,var(--swiper-theme-color)) } .swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets { right: var(--swiper-pagination-right,8px); left: var(--swiper-pagination-left,auto); top: 50%; transform: translate3d(0px,-50%,0) } .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: var(--swiper-pagination-bullet-vertical-gap,6px) 0; display: block } .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px } .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: .2s transform,.2s top } .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 var(--swiper-pagination-bullet-horizontal-gap,4px) } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: .2s transform,.2s left } .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: .2s transform,.2s right } .swiper-pagination-fraction { color: var(--swiper-pagination-fraction-color,inherit) } .swiper-pagination-progressbar { background: var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25)); position: absolute } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color,var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top } .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top } .swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: var(--swiper-pagination-progressbar-size,4px); left: 0; top: 0 } .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical > .swiper-pagination-progressbar { width: var(--swiper-pagination-progressbar-size,4px); height: 100%; left: 0; top: 0 } .swiper-pagination-lock { display: none } .swiper-scrollbar { border-radius: var(--swiper-scrollbar-border-radius,10px); position: relative; touch-action: none; background: var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1)) } .swiper-scrollbar-disabled > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled { display: none !important } .swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal { position: absolute; left: var(--swiper-scrollbar-sides-offset,1%); bottom: var(--swiper-scrollbar-bottom,4px); top: var(--swiper-scrollbar-top,auto); z-index: 50; height: var(--swiper-scrollbar-size,4px); width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%)) } .swiper-scrollbar.swiper-scrollbar-vertical, .swiper-vertical > .swiper-scrollbar { position: absolute; left: var(--swiper-scrollbar-left,auto); right: var(--swiper-scrollbar-right,4px); top: var(--swiper-scrollbar-sides-offset,1%); z-index: 50; width: var(--swiper-scrollbar-size,4px); height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%)) } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5)); border-radius: var(--swiper-scrollbar-border-radius,10px); left: 0; top: 0 } .swiper-scrollbar-cursor-drag { cursor: move } .swiper-scrollbar-lock { display: none } .swiper-zoom-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center } .swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg { max-width: 100%; max-height: 100%; object-fit: contain } .swiper-slide-zoomed { cursor: move; touch-action: none } .swiper .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000 } .swiper-free-mode > .swiper-wrapper { transition-timing-function: ease-out; margin: 0 auto } .swiper-grid > .swiper-wrapper { flex-wrap: wrap } .swiper-grid-column > .swiper-wrapper { flex-wrap: wrap; flex-direction: column } .swiper-fade.swiper-free-mode .swiper-slide { transition-timing-function: ease-out } .swiper-fade .swiper-slide { pointer-events: none; transition-property: opacity } .swiper-fade .swiper-slide .swiper-slide { pointer-events: none } .swiper-fade .swiper-slide-active { pointer-events: auto } .swiper-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto } .swiper-cube { overflow: visible } .swiper-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; transform-origin: 0 0; width: 100%; height: 100% } .swiper-cube .swiper-slide .swiper-slide { pointer-events: none } .swiper-cube.swiper-rtl .swiper-slide { transform-origin: 100% 0 } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-prev { pointer-events: auto; visibility: visible } .swiper-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; opacity: .6; z-index: 0 } .swiper-cube .swiper-cube-shadow:before { content: ''; background: #000; position: absolute; left: 0; top: 0; bottom: 0; right: 0; filter: blur(50px) } .swiper-cube .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible } .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden } .swiper-flip { overflow: visible } .swiper-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1 } .swiper-flip .swiper-slide .swiper-slide { pointer-events: none } .swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto } .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden } .swiper-creative .swiper-slide { -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; transition-property: transform,opacity,height } .swiper-cards { overflow: visible } .swiper-cards .swiper-slide { transform-origin: center bottom; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden } .project-detailOverview h2 { padding-bottom: 2rem; } .project-detailOverview p { margin: 2rem 0; } .project-detailOverview .contentblock-detailIntro { position: relative; background-color: var(--light-blue); } .project-detailOverview .contentblock-detailIntro .grid { display: flex; flex-wrap: wrap; align-items: stretch; } .project-detailOverview .contentblock-detailIntro .col-img { padding: 7.2rem 0; min-height: 35rem; } .project-detailOverview .contentblock-detailIntro .col-img ul.breadcrumbs { position: relative; z-index: 9; display: flex; align-items: center; list-style: none; margin: 0; padding: 0; color: #fff; } .project-detailOverview .contentblock-detailIntro .col-img ul.breadcrumbs li { display: block; position: relative; } .project-detailOverview .contentblock-detailIntro .col-img ul.breadcrumbs li:not(:last-child)::after { content: "\f054"; font-family: "Font awesome 5 free"; font-weight: 900; position: absolute; top: 50%; transform: translateY(-50%); right: 2rem; line-height: 1; } .project-detailOverview .contentblock-detailIntro .col-img ul.breadcrumbs li a, .project-detailOverview .contentblock-detailIntro .col-img ul.breadcrumbs li span { display: block; padding-right: 4rem; color: #fff; text-decoration: none; font-weight: 500; font-size: 1.8rem; } .project-detailOverview .contentblock-detailIntro .col-img ul.breadcrumbs li span { font-weight: 900; } .project-detailOverview .contentblock-detailIntro .col-img img { position: absolute; top: 0; left: 0; width: 50%; height: 100%; object-fit: cover; } .project-detailOverview .contentblock-detailIntro .content { padding: 7.2rem; } .project-detailOverview .contentblock-detailIntro .content ul.labels { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; list-style: none; margin: 0 0 2.4rem 0; padding: 0; } .project-detailOverview .contentblock-detailIntro .content ul.labels li { display: inline-flex; background-color: #4F8FCB; color: #fff; border-radius: 3rem; margin-right: .8rem; font-size: 1.2rem; font-weight: 600; line-height: 1; padding: 1rem; } .project-detailOverview .contentblock-detailIntro .content ul.labels li.highlighted { display: inline-flex; background-color: #fff; color: #4F8FCB; border-radius: 3rem; margin-right: .8rem; font-size: 1.2rem; font-weight: 600; line-height: 1; padding: 1rem; } .project-detailOverview .contentblock-detailIntro .content h1 { display: block; color: var(--dark-blue); font-size: 5.4rem; font-weight: 900; line-height: 1; margin-bottom: 7.2rem; } .project-detailOverview .contentblock-detailIntro.text-and-image .col-1-1 { display: flex; flex-direction: row-reverse; flex-wrap: wrap; } .project-detailOverview .contentblock-detailIntro.text-and-image .col-img img { right: 0; left: unset; } /* EXPLAINER */ .project-detailOverview .contentblock-explainer { padding: 7rem 0; } .project-detailOverview .contentblock-explainer .content img { width: 100%; } .project-detailOverview .contentblock-explainer .img-container { display: block; width: 100%; position: relative; padding-bottom: 36.25%; height: 0; overflow: hidden; margin: 1rem 0; } .project-detailOverview .contentblock-explainer .img-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; } .project-detailOverview .contentblock-explainer .contact-inside { display: flex; flex-direction: column; padding: 2.4rem; background-color: var(--light-green); margin-bottom: 1.6rem; } .project-detailOverview .contentblock-explainer .contact-inside .image-wrapper { display: flex; align-items: center; font-size: 2.6rem; font-weight: 900; color: #fff; } .project-detailOverview .contentblock-explainer .contact-inside .image-wrapper img { display: block; width: 10rem; height: 10rem; border-radius: 50%; margin-right: 2.4rem; } .project-detailOverview .contentblock-explainer .contact-inside .socials-wrapper h3 { display: block; margin: 1.2rem 0; color: #fff; } .project-detailOverview .contentblock-explainer .contact-inside .socials-wrapper ul { list-style: none; padding: 0; color: #fff; margin: 0; } .project-detailOverview .contentblock-explainer .contact-inside .socials-wrapper ul li:not(:last-child) { margin-bottom: 1.2rem; } .project-detailOverview .contentblock-explainer .contact-inside .socials-wrapper ul li i { background-color: var(--dark-green); padding: 1rem; border-radius: 3rem; margin-right: 1.2rem; } .project-detailOverview .contentblock-explainer .contact-inside .socials-wrapper ul li a { text-decoration: none; color: #fff; } .project-detailOverview .contentblock-explainer .more-inside { display: flex; flex-direction: column; padding: 2.4rem; background-color: #4F8FCB; } .project-detailOverview .contentblock-explainer .more-inside span { display: block; margin-bottom: 2.4rem; font-size: 2.4rem; font-weight: 900; color: #fff; } .project-detailOverview .contentblock-explainer .more-inside .btn-lightblue { background-color: var(--light-blue); color: var(--dark-blue); text-align: center; padding: 2.4rem; line-height: 1; border: none; } .project-detailOverview .contentblock-explainer .more-inside .btn-lightblue span { position: relative; display: inline-block; font-size: 1.8rem; margin: 0; left: unset; top: unset; transform: unset; margin-right: 1.2rem; color: var(--dark-blue); letter-spacing: 2px; } .project-detailOverview .contentblock-explainer .more-inside .btn-lightblue span::before { color: inherit; } /*VIDEO */ .project-detailOverview .contentblock-Video h2 { display: block; margin-bottom: 4rem; } .project-detailOverview .contentblock-Video, .project-detailOverview .contentblock-Image { padding: 7rem 0; } .project-detailOverview .contentblock-Video .video-wrapper { position: relative; display: block; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; } .project-detailOverview .contentblock-Video .video-wrapper iframe, .project-detailOverview .contentblock-Video .video-wrapper video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* QUOTE */ .project-detailOverview .contentblock-Quote { padding: 7rem 0; text-align: center; } .project-detailOverview .contentblock-Quote .quote { display: block; margin: 4rem 0; font-size: 6.4rem; font-weight: 900; line-height: 1; color: var(--dark-green); } .project-detailOverview .contentblock-Quote .author { font-size: 2.4rem; font-weight: 900; } /* PARTNERS */ .project-detailOverview .contentblock-partners { padding: 7rem 0; } .project-detailOverview .contentblock-partners .partner { position: relative; width: 100%; height: 10rem; display: flex; align-items: center; } .project-detailOverview .contentblock-partners .partner img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; object-position: center center; } /* ALSO */ .project-detailOverview .contentblock-also { padding: 7rem 0; } .project-detailOverview .contentblock-also h2 { margin-bottom: 4rem; } .project-detailOverview .contentblock-sharePage { padding: 4rem 0; } /* TEXT */ .contentblock-Text { padding: 7rem 0; } .contentblock-Text video, .contentblock-Text iframe { width: 100%; } @media only screen and (max-width : 1024px) /* Als je de width aanpast pas ook de media query aan in simplegrid */ { .project-detailOverview .contentblock-detailIntro .col-img { min-height: 100vw; } .project-detailOverview .contentblock-detailIntro .col-img img { width: 100%; height: 100vw; } .project-detailOverview .contentblock-detailIntro .content { padding: 2.4rem 0; } .project-detailOverview .contentblock-detailIntro .content h1 { font-size: 3.6rem; margin-bottom: 1rem; } /* EXPLAINER */ .project-detailOverview .contentblock-explainer .grid { display: flex; flex-direction: column; } .project-detailOverview .contentblock-explainer .col-7-12 { order: 1; margin-top: 5.6rem; } /* QUOTE */ .project-detailOverview .contentblock-Quote .quote { font-size: 3.6rem; margin: 2.4rem 0; } .project-detailOverview .contentblock-Quote .quote p { margin: 0; } .project-detailOverview .contentblock-Quote .author { font-size: 1.8rem; } } .project-detailOverview .contentblock-detailIntro.bg2 { background-color: var(--dark-green); color: #fff; } .project-detailOverview .contentblock-detailIntro .content h1 { color: inherit; } .project-detailOverview .contentblock-detailIntro.bg6 { background-color: #fff; } /*.contentblock-Header + .contentblock-ImageTitleText { padding-top: 0; }*/ .hero { position: relative; } #header { width: 100%; position: relative; overflow: hidden; min-height: 80vh; background-size: cover; background-position: center center; } .video-container { top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; position: absolute; } .video { width: 100%; margin: auto; position: relative; z-index: 1; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; } .tv { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; width: 100%; height: 100%; overflow: hidden; } .screen, .screen > iframe { box-sizing: border-box; height: 56.25vw; left: 50%; min-height: 100%; min-width: 100%; transform: translate(-50%, -50%) scale(1.2); position: absolute; top: 50%; width: 177.77777778vh; } .medium .video-container { height: 56vw; } .video-container.fill { position: relative; } #header #bgvid { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: 100%; height: auto; object-fit: cover; z-index: 0; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-transition: opacity 1s ease; -moz-transition: opacity 1s ease; transition: opacity 1s ease; opacity: 0; } #part #bgvid { width: 100%; } #header.shadow::after { top: 0px; left: 0px; width: 100%; content: ''; height: 100%; opacity: 0.6; position: absolute; background-image: linear-gradient(to left, rgba(0, 0, 0, 0) 50%, #000000 100%); } #header.small::after { display: none; } #header.small { padding-bottom: 40rem; } #header.medium { padding-bottom: 60rem; } #header.medium::after { display: none; } #header .header-container { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; display: flex; align-items: center; } #nominatie { right: 0px; z-index: 1; top: 0px; width: auto; position: absolute; display: none; } #nominatie.top-header { top: 61px; } #nominatie .nominatie-block { background: #fff; padding: 40px 20px 45px 20px; position: relative; text-align: center; max-width: 25rem; text-decoration: none; } #nominatie .nominatie-block h3 { color: #076188; font-size: 2rem; line-height: 1.15; text-transform: unset; } #nominatie .nominatie-block p.btn.white { float: none; } #nominatie .nominatie-block .keep-learning { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); -webkit-transform: translate(-50%, 50%); transition: cubic-bezier(0.44,1,0.44,1) all 0.6s; -webkit-transition: cubic-bezier(0.44,1,0.44,1) all 0.6s; } #nominatie .nominatie-block:hover .keep-learning { transform: translate(-50%, 55%); -webkit-transform: translate(-50%, 55%); } #home-logo-dfw { display: inline-block; height: 21rem; width: 15rem; background: url(../images/DFW-Logo-2022.png) no-repeat center center; background-size: contain; position: absolute; right: 2rem; top: 2rem; z-index: 2; } #home-logo-bkw { display: inline-block; height: 100px; width: 300px; background: url(../images/bkw-banner.png) no-repeat center center; background-size: contain; position: absolute; right: 2rem; top: 2rem; z-index: 2; } #portal { left: 0px; z-index: 1; bottom: 0px; width: 100%; position: absolute; } #portal .inside { display: flex; padding: 2.8rem 2.4rem; font-size: 2.4rem; color: #fff; background-color: var(--light-green); } #portal .col-1-3:nth-child(even) .inside { background-color: var(--dark-green); } #portal .inside a { width: 100%; display: flex; align-items: center; justify-content: space-between; color: inherit; text-decoration: none; } #portal .inside a h2 { color: inherit; } @media screen and (max-width : 480px) /* Als je de width aanpast pas ook de media query aan in simplegrid */ { .hero .header-container .flex.align-center { text-align: left; } #header .header-container { height: 100vw; } #portal .text { width: 80%; font-weight: 300; font-size: 1.5rem; line-height: initial; font-family: museo-sans, sans-serif; } #portal .container { float: left; padding: 3.3rem 4rem 2.5rem; } #portal .container { padding: 0px; } #portal .line { display: none; } #portal .text { display: none; } #portal .col-1-4 a { display: flex; padding: 2rem 1rem; display: -webkit-flex; align-items: center; -webkit-align-items: center; } #portal .col-1-4 a h2 { padding: 0 1.5rem; font-size: 1.6rem; line-height: 1.6rem; } #portal .col-1-4 { border-bottom: 1px solid #b2d9f6; } } .contentblock-Image .img-wrapper { display: block; width: 100%; aspect-ratio: 16 / 9; } .contentblock-Image .img-wrapper img { display: block; width: 100%; } .contentblock-ImageTitleText { padding: 10rem 0; } .contentblock-ImageTitleText .text { padding: 4rem 0; } .contentblock-ImageTitleText.bg2 { color: #fff; } .contentblock-ImageTitleText.bg2 h2 { color: #fff; } .contentblock-ImageTitleText.bg2 .btn-primary.btn-blue { color: #fff; border: 2px solid #fff; } .contentblock-ImageTitleText.bg2 .btn-primary.btn-blue span::before { color: #fff; } .contentblock-ImageTitleText.bg2 .btn-primary.btn-blue:hover { background-color: #fff; color: var(--dark-blue); } .contentblock-ImageTitleText.bg2 .btn-primary.btn-blue:hover span::before { color: var(--dark-blue); } @media only screen and (max-width : 768px) /* Als je de width aanpast pas ook de media query aan in simplegrid */ { .contentblock-ImageTitleText .left { margin-bottom: 2rem; } } .template .landing-contact { margin-bottom: 5.6rem; background-color: var(--light-green); padding: 2.4rem; } .template h3.usp { color: #FFF; font-family: Museo; font-size: 2.6rem; font-style: normal; text-transform: none; margin-bottom: 2.4rem; line-height: 120%; } .template .contact-row { display: flex; align-items: center; font-size: 1.8rem; font-weight: 400; line-height: 2.9rem; color: #FFF; word-break: break-word; max-width: 100%; padding-bottom: 1.6rem; } .template .contact-icon { border-radius: 10rem; background: var(--dark-green); display: flex; min-width: 5rem; min-height: 5rem; flex-direction: column; justify-content: center; align-items: center; margin-right: 1.6rem; } .template .landingEvents { margin: 4rem 0; background-color: var(--light-green-background); padding: 4rem; } .template .landingEvents .flex-stretch-end { display: flex; align-items: stretch; } .template .landingEvents .flex-stretch-end .swiper-btns-wrapper { display: flex; align-items: flex-end; justify-content: flex-end; } .template .sliderText { color: var(--dark-blue); font-size: 1.8rem; font-weight: 400; line-height: 150%; margin-top: 2.4rem !important; } .template .events-container { margin: 4rem 0; } .template .event a { text-decoration: none; } .template .event-container { color: var(--light-green); background-color: #FFF; padding: 2.4rem; transition: background-color 0.3s ease; } /*.template .swiper-slide:hover .event-container { background-color: var(--light-green); color: #FFF; } .template .swiper-slide:hover .landing-line { background-color: #FFF; width: 100%; }*/ /*.template .swiper-slide:hover h5.small { color: #FFF; }*/ .template .date-title { font-size: 1rem; font-weight: 300; line-height: 120%; letter-spacing: 0.1rem; margin: 0 0 0.8rem 0; text-transform: uppercase; } .template .date { font-size: 1.4rem; font-weight: 400; margin: 0; } .template .date-block { margin-bottom: 1.6rem; } @media only screen and (max-width: 768px) { .template h2 { font-size: 3.2rem; margin-bottom: 3.2rem; } .template .sliderText { display: none; } .template .eventContainer { padding: 1.6rem; } .template .landingEvents { padding: 3.2rem; } .template.template .events { margin: 3.2rem 0; } .template .landing-line { width: 5.4rem; height: 2px; margin: 1.6rem 0; } .landingEvents .swiper, .landingEvents .swiper-wrapper { overflow: visible; } } .template .landingHero { position: relative; height: 80vh; display: flex; align-items: stretch; justify-content: center; overflow: hidden; } .template .hero-grid { display: flex; flex-direction: column; align-items: stretch; position: relative; z-index: 2; } .template .video-container { position: absolute; top: 0; left: 0; z-index: 0; } .template .video-container .poster { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; background-position: center center; object-position: center center; z-index: 1; } .template #landingVideo { position: absolute; top: 0; left: 0; min-width: 100%; min-height: 100%; z-index: 2; } .template .content { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: auto; margin-top: auto; } .template .content h1 { display: block; margin-bottom: 2.8rem; } .template .content .subtitle { display: block; color: #fff; font-size: 2.4rem; line-height: 1.2; } .template .buttonLinks { display: flex; justify-content: space-between; margin: 0 auto; position: relative; } .template .buttonLinks div { flex: 1; padding: 2.4rem; font-size: 2.4rem; } .template .buttonLinks div a { display: flex; align-items: center; justify-content: space-between; color: #fff; text-decoration: none; } .template .light-green { background-color: var(--light-green); } .template .green { background-color: var(--dark-green); } @media only screen and (max-width : 1024px) /* Als je de width aanpast pas ook de media query aan in simplegrid */ { .template .content h1 { font-size: 4.2rem; } .template .content .subtitle { display: block; margin-bottom: 4rem; } .template .buttonLinks { width: calc(100% + 4.8rem); flex-wrap: wrap; flex-direction: column; transform: translateX(-2.4rem); } .template .buttonLinks div { width: 100%; } } .template .landing-news { margin: 4rem 0; background-color: var(--light-blue); padding: 4rem; } .template .slider-text { color: var(--dark-blue); font-size: 1.8rem; font-weight: 400; line-height: 150%; margin-top: 2.4rem !important; } .template .news-tem { width: 100% } .template h5.small { max-width: 100%; word-wrap: break-word; } .template .news-container { color: var(--light-green); background-color: #FFF; padding: 2.4rem; overflow: hidden; box-sizing: border-box; } .template .date { font-size: 1.4rem; margin: 0; } @media only screen and (max-width: 768px) { .template h2 { font-size: 3.2rem; margin-bottom: 3.2rem; } .template .slider-text { display: none; } } .template .landing-newsletter { margin-bottom: 5.6rem; background-color: var(--blue); padding: 2.4rem; } .template h3.usp { color: #FFF; font-family: Museo; font-size: 2.6rem; font-style: normal; text-transform: none; margin-bottom: 2.4rem; line-height: 120%; } .template .contact-row { display: flex; align-items: center; color: var(--dark-blue); font-size: 1.8rem; font-weight: 400; line-height: 2.9rem; color: #FFF; } .template .email-row { padding-bottom: 1.6rem; } .template .contact-icon { border-radius: 10rem; background: var(--dark-green); display: flex; width: 5rem; height: 5rem; flex-direction: column; justify-content: center; align-items: center; margin-right: 1.6rem; } .template .landingProjects { background-color: var(--light-blue); padding: 4rem; } .template .landingProjects article a { position: relative; display: block; margin: 0; height: 0; padding-bottom: 100%; overflow: hidden; } .template .landingProjects article a figure, .template .landingProjects article a img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .template .landingProjects article a figure::after { position: absolute; background: linear-gradient(180deg, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.6) 100%); content: ''; width: 100%; height: 100%; left: 0; bottom: 0; z-index: 0; } .template .landingProjects .text { left: 0px; bottom: 0px; position: absolute; padding: 2.4rem; display: flex; flex-direction: column; } .template .landingProjects .text .subtitle { position: relative; display: flex; color: #FFF; font-size: 1.4rem; } .template .landingProjects .text .title { position: relative; display: flex; color: #FFF; font-size: 2rem; font-weight: 600; line-height: 120%; } .template .sliderText { color: var(--dark-blue); font-size: 1.8rem; font-weight: 400; line-height: 150%; margin-top: 2.4rem !important; } .template .projects-container { margin: 4rem 0; } .template .swiper-projects { margin: 4rem 0; } @media only screen and (max-width: 768px) { .template h2 { font-size: 3.2rem; margin: 0; } .template .sliderText { display: none; } .template .landingProjects { padding: 3.2rem; } .template .projects-container { margin: 3.2rem 0; } } .landing-related h2 { display: block; margin-bottom: 3.2rem; font-size: 3.6rem; } .landing-related img { display: block; width: 100%; } .template .landingTitleText { margin-top: 8rem; margin-bottom: 8rem; } .template .text { color: var(--dark-blue); font-size: 1.8rem; font-weight: 400; line-height: 150%; } .template .landing-verschilmakers { width: 100%; } .template .landing-verschilmakers .swiper-btns-wrapper { justify-content: flex-end; } .template .landing-verschilmakers h2.small { margin-bottom: 0; } .template .landing-verschilmakers .text { left: 0px; bottom: 0px; position: absolute; padding: 2.4rem; display: flex; flex-direction: column; } .template .landing-verschilmakers .small { font-size: 3.6rem; font-weight: 900; } .template .landing-verschilmakers .text .subtitle { position: relative; display: flex; color: #FFF; font-size: 1.4rem; } .template .landing-verschilmakers .text .title { position: relative; display: flex; color: #FFF; font-size: 2rem; font-weight: 600; line-height: 120%; } .template .image-title { display: flex; flex-direction: column; } .template .left { padding-right: .8rem; } .template .right { padding-left: .8rem; } .template .sliderText { color: var(--dark-blue); font-size: 1.8rem; font-weight: 400; line-height: 150%; margin-top: 2.4rem !important; } .template article.verschil { max-height: 30rem; } .template article.verschil figure::after { position: absolute; background: linear-gradient(180deg, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.6) 100%); content: ''; width: 100%; height: 100%; left: 0; bottom: 0; z-index: 0; } @media only screen and (max-width: 768px) { .template h2 { font-size: 3.2rem; margin: 0; } .template .sliderText { display: none; } .template .landingProjects { padding: 3.2rem; } .template .events-container { margin: 3.2rem 0; } } .contentblock-News { padding: 10rem 0; } #nieuws .small-col .post-content h4 { font-size: 1.8rem; } #nieuws .col-6-12.overlap:not(:first-child) { margin-top: -15rem; } #nieuws .post { margin-bottom: 2.4rem; width: 100%; transition: .3s ease all; position: relative; } #nieuws .post.small { display: flex; flex-direction: row; flex-wrap: nowrap; min-height: 20rem; } #nieuws .post.small .post-image, #nieuws .post.small .post-content { flex-basis: 50%; } #nieuws .post.small .post-image figure { height: 100%; padding-bottom: unset; } #nieuws .post .actualiteiten, #nieuws .post .verhalen { position: absolute; bottom: 1rem; right: 1rem; background: #fff; z-index: 99; color: #94c01f; text-transform: capitalize; padding: 0.5rem 1rem; border-radius: 1rem; font-size: 1.55rem; } #nieuws .post .post-image { display: block; color: #0D1E88; background: #000; position: relative; } #nieuws .post .post-image figure { display: block; width: 100%; overflow: hidden; position: relative; padding-bottom: 37.5%; background: #000; background-position-x: 0%; background-position-y: 0%; background-image: none; background-size: auto; background-size: cover; background-position: center center; transition: .3s ease all; } #nieuws .post .post-image figure.small { padding-bottom: 62.25%; } #nieuws .post .post-image figure img { display: none; } #nieuws .post-content { padding: 2.4rem; background-color: #fff; } #nieuws .post-content a { text-decoration: none; } #nieuws .post-content h3 { position: relative; font-size: 2.4rem; line-height: 1.4; color: #94c01f; font-weight: bold; text-transform: unset; padding-bottom: 2rem; } #nieuws .post-content h4 { font-size: 1.8rem; line-height: 1.4; color: #94c01f; font-weight: bold; position: relative; padding-bottom: 1rem; } #nieuws .post-content h4 a { color: #94c01f; text-decoration: none; } #nieuws .post-content h4 a:hover { text-decoration: underline; } #nieuws .post-content h4.no-p { padding-bottom: 0; } #nieuws .post-content .divider { display: inline-block; width: 5rem; height: 2px; margin-bottom: 1rem; background-color: var(--light-green); } #nieuws .story-item.big .post-content h4 { font-size: 2.4rem; } #nieuws .story-item .post-content h4 { font-size: 1.8rem; } #nieuws .post-content h4::after { content: none; } #nieuws .post-content .date-title { display: block; color: #bbce00; font-size: 1rem; font-weight: 900; line-height: initial; letter-spacing: .1rem; text-transform: uppercase; font-family: museo-sans,sans-serif; } #nieuws .post-content .date { display: block; color: #94c01f; font-size: 1.4rem; } #nieuws .post-content .text-group { display: block; color: #94c01f; line-height: 1.4; padding: 1rem 0; } #nieuws .post-content .text-group .heading { display: block; font-size: 1rem; font-weight: 900; color: #bbce00; letter-spacing: .1rem; text-transform: uppercase; padding-bottom: .5rem; } #nieuws .post-content .text-group .body { display: block; font-size: 1.2rem; } #nieuws .post-content .text-intro { display: block; color: #076188; line-height: 1.4; font-size: 1.4rem; padding: 0; } .news-container { margin-bottom: 2rem; } @media screen and (max-width : 480px) /* Als je de width aanpast pas ook de media query aan in simplegrid */ { .contentblock-News { padding: 3.2rem 0; } #nieuws .post.small { flex-wrap: wrap; flex-direction: column; } #nieuws .post.small .post-image { display: block; width: 100%; flex-basis: unset; } #nieuws .post.small .post-image figure { padding-bottom: 37.5%; } } .news-overview { padding: 8.8rem 0; } .news-overview.bg1 h1 { color: var(--dark-blue); } .news-overview.bg1 .filters { color: var(--dark-blue); } .news-overview .post { margin-bottom: 2.4rem; width: 100%; transition: .3s ease all; position: relative; } .news-overview .post.small { display: flex; flex-direction: row; flex-wrap: nowrap; min-height: 20rem; } .news-overview .post.small .post-image, .news-overview .post.small .post-content { flex-basis: 50%; } .news-overview .post.small .post-image figure { height: 100%; padding-bottom: unset; } .news-overview .post .actualiteiten, .news-overview .post .verhalen { position: absolute; bottom: 1rem; right: 1rem; background: #fff; z-index: 99; color: #94c01f; text-transform: capitalize; padding: 0.5rem 1rem; border-radius: 1rem; font-size: 1.55rem; } .news-overview .post .post-image { display: block; color: #0D1E88; background: #000; position: relative; } .news-overview .post .post-image ul { display: flex; align-items: center; position: absolute; top: 0; left: 0; z-index: 1; list-style: none; padding: 1.6rem; margin: 0; width: 100%; flex-wrap: wrap; gap: 1rem; } .news-overview .post .post-image ul li { display: inline-flex; background-color: #4F8FCB; color: #fff; border-radius: 3rem; margin-right: .8rem; font-size: 1.2rem; font-weight: 600; line-height: 1; padding: 1rem; } .news-overview .post .post-image ul li.highlighted { background-color: var(--light-blue); color: var(--dark-blue); } .news-overview .post .post-image figure { display: block; width: 100%; overflow: hidden; position: relative; padding-bottom: 65.25%; background-size: cover; transition: .3s ease all; } .news-overview .post .post-image figure img { display: none; } .news-overview .post-content { padding: 2.4rem; background-color: #fff; min-height: 22rem; } .news-overview .post-content a { text-decoration: none; } .news-overview .post-content h3 { position: relative; font-size: 2.4rem; line-height: 1.4; color: #94c01f; font-weight: bold; text-transform: unset; padding-bottom: 2rem; } .news-overview .post-content h4 { font-size: 1.8rem; line-height: 1.4; color: #94c01f; font-weight: bold; position: relative; padding-bottom: 1rem; } .news-overview .post-content h4 a { color: #94c01f; text-decoration: none; } .news-overview .post-content h4 a:hover { text-decoration: underline; } .news-overview .post-content h4.no-p { padding-bottom: 0; } .news-overview .post-content .divider { display: inline-block; width: 5rem; height: 2px; margin-bottom: 1.6rem; background-color: var(--light-green); } .news-overview .post-content .date-title { display: block; color: #bbce00; font-size: 1rem; font-weight: 900; line-height: initial; letter-spacing: .1rem; text-transform: uppercase; font-family: museo-sans, sans-serif; } .news-overview .post-content .date { display: block; color: var(--light-green); font-size: 1.4rem; font-weight: 400; line-height: 1.2; } @media screen and (max-width : 480px) /* Als je de width aanpast pas ook de media query aan in simplegrid */ { .filters { display: block; width: 100%; } .filters form { display: block; width: 100%; } .filters .label { display: block; padding: .8rem 0; text-align: left; } .filters select { height: auto !important; width: 100%; margin-bottom: 2rem; } } .contentblock-Projects { padding: 10rem 0; } #projecten .container { left: 0px; width: 100%; bottom: 0px; height: 40%; position: absolute; } #projecten a .container p, #projecten a .container h4 { transition: cubic-bezier(0.44, 1, 0.44, 1) all 0.5s; -webkit-transition: cubic-bezier(0.44, 1, 0.44, 1) all 0.5s; } #projecten a p { margin-bottom: 0; } #projecten a:hover .container p { transform: translateY(-1rem); -webkit-transform: translateY(-1rem); } #projecten a:hover .container h4 { transform: translateY(-1.5rem); -webkit-transform: translateY(-1.5rem); } #projecten article a { color: #fff; display: block; position: relative; } #projecten article a figure { position: relative; } #projecten article a figure::after { content: ""; display: block; position: absolute; background-image: linear-gradient(180deg, transparent 0, #000 100%); z-index: 0; width: 100%; height: 75%; bottom: 0; left: 0; right: 0; } #projecten .text { left: 0px; bottom: 0px; position: absolute; padding: 2.4rem; color: #94c01f; font-size: 24px; } #projecten .text .subtitle { width: 70%; display: block; font-weight: 500; font-size: 1.1rem; line-height: initial; padding-bottom: 0.9rem; letter-spacing: 0.1rem; text-transform: uppercase; font-family: museo-sans, sans-serif; color: white; } #projecten .text h4 { color: white; font-size: 22px !important; font-weight: 700; line-height: 1.4; } #projecten .text.small-col h4 { font-size: 22px; } #projecten .big .text .subtitle { padding-bottom: 1.5rem; } #projecten .big .text h4 { font-size: 3.2rem; line-height: 3.5rem; } #projecten .post { margin-bottom: 30px; background: #fff; width: 100%; transition: .3s ease all; position: relative; } #projecten .post .post-image { display: block; color: #0D1E88; background: #000; } #projecten .post .post-image figure { display: block; width: 100%; overflow: hidden; position: relative; padding-bottom: 40%; background: #000; background-position-x: 0%; background-position-y: 0%; background-image: none; background-size: auto; background-size: cover; background-position: center center; transition: .3s ease all; } #projecten .post .post-image figure.small { padding-bottom: 62.25%; } #projecten .post .post-image figure img { display: none; } #projecten .post-content { padding: 2.5rem 3rem 4rem 3rem; background: white; } #projecten .post-content h3 { position: relative; font-size: 18px; line-height: 1.4; color: #94c01f; font-weight: bold; text-transform: unset; padding-bottom: 3rem; } #projecten .post-content h3::after { content: ''; width: 20%; height: 2px; background-color: #94c01f; position: absolute; bottom: 1rem; left: 0; } #projecten .post-content h4 { font-size: 24px; line-height: 1.4; color: #94c01f; font-weight: bold; position: relative; padding-bottom: 5rem; } #projecten .post-content h4::after { content: ''; width: 10%; height: 2px; background-color: #94c01f; position: absolute; bottom: 1rem; left: 0; } #projecten .post-content .date { display: block; color: #94c01f; font-size: 1.2rem; } #projecten .post-content .text-group { display: block; color: #94c01f; line-height: 1.4; padding: 1rem 0; } #projecten .post-content .text-group .heading { display: block; font-size: 1rem; font-weight: 900; color: #bbce00; letter-spacing: .1rem; text-transform: uppercase; padding-bottom: .5rem; } #projecten .post-content .text-group .body { display: block; font-size: 1.2rem; } #projecten .projects-container .swiper-wrapper { display: flex; } #projecten .projects-container .swiper-slide.small { height: auto; justify-content: space-between; display: flex; flex-direction: column; } #projecten .projects-container .swiper-slide.small article:first-of-type { margin-bottom: 1.2rem; } #projecten .projects-container .swiper-slide.small article:last-of-type { margin-top: 1.2rem; } #projecten .projects-container .swiper-slide.small article { height: calc(50% - 1.2rem); } #projecten .projects-container .swiper-slide.small article a { height: 100%; display: flex; align-items: flex-end; text-decoration: none; } #projecten .projects-container .swiper-slide.small article a figure, #projecten .projects-container .swiper-slide.small article a img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } #projecten .projects-container .swiper-slide.small article .text { position: relative !important; left: unset !important; bottom: unset !important; width: 100%; } #projecten .projects-container .project { position: relative; display: flex; align-items: center; width: 100%; } #projecten .projects-container .project figure { width: 100%; aspect-ratio: 16 / 9; } #projecten .projects-container .project figure img { width: 100%; height: 100%; object-fit: contain; } #projecten .projects-container .project .subtitle { margin-top: 1.2rem; } #projecten .projects-container .project h4 a { position: unset; color: #066188; text-decoration: none; } #projecten .projects-container .project h4 a::after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; } #projecten .projects-container .project .btn { display: flex; justify-self: flex-end; padding: 1.6rem 2.4rem; border: 1px solid #066188; color: #066188; pointer-events: none; } .hide-till-xs { display: none; } @media screen and (max-width : 768px) { #projecten .projects-container .project { display: flex; flex-direction: column; margin-bottom: 3.2rem; } #projecten .projects-container .project figure { margin-bottom: 1.6rem; } #projecten .projects-container .project .btn { margin-top: 1.6rem; justify-self: flex-start; } } @media screen and (max-width : 480px) /* Als je de width aanpast pas ook de media query aan in simplegrid */ { .hide-till-xs { display: flex; } .contentblock-Projects .swiper, .contentblock-Projects .swiper-wrapper { overflow: visible; } #projecten .projects-container .swiper-slide.small article:first-of-type { height: 100%; margin: 0; } #projecten .projects-container .swiper-slide.small article:last-of-type { display: none; } } .projects-overview { padding: 8.8rem 0; } .projects-overview.bg1 h1 { color: var(--dark-blue); } .projects-overview.bg1 .filters { color: var(--dark-blue); } .projects-overview .post { margin-bottom: 2.4rem; width: 100%; transition: .3s ease all; position: relative; background-color: transparent !important; } .projects-overview .post.small { display: flex; flex-direction: row; flex-wrap: nowrap; min-height: 20rem; } .projects-overview .post.small .post-image, .projects-overview .post.small .post-content { flex-basis: 50%; } .projects-overview .post.small .post-image figure { height: 100%; padding-bottom: unset; } .projects-overview .post .actualiteiten, .projects-overview .post .verhalen { position: absolute; bottom: 1rem; right: 1rem; background: #fff; z-index: 99; color: #94c01f; text-transform: capitalize; padding: 0.5rem 1rem; border-radius: 1rem; font-size: 1.55rem; } .projects-overview .post .post-image { display: block; color: #0D1E88; background: #000; position: relative; } .projects-overview .post ul { display: flex; align-items: center; position: absolute; top: 0; left: 0; z-index: 1; list-style: none; padding: 1.6rem; margin: 0; width: 100%; flex-wrap: wrap; gap: 1rem; } .projects-overview .post ul li { display: inline-flex; background-color: #4F8FCB; color: #fff; border-radius: 3rem; margin-right: .8rem; font-size: 1.2rem; font-weight: 600; line-height: 1; padding: 1rem; } .projects-overview .post ul li.highlighted { background-color: var(--light-blue); color: var(--dark-blue); } .projects-overview .post .post-image figure { display: block; width: 100%; overflow: hidden; position: relative; padding-bottom: 65.25%; background-size: cover; transition: .3s ease all; } .projects-overview .post .post-image figure img { display: none; } .projects-overview .post-content { padding: 2.4rem; background-color: #fff; min-height: 22rem; } .projects-overview .post-content h3 { position: relative; font-size: 2.4rem; line-height: 1.4; color: #94c01f; font-weight: bold; text-transform: unset; padding-bottom: 2rem; } .projects-overview .post-content h4 { font-size: 1.8rem; line-height: 1.4; color: #94c01f; font-weight: bold; position: relative; padding-bottom: 1rem; } .projects-overview .post-content h4 a { color: #94c01f; text-decoration: none; } .projects-overview .post-content h4 a:hover { text-decoration: underline; } .projects-overview .post-content h4.no-p { padding-bottom: 0; } .projects-overview .post-content .divider { display: inline-block; width: 5rem; height: 2px; margin-bottom: 1.6rem; background-color: var(--light-green); } .projects-overview .post-content .date { display: block; color: var(--light-green); font-size: 1.4rem; font-weight: 400; line-height: 1.2; } /*PRESS*/ .news-overview.press article { width: 100%; margin-bottom: 2rem; background: #94c01f; } .news-overview.press article a { text-decoration: none; color: #fff; } .news-overview.press article header { background-color: #84ae14; font-size: 1.2rem; font-weight: 900; padding: 2.2rem 2.8rem; } .news-overview.press article .icon { height: 100%; float: right; position: relative; } .news-overview.press article .icon::after { content: '\f0e7'; top: 0px; right: 0px; display: block; font-size: 1.4rem; position: absolute; font-family: fontawesome; font-family: "Font Awesome 5 Free"; } .news-overview.press article .container { background: #94c01f; padding: 3rem 2.8rem 5rem; } .news-overview.press article .text { font-weight: 700; font-size: 1.8rem; line-height: 2.2rem; } .news-overview.press .line { background-color: #fff; } .news-overview.press article .date { display: block; color: #fff; font-weight: 500; font-size: 1.2rem; line-height: initial; } .projects-overview + .news-overview.events.press { padding-top: 0; } .projects-overview + .news-overview.events.press .filters { padding-top: 0; } @media screen and (max-width : 480px) /* Als je de width aanpast pas ook de media query aan in simplegrid */ { .filters { display: block; width: 100%; } .filters form { display: block; width: 100%; } .filters .label { display: block; padding: .8rem 0; text-align: left; } .filters select { height: auto !important; width: 100%; margin-bottom: 2rem; } } .contentblock-SubtitleIntroText.bg2 { color: #fff; } .contentblock-SubtitleIntroText.bg2 h2, .contentblock-SubtitleIntroText.bg2 h3 { color: #fff; } .contentblock-threeImages { padding: 10rem 0; } .textblok { padding: 0rem 0 24rem; } .textblok figure { z-index: 1; } .sub1 { left: 0px; width: 70%; bottom: 0px; position: absolute; margin: 0 0 -25% -22.5%; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); } .sub2 { right: 0px; width: 70%; bottom: 0px; position: absolute; margin: 0 -22.5% -45% 0; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); } .contentblock-threeImages.bg2, .contentblock-threeImages.bg2 h2 { color: #fff; } .contentblock-threeImages .content { padding: 4.8rem 0; } .contentblock-threeImages .content h2 { display: block; } .contentblock-threeImages .content .text { padding: 4rem 0; } .contentblock-threeImages + .footer-cta { padding-top: 10rem; } @media screen and (max-width : 480px) /* Als je de width aanpast pas ook de media query aan in simplegrid */ { .contentblock-threeImages { padding-bottom: 20rem !important; } } .contentblock-TitleAndText.bg2 { color: #fff; } .contentblock-TitleAndText.bg2 h2 { color: #fff; } .contentblock-TitleAndText.bg2 h2 { color: #fff; } .contentblock-TitleAndText.bg2 .btn-primary.btn-blue { color: #fff; border: 2px solid #fff; } .contentblock-TitleAndText.bg2 .btn-primary.btn-blue span::before { color: #fff; } .contentblock-TitleAndText.bg2 .btn-primary.btn-blue:hover { background-color: #fff; color: var(--dark-blue); } .contentblock-TitleAndText.bg2 .btn-primary.btn-blue:hover span::before { color: var(--dark-blue); } .contentblock-TitleTextAndImage { position: relative; background-color: var(--light-blue); } .contentblock-TitleTextAndImage .grid { display: flex; flex-wrap: wrap; align-items: stretch; } .contentblock-TitleTextAndImage .col-img { padding: 7.2rem 0; min-height: 35rem; } .contentblock-TitleTextAndImage .col-img ul.breadcrumbs { position: relative; z-index: 9; display: flex; align-items: center; list-style: none; margin: 0; padding: 0; color: #fff; } .contentblock-TitleTextAndImage .col-img ul.breadcrumbs li { display: block; position: relative; } .contentblock-TitleTextAndImage .col-img ul.breadcrumbs li:not(:last-child)::after { content: "\f054"; font-family: "Font awesome 5 free"; font-weight: 900; position: absolute; top: 50%; transform: translateY(-50%); right: 2rem; line-height: 1; } .contentblock-TitleTextAndImage .col-img ul.breadcrumbs li a, .contentblock-TitleTextAndImage .col-img ul.breadcrumbs li span { display: block; padding-right: 4rem; color: #fff; text-decoration: none; font-weight: 500; font-size: 1.8rem; } .contentblock-TitleTextAndImage .col-img ul.breadcrumbs li span { font-weight: 900; } .contentblock-TitleTextAndImage .col-img img { position: absolute; top: 0; left: 0; width: 50%; height: 100%; object-fit: cover; } .contentblock-TitleTextAndImage .content { padding: 7.2rem; } .contentblock-TitleTextAndImage .content ul.labels { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; list-style: none; margin: 0 0 2.4rem 0; padding: 0; } .contentblock-TitleTextAndImage .content ul.labels li { display: inline-flex; background-color: #4F8FCB; color: #fff; border-radius: 3rem; margin-right: .8rem; font-size: 1.2rem; font-weight: 600; line-height: 1; padding: 1rem; } .contentblock-TitleTextAndImage .content ul.labels li.highlighted { display: inline-flex; background-color: #fff; color: #4F8FCB; border-radius: 3rem; margin-right: .8rem; font-size: 1.2rem; font-weight: 600; line-height: 1; padding: 1rem; } .contentblock-TitleTextAndImage .content h1 { display: block; color: var(--dark-blue); font-size: 5.4rem; font-weight: 900; line-height: 1; margin-bottom: 7.2rem; } .contentblock-TitleTextAndImage.text-and-image .col-1-1 { display: flex; flex-direction: row-reverse; flex-wrap: wrap; } .contentblock-TitleTextAndImage.text-and-image .col-img img { right: 0; left: unset; } @media only screen and (max-width : 1024px) /* Als je de width aanpast pas ook de media query aan in simplegrid */ { .contentblock-TitleTextAndImage .col-img { min-height: 100vw; } .contentblock-TitleTextAndImage .col-img img { width: 100%; height: 100vw; } .contentblock-TitleTextAndImage .content { padding: 2.4rem 0; } .contentblock-TitleTextAndImage .content h1 { font-size: 3.6rem; margin-bottom: 1rem; } } html { font-weight: 300; font-size: 62.5%; text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; } body { color: #076188; font-weight: 300; font-size: 1.6rem; position: relative; overflow-x: hidden; line-height: 2.6rem; font-family: museo, serif; } p { } .text a { color: #94c01f; } /*p:first-of-type { margin-top: 0px; padding: 0px; } p:last-of-type { margin-bottom: 0px; padding: 0px; }*/ h1 { color: #fff; margin: 0px; font-size: 8rem; line-height: 1; font-weight: 900; } h1.small { color: #fff; margin: 0px; font-size: 2.6rem; line-height: 3rem; font-weight: 900; } h2 { margin: 0px; color: #076188; font-size: 4.6rem; line-height: 1; font-weight: 900; } h2.small { color: #076188; font-size: 2.2rem; line-height: 2.8rem; } h2.spacing-bottom { margin-bottom: 3.2rem; } h2.big-title { font-size: 4.6rem; } h3 { margin: 0px; color: #94c01f; font-weight: 900; font-size: 1.6rem; line-height: 2.0rem; text-transform: uppercase; font-family: museo-sans, sans-serif; } h3.big { color: var(--dark-blue); font-family: museo, serif; font-size: 3.6rem; font-weight: 800; line-height: 100%; } h3.small { font-size: 1.1rem; line-height: 1.1rem; letter-spacing: 0.1rem; } h3.type, h3.date { color: #076188; } h4 { margin: 0px; color: #076188; font-size: 3.2rem; line-height: 3.2rem; font-weight: 300; } h4.small { color: #94c01f; font-weight: 900; font-size: 1.6rem; line-height: 2.2rem; } h5 { margin: 0px; color: #ffffff; font-size: 2.4rem; display: inline-block; padding: 1.2rem 0; } h5.small { color: var(--light-green); font-size: 2rem; font-weight: 600; line-height: 120%; } .quote { margin: 0px; color: #94c01f; font-size: 2rem; font-weight: 300; } #strat .quote { color: #fff; font-size: 2.2rem; font-weight: 700; line-height: 2.4rem; position: absolute; top: 2rem; left: 2rem; } .btn { border: none; background: none; font-weight: 900; font-size: 1.1rem; position: relative; display: inline-block; text-decoration: none; letter-spacing: 0.1rem; text-transform: uppercase; padding: 2.6rem 4rem 2.3rem 0; font-family: museo-sans, sans-serif; } .btn span { top: 50%; right: 0px; display: block; position: absolute; border-radius: 50%; padding: 2rem 0.5rem 0.5rem 2rem; border: 0.2rem #fff solid; transform: translateY(-50%); -webkit-transform: translateY(-50%); transition: cubic-bezier(0.44,1,0.44,1) all 0.6s; -webkit-transition: cubic-bezier(0.44,1,0.44,1) all 0.6s; } .btn span::after { top: 50%; left: 50%; display: block; content: '\f105'; font-size: 1.4rem; position: absolute; font-family: "Font Awesome 5 Free"; transform: translate(-40%,-50%); transition: cubic-bezier(0.44,1,0.44,1) color 0.6s; } .btn.adown span::after { content: '\f107'; } .arrow-down { width: 100%; position: relative; padding-bottom: 4rem; } .arrow-down::after { top: 0; left: 50%; font-size: 5rem; position: absolute; content: '\f107'; font-family: fontawesome; } .text img { padding: 2rem 4rem; } .btn.social { color: #fff; margin: 0 1rem 0 0; } .a2a_kit .btn.social { color: #fff; margin: 0 1.4rem 0 0; position: relative; display: block; width: 41px; height: 41px; } .btn.social span::after { font-size: 1.6rem; font-weight: normal; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); font-family: "Font Awesome 5 Brands"; } .btn.social:hover span { background: #fff; } .btn.social:hover span::after { color: #4f8fcb; } .btn.social.twitter:hover span::after { background-image: url(../images/x_twitter.svg); } .btn.social.green.twitter span::after { background-image: url(../images/x_twitter_green.svg); } .btn.social.green.twitter:hover span::after { background-image: url(../images/x_twitter_white.svg); } .btn.social.twitter span::after { content: ""; background-image: url(../images/x_twitter_white.svg); background-repeat: no-repeat; background-position: center center; display: flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; background-size: contain; color: #fff; } .btn.social.linkedin span::after { content: '\f0e1'; } .btn.social.facebook span::after { content: '\f39e'; } .btn.social.instagram span::after { content: "\f16d"; } .btn.social.vimeo span::after { content: '\f27d'; } .btn.social.mail span::after { content: '\f003'; } .btn.social.phone span::after { content: '\f095'; } .btn.social span { font-size: 1rem; padding: 3.7rem 0 0 3.7em; } .btn.green { color: #94c01f; } .btn.green:hover span { background: #94c01f; } .btn.green:hover span::after { color: #fff; } .btn.blue span { margin-right: 2.2rem; } .btn.white { color: #fff; float: right; padding: 1.7rem 4rem 1.7rem 0; } .btn.white:hover span { background: #fff; } .btn.white:hover span::after { color: #94c01f; } .btn.btn-primary { display: inline-block; position: relative; padding: 1.6rem 2.4rem 1.6rem 6rem; color: #fff; font-weight: 600; line-height: 1; font-size: 1.4rem; border-radius: 3rem; border: 2px solid #fff; letter-spacing: 2px; text-transform: uppercase; transition: all 0.2s ease; } .btn.btn-primary span { right: unset; left: 1.6rem; width: 2rem; height: 2rem; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 0; } .btn.btn-primary span::before { content: "\f061"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #fff; transition: all 0.3s ease; background-color: none; } .btn.btn-primary span::after { content: unset; } .btn.btn-primary:hover { background-color: #fff; color: var(--light-green); } .btn.btn-primary:hover span::before { color: var(--light-green); transform: translateX(5px); } .btn-primary.btn-blue { color: var(--dark-blue); border: 2px solid var(--dark-blue); } .btn-primary.btn-blue span::before { color: var(--dark-blue); } .btn-primary.btn-blue:hover { background-color: var(--dark-blue); color: #fff; } .btn-primary.btn-blue:hover span::before { color: #fff; } .btn.show-video span::before, .btn.show-video span::after { all: unset; } .btn.show-video span::before, .btn.show-video span::after { all: unset; } .btn.show-video span { left: 2.8rem; } .btn.show-video span::after { font-family: var(--fa-font); content: '\f04b'; font-size: 1.2rem; font-weight: 900; } .btn.terug span::after { content: '\f104'; font-size: 1.2rem; text-indent: -0.1rem; } .btn.zoeken input { color: #fff; border: none; background: none; letter-spacing: 0.1rem; text-transform: uppercase; } .btn.zoeken .search { width: 100%; } .btn.zoeken input::-webkit-input-placeholder { color: #fff; } .btn.zoeken input:-moz-placeholder { /* Firefox 18- */ color: #fff; } .btn.zoeken input::-moz-placeholder { /* Firefox 19+ */ color: #fff; } .btn.zoeken input:-ms-input-placeholder { color: #fff; } .btn-video { top: 0px; left: 0px; color: #fff; width: 100%; height: 100%; display: flex; display: block; font-size: 1.1rem; letter-spacing: 0.1rem; flex-wrap: wrap; font-weight: 900; position: absolute; align-items: center; text-decoration: none; justify-content: center; text-transform: uppercase; background: rgba(0,0,0,0.6); font-family: museo-sans, sans-serif; } .btn-video .btn-wrapper { display: flex; flex-wrap: wrap; display: -webkit-flex; -webkit-flex-wrap: wrap; justify-content: center; -webkit-align-items: center; -webkit-justify-content: center; } .btn-video .btn-wrapper .btn { padding: 0.4rem 4rem 0.4rem; } .btn-video:hover .btn.white span::after { color: #94c01f; } .btn-video:hover .btn.white span { background: #fff; } .btn.blue { color: #fff; background-color: #066188; padding: 2rem 7rem 1.7rem 3rem; transition: cubic-bezier(0.165, 0.84, 0.44, 1) all 0.5s; -webkit-transition: cubic-bezier(0.165, 0.84, 0.44, 1) all 0.5s; } .btn.blue:hover { background-color: #07435d; } .btn.blue:hover span { background: #fff; } .btn.blue:hover span::after { color: #07435d; } .btn.blue.alert { margin-top: 1.5rem; padding: 1rem 4rem 1rem 2rem; } .btn.blue.alert::after { font-family: "Font Awesome 5 Free"; content: '\f35d'; position: absolute; top: 50%; transform: translateY(-50%); right: 1rem; display: block; font-size: 1.5rem; } .btn.green span { color: #94c01f; border-color: #94c01f; } .btn.dblue { color: #076188; } .btn.dblue span { color: #076188; border-color: #076188; } .btn.dblue:hover span { background: #076188; } .btn.dblue:hover span::after { color: #fff; } .btn.botright { right: 1rem; bottom: 0px; position: absolute; } .intro { font-size: 2.6rem; line-height: 3.6rem; font-family: museo-sans, sans-serif; } .line { width: 5.4rem; height: 2px; margin: 0.8rem 0 1.5rem; background-color: #94c01f; transition: cubic-bezier(0.44,1,0.44,1) all 0.6s; -webkit-transition: cubic-bezier(0.44,1,0.44,1) all 0.6s; } .landing-line { width: 5.4rem; height: 2px; margin: 2.4rem 0; background-color: #94c01f; transition: cubic-bezier(0.44,1,0.44,1) all 0.6s; -webkit-transition: cubic-bezier(0.44,1,0.44,1) all 0.6s; } .swiper-container .slide:hover .line { width: 3rem; } .swiper-btns-wrapper { display: flex; align-items: center; } .swiper-btns-wrapper button { all: unset; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; cursor: pointer; } .swiper-button-disabled > i { opacity: 0.4; pointer-events: none; } .content-blocks section[class*="contentblock-"]:not(.contentblock-Header) { padding: 10rem 0; } .content-blocks .bg2 { color: #fff; } .content-blocks .bg2 h1, .content-blocks .bg2 h2, .content-blocks .bg2 h3 { color: #fff; } .content-blocks .bg2 .btn-primary.btn-blue { color: #fff; border: 2px solid #fff; } .content-blocks .bg2 .btn-primary.btn-blue span::before { color: #fff; } .content-blocks .bg2 .btn-primary.btn-blue:hover { background-color: #fff; color: var(--dark-blue); } .content-blocks .bg2 .btn-primary.btn-blue:hover span::before { color: var(--dark-blue); } /* kleuren */ /* lichtblauw */ .bg1 { background-color: #EBF8FF; } .cl1 { color: #EBF8FF; } /* groen */ .bg2 { background-color: #94C01F; } .cl2 { color: #94C01F; } /* donkerblauw */ .bg3 { background-color: #066188; } .cl3 { color: #066188; } /* blauw */ .bg4 { background-color: #4F8FCB; } .cl4 { color: #4F8FCB; } /* meerblauw */ .bg5 { background-color: #4281BD; } .cl5 { color: #4281BD; } /* wit */ .bg6 { background-color: #ffffff; } .bg7 { background-color: #ECFFEC; } .cl6 { color: #ffffff; } .bg1 + .bg1, .bg2 + .bg2, .bg3 + .bg3 { padding-top: 0; } .flex-center { display: flex; flex-wrap: wrap; align-items: center; } /* DEFAULT LINK STYLING */ .no-deco-white { text-decoration: none; color: #fff; } @media only screen and (max-width : 1024px) /* Als je de width aanpast pas ook de media query aan in simplegrid */ { .content-blocks section[class*="contentblock-"]:not(.contentblock-Header) { padding: 4rem 0; } } @media only screen and (max-width : 480px) /* Als je de width aanpast pas ook de media query aan in simplegrid */ { h2.big-title { word-break: break-word; } } :root { --light-blue: #EBF8FF; --blue: #4F8FCB; --dark-blue: #076188; --dark-green: #7CA40F; --light-green: #94C01F; --light-green-background: #F1F6E4; --fa-font: "Font Awesome 5 Free"; } aside.socials { position: fixed; z-index: 999; top: 50%; transform: translateY(-50%); right: 0; } aside.socials .inside { background-color: #fff; border-radius: 10px 0px 0px 10px; overflow: hidden; } aside.socials ul { list-style: none; margin: 0; padding: 0; } aside.socials ul li a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; width: 100%; font-size: 2.4rem; padding: 1.6rem; line-height: 1; color: var(--dark-blue); transition: all 0.3s ease; } aside.socials ul li a:hover { background-color: var(--dark-blue); color: #fff; } aside.socials ul li a:hover img { background-color: var(--dark-blue); color: #fff; } aside.socials ul li a:hover svg path { fill: #fff; } aside.socials ul li a i { font-family: 'Font Awesome 5 Brands'; } aside.socials ul li a svg { max-width: 2.4rem; } aside.socials ul li:nth-child(even) { border-top: 1px solid var(--light-blue); border-bottom: 1px solid var(--light-blue); } /*------------------------------------*\ Menu \*------------------------------------*/ .header-inner { display: flex; align-items: stretch; align-items: center; height: 71px; } [class*='invisible'], [class*='invisible'] + label { display: none !important; } .header-text { position: absolute; left: 0; top: 0; height: 100%; display: flex; width: 100%; display: -webkit-flex; align-items: center; -webkit-align-items: center; } .header-text h1 { width: 50%; } .header-text h2 { color: #fff; font-weight: 700; line-height: 4rem; font-size: 3rem; margin-top: 1rem; } .submenu .learning { margin: 0 2rem; padding: 2.5rem 2.2rem 1rem; color: #076188; background: #ebf8ff; } .learning span.logo { width: 4.7rem; height: 4.7rem; display: block; position: absolute; top: 0; right: 0; margin: 0; padding: 0; transform: translate(20%,-20%); -webkit-transform: translate(20%,-20%); background: url(../images/Keep-on-learning.png) center center / contain; } .submenu .learning::after { display: none; } .submenu .learning .btn span { transition: cubic-bezier(0.44,1,0.44,1) all 0.2s; -webkit-transition: cubic-bezier(0.44,1,0.44,1) all 0.2s; } .submenu .learning:hover .btn span { background: #076188; color: #fff; } .submenu a.btn { border: none; background: none; font-weight: 900; font-size: 1.1rem; margin: 0; line-height: 1.2rem; position: relative; display: inline-block; text-decoration: none; letter-spacing: 0.1rem; text-transform: uppercase; padding: 2.6rem 4rem 2.3rem 0; font-family: museo-sans, sans-serif; } .learning h3 { color: #076188; font-size: 2rem; font-weight: 900; line-height: 2rem; text-transform: none; } nav { top: 0px; left: 0px; z-index: 10; width: 100%; height: 71px; background: #fff; position: fixed; } .filter-container { right: 12rem; top: 4.5rem; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; position: absolute; } .maand { float: right; height: 100%; background: none; font-weight: 900; margin-left: 2rem; font-size: 1.1rem; border-radius: 0px; -moz-appearance: none; letter-spacing: 0.1rem; text-transform: uppercase; -webkit-appearance: none; padding: 1.2rem 8rem 1.2rem 2rem; font-family: museo-sans, sans-serif; position: relative; z-index: 100; color: #076188; border: 2px solid #076188; background: url(../images/arrow-down-blue.svg) transparent calc(100% - 20px) center no-repeat; } .archief { right: 14rem; top: 0px; margin-top: 0px; transform: translateY(-75%); -webkit-transform: translateY(-75%); position: absolute; } .alle-items { right: 3px; top: 0px; margin-top: 0px; transform: translateY(-75%); -webkit-transform: translateY(-75%); position: absolute; } .logo { width: 16rem; height: 5rem; float: left; display: block; margin: 10px 5% 10px 2%; background: url(../images/Logo-nieuw.svg) center center / contain no-repeat; } .signup { float: right; top: -2rem; display: flex; display: -webkit-flex; background: #fff; font-size: 1.1rem; line-height: 1.4rem; font-weight: 900; font-family: museo-sans,sans-serif; text-transform: uppercase; align-items: center; -webkit-align-items: center; } .signup-info { text-align: right; letter-spacing: 0.1rem; padding: 0 2rem; } .input-container input { padding: 1.5rem 2rem; width: 100%; border: none; color: #fff; background: rgba(0,0,0,0.2); } .input-container input[type=radio] { width: auto; } .input-container input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #fff; } .input-container input::-moz-placeholder { /* Firefox 19+ */ color: #fff; } .input-container input:-ms-input-placeholder { /* IE 10+ */ color: #fff; } .input-container input:-moz-placeholder { /* Firefox 18- */ color: #fff; } #newsletter { padding: 0 0%; } #newsletter .btn { padding: 1.2rem 7rem 1.1rem 3rem; } #newsletter .title { font-weight: 900; line-height: 1.8rem; color: #fff; font-size: 1.4rem; letter-spacing: 0.1rem; font-family: museo-sans,sans-serif; } #newsletter .title strong { font-size: 2rem; letter-spacing: 0rem; line-height: 2rem; } #newsletter .age-check { color: #fff; } #newsletter .input-container input[type=radio] { margin-left: 5px; } #newsletter .input-container label { color: #ffffff; font-size: 1.2rem; padding: 0 20px 0 5px; } #newsletter .input-container .radio { margin-top: 5px; } .mainmenu { z-index: 100; background-color: #fff; position: relative; height: 100%; border-bottom: 1px solid var(--light-blue); } .mainnav { display: flex; align-items: stretch; overflow: hidden; } .mainnav ul { margin: 0px; padding: 0px; display: flex; flex-wrap: wrap; list-style: none; } .mainnav ul li { border-left: 1px solid var(--light-blue); display: flex; align-items: stretch; } .mainnav ul li a { display: flex; align-items: center; color: var(--dark-blue); padding: 0 2.4rem; font-size: 1.4rem; font-weight: 600; text-decoration: none; letter-spacing: 0.1rem; text-transform: uppercase; font-family: museo-sans, sans-serif; transition: cubic-bezier(0.44,1,0.44,1) all 0.6s; } .mainnav ul a:hover, .mainnav ul a.active { background: #b2d9f6; color: #fff; } .lang-switch { all: unset; display: flex; justify-content: center; } .lang-switch ul { display: flex; align-items: stretch; list-style: none; margin: 0; padding: 0; } .lang-switch ul li { border-left: 1px solid var(--light-blue); border-right: 1px solid var(--light-blue); display: flex; align-items: center; padding: 0 2.4rem; } .lang-switch ul li a { width: 3rem; height: 3rem; background-image: url(../images/eng.svg); background-repeat: no-repeat; background-position: center center; } .submenu { top: 61px; left: 0px; width: 100%; z-index: 10; background: #fff; position: absolute; padding: 3.3rem 0 7.5rem; } .submenu .container { display: flex; display: -webkit-flex; } .submenu { transform: translateY(-120%); -webkit-transform: translateY(-120%); transition: cubic-bezier(0.165, 0.84, 0.44, 1) all 0.7s; -webkit-transition: cubic-bezier(0.165, 0.84, 0.44, 1) all 0.7s; } .submenu.active { transform: translateY(0%); -webkit-transform: translateY(0%); } .submenu .container ul, .submenu .container .lang { margin: 0px; width: 100%; float: left; padding: 0 4rem; list-style: none; } .submenu .container .lang span { color: #076188; font-weight: 900; font-size: 1.1rem; letter-spacing: 0.1rem; text-decoration: none; text-transform: uppercase; font-family: museo-sans, sans-serif; } .submenu .container .lang ul { margin: 0px; padding: 0px; width: 100%; float: left; } .submenu .container .lang li { float: left; } .submenu .container .lang a { line-height: 2rem; margin-right: 2rem; } .submenu .container { transform: translateY(-50%); -webkit-transform: translateY(-50%); } .submenu.active .container { transform: translateY(0%); -webkit-transform: translateY(0%); } .submenu .col-1-4.big { border: none; } .submenu a { color: #076188; font-weight: 500; font-size: 1.4rem; line-height: 2rem; display: inline-block; margin: 1.4rem 0; position: relative; text-decoration: none; font-family: museo-sans, sans-serif; } .submenu a::after { width: 0%; left: 0px; height: 1px; bottom: -2px; content: ''; display: block; position: absolute; background: #076188; transition: cubic-bezier(0.165, 0.84, 0.44, 1) all 0.8s; -webkit-transition: cubic-bezier(0.165, 0.84, 0.44, 1) all 0.8s; } .submenu .big a::after { height: 2px; } .submenu a:hover::after, .submenu a.active::after { width: 100%; } .submenu .big a { font-family: Museo; font-size: 2rem; font-weight: 900; color: #076188; line-height: 2.8rem; margin: 1rem 0; display: inline-block; } .submenu .col-1-4 { border-left: 1px solid #b2d9f6; } .mobile-menu { width: 100%; } .desktop-spacer { height: 71px; display: block; } .mobile-background { top: 0px; left: 0px; right: 0px; opacity: 0; z-index: 3; bottom: 0px; visibility: hidden; position: absolute; background: rgba(7,97,136,0.6); transition: cubic-bezier(0.165, 0.84, 0.44, 1) opacity 0.7s, ease visibility 0s 0.7s; -webkit-transition: cubic-bezier(0.165, 0.84, 0.44, 1) opacity 0.7s, ease visibility 0s 0.7s; } .mobile-background.active { opacity: 1; visibility: visible; transition: cubic-bezier(0.165, 0.84, 0.44, 1) opacity 0.7s, ease visibility 0s 0s; -webkit-transition: cubic-bezier(0.165, 0.84, 0.44, 1) opacity 0.7s, ease visibility 0s 0s; } .mobile-sub { width: 100%; padding: 3rem 0; border-left: 0px; border-bottom: 1px solid #b2d9f6; } .mobile-sub li { width: 50%; float: left; } .mobile-sub li a { line-height: 3rem; margin: 0; } .mobile-menu .icon::after { top: 0px; left: 0px; width: 100%; color: #94c01f; content: '\f041'; font-size: 1.4rem; text-align: center; position: absolute; font-family: "Font Awesome 5 Free"; font-weight: 900; } .mobile-menu a { display: flex; color: #076188; padding: 2rem 1rem; line-height: 2.6rem; align-items: center; display: -webkit-flex; text-decoration: none; font-family: museo, serif; -webkit-align-items: center; } .mobile-menu a h2 { padding: 0 1.5rem; font-size: 1.6rem; line-height: 1.6rem; } .mobile-menu .col-1-1 { border-bottom: 1px solid #b2d9f6; } .mobile-menu .icon { float: left; display: block; position: relative; border-radius: 50%; padding: 2.6rem 2.6rem 0 0; border: 0.2rem solid #94c01f; } .more { width: 10%; height: 60px; float: left; border: none; display: flex; color: #076188; cursor: pointer; padding: 0 2rem; background: none; text-align: right; position: relative; align-items: center; display: -webkit-flex; text-decoration: none; justify-content: flex-end; letter-spacing: 0.1rem; text-transform: uppercase; -webkit-align-items: center; -webkit-justify-content: flex-end; border-left: 1px #b2d9f6 solid; font-family: museo-sans, sans-serif; display: none; } .mainmenu .search { z-index: 120; float: left; border-right: 1px solid var(--light-blue); border-left: 1px var(--light-blue) solid; display: flex; color: #076188; cursor: pointer; background: none; text-align: center; position: relative; align-items: center; display: -webkit-flex; text-decoration: none; justify-content: flex-end; letter-spacing: 0.1rem; text-transform: uppercase; padding: 0 2.4rem; } .search { transition: ease all 0.3s; -webkit-transition: ease all 0.3s; } .search button { width: 100%; border: none; background: none; } .search.active { background: #b2d9f6; } .search .input-search { top: 0; width: 0px; right: 100%; height: 60px; overflow: hidden; position: absolute; background: #b2d9f6; transition: ease all 0.3s; -webkit-transition: ease all 0.3s; } .search.active .input-search { width: 250px; } .search input { z-index: 1; width: 100%; height: 40px; padding: 0 10px; margin-top: 10px; margin-left: 20px; border: 1px #b2d9f6 solid; } .cse input.gsc-input, input.gsc-input { border: 1px solid #076188 !important; padding: 1.1rem 1.5rem !important; font-size: 1.6rem !important; position: relative !important; overflow-x: hidden !important; line-height: 2.6rem !important; font-family: museo, serif !important; } .cse input.gsc-search-button, input.gsc-search-button { height: 50px !important; color: #fff !important; border: none !important; border-radius: 0 !important; background: none !important; font-weight: 900 !important; font-size: 1.1rem !important; position: relative !important; display: inline-block !important; text-decoration: none !important; letter-spacing: 0.1rem !important; text-transform: uppercase !important; background-color: #066188 !important; padding: 2rem 7rem 1.7rem 3rem !important; font-family: museo-sans, sans-serif !important; transition: cubic-bezier(0.165, 0.84, 0.44, 1) all 0.5s !important; -webkit-transition: cubic-bezier(0.165, 0.84, 0.44, 1) all 0.5s !important; } .gsc-results .gsc-cursor-box .gsc-cursor-page { font-family: museo-sans, sans-serif; color: #fff !important; color: #076188 !important; text-shadow: none !important; padding: 0.5rem 1.5rem !important; text-decoration: none !important; border: 1px solid #076188 !important; display: inline-block !important; } .gsc-results .gsc-cursor-box { margin-bottom: 0px !important; margin-top: 2.5rem !important; } .cse .gsc-cursor-box, .gsc-cursor-box { border-top: 2px solid #b2d9f6 !important; padding: 1em 0 0 !important; text-align: left; } .cse .gsc-results .gsc-cursor-page.gsc-cursor-current-page, .gsc-results .gsc-cursor-page.gsc-cursor-current-page { color: #fff !important; padding: 0.5rem 1.5rem !important; text-shadow: none !important; background-color: #076188 !important; } .gs-no-results-result .gs-snippet, .gs-error-result .gs-snippet { color: #066188 !important; padding: 3rem !important; margin: 1rem 0 !important; font-size: 1.6rem !important; text-align: center !important; font-family: museo, serif !important; border: 0px solid #076188 !important; background-color: #ecf8ff !important; } .gsc-control-cse div.gsc-orderby { display: none !important; } .gsc-above-wrapper-area { display: none; border-bottom: 1px solid #076188 !important; } .cse .gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link, .cse .gs-webResult.gs-result a.gs-title:link b, .gs-webResult.gs-result a.gs-title:link b, .cse .gs-webResult.gs-result a.gs-title:visited, .gs-webResult.gs-result a.gs-title:visited, .cse .gs-webResult.gs-result a.gs-title:visited b, .gs-webResult.gs-result a.gs-title:visited b, .cse .gs-webResult.gs-result a.gs-title:hover, .gs-webResult.gs-result a.gs-title:hover, .cse .gs-webResult.gs-result a.gs-title:hover b, .gs-webResult.gs-result a.gs-title:hover b, .gs-imageResult a.gs-title:link, .gs-imageResult a.gs-title:link b, .gs-imageResult a.gs-title:visited, .gs-imageResult a.gs-title:visited b, .gs-imageResult a.gs-title:hover, .gs-imageResult a.gs-title:hover b, .cse .gsc-cursor-page, .gsc-cursor-page, .cse .gsc-trailing-more-results:link, .gsc-trailing-more-results:link, .cse .gs-spelling a, .gs-spelling a { padding-bottom: .1rem !important; display: inline-block !important; color: #94c01f !important; height: initial !important; font-weight: 300 !important; font-size: 1.6rem !important; line-height: 2.6rem !important; text-transform: uppercase !important; font-weight: 900 !important; font-family: museo-sans, sans-serif !important; } .gs-result .gs-title, .gs-result .gs-title * { text-decoration: none !important; } .gsc-result .gs-title { height: auto !important; } .cse .gsc-webResult.gsc-result, .gsc-webResult.gsc-result, .gsc-imageResult-classic, .gsc-imageResult-column { padding: 0 !important; } .cse form.gsc-search-box, form.gsc-search-box { padding: 8px 4px 2px 0px !important; } .cse .gs-webResult .gs-snippet, .gs-webResult .gs-snippet, .gs-fileFormatType, .gs-imageResult .gs-snippet, .cse .gs-webResult .gs-visibleUrl, .gs-webResult .gs-visibleUrl, .cse .gs-webResult .gs-visibleUrl-short, .gs-webResult .gs-visibleUrl-short, .gs-imageResult .gs-visibleUrl, .gs-imageResult .gs-visibleUrl-short { color: #076188 !important; font-size: 1.6rem !important; line-height: 2.6rem !important; font-family: museo, sans !important; } .nav-trigger::after { top: 50%; left: 0px; display: block; color: #076188; content: 'Meer'; font-weight: 900; font-size: 1rem; position: absolute; margin-left: -4.5rem; letter-spacing: 0.1rem; text-transform: uppercase; transform: translate(0%,-50%); font-family: museo-sans, sans-serif; -webkit-transform: translate(0%,-50%); } .nav-trigger { width: 40%; height: 100%; border: none; z-index: 105; background: #fff; position: relative; white-space: nowrap; display: inline-block; transition: cubic-bezier(0.165, 0.84, 0.44, 1) all 0.7s; -webkit-transition: cubic-bezier(0.165, 0.84, 0.44, 1) all 0.7s; } .nav-trigger .icon { top: 50%; left: 50%; right: auto; bottom: auto; position: absolute; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); display: inline-block; width: 100%; height: 0px; padding-bottom: 2px; background-color: #076188; z-index: 10; transition: cubic-bezier(0.165, 0.84, 0.44, 1) all 0.3s; -webkit-transition: cubic-bezier(0.165, 0.84, 0.44, 1) all 0.3s; } .nav-trigger .icon::before, .nav-trigger .icon:after { content: ''; position: absolute; top: -5%; left: 0; width: 100%; height: 100%; background-color: #076188; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform .3s; -moz-transition: -moz-transform .3s; transition: transform .3s; } .nav-trigger .icon::before { width: 75%; -webkit-transform: translateY(-450%) rotate(0deg); -moz-transform: translateY(-450%) rotate(0deg); -ms-transform: translateY(-450%) rotate(0deg); -o-transform: translateY(-450%) rotate(0deg); transform: translateY(-450%) rotate(0deg); } .nav-trigger .icon::after { width: 45%; -webkit-transform: translateY(450%) rotate(0deg); -moz-transform: translateY(450%) rotate(0deg); -ms-transform: translateY(450%) rotate(0deg); -o-transform: translateY(450%) rotate(0deg); transform: translateY(450%) rotate(0deg); } .nav-trigger::before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; } .nav-trigger::before { background-color: #076188; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; transition-delay: 0.4s; background: none; } .nav-trigger.close-nav .icon { background-color: rgba(255, 255, 255, 0); } .nav-trigger.close-nav .icon::before, .nav-trigger.close-nav .icon::after { background-color: #076188; } .nav-trigger.close-nav .icon::before { width: 60%; -webkit-transform: translateX(0%) translateY(0) rotate(45deg); -moz-transform: translateX(0%) translateY(0) rotate(45deg); -ms-transform: translateX(0%) translateY(0) rotate(45deg); -o-transform: translateX(0%) translateY(0) rotate(45deg); transform: translateX(0%) translateY(0) rotate(45deg); } .nav-trigger.close-nav .icon::after { width: 60%; -webkit-transform: translateX(0%) translateY(0) rotate(-45deg); -moz-transform: translateX(0%) translateY(0) rotate(-45deg); -ms-transform: translateX(0%) translateY(0) rotate(-45deg); -o-transform: translateX(0%) translateY(0) rotate(-45deg); transform: translateX(0%) translateY(0) rotate(-45deg); } .popup-video.visible { opacity: 1; visibility: visible; z-index: 1000; } .popup-video { position: fixed; width: 100%; height: 100%; background: rgba(235,255,227,0.6); z-index: -100; top: 0; text-align: center; padding: 20px; opacity: 0; visibility: hidden; -webkit-transition: all .8s ease; transition: all .8s ease; } .popup-video .video-wrapper { width: 100%; max-height: 100%; max-width: 1000px; position: absolute; z-index: 10; top: 50%; left: 50%; padding: 1rem; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .popup-video .close { display: inline-block; position: relative; z-index: 10; width: 30px; height: 30px; -webkit-transition: all .2s ease; transition: all .2s ease; } .popup-video .close::before { position: absolute; display: inline-block; content: ""; width: 29px; left: 0; top: 50%; height: 2px; background-color: #076188; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all .2s ease; transition: all .2s ease; } .popup-video .close::after { position: absolute; display: inline-block; content: ""; width: 29px; left: 0; top: 50%; height: 2px; background-color: #076188; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: all .2s ease; transition: all .2s ease; } .popup-video .btn-close:hover .close::before, .popup-video .btn-close:hover .close::after { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .popup-video .btn-close { position: absolute; right: 1rem; top: -4rem; margin: 0; padding: 0; background: none; border: none; cursor: pointer; } .popup-video .video-wrapper .video { position: relative; padding-bottom: 56.25%; height: 0; box-shadow: 0 20px 40px rgba(0,0,0,.3); } .popup-video .video-wrapper .video video, .popup-video .video-wrapper .video iframe { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } .popup-video .overlay { position: absolute; top: 0; left: 0; background: none; width: 100%; height: 100%; z-index: 1; } #strat .icon { right: 0px; bottom: 0px; display: block; position: absolute; border-radius: 50%; margin: 0 1.4rem 2rem 0; padding: 2.6rem 2.6rem 0 0; border: 0.2rem solid #fff; } #strat .icon::after { top: 0px; left: 0px; width: 100%; color: #fff; font-size: 1.4rem; text-align: center; position: absolute; font-family: "Font Awesome 5 Free"; font-weight: 900; } #strat .text { font-weight: 300; font-size: 1.6rem; line-height: 2.6rem; font-family: museo-sans, sans-serif; } #strat figure::before { left: 0px; width: 100%; top: 0px; height: 80%; content: ''; z-index: 0; position: absolute; background-image: linear-gradient(360deg, rgba(0, 0, 0, 0) 0%, rgba(0,0,0,0.8) 100%); } .icon.marker::after { content: '\f041'; } .icon.book-reader::after { content: '\f5da'; } .icon.briefcase::after { content: '\f0b1'; } .icon.users::after { content: '\f0c0'; } .icon.network::after { content: '\f6ff'; } .icon.suitcase::after { content: '\f0f2'; } .icon.computer::after { content: '\f109'; } .icon.heart::after { content: '\f004'; } .icon.bulb::after { content: '\f0eb'; } .icon.industry::after { content: '\f275'; } .icon.eye::after { content: '\f06e'; } /*------------------------------------*\ Home -> Mededeling \*------------------------------------*/ .mededeling-home { padding: 5rem; border: 2px solid #94c01f; background-color: rgba(148, 192, 31, 0.1); margin-top: 8rem; border-radius: 5px; } /*------------------------------------*\ Home -> Nieuws \*------------------------------------*/ .swiper { overflow: hidden; position: relative; } #nieuws::after { left: 0px; bottom: 0px; width: 100%; content: ''; z-index: -1; height: 45%; position: absolute; background-color: #ebf8ff; } #events::after { left: 0px; bottom: 0px; width: 100%; content: ''; position: absolute; padding-bottom: 35rem; background-color: #ebf8ff; } .swiper-container .slide { text-align: left; } .swiper-container .slide .container { padding: 3rem 2.8rem 3.4rem; word-break: break-word; } .swiper-container .highlight .container { width: 80%; padding: 3rem 2.8rem 5rem; } .swiper-container .slide.pers .container, .swiper-container .slide.facebook .container, .swiper-container .slide.twitter .container { padding: 3rem 2.8rem 5rem; } .swiper-container figure img { display: block; } .swiper-container .slide .date { display: block; color: #94c01f; font-weight: 500; font-size: 1.2rem; line-height: initial; } .swiper-container .slide .date-title { display: block; color: #bbce00; font-size: 1rem; font-weight: 900; line-height: initial; letter-spacing: 0.1rem; text-transform: uppercase; font-family: museo-sans, sans-serif; } .swiper-container header { font-size: 1.2rem; font-weight: 900; padding: 2.2rem 2.8rem; } .swiper-container a { text-decoration: none; color: inherit; } .swiper-container .slide h4 { display: inline; color: #94c01f; font-weight: 700; font-size: 1.8rem; line-height: 2.2rem; } .swiper-container .swiper-slide { width: 25%; margin-right: 2rem; } .swiper-container .swiper-slide:last-child { margin-right: 0px; } .swiper-container .swiper-slide.highlight { width: 42.5%; } .swiper-container .highlight .slide h4 { font-size: 2.4rem; line-height: 2.8rem; } .swiper-container .icon { height: 100%; float: right; position: relative; } .swiper-container .icon::after { top: 0px; right: 0px; display: block; font-size: 1.4rem; position: absolute; font-family: fontawesome; font-family: "Font Awesome 5 Free"; } .swiper-container .twitter .icon::after { content: '\f099'; } .swiper-container .facebook .icon::after { content: '\f09a'; } .swiper-container .pers .icon::after { content: '\f0e7'; } .swiper-container .pers a { color: #fff; } .swiper-container .pers .text { font-weight: 700; font-size: 1.8rem; line-height: 2.2rem; } .swiper-container .text a { color: #fff; display: inline; } .swiper-container .twitter, .swiper-container .facebook, .swiper-container .pers { color: #fff; line-height: 2rem; font-size: 1.5rem; background: #6fd1fb; } .swiper-container .facebook { background: #4f8fcb; } .persberichten { display: flex; } .persberichten .pers-container { display: flex; flex-wrap: wrap; } .swiper-container .pers { background: #94c01f; } #nieuws .swiper-container .pers .container { background: #94c01f; } .swiper-container .twitter header { background-color: #5bc4f1; } .swiper-container .facebook header { background-color: #3b7ab5; } .swiper-container .pers header { background-color: #84ae14; } .swiper-container .twitter .line, .swiper-container .facebook .line, .swiper-container .pers .line { background: #fff; } .swiper-container .twitter .date, .swiper-container .facebook .date, .swiper-container .pers .date { color: #fff; } /*------------------------------------*\ Home -> Waar staan we voor \*------------------------------------*/ #graph { background: url(../images/kaart.svg) left bottom #ebf8ff no-repeat; } #graph .footnote a { right: 2rem; bottom: 2rem; opacity: 1; color: #076188; font-weight: 900; font-size: 1.3rem; position: absolute; text-decoration: none; letter-spacing: 0.1rem; text-transform: uppercase; font-family: museo-sans, sans-serif; } #graph .fact { background: #fff; position: relative; text-align: center; margin-bottom: 2rem; box-shadow: 0 4rem 4rem #D7EAF4; } #graph .fact.big { padding-bottom: 3.2rem; } #graph .fact.small .container { display: flex; text-align: left; align-items: center; display: -webkit-flex; -webkit-align-items: center; } #graph .info { z-index: 1; } #graph .fact h4 { color: #94c01f; font-weight: 900; font-size: 2.8rem; line-height: initial; } #graph.small .fact.big h4 { color: #94c01f; font-weight: 900; font-size: 2rem; line-height: initial; padding: 0 3rem; font-family: museo-sans, sans-serif; } #graph .fact .icon { margin: 0 2rem; background: #000; display: inline-block; padding: 8.3rem 0 0 8.3rem; } #graph .fact.big .icon { top: -10%; left: 50%; margin: 0px; position: absolute; transform: translateX(-50%); -webkit-transform: translateX(-50%); } #graph .fact.big h4 { font-size: 4rem; } #graph .fact .container { padding-top: 0.8rem; padding-bottom: 0.8rem; } #graph .fact .title { color: #076188; display: block; font-weight: 900; font-size: 1.1rem; line-height: 2rem; letter-spacing: 0.1rem; text-transform: uppercase; font-family: museo-sans, sans-serif; } #graph .fact.big .container { padding-top: 9rem; padding-bottom: 2.8rem; } #graph .fact .subtitle { color: #909090; font-weight: 500; font-size: 1.4rem; font-family: Museo; line-height: initial; } #graph .container .graph { top: 0px; left: 10%; right: 10%; bottom: 18%; opacity: 0.4; position: absolute; background: url(../images/Grafiek-Banen.svg) center bottom / contain no-repeat; } #graph #bedrijven .container .graph { top: 0px; left: 10%; right: 10%; bottom: 18%; opacity: 0.4; position: absolute; background: url(../images/Grafiek-Bedrijven.svg) center bottom / contain no-repeat; } #graph #banen .icon { background: url(../images/icon-banen.svg) center bottom / contain no-repeat; } #graph #bedrijven .icon { background: url(../images/icon-bedrijven.svg) center bottom / contain no-repeat; } #graph #export .icon { background: url(../images/icon-exportwaarde.svg) center bottom / contain no-repeat; } #graph #bruto .icon { background: url(../images/icon-bruto.svg) center bottom / contain no-repeat; } #graph #kwaliteit .icon { background: url(../images/icon-kwaliteit.svg) center bottom / contain no-repeat; } #graph #veiligheid .icon { background: url(../images/icon-veiligheid.svg) center bottom / contain no-repeat; } #graph #natuur .icon { background: url(../images/icon-natuur.svg) center bottom / contain no-repeat; } #graph #money .icon { background: url(../images/icon-money.svg) center bottom / contain no-repeat; } #graph #colab .icon { background: url(../images/icon-colab.svg) center bottom / contain no-repeat; } #graph #cal .icon { background: url(../images/icon-cal.svg) center bottom / contain no-repeat; } #graph #mic .icon { background: url(../images/icon-mic.svg) center bottom / contain no-repeat; } #graph .partners { display: flex; display: -webkit-flex; align-items: stretch; -webkit-align-items: stretch; flex-wrap: wrap; -webkit-flex-wrap: wrap; } #graph .partners article { height: 20rem; display: flex; margin-top: 2rem; display: -webkit-flex; align-items: stretch; -webkit-align-items: stretch; align-items: center; -webkit-align-items: center; } #graph .partners article .partner { height: 100%; position: relative; } #graph .partner { width: 100%; text-align: center; padding: 3rem 5rem; background: #fff; box-shadow: 0 4rem 4rem #D7EAF4; } #graph .partner .container { width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center center; } #graph .partner a { top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; } /*------------------------------------*\ Home -> Ervaringen \*------------------------------------*/ .wall { overflow: hidden; position: relative; transition: ease opacity 0.4s; -webkit-transition: ease opacity 0.4s; } .exp-item { height: 0px; width: 33.33%; position: relative; padding-bottom: 33.33%; } .exp-item.big { width: 66.66%; padding-bottom: 66.66%; } .exp-item article { top: 0px; left: 0px; right: 0px; bottom: 0px; padding: 1rem; position: absolute; } .story-item { position: relative; } .story-item.big { width: 50%; padding-bottom: 50%; } .story-item.big:not(:first-child) { margin-top: -12rem; } .story-item .post { margin-bottom: 0; } .filters { display: flex; padding: 4.8rem 0; } .filters .label { padding-right: 1.6rem; font-weight: 400; font-size: 1.4rem; font-family: museo-sans, sans-serif; } .filters select { height: 100%; background: none; font-weight: 900; margin-right: 2rem; font-size: 1.1rem; border-radius: 0px; -moz-appearance: none; border: 2px solid inherit; letter-spacing: 0.1rem; text-transform: uppercase; -webkit-appearance: none; font-family: museo-sans, sans-serif; background: url(../images/arrow-down-blue.svg) transparent calc(100% - 20px) center no-repeat; padding: 1.6rem 3.2rem; border-radius: 3rem; border: 2px solid var(--dark-blue); } .filters select::-ms-expand { display: none; } .filters select option { color: #000; font-weight: 900; font-size: 1.4rem; } /*------------------------------------*\ Home -> Part \*------------------------------------*/ #part .container { padding: 0rem 0 4.8rem 0rem; } #part .sub1 { left: 0px; width: 45%; bottom: 0px; overflow: hidden; padding-bottom: 31.8%; position: absolute; margin: 0 0 -28% 35%; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); } #part .sub1 img { top: 0px; left: 0px; position: absolute; } #part .sub2 { right: 0px; width: 51%; bottom: 0px; position: absolute; padding-bottom: 31.8%; margin: 0 -34% -28% 0; box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.2); } #part .sub2 .container { top: 0px; left: 0px; width: 100%; padding: 3rem 4rem 0; position: absolute; } #part .sub2 .input-container { height: 0px; width: 100%; position: relative; padding-bottom: 21%; } #part .sub2 input { top: 0px; left: 0px; width: 100%; height: 100%; border: none; color: #ffffff; border-radius: 0; font-weight: 500; background: none; font-size: 1.5rem; position: absolute; -webkit-appearance: none; font-family: museo-sans, sans-serif; border-bottom: 0.2rem #fff solid; } #part .sub2 input::-webkit-input-placeholder { color: #fff; opacity: 0.6; } #part .sub2 input::-moz-placeholder { color: #fff; opacity: 0.6; } #part .sub2 input:-ms-input-placeholder { color: #fff; opacity: 0.6; } #part .sub2 .title { color: #fff; display: block; font-weight: 900; font-size: 1.1rem; line-height: 1.4rem; letter-spacing: 0.1rem; text-transform: uppercase; font-family: museo-sans, sans-serif; } /*------------------------------------*\ Contactpage \*------------------------------------*/ #contact { background: #ebf8ff; } #contact strong { font-size: 1.8rem; font-weight: 600; line-height: 3.7rem; } #contact h3 { line-height: 2.6rem; } #contact h3, #contact a { color: #076188; } /*------------------------------------*\ Textpage \*------------------------------------*/ #title-bar { position: relative; background: #94c01f; padding-bottom: 1rem; } #title-bar .grid-pad { position: relative; padding-bottom: 9.5rem; } #title-bar .col-1-1 { top: 0px; left: 0px; width: 100%; height: 100%; display: flex; padding: 0 2rem; position: absolute; align-items: center; display: -webkit-flex; -webkit-align-items: center; justify-content: space-between; -webkit-justify-content: space-between; } #title-bar h1 { float: left; } #title-bar h1.small { width: 42%; } #title-bar h1.small.news { width: 60%; } .datefield { margin: 2rem 0; } .newsletter-container { position: relative; } #title-bar .stroke, .newsletter-container .stroke { left: 0px; width: 100%; bottom: 0rem; overflow: hidden; position: absolute; padding-bottom: 1rem; background: url(../images/stroke.svg) center center / auto 100% #52ae32 no-repeat; } #title-bar .stroke span, .newsletter-container .stroke span { width: 100%; right: -100%; height: 1rem; display: block; position: absolute; background-color: #13a538; } #anchors { width: 100%; overflow: hidden; } #anchors ul { float: left; margin: 0px; padding: 0px; list-style: none; } #anchors ul li { float: left; border-right: 1px solid #94c01f; } #anchors ul li a { display: block; color: #076188; font-size: 1rem; font-weight: 900; position: relative; text-decoration: none; letter-spacing: 0.1rem; padding: 2rem 3rem 2rem; text-transform: uppercase; font-family: museo-sans, sans-serif; } #anchors ul li a::after { content: ''; height: 0px; width: 200rem; left: -50rem; position: absolute; bottom: 0px; display: block; border-bottom: 1px solid #94c01f; } #anchors ul li:first-child a { padding-left: 0px; } .textpadding.small { padding: 0 2.5rem; } .textpadding { padding: 0 5.5rem; } .docpadding { padding: 0 4.5rem; } .textpadding .name { color: #076188; font-size: 2.2rem; font-weight: 900; line-height: 1.4; padding-bottom: .5rem; } .textpadding .quote { color: #94c01f; font-size: 2rem; font-weight: 300; line-height: initial; } .textpadding .text .quote.absolute { top: 50%; right: 0px; width: 15%; text-align: right; position: absolute; transform: translate(-10%,-50%); -webkit-transform: translate(-10%,-50%); } .profile { text-align: center; } .profile .social-links a:last-child { margin: 0px; } .profile figure { width: auto; overflow: hidden; margin-top: -7rem; border-radius: 50%; display: inline-block; padding: 14.5rem 0 0 14.5rem; } .profile figure img { top: 50%; left: 50%; width: auto; height: 100%; position: absolute; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); } .person { float: left; width: 100%; position: relative; } .person .info { width: 60%; left: 3.5rem; bottom: 2.5rem; position: absolute; } .person .info h3 { color: #ffffff; font-weight: 900; font-size: 2.8rem; line-height: initial; text-transform: initial; } .person .info .function { color: #fff; font-weight: 700; font-size: 1.3rem; line-height: 2.5rem; font-family: museo-sans, sans-serif; } .person .social-links { right: 2rem; bottom: 1rem; position: absolute; } .person .container { left: 0px; width: 100%; bottom: 0px; height: 40%; position: absolute; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0,0,0,0.8) 100%); } .betrokken { margin: 0px; padding: 0px; list-style: none; } .betrokken li { float: left; margin-right: 4rem; padding-bottom: 1rem; } .betrokken li a { color: #94c01f; font-size: 1.5rem; font-weight: 300; line-height: 2.4rem; } /*------------------------------------*\ Documents \*------------------------------------*/ .documents { display: flex; flex-wrap: wrap; display: -webkit-flex; -webkit-flex-wrap: wrap; } .documents .document { position: relative; background: #ebf8ff; margin-bottom: 2rem; padding: 1.5rem 2rem; } .documents .document a { top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; } .documents .document h3 { color: #076188; font-size: 1.1rem; line-height: 1.4rem; } .documents .document .date { font-size: 1.1rem; font-weight: 500; line-height: 1.4rem; padding: 0 1rem; font-family: museo-sans, sans-serif; } .documents .document .label { padding: 0.4rem; color: #ffffff; font-weight: 900; font-size: 0.8rem; background: #066188; line-height: 1.2rem; letter-spacing: 0.1rem; text-transform: uppercase; font-family: museo-sans, sans-serif; } /*------------------------------------*\ Organisatie \*------------------------------------*/ .organisatie { width: 100%; padding-bottom: 70%; background: url('../images/Regio-NO-Brabant-gemeenten.svg') center center /contain no-repeat; } .diagram-wrapper { padding: 2.5rem; background: #ebf8ff; } .diagram-wrapper .diagram { width: 100%; position: relative; padding-bottom: 80%; background: #C4EBFF; } .diagram-wrapper .diagram .diagram-pos { top: 1rem; left: 1rem; right: 1rem; bottom: 1rem; position: absolute; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center; } .diagram-wrapper .diagram a { color: #fff; z-index: 1; margin: 0.2rem; font-size: 1.1rem; font-weight: 900; display: inline-block; padding: 0.5rem 2rem; letter-spacing: .1rem; text-transform: uppercase; text-decoration: none; background: #3b7ab5; font-family: museo-sans, sans-serif; transition: cubic-bezier(0.44,1,0.44,1) all 0.6s; -webkit-transition: cubic-bezier(0.44,1,0.44,1) all 0.6s; } .diagram-wrapper .diagram a:hover, .diagram-wrapper .diagram a.active { background: #94c01f; } .diagram-wrapper .diagram .org-bot a:hover, .diagram-wrapper .diagram .org-bot a.active { background: #076188; color: #fff; } .diagram-wrapper .diagram .org1 { top: 2.4rem; } .diagram-wrapper .diagram .org2 { top: 6.5rem; } .diagram-wrapper .diagram .org3 { top: 10.6rem; } .diagram-wrapper .diagram .org4 { top: 14.7rem; } .diagram-wrapper .diagram .line { width: 75%; position: relative; background: #076188; margin: 0.8rem 0 0.6rem; } .diagram-wrapper .diagram .line.vert { top: 0px; width: 2px; left: 50%; margin-left: -1px; position: absolute; background: #076188; height: calc(100% - 1.4rem); } .diagram-wrapper .diagram .line.hor::after { content: ''; width: 2px; right: 0px; top: 0px; height: 1000%; display: block; position: absolute; background: #076188; } .diagram-wrapper .diagram .line.hor::before { content: ''; width: 2px; left: 0px; top: 0px; height: 1000%; display: block; position: absolute; background: #076188; } .diagram-wrapper .diagram span.line.center { width: 2px; top: auto; left: 49%; bottom: 3.9rem; height: 29%; display: block; position: absolute; background: #076188; } .diagram-wrapper .diagram .org { width: 100%; } .diagram-wrapper .diagram .org-top { position: relative; display: flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; display: -webkit-flex; align-items: center; -webkit-align-items: center; flex-direction: column; -webkit-flex-direction: column; } .diagram-wrapper .diagram .org-bot { display: flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; } .diagram-wrapper .diagram .org-bot a { width: calc(25% - 1rem); margin: 0.5rem; color: #076188; background: #fff; text-align: center; font-size: 1.3rem; line-height: 1.4rem; font-weight: 500; position: relative; text-transform: none; padding-bottom: 4rem; letter-spacing: 0; font-family: museo, serif; } .diagram-wrapper .diagram .org-bot a span { position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; display: flex; -webkit-display: flex; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; } .diagram-wrapper .diagram.right { position: relative; background: url('../images/Organisatie-rechts.svg') center left / contain no-repeat; } .diagram-wrapper .diagram.right::after { position: absolute; left: -1rem; top: 0px; width: 1.1rem; height: 81.5%; content: ''; display: block; background: #C4EBFF; } .diagram-wrapper .diagram.right a { color: #fff; left: 1.5rem; font-size: 1rem; width: 17%; padding: 0px; line-height: 1.2rem; background: none; bottom: 5rem; position: absolute; padding-bottom: 7rem; } .diagram-wrapper .diagram.right a span { position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; display: flex; -webkit-display: flex; justify-content: center; -webkit-justify-content: center; align-items: center; text-align: center; -webkit-align-items: center; } .diagram-wrapper .diagram.right a.org11 { left: 9.9rem; } .names ul { width: 100%; margin: 0px; padding: 0px; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } .names ul li { width: 100%; font-weight: 800; padding: 0 0rem; display: inline-block; font-family: museo-sans, sans-serif; } .names ul li strong { float: right; font-weight: 500; font-family: museo, serif; } .names { opacity: 0; height: 0px; overflow: hidden; visibility: hidden; transition: opacity ease 0.8s; -webkit-transition: opacity ease 0.8s; } .names.active { opacity: 1; height: auto; visibility: visible; } /*------------------------------------*\ Controls \*------------------------------------*/ .controls { display: flex; justify-content: center; align-items: center; align-content: center; margin: 2rem 0; } .controls .paging { display: flex; align-items: center; justify-content: center; align-content: center; } .controls .paging .btn { width: 5rem; height: 5rem; background-color: transparent; border: 2px solid var(--dark-blue); border-radius: 50%; text-align: center; color: var(--dark-blue); font-size: 1.6rem; font-weight: 600; padding: 0; margin: 0 .5rem; display: flex; text-align: center; align-items: center; justify-content: center; } .controls .paging .btn.no-border { border: none; } .controls .paging .btn.active { background-color: var(--dark-blue); color: #fff; border: 2px solid var(--dark-blue); } .contentblock-Button { padding: 2rem 0; } .contentblock-Button h3 { text-align: left; color: #076188; font-size: 1.8rem; line-height: 1.4; margin-bottom: .5rem; text-transform: inherit; } .contentblock-Button .button-align-left { display: flex; justify-content: flex-start; } .contentblock-Button .button-align-center { display: flex; justify-content: center; } .contentblock-Button .button-align-right { display: flex; justify-content: flex-end; } .contentblock-Quote { padding-top: 5rem; } .contentblock-contactPerson ~ .contentblock-contactPerson { padding-top: 0; } .contentblock-contactPerson { padding: 5rem 0; } .contentblock-contactPersonsandPartners .picture .text { text-align: center; } .contentblock-contactPersonsandPartners .picture .text ul { list-style: none; padding: 0; margin: 0; } .contentblock-contactPersonsandPartners .picture .text a { margin-right: 1rem; margin-top: .5rem; } .contentblock-contactPersonsandPartners .picture { margin: 1.5rem 0; } .contentblock-contactPersonsandPartners .text-wrapper .partner-title { color: #076188; font-weight: 300; font-size: 1.6rem; text-decoration: none; } .contentblock-contactPersonsandPartners .picture .image-wrapper .text { min-height: 6.4rem; } .contentblock-contactPersonsandPartners .picture .image-wrapper .text .bold-title { display: block; line-height: 1.2; margin-top: 1rem; } .contentblock-contactPerson .text .title { padding: 1rem 0; margin: 0px; color: #076188; font-size: 2.4rem; line-height: 2.9rem; font-weight: 900; text-transform: none; } .contentblock-contactPerson p { margin: 0 0 2.5rem 0; } .contentblock-contactPerson figure { background-repeat: no-repeat; } .contentblock-contactPerson .info-block span { display: block; } .contentblock-contactPerson .info-block .bold-title { color: #94c01f; text-transform: uppercase; font-weight: 900; padding: .5rem 0; } .contentblock-contactPerson .info-block .image-wrapper { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; } .contentblock-contactPerson .info-block .bg-image { position: relative; background-repeat: no-repeat; background-size: cover; background-position: center center !important; padding-bottom: 100%; } .contentblock-contactPerson .info-block .bg-image img { object-fit: cover; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0; } .contentblock-contactPerson .info-block .info { margin-top: 1rem; } .contentblock-contactPerson .info-block ul { list-style-type: none; margin: 0; padding: 0; } .contentblock-contactPerson .info-block ul li { padding: .75rem 0; } .contentblock-contactPerson .info-block ul li a { color: unset; text-decoration: unset; } .contentblock-contactPerson .info-block ul li i { font-weight: 900; font-style: normal; } .contentblock-contactPerson .info-block ul li i { padding-right: 1rem; } .contentblock-Livestream .video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; margin: 0 0 25px 0; } .contentblock-Livestream .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .contentblock-Livestream .chat-wrapper { position: relative; padding-bottom: 35%; height: 0; margin: 0 0 25px 0; } .contentblock-Livestream .chat-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; border: none; } .contentblock-Livestream .livestream-intro .text { font-size: 1.6rem; } .contentblock-Livestream .livestream-contacts .flex-container { margin-bottom: 2rem; display: flex; align-items: center; } .contentblock-Livestream .livestream-contacts .flex-container .bold-title { font-size: 2rem; font-weight: bold; } .contentblock-Livestream .livestream-contacts .flex-container .image-wrapper { border-radius: 50%; overflow: hidden; } .contentblock-Livestream .livestream-contacts .inner { margin-left: 3rem; } .contentblock-Livestream .livestream-contacts h2 { margin-bottom: 1rem; } .contentblock-Livestream .livestream-contacts h4 { margin-bottom: 1rem; font-size: 2rem; } .contentblock-Livestream .livestream-contacts .line { display: block; width: 100%; background: #eaeaea; margin: 2rem 0; height: 1px; } .contentblock-Livestream .livestream-contacts .flex-container .info .inner-info { margin-left: 1rem; } .contentblock-Livestream .livestream-contacts .flex-container .info ul { list-style: none; padding: 0; margin: 0; } .contentblock-Livestream .livestream-contacts .flex-container .info ul li a { color: #94c01f; } #nieuws .swiper-wrapper { flex-wrap: wrap; } #nieuws .swiper-container .swiper-slide { margin-right: 0; background: none; } #nieuws .swiper-container .slide { margin-bottom: 2rem; } #nieuws .swiper-container .slide .container { background: white; } @media screen and (max-width: 1480px) { /*.logo { width: 13rem; margin: 10px 2% 10px 2%; }*/ .mainnav ul li a { padding: 0 1.8rem; font-size: 1.2rem; } .mainmenu .search, .lang-switch ul li { padding: 0 1.8rem; } } @media only screen and (max-width : 1280px) /* Als je de width aanpast pas ook de media query aan in simplegrid */ { html { font-size: .77vw; line-height: 1.6vw; } } /*------------------------------------*\ MD MediaQuery \*------------------------------------*/ @media only screen and (max-width : 1024px) /* Als je de width aanpast pas ook de media query aan in simplegrid */ { html { font-size: .9vw; line-height: 1.6vw; } /*.logo { width: 11rem; margin: 10px 2% 10px 2%; margin-right: auto; }*/ .mainnav ul li a { padding: 0 1.4rem; font-size: 1rem; } .mainmenu .search, .lang-switch ul li { padding: 0 1.4rem; } .en-page { width: 2%; } .submenu a:hover::after { width: 0%; } #projecten a:hover .container p { transform: translateY(0rem); -webkit-transform: translateY(0rem); } #projecten a:hover .container h4 { transform: translateY(0rem); -webkit-transform: translateY(0rem); } .btn:hover span { background: none !important; } .btn:hover span::after { color: #fff !important; } .btn-video:hover .btn.white span::after { color: #94c01f; } .btn-video:hover .btn.white span { background: #fff; } .btn.blue:hover { background: #076188; } .btn.blue:hover span { background: none !important; } .btn.blue:hover span::after { color: #fff !important; } .btn.dblue:hover span { background: none !important; } .btn.dblue:hover span::after { color: #076188 !important; } .btn.green:hover span { background: none; } .btn.green:hover span::after { color: #94c01f !important; } #part .sub1 { width: 60%; overflow: hidden; position: relative; margin: -20% 0 0 20%; } #part .sub2 { width: 60%; position: relative; padding-bottom: 31.8%; margin: 1rem 0 0 30%; } } /*------------------------------------*\ SM MediaQuery \*------------------------------------*/ @media only screen and (max-width : 768px) /* Als je de width aanpast pas ook de media query aan in simplegrid */ { html { font-size: .9vw; line-height: 1.6vw; } } /*------------------------------------*\ XS MediaQuery \*------------------------------------*/ @media screen and (max-width : 480px) /* Als je de width aanpast pas ook de media query aan in simplegrid */ { html { font-size: 2.4vw; line-height: 2.4vw; } aside.socials { display: none; } /*.logo { height: unset; }*/ .header-text h1 { width: 100%; font-size: 3rem; line-height: 3.4rem; } .header-text h2 { color: #fff; font-weight: 700; line-height: 2.4rem; font-size: 2rem; margin-top: 1rem; } #home-logo-dfw { height: 8rem; width: 8rem; top: 1rem; } #home-logo-bkw { height: 100px; width: 300px; top: 1rem; } .btn.botright { position: relative; right: 0px; } .docpadding { padding: 0 0rem; } .btn-video .btn-wrapper .btn { padding: 0.4rem 4rem 0.4rem; } nav { top: auto; left: auto; position: relative; } .mainmenu .search { width: 14%; } .more { width: 38%; padding: 0 2rem; display: flex; } .nav-trigger::after { content: 'Menu'; font-size: 1.6rem; margin-left: -7.5rem; } .textpadding .text .quote.absolute { width: 100%; top: auto; right: auto; transform: none; text-align: center; position: relative; -webkit-transform: none; } .textpadding, .textpadding.small { padding: 0px 1rem; } .intro { font-size: 2rem; line-height: 2.8rem; } h3.small { font-size: 1.4rem; line-height: 2.4rem; } #part .sub1 { width: 100%; float: left; left: initial; margin: 0 0 0 0; bottom: initial; overflow: hidden; position: relative; padding-bottom: 50%; } .en-page { width: 12%; padding-right: 1.5rem; padding-left: 0; font-size: 1.6rem; position: absolute; right: -.5rem; } #part .sub2 { width: 100%; float: left; margin: 0px; margin-top: 2rem; right: initial; bottom: initial; position: relative; padding-bottom: 50%; } #part .sub2 .container { padding: 1.5rem; } #part .container { padding: 3rem 0 4rem 0rem; } #anchors ul li { width: 100%; border-right: 0px; } #anchors ul li a { width: 100%; text-align: center; font-size: 1.3rem; line-height: initial; text-transform: uppercase; font-family: museo-sans, sans-serif; } #anchors ul li:first-child a { padding-left: 2rem; } #anchors { border-bottom: 0px; } #title-bar .stroke { background: url(../images/stroke.svg) center right / cover #13a538 no-repeat; } #title-bar .stroke span { display: none; } .mainnav { display: none; } .flex-center { display: block; } .swiper-container .swiper-slide, .swiper-container .swiper-slide.highlight { width: 100%; } .submenu { padding: 0; } .submenu a { margin: 0; } .submenu .big a { margin: 0.8rem 0; } .submenu .container { display: block; } .submenu.active .container img { max-width: 5rem; } .submenu .col-1-4.big { padding: 1rem 0; border-bottom: 1px solid #b2d9f6; } .submenu .col-1-4.big a { display: flex; align-items: center; flex-direction: row; } .submenu .col-1-4.big a img { margin-left: 1.5rem; } .submenu .col-1-4 { border-left: 0px; border-bottom: 1px solid #b2d9f6; } .submenu .col-1-4 ul li { width: 100%; float: left; } .submenu .container ul, .submenu .container .lang { padding: 0 2rem; } .submenu .container .lang { padding: 3rem 1rem; border-bottom: 0px; } .submenu .container .lang li { width: 50%; } .submenu .container .lang a { font-size: 1.6rem; } .mobile-sub li a { font-size: 1.6rem; } /*#ervaringen .big .text h4 { font-size: 2.2rem; line-height: 2.4rem; }*/ #projecten .big .text h4 { font-size: 2.2rem; line-height: 2.4rem; } .submenu .xs-no-border { border: none; } #nominatie { position: relative; z-index: 2; margin-bottom: 60px; display: block; top: 0 !important; left: auto; } #nominatie .nominatie-block { max-width: 100%; } h1 { font-size: 4rem; line-height: 4.5rem; } h5 { font-size: 2rem; line-height: 2.5rem; } .profile figure { margin-top: 3rem; } .exp-item, .exp-item.big { width: 100%; padding-bottom: 100%; } /*.story-item, .story-item.big { width: 100%; padding-bottom: 100%; }*/ #title-bar { padding: 3rem 0 4rem; } #title-bar .col-1-1 { width: 100%; top: auto; height: auto; left: auto; display: block; position: relative; } #title-bar .grid-pad { position: relative; padding-bottom: 0px; } #title-bar h1.small { width: 100%; margin-bottom: 2rem; text-align: center; } .btn.zoeken { width: 100%; text-align: left; } .diagram-wrapper { padding: 0px; } .diagram-wrapper .diagram.right a { color: #fff; left: 1rem; font-size: 1rem; width: 17%; padding: 0px; line-height: 1.2rem; background: none; bottom: 4.5rem; position: absolute; padding-bottom: 3rem; } .diagram-wrapper .diagram.right a span { position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; display: flex; -webkit-display: flex; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; } .names ul { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } .diagram-wrapper .diagram.right a.org11 { left: 7rem; } .flex-between { display: block; } #graph .partners { display: block; } #graph .partners article { height: 10rem; } #graph .partner { padding: 2rem 2rem; } .input-container input { margin: 5% 0 5%; padding: 10px 20px; width: 100%; } #newsletter { padding: 0 0%; } .filter-container { right: auto; top: auto; margin-top: 20px; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; position: relative; } .alle-items { right: unset; top: unset; transform: translateY(0); -webkit-transform: translateY(0); position: relative; } /* Restyling */ .btn.social { margin: 0 1rem 0 1rem; } #nieuws .col-6-12.overlap:not(:first-child) { margin-top: 0; } .mob-flex-center { display: flex; justify-content: center; } .align-center { text-align: center; } .push-none-center { text-align: center; display: block; float: none; } /*Restyling*/ .newsletter-block { margin-bottom: 2rem; } .contentblock-Livestream .livestream-contacts .inner { margin-left: unset; margin-top: 2rem; } } body .cc-link { padding: 0; } .styledform { float: left; width: 100%; position: relative; } .styledform.clear { clear: both; } .styledform .w100 { width: 100%; float: left; position: relative; } .styledform .form-row { margin: 2.5rem 0; position: relative; transition: ease all 0.4s; -webkit-transition: ease all 0.4s; } .styledform .form-row .field-validation-valid { display: none; } .styledform .form-row .field-validation-error { font-size: 1.2rem; color: #CC3333; display: block; } .styledform .form-row label, .styledform .form-row-check label { left: 0; top: 50%; width: 100%; display: block; color: #076188; font-weight: 900; font-size: 1.1rem; position: absolute; letter-spacing: 0.1rem; text-transform: uppercase; transition: ease all 0.4s; transform: translateY(-50%); -webkit-transition: ease all 0.4s; -webkit-transform: translateY(-50%); font-family: museo-sans, sans-serif; } .styledform .form-row-check label { position: relative; transform: translateY(-0%); -webkit-transform: translateY(-0%); } .styledform .form-row.active { margin-top: 4rem; } .styledform .form-row.active label { top: -1.5rem; } .styledform .form-row input[type="text"], .styledform .form-row input[type="date"], .styledform .form-row input[type="email"], .styledform .form-row input[type="password"], .styledform .form-row select { width: 100%; border: none; -webkit-appearance: none; border-radius: 0; font-size: 1.8rem; padding: 1.2rem 0; transition: ease all 0.4s; -webkit-transition: ease all 0.4s; border-bottom: 0.2rem solid #b6d1dc; } .styledform .form-row input[type="text"].input-validation-error, .styledform .form-row input[type="date"].input-validation-error, .styledform .form-row input[type="email"].input-validation-error, .styledform .form-row input[type="password"].input-validation-error { background: #ffe7e7; } .styledform .form-row textarea { width: 100%; height: 4.8rem; padding: 1.2rem 0; font-size: 1.8rem; outline: none; font-size: 1.8rem; overflow: hidden; border: none; resize: none; transition: ease all 0.4s; -webkit-transition: ease all 0.4s; border-bottom: 0.2rem solid #b6d1dc; -webkit-appearance: none; border-radius: 0; } .styledform .form-row input:focus, .styledform .form-row textarea:focus { background: #ebf8ff; padding-left: 1.5rem; } .styledform .form-row textarea.input-validation-error { background: #ffe7e7; } .styledform .form-row-check label { line-height: initial; padding: 1rem 0; } .styledform .form-row-check input[type="radio"] { display: none; } .styledform .form-row h3 label, .styledform .form-row-check h3 label{ margin: 0px; color: #94c01f; font-weight: 900; font-size: 1.6rem; line-height: 2.0rem; text-transform: uppercase; font-family: museo-sans, sans-serif; } .styledform .form-row-check input[type="radio"] + label { position: relative; padding-left: 3rem; cursor: pointer; font-weight:500; font-size:1.4rem; line-height:2rem; text-transform:none; font-family: museo, serif; } .styledform .form-row-check input[type="radio"] + label::before { top: 0.8rem; display: block; font-size: 1.4rem; content: ''; font-weight: 700; font-family: fontawesome; height: 0px; width:0px; padding-bottom:1.8rem; position: absolute; left: 0px; border: 2px solid #076188; border-radius: 50%; text-align: center; line-height:initial; background-color: #fff; color: #fff; transition: all ease 0.3s; -webkit-transition: all ease 0.3s; padding-left: 1.8rem; } .styledform .form-row-check input[type="radio"]:checked + label::after { background: #076188; display: block; left: 0.6rem; top: 1.4rem; content: ""; padding:1rem 1rem 0 0; position: absolute; border-radius: 50%; } .styledform .form-row-check input[type="checkbox"]{ display:none; } .styledform .form-row-check input[type="checkbox"] + label { position: relative; padding-left: 3rem; cursor: pointer; font-weight:500; font-size:1.4rem; line-height:2rem; text-transform:none; font-family: museo, serif; } .styledform .form-row-check input[type="checkbox"] + label::before { top: 0.8rem; display: block; font-size: 1.4rem; content: ''; font-weight: 700; font-family: fontawesome; height: 0px; width:0px; padding-bottom:1.8rem; position: absolute; left: 0px; border: 2px solid #076188; text-align: center; line-height:initial; background-color: #fff; color: #fff; transition: all ease 0.3s; -webkit-transition: all ease 0.3s; padding-left: 1.8rem; } .styledform .form-row-check input[type="checkbox"]:checked + label::after { background: transparent; display: block; left: 0.4rem; top: 0.9rem; content: '\f00c'; font-family:fontawesome; color:#076188; position: absolute; } /*! * Font Awesome Free 5.12.0 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) */ .fa, .fas, .far, .fal, .fad, .fab { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; } .fa-lg { font-size: 1.33333em; line-height: 0.75em; vertical-align: -.0667em; } .fa-xs { font-size: .75em; } .fa-sm { font-size: .875em; } .fa-1x { font-size: 1em; } .fa-2x { font-size: 2em; } .fa-3x { font-size: 3em; } .fa-4x { font-size: 4em; } .fa-5x { font-size: 5em; } .fa-6x { font-size: 6em; } .fa-7x { font-size: 7em; } .fa-8x { font-size: 8em; } .fa-9x { font-size: 9em; } .fa-10x { font-size: 10em; } .fa-fw { text-align: center; width: 1.25em; } .fa-ul { list-style-type: none; margin-left: 2.5em; padding-left: 0; } .fa-ul > li { position: relative; } .fa-li { left: -2em; position: absolute; text-align: center; width: 2em; line-height: inherit; } .fa-border { border: solid 0.08em #eee; border-radius: .1em; padding: .2em .25em .15em; } .fa-pull-left { float: left; } .fa-pull-right { float: right; } .fa.fa-pull-left, .fas.fa-pull-left, .far.fa-pull-left, .fal.fa-pull-left, .fab.fa-pull-left { margin-right: .3em; } .fa.fa-pull-right, .fas.fa-pull-right, .far.fa-pull-right, .fal.fa-pull-right, .fab.fa-pull-right { margin-left: .3em; } .fa-spin { -webkit-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear; } .fa-pulse { -webkit-animation: fa-spin 1s infinite steps(8); animation: fa-spin 1s infinite steps(8); } @-webkit-keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .fa-rotate-90 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .fa-rotate-180 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .fa-rotate-270 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; -webkit-transform: rotate(270deg); transform: rotate(270deg); } .fa-flip-horizontal { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)"; -webkit-transform: scale(-1, 1); transform: scale(-1, 1); } .fa-flip-vertical { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"; -webkit-transform: scale(1, -1); transform: scale(1, -1); } .fa-flip-both, .fa-flip-horizontal.fa-flip-vertical { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"; -webkit-transform: scale(-1, -1); transform: scale(-1, -1); } :root .fa-rotate-90, :root .fa-rotate-180, :root .fa-rotate-270, :root .fa-flip-horizontal, :root .fa-flip-vertical, :root .fa-flip-both { -webkit-filter: none; filter: none; } .fa-stack { display: inline-block; height: 2em; line-height: 2em; position: relative; vertical-align: middle; width: 2.5em; } .fa-stack-1x, .fa-stack-2x { left: 0; position: absolute; text-align: center; width: 100%; } .fa-stack-1x { line-height: inherit; } .fa-stack-2x { font-size: 2em; } .fa-inverse { color: #fff; } /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */ .fa-500px:before { content: "\f26e"; } .fa-accessible-icon:before { content: "\f368"; } .fa-accusoft:before { content: "\f369"; } .fa-acquisitions-incorporated:before { content: "\f6af"; } .fa-ad:before { content: "\f641"; } .fa-address-book:before { content: "\f2b9"; } .fa-address-card:before { content: "\f2bb"; } .fa-adjust:before { content: "\f042"; } .fa-adn:before { content: "\f170"; } .fa-adobe:before { content: "\f778"; } .fa-adversal:before { content: "\f36a"; } .fa-affiliatetheme:before { content: "\f36b"; } .fa-air-freshener:before { content: "\f5d0"; } .fa-airbnb:before { content: "\f834"; } .fa-algolia:before { content: "\f36c"; } .fa-align-center:before { content: "\f037"; } .fa-align-justify:before { content: "\f039"; } .fa-align-left:before { content: "\f036"; } .fa-align-right:before { content: "\f038"; } .fa-alipay:before { content: "\f642"; } .fa-allergies:before { content: "\f461"; } .fa-amazon:before { content: "\f270"; } .fa-amazon-pay:before { content: "\f42c"; } .fa-ambulance:before { content: "\f0f9"; } .fa-american-sign-language-interpreting:before { content: "\f2a3"; } .fa-amilia:before { content: "\f36d"; } .fa-anchor:before { content: "\f13d"; } .fa-android:before { content: "\f17b"; } .fa-angellist:before { content: "\f209"; } .fa-angle-double-down:before { content: "\f103"; } .fa-angle-double-left:before { content: "\f100"; } .fa-angle-double-right:before { content: "\f101"; } .fa-angle-double-up:before { content: "\f102"; } .fa-angle-down:before { content: "\f107"; } .fa-angle-left:before { content: "\f104"; } .fa-angle-right:before { content: "\f105"; } .fa-angle-up:before { content: "\f106"; } .fa-angry:before { content: "\f556"; } .fa-angrycreative:before { content: "\f36e"; } .fa-angular:before { content: "\f420"; } .fa-ankh:before { content: "\f644"; } .fa-app-store:before { content: "\f36f"; } .fa-app-store-ios:before { content: "\f370"; } .fa-apper:before { content: "\f371"; } .fa-apple:before { content: "\f179"; } .fa-apple-alt:before { content: "\f5d1"; } .fa-apple-pay:before { content: "\f415"; } .fa-archive:before { content: "\f187"; } .fa-archway:before { content: "\f557"; } .fa-arrow-alt-circle-down:before { content: "\f358"; } .fa-arrow-alt-circle-left:before { content: "\f359"; } .fa-arrow-alt-circle-right:before { content: "\f35a"; } .fa-arrow-alt-circle-up:before { content: "\f35b"; } .fa-arrow-circle-down:before { content: "\f0ab"; } .fa-arrow-circle-left:before { content: "\f0a8"; } .fa-arrow-circle-right:before { content: "\f0a9"; } .fa-arrow-circle-up:before { content: "\f0aa"; } .fa-arrow-down:before { content: "\f063"; } .fa-arrow-left:before { content: "\f060"; } .fa-arrow-right:before { content: "\f061"; } .fa-arrow-up:before { content: "\f062"; } .fa-arrows-alt:before { content: "\f0b2"; } .fa-arrows-alt-h:before { content: "\f337"; } .fa-arrows-alt-v:before { content: "\f338"; } .fa-artstation:before { content: "\f77a"; } .fa-assistive-listening-systems:before { content: "\f2a2"; } .fa-asterisk:before { content: "\f069"; } .fa-asymmetrik:before { content: "\f372"; } .fa-at:before { content: "\f1fa"; } .fa-atlas:before { content: "\f558"; } .fa-atlassian:before { content: "\f77b"; } .fa-atom:before { content: "\f5d2"; } .fa-audible:before { content: "\f373"; } .fa-audio-description:before { content: "\f29e"; } .fa-autoprefixer:before { content: "\f41c"; } .fa-avianex:before { content: "\f374"; } .fa-aviato:before { content: "\f421"; } .fa-award:before { content: "\f559"; } .fa-aws:before { content: "\f375"; } .fa-baby:before { content: "\f77c"; } .fa-baby-carriage:before { content: "\f77d"; } .fa-backspace:before { content: "\f55a"; } .fa-backward:before { content: "\f04a"; } .fa-bacon:before { content: "\f7e5"; } .fa-bahai:before { content: "\f666"; } .fa-balance-scale:before { content: "\f24e"; } .fa-balance-scale-left:before { content: "\f515"; } .fa-balance-scale-right:before { content: "\f516"; } .fa-ban:before { content: "\f05e"; } .fa-band-aid:before { content: "\f462"; } .fa-bandcamp:before { content: "\f2d5"; } .fa-barcode:before { content: "\f02a"; } .fa-bars:before { content: "\f0c9"; } .fa-baseball-ball:before { content: "\f433"; } .fa-basketball-ball:before { content: "\f434"; } .fa-bath:before { content: "\f2cd"; } .fa-battery-empty:before { content: "\f244"; } .fa-battery-full:before { content: "\f240"; } .fa-battery-half:before { content: "\f242"; } .fa-battery-quarter:before { content: "\f243"; } .fa-battery-three-quarters:before { content: "\f241"; } .fa-battle-net:before { content: "\f835"; } .fa-bed:before { content: "\f236"; } .fa-beer:before { content: "\f0fc"; } .fa-behance:before { content: "\f1b4"; } .fa-behance-square:before { content: "\f1b5"; } .fa-bell:before { content: "\f0f3"; } .fa-bell-slash:before { content: "\f1f6"; } .fa-bezier-curve:before { content: "\f55b"; } .fa-bible:before { content: "\f647"; } .fa-bicycle:before { content: "\f206"; } .fa-biking:before { content: "\f84a"; } .fa-bimobject:before { content: "\f378"; } .fa-binoculars:before { content: "\f1e5"; } .fa-biohazard:before { content: "\f780"; } .fa-birthday-cake:before { content: "\f1fd"; } .fa-bitbucket:before { content: "\f171"; } .fa-bitcoin:before { content: "\f379"; } .fa-bity:before { content: "\f37a"; } .fa-black-tie:before { content: "\f27e"; } .fa-blackberry:before { content: "\f37b"; } .fa-blender:before { content: "\f517"; } .fa-blender-phone:before { content: "\f6b6"; } .fa-blind:before { content: "\f29d"; } .fa-blog:before { content: "\f781"; } .fa-blogger:before { content: "\f37c"; } .fa-blogger-b:before { content: "\f37d"; } .fa-bluetooth:before { content: "\f293"; } .fa-bluetooth-b:before { content: "\f294"; } .fa-bold:before { content: "\f032"; } .fa-bolt:before { content: "\f0e7"; } .fa-bomb:before { content: "\f1e2"; } .fa-bone:before { content: "\f5d7"; } .fa-bong:before { content: "\f55c"; } .fa-book:before { content: "\f02d"; } .fa-book-dead:before { content: "\f6b7"; } .fa-book-medical:before { content: "\f7e6"; } .fa-book-open:before { content: "\f518"; } .fa-book-reader:before { content: "\f5da"; } .fa-bookmark:before { content: "\f02e"; } .fa-bootstrap:before { content: "\f836"; } .fa-border-all:before { content: "\f84c"; } .fa-border-none:before { content: "\f850"; } .fa-border-style:before { content: "\f853"; } .fa-bowling-ball:before { content: "\f436"; } .fa-box:before { content: "\f466"; } .fa-box-open:before { content: "\f49e"; } .fa-boxes:before { content: "\f468"; } .fa-braille:before { content: "\f2a1"; } .fa-brain:before { content: "\f5dc"; } .fa-bread-slice:before { content: "\f7ec"; } .fa-briefcase:before { content: "\f0b1"; } .fa-briefcase-medical:before { content: "\f469"; } .fa-broadcast-tower:before { content: "\f519"; } .fa-broom:before { content: "\f51a"; } .fa-brush:before { content: "\f55d"; } .fa-btc:before { content: "\f15a"; } .fa-buffer:before { content: "\f837"; } .fa-bug:before { content: "\f188"; } .fa-building:before { content: "\f1ad"; } .fa-bullhorn:before { content: "\f0a1"; } .fa-bullseye:before { content: "\f140"; } .fa-burn:before { content: "\f46a"; } .fa-buromobelexperte:before { content: "\f37f"; } .fa-bus:before { content: "\f207"; } .fa-bus-alt:before { content: "\f55e"; } .fa-business-time:before { content: "\f64a"; } .fa-buy-n-large:before { content: "\f8a6"; } .fa-buysellads:before { content: "\f20d"; } .fa-calculator:before { content: "\f1ec"; } .fa-calendar:before { content: "\f133"; } .fa-calendar-alt:before { content: "\f073"; } .fa-calendar-check:before { content: "\f274"; } .fa-calendar-day:before { content: "\f783"; } .fa-calendar-minus:before { content: "\f272"; } .fa-calendar-plus:before { content: "\f271"; } .fa-calendar-times:before { content: "\f273"; } .fa-calendar-week:before { content: "\f784"; } .fa-camera:before { content: "\f030"; } .fa-camera-retro:before { content: "\f083"; } .fa-campground:before { content: "\f6bb"; } .fa-canadian-maple-leaf:before { content: "\f785"; } .fa-candy-cane:before { content: "\f786"; } .fa-cannabis:before { content: "\f55f"; } .fa-capsules:before { content: "\f46b"; } .fa-car:before { content: "\f1b9"; } .fa-car-alt:before { content: "\f5de"; } .fa-car-battery:before { content: "\f5df"; } .fa-car-crash:before { content: "\f5e1"; } .fa-car-side:before { content: "\f5e4"; } .fa-caravan:before { content: "\f8ff"; } .fa-caret-down:before { content: "\f0d7"; } .fa-caret-left:before { content: "\f0d9"; } .fa-caret-right:before { content: "\f0da"; } .fa-caret-square-down:before { content: "\f150"; } .fa-caret-square-left:before { content: "\f191"; } .fa-caret-square-right:before { content: "\f152"; } .fa-caret-square-up:before { content: "\f151"; } .fa-caret-up:before { content: "\f0d8"; } .fa-carrot:before { content: "\f787"; } .fa-cart-arrow-down:before { content: "\f218"; } .fa-cart-plus:before { content: "\f217"; } .fa-cash-register:before { content: "\f788"; } .fa-cat:before { content: "\f6be"; } .fa-cc-amazon-pay:before { content: "\f42d"; } .fa-cc-amex:before { content: "\f1f3"; } .fa-cc-apple-pay:before { content: "\f416"; } .fa-cc-diners-club:before { content: "\f24c"; } .fa-cc-discover:before { content: "\f1f2"; } .fa-cc-jcb:before { content: "\f24b"; } .fa-cc-mastercard:before { content: "\f1f1"; } .fa-cc-paypal:before { content: "\f1f4"; } .fa-cc-stripe:before { content: "\f1f5"; } .fa-cc-visa:before { content: "\f1f0"; } .fa-centercode:before { content: "\f380"; } .fa-centos:before { content: "\f789"; } .fa-certificate:before { content: "\f0a3"; } .fa-chair:before { content: "\f6c0"; } .fa-chalkboard:before { content: "\f51b"; } .fa-chalkboard-teacher:before { content: "\f51c"; } .fa-charging-station:before { content: "\f5e7"; } .fa-chart-area:before { content: "\f1fe"; } .fa-chart-bar:before { content: "\f080"; } .fa-chart-line:before { content: "\f201"; } .fa-chart-pie:before { content: "\f200"; } .fa-check:before { content: "\f00c"; } .fa-check-circle:before { content: "\f058"; } .fa-check-double:before { content: "\f560"; } .fa-check-square:before { content: "\f14a"; } .fa-cheese:before { content: "\f7ef"; } .fa-chess:before { content: "\f439"; } .fa-chess-bishop:before { content: "\f43a"; } .fa-chess-board:before { content: "\f43c"; } .fa-chess-king:before { content: "\f43f"; } .fa-chess-knight:before { content: "\f441"; } .fa-chess-pawn:before { content: "\f443"; } .fa-chess-queen:before { content: "\f445"; } .fa-chess-rook:before { content: "\f447"; } .fa-chevron-circle-down:before { content: "\f13a"; } .fa-chevron-circle-left:before { content: "\f137"; } .fa-chevron-circle-right:before { content: "\f138"; } .fa-chevron-circle-up:before { content: "\f139"; } .fa-chevron-down:before { content: "\f078"; } .fa-chevron-left:before { content: "\f053"; } .fa-chevron-right:before { content: "\f054"; } .fa-chevron-up:before { content: "\f077"; } .fa-child:before { content: "\f1ae"; } .fa-chrome:before { content: "\f268"; } .fa-chromecast:before { content: "\f838"; } .fa-church:before { content: "\f51d"; } .fa-circle:before { content: "\f111"; } .fa-circle-notch:before { content: "\f1ce"; } .fa-city:before { content: "\f64f"; } .fa-clinic-medical:before { content: "\f7f2"; } .fa-clipboard:before { content: "\f328"; } .fa-clipboard-check:before { content: "\f46c"; } .fa-clipboard-list:before { content: "\f46d"; } .fa-clock:before { content: "\f017"; } .fa-clone:before { content: "\f24d"; } .fa-closed-captioning:before { content: "\f20a"; } .fa-cloud:before { content: "\f0c2"; } .fa-cloud-download-alt:before { content: "\f381"; } .fa-cloud-meatball:before { content: "\f73b"; } .fa-cloud-moon:before { content: "\f6c3"; } .fa-cloud-moon-rain:before { content: "\f73c"; } .fa-cloud-rain:before { content: "\f73d"; } .fa-cloud-showers-heavy:before { content: "\f740"; } .fa-cloud-sun:before { content: "\f6c4"; } .fa-cloud-sun-rain:before { content: "\f743"; } .fa-cloud-upload-alt:before { content: "\f382"; } .fa-cloudscale:before { content: "\f383"; } .fa-cloudsmith:before { content: "\f384"; } .fa-cloudversify:before { content: "\f385"; } .fa-cocktail:before { content: "\f561"; } .fa-code:before { content: "\f121"; } .fa-code-branch:before { content: "\f126"; } .fa-codepen:before { content: "\f1cb"; } .fa-codiepie:before { content: "\f284"; } .fa-coffee:before { content: "\f0f4"; } .fa-cog:before { content: "\f013"; } .fa-cogs:before { content: "\f085"; } .fa-coins:before { content: "\f51e"; } .fa-columns:before { content: "\f0db"; } .fa-comment:before { content: "\f075"; } .fa-comment-alt:before { content: "\f27a"; } .fa-comment-dollar:before { content: "\f651"; } .fa-comment-dots:before { content: "\f4ad"; } .fa-comment-medical:before { content: "\f7f5"; } .fa-comment-slash:before { content: "\f4b3"; } .fa-comments:before { content: "\f086"; } .fa-comments-dollar:before { content: "\f653"; } .fa-compact-disc:before { content: "\f51f"; } .fa-compass:before { content: "\f14e"; } .fa-compress:before { content: "\f066"; } .fa-compress-alt:before { content: "\f422"; } .fa-compress-arrows-alt:before { content: "\f78c"; } .fa-concierge-bell:before { content: "\f562"; } .fa-confluence:before { content: "\f78d"; } .fa-connectdevelop:before { content: "\f20e"; } .fa-contao:before { content: "\f26d"; } .fa-cookie:before { content: "\f563"; } .fa-cookie-bite:before { content: "\f564"; } .fa-copy:before { content: "\f0c5"; } .fa-copyright:before { content: "\f1f9"; } .fa-cotton-bureau:before { content: "\f89e"; } .fa-couch:before { content: "\f4b8"; } .fa-cpanel:before { content: "\f388"; } .fa-creative-commons:before { content: "\f25e"; } .fa-creative-commons-by:before { content: "\f4e7"; } .fa-creative-commons-nc:before { content: "\f4e8"; } .fa-creative-commons-nc-eu:before { content: "\f4e9"; } .fa-creative-commons-nc-jp:before { content: "\f4ea"; } .fa-creative-commons-nd:before { content: "\f4eb"; } .fa-creative-commons-pd:before { content: "\f4ec"; } .fa-creative-commons-pd-alt:before { content: "\f4ed"; } .fa-creative-commons-remix:before { content: "\f4ee"; } .fa-creative-commons-sa:before { content: "\f4ef"; } .fa-creative-commons-sampling:before { content: "\f4f0"; } .fa-creative-commons-sampling-plus:before { content: "\f4f1"; } .fa-creative-commons-share:before { content: "\f4f2"; } .fa-creative-commons-zero:before { content: "\f4f3"; } .fa-credit-card:before { content: "\f09d"; } .fa-critical-role:before { content: "\f6c9"; } .fa-crop:before { content: "\f125"; } .fa-crop-alt:before { content: "\f565"; } .fa-cross:before { content: "\f654"; } .fa-crosshairs:before { content: "\f05b"; } .fa-crow:before { content: "\f520"; } .fa-crown:before { content: "\f521"; } .fa-crutch:before { content: "\f7f7"; } .fa-css3:before { content: "\f13c"; } .fa-css3-alt:before { content: "\f38b"; } .fa-cube:before { content: "\f1b2"; } .fa-cubes:before { content: "\f1b3"; } .fa-cut:before { content: "\f0c4"; } .fa-cuttlefish:before { content: "\f38c"; } .fa-d-and-d:before { content: "\f38d"; } .fa-d-and-d-beyond:before { content: "\f6ca"; } .fa-dashcube:before { content: "\f210"; } .fa-database:before { content: "\f1c0"; } .fa-deaf:before { content: "\f2a4"; } .fa-delicious:before { content: "\f1a5"; } .fa-democrat:before { content: "\f747"; } .fa-deploydog:before { content: "\f38e"; } .fa-deskpro:before { content: "\f38f"; } .fa-desktop:before { content: "\f108"; } .fa-dev:before { content: "\f6cc"; } .fa-deviantart:before { content: "\f1bd"; } .fa-dharmachakra:before { content: "\f655"; } .fa-dhl:before { content: "\f790"; } .fa-diagnoses:before { content: "\f470"; } .fa-diaspora:before { content: "\f791"; } .fa-dice:before { content: "\f522"; } .fa-dice-d20:before { content: "\f6cf"; } .fa-dice-d6:before { content: "\f6d1"; } .fa-dice-five:before { content: "\f523"; } .fa-dice-four:before { content: "\f524"; } .fa-dice-one:before { content: "\f525"; } .fa-dice-six:before { content: "\f526"; } .fa-dice-three:before { content: "\f527"; } .fa-dice-two:before { content: "\f528"; } .fa-digg:before { content: "\f1a6"; } .fa-digital-ocean:before { content: "\f391"; } .fa-digital-tachograph:before { content: "\f566"; } .fa-directions:before { content: "\f5eb"; } .fa-discord:before { content: "\f392"; } .fa-discourse:before { content: "\f393"; } .fa-divide:before { content: "\f529"; } .fa-dizzy:before { content: "\f567"; } .fa-dna:before { content: "\f471"; } .fa-dochub:before { content: "\f394"; } .fa-docker:before { content: "\f395"; } .fa-dog:before { content: "\f6d3"; } .fa-dollar-sign:before { content: "\f155"; } .fa-dolly:before { content: "\f472"; } .fa-dolly-flatbed:before { content: "\f474"; } .fa-donate:before { content: "\f4b9"; } .fa-door-closed:before { content: "\f52a"; } .fa-door-open:before { content: "\f52b"; } .fa-dot-circle:before { content: "\f192"; } .fa-dove:before { content: "\f4ba"; } .fa-download:before { content: "\f019"; } .fa-draft2digital:before { content: "\f396"; } .fa-drafting-compass:before { content: "\f568"; } .fa-dragon:before { content: "\f6d5"; } .fa-draw-polygon:before { content: "\f5ee"; } .fa-dribbble:before { content: "\f17d"; } .fa-dribbble-square:before { content: "\f397"; } .fa-dropbox:before { content: "\f16b"; } .fa-drum:before { content: "\f569"; } .fa-drum-steelpan:before { content: "\f56a"; } .fa-drumstick-bite:before { content: "\f6d7"; } .fa-drupal:before { content: "\f1a9"; } .fa-dumbbell:before { content: "\f44b"; } .fa-dumpster:before { content: "\f793"; } .fa-dumpster-fire:before { content: "\f794"; } .fa-dungeon:before { content: "\f6d9"; } .fa-dyalog:before { content: "\f399"; } .fa-earlybirds:before { content: "\f39a"; } .fa-ebay:before { content: "\f4f4"; } .fa-edge:before { content: "\f282"; } .fa-edit:before { content: "\f044"; } .fa-egg:before { content: "\f7fb"; } .fa-eject:before { content: "\f052"; } .fa-elementor:before { content: "\f430"; } .fa-ellipsis-h:before { content: "\f141"; } .fa-ellipsis-v:before { content: "\f142"; } .fa-ello:before { content: "\f5f1"; } .fa-ember:before { content: "\f423"; } .fa-empire:before { content: "\f1d1"; } .fa-envelope:before { content: "\f0e0"; } .fa-envelope-open:before { content: "\f2b6"; } .fa-envelope-open-text:before { content: "\f658"; } .fa-envelope-square:before { content: "\f199"; } .fa-envira:before { content: "\f299"; } .fa-equals:before { content: "\f52c"; } .fa-eraser:before { content: "\f12d"; } .fa-erlang:before { content: "\f39d"; } .fa-ethereum:before { content: "\f42e"; } .fa-ethernet:before { content: "\f796"; } .fa-etsy:before { content: "\f2d7"; } .fa-euro-sign:before { content: "\f153"; } .fa-evernote:before { content: "\f839"; } .fa-exchange-alt:before { content: "\f362"; } .fa-exclamation:before { content: "\f12a"; } .fa-exclamation-circle:before { content: "\f06a"; } .fa-exclamation-triangle:before { content: "\f071"; } .fa-expand:before { content: "\f065"; } .fa-expand-alt:before { content: "\f424"; } .fa-expand-arrows-alt:before { content: "\f31e"; } .fa-expeditedssl:before { content: "\f23e"; } .fa-external-link-alt:before { content: "\f35d"; } .fa-external-link-square-alt:before { content: "\f360"; } .fa-eye:before { content: "\f06e"; } .fa-eye-dropper:before { content: "\f1fb"; } .fa-eye-slash:before { content: "\f070"; } .fa-facebook:before { content: "\f09a"; } .fa-facebook-f:before { content: "\f39e"; } .fa-facebook-messenger:before { content: "\f39f"; } .fa-facebook-square:before { content: "\f082"; } .fa-fan:before { content: "\f863"; } .fa-fantasy-flight-games:before { content: "\f6dc"; } .fa-fast-backward:before { content: "\f049"; } .fa-fast-forward:before { content: "\f050"; } .fa-fax:before { content: "\f1ac"; } .fa-feather:before { content: "\f52d"; } .fa-feather-alt:before { content: "\f56b"; } .fa-fedex:before { content: "\f797"; } .fa-fedora:before { content: "\f798"; } .fa-female:before { content: "\f182"; } .fa-fighter-jet:before { content: "\f0fb"; } .fa-figma:before { content: "\f799"; } .fa-file:before { content: "\f15b"; } .fa-file-alt:before { content: "\f15c"; } .fa-file-archive:before { content: "\f1c6"; } .fa-file-audio:before { content: "\f1c7"; } .fa-file-code:before { content: "\f1c9"; } .fa-file-contract:before { content: "\f56c"; } .fa-file-csv:before { content: "\f6dd"; } .fa-file-download:before { content: "\f56d"; } .fa-file-excel:before { content: "\f1c3"; } .fa-file-export:before { content: "\f56e"; } .fa-file-image:before { content: "\f1c5"; } .fa-file-import:before { content: "\f56f"; } .fa-file-invoice:before { content: "\f570"; } .fa-file-invoice-dollar:before { content: "\f571"; } .fa-file-medical:before { content: "\f477"; } .fa-file-medical-alt:before { content: "\f478"; } .fa-file-pdf:before { content: "\f1c1"; } .fa-file-powerpoint:before { content: "\f1c4"; } .fa-file-prescription:before { content: "\f572"; } .fa-file-signature:before { content: "\f573"; } .fa-file-upload:before { content: "\f574"; } .fa-file-video:before { content: "\f1c8"; } .fa-file-word:before { content: "\f1c2"; } .fa-fill:before { content: "\f575"; } .fa-fill-drip:before { content: "\f576"; } .fa-film:before { content: "\f008"; } .fa-filter:before { content: "\f0b0"; } .fa-fingerprint:before { content: "\f577"; } .fa-fire:before { content: "\f06d"; } .fa-fire-alt:before { content: "\f7e4"; } .fa-fire-extinguisher:before { content: "\f134"; } .fa-firefox:before { content: "\f269"; } .fa-firefox-browser:before { content: "\f907"; } .fa-first-aid:before { content: "\f479"; } .fa-first-order:before { content: "\f2b0"; } .fa-first-order-alt:before { content: "\f50a"; } .fa-firstdraft:before { content: "\f3a1"; } .fa-fish:before { content: "\f578"; } .fa-fist-raised:before { content: "\f6de"; } .fa-flag:before { content: "\f024"; } .fa-flag-checkered:before { content: "\f11e"; } .fa-flag-usa:before { content: "\f74d"; } .fa-flask:before { content: "\f0c3"; } .fa-flickr:before { content: "\f16e"; } .fa-flipboard:before { content: "\f44d"; } .fa-flushed:before { content: "\f579"; } .fa-fly:before { content: "\f417"; } .fa-folder:before { content: "\f07b"; } .fa-folder-minus:before { content: "\f65d"; } .fa-folder-open:before { content: "\f07c"; } .fa-folder-plus:before { content: "\f65e"; } .fa-font:before { content: "\f031"; } .fa-font-awesome:before { content: "\f2b4"; } .fa-font-awesome-alt:before { content: "\f35c"; } .fa-font-awesome-flag:before { content: "\f425"; } .fa-font-awesome-logo-full:before { content: "\f4e6"; } .fa-fonticons:before { content: "\f280"; } .fa-fonticons-fi:before { content: "\f3a2"; } .fa-football-ball:before { content: "\f44e"; } .fa-fort-awesome:before { content: "\f286"; } .fa-fort-awesome-alt:before { content: "\f3a3"; } .fa-forumbee:before { content: "\f211"; } .fa-forward:before { content: "\f04e"; } .fa-foursquare:before { content: "\f180"; } .fa-free-code-camp:before { content: "\f2c5"; } .fa-freebsd:before { content: "\f3a4"; } .fa-frog:before { content: "\f52e"; } .fa-frown:before { content: "\f119"; } .fa-frown-open:before { content: "\f57a"; } .fa-fulcrum:before { content: "\f50b"; } .fa-funnel-dollar:before { content: "\f662"; } .fa-futbol:before { content: "\f1e3"; } .fa-galactic-republic:before { content: "\f50c"; } .fa-galactic-senate:before { content: "\f50d"; } .fa-gamepad:before { content: "\f11b"; } .fa-gas-pump:before { content: "\f52f"; } .fa-gavel:before { content: "\f0e3"; } .fa-gem:before { content: "\f3a5"; } .fa-genderless:before { content: "\f22d"; } .fa-get-pocket:before { content: "\f265"; } .fa-gg:before { content: "\f260"; } .fa-gg-circle:before { content: "\f261"; } .fa-ghost:before { content: "\f6e2"; } .fa-gift:before { content: "\f06b"; } .fa-gifts:before { content: "\f79c"; } .fa-git:before { content: "\f1d3"; } .fa-git-alt:before { content: "\f841"; } .fa-git-square:before { content: "\f1d2"; } .fa-github:before { content: "\f09b"; } .fa-github-alt:before { content: "\f113"; } .fa-github-square:before { content: "\f092"; } .fa-gitkraken:before { content: "\f3a6"; } .fa-gitlab:before { content: "\f296"; } .fa-gitter:before { content: "\f426"; } .fa-glass-cheers:before { content: "\f79f"; } .fa-glass-martini:before { content: "\f000"; } .fa-glass-martini-alt:before { content: "\f57b"; } .fa-glass-whiskey:before { content: "\f7a0"; } .fa-glasses:before { content: "\f530"; } .fa-glide:before { content: "\f2a5"; } .fa-glide-g:before { content: "\f2a6"; } .fa-globe:before { content: "\f0ac"; } .fa-globe-africa:before { content: "\f57c"; } .fa-globe-americas:before { content: "\f57d"; } .fa-globe-asia:before { content: "\f57e"; } .fa-globe-europe:before { content: "\f7a2"; } .fa-gofore:before { content: "\f3a7"; } .fa-golf-ball:before { content: "\f450"; } .fa-goodreads:before { content: "\f3a8"; } .fa-goodreads-g:before { content: "\f3a9"; } .fa-google:before { content: "\f1a0"; } .fa-google-drive:before { content: "\f3aa"; } .fa-google-play:before { content: "\f3ab"; } .fa-google-plus:before { content: "\f2b3"; } .fa-google-plus-g:before { content: "\f0d5"; } .fa-google-plus-square:before { content: "\f0d4"; } .fa-google-wallet:before { content: "\f1ee"; } .fa-gopuram:before { content: "\f664"; } .fa-graduation-cap:before { content: "\f19d"; } .fa-gratipay:before { content: "\f184"; } .fa-grav:before { content: "\f2d6"; } .fa-greater-than:before { content: "\f531"; } .fa-greater-than-equal:before { content: "\f532"; } .fa-grimace:before { content: "\f57f"; } .fa-grin:before { content: "\f580"; } .fa-grin-alt:before { content: "\f581"; } .fa-grin-beam:before { content: "\f582"; } .fa-grin-beam-sweat:before { content: "\f583"; } .fa-grin-hearts:before { content: "\f584"; } .fa-grin-squint:before { content: "\f585"; } .fa-grin-squint-tears:before { content: "\f586"; } .fa-grin-stars:before { content: "\f587"; } .fa-grin-tears:before { content: "\f588"; } .fa-grin-tongue:before { content: "\f589"; } .fa-grin-tongue-squint:before { content: "\f58a"; } .fa-grin-tongue-wink:before { content: "\f58b"; } .fa-grin-wink:before { content: "\f58c"; } .fa-grip-horizontal:before { content: "\f58d"; } .fa-grip-lines:before { content: "\f7a4"; } .fa-grip-lines-vertical:before { content: "\f7a5"; } .fa-grip-vertical:before { content: "\f58e"; } .fa-gripfire:before { content: "\f3ac"; } .fa-grunt:before { content: "\f3ad"; } .fa-guitar:before { content: "\f7a6"; } .fa-gulp:before { content: "\f3ae"; } .fa-h-square:before { content: "\f0fd"; } .fa-hacker-news:before { content: "\f1d4"; } .fa-hacker-news-square:before { content: "\f3af"; } .fa-hackerrank:before { content: "\f5f7"; } .fa-hamburger:before { content: "\f805"; } .fa-hammer:before { content: "\f6e3"; } .fa-hamsa:before { content: "\f665"; } .fa-hand-holding:before { content: "\f4bd"; } .fa-hand-holding-heart:before { content: "\f4be"; } .fa-hand-holding-usd:before { content: "\f4c0"; } .fa-hand-lizard:before { content: "\f258"; } .fa-hand-middle-finger:before { content: "\f806"; } .fa-hand-paper:before { content: "\f256"; } .fa-hand-peace:before { content: "\f25b"; } .fa-hand-point-down:before { content: "\f0a7"; } .fa-hand-point-left:before { content: "\f0a5"; } .fa-hand-point-right:before { content: "\f0a4"; } .fa-hand-point-up:before { content: "\f0a6"; } .fa-hand-pointer:before { content: "\f25a"; } .fa-hand-rock:before { content: "\f255"; } .fa-hand-scissors:before { content: "\f257"; } .fa-hand-spock:before { content: "\f259"; } .fa-hands:before { content: "\f4c2"; } .fa-hands-helping:before { content: "\f4c4"; } .fa-handshake:before { content: "\f2b5"; } .fa-hanukiah:before { content: "\f6e6"; } .fa-hard-hat:before { content: "\f807"; } .fa-hashtag:before { content: "\f292"; } .fa-hat-cowboy:before { content: "\f8c0"; } .fa-hat-cowboy-side:before { content: "\f8c1"; } .fa-hat-wizard:before { content: "\f6e8"; } .fa-hdd:before { content: "\f0a0"; } .fa-heading:before { content: "\f1dc"; } .fa-headphones:before { content: "\f025"; } .fa-headphones-alt:before { content: "\f58f"; } .fa-headset:before { content: "\f590"; } .fa-heart:before { content: "\f004"; } .fa-heart-broken:before { content: "\f7a9"; } .fa-heartbeat:before { content: "\f21e"; } .fa-helicopter:before { content: "\f533"; } .fa-highlighter:before { content: "\f591"; } .fa-hiking:before { content: "\f6ec"; } .fa-hippo:before { content: "\f6ed"; } .fa-hips:before { content: "\f452"; } .fa-hire-a-helper:before { content: "\f3b0"; } .fa-history:before { content: "\f1da"; } .fa-hockey-puck:before { content: "\f453"; } .fa-holly-berry:before { content: "\f7aa"; } .fa-home:before { content: "\f015"; } .fa-hooli:before { content: "\f427"; } .fa-hornbill:before { content: "\f592"; } .fa-horse:before { content: "\f6f0"; } .fa-horse-head:before { content: "\f7ab"; } .fa-hospital:before { content: "\f0f8"; } .fa-hospital-alt:before { content: "\f47d"; } .fa-hospital-symbol:before { content: "\f47e"; } .fa-hot-tub:before { content: "\f593"; } .fa-hotdog:before { content: "\f80f"; } .fa-hotel:before { content: "\f594"; } .fa-hotjar:before { content: "\f3b1"; } .fa-hourglass:before { content: "\f254"; } .fa-hourglass-end:before { content: "\f253"; } .fa-hourglass-half:before { content: "\f252"; } .fa-hourglass-start:before { content: "\f251"; } .fa-house-damage:before { content: "\f6f1"; } .fa-houzz:before { content: "\f27c"; } .fa-hryvnia:before { content: "\f6f2"; } .fa-html5:before { content: "\f13b"; } .fa-hubspot:before { content: "\f3b2"; } .fa-i-cursor:before { content: "\f246"; } .fa-ice-cream:before { content: "\f810"; } .fa-icicles:before { content: "\f7ad"; } .fa-icons:before { content: "\f86d"; } .fa-id-badge:before { content: "\f2c1"; } .fa-id-card:before { content: "\f2c2"; } .fa-id-card-alt:before { content: "\f47f"; } .fa-ideal:before { content: "\f913"; } .fa-igloo:before { content: "\f7ae"; } .fa-image:before { content: "\f03e"; } .fa-images:before { content: "\f302"; } .fa-imdb:before { content: "\f2d8"; } .fa-inbox:before { content: "\f01c"; } .fa-indent:before { content: "\f03c"; } .fa-industry:before { content: "\f275"; } .fa-infinity:before { content: "\f534"; } .fa-info:before { content: "\f129"; } .fa-info-circle:before { content: "\f05a"; } .fa-instagram:before { content: "\f16d"; } .fa-intercom:before { content: "\f7af"; } .fa-internet-explorer:before { content: "\f26b"; } .fa-invision:before { content: "\f7b0"; } .fa-ioxhost:before { content: "\f208"; } .fa-italic:before { content: "\f033"; } .fa-itch-io:before { content: "\f83a"; } .fa-itunes:before { content: "\f3b4"; } .fa-itunes-note:before { content: "\f3b5"; } .fa-java:before { content: "\f4e4"; } .fa-jedi:before { content: "\f669"; } .fa-jedi-order:before { content: "\f50e"; } .fa-jenkins:before { content: "\f3b6"; } .fa-jira:before { content: "\f7b1"; } .fa-joget:before { content: "\f3b7"; } .fa-joint:before { content: "\f595"; } .fa-joomla:before { content: "\f1aa"; } .fa-journal-whills:before { content: "\f66a"; } .fa-js:before { content: "\f3b8"; } .fa-js-square:before { content: "\f3b9"; } .fa-jsfiddle:before { content: "\f1cc"; } .fa-kaaba:before { content: "\f66b"; } .fa-kaggle:before { content: "\f5fa"; } .fa-key:before { content: "\f084"; } .fa-keybase:before { content: "\f4f5"; } .fa-keyboard:before { content: "\f11c"; } .fa-keycdn:before { content: "\f3ba"; } .fa-khanda:before { content: "\f66d"; } .fa-kickstarter:before { content: "\f3bb"; } .fa-kickstarter-k:before { content: "\f3bc"; } .fa-kiss:before { content: "\f596"; } .fa-kiss-beam:before { content: "\f597"; } .fa-kiss-wink-heart:before { content: "\f598"; } .fa-kiwi-bird:before { content: "\f535"; } .fa-korvue:before { content: "\f42f"; } .fa-landmark:before { content: "\f66f"; } .fa-language:before { content: "\f1ab"; } .fa-laptop:before { content: "\f109"; } .fa-laptop-code:before { content: "\f5fc"; } .fa-laptop-medical:before { content: "\f812"; } .fa-laravel:before { content: "\f3bd"; } .fa-lastfm:before { content: "\f202"; } .fa-lastfm-square:before { content: "\f203"; } .fa-laugh:before { content: "\f599"; } .fa-laugh-beam:before { content: "\f59a"; } .fa-laugh-squint:before { content: "\f59b"; } .fa-laugh-wink:before { content: "\f59c"; } .fa-layer-group:before { content: "\f5fd"; } .fa-leaf:before { content: "\f06c"; } .fa-leanpub:before { content: "\f212"; } .fa-lemon:before { content: "\f094"; } .fa-less:before { content: "\f41d"; } .fa-less-than:before { content: "\f536"; } .fa-less-than-equal:before { content: "\f537"; } .fa-level-down-alt:before { content: "\f3be"; } .fa-level-up-alt:before { content: "\f3bf"; } .fa-life-ring:before { content: "\f1cd"; } .fa-lightbulb:before { content: "\f0eb"; } .fa-line:before { content: "\f3c0"; } .fa-link:before { content: "\f0c1"; } .fa-linkedin:before { content: "\f08c"; } .fa-linkedin-in:before { content: "\f0e1"; } .fa-linode:before { content: "\f2b8"; } .fa-linux:before { content: "\f17c"; } .fa-lira-sign:before { content: "\f195"; } .fa-list:before { content: "\f03a"; } .fa-list-alt:before { content: "\f022"; } .fa-list-ol:before { content: "\f0cb"; } .fa-list-ul:before { content: "\f0ca"; } .fa-location-arrow:before { content: "\f124"; } .fa-lock:before { content: "\f023"; } .fa-lock-open:before { content: "\f3c1"; } .fa-long-arrow-alt-down:before { content: "\f309"; } .fa-long-arrow-alt-left:before { content: "\f30a"; } .fa-long-arrow-alt-right:before { content: "\f30b"; } .fa-long-arrow-alt-up:before { content: "\f30c"; } .fa-low-vision:before { content: "\f2a8"; } .fa-luggage-cart:before { content: "\f59d"; } .fa-lyft:before { content: "\f3c3"; } .fa-magento:before { content: "\f3c4"; } .fa-magic:before { content: "\f0d0"; } .fa-magnet:before { content: "\f076"; } .fa-mail-bulk:before { content: "\f674"; } .fa-mailchimp:before { content: "\f59e"; } .fa-male:before { content: "\f183"; } .fa-mandalorian:before { content: "\f50f"; } .fa-map:before { content: "\f279"; } .fa-map-marked:before { content: "\f59f"; } .fa-map-marked-alt:before { content: "\f5a0"; } .fa-map-marker:before { content: "\f041"; } .fa-map-marker-alt:before { content: "\f3c5"; } .fa-map-pin:before { content: "\f276"; } .fa-map-signs:before { content: "\f277"; } .fa-markdown:before { content: "\f60f"; } .fa-marker:before { content: "\f5a1"; } .fa-mars:before { content: "\f222"; } .fa-mars-double:before { content: "\f227"; } .fa-mars-stroke:before { content: "\f229"; } .fa-mars-stroke-h:before { content: "\f22b"; } .fa-mars-stroke-v:before { content: "\f22a"; } .fa-mask:before { content: "\f6fa"; } .fa-mastodon:before { content: "\f4f6"; } .fa-maxcdn:before { content: "\f136"; } .fa-mdb:before { content: "\f8ca"; } .fa-medal:before { content: "\f5a2"; } .fa-medapps:before { content: "\f3c6"; } .fa-medium:before { content: "\f23a"; } .fa-medium-m:before { content: "\f3c7"; } .fa-medkit:before { content: "\f0fa"; } .fa-medrt:before { content: "\f3c8"; } .fa-meetup:before { content: "\f2e0"; } .fa-megaport:before { content: "\f5a3"; } .fa-meh:before { content: "\f11a"; } .fa-meh-blank:before { content: "\f5a4"; } .fa-meh-rolling-eyes:before { content: "\f5a5"; } .fa-memory:before { content: "\f538"; } .fa-mendeley:before { content: "\f7b3"; } .fa-menorah:before { content: "\f676"; } .fa-mercury:before { content: "\f223"; } .fa-meteor:before { content: "\f753"; } .fa-microblog:before { content: "\f91a"; } .fa-microchip:before { content: "\f2db"; } .fa-microphone:before { content: "\f130"; } .fa-microphone-alt:before { content: "\f3c9"; } .fa-microphone-alt-slash:before { content: "\f539"; } .fa-microphone-slash:before { content: "\f131"; } .fa-microscope:before { content: "\f610"; } .fa-microsoft:before { content: "\f3ca"; } .fa-minus:before { content: "\f068"; } .fa-minus-circle:before { content: "\f056"; } .fa-minus-square:before { content: "\f146"; } .fa-mitten:before { content: "\f7b5"; } .fa-mix:before { content: "\f3cb"; } .fa-mixcloud:before { content: "\f289"; } .fa-mizuni:before { content: "\f3cc"; } .fa-mobile:before { content: "\f10b"; } .fa-mobile-alt:before { content: "\f3cd"; } .fa-modx:before { content: "\f285"; } .fa-monero:before { content: "\f3d0"; } .fa-money-bill:before { content: "\f0d6"; } .fa-money-bill-alt:before { content: "\f3d1"; } .fa-money-bill-wave:before { content: "\f53a"; } .fa-money-bill-wave-alt:before { content: "\f53b"; } .fa-money-check:before { content: "\f53c"; } .fa-money-check-alt:before { content: "\f53d"; } .fa-monument:before { content: "\f5a6"; } .fa-moon:before { content: "\f186"; } .fa-mortar-pestle:before { content: "\f5a7"; } .fa-mosque:before { content: "\f678"; } .fa-motorcycle:before { content: "\f21c"; } .fa-mountain:before { content: "\f6fc"; } .fa-mouse:before { content: "\f8cc"; } .fa-mouse-pointer:before { content: "\f245"; } .fa-mug-hot:before { content: "\f7b6"; } .fa-music:before { content: "\f001"; } .fa-napster:before { content: "\f3d2"; } .fa-neos:before { content: "\f612"; } .fa-network-wired:before { content: "\f6ff"; } .fa-neuter:before { content: "\f22c"; } .fa-newspaper:before { content: "\f1ea"; } .fa-nimblr:before { content: "\f5a8"; } .fa-node:before { content: "\f419"; } .fa-node-js:before { content: "\f3d3"; } .fa-not-equal:before { content: "\f53e"; } .fa-notes-medical:before { content: "\f481"; } .fa-npm:before { content: "\f3d4"; } .fa-ns8:before { content: "\f3d5"; } .fa-nutritionix:before { content: "\f3d6"; } .fa-object-group:before { content: "\f247"; } .fa-object-ungroup:before { content: "\f248"; } .fa-odnoklassniki:before { content: "\f263"; } .fa-odnoklassniki-square:before { content: "\f264"; } .fa-oil-can:before { content: "\f613"; } .fa-old-republic:before { content: "\f510"; } .fa-om:before { content: "\f679"; } .fa-opencart:before { content: "\f23d"; } .fa-openid:before { content: "\f19b"; } .fa-opera:before { content: "\f26a"; } .fa-optin-monster:before { content: "\f23c"; } .fa-orcid:before { content: "\f8d2"; } .fa-osi:before { content: "\f41a"; } .fa-otter:before { content: "\f700"; } .fa-outdent:before { content: "\f03b"; } .fa-page4:before { content: "\f3d7"; } .fa-pagelines:before { content: "\f18c"; } .fa-pager:before { content: "\f815"; } .fa-paint-brush:before { content: "\f1fc"; } .fa-paint-roller:before { content: "\f5aa"; } .fa-palette:before { content: "\f53f"; } .fa-palfed:before { content: "\f3d8"; } .fa-pallet:before { content: "\f482"; } .fa-paper-plane:before { content: "\f1d8"; } .fa-paperclip:before { content: "\f0c6"; } .fa-parachute-box:before { content: "\f4cd"; } .fa-paragraph:before { content: "\f1dd"; } .fa-parking:before { content: "\f540"; } .fa-passport:before { content: "\f5ab"; } .fa-pastafarianism:before { content: "\f67b"; } .fa-paste:before { content: "\f0ea"; } .fa-patreon:before { content: "\f3d9"; } .fa-pause:before { content: "\f04c"; } .fa-pause-circle:before { content: "\f28b"; } .fa-paw:before { content: "\f1b0"; } .fa-paypal:before { content: "\f1ed"; } .fa-peace:before { content: "\f67c"; } .fa-pen:before { content: "\f304"; } .fa-pen-alt:before { content: "\f305"; } .fa-pen-fancy:before { content: "\f5ac"; } .fa-pen-nib:before { content: "\f5ad"; } .fa-pen-square:before { content: "\f14b"; } .fa-pencil-alt:before { content: "\f303"; } .fa-pencil-ruler:before { content: "\f5ae"; } .fa-penny-arcade:before { content: "\f704"; } .fa-people-carry:before { content: "\f4ce"; } .fa-pepper-hot:before { content: "\f816"; } .fa-percent:before { content: "\f295"; } .fa-percentage:before { content: "\f541"; } .fa-periscope:before { content: "\f3da"; } .fa-person-booth:before { content: "\f756"; } .fa-phabricator:before { content: "\f3db"; } .fa-phoenix-framework:before { content: "\f3dc"; } .fa-phoenix-squadron:before { content: "\f511"; } .fa-phone:before { content: "\f095"; } .fa-phone-alt:before { content: "\f879"; } .fa-phone-slash:before { content: "\f3dd"; } .fa-phone-square:before { content: "\f098"; } .fa-phone-square-alt:before { content: "\f87b"; } .fa-phone-volume:before { content: "\f2a0"; } .fa-photo-video:before { content: "\f87c"; } .fa-php:before { content: "\f457"; } .fa-pied-piper:before { content: "\f2ae"; } .fa-pied-piper-alt:before { content: "\f1a8"; } .fa-pied-piper-hat:before { content: "\f4e5"; } .fa-pied-piper-pp:before { content: "\f1a7"; } .fa-pied-piper-square:before { content: "\f91e"; } .fa-piggy-bank:before { content: "\f4d3"; } .fa-pills:before { content: "\f484"; } .fa-pinterest:before { content: "\f0d2"; } .fa-pinterest-p:before { content: "\f231"; } .fa-pinterest-square:before { content: "\f0d3"; } .fa-pizza-slice:before { content: "\f818"; } .fa-place-of-worship:before { content: "\f67f"; } .fa-plane:before { content: "\f072"; } .fa-plane-arrival:before { content: "\f5af"; } .fa-plane-departure:before { content: "\f5b0"; } .fa-play:before { content: "\f04b"; } .fa-play-circle:before { content: "\f144"; } .fa-playstation:before { content: "\f3df"; } .fa-plug:before { content: "\f1e6"; } .fa-plus:before { content: "\f067"; } .fa-plus-circle:before { content: "\f055"; } .fa-plus-square:before { content: "\f0fe"; } .fa-podcast:before { content: "\f2ce"; } .fa-poll:before { content: "\f681"; } .fa-poll-h:before { content: "\f682"; } .fa-poo:before { content: "\f2fe"; } .fa-poo-storm:before { content: "\f75a"; } .fa-poop:before { content: "\f619"; } .fa-portrait:before { content: "\f3e0"; } .fa-pound-sign:before { content: "\f154"; } .fa-power-off:before { content: "\f011"; } .fa-pray:before { content: "\f683"; } .fa-praying-hands:before { content: "\f684"; } .fa-prescription:before { content: "\f5b1"; } .fa-prescription-bottle:before { content: "\f485"; } .fa-prescription-bottle-alt:before { content: "\f486"; } .fa-print:before { content: "\f02f"; } .fa-procedures:before { content: "\f487"; } .fa-product-hunt:before { content: "\f288"; } .fa-project-diagram:before { content: "\f542"; } .fa-pushed:before { content: "\f3e1"; } .fa-puzzle-piece:before { content: "\f12e"; } .fa-python:before { content: "\f3e2"; } .fa-qq:before { content: "\f1d6"; } .fa-qrcode:before { content: "\f029"; } .fa-question:before { content: "\f128"; } .fa-question-circle:before { content: "\f059"; } .fa-quidditch:before { content: "\f458"; } .fa-quinscape:before { content: "\f459"; } .fa-quora:before { content: "\f2c4"; } .fa-quote-left:before { content: "\f10d"; } .fa-quote-right:before { content: "\f10e"; } .fa-quran:before { content: "\f687"; } .fa-r-project:before { content: "\f4f7"; } .fa-radiation:before { content: "\f7b9"; } .fa-radiation-alt:before { content: "\f7ba"; } .fa-rainbow:before { content: "\f75b"; } .fa-random:before { content: "\f074"; } .fa-raspberry-pi:before { content: "\f7bb"; } .fa-ravelry:before { content: "\f2d9"; } .fa-react:before { content: "\f41b"; } .fa-reacteurope:before { content: "\f75d"; } .fa-readme:before { content: "\f4d5"; } .fa-rebel:before { content: "\f1d0"; } .fa-receipt:before { content: "\f543"; } .fa-record-vinyl:before { content: "\f8d9"; } .fa-recycle:before { content: "\f1b8"; } .fa-red-river:before { content: "\f3e3"; } .fa-reddit:before { content: "\f1a1"; } .fa-reddit-alien:before { content: "\f281"; } .fa-reddit-square:before { content: "\f1a2"; } .fa-redhat:before { content: "\f7bc"; } .fa-redo:before { content: "\f01e"; } .fa-redo-alt:before { content: "\f2f9"; } .fa-registered:before { content: "\f25d"; } .fa-remove-format:before { content: "\f87d"; } .fa-renren:before { content: "\f18b"; } .fa-reply:before { content: "\f3e5"; } .fa-reply-all:before { content: "\f122"; } .fa-replyd:before { content: "\f3e6"; } .fa-republican:before { content: "\f75e"; } .fa-researchgate:before { content: "\f4f8"; } .fa-resolving:before { content: "\f3e7"; } .fa-restroom:before { content: "\f7bd"; } .fa-retweet:before { content: "\f079"; } .fa-rev:before { content: "\f5b2"; } .fa-ribbon:before { content: "\f4d6"; } .fa-ring:before { content: "\f70b"; } .fa-road:before { content: "\f018"; } .fa-robot:before { content: "\f544"; } .fa-rocket:before { content: "\f135"; } .fa-rocketchat:before { content: "\f3e8"; } .fa-rockrms:before { content: "\f3e9"; } .fa-route:before { content: "\f4d7"; } .fa-rss:before { content: "\f09e"; } .fa-rss-square:before { content: "\f143"; } .fa-ruble-sign:before { content: "\f158"; } .fa-ruler:before { content: "\f545"; } .fa-ruler-combined:before { content: "\f546"; } .fa-ruler-horizontal:before { content: "\f547"; } .fa-ruler-vertical:before { content: "\f548"; } .fa-running:before { content: "\f70c"; } .fa-rupee-sign:before { content: "\f156"; } .fa-sad-cry:before { content: "\f5b3"; } .fa-sad-tear:before { content: "\f5b4"; } .fa-safari:before { content: "\f267"; } .fa-salesforce:before { content: "\f83b"; } .fa-sass:before { content: "\f41e"; } .fa-satellite:before { content: "\f7bf"; } .fa-satellite-dish:before { content: "\f7c0"; } .fa-save:before { content: "\f0c7"; } .fa-schlix:before { content: "\f3ea"; } .fa-school:before { content: "\f549"; } .fa-screwdriver:before { content: "\f54a"; } .fa-scribd:before { content: "\f28a"; } .fa-scroll:before { content: "\f70e"; } .fa-sd-card:before { content: "\f7c2"; } .fa-search:before { content: "\f002"; } .fa-search-dollar:before { content: "\f688"; } .fa-search-location:before { content: "\f689"; } .fa-search-minus:before { content: "\f010"; } .fa-search-plus:before { content: "\f00e"; } .fa-searchengin:before { content: "\f3eb"; } .fa-seedling:before { content: "\f4d8"; } .fa-sellcast:before { content: "\f2da"; } .fa-sellsy:before { content: "\f213"; } .fa-server:before { content: "\f233"; } .fa-servicestack:before { content: "\f3ec"; } .fa-shapes:before { content: "\f61f"; } .fa-share:before { content: "\f064"; } .fa-share-alt:before { content: "\f1e0"; } .fa-share-alt-square:before { content: "\f1e1"; } .fa-share-square:before { content: "\f14d"; } .fa-shekel-sign:before { content: "\f20b"; } .fa-shield-alt:before { content: "\f3ed"; } .fa-ship:before { content: "\f21a"; } .fa-shipping-fast:before { content: "\f48b"; } .fa-shirtsinbulk:before { content: "\f214"; } .fa-shoe-prints:before { content: "\f54b"; } .fa-shopping-bag:before { content: "\f290"; } .fa-shopping-basket:before { content: "\f291"; } .fa-shopping-cart:before { content: "\f07a"; } .fa-shopware:before { content: "\f5b5"; } .fa-shower:before { content: "\f2cc"; } .fa-shuttle-van:before { content: "\f5b6"; } .fa-sign:before { content: "\f4d9"; } .fa-sign-in-alt:before { content: "\f2f6"; } .fa-sign-language:before { content: "\f2a7"; } .fa-sign-out-alt:before { content: "\f2f5"; } .fa-signal:before { content: "\f012"; } .fa-signature:before { content: "\f5b7"; } .fa-sim-card:before { content: "\f7c4"; } .fa-simplybuilt:before { content: "\f215"; } .fa-sistrix:before { content: "\f3ee"; } .fa-sitemap:before { content: "\f0e8"; } .fa-sith:before { content: "\f512"; } .fa-skating:before { content: "\f7c5"; } .fa-sketch:before { content: "\f7c6"; } .fa-skiing:before { content: "\f7c9"; } .fa-skiing-nordic:before { content: "\f7ca"; } .fa-skull:before { content: "\f54c"; } .fa-skull-crossbones:before { content: "\f714"; } .fa-skyatlas:before { content: "\f216"; } .fa-skype:before { content: "\f17e"; } .fa-slack:before { content: "\f198"; } .fa-slack-hash:before { content: "\f3ef"; } .fa-slash:before { content: "\f715"; } .fa-sleigh:before { content: "\f7cc"; } .fa-sliders-h:before { content: "\f1de"; } .fa-slideshare:before { content: "\f1e7"; } .fa-smile:before { content: "\f118"; } .fa-smile-beam:before { content: "\f5b8"; } .fa-smile-wink:before { content: "\f4da"; } .fa-smog:before { content: "\f75f"; } .fa-smoking:before { content: "\f48d"; } .fa-smoking-ban:before { content: "\f54d"; } .fa-sms:before { content: "\f7cd"; } .fa-snapchat:before { content: "\f2ab"; } .fa-snapchat-ghost:before { content: "\f2ac"; } .fa-snapchat-square:before { content: "\f2ad"; } .fa-snowboarding:before { content: "\f7ce"; } .fa-snowflake:before { content: "\f2dc"; } .fa-snowman:before { content: "\f7d0"; } .fa-snowplow:before { content: "\f7d2"; } .fa-socks:before { content: "\f696"; } .fa-solar-panel:before { content: "\f5ba"; } .fa-sort:before { content: "\f0dc"; } .fa-sort-alpha-down:before { content: "\f15d"; } .fa-sort-alpha-down-alt:before { content: "\f881"; } .fa-sort-alpha-up:before { content: "\f15e"; } .fa-sort-alpha-up-alt:before { content: "\f882"; } .fa-sort-amount-down:before { content: "\f160"; } .fa-sort-amount-down-alt:before { content: "\f884"; } .fa-sort-amount-up:before { content: "\f161"; } .fa-sort-amount-up-alt:before { content: "\f885"; } .fa-sort-down:before { content: "\f0dd"; } .fa-sort-numeric-down:before { content: "\f162"; } .fa-sort-numeric-down-alt:before { content: "\f886"; } .fa-sort-numeric-up:before { content: "\f163"; } .fa-sort-numeric-up-alt:before { content: "\f887"; } .fa-sort-up:before { content: "\f0de"; } .fa-soundcloud:before { content: "\f1be"; } .fa-sourcetree:before { content: "\f7d3"; } .fa-spa:before { content: "\f5bb"; } .fa-space-shuttle:before { content: "\f197"; } .fa-speakap:before { content: "\f3f3"; } .fa-speaker-deck:before { content: "\f83c"; } .fa-spell-check:before { content: "\f891"; } .fa-spider:before { content: "\f717"; } .fa-spinner:before { content: "\f110"; } .fa-splotch:before { content: "\f5bc"; } .fa-spotify:before { content: "\f1bc"; } .fa-spray-can:before { content: "\f5bd"; } .fa-square:before { content: "\f0c8"; } .fa-square-full:before { content: "\f45c"; } .fa-square-root-alt:before { content: "\f698"; } .fa-squarespace:before { content: "\f5be"; } .fa-stack-exchange:before { content: "\f18d"; } .fa-stack-overflow:before { content: "\f16c"; } .fa-stackpath:before { content: "\f842"; } .fa-stamp:before { content: "\f5bf"; } .fa-star:before { content: "\f005"; } .fa-star-and-crescent:before { content: "\f699"; } .fa-star-half:before { content: "\f089"; } .fa-star-half-alt:before { content: "\f5c0"; } .fa-star-of-david:before { content: "\f69a"; } .fa-star-of-life:before { content: "\f621"; } .fa-staylinked:before { content: "\f3f5"; } .fa-steam:before { content: "\f1b6"; } .fa-steam-square:before { content: "\f1b7"; } .fa-steam-symbol:before { content: "\f3f6"; } .fa-step-backward:before { content: "\f048"; } .fa-step-forward:before { content: "\f051"; } .fa-stethoscope:before { content: "\f0f1"; } .fa-sticker-mule:before { content: "\f3f7"; } .fa-sticky-note:before { content: "\f249"; } .fa-stop:before { content: "\f04d"; } .fa-stop-circle:before { content: "\f28d"; } .fa-stopwatch:before { content: "\f2f2"; } .fa-store:before { content: "\f54e"; } .fa-store-alt:before { content: "\f54f"; } .fa-strava:before { content: "\f428"; } .fa-stream:before { content: "\f550"; } .fa-street-view:before { content: "\f21d"; } .fa-strikethrough:before { content: "\f0cc"; } .fa-stripe:before { content: "\f429"; } .fa-stripe-s:before { content: "\f42a"; } .fa-stroopwafel:before { content: "\f551"; } .fa-studiovinari:before { content: "\f3f8"; } .fa-stumbleupon:before { content: "\f1a4"; } .fa-stumbleupon-circle:before { content: "\f1a3"; } .fa-subscript:before { content: "\f12c"; } .fa-subway:before { content: "\f239"; } .fa-suitcase:before { content: "\f0f2"; } .fa-suitcase-rolling:before { content: "\f5c1"; } .fa-sun:before { content: "\f185"; } .fa-superpowers:before { content: "\f2dd"; } .fa-superscript:before { content: "\f12b"; } .fa-supple:before { content: "\f3f9"; } .fa-surprise:before { content: "\f5c2"; } .fa-suse:before { content: "\f7d6"; } .fa-swatchbook:before { content: "\f5c3"; } .fa-swift:before { content: "\f8e1"; } .fa-swimmer:before { content: "\f5c4"; } .fa-swimming-pool:before { content: "\f5c5"; } .fa-symfony:before { content: "\f83d"; } .fa-synagogue:before { content: "\f69b"; } .fa-sync:before { content: "\f021"; } .fa-sync-alt:before { content: "\f2f1"; } .fa-syringe:before { content: "\f48e"; } .fa-table:before { content: "\f0ce"; } .fa-table-tennis:before { content: "\f45d"; } .fa-tablet:before { content: "\f10a"; } .fa-tablet-alt:before { content: "\f3fa"; } .fa-tablets:before { content: "\f490"; } .fa-tachometer-alt:before { content: "\f3fd"; } .fa-tag:before { content: "\f02b"; } .fa-tags:before { content: "\f02c"; } .fa-tape:before { content: "\f4db"; } .fa-tasks:before { content: "\f0ae"; } .fa-taxi:before { content: "\f1ba"; } .fa-teamspeak:before { content: "\f4f9"; } .fa-teeth:before { content: "\f62e"; } .fa-teeth-open:before { content: "\f62f"; } .fa-telegram:before { content: "\f2c6"; } .fa-telegram-plane:before { content: "\f3fe"; } .fa-temperature-high:before { content: "\f769"; } .fa-temperature-low:before { content: "\f76b"; } .fa-tencent-weibo:before { content: "\f1d5"; } .fa-tenge:before { content: "\f7d7"; } .fa-terminal:before { content: "\f120"; } .fa-text-height:before { content: "\f034"; } .fa-text-width:before { content: "\f035"; } .fa-th:before { content: "\f00a"; } .fa-th-large:before { content: "\f009"; } .fa-th-list:before { content: "\f00b"; } .fa-the-red-yeti:before { content: "\f69d"; } .fa-theater-masks:before { content: "\f630"; } .fa-themeco:before { content: "\f5c6"; } .fa-themeisle:before { content: "\f2b2"; } .fa-thermometer:before { content: "\f491"; } .fa-thermometer-empty:before { content: "\f2cb"; } .fa-thermometer-full:before { content: "\f2c7"; } .fa-thermometer-half:before { content: "\f2c9"; } .fa-thermometer-quarter:before { content: "\f2ca"; } .fa-thermometer-three-quarters:before { content: "\f2c8"; } .fa-think-peaks:before { content: "\f731"; } .fa-thumbs-down:before { content: "\f165"; } .fa-thumbs-up:before { content: "\f164"; } .fa-thumbtack:before { content: "\f08d"; } .fa-ticket-alt:before { content: "\f3ff"; } .fa-times:before { content: "\f00d"; } .fa-times-circle:before { content: "\f057"; } .fa-tint:before { content: "\f043"; } .fa-tint-slash:before { content: "\f5c7"; } .fa-tired:before { content: "\f5c8"; } .fa-toggle-off:before { content: "\f204"; } .fa-toggle-on:before { content: "\f205"; } .fa-toilet:before { content: "\f7d8"; } .fa-toilet-paper:before { content: "\f71e"; } .fa-toolbox:before { content: "\f552"; } .fa-tools:before { content: "\f7d9"; } .fa-tooth:before { content: "\f5c9"; } .fa-torah:before { content: "\f6a0"; } .fa-torii-gate:before { content: "\f6a1"; } .fa-tractor:before { content: "\f722"; } .fa-trade-federation:before { content: "\f513"; } .fa-trademark:before { content: "\f25c"; } .fa-traffic-light:before { content: "\f637"; } .fa-trailer:before { content: "\f941"; } .fa-train:before { content: "\f238"; } .fa-tram:before { content: "\f7da"; } .fa-transgender:before { content: "\f224"; } .fa-transgender-alt:before { content: "\f225"; } .fa-trash:before { content: "\f1f8"; } .fa-trash-alt:before { content: "\f2ed"; } .fa-trash-restore:before { content: "\f829"; } .fa-trash-restore-alt:before { content: "\f82a"; } .fa-tree:before { content: "\f1bb"; } .fa-trello:before { content: "\f181"; } .fa-tripadvisor:before { content: "\f262"; } .fa-trophy:before { content: "\f091"; } .fa-truck:before { content: "\f0d1"; } .fa-truck-loading:before { content: "\f4de"; } .fa-truck-monster:before { content: "\f63b"; } .fa-truck-moving:before { content: "\f4df"; } .fa-truck-pickup:before { content: "\f63c"; } .fa-tshirt:before { content: "\f553"; } .fa-tty:before { content: "\f1e4"; } .fa-tumblr:before { content: "\f173"; } .fa-tumblr-square:before { content: "\f174"; } .fa-tv:before { content: "\f26c"; } .fa-twitch:before { content: "\f1e8"; } .fa-twitter:before { content: "\f099"; } .fa-twitter-square:before { content: "\f081"; } .fa-typo3:before { content: "\f42b"; } .fa-uber:before { content: "\f402"; } .fa-ubuntu:before { content: "\f7df"; } .fa-uikit:before { content: "\f403"; } .fa-umbraco:before { content: "\f8e8"; } .fa-umbrella:before { content: "\f0e9"; } .fa-umbrella-beach:before { content: "\f5ca"; } .fa-underline:before { content: "\f0cd"; } .fa-undo:before { content: "\f0e2"; } .fa-undo-alt:before { content: "\f2ea"; } .fa-uniregistry:before { content: "\f404"; } .fa-unity:before { content: "\f949"; } .fa-universal-access:before { content: "\f29a"; } .fa-university:before { content: "\f19c"; } .fa-unlink:before { content: "\f127"; } .fa-unlock:before { content: "\f09c"; } .fa-unlock-alt:before { content: "\f13e"; } .fa-untappd:before { content: "\f405"; } .fa-upload:before { content: "\f093"; } .fa-ups:before { content: "\f7e0"; } .fa-usb:before { content: "\f287"; } .fa-user:before { content: "\f007"; } .fa-user-alt:before { content: "\f406"; } .fa-user-alt-slash:before { content: "\f4fa"; } .fa-user-astronaut:before { content: "\f4fb"; } .fa-user-check:before { content: "\f4fc"; } .fa-user-circle:before { content: "\f2bd"; } .fa-user-clock:before { content: "\f4fd"; } .fa-user-cog:before { content: "\f4fe"; } .fa-user-edit:before { content: "\f4ff"; } .fa-user-friends:before { content: "\f500"; } .fa-user-graduate:before { content: "\f501"; } .fa-user-injured:before { content: "\f728"; } .fa-user-lock:before { content: "\f502"; } .fa-user-md:before { content: "\f0f0"; } .fa-user-minus:before { content: "\f503"; } .fa-user-ninja:before { content: "\f504"; } .fa-user-nurse:before { content: "\f82f"; } .fa-user-plus:before { content: "\f234"; } .fa-user-secret:before { content: "\f21b"; } .fa-user-shield:before { content: "\f505"; } .fa-user-slash:before { content: "\f506"; } .fa-user-tag:before { content: "\f507"; } .fa-user-tie:before { content: "\f508"; } .fa-user-times:before { content: "\f235"; } .fa-users:before { content: "\f0c0"; } .fa-users-cog:before { content: "\f509"; } .fa-usps:before { content: "\f7e1"; } .fa-ussunnah:before { content: "\f407"; } .fa-utensil-spoon:before { content: "\f2e5"; } .fa-utensils:before { content: "\f2e7"; } .fa-vaadin:before { content: "\f408"; } .fa-vector-square:before { content: "\f5cb"; } .fa-venus:before { content: "\f221"; } .fa-venus-double:before { content: "\f226"; } .fa-venus-mars:before { content: "\f228"; } .fa-viacoin:before { content: "\f237"; } .fa-viadeo:before { content: "\f2a9"; } .fa-viadeo-square:before { content: "\f2aa"; } .fa-vial:before { content: "\f492"; } .fa-vials:before { content: "\f493"; } .fa-viber:before { content: "\f409"; } .fa-video:before { content: "\f03d"; } .fa-video-slash:before { content: "\f4e2"; } .fa-vihara:before { content: "\f6a7"; } .fa-vimeo:before { content: "\f40a"; } .fa-vimeo-square:before { content: "\f194"; } .fa-vimeo-v:before { content: "\f27d"; } .fa-vine:before { content: "\f1ca"; } .fa-vk:before { content: "\f189"; } .fa-vnv:before { content: "\f40b"; } .fa-voicemail:before { content: "\f897"; } .fa-volleyball-ball:before { content: "\f45f"; } .fa-volume-down:before { content: "\f027"; } .fa-volume-mute:before { content: "\f6a9"; } .fa-volume-off:before { content: "\f026"; } .fa-volume-up:before { content: "\f028"; } .fa-vote-yea:before { content: "\f772"; } .fa-vr-cardboard:before { content: "\f729"; } .fa-vuejs:before { content: "\f41f"; } .fa-walking:before { content: "\f554"; } .fa-wallet:before { content: "\f555"; } .fa-warehouse:before { content: "\f494"; } .fa-water:before { content: "\f773"; } .fa-wave-square:before { content: "\f83e"; } .fa-waze:before { content: "\f83f"; } .fa-weebly:before { content: "\f5cc"; } .fa-weibo:before { content: "\f18a"; } .fa-weight:before { content: "\f496"; } .fa-weight-hanging:before { content: "\f5cd"; } .fa-weixin:before { content: "\f1d7"; } .fa-whatsapp:before { content: "\f232"; } .fa-whatsapp-square:before { content: "\f40c"; } .fa-wheelchair:before { content: "\f193"; } .fa-whmcs:before { content: "\f40d"; } .fa-wifi:before { content: "\f1eb"; } .fa-wikipedia-w:before { content: "\f266"; } .fa-wind:before { content: "\f72e"; } .fa-window-close:before { content: "\f410"; } .fa-window-maximize:before { content: "\f2d0"; } .fa-window-minimize:before { content: "\f2d1"; } .fa-window-restore:before { content: "\f2d2"; } .fa-windows:before { content: "\f17a"; } .fa-wine-bottle:before { content: "\f72f"; } .fa-wine-glass:before { content: "\f4e3"; } .fa-wine-glass-alt:before { content: "\f5ce"; } .fa-wix:before { content: "\f5cf"; } .fa-wizards-of-the-coast:before { content: "\f730"; } .fa-wolf-pack-battalion:before { content: "\f514"; } .fa-won-sign:before { content: "\f159"; } .fa-wordpress:before { content: "\f19a"; } .fa-wordpress-simple:before { content: "\f411"; } .fa-wpbeginner:before { content: "\f297"; } .fa-wpexplorer:before { content: "\f2de"; } .fa-wpforms:before { content: "\f298"; } .fa-wpressr:before { content: "\f3e4"; } .fa-wrench:before { content: "\f0ad"; } .fa-x-ray:before { content: "\f497"; } .fa-xbox:before { content: "\f412"; } .fa-xing:before { content: "\f168"; } .fa-xing-square:before { content: "\f169"; } .fa-y-combinator:before { content: "\f23b"; } .fa-yahoo:before { content: "\f19e"; } .fa-yammer:before { content: "\f840"; } .fa-yandex:before { content: "\f413"; } .fa-yandex-international:before { content: "\f414"; } .fa-yarn:before { content: "\f7e3"; } .fa-yelp:before { content: "\f1e9"; } .fa-yen-sign:before { content: "\f157"; } .fa-yin-yang:before { content: "\f6ad"; } .fa-yoast:before { content: "\f2b1"; } .fa-youtube:before { content: "\f167"; } .fa-youtube-square:before { content: "\f431"; } .fa-zhihu:before { content: "\f63f"; } .sr-only { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .sr-only-focusable:active, .sr-only-focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } @font-face { font-family: 'Font Awesome 5 Brands'; font-style: normal; font-weight: normal; font-display: auto; src: url("../webfonts.html"); src: url("webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("webfonts/fa-brands-400.woff2") format("woff2"), url("webfonts/fa-brands-400.woff") format("woff"), url("webfonts/fa-brands-400.ttf") format("truetype"), url("webfonts/fa-brands-400.svg#fontawesome") format("svg"); } .fab { font-family: 'Font Awesome 5 Brands'; } @font-face { font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 400; font-display: auto; src: url("webfonts/fa-regular-400.eot"); src: url("webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("webfonts/fa-regular-400.woff2") format("woff2"), url("webfonts/fa-regular-400.woff") format("woff"), url("webfonts/fa-regular-400.ttf") format("truetype"), url("webfonts/fa-regular-400.svg#fontawesome") format("svg"); } .far { font-family: 'Font Awesome 5 Free'; font-weight: 400; } @font-face { font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 900; font-display: auto; src: url("webfonts/fa-solid-900.eot"); src: url("webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("webfonts/fa-solid-900.woff2") format("woff2"), url("webfonts/fa-solid-900.woff") format("woff"), url("webfonts/fa-solid-900.ttf") format("truetype"), url("webfonts/fa-solid-900.svg#fontawesome") format("svg"); } .fa, .fas { font-family: 'Font Awesome 5 Free'; font-weight: 900; } .cc-window{opacity:1;transition:opacity 1s ease}.cc-window.cc-invisible{opacity:0}.cc-animate.cc-revoke{transition:transform 1s ease}.cc-animate.cc-revoke.cc-top{transform:translateY(-2em)}.cc-animate.cc-revoke.cc-bottom{transform:translateY(2em)}.cc-animate.cc-revoke.cc-active.cc-bottom,.cc-animate.cc-revoke.cc-active.cc-top,.cc-revoke:hover{transform:translateY(0)}.cc-grower{max-height:0;overflow:hidden;transition:max-height 1s} .cc-link,.cc-revoke:hover{text-decoration:underline}.cc-revoke,.cc-window{position:fixed;overflow:hidden;box-sizing:border-box;font-family:Helvetica,Calibri,Arial,sans-serif;font-size:16px;line-height:1.5em;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;z-index:9999}.cc-window.cc-static{position:static}.cc-window.cc-floating{padding:2em;max-width:24em;-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner{padding:1em 1.8em;width:100%;-ms-flex-direction:row;flex-direction:row}.cc-revoke{padding:.5em}.cc-header{font-size:18px;font-weight:700}.cc-btn,.cc-close,.cc-link,.cc-revoke{cursor:pointer}.cc-link{opacity:.8;display:inline-block;padding:.2em}.cc-link:hover{opacity:1}.cc-link:active,.cc-link:visited{color:initial}.cc-btn{display:block;padding:.4em .8em;font-size:.9em;font-weight:700;border-width:2px;border-style:solid;text-align:center;white-space:nowrap}.cc-banner .cc-btn:last-child{min-width:140px}.cc-highlight .cc-btn:first-child{background-color:transparent;border-color:transparent}.cc-highlight .cc-btn:first-child:focus,.cc-highlight .cc-btn:first-child:hover{background-color:transparent;text-decoration:underline}.cc-close{display:block;position:absolute;top:.5em;right:.5em;font-size:1.6em;opacity:.9;line-height:.75}.cc-close:focus,.cc-close:hover{opacity:1} .cc-revoke.cc-top{top:0;left:3em;border-bottom-left-radius:.5em;border-bottom-right-radius:.5em}.cc-revoke.cc-bottom{bottom:0;left:3em;border-top-left-radius:.5em;border-top-right-radius:.5em}.cc-revoke.cc-left{left:3em;right:unset}.cc-revoke.cc-right{right:3em;left:unset}.cc-top{top:1em}.cc-left{left:1em}.cc-right{right:1em}.cc-bottom{bottom:1em}.cc-floating>.cc-link{margin-bottom:1em}.cc-floating .cc-message{display:block;margin-bottom:1em}.cc-window.cc-floating .cc-compliance{-ms-flex:1 0 auto;flex:1 0 auto}.cc-window.cc-banner{-ms-flex-align:center;align-items:center}.cc-banner.cc-top{left:0;right:0;top:0}.cc-banner.cc-bottom{left:0;right:0;bottom:0}.cc-banner .cc-message{-ms-flex:1;flex:1}.cc-compliance{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:justify;align-content:space-between}.cc-compliance>.cc-btn{-ms-flex:1;flex:1}.cc-btn+.cc-btn{margin-left:.5em} @media print{.cc-revoke,.cc-window{display:none}}@media screen and (max-width:900px){.cc-btn{white-space:normal}}@media screen and (max-width:414px) and (orientation:portrait),screen and (max-width:736px) and (orientation:landscape){.cc-window.cc-top{top:0}.cc-window.cc-bottom{bottom:0}.cc-window.cc-banner,.cc-window.cc-left,.cc-window.cc-right{left:0;right:0}.cc-window.cc-banner{-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner .cc-compliance{-ms-flex:1;flex:1}.cc-window.cc-floating{max-width:none}.cc-window .cc-message{margin-bottom:1em}.cc-window.cc-banner{-ms-flex-align:unset;align-items:unset}} .cc-floating.cc-theme-classic{padding:1.2em;border-radius:5px}.cc-floating.cc-type-info.cc-theme-classic .cc-compliance{text-align:center;display:inline;-ms-flex:none;flex:none}.cc-theme-classic .cc-btn{border-radius:5px}.cc-theme-classic .cc-btn:last-child{min-width:140px}.cc-floating.cc-type-info.cc-theme-classic .cc-btn{display:inline-block} .cc-theme-edgeless.cc-window{padding:0}.cc-floating.cc-theme-edgeless .cc-message{margin:2em 2em 1.5em}.cc-banner.cc-theme-edgeless .cc-btn{margin:0;padding:.8em 1.8em;height:100%}.cc-banner.cc-theme-edgeless .cc-message{margin-left:1em}.cc-floating.cc-theme-edgeless .cc-btn+.cc-btn{margin-left:0}