@charset "UTF-8"; @import url("//hello.myfonts.net/count/31b0b7"); html { box-sizing: border-box; } *, *::after, *::before { box-sizing: inherit; } button, input[type="button"], input[type="reset"], input[type="submit"], .button { appearance: none; background-color: #fff; border: 2px solid #0eacad; border-radius: 5px; color: #0eacad; cursor: pointer; display: inline-block; font-family: GrotaSansRd-Medium, GrotaSansRd, "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; font-size: 1.125em; font-weight: normal; line-height: 1; padding: 0.7em 1.4em 0.525em 1.4em; text-decoration: none; transition: all 150ms ease; user-select: none; vertical-align: middle; white-space: nowrap; } button:hover, button:focus, input[type="button"]:hover, input[type="button"]:focus, input[type="reset"]:hover, input[type="reset"]:focus, input[type="submit"]:hover, input[type="submit"]:focus, .button:hover, .button:focus { background-color: #f2f2f2; color: #0d9b9c; border-color: #0d9b9c; } button:disabled, input[type="button"]:disabled, input[type="reset"]:disabled, input[type="submit"]:disabled, .button:disabled { cursor: not-allowed; opacity: 0.5; } button:disabled:hover, input[type="button"]:disabled:hover, input[type="reset"]:disabled:hover, input[type="submit"]:disabled:hover, .button:disabled:hover { background-color: #1565c0; } a { transition: all 150ms ease; } a:hover { transition: all 150ms ease; } fieldset { background-color: transparent; border: 0; margin: 0; padding: 0; } legend { font-weight: normal; margin-bottom: 0.35em; padding: 0; } label { display: block; font-weight: normal; margin-bottom: 0.35em; } input, select { display: block; font-family: GrotaSansRd, "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; font-size: 1.125em; } input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]), textarea, select[multiple] { background-color: #fff; border: 1px solid #ddd; border-radius: 5px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06); box-sizing: border-box; font-family: GrotaSansRd, "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; font-size: 1.125em; margin-bottom: 0.7em; padding: 0.4666666667em; transition: border-color 150ms ease; width: 100%; } input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="email"]:hover, input[type="month"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="time"]:hover, input[type="url"]:hover, input[type="week"]:hover, input:not([type]):hover, textarea:hover, select[multiple]:hover { border-color: #b1b1b1; } input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="email"]:focus, input[type="month"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus, input:not([type]):focus, textarea:focus, select[multiple]:focus { border-color: #1565c0; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(18, 89, 169, 0.7); outline: none; } input[type="color"]:disabled, input[type="date"]:disabled, input[type="datetime"]:disabled, input[type="datetime-local"]:disabled, input[type="email"]:disabled, input[type="month"]:disabled, input[type="number"]:disabled, input[type="password"]:disabled, input[type="search"]:disabled, input[type="tel"]:disabled, input[type="text"]:disabled, input[type="time"]:disabled, input[type="url"]:disabled, input[type="week"]:disabled, input:not([type]):disabled, textarea:disabled, select[multiple]:disabled { background-color: #f2f2f2; cursor: not-allowed; } input[type="color"]:disabled:hover, input[type="date"]:disabled:hover, input[type="datetime"]:disabled:hover, input[type="datetime-local"]:disabled:hover, input[type="email"]:disabled:hover, input[type="month"]:disabled:hover, input[type="number"]:disabled:hover, input[type="password"]:disabled:hover, input[type="search"]:disabled:hover, input[type="tel"]:disabled:hover, input[type="text"]:disabled:hover, input[type="time"]:disabled:hover, input[type="url"]:disabled:hover, input[type="week"]:disabled:hover, input:not([type]):disabled:hover, textarea:disabled:hover, select[multiple]:disabled:hover { border: 1px solid #ddd; } textarea { resize: vertical; } [type="search"] { appearance: none; } [type="checkbox"], [type="radio"] { display: inline; margin-right: 0.35em; } [type="file"] { margin-bottom: 0.7em; width: 100%; } select { margin-bottom: 1.4em; max-width: 100%; width: auto; } ul, ol { list-style-type: none; margin: 0; padding: 0; } dl { margin-bottom: 0.7em; } dl dt { font-weight: normal; margin-top: 0.7em; } dl dd { margin: 0; } table { border-collapse: collapse; margin: 0.7em 0; table-layout: fixed; width: 100%; } th { border-bottom: 1px solid #a6a6a6; font-weight: normal; padding: 0.7em 0; text-align: left; } td { border-bottom: 1px solid #ddd; padding: 0.7em 0; } tr, td, th { vertical-align: middle; } /** @license MyFonts Webfont Build ID 3256503, 2016-07-26T08:48:52-0400 The fonts listed in this notice are subject to the End User License Agreement(s) entered into by the website owner. All other parties are explicitly restricted from using the Licensed Webfonts(s). You may obtain a valid license at the URLs below. Webfont: GrotaSansRd-Bold by Latinotype URL: http://www.myfonts.com/fonts/latinotype/grota-sans-rounded/bold/ Copyright: Copyright (c) 2014 by Eli Hernandez & Daniel Hernandez. All rights reserved. Webfont: GrotaSansRd-Medium by Latinotype URL: http://www.myfonts.com/fonts/latinotype/grota-sans-rounded/medium/ Copyright: Copyright (c) 2014 by Eli Hernandez & Daniel Hernandez. All rights reserved. Webfont: GrotaSansRd by Latinotype URL: http://www.myfonts.com/fonts/latinotype/grota-sans-rounded/regular/ Copyright: Copyright (c) 2015 by Eli Hernandez & Daniel Hernandez. All rights reserved. Webfont: GrotaSansRd-It by Latinotype URL: http://www.myfonts.com/fonts/latinotype/grota-sans-rounded/italic/ Copyright: Copyright (c) 2014 by Eli Hernandez & Daniel Hernandez. All rights reserved. License: http://www.myfonts.com/viewlicense?type=web&buildid=3256503 Licensed pageviews: 10,000 © 2016 MyFonts Inc */ /* @import must be at top of file, otherwise CSS will not work */ @font-face { font-family: 'GrotaSansRd-Bold'; src: url("/webfonts/31B0B7_0_0.eot"); src: url("/webfonts/31B0B7_0_0.eot?#iefix") format("embedded-opentype"), url("/webfonts/31B0B7_0_0.woff2") format("woff2"), url("/webfonts/31B0B7_0_0.woff") format("woff"), url("/webfonts/31B0B7_0_0.ttf") format("truetype"); } @font-face { font-family: 'GrotaSansRd-Medium'; src: url("/webfonts/31B0B7_1_0.eot"); src: url("/webfonts/31B0B7_1_0.eot?#iefix") format("embedded-opentype"), url("/webfonts/31B0B7_1_0.woff2") format("woff2"), url("/webfonts/31B0B7_1_0.woff") format("woff"), url("/webfonts/31B0B7_1_0.ttf") format("truetype"); } @font-face { font-family: 'GrotaSansRd'; src: url("/webfonts/31B0B7_2_0.eot"); src: url("/webfonts/31B0B7_2_0.eot?#iefix") format("embedded-opentype"), url("/webfonts/31B0B7_2_0.woff2") format("woff2"), url("/webfonts/31B0B7_2_0.woff") format("woff"), url("/webfonts/31B0B7_2_0.ttf") format("truetype"); } @font-face { font-family: 'GrotaSansRd-It'; src: url("/webfonts/31B0B7_3_0.eot"); src: url("/webfonts/31B0B7_3_0.eot?#iefix") format("embedded-opentype"), url("/webfonts/31B0B7_3_0.woff2") format("woff2"), url("/webfonts/31B0B7_3_0.woff") format("woff"), url("/webfonts/31B0B7_3_0.ttf") format("truetype"); } body { color: #555; font-family: GrotaSansRd, "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; font-size: 1.125em; line-height: 1.4; } h1, h2, h3, h4, h5, h6 { font-family: GrotaSansRd, "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; font-size: 1.125em; line-height: 1.2; margin: 0 0 0.7em; font-weight: normal; font-style: normal; } strong { font-family: GrotaSansRd-Bold; font-weight: normal; font-style: normal; } p { margin: 0 0 0.7em; } a { color: #1565c0; text-decoration: none; transition: color 150ms ease; } a:active, a:focus, a:hover { color: #104c90; } hr { border-bottom: 1px solid #ddd; border-left: 0; border-right: 0; border-top: 0; margin: 1.4em 0; } img, picture { margin: 0; max-width: 100%; } #footer { background-color: #fff; padding: 1.4em 20px; width: 100%; } #footer section { max-width: 1000px; margin-left: auto; margin-right: auto; } #footer section::after { clear: both; content: ""; display: table; } #footer section .footerlogo { float: left; display: block; margin-right: 2.1276595745%; width: 23.4042553191%; } #footer section .footerlogo:last-child { margin-right: 0; } @media screen and (max-width: 1000px) { #footer section .footerlogo { float: left; display: block; margin-right: 2.1276595745%; width: 40.4255319149%; } #footer section .footerlogo:last-child { margin-right: 0; } } @media screen and (max-width: 530px) { #footer section .footerlogo { float: left; display: block; margin-right: 2.1276595745%; width: 57.4468085106%; margin-right: 0; } #footer section .footerlogo:last-child { margin-right: 0; } } #footer section .footeraddress { float: left; display: block; margin-right: 2.1276595745%; width: 74.4680851064%; padding-top: 10px; color: #999; } #footer section .footeraddress:last-child { margin-right: 0; } @media screen and (max-width: 1000px) { #footer section .footeraddress { float: left; display: block; margin-right: 2.1276595745%; width: 57.4468085106%; } #footer section .footeraddress:last-child { margin-right: 0; } } @media screen and (max-width: 530px) { #footer section .footeraddress { float: left; display: block; margin-right: 2.1276595745%; width: 100%; } #footer section .footeraddress:last-child { margin-right: 0; } } #footer section .footeraddress .small { font-size: 0.7501875469em; } #footer section .footeraddress a { color: #999; text-decoration: underline; } body { margin: 0; padding: 0; background-color: #0eacad; } body li { border-color: #0eacad; } body #body h1, body #body h2, body #body a { color: #0eacad; } body header { background-color: #ffffff; background-image: -webkit-linear-gradient(-360deg, #ffffff 0%, #ffffff 50%, #0eacad 50%, #0eacad 100%); background-image: linear-gradient(90deg,#ffffff 0%, #ffffff 50%, #0eacad 50%, #0eacad 100%); } body.page-ouderwerking, body.page-kalender { background-color: #f18621; } body.page-ouderwerking li, body.page-ouderwerking .button, body.page-kalender li, body.page-kalender .button { border-color: #f18621; } body.page-ouderwerking #body h1, body.page-ouderwerking #body h2, body.page-ouderwerking #body a, body.page-kalender #body h1, body.page-kalender #body h2, body.page-kalender #body a { color: #f18621; } body.page-ouderwerking #body section > h2, body.page-kalender #body section > h2 { border-bottom-color: #f18621; } body.page-nieuws { background-color: #d63250; } body.page-nieuws li, body.page-nieuws .button { border-color: #d63250; } body.page-nieuws #body h1, body.page-nieuws #body h2, body.page-nieuws #body a { color: #d63250; } body.page-nieuws #body section > h2 { border-bottom-color: #d63250; } body.page-klasblogs { background-color: #01a170; } body.page-klasblogs li, body.page-klasblogs .button { border-color: #01a170; } body.page-klasblogs #body h1, body.page-klasblogs #body h2, body.page-klasblogs #body a { color: #01a170; } body.page-klasblogs #body section > h2 { border-bottom-color: #01a170; } #background { position: relative; width: 100%; z-index: 1; line-height: 0; } #background div { position: absolute; bottom: 0; width: 100%; height: auto; } #background div img { width: 100%; } #blogheader { max-width: 1000px; margin-left: auto; margin-right: auto; } #blogheader::after { clear: both; content: ""; display: table; } #blogheader .blogheadercenter { float: left; display: block; margin-right: 2.1276595745%; width: 100%; text-align: center; color: #fff; padding: 1.4em; } #blogheader .blogheadercenter:last-child { margin-right: 0; } #blogheader .blogheadercenter p { margin: 0; line-height: 1; } #blogheader .blogheadercenter .group { font-size: 1.776889em; font-family: GrotaSansRd-Bold, "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; margin-bottom: 20px; } #blogheader .blogheadercenter .klasvan { font-size: 3.1573345183em; font-family: GrotaSansRd-Bold, "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; text-transform: uppercase; margin-bottom: 10px; } #blogheader .blogheadercenter .bij { font-size: 1.776889em; font-family: GrotaSansRd-It, "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; } #content { position: relative; width: 100%; z-index: 2; margin-top: -5.5555555556rem; margin-top: -10vw; padding: 0 1.1111111111rem; } #content.contentwithheader { margin-top: 0; } @media screen and (max-width: 530px) { #content { padding: 0 0.5555555556rem; } } #content #body { max-width: 1000px; margin-left: auto; margin-right: auto; background-color: #fff; padding: 1.4em; border-radius: 5px; } #content #body::after { clear: both; content: ""; display: table; } #content #body section { float: left; display: block; margin-right: 2.1276595745%; width: 100%; } #content #body section:last-child { margin-right: 0; } #content #body .klasblogintro { float: left; display: block; margin-right: 2.1276595745%; width: 57.4468085106%; } #content #body .klasblogintro:last-child { margin-right: 0; } @media screen and (max-width: 1000px) { #content #body .klasblogintro { float: left; display: block; margin-right: 2.1276595745%; width: 48.9361702128%; } #content #body .klasblogintro:last-child { margin-right: 0; } } @media screen and (max-width: 530px) { #content #body .klasblogintro { float: left; display: block; margin-right: 2.1276595745%; width: 100%; } #content #body .klasblogintro:last-child { margin-right: 0; } } #content #body .klasblogimage { float: left; display: block; margin-right: 2.1276595745%; width: 31.914893617%; float: right; text-align: center; } #content #body .klasblogimage:last-child { margin-right: 0; } @media screen and (max-width: 1000px) { #content #body .klasblogimage { float: left; display: block; margin-right: 2.1276595745%; width: 40.4255319149%; } #content #body .klasblogimage:last-child { margin-right: 0; } } @media screen and (max-width: 530px) { #content #body .klasblogimage { float: left; display: block; margin-right: 2.1276595745%; width: 100%; } #content #body .klasblogimage:last-child { margin-right: 0; } } #content #body .klasblogimage img { border-radius: 50%; width: 80%; } @media screen and (max-width: 530px) { #content #body .klasblogimage img { width: 50%; } } #content #body .klasblogimage .sub { font-size: 0.7501875469em; color: #999; } @media screen and (max-width: 530px) { #content #body .klasblogimage { padding-bottom: 2.8em; } } #content #body .downloads { width: 100%; margin-left: -1.4em; margin-right: -1.4em; margin-bottom: -1.4em; padding: 1.4em; box-sizing: content-box; background-color: #ddd; float: left; clear: both; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } #content #body .downloads ul { list-style: square inside none; padding-left: 2.8em; } #content #body .downloads h5 { padding-left: 2.8em; } @media screen and (max-width: 1000px) { #content #body .downloads ul { padding-left: 0; } #content #body .downloads h5 { padding-left: 0; } } #content #body #contentheader { text-align: center; padding-top: 1.4em; padding-bottom: 2.8em; } #content #body #contentheader .postedon { color: #999; } #content #body #contentheader .head-icon { width: 70px; max-width: 70px; } #content #body #contentheader .email { font-size: 1.333em; color: #0eacad; } #content #body #contentheader .email a { color: #0eacad; text-decoration: underline; } #content #body #contentheader .phone { font-size: 1.333em; color: #0eacad; } #content #body #contentheader .address a { color: #0eacad; text-decoration: underline; } #content #body #contentheader h1 { font-size: 4.2087269129em; font-family: GrotaSansRd-Bold; } @media screen and (max-width: 1000px) { #content #body #contentheader h1 { font-size: 3.1573345183em; } } @media screen and (max-width: 530px) { #content #body #contentheader h1 { font-size: 2.368593037em; } } #content #body #contentheader ul li { display: inline-block; border-right: 1px solid #333; padding-right: 0.7em; margin-right: 0.35em; margin-left: 0; padding-left: 0; } #content #body #contentheader ul li.last { border-right: none; padding-right: 0; margin-right: 0; } #content #body #contentheader ul li.first { border-right: none; margin-right: 0; } #content #body h4 { font-family: GrotaSansRd-Bold; } #content #body article { float: left; display: block; margin-right: 2.1276595745%; width: 100%; padding-bottom: 2.8em; } #content #body article:last-child { margin-right: 0; } #content #body article ul { list-style: square outside none; padding-left: 2.8em; } #content #body article.centered { padding-left: 2.8em; padding-right: 2.8em; } @media screen and (max-width: 1000px) { #content #body article.centered { padding-left: 2.8em; padding-right: 2.8em; } } @media screen and (max-width: 530px) { #content #body article.centered { padding-left: 0em; padding-right: 0em; } } #content #body article.intro p { font-size: 1.333em; } #content #body article.images { padding-left: 5.6em; padding-right: 5.6em; } @media screen and (max-width: 1000px) { #content #body article.images { padding-left: 2.8em; padding-right: 2.8em; } } @media screen and (max-width: 530px) { #content #body article.images { padding-left: 0em; padding-right: 0em; } } #content #body article.images figure { margin: 0 0 1.4em 0; } #content #body article.images img { max-height: 700px; } #content #body article.contacttable { padding-left: 11.2em; padding-right: 11.2em; } @media screen and (max-width: 1000px) { #content #body article.contacttable { padding-left: 5.6em; padding-right: 5.6em; } } @media screen and (max-width: 530px) { #content #body article.contacttable { padding-left: 0em; padding-right: 0em; } } #content #body article.people ul li { float: left; display: block; margin-right: 2.1276595745%; width: 23.4042553191%; text-align: center; padding-bottom: 1.4em; } #content #body article.people ul li:last-child { margin-right: 0; } #content #body article.people ul li:nth-child(4n) { margin-right: 0; } #content #body article.people ul li:nth-child(4n+1) { clear: left; } @media screen and (max-width: 1000px) { #content #body article.people ul li { float: left; display: block; margin-right: 2.1276595745%; width: 31.914893617%; } #content #body article.people ul li:nth-child(4n) { margin-right: 2.1276595745%; } #content #body article.people ul li:nth-child(4n+1) { clear: none; } #content #body article.people ul li:last-child { margin-right: 0; } #content #body article.people ul li:nth-child(3n) { margin-right: 0; } #content #body article.people ul li:nth-child(3n+1) { clear: left; } } @media screen and (max-width: 530px) { #content #body article.people ul li { float: left; display: block; margin-right: 2.1276595745%; width: 48.9361702128%; } #content #body article.people ul li:nth-child(3n) { margin-right: 2.1276595745%; } #content #body article.people ul li:nth-child(3n+1) { clear: none; } #content #body article.people ul li:last-child { margin-right: 0; } #content #body article.people ul li:nth-child(2n) { margin-right: 0; } #content #body article.people ul li:nth-child(2n+1) { clear: left; } } #content #body article.people ul li img { border-radius: 50%; width: 80%; } #content #body article.people ul li h1 { margin: 0; font-family: GrotaSansRd-Bold; } #content #body article.people ul li h2 { margin: 0; } #content #body article.blogblocks a { float: left; display: block; margin-right: 2.1276595745%; width: 23.4042553191%; background-color: #ddd; height: 220px; border-radius: 5px; transition: all 150ms ease; text-align: center; padding: 1.4em; margin-bottom: 1.4em; } #content #body article.blogblocks a:last-child { margin-right: 0; } #content #body article.blogblocks a:nth-child(4n) { margin-right: 0; } #content #body article.blogblocks a:nth-child(4n+1) { clear: left; } @media screen and (max-width: 1000px) { #content #body article.blogblocks a { float: left; display: block; margin-right: 2.1276595745%; width: 48.9361702128%; } #content #body article.blogblocks a:nth-child(4n) { margin-right: 2.1276595745%; } #content #body article.blogblocks a:nth-child(4n+1) { clear: none; } #content #body article.blogblocks a:last-child { margin-right: 0; } #content #body article.blogblocks a:nth-child(2n) { margin-right: 0; } #content #body article.blogblocks a:nth-child(2n+1) { clear: left; } } @media screen and (max-width: 530px) { #content #body article.blogblocks a { float: left; display: block; margin-right: 2.1276595745%; width: 100%; margin-right: 0; } #content #body article.blogblocks a:nth-child(2n) { margin-right: 2.1276595745%; } #content #body article.blogblocks a:nth-child(2n+1) { clear: none; } #content #body article.blogblocks a:last-child { margin-right: 0; } } #content #body article.blogblocks a img { width: 100px; border-radius: 50%; } #content #body article.blogblocks a h1 { margin: 0; font-family: GrotaSansRd-Bold; font-size: 1.333em; color: #fff; } #content #body article.blogblocks a h2 { margin: 0; font-size: 1.333em; color: #fff; } #content #body article.blogblocks a:nth-child(n) { /* or 4n+1 */ background-color: #f18621; } #content #body article.blogblocks a:nth-child(n):hover { background: #d9791e; } #content #body article.blogblocks a:nth-child(2n) { /* or 4n+1 */ background-color: #0eacad; } #content #body article.blogblocks a:nth-child(2n):hover { background: #0d9b9c; } #content #body article.blogblocks a:nth-child(3n) { /* or 4n+1 */ background-color: #01a170; } #content #body article.blogblocks a:nth-child(3n):hover { background: #019165; } #content #body article.blogblocks a:nth-child(4n) { /* or 4n+1 */ background-color: #d63250; } #content #body article.blogblocks a:nth-child(4n):hover { background: #c12d48; } #content #body section > h2 { font-weight: normal; font-size: 1.776889em; border-bottom-style: solid; border-bottom-width: 2px; padding-bottom: 0.35em; margin-bottom: 0.7em; text-align: center; font-family: GrotaSansRd-Bold; float: left; display: block; margin-right: 2.1276595745%; width: 100%; } #content #body section > h2:last-child { margin-right: 0; } #content #body section > h3 { font-weight: normal; font-size: 1.333em; color: #999; background-color: #fff; border-bottom: 1px solid #999; padding-bottom: 0.35em; margin-bottom: 0.7em; text-align: center; float: left; display: block; margin-right: 2.1276595745%; width: 100%; } #content #body section > h3:last-child { margin-right: 0; } #content #mountain { max-width: 1000px; margin-left: auto; margin-right: auto; margin-top: 2.8em; line-height: 0; } #content #mountain::after { clear: both; content: ""; display: table; } #content #mountain img { width: 100%; } #content #body article.homepage { padding-left: 9.8em; padding-right: 9.8em; padding-top: 2.8em; text-align: center; } @media screen and (max-width: 1000px) { #content #body article.homepage { padding-left: 1.4em; padding-right: 1.4em; padding-top: 1.4em; } } @media screen and (max-width: 530px) { #content #body article.homepage { padding-left: 0em; padding-right: 0em; padding-top: 0em; } } #content #body article.homepageprikbord { float: left; display: block; margin-right: 2.1276595745%; width: 100%; } #content #body article.homepageprikbord:last-child { margin-right: 0; } #content #body article.homepageprikbord .items1 .prik { float: left; display: block; margin-right: 2.1276595745%; width: 100%; margin-right: 0; } #content #body article.homepageprikbord .items1 .prik:last-child { margin-right: 0; } #content #body article.homepageprikbord .items2 .prik { float: left; display: block; margin-right: 2.1276595745%; width: 48.9361702128%; } #content #body article.homepageprikbord .items2 .prik:last-child { margin-right: 0; } #content #body article.homepageprikbord .items2 .prik:nth-child(2n) { margin-right: 0; } #content #body article.homepageprikbord .items2 .prik:nth-child(2n+1) { clear: left; } @media screen and (max-width: 530px) { #content #body article.homepageprikbord .items2 .prik { float: left; display: block; margin-right: 2.1276595745%; width: 100%; margin-right: 0; } #content #body article.homepageprikbord .items2 .prik:nth-child(2n) { margin-right: 2.1276595745%; } #content #body article.homepageprikbord .items2 .prik:nth-child(2n+1) { clear: none; } #content #body article.homepageprikbord .items2 .prik:last-child { margin-right: 0; } } #content #body article.homepageprikbord .items3 .prik { float: left; display: block; margin-right: 2.1276595745%; width: 31.914893617%; } #content #body article.homepageprikbord .items3 .prik:last-child { margin-right: 0; } #content #body article.homepageprikbord .items3 .prik:nth-child(3n) { margin-right: 0; } #content #body article.homepageprikbord .items3 .prik:nth-child(3n+1) { clear: left; } @media screen and (max-width: 530px) { #content #body article.homepageprikbord .items3 .prik { float: left; display: block; margin-right: 2.1276595745%; width: 100%; margin-right: 0; } #content #body article.homepageprikbord .items3 .prik:nth-child(3n) { margin-right: 2.1276595745%; } #content #body article.homepageprikbord .items3 .prik:nth-child(3n+1) { clear: none; } #content #body article.homepageprikbord .items3 .prik:last-child { margin-right: 0; } } #content #body article.homepageprikbord .items4 .prik { float: left; display: block; margin-right: 2.1276595745%; width: 23.4042553191%; } #content #body article.homepageprikbord .items4 .prik:last-child { margin-right: 0; } #content #body article.homepageprikbord .items4 .prik:nth-child(4n) { margin-right: 0; } #content #body article.homepageprikbord .items4 .prik:nth-child(4n+1) { clear: left; } @media screen and (max-width: 1000px) { #content #body article.homepageprikbord .items4 .prik { float: left; display: block; margin-right: 2.1276595745%; width: 48.9361702128%; } #content #body article.homepageprikbord .items4 .prik:nth-child(4n) { margin-right: 2.1276595745%; } #content #body article.homepageprikbord .items4 .prik:nth-child(4n+1) { clear: none; } #content #body article.homepageprikbord .items4 .prik:last-child { margin-right: 0; } #content #body article.homepageprikbord .items4 .prik:nth-child(2n) { margin-right: 0; } #content #body article.homepageprikbord .items4 .prik:nth-child(2n+1) { clear: left; } } @media screen and (max-width: 530px) { #content #body article.homepageprikbord .items4 .prik { float: left; display: block; margin-right: 2.1276595745%; width: 100%; margin-right: 0; } #content #body article.homepageprikbord .items4 .prik:nth-child(2n) { margin-right: 2.1276595745%; } #content #body article.homepageprikbord .items4 .prik:nth-child(2n+1) { clear: none; } #content #body article.homepageprikbord .items4 .prik:last-child { margin-right: 0; } } #content #body article.homepageprikbord .items1, #content #body article.homepageprikbord .items2, #content #body article.homepageprikbord .items3, #content #body article.homepageprikbord .items4 { width: 100%; } #content #body article.homepageprikbord .prik { background: #f18621; border-bottom-left-radius: 5px; border-top-left-radius: 5px; border-bottom-right-radius: 5px; border-top-right-radius: 5px; color: #fff; text-align: center; padding: 1.4em; height: 240px; margin-bottom: 1.4em; } #content #body article.homepageprikbord .prik.mascottecontainer { padding: 0.7em; } #content #body article.homepageprikbord .prik.mascottecontainer div { padding: 0.7em; background-color: #fff; width: 100%; height: 100%; background-image: url(http://www.dribbelpeuterspeelzaal.nl/gfx/dribbel.png); background-size: contain; background-repeat: no-repeat; background-position: center center; } #content #body article.homepageprikbord a.prik { cursor: pointer; background-color: #f18621; transition: all 150ms ease; } #content #body article.homepageprikbord a.prik:hover { background: #d9791e; } #content #body article.homepageprikbord a.prik.item2 { background: #0eacad; } #content #body article.homepageprikbord a.prik.item2:hover { background: #0d9b9c; } #content #body article.homepageprikbord a.prik.item3 { background: #d63250; } #content #body article.homepageprikbord a.prik.item3:hover { background: #c12d48; } #content #body article.homepageprikbord a.prik.item4 { background: #01a170; } #content #body article.homepageprikbord a.prik.item4:hover { background: #019165; } #content #body article.homepageprikbord .prik.item1 { background: #f18621; } #content #body article.homepageprikbord .prik.item2 { background: #0eacad; } #content #body article.homepageprikbord .prik.item3 { background: #d63250; } #content #body article.homepageprikbord .prik.item4 { background: #01a170; } #content #body article.meernieuws { text-align: center; } #content #body article.homepagenieuws { float: left; display: block; margin-right: 2.1276595745%; width: 100%; padding-bottom: 0; } #content #body article.homepagenieuws:last-child { margin-right: 0; } #content #body article.homepagenieuws .nieuwsitem-compact { display: flex; width: 100%; flex-direction: row; align-items: center; cursor: pointer; margin-bottom: 1.4em; padding: 1.4em; border-bottom-left-radius: 5px; border-top-left-radius: 5px; border-bottom-right-radius: 5px; border-top-right-radius: 5px; transition: all 150ms ease; } #content #body article.homepagenieuws .nieuwsitem-compact p { margin: 0; color: #fff; } #content #body article.homepagenieuws .nieuwsitem { display: flex; width: 100%; flex-direction: row; align-items: center; cursor: pointer; margin-bottom: 1.4em; border-bottom-left-radius: 5px; border-top-left-radius: 5px; border-bottom-right-radius: 5px; border-top-right-radius: 5px; transition: all 150ms ease; } #content #body article.homepagenieuws .nieuwsitem .left { border-bottom-left-radius: 5px; border-top-left-radius: 5px; } #content #body article.homepagenieuws .nieuwsitem .right { border-bottom-right-radius: 5px; border-top-right-radius: 5px; } #content #body article.homepagenieuws .nieuwsitem .text { flex-basis: 250px; height: 350px; display: flex; align-items: center; padding: 1.4em; text-align: center; } #content #body article.homepagenieuws .nieuwsitem .text .content { width: 100%; text-align: center; color: #fff; } @media screen and (max-width: 530px) { #content #body article.homepagenieuws .nieuwsitem .text { flex-basis: 200px; } } #content #body article.homepagenieuws .nieuwsitem .image { height: 350px; flex-grow: 1; background-size: cover; background-repeat: no-repeat; background-position: center; } #content #body article.homepagenieuws a:nth-child(1n) { background: #d63250; } #content #body article.homepagenieuws a:nth-child(1n):hover { background: #c12d48; } #content #body article.homepagenieuws a:nth-child(2n) { background: #0eacad; } #content #body article.homepagenieuws a:nth-child(2n):hover { background: #0d9b9c; } #content #body article.homepagenieuws a:nth-child(3n) { background: #f18621; } #content #body article.homepagenieuws a:nth-child(3n):hover { background: #d9791e; } #content #body article.homepagenieuws a:nth-child(4n) { background: #01a170; } #content #body article.homepagenieuws a:nth-child(4n):hover { background: #019165; } header { position: relative; z-index: 999; width: 100%; padding: 0 1.1111111111rem; } @media screen and (max-width: 530px) { header { padding: 0; } } header #header { max-width: 1000px; margin-left: auto; margin-right: auto; line-height: 1.2; } header #header::after { clear: both; content: ""; display: table; } header #header .subnav { display: flex; flex-direction: row; align-items: stretch; } header #header .subnav .left { flex-basis: 11.3333333333rem; padding-top: 1.4em; } @media screen and (max-width: 530px) { header #header .subnav .left { display: none; } } header #header .subnav .right { flex-grow: 1; background-color: #0eacad; text-align: right; color: #fff; padding-top: 1.4em; font-size: 0.7501875469em; } header #header .subnav .right a { color: #fff; } @media screen and (max-width: 530px) { header #header .subnav .right { background-color: #fff; text-align: center; color: #999; padding-bottom: 1.4em; } header #header .subnav .right a { color: #999; } } header #header .container { display: flex; flex-direction: row; align-items: stretch; } @media screen and (max-width: 530px) { header #header .container { display: inline; } } header #header .container .logo { align-self: flex-end; flex-basis: 11.3333333333rem; padding-bottom: 1.4em; } header #header .container .logo .desktop { width: 10.2222222222rem; } header #header .container .logo .mobile { display: none; } @media screen and (max-width: 530px) { header #header .container .logo { width: 100%; background-color: #fff; padding-left: 1.4em; padding-right: 1.4em; } header #header .container .logo .desktop { display: none; } header #header .container .logo .mobile { width: 100%; display: inline; } } header #header .container .items { flex-grow: 1; display: flex; flex-direction: row; align-items: flex-end; background-color: #0eacad; padding-bottom: 1.4em; } header #header .container .items .menuitem { flex-grow: 1; text-align: center; color: #fff; } header #header .container .items .menuitem img { width: 2.7777777778rem; margin-bottom: 0.5555555556rem; } @media screen and (max-width: 530px) { header #header .container .items .menuitem img { width: 1.6666666667rem; margin-top: 0.5555555556rem; } }